feat: item color map, fix regex matching, fix sort order, fix resize handle

web/components/ChartCard/SignalsChart.tsx

@@ -2,8 +2,11 @@
 
 import 'uplot/dist/uPlot.min.css';
 import uPlot from 'uplot';
+import { useState, useEffect } from 'react';
 import { useApp } from '@/lib/context';
 import { resolveName } from '@/lib/localization';
+import { getColorMap } from '@/lib/colors';
+import type { ColorMap } from '@/lib/colors';
 import { CardShell } from './CardShell';
 import { makeYScale, makeAnnotationHooks, makeSignalsSeries, makeSignalsAxes, CURSOR_NO_DRAG } from './plotHelpers';
 import { buildSeriesData } from './seriesData';
@@ -24,6 +27,8 @@ interface Props {
 export default function SignalsChart({ config, rows, sessions, alerts, timeMode, onEdit, onDelete }: Props) {
   const { localeMap } = useApp();
   const locale = typeof navigator !== 'undefined' ? navigator.language : 'de-DE';
+  const [colorMap, setColorMap] = useState<ColorMap>(new Map());
+  useEffect(() => { getColorMap().then(setColorMap); }, []);
 
   const { containerRef, legendRef } = usePlot(
     (el, w, h, lRef) => {
@@ -45,7 +50,7 @@ export default function SignalsChart({ config, rows, sessions, alerts, timeMode,
             if (lRef.current) lRef.current.appendChild(legendEl);
           },
         },
-        series: makeSignalsSeries(keys, timeMode, key => resolveName(key, localeMap)),
+        series: makeSignalsSeries(keys, timeMode, key => resolveName(key, localeMap), colorMap),
         axes:   makeSignalsAxes(timeMode, locale),
         scales: {
           x: { time: false },