WIP: add chart

src/components/Chart.jsx

@@ -0,0 +1,49 @@
+
+import React from 'react';
+
+import {
+    Chart as KendoChart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartTitle,
+    ChartLegend
+} from '@progress/kendo-react-charts';
+import { groupBy, filterBy } from '@progress/kendo-data-query';
+
+export const Chart = (props) => {
+    const {data, groupByField, seriesCategoryField, seriesField, filterStart, filterEnd} = props;
+
+    const filteredData = filterBy(data, {
+        logic: "and",
+        filters: [
+            { field: "OrderDate", operator: "gt", value: filterStart },
+            { field: "OrderDate", operator: "lt", value: filterEnd }
+        ]
+    });
+    const groupedData = groupBy(filteredData, [{field: groupByField}]);
+
+    return (
+        <KendoChart style={{ height: 350 }}>
+            <ChartSeries>
+                {
+                  groupedData.map(group => {
+                    return (
+                      <ChartSeriesItem
+                          type={'column'}
+                          field={seriesField}
+                          categoryField={seriesCategoryField}
+                          data={group.items}
+                      />
+                    );
+                  })
+                }
+            </ChartSeries>
+            <ChartCategoryAxis>
+                <ChartCategoryAxisItem baseUnit={'months'}>
+                </ChartCategoryAxisItem>
+            </ChartCategoryAxis>
+        </KendoChart>
+    );
+};

src/pages/Dashboard.jsx

@@ -14,6 +14,7 @@ import {
 } from '@progress/kendo-react-intl';
 
 import { Grid, Column, ColumnMenu } from './../components/Grid';
+import { Chart } from './../components/Chart';
 import { employees } from './../resources/employees';
 import { orders } from './../resources/orders';
 import { images } from './../resources/images';
@@ -168,7 +169,14 @@ const Dashboard = () => {
                     <DateRangePicker />
                 </div>
                 <div className="card-component">
-                    <Grid data={orders} style={{ height: 440, maxWidth: 1300 }}></Grid>
+                    <Chart
+                        data={orders}
+                        filterStart={new Date('2018-07-01T21:00:00.000Z')}
+                        filterEnd={new Date('2018-10-01T21:00:00.000Z')}
+                        groupByField={'TeamID'}
+                        seriesCategoryField={'OrderDate'}
+                        seriesField={'OrderTotal'}
+                    />
                 </div>
             </div>
             <div className="card-container grid">

src/resources/orders.js

@@ -1,4 +1,4 @@
-export const orders = [[{
+export const orders = [{
     "OrderID": 10255,
     "CustomerID": "RICSU",
     "EmployeeID": 9,
@@ -17428,4 +17428,12 @@ export const orders = [[{
     "OrderTotal": 1255.7205,
     "RequiredDateStart": 1591178400000,
     "RequiredDateEnd": 1591180200000
-}]];
+}].map(order => ({
+    ...order,
+    // parse dates
+    OrderDate: new Date(order.OrderDate),
+    RequiredDate: new Date(order.RequiredDate),
+    ShippedDate: new Date(order.ShippedDate),
+    RequiredDateStart: new Date(order.RequiredDateStart),
+    RequiredDateEnd: new Date(order.RequiredDateEnd),
+}));