From f939ac09b6d85c6304fddffebe01ecf21df56d0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Sun, 23 Jun 2024 22:59:04 +0200
Subject: [PATCH] fix #33 - issues with same event names

---
 .../report/chart/ReportChartTooltip.tsx       |  1 -
 .../report/chart/ReportLineChart.tsx          |  9 +++---
 .../src/hooks/useRechartDataModel.ts          |  2 +-
 packages/constants/index.ts                   |  5 +---
 packages/trpc/src/routers/chart.helpers.ts    | 30 +++++++++++++------
 packages/trpc/src/routers/report.ts           |  2 ++
 packages/validation/src/types.validation.ts   |  2 +-
 7 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/apps/dashboard/src/components/report/chart/ReportChartTooltip.tsx b/apps/dashboard/src/components/report/chart/ReportChartTooltip.tsx
index 7fe3554c..fc0b31b9 100644
--- a/apps/dashboard/src/components/report/chart/ReportChartTooltip.tsx
+++ b/apps/dashboard/src/components/report/chart/ReportChartTooltip.tsx
@@ -22,7 +22,6 @@ export function ReportChartTooltip({
   payload,
 }: ReportLineChartTooltipProps) {
   const { unit, interval } = useChartContext();
-  const getLabel = useMappings();
   const formatDate = useFormatDateInterval(interval);
   const number = useNumber();
   if (!active || !payload) {
diff --git a/apps/dashboard/src/components/report/chart/ReportLineChart.tsx b/apps/dashboard/src/components/report/chart/ReportLineChart.tsx
index 5c48e49d..b83d79ea 100644
--- a/apps/dashboard/src/components/report/chart/ReportLineChart.tsx
+++ b/apps/dashboard/src/components/report/chart/ReportLineChart.tsx
@@ -217,7 +217,7 @@ export function ReportLineChart({ data }: ReportLineChartProps) {
                       )}
                     </defs>
                     <Line
-                      dot={false}
+                      dot={isAreaStyle}
                       type={lineType}
                       name={serie.id}
                       isAnimationActive={false}
@@ -229,6 +229,7 @@ export function ReportLineChart({ data }: ReportLineChartProps) {
                     />
                     {isAreaStyle && (
                       <Area
+                        dot={false}
                         name={`${serie.id}:area:noTooltip`}
                         dataKey={`${serie.id}:count`}
                         fill={`url(#color${color})`}
@@ -265,11 +266,9 @@ export function ReportLineChart({ data }: ReportLineChartProps) {
                       <Line
                         type={lineType}
                         name={`${serie.id}:prev`}
-                        isAnimationActive={false}
-                        strokeWidth={1}
+                        isAnimationActive
                         dot={false}
-                        strokeDasharray={'1 1'}
-                        strokeOpacity={0.5}
+                        strokeOpacity={0.3}
                         dataKey={`${serie.id}:prev:count`}
                         stroke={color}
                         // Use for legend
diff --git a/apps/dashboard/src/hooks/useRechartDataModel.ts b/apps/dashboard/src/hooks/useRechartDataModel.ts
index 858641bc..c0499941 100644
--- a/apps/dashboard/src/hooks/useRechartDataModel.ts
+++ b/apps/dashboard/src/hooks/useRechartDataModel.ts
@@ -8,7 +8,7 @@ export type IRechartPayloadItem = {
   id: string;
   names: string[];
   color: string;
-  event: { id: string; name: string };
+  event: { id?: string; name: string };
   count: number;
   date: string;
   previous?: {
diff --git a/packages/constants/index.ts b/packages/constants/index.ts
index acd51f94..b1520f6e 100644
--- a/packages/constants/index.ts
+++ b/packages/constants/index.ts
@@ -118,17 +118,14 @@ export const alphabetIds = [
 ] as const;
 
 export const deprecated_timeRanges = {
-  '30min': '30min',
   '1h': '1h',
-  today: 'today',
   '24h': '24h',
-  '7d': '7d',
   '14d': '14d',
   '1m': '1m',
   '3m': '3m',
   '6m': '6m',
   '1y': '1y',
-} as const;
+};
 
 export const metrics = {
   sum: 'sum',
diff --git a/packages/trpc/src/routers/chart.helpers.ts b/packages/trpc/src/routers/chart.helpers.ts
index e1709b9a..89c429ef 100644
--- a/packages/trpc/src/routers/chart.helpers.ts
+++ b/packages/trpc/src/routers/chart.helpers.ts
@@ -13,7 +13,7 @@ import {
   subYears,
 } from 'date-fns';
 import * as mathjs from 'mathjs';
-import { repeat, reverse } from 'ramda';
+import { pluck, repeat, reverse, uniq } from 'ramda';
 import { escape } from 'sqlstring';
 
 import {
@@ -47,7 +47,7 @@ import type {
 } from '@openpanel/validation';
 
 function getEventLegend(event: IChartEvent) {
-  return event.displayName ?? event.name;
+  return event.displayName || event.name;
 }
 
 export function withFormula(
@@ -481,6 +481,7 @@ export async function getChartSerie(payload: IGetChartDataInput) {
     });
 }
 
+export type IGetChartSerie = Awaited<ReturnType<typeof getChartSeries>>[number];
 export async function getChartSeries(input: IChartInputWithDates) {
   const series = (
     await Promise.all(
@@ -501,6 +502,9 @@ export async function getChartSeries(input: IChartInputWithDates) {
 }
 
 export async function getChart(input: IChartInput) {
+  const includeEventName =
+    uniq(pluck('name', input.events)).length !==
+    pluck('name', input.events).length;
   const currentPeriod = getChartStartEndDate(input);
   const previousPeriod = getChartPrevStartEndDate({
     range: input.range,
@@ -518,6 +522,8 @@ export async function getChart(input: IChartInput) {
     );
   }
 
+  const getSerieId = (serie: IGetChartSerie) =>
+    [slug(serie.name.join('-')), serie.event.id].filter(Boolean).join('-');
   const result = await Promise.all(promises);
   const series = result[0]!;
   const previousSeries = result[1];
@@ -526,7 +532,7 @@ export async function getChart(input: IChartInput) {
   const final: FinalChart = {
     series: series.map((serie) => {
       const previousSerie = previousSeries?.find(
-        (item) => item.name.join('-') === serie.name.join('-')
+        (prevSerie) => getSerieId(prevSerie) === getSerieId(serie)
       );
       const metrics = {
         sum: sum(serie.data.map((item) => item.count)),
@@ -534,14 +540,20 @@ export async function getChart(input: IChartInput) {
         min: min(serie.data.map((item) => item.count)),
         max: max(serie.data.map((item) => item.count)),
       };
+      const event = {
+        id: serie.event.id,
+        name: serie.event.displayName || serie.event.name,
+      };
 
       return {
-        id: slug(serie.name.join('-')),
-        names: serie.name,
-        event: {
-          id: serie.event.id!,
-          name: serie.event.displayName ?? serie.event.name,
-        },
+        id: getSerieId(serie),
+        names: includeEventName
+          ? [
+              `(${event.id || event.name}) ${serie.name[0]}`,
+              ...serie.name.slice(1),
+            ]
+          : serie.name,
+        event,
         metrics: {
           ...metrics,
           ...(input.previous
diff --git a/packages/trpc/src/routers/report.ts b/packages/trpc/src/routers/report.ts
index f498594f..cc94419b 100644
--- a/packages/trpc/src/routers/report.ts
+++ b/packages/trpc/src/routers/report.ts
@@ -31,6 +31,7 @@ export const reportRouter = createTRPCRouter({
           lineType: report.lineType,
           range: report.range === 'custom' ? '30d' : report.range,
           formula: report.formula,
+          previous: report.previous ?? false,
         },
       });
     }),
@@ -55,6 +56,7 @@ export const reportRouter = createTRPCRouter({
           lineType: report.lineType,
           range: report.range === 'custom' ? '30d' : report.range,
           formula: report.formula,
+          previous: report.previous ?? false,
         },
       });
     }),
diff --git a/packages/validation/src/types.validation.ts b/packages/validation/src/types.validation.ts
index 0e13dafe..c5236e57 100644
--- a/packages/validation/src/types.validation.ts
+++ b/packages/validation/src/types.validation.ts
@@ -67,7 +67,7 @@ export type IChartSerie = {
   id: string;
   names: string[];
   event: {
-    id: string;
+    id?: string;
     name: string;
   };
   metrics: Metrics;