@quantumwake/terminal-ux-dashboard-components 0.1.23 → 0.1.25

package/dist/index.d.cts

@@ -146,7 +146,9 @@ interface ChartStyle {
     maxXTicks: number;
     maxYTicks: number;
     areaOpacity: number;
+    yFromZero: boolean;
     barLabels: boolean;
+    animate: boolean;
     seriesColors: string[];
 }
 declare const DEFAULT_CHART_STYLE: ChartStyle;

package/dist/index.d.ts

@@ -146,7 +146,9 @@ interface ChartStyle {
     maxXTicks: number;
     maxYTicks: number;
     areaOpacity: number;
+    yFromZero: boolean;
     barLabels: boolean;
+    animate: boolean;
     seriesColors: string[];
 }
 declare const DEFAULT_CHART_STYLE: ChartStyle;

package/dist/index.js

@@ -275,7 +275,9 @@ var DEFAULT_CHART_STYLE = {
   maxXTicks: 0,
   maxYTicks: 0,
   areaOpacity: 0.15,
+  yFromZero: false,
   barLabels: true,
+  animate: false,
   seriesColors: []
 };
 var DEFAULT_SERIES_COLORS = [
@@ -602,6 +604,7 @@ function BarView({ records, groupColumn, valueColumn, aggFn = "count", data: pre
       labelSkipWidth: 12,
       labelSkipHeight: 12,
       labelTextColor: { from: "color", modifiers: [["darker", 3]] },
+      animate: s.animate,
       theme: buildNivoTheme(style)
     }
   ) });
@@ -640,6 +643,7 @@ function PieView({ records, groupColumn, data: presetData, style }) {
       arcLabelsSkipAngle: 10,
       arcLabelsTextColor: { from: "color", modifiers: [["darker", 3]] },
       legends: legend ? [legend] : [],
+      animate: s.animate,
       theme: buildNivoTheme(style)
     }
   ) });
@@ -666,12 +670,17 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
   ]));
   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);
+  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))));
+    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, lineGenerator }) => /* @__PURE__ */ jsx(Fragment, { children: series.map((serie) => {
+  const bandsLayer = ({ series, yScale: yScale2, lineGenerator }) => /* @__PURE__ */ jsx(Fragment, { children: series.map((serie) => {
     const pts = serie.data.filter((d) => d.data.lo != null && d.data.hi != null && d.position.x != null);
     if (pts.length < 2) return null;
-    const upper = lineGenerator(pts.map((d) => ({ x: d.position.x, y: yScale(d.data.hi) })));
-    const lower = lineGenerator([...pts].reverse().map((d) => ({ x: d.position.x, y: yScale(d.data.lo) })));
+    const upper = lineGenerator(pts.map((d) => ({ x: d.position.x, y: yScale2(d.data.hi) })));
+    const lower = lineGenerator([...pts].reverse().map((d) => ({ x: d.position.x, y: yScale2(d.data.lo) })));
     if (!upper || !lower) return null;
     return /* @__PURE__ */ jsx("path", { d: `${upper} L ${lower.slice(1)} Z`, fill: serie.color, opacity: 0.12 }, `band-${serie.id}`);
   }) });
@@ -692,7 +701,7 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
       data,
       margin,
       xScale: { type: "point" },
-      yScale: { type: "linear", min: "auto", max: "auto" },
+      yScale,
       curve: "monotoneX",
       enableArea: s.areaOpacity > 0,
       areaOpacity: s.areaOpacity,
@@ -706,10 +715,20 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
       axisLeft: makeAxis(style, "y", yColumn, { numeric: true }),
       useMesh: true,
       layers: ["grid", "markers", "axes", "areas", bandsLayer, linesLayer, "crosshair", "slices", "mesh", "legends"],
+      animate: s.animate,
       theme: buildNivoTheme(style)
     }
   ) });
 }
+function niceCeil(v) {
+  if (v <= 0) return 1;
+  const padded = v * 1.05;
+  const mag = Math.pow(10, Math.floor(Math.log10(padded)));
+  for (const step of [1, 2, 5, 10]) {
+    if (padded <= step * mag) return step * mag;
+  }
+  return 10 * mag;
+}
 function SparklineView({ data, height = 56, color = "#3987e5", showValue = false, format }) {
   const gradientId = useId();
   const width = 260;
@@ -758,6 +777,7 @@ function ScatterView({ records, xColumn, yColumn, data: presetData, style }) {
       axisBottom: makeAxis(style, "x", xColumn, { numeric: true }),
       axisLeft: makeAxis(style, "y", yColumn, { numeric: true }),
       useMesh: true,
+      animate: s.animate,
       theme: buildNivoTheme(style)
     }
   ) });
@@ -865,6 +885,7 @@ function HeatmapView({
       borderColor: "#334155",
       labelTextColor: { from: "color", modifiers: [["darker", 3]] },
       hoverTarget: "cell",
+      animate: s.animate,
       theme: buildNivoTheme(style)
     }
   ) });
@@ -1019,6 +1040,7 @@ function HeatmapPlusView({
       borderColor: "#334155",
       labelTextColor: ((cell) => heatLabelColor(tAt(cell.serieId, cell.data.x))),
       hoverTarget: "cell",
+      animate: s.animate,
       theme: buildNivoTheme(style)
     }
   ) });