feat: licensed users chart

Unleash · Nov 25, 2024 · 461d818 · 461d818
1 parent 12a47b0
commit 461d818
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 41 deletions.
diff --git a/frontend/src/component/admin/users/UsersHeader/LicensedUsersChart.tsx b/frontend/src/component/admin/users/UsersHeader/LicensedUsersChart.tsx
@@ -32,40 +32,20 @@ export const LicensedUsersChart: FC<ILicensedUsersChartProps> = ({
                     yAxisKey: 'count',
                     xAxisKey: 'date',
                 },
-                scales: {
-                    y: {
-                        beginAtZero: true,
-                        type: 'linear',
-                        grid: {
-                            color: theme.palette.divider,
-                            borderColor: theme.palette.divider,
-                        },
-                        ticks: {
-                            color: theme.palette.text.secondary,
-                            display: true,
-                            precision: 0,
-                        },
+                plugins: {
+                    legend: {
+                        display: false,
                     },
+                },
+                scales: {
                     x: {
-                        type: 'time',
                         time: {
                             unit: 'month',
                             tooltipFormat: 'MMM yyyy',
                             displayFormats: {
                                 month: 'MMM',
                             },
                         },
-                        grid: {
-                            color: 'transparent',
-                            borderColor: 'transparent',
-                        },
-                        ticks: {
-                            color: theme.palette.text.secondary,
-                            display: true,
-                            source: 'data',
-                            maxRotation: 90,
-                            minRotation: 23.5,
-                        },
                     },
                 },
             }}

diff --git a/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx b/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx
@@ -30,6 +30,7 @@ export const UsersHeader = () => {
     const licensedUsers = useUiFlag('licensedUsers');
     const { isOss } = useUiConfig();
     const licensedUsersEnabled = true;
+    // const licensedUsersEnabled = licensedUsers && !isOss();
 
     return (
         <StyledContainer licensedUsersEnabled={licensedUsersEnabled}>

diff --git a/frontend/src/component/insights/components/LineChart/LineChartComponent.tsx b/frontend/src/component/insights/components/LineChart/LineChartComponent.tsx
@@ -24,6 +24,7 @@ import {
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { styled } from '@mui/material';
 import { createOptions } from './createChartOptions';
+import merge from 'deepmerge';
 
 const StyledContainer = styled('div')(({ theme }) => ({
     position: 'relative',
@@ -81,6 +82,10 @@ const customHighlightPlugin = {
     },
 };
 
+function mergeAll<T>(objects: Partial<T>[]): T {
+    return merge.all<T>(objects.filter((i) => i));
+}
+
 const LineChartComponent: FC<{
     data: ChartData<'line', unknown>;
     aspectRatio?: number;
@@ -100,16 +105,18 @@ const LineChartComponent: FC<{
     const { locationSettings } = useLocationSettings();
 
     const [tooltip, setTooltip] = useState<null | TooltipState>(null);
+
     const options = useMemo(
-        () => ({
-            ...createOptions(
-                theme,
-                locationSettings,
-                setTooltip,
-                Boolean(cover),
-            ),
-            ...overrideOptions,
-        }),
+        () =>
+            mergeAll([
+                createOptions(
+                    theme,
+                    locationSettings,
+                    setTooltip,
+                    Boolean(cover),
+                ),
+                overrideOptions ?? {},
+            ]),
         [theme, locationSettings, overrideOptions, cover],
     );
 

diff --git a/frontend/src/component/insights/components/LineChart/createChartOptions.ts b/frontend/src/component/insights/components/LineChart/createChartOptions.ts
@@ -3,13 +3,14 @@ import type { ILocationSettings } from 'hooks/useLocationSettings';
 import type { TooltipState } from './ChartTooltip/ChartTooltip';
 import { createTooltip } from './createTooltip';
 import { legendOptions } from './legendOptions';
+import type { ChartOptions } from 'chart.js';
 
 export const createOptions = (
     theme: Theme,
     locationSettings: ILocationSettings,
     setTooltip: React.Dispatch<React.SetStateAction<TooltipState | null>>,
     isPlaceholder?: boolean,
-) =>
+): ChartOptions<'line'> =>
     ({
         responsive: true,
         ...(isPlaceholder
@@ -27,10 +28,6 @@ export const createOptions = (
             tooltip: {
                 enabled: false,
                 position: 'nearest',
-                interaction: {
-                    axis: 'xy',
-                    mode: 'nearest',
-                },
                 external: createTooltip(setTooltip),
             },
         },
@@ -46,8 +43,6 @@ export const createOptions = (
                 hitRadius: 15,
             },
         },
-        // cubicInterpolationMode: 'monotone',
-        tension: 0.1,
         color: theme.palette.text.secondary,
         scales: {
             y: {