use ids instead of alphabets (index)

apps/dashboard/src/components/report/funnel/Funnel.tsx

@@ -4,7 +4,6 @@ import { ColorSquare } from '@/components/color-square';
 import { AutoSizer } from '@/components/react-virtualized-auto-sizer';
 import { Progress } from '@/components/ui/progress';
 import { Widget, WidgetBody } from '@/components/widget';
-import { pushModal } from '@/modals';
 import type { RouterOutputs } from '@/trpc/client';
 import { cn } from '@/utils/cn';
 import { round } from '@/utils/math';
@@ -13,6 +12,7 @@ import { AlertCircleIcon } from 'lucide-react';
 import { last } from 'ramda';
 import { Cell, Pie, PieChart } from 'recharts';
 
+import { alphabetIds } from '@openpanel/constants';
 import type { IChartInput } from '@openpanel/validation';
 
 import { useChartContext } from '../chart/ChartProvider';
@@ -109,7 +109,7 @@ export function FunnelSteps({
                       </Pie>
                     </PieChart>
                     <div
-                      className="absolute inset-0 flex items-center justify-center font-mono font-bold"
+                      className="font-mono absolute inset-0 flex items-center justify-center font-bold"
                       style={{
                         fontSize: width / 6,
                       }}
@@ -162,7 +162,7 @@ export function FunnelSteps({
             >
               <div className="relative flex flex-1 flex-col gap-2 pl-8">
                 <ColorSquare className="absolute left-0 top-0.5">
-                  {step.event.id}
+                  {alphabetIds[index]}
                 </ColorSquare>
                 <div className="font-semibold capitalize">
                   {step.event.displayName.replace(/_/g, ' ')}

apps/dashboard/src/components/report/reportSlice.ts

@@ -8,6 +8,7 @@ import {
   startOfDay,
 } from 'date-fns';
 
+import { shortId } from '@openpanel/common';
 import {
   alphabetIds,
   getDefaultIntervalByDates,
@@ -91,7 +92,7 @@ export const reportSlice = createSlice({
     addEvent: (state, action: PayloadAction<Omit<IChartEvent, 'id'>>) => {
       state.dirty = true;
       state.events.push({
-        id: alphabetIds[state.events.length]!,
+        id: shortId(),
         ...action.payload,
       });
     },
@@ -129,7 +130,7 @@ export const reportSlice = createSlice({
     ) => {
       state.dirty = true;
       state.breakdowns.push({
-        id: alphabetIds[state.breakdowns.length]!,
+        id: shortId(),
         ...action.payload,
       });
     },

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

@@ -11,6 +11,7 @@ import { useEventNames } from '@/hooks/useEventNames';
 import { useDispatch, useSelector } from '@/redux';
 import { GanttChart, GanttChartIcon, Users } from 'lucide-react';
 
+import { alphabetIds } from '@openpanel/constants';
 import type { IChartEvent } from '@openpanel/validation';
 
 import {
@@ -57,11 +58,11 @@ export function ReportEvents() {
     <div>
       <h3 className="mb-2 font-medium">Events</h3>
       <div className="flex flex-col gap-4">
-        {selectedEvents.map((event) => {
+        {selectedEvents.map((event, index) => {
           return (
             <div key={event.id} className="rounded-lg border bg-def-100">
               <div className="flex items-center gap-2 p-2">
-                <ColorSquare>{event.id}</ColorSquare>
+                <ColorSquare>{alphabetIds[index]}</ColorSquare>
                 <Combobox
                   icon={GanttChartIcon}
                   className="flex-1"
@@ -84,7 +85,9 @@ export function ReportEvents() {
                 />
                 <Input
                   placeholder={
-                    event.name ? `${event.name} (${event.id})` : 'Display name'
+                    event.name
+                      ? `${event.name} (${alphabetIds[index]})`
+                      : 'Display name'
                   }
                   defaultValue={event.displayName}
                   onChange={(e) => {

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

@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from '@/redux';
 import { api } from '@/trpc/client';
 import { FilterIcon } from 'lucide-react';
 
+import { shortId } from '@openpanel/common';
 import type { IChartEvent } from '@openpanel/validation';
 
 import { changeEvent } from '../../reportSlice';
@@ -48,7 +49,7 @@ export function FiltersCombobox({ event }: FiltersComboboxProps) {
             filters: [
               ...event.filters,
               {
-                id: Math.random().toString(36).substring(7),
+                id: shortId(),
                 name: value,
                 operator: 'is',
                 value: [],