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: [],

packages/common/index.ts

@@ -8,3 +8,4 @@ export * from './src/math';
 export * from './src/slug';
 export * from './src/fill-series';
 export * from './src/url';
+export * from './src/id';

packages/common/package.json

@@ -11,16 +11,17 @@
     "@openpanel/constants": "workspace:*",
     "date-fns": "^3.3.1",
     "mathjs": "^12.3.2",
+    "nanoid": "^5.0.7",
     "ramda": "^0.29.1",
     "slugify": "^1.6.6",
     "superjson": "^1.13.3",
     "unique-names-generator": "^4.7.1"
   },
   "devDependencies": {
-    "@openpanel/validation": "workspace:*",
     "@openpanel/eslint-config": "workspace:*",
     "@openpanel/prettier-config": "workspace:*",
     "@openpanel/tsconfig": "workspace:*",
+    "@openpanel/validation": "workspace:*",
     "@types/node": "^18.16.0",
     "@types/ramda": "^0.29.6",
     "eslint": "^8.48.0",

packages/common/src/id.ts

@@ -0,0 +1,5 @@
+import { nanoid } from 'nanoid/non-secure';
+
+export function shortId() {
+  return nanoid(4);
+}

packages/constants/index.ts

@@ -115,6 +115,22 @@ export const alphabetIds = [
   'H',
   'I',
   'J',
+  'K',
+  'L',
+  'M',
+  'N',
+  'O',
+  'P',
+  'Q',
+  'R',
+  'S',
+  'T',
+  'U',
+  'V',
+  'W',
+  'X',
+  'Y',
+  'Z',
 ] as const;
 
 export const deprecated_timeRanges = {

pnpm-lock.yaml

@@ -895,6 +895,9 @@ importers:
       mathjs:
         specifier: ^12.3.2
         version: 12.3.2
+      nanoid:
+        specifier: ^5.0.7
+        version: 5.0.7
       ramda:
         specifier: ^0.29.1
         version: 0.29.1
@@ -14642,6 +14645,12 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  /nanoid@5.0.7:
+    resolution: {integrity: sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+    dev: false
+
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}