• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Simple Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8.   <style>
    9.     .increased {
    10.       color: #66bb6a;
    11.     }
    12.  
    13.     .increased::before {
    14.       content: '↑';
    15.     }
    16.  
    17.     .decreased {
    18.       color: #ef5350;
    19.     }
    20.  
    21.     .decreased::before {
    22.       content: '↓';
    23.     }
    24.  
    25.     .highlight {
    26.       background: #fff59d;
    27.     }
    28.  
    29.     zing-grid[loading] {
    30.       height: 142px;
    31.     }
    32.   </style>
    33. </head>
    34.  
    35. <body>
    36.   <!-- Define grid component -->
    37.   <zing-grid caption="Namespace Render" layout="row" layout-controls="disabled" viewport-stop>
    38.     <!-- Define explicit column rendering -->
    39.     <zg-colgroup>
    40.       <!-- define custom rendered class values for cells -->
    41.       <zg-column index="open" type="currency" cell-class="n1._renderStocks"></zg-column>
    42.       <zg-column index="high" type="currency" cell-class="n1._highlightHigh"></zg-column>
    43.       <zg-column index="low" type="currency" cell-class="n1._highlightLow"></zg-column>
    44.       <!-- standard rendered columns -->
    45.       <zg-column index="close" type="currency"></zg-column>
    46.       <zg-column index="volume" type="number"></zg-column>
    47.     </zg-colgroup>
    48.   </zing-grid>
    49.   <script>
    50.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // namespace to simulate an ecapsulated class or component
    51.     const namespace1 = {
    52.       // global vars for highlight min/max values
    53.       gHigh: -1,
    54.       gLow: Number.MAX_SAFE_INTEGER,
    55.  
    56.       // determine if we should render positive/negative
    57.       // cell styling based on opening stock price vs when it last
    58.       // closed
    59.       _renderStocks: function(open, cellDOMRef, cellRef) {
    60.         // if open is higher than close value
    61.         if (open > cellRef.record.close) return 'stock-open increased';
    62.  
    63.         return 'stock-open decreased';
    64.       },
    65.  
    66.       // highlight cell with highest value in high column
    67.       _highlightHigh: function(high, cellDOMRef, cellRef) {
    68.         if (high == Number(this.gHigh)) return 'highlight';
    69.       },
    70.  
    71.       // highlight cell with lowest value in low column
    72.       _highlightLow: function(low, cellDOMRef, cellRef) {
    73.         if (low == Number(this.gLow)) return 'highlight';
    74.       },
    75.  
    76.     };
    77.  
    78.  
    79.  
    80.     // set interval to simulate realtime data
    81.     window.addEventListener('load', () => {
    82.  
    83.       // register namespace to alias "n1" where "this" references the 
    84.       // namespace1 scope as well
    85.       ZingGrid.registerNamespace(namespace1, 'n1', namespace1);
    86.  
    87.       // save reference to the grid
    88.       const zgRef = document.querySelector('zing-grid');
    89.  
    90.       // interval mimics real time data updates
    91.       setInterval(() => {
    92.         // regenerate the same starting dataset everytime to 
    93.         // produce better visual results
    94.         let realTimeData = [{
    95.           open: 114.1900,
    96.           high: 114.4950,
    97.           low: 113.6800,
    98.           close: 114.2750,
    99.           volume: 7120112
    100.         }, {
    101.           open: 113.0300,
    102.           high: 114.9000,
    103.           low: 112.2175,
    104.           close: 114.6700,
    105.           volume: 27334460
    106.         }, {
    107.           open: 113.0500,
    108.           high: 113.3200,
    109.           low: 111.0350,
    110.           close: 111.7000,
    111.           volume: 21728429
    112.         }, {
    113.           open: 112.1900,
    114.           high: 113.6950,
    115.           low: 111.7200,
    116.           close: 113.2100,
    117.           volume: 22170934
    118.         }, {
    119.           open: 113.6900,
    120.           high: 113.7000,
    121.           low: 111.8600,
    122.           close: 112.1400,
    123.           volume: 20736516
    124.         }];
    125.  
    126.         // reset global vars for highlighint min/max cells
    127.         namespace1.gHigh = -1;
    128.         namespace1.gLow = Number.MAX_SAFE_INTEGER;
    129.  
    130.         // update data to mimic realtime updates
    131.         realTimeData.map(values => {
    132.  
    133.           // randomly choose to. inc/dec values to 
    134.           // simulate stock exchanges
    135.           if (Math.round(Math.random())) {
    136.             values.open = (values.open - 1);
    137.             values.high = (values.high - 1);
    138.             values.low = (values.low - 1);
    139.             values.close = (values.close + 1);
    140.             values.volume = (values.volume - 100);
    141.           } else {
    142.             values.open = (values.open + Math.floor(Math.random() * 5));
    143.             values.high = (values.high + 1);
    144.             values.low = (values.low + 1);
    145.             values.close = (values.close - 1);
    146.             values.volume = (values.volume + 100);
    147.           }
    148.  
    149.           // set new global high/low values
    150.           if (values.high >= namespace1.gHigh) namespace1.gHigh = values.high;
    151.           if (values.low <= namespace1.gLow) namespace1.gLow = values.low;
    152.  
    153.           return values;
    154.         });
    155.  
    156.         // assign data to grid
    157.         if (zgRef) zgRef.setData(realTimeData);
    158.       }, 1000);
    159.     });
    160.   </script>
    161. </body>
    162.  
    163. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Simple Grid</title>
    7.   <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <!-- Define grid component -->
    12.   <zing-grid caption="Namespace Render" layout="row" layout-controls="disabled" viewport-stop>
    13.     <!-- Define explicit column rendering -->
    14.     <zg-colgroup>
    15.       <!-- define custom rendered class values for cells -->
    16.       <zg-column index="open" type="currency" cell-class="n1._renderStocks"></zg-column>
    17.       <zg-column index="high" type="currency" cell-class="n1._highlightHigh"></zg-column>
    18.       <zg-column index="low" type="currency" cell-class="n1._highlightLow"></zg-column>
    19.       <!-- standard rendered columns -->
    20.       <zg-column index="close" type="currency"></zg-column>
    21.       <zg-column index="volume" type="number"></zg-column>
    22.     </zg-colgroup>
    23.   </zing-grid>
    24. </body>
    25.  
    26. </html>
    1. .increased {
    2.   color: #66bb6a;
    3. }
    4.  
    5. .increased::before {
    6.   content: '↑';
    7. }
    8.  
    9. .decreased {
    10.   color: #ef5350;
    11. }
    12.  
    13. .decreased::before {
    14.   content: '↓';
    15. }
    16.  
    17. .highlight {
    18.   background: #fff59d;
    19. }
    1. // namespace to simulate an ecapsulated class or component
    2. const namespace1 = {
    3.   // global vars for highlight min/max values
    4.   gHigh: -1,
    5.   gLow: Number.MAX_SAFE_INTEGER,
    6.  
    7.   // determine if we should render positive/negative
    8.   // cell styling based on opening stock price vs when it last
    9.   // closed
    10.   _renderStocks: function(open, cellDOMRef, cellRef) {
    11.     // if open is higher than close value
    12.     if (open > cellRef.record.close) return 'stock-open increased';
    13.  
    14.     return 'stock-open decreased';
    15.   },
    16.  
    17.   // highlight cell with highest value in high column
    18.   _highlightHigh: function(high, cellDOMRef, cellRef) {
    19.     if (high == Number(this.gHigh)) return 'highlight';
    20.   },
    21.  
    22.   // highlight cell with lowest value in low column
    23.   _highlightLow: function(low, cellDOMRef, cellRef) {
    24.     if (low == Number(this.gLow)) return 'highlight';
    25.   },
    26.  
    27. };
    28.  
    29.  
    30.  
    31. // set interval to simulate realtime data
    32. window.addEventListener('load', () => {
    33.  
    34.   // register namespace to alias "n1" where "this" references the 
    35.   // namespace1 scope as well
    36.   ZingGrid.registerNamespace(namespace1, 'n1', namespace1);
    37.  
    38.   // save reference to the grid
    39.   const zgRef = document.querySelector('zing-grid');
    40.  
    41.   // interval mimics real time data updates
    42.   setInterval(() => {
    43.     // regenerate the same starting dataset everytime to 
    44.     // produce better visual results
    45.     let realTimeData = [{
    46.       open: 114.1900,
    47.       high: 114.4950,
    48.       low: 113.6800,
    49.       close: 114.2750,
    50.       volume: 7120112
    51.     }, {
    52.       open: 113.0300,
    53.       high: 114.9000,
    54.       low: 112.2175,
    55.       close: 114.6700,
    56.       volume: 27334460
    57.     }, {
    58.       open: 113.0500,
    59.       high: 113.3200,
    60.       low: 111.0350,
    61.       close: 111.7000,
    62.       volume: 21728429
    63.     }, {
    64.       open: 112.1900,
    65.       high: 113.6950,
    66.       low: 111.7200,
    67.       close: 113.2100,
    68.       volume: 22170934
    69.     }, {
    70.       open: 113.6900,
    71.       high: 113.7000,
    72.       low: 111.8600,
    73.       close: 112.1400,
    74.       volume: 20736516
    75.     }];
    76.  
    77.     // reset global vars for highlighint min/max cells
    78.     namespace1.gHigh = -1;
    79.     namespace1.gLow = Number.MAX_SAFE_INTEGER;
    80.  
    81.     // update data to mimic realtime updates
    82.     realTimeData.map(values => {
    83.  
    84.       // randomly choose to. inc/dec values to 
    85.       // simulate stock exchanges
    86.       if (Math.round(Math.random())) {
    87.         values.open = (values.open - 1);
    88.         values.high = (values.high - 1);
    89.         values.low = (values.low - 1);
    90.         values.close = (values.close + 1);
    91.         values.volume = (values.volume - 100);
    92.       } else {
    93.         values.open = (values.open + Math.floor(Math.random() * 5));
    94.         values.high = (values.high + 1);
    95.         values.low = (values.low + 1);
    96.         values.close = (values.close - 1);
    97.         values.volume = (values.volume + 100);
    98.       }
    99.  
    100.       // set new global high/low values
    101.       if (values.high >= namespace1.gHigh) namespace1.gHigh = values.high;
    102.       if (values.low <= namespace1.gLow) namespace1.gLow = values.low;
    103.  
    104.       return values;
    105.     });
    106.  
    107.     // assign data to grid
    108.     if (zgRef) zgRef.setData(realTimeData);
    109.   }, 1000);
    110. });