Improve commerce demo bundle

Author: djhi

examples/demo/src/dashboard/OrderChart.tsx

@@ -1,15 +1,61 @@
 import * as React from 'react';
 import { Card, CardHeader, CardContent } from '@mui/material';
-import * as echarts from 'echarts';
+import * as echarts from 'echarts/core';
+// Import bar charts, all suffixed with Chart
+import { LineChart } from 'echarts/charts';
+
+// Import the title, tooltip, rectangular coordinate system, dataset and transform components
+import {
+    TitleComponent,
+    TooltipComponent,
+    GridComponent,
+    DatasetComponent,
+    TransformComponent,
+} from 'echarts/components';
 import { useTranslate } from 'react-admin';
+// Features like Universal Transition and Label Layout
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+
+// Import the Canvas renderer
+// Note that including the CanvasRenderer or SVGRenderer is a required step
+import { SVGRenderer } from 'echarts/renderers';
+
 import { format, subDays, addDays } from 'date-fns';
 
 import { Order } from '../types';
+import type {
+    DatasetComponentOption,
+    GridComponentOption,
+    LineSeriesOption,
+    TitleComponentOption,
+    TooltipComponentOption,
+} from 'echarts';
 
 const lastDay = new Date();
 const lastMonthDays = Array.from({ length: 30 }, (_, i) => subDays(lastDay, i));
 const aMonthAgo = subDays(new Date(), 30);
 
+// Create an Option type with only the required components and charts via ComposeOption
+type ECOption = echarts.ComposeOption<
+    | LineSeriesOption
+    | TitleComponentOption
+    | TooltipComponentOption
+    | GridComponentOption
+    | DatasetComponentOption
+>;
+
+echarts.use([
+    TitleComponent,
+    TooltipComponent,
+    GridComponent,
+    DatasetComponent,
+    TransformComponent,
+    LineChart,
+    LabelLayout,
+    UniversalTransition,
+    SVGRenderer,
+]);
+
 const dateFormatter = (date: number): string =>
     new Date(date).toLocaleDateString();
 
@@ -53,7 +99,7 @@ const OrderChart = (props: { orders?: Order[] }) => {
             const revenueData = getRevenuePerDay(orders);
 
             // Configure the chart
-            const option = {
+            const option: ECOption = {
                 xAxis: {
                     type: 'time',
                     min: addDays(aMonthAgo, 1).getTime(),
@@ -90,8 +136,7 @@ const OrderChart = (props: { orders?: Order[] }) => {
                     axisPointer: {
                         type: 'line',
                         lineStyle: {
-                            type: 'dashed',
-                            dashArray: [3, 3],
+                            type: [3, 3],
                         },
                     },
                 },

examples/demo/vite.config.ts

@@ -47,7 +47,10 @@ export default defineConfig(async ({ mode }) => {
             }),
         ],
         define: {
-            'process.env': process.env,
+            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+            'process.env.REACT_APP_DATA_PROVIDER': JSON.stringify(
+                process.env.REACT_APP_DATA_PROVIDER
+            ),
         },
         server: {
             port: 8000,