• 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/zinggrid.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="Method Render" layout="row" layout-controls="disabled" viewport-stop>
    38.     <!-- Define explicit column rendering -->
    39.     <zg-colgroup>
    40.       <!-- this column is found at the window level scope -->
    41.       <zg-column index="open" type="currency" cell-class="_renderStocks"></zg-column>
    42.       <!-- these columns have been aliased and scoped -->
    43.       <zg-column index="high" type="currency" cell-class="f1"></zg-column>
    44.       <zg-column index="low" type="currency" cell-class="f2"></zg-column>
    45.       <!-- standard rendered columns -->
    46.       <zg-column index="close" type="currency"></zg-column>
    47.       <zg-column index="volume" type="number"></zg-column>
    48.     </zg-colgroup>
    49.   </zing-grid>
    50.   <script>
    51.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // determine if we should render positive/negative
    52.     // cell styling based on opening stock price vs when it last
    53.     // closed
    54.     function _renderStocks(open, cellDOMRef, cellRef) {
    55.       // if open is higher than close value
    56.       if (open > cellRef.record.close) return 'stock-open increased';
    57.  
    58.       return 'stock-open decreased';
    59.     }
    60.  
    61.     // namespace to simulate an ecapsulated class or component
    62.     const namespace1 = {
    63.       // global vars for highlight min/max values
    64.       gHigh: -1,
    65.       gLow: Number.MAX_SAFE_INTEGER,
    66.  
    67.       // highlight cell with highest value in high column
    68.       _highlightHigh: function(high, cellDOMRef, cellRef) {
    69.         if (high == Number(this.gHigh)) return 'highlight';
    70.       },
    71.  
    72.       // highlight cell with lowest value in low column
    73.       _highlightLow: function(low, cellDOMRef, cellRef) {
    74.         if (low == Number(this.gLow)) return 'highlight';
    75.       },
    76.     };
    77.  
    78.     // register methods to alias "f1" and "f2" where "this" references the 
    79.     // namespace1 scope as well
    80.  
    81.     // set interval to simulate realtime data
    82.     window.addEventListener('load', () => {
    83.       // save reference to the grid
    84.       const zgRef = document.querySelector('zing-grid');
    85.  
    86.       ZingGrid.registerMethod(namespace1._highlightHigh, 'f1', namespace1);
    87.       ZingGrid.registerMethod(namespace1._highlightLow, 'f2', namespace1);
    88.  
    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/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <!-- Define grid component -->
    12.   <zing-grid caption="Method Render" layout="row" layout-controls="disabled" viewport-stop>
    13.     <!-- Define explicit column rendering -->
    14.     <zg-colgroup>
    15.       <!-- this column is found at the window level scope -->
    16.       <zg-column index="open" type="currency" cell-class="_renderStocks"></zg-column>
    17.       <!-- these columns have been aliased and scoped -->
    18.       <zg-column index="high" type="currency" cell-class="f1"></zg-column>
    19.       <zg-column index="low" type="currency" cell-class="f2"></zg-column>
    20.       <!-- standard rendered columns -->
    21.       <zg-column index="close" type="currency"></zg-column>
    22.       <zg-column index="volume" type="number"></zg-column>
    23.     </zg-colgroup>
    24.   </zing-grid>
    25. </body>
    26.  
    27. </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. // determine if we should render positive/negative
    2. // cell styling based on opening stock price vs when it last
    3. // closed
    4. function _renderStocks(open, cellDOMRef, cellRef) {
    5.   // if open is higher than close value
    6.   if (open > cellRef.record.close) return 'stock-open increased';
    7.  
    8.   return 'stock-open decreased';
    9. }
    10.  
    11. // namespace to simulate an ecapsulated class or component
    12. const namespace1 = {
    13.   // global vars for highlight min/max values
    14.   gHigh: -1,
    15.   gLow: Number.MAX_SAFE_INTEGER,
    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. // register methods to alias "f1" and "f2" where "this" references the 
    29. // namespace1 scope as well
    30.  
    31. // set interval to simulate realtime data
    32. window.addEventListener('load', () => {
    33.   // save reference to the grid
    34.   const zgRef = document.querySelector('zing-grid');
    35.  
    36.   ZingGrid.registerMethod(namespace1._highlightHigh, 'f1', namespace1);
    37.   ZingGrid.registerMethod(namespace1._highlightLow, 'f2', namespace1);
    38.  
    39.  
    40.   // interval mimics real time data updates
    41.   setInterval(() => {
    42.     // regenerate the same starting dataset everytime to 
    43.     // produce better visual results
    44.     let realTimeData = [{
    45.       open: 114.1900,
    46.       high: 114.4950,
    47.       low: 113.6800,
    48.       close: 114.2750,
    49.       volume: 7120112
    50.     }, {
    51.       open: 113.0300,
    52.       high: 114.9000,
    53.       low: 112.2175,
    54.       close: 114.6700,
    55.       volume: 27334460
    56.     }, {
    57.       open: 113.0500,
    58.       high: 113.3200,
    59.       low: 111.0350,
    60.       close: 111.7000,
    61.       volume: 21728429
    62.     }, {
    63.       open: 112.1900,
    64.       high: 113.6950,
    65.       low: 111.7200,
    66.       close: 113.2100,
    67.       volume: 22170934
    68.     }, {
    69.       open: 113.6900,
    70.       high: 113.7000,
    71.       low: 111.8600,
    72.       close: 112.1400,
    73.       volume: 20736516
    74.     }];
    75.  
    76.     // reset global vars for highlighint min/max cells
    77.     namespace1.gHigh = -1;
    78.     namespace1.gLow = Number.MAX_SAFE_INTEGER;
    79.  
    80.     // update data to mimic realtime updates
    81.     realTimeData.map(values => {
    82.  
    83.       // randomly choose to. inc/dec values to 
    84.       // simulate stock exchanges
    85.       if (Math.round(Math.random())) {
    86.         values.open = (values.open - 1);
    87.         values.high = (values.high - 1);
    88.         values.low = (values.low - 1);
    89.         values.close = (values.close + 1);
    90.         values.volume = (values.volume - 100);
    91.       } else {
    92.         values.open = (values.open + Math.floor(Math.random() * 5));
    93.         values.high = (values.high + 1);
    94.         values.low = (values.low + 1);
    95.         values.close = (values.close - 1);
    96.         values.volume = (values.volume + 100);
    97.       }
    98.  
    99.       // set new global high/low values
    100.       if (values.high >= namespace1.gHigh) namespace1.gHigh = values.high;
    101.       if (values.low <= namespace1.gLow) namespace1.gLow = values.low;
    102.  
    103.       return values;
    104.     });
    105.  
    106.     // assign data to grid
    107.     if (zgRef) zgRef.setData(realTimeData);
    108.   }, 1000);
    109. });