feat: stock market

Author: afshinm

docs/examples/stock-market.md

@@ -0,0 +1,98 @@
+---
+id: stock-market
+title: Stock Market
+keywords:
+ - javascript
+ - table
+ - javascript table
+ - gridjs
+ - grid js
+ - formatting
+ - stock market
+ 
+---
+
+import { Grid, h, createRef as gCreateRef } from "gridjs";
+import CodeBlock from "@theme/CodeBlock"
+import { useEffect, useRef, useState } from "react";
+import Chartist from 'chartist';
+import "chartist/dist/chartist.min.css";
+
+Grid.js can render complex elements in the table cells. In this example, we will take advantage of the builtin Virtual DOM
+and Chartist library to render line charts in cells.
+
+```js
+import { Grid, h, createRef as gCreateRef } from "gridjs";
+import Chartist from 'chartist';
+```
+
+<CodeBlock children={
+`
+// Chartist options
+const opts = {
+  height: '30px',
+  showPoint: false,
+  fullWidth:true,
+  chartPadding: {top: 0,right: 0,bottom: 0,left: 0},
+  axisX: {showGrid: false, showLabel: false, offset: 0},
+  axisY: {showGrid: false, showLabel: false, offset: 0}
+};
+const grid = new Grid({
+  sort: true,
+  columns: [
+    'Symbol',
+    'Last price',
+    { 
+      name: 'Difference', 
+      formatter: (cell) => {
+        return h('b', { style: {
+          'color': cell > 0 ? 'green' : 'red'
+        }}, cell);
+      }
+    },
+    {
+      name: 'Trend',
+      sort: false,
+      width: '100px',
+      formatter: (cell) => {
+        const ref = gCreateRef();
+        const chart = h('div', { ref: ref })
+        
+        // setTimeout to ensure that the chart wrapper is mounted
+        setTimeout(() => {
+          // render the chart based on cell data
+          ref.current && new Chartist.Line(ref.current, {
+            series: [cell]
+          }, opts);
+        }, 0);
+        
+        return chart;
+      }
+    }],
+  data: [
+    ['AAPL', 360.2, 20.19, [360, 363, 366, 361, 366, 350, 370]],
+    ['ETSY', 102.1, 8.22, [90, 91, 92, 90, 94, 95, 99, 102]],
+    ['AMZN', 2734.8, -30.01, [2779, 2786, 2792, 2780, 2750, 2765, 2740, 2734]],
+    ['TSLA', 960.85, -40.91, [993, 990, 985, 983, 970, 985, 988, 960]],
+  ]
+});
+`
+}
+ transformCode={(code) => 
+`
+function () {
+  ${code}
+ 
+  const wrapperRef = useRef(null);
+   
+  useEffect(() => {
+    grid.render(wrapperRef.current);
+  });
+  
+  return (
+    <div ref={wrapperRef} />
+  );
+}
+`
+} live={true} scope={{ Grid, h, gCreateRef, CodeBlock, useEffect, useRef, useState, Chartist }} />
+

package-lock.json

@@ -13,6 +13,7 @@
     "@docusaurus/core": "^2.0.0-alpha.58",
     "@docusaurus/preset-classic": "^2.0.0-alpha.58",
     "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.39",
+    "chartist": "^0.11.4",
     "classnames": "^2.2.6",
     "emotion": "^10.0.27",
     "faker": "^4.1.0",

package.json

@@ -76,6 +76,7 @@ module.exports = {
         'examples/multi-sort',
         'examples/custom-sort',
         'examples/i18n',
+        'examples/stock-market',
       ]
     }]
   },

sidebars.js

@@ -37,3 +37,16 @@ ul.contents {
   width: 100%;
   display: table;
 }
+
+.ct-chart svg  {
+  margin:1px;
+  vertical-align:text-bottom;
+}
+.ct-series-a .ct-line,
+.ct-series-a .ct-bar {
+  stroke: red;
+  stroke-width: 1px;
+}
+.ct-chart-pie .ct-label {
+  display:none;
+}