@quantumwake/terminal-ux-dashboard-components 0.1.26 → 0.1.28

package/dist/index.d.cts

@@ -325,12 +325,18 @@ declare function PieView({ records, groupColumn, data: presetData, style }: PieV
 
 interface LineSerie {
     id: string;
+    /** Explicit serie color — STABLE identity coloring: the host assigns a
+     *  color to the entity, so toggling other series never repaints this
+     *  one (index-based palette assignment reshuffles on every selection
+     *  change). Absent ⇒ the fixed-order palette by index. */
+    color?: string;
     /** lo/hi (optional, per point) draw a soft envelope band behind the
      *  line — the reading for "this line summarizes several": the band is
-     *  the min–max spread of what it aggregates. */
+     *  the min–max spread of what it aggregates. y may be null for an
+     *  honest gap (the line breaks instead of bridging). */
     data: {
         x: string;
-        y: number;
+        y: number | null;
         lo?: number;
         hi?: number;
     }[];

package/dist/index.d.ts

@@ -325,12 +325,18 @@ declare function PieView({ records, groupColumn, data: presetData, style }: PieV
 
 interface LineSerie {
     id: string;
+    /** Explicit serie color — STABLE identity coloring: the host assigns a
+     *  color to the entity, so toggling other series never repaints this
+     *  one (index-based palette assignment reshuffles on every selection
+     *  change). Absent ⇒ the fixed-order palette by index. */
+    color?: string;
     /** lo/hi (optional, per point) draw a soft envelope band behind the
      *  line — the reading for "this line summarizes several": the band is
-     *  the min–max spread of what it aggregates. */
+     *  the min–max spread of what it aggregates. y may be null for an
+     *  honest gap (the line breaks instead of bridging). */
     data: {
         x: string;
-        y: number;
+        y: number | null;
         lo?: number;
         hi?: number;
     }[];

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo, useRef, useId, useState, useEffect, useCallback, Suspense } from 'react';
+import { createContext, useContext, useMemo, useId, useState, useEffect, useRef, useCallback, Suspense } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { interpolateRdYlGn } from 'd3-scale-chromatic';
 import { ResponsiveBar } from '@nivo/bar';
@@ -666,16 +666,14 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
   const { frameClass, frameStyle, margin } = chartSizing(style, { top: 20, right: 20, bottom: 60, left: 60 });
   const colorById = new Map(data.map((serie, i) => [
     serie.id,
-    s.seriesColors.length || data.length > 1 ? seriesColor(i, s) : "rgba(96, 165, 250, 0.9)"
+    serie.color ?? (s.seriesColors.length || data.length > 1 ? seriesColor(i, s) : "rgba(96, 165, 250, 0.9)")
   ]));
   const longest = data.reduce((a, b) => b.data.length > a.data.length ? b : a, { id: "", data: [] });
   const tickValues = thinTicks(longest.data.map((d) => d.x), s.maxXTicks);
-  const ceilRef = useRef(0);
   let yScale = { type: "linear", min: "auto", max: "auto" };
   if (s.yFromZero) {
-    const dataMax = Math.max(0, ...data.flatMap((serie) => serie.data.map((d) => Math.max(d.y, d.hi ?? d.y))));
-    ceilRef.current = Math.max(ceilRef.current, niceCeil(dataMax));
-    yScale = { type: "linear", min: 0, max: ceilRef.current };
+    const dataMax = Math.max(0, ...data.flatMap((serie) => serie.data.map((d) => Math.max(d.y ?? 0, d.hi ?? d.y ?? 0))));
+    yScale = { type: "linear", min: 0, max: niceCeil(dataMax) };
   }
   const bandedIds = new Set(data.filter((serie) => serie.data.some((d) => d.lo != null)).map((serie) => serie.id));
   const bandsLayer = ({ series, yScale: yScale2, lineGenerator }) => /* @__PURE__ */ jsx(Fragment, { children: series.map((serie) => {