fix bugs in report editor, mainly re-render issues with same keys

apps/dashboard/src/components/report/chart/ReportAreaChart.tsx

@@ -91,7 +91,7 @@ export function ReportAreaChart({
                     type={lineType}
                     isAnimationActive={true}
                     strokeWidth={2}
-                    dataKey={`${serie.index}:count`}
+                    dataKey={`${serie.id}:count`}
                     stroke={color}
                     fill={`url(#color${color})`}
                     stackId={'1'}

apps/dashboard/src/components/report/chart/ReportHistogramChart.tsx

@@ -76,7 +76,7 @@ export function ReportHistogramChart({
                     <Bar
                       key={`${serie.name}:prev`}
                       name={`${serie.name}:prev`}
-                      dataKey={`${serie.index}:prev:count`}
+                      dataKey={`${serie.id}:prev:count`}
                       fill={getChartColor(serie.index)}
                       fillOpacity={0.2}
                       radius={8}
@@ -85,7 +85,7 @@ export function ReportHistogramChart({
                   <Bar
                     key={serie.name}
                     name={serie.name}
-                    dataKey={`${serie.index}:count`}
+                    dataKey={`${serie.id}:count`}
                     fill={getChartColor(serie.index)}
                     radius={8}
                   />

apps/dashboard/src/components/report/chart/ReportLineChart.tsx

@@ -100,7 +100,7 @@ export function ReportLineChart({
                     name={serie.name}
                     isAnimationActive={true}
                     strokeWidth={2}
-                    dataKey={`${serie.index}:count`}
+                    dataKey={`${serie.id}:count`}
                     stroke={getChartColor(serie.index)}
                   />
                   {previous && (
@@ -112,7 +112,7 @@ export function ReportLineChart({
                       strokeWidth={1}
                       dot={false}
                       strokeDasharray={'6 6'}
-                      dataKey={`${serie.index}:prev:count`}
+                      dataKey={`${serie.id}:prev:count`}
                       stroke={getChartColor(serie.index)}
                     />
                   )}

apps/dashboard/src/components/report/chart/ReportPieChart.tsx

@@ -21,7 +21,7 @@ export function ReportPieChart({ data }: ReportPieChartProps) {
 
   const sum = series.reduce((acc, serie) => acc + serie.metrics.sum, 0);
   const pieData = series.map((serie) => ({
-    id: serie.name,
+    id: serie.id,
     color: getChartColor(serie.index),
     index: serie.index,
     label: serie.name,

apps/dashboard/src/components/report/sidebar/ReportEvents.tsx

@@ -54,7 +54,7 @@ export function ReportEvents() {
       <div className="flex flex-col gap-4">
         {selectedEvents.map((event) => {
           return (
-            <div key={event.name} className="rounded-lg border bg-slate-50">
+            <div key={event.id} className="rounded-lg border bg-slate-50">
               <div className="flex items-center gap-2 p-2">
                 <ColorSquare>{event.id}</ColorSquare>
                 <Combobox

apps/dashboard/src/components/report/sidebar/filters/FiltersCombobox.tsx

@@ -44,7 +44,7 @@ export function FiltersCombobox({ event }: FiltersComboboxProps) {
             filters: [
               ...event.filters,
               {
-                id: (event.filters.length + 1).toString(),
+                id: Math.random().toString(36).substring(7),
                 name: value,
                 operator: 'is',
                 value: [],

apps/dashboard/src/hooks/useRechartDataModel.ts

@@ -20,10 +20,10 @@ export function useRechartDataModel(series: IChartData['series']) {
                 (acc2, item) => {
                   if (item.date === date) {
                     if (item.previous) {
-                      acc2[`${idx}:prev:count`] = item.previous.value;
+                      acc2[`${serie.id}:prev:count`] = item.previous.value;
                     }
-                    acc2[`${idx}:count`] = item.count;
-                    acc2[`${idx}:payload`] = {
+                    acc2[`${serie.id}:count`] = item.count;
+                    acc2[`${serie.id}:payload`] = {
                       ...item,
                       color: getChartColor(idx),
                     } satisfies IRechartPayloadItem;

packages/trpc/src/routers/chart.helpers.ts

@@ -631,5 +631,9 @@ export async function getSeriesFromEvents(input: IChartInput) {
     )
   ).flat();
 
-  return withFormula(input, series);
+  try {
+    return withFormula(input, series);
+  } catch (e) {
+    return series;
+  }
 }

packages/trpc/src/routers/chart.ts

@@ -2,7 +2,7 @@ import { flatten, map, pipe, prop, sort, uniq } from 'ramda';
 import { escape } from 'sqlstring';
 import { z } from 'zod';
 
-import { average, max, min, round, sum } from '@openpanel/common';
+import { average, max, min, round, slug, sum } from '@openpanel/common';
 import { chQuery, createSqlBuilder } from '@openpanel/db';
 import { zChartInput } from '@openpanel/validation';
 import type { IChartEvent, IChartInput } from '@openpanel/validation';
@@ -36,6 +36,7 @@ interface Metrics {
 }
 
 export interface IChartSerie {
+  id: string;
   name: string;
   event: IChartEvent;
   metrics: Metrics;
@@ -217,6 +218,7 @@ export const chartRouter = createTRPCRouter({
         };
 
         return {
+          id: slug(serie.name), // TODO: Remove this (temporary fix for the frontend
           name: serie.name,
           event: {
             ...serie.event,