Merge pull request #10829 from marmelab/improve-demo-bundle-size

Improve commerce demo bundle

Author: Madeorsk

examples/crm/vite.config.ts

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

examples/demo/src/dashboard/Dashboard.tsx

@@ -1,6 +1,13 @@
-import React, { useMemo, CSSProperties } from 'react';
-import { useGetList } from 'react-admin';
-import { useMediaQuery, Theme } from '@mui/material';
+import React, { useMemo, CSSProperties, Suspense } from 'react';
+import { Translate, useGetList } from 'react-admin';
+import {
+    useMediaQuery,
+    Theme,
+    Skeleton,
+    Card,
+    CardHeader,
+    CardContent,
+} from '@mui/material';
 import { subDays, startOfDay } from 'date-fns';
 
 import Welcome from './Welcome';
@@ -9,7 +16,6 @@ import NbNewOrders from './NbNewOrders';
 import PendingOrders from './PendingOrders';
 import PendingReviews from './PendingReviews';
 import NewCustomers from './NewCustomers';
-import OrderChart from './OrderChart';
 
 import { Order } from '../types';
 
@@ -37,6 +43,8 @@ const styles = {
 const Spacer = () => <span style={{ width: '1em' }} />;
 const VerticalSpacer = () => <span style={{ height: '1em' }} />;
 
+const OrderChart = React.lazy(() => import('./OrderChart'));
+
 const Dashboard = () => {
     const isXSmall = useMediaQuery((theme: Theme) =>
         theme.breakpoints.down('sm')
@@ -109,7 +117,18 @@ const Dashboard = () => {
                 <NbNewOrders value={nbNewOrders} />
             </div>
             <div style={styles.singleCol}>
-                <OrderChart orders={recentOrders} />
+                <Card>
+                    <CardHeader
+                        title={
+                            <Translate i18nKey="pos.dashboard.month_history" />
+                        }
+                    />
+                    <CardContent>
+                        <Suspense fallback={<Skeleton height={300} />}>
+                            <OrderChart orders={recentOrders} />
+                        </Suspense>
+                    </CardContent>
+                </Card>
             </div>
             <div style={styles.singleCol}>
                 <PendingOrders orders={pendingOrders} />
@@ -126,7 +145,18 @@ const Dashboard = () => {
                         <NbNewOrders value={nbNewOrders} />
                     </div>
                     <div style={styles.singleCol}>
-                        <OrderChart orders={recentOrders} />
+                        <Card>
+                            <CardHeader
+                                title={
+                                    <Translate i18nKey="pos.dashboard.month_history" />
+                                }
+                            />
+                            <CardContent>
+                                <Suspense fallback={<Skeleton height={300} />}>
+                                    <OrderChart orders={recentOrders} />
+                                </Suspense>
+                            </CardContent>
+                        </Card>
                     </div>
                     <div style={styles.singleCol}>
                         <PendingOrders orders={pendingOrders} />

examples/demo/src/dashboard/OrderChart.tsx

@@ -1,15 +1,59 @@
 import * as React from 'react';
-import { Card, CardHeader, CardContent } from '@mui/material';
-import * as echarts from 'echarts';
-import { useTranslate } from 'react-admin';
+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';
+// 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();
 
@@ -38,7 +82,6 @@ const getRevenuePerDay = (orders: Order[]): TotalByDay[] => {
 
 const OrderChart = (props: { orders?: Order[] }) => {
     const { orders } = props;
-    const translate = useTranslate();
     const chartRef = React.useRef<HTMLDivElement>(null);
     const chartInstance = React.useRef<echarts.ECharts | null>(null);
 
@@ -53,7 +96,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 +133,7 @@ const OrderChart = (props: { orders?: Order[] }) => {
                     axisPointer: {
                         type: 'line',
                         lineStyle: {
-                            type: 'dashed',
-                            dashArray: [3, 3],
+                            type: [3, 3],
                         },
                     },
                 },
@@ -156,14 +198,7 @@ const OrderChart = (props: { orders?: Order[] }) => {
         };
     }, [orders]);
 
-    return (
-        <Card>
-            <CardHeader title={translate('pos.dashboard.month_history')} />
-            <CardContent>
-                <div ref={chartRef} style={{ width: '100%', height: 300 }} />
-            </CardContent>
-        </Card>
-    );
+    return <div ref={chartRef} style={{ width: '100%', height: 300 }} />;
 };
 
 interface TotalByDay {

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,