Dashboard chart fill (#6167)

frontend/src/component/executiveDashboard/FlagsChart/FlagsChart.tsx

@@ -19,14 +19,12 @@ export const FlagsChart: VFC<IFlagsChartProps> = ({ flagTrends }) => {
                     data: flagTrends.map((item) => item.total),
                     borderColor: theme.palette.primary.light,
                     backgroundColor: theme.palette.primary.light,
-                    fill: true,
                 },
                 {
                     label: 'Stale',
                     data: flagTrends.map((item) => item.stale),
                     borderColor: theme.palette.warning.border,
                     backgroundColor: theme.palette.warning.border,
-                    fill: true,
                 },
             ],
         }),

frontend/src/component/executiveDashboard/LineChart/LineChartComponent.tsx

@@ -8,6 +8,7 @@ import {
     Legend,
     TimeScale,
     Chart,
+    Filler,
     type ChartData,
     type ScatterDataPoint,
 } from 'chart.js';
@@ -162,7 +163,8 @@ const customHighlightPlugin = {
 
 const LineChartComponent: VFC<{
     data: ChartData<'line', (number | ScatterDataPoint | null)[], unknown>;
-}> = ({ data }) => {
+    aspectRatio?: number;
+}> = ({ data, aspectRatio }) => {
     const theme = useTheme();
     const { locationSettings } = useLocationSettings();
 
@@ -178,6 +180,8 @@ const LineChartComponent: VFC<{
                 options={options}
                 data={data}
                 plugins={[customHighlightPlugin]}
+                height={aspectRatio ? 100 : undefined}
+                width={aspectRatio ? 100 * aspectRatio : undefined}
             />
             <ChartTooltip tooltip={tooltip} />
         </>
@@ -192,6 +196,7 @@ Chart.register(
     TimeScale,
     Tooltip,
     Legend,
+    Filler,
 );
 
 // for lazy-loading

frontend/src/component/executiveDashboard/UsersChart/UsersChart.tsx

@@ -3,6 +3,7 @@ import 'chartjs-adapter-date-fns';
 import { useTheme } from '@mui/material';
 import { ExecutiveSummarySchema } from 'openapi';
 import { LineChart } from '../LineChart/LineChart';
+import { type ScriptableContext } from 'chart.js';
 
 interface IUsersChartProps {
     userTrends: ExecutiveSummarySchema['userTrends'];
@@ -18,20 +19,38 @@ export const UsersChart: VFC<IUsersChartProps> = ({ userTrends }) => {
                     label: 'Total users',
                     data: userTrends.map((item) => item.total),
                     borderColor: theme.palette.primary.light,
-                    backgroundColor: theme.palette.primary.light,
+                    backgroundColor: (context: ScriptableContext<'line'>) => {
+                        const chart = context.chart;
+                        const { ctx, chartArea } = chart;
+                        if (!chartArea) {
+                            return;
+                        }
+                        const gradient = ctx.createLinearGradient(
+                            0,
+                            chartArea.bottom,
+                            0,
+                            chartArea.top,
+                        );
+                        gradient.addColorStop(0, 'rgba(129, 122, 254, 0)');
+                        gradient.addColorStop(1, 'rgba(129, 122, 254, 0.12)');
+                        return gradient;
+                    },
                     fill: true,
+                    order: 3,
                 },
                 {
                     label: 'Active users',
                     data: userTrends.map((item) => item.active),
                     borderColor: theme.palette.success.border,
                     backgroundColor: theme.palette.success.border,
+                    order: 2,
                 },
                 {
                     label: 'Inactive users',
                     data: userTrends.map((item) => item.inactive),
                     borderColor: theme.palette.warning.border,
                     backgroundColor: theme.palette.warning.border,
+                    order: 1,
                 },
             ],
         }),