@qfo/qfchart 0.8.4 → 0.8.6

package/src/components/renderers/StepRenderer.ts

@@ -1,39 +1,39 @@
-import { SeriesRenderer, RenderContext } from './SeriesRenderer';
-
-export class StepRenderer implements SeriesRenderer {
-    render(context: RenderContext): any {
-        const { seriesName, xAxisIndex, yAxisIndex, dataArray, colorArray, plotOptions } = context;
-        const defaultColor = '#2962ff';
-
-        return {
-            name: seriesName,
-            type: 'custom',
-            xAxisIndex: xAxisIndex,
-            yAxisIndex: yAxisIndex,
-            renderItem: (params: any, api: any) => {
-                const x = api.value(0);
-                const y = api.value(1);
-                if (isNaN(y) || y === null) return;
-
-                const coords = api.coord([x, y]);
-                const width = api.size([1, 0])[0];
-
-                return {
-                    type: 'line',
-                    shape: {
-                        x1: coords[0] - width / 2,
-                        y1: coords[1],
-                        x2: coords[0] + width / 2,
-                        y2: coords[1],
-                    },
-                    style: {
-                        stroke: colorArray[params.dataIndex] || plotOptions.color || defaultColor,
-                        lineWidth: plotOptions.linewidth || 1,
-                    },
-                    silent: true,
-                };
-            },
-            data: dataArray.map((val, i) => [i, val]),
-        };
-    }
-}
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+
+export class StepRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, colorArray, plotOptions } = context;
+        const defaultColor = '#2962ff';
+
+        return {
+            name: seriesName,
+            type: 'custom',
+            xAxisIndex: xAxisIndex,
+            yAxisIndex: yAxisIndex,
+            renderItem: (params: any, api: any) => {
+                const x = api.value(0);
+                const y = api.value(1);
+                if (isNaN(y) || y === null) return;
+
+                const coords = api.coord([x, y]);
+                const width = api.size([1, 0])[0];
+
+                return {
+                    type: 'line',
+                    shape: {
+                        x1: coords[0] - width / 2,
+                        y1: coords[1],
+                        x2: coords[0] + width / 2,
+                        y2: coords[1],
+                    },
+                    style: {
+                        stroke: colorArray[params.dataIndex] || plotOptions.color || defaultColor,
+                        lineWidth: plotOptions.linewidth || 1,
+                    },
+                    silent: true,
+                };
+            },
+            data: dataArray.map((val, i) => [i, val]),
+        };
+    }
+}

package/src/utils/ColorUtils.ts

@@ -36,10 +36,11 @@ export class ColorUtils {
             };
         }
 
-        // For 6-digit hex or named colors, default opacity to 0.3 for fill areas
+        // For 6-digit hex or named colors, return full opacity.
+        // Individual renderers (fill, gradient) apply their own opacity as needed.
         return {
             color: colorStr,
-            opacity: 0.3,
+            opacity: 1.0,
         };
     }
 
@@ -74,4 +75,35 @@ export class ColorUtils {
         // Fallback: return color as-is
         return color;
     }
+
+    /**
+     * Parse a color string into {r, g, b} components.
+     */
+    private static toRGB(color: string): { r: number; g: number; b: number } {
+        const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+        if (rgbMatch) return { r: +rgbMatch[1], g: +rgbMatch[2], b: +rgbMatch[3] };
+
+        const hexMatch = color.match(/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/);
+        if (hexMatch) return { r: parseInt(hexMatch[1], 16), g: parseInt(hexMatch[2], 16), b: parseInt(hexMatch[3], 16) };
+
+        return { r: 128, g: 128, b: 128 };
+    }
+
+    /**
+     * Linearly interpolate between two colors at a given t (0 = colorA, 1 = colorB).
+     * Returns an rgba() string.
+     */
+    public static interpolateColor(
+        colorA: string, opacityA: number,
+        colorB: string, opacityB: number,
+        t: number,
+    ): string {
+        const a = this.toRGB(colorA);
+        const b = this.toRGB(colorB);
+        const r = Math.round(a.r + (b.r - a.r) * t);
+        const g = Math.round(a.g + (b.g - a.g) * t);
+        const bl = Math.round(a.b + (b.b - a.b) * t);
+        const op = opacityA + (opacityB - opacityA) * t;
+        return `rgba(${r},${g},${bl},${op})`;
+    }
 }

package/src/utils/ShapeUtils.ts

@@ -47,6 +47,11 @@ export class ShapeUtils {
             case 'shape_label_up':
                 return 'path://M12 1l2 3h8a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-20a1 1 0 0 1-1-1v-14a1 1 0 0 1 1-1h8z';
 
+            case 'labelcenter':
+            case 'shape_label_center':
+                // Rounded rectangle with no pointer — centered at anchor
+                return 'path://M1 1h22a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-22a1 1 0 0 1-1-1v-16a1 1 0 0 1 1-1z';
+
             case 'square':
             case 'shape_square':
                 return 'rect';