fix: parse hex color and extract opacity

src/component/1d/Line.tsx

@@ -4,6 +4,7 @@ import { useScaleChecked } from '../context/ScaleContext';
 import useActiveSpectrumStyleOptions from '../hooks/useActiveSpectrumStyleOptions';
 import useXYReduce, { XYReducerDomainAxis } from '../hooks/useXYReduce';
 import { PathBuilder } from '../utility/PathBuilder';
+import { parseColor } from '../utility/parseColor';
 
 interface LineProps {
   data?: {
@@ -41,16 +42,18 @@ function Line({ data, id, display, index }: LineProps) {
     }
   }, [scaleX, scaleY, id, data, xyReduce]);
 
+  const { color: stroke, opacity: strokeOpacity } = parseColor(
+    display?.color || 'black',
+  );
+
   return (
     <path
       className="line"
       data-test-id="spectrum-line"
       key={id}
-      stroke={display.color}
+      stroke={stroke}
       fill="none"
-      style={{
-        opacity,
-      }}
+      strokeOpacity={opacity === 1 ? strokeOpacity : opacity}
       d={paths}
       transform={`translate(0,-${shiftY * index})`}
     />

src/component/utility/parseColor.ts

@@ -0,0 +1,20 @@
+export function parseColor(color: string) {
+  if (!color.startsWith('#')) {
+    return { color, opacity: 1 };
+  }
+
+  const hex = color.replace('#', '');
+
+  if (hex.length === 3) {
+    return {
+      color: `#${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`,
+      opacity: 1,
+    };
+  }
+
+  const hexOpacity = hex.slice(6) || 'FF';
+  const opacity =
+    Math.round((Number.parseInt(hexOpacity, 16) / 255) * 100) / 100;
+
+  return { color: `#${hex.slice(0, 6)}`, opacity };
+}