fix #33 - issues with same event names

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) {

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}
+                        isAnimationActive
-                        strokeWidth={1}
                         dot={false}
-                        strokeDasharray={'1 1'}
+                        strokeOpacity={0.3}
-                        strokeOpacity={0.5}
                         dataKey={`${serie.id}:prev:count`}
                         stroke={color}
                         // Use for legend

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?: {

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',

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('-')),
+        id: getSerieId(serie),
-        names: serie.name,
+        names: includeEventName
-        event: {
+          ? [
-          id: serie.event.id!,
+              `(${event.id || event.name}) ${serie.name[0]}`,
-          name: serie.event.displayName ?? serie.event.name,
+              ...serie.name.slice(1),
-        },
+            ]
+          : serie.name,
+        event,
         metrics: {
           ...metrics,
           ...(input.previous

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,
         },
       });
     }),

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;