refactor(dashboard): the chart component is now cleaned up and easier to extend

apps/dashboard/src/components/report-chart/common/serie-name.tsx

@@ -0,0 +1,43 @@
+import { cn } from '@/utils/cn';
+import { ChevronRightIcon } from 'lucide-react';
+
+import { NOT_SET_VALUE } from '@openpanel/constants';
+
+import { useReportChartContext } from '../context';
+
+interface SerieNameProps {
+  name: string | string[];
+  className?: string;
+}
+
+export function SerieName({ name, className }: SerieNameProps) {
+  const {
+    options: { renderSerieName },
+  } = useReportChartContext();
+
+  if (Array.isArray(name)) {
+    if (renderSerieName) {
+      return renderSerieName(name);
+    }
+    return (
+      <div className={cn('flex items-center gap-1', className)}>
+        {name.map((n, index) => {
+          return (
+            <>
+              <span>{n || NOT_SET_VALUE}</span>
+              {name.length - 1 > index && (
+                <ChevronRightIcon className="text-muted-foreground" size={12} />
+              )}
+            </>
+          );
+        })}
+      </div>
+    );
+  }
+
+  if (renderSerieName) {
+    return renderSerieName([name]);
+  }
+
+  return <>{name}</>;
+}