From 461d818bd1f883f5a9f7fad79c3d96122739b6b4 Mon Sep 17 00:00:00 2001
From: sjaanus <sellinjaanus@gmail.com>
Date: Mon, 25 Nov 2024 08:51:45 +0200
Subject: [PATCH] feat: licensed users chart

---
 .../users/UsersHeader/LicensedUsersChart.tsx  | 30 ++++---------------
 .../admin/users/UsersHeader/UsersHeader.tsx   |  1 +
 .../LineChart/LineChartComponent.tsx          | 25 ++++++++++------
 .../LineChart/createChartOptions.ts           |  9 ++----
 4 files changed, 24 insertions(+), 41 deletions(-)

diff --git a/frontend/src/component/admin/users/UsersHeader/LicensedUsersChart.tsx b/frontend/src/component/admin/users/UsersHeader/LicensedUsersChart.tsx
index c21acfbf30a3..378f5f08ba55 100644
--- a/frontend/src/component/admin/users/UsersHeader/LicensedUsersChart.tsx
+++ b/frontend/src/component/admin/users/UsersHeader/LicensedUsersChart.tsx
@@ -32,22 +32,13 @@ 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',
@@ -55,17 +46,6 @@ export const LicensedUsersChart: FC<ILicensedUsersChartProps> = ({
                                 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
index 12f3e17e2cc4..049ec741fc5d 100644
--- 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
index bf0d46090be4..b5508b2ae5af 100644
--- 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
index 6cc51ce03301..3340fd079353 100644
--- 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: {