Switch trend line to SparkLineChart (#75)

* Switch trend line to SparkLineChart

* Update CostReportsTableComponent.tsx

plugins/infrawallet/package.json

@@ -41,21 +41,20 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@mui/material": "^5.16.6",
+    "@mui/x-charts": "7.17.0",
     "@mui/x-data-grid": "7.17.0",
-    "@mui/x-date-pickers": "^6.20.0",
+    "@mui/x-date-pickers": "7.17.0",
     "@stitches/react": "1.2.8",
     "@types/react": "^18",
     "apexcharts": "3.51.0",
     "better-react-mathjax": "^2.0.2",
-    "d3-shape": "3.2.0",
     "date-fns": "2.30.0",
     "human-format": "1.2.0",
     "lodash": "^4.17.21",
     "moment": "2.29.4",
     "mui-modal-provider": "2.2.0",
     "node-fetch": "^2.6.7",
     "react-apexcharts": "1.4.1",
-    "react-date-range": "1.4.0",
     "uuid": "10.0.0"
   },
   "devDependencies": {

plugins/infrawallet/src/components/CostReportsTableComponent/CostReportsTableComponent.tsx

@@ -6,8 +6,8 @@ import humanFormat from 'human-format';
 import React, { FC } from 'react';
 import { extractAccountInfo, getPreviousMonth } from '../../api/functions';
 import { CostReportsTableComponentProps } from '../types';
-import { TrendBarComponent } from './TrendBarComponent';
 import { getProviderIcon } from '../ProviderIcons';
+import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
 
 const useStyles = makeStyles({
   increase: {
@@ -119,21 +119,12 @@ export const CostReportsTableComponent: FC<CostReportsTableComponentProps> = ({
       width: 100,
       disableExport: true,
       hideSortIcons: true,
-      renderCell: (params: GridRenderCellParams): React.ReactNode => {
-        return (
-          <TrendBarComponent
-            categories={periods}
-            series={[
-              {
-                name: params.row.id,
-                data: periods.map(period =>
-                  params.row.reports[period] !== undefined ? params.row.reports[period] : null,
-                ),
-              },
-            ]}
-          />
-        );
-      },
+      renderCell: (params: GridRenderCellParams) => (
+        <SparkLineChart data={params.value ? params.value[0] : null} plotType="bar" />
+      ),
+      valueGetter: (_, row) => [
+        periods.map(period => (row.reports[period] !== undefined ? row.reports[period] : null)),
+      ],
     },
   );