@quantumwake/terminal-ux-dashboard-components 0.1.20 → 0.1.21

package/dist/index.d.cts

@@ -144,6 +144,9 @@ interface ChartStyle {
     height: number;
     margin: Partial<ChartMargin> | null;
     maxXTicks: number;
+    maxYTicks: number;
+    areaOpacity: number;
+    barLabels: boolean;
     seriesColors: string[];
 }
 declare const DEFAULT_CHART_STYLE: ChartStyle;
@@ -297,9 +300,12 @@ interface BarViewProps {
     aggFn?: string;
     /** Pre-aggregated [{group, value}] bypasses client-side aggregation. */
     data?: BarDatum[];
+    /** 'horizontal' lays categories on the y axis — the readable form for
+     *  many bars with long names (labels never collide). Default vertical. */
+    layout?: 'vertical' | 'horizontal';
     style?: Partial<ChartStyle>;
 }
-declare function BarView({ records, groupColumn, valueColumn, aggFn, data: presetData, style }: BarViewProps): react.JSX.Element;
+declare function BarView({ records, groupColumn, valueColumn, aggFn, data: presetData, layout, style }: BarViewProps): react.JSX.Element;
 
 interface PieDatum {
     id: string;
@@ -328,9 +334,12 @@ interface LineViewProps {
     yColumn: string;
     /** Pre-shaped Nivo line series bypasses client-side processing. */
     data?: LineSerie[];
+    /** Serie ids to draw dotted — the aggregate-vs-individual distinction
+     *  (an average line reads as derived, a member line as observed). */
+    dashedIds?: string[];
     style?: Partial<ChartStyle>;
 }
-declare function LineView({ records, xColumn, yColumn, data: presetData, style }: LineViewProps): react.JSX.Element;
+declare function LineView({ records, xColumn, yColumn, data: presetData, dashedIds, style }: LineViewProps): react.JSX.Element;
 
 interface SparklineViewProps {
     /** The series, oldest first. */

package/dist/index.d.ts

@@ -144,6 +144,9 @@ interface ChartStyle {
     height: number;
     margin: Partial<ChartMargin> | null;
     maxXTicks: number;
+    maxYTicks: number;
+    areaOpacity: number;
+    barLabels: boolean;
     seriesColors: string[];
 }
 declare const DEFAULT_CHART_STYLE: ChartStyle;
@@ -297,9 +300,12 @@ interface BarViewProps {
     aggFn?: string;
     /** Pre-aggregated [{group, value}] bypasses client-side aggregation. */
     data?: BarDatum[];
+    /** 'horizontal' lays categories on the y axis — the readable form for
+     *  many bars with long names (labels never collide). Default vertical. */
+    layout?: 'vertical' | 'horizontal';
     style?: Partial<ChartStyle>;
 }
-declare function BarView({ records, groupColumn, valueColumn, aggFn, data: presetData, style }: BarViewProps): react.JSX.Element;
+declare function BarView({ records, groupColumn, valueColumn, aggFn, data: presetData, layout, style }: BarViewProps): react.JSX.Element;
 
 interface PieDatum {
     id: string;
@@ -328,9 +334,12 @@ interface LineViewProps {
     yColumn: string;
     /** Pre-shaped Nivo line series bypasses client-side processing. */
     data?: LineSerie[];
+    /** Serie ids to draw dotted — the aggregate-vs-individual distinction
+     *  (an average line reads as derived, a member line as observed). */
+    dashedIds?: string[];
     style?: Partial<ChartStyle>;
 }
-declare function LineView({ records, xColumn, yColumn, data: presetData, style }: LineViewProps): react.JSX.Element;
+declare function LineView({ records, xColumn, yColumn, data: presetData, dashedIds, style }: LineViewProps): react.JSX.Element;
 
 interface SparklineViewProps {
     /** The series, oldest first. */

package/dist/index.js

@@ -273,6 +273,9 @@ var DEFAULT_CHART_STYLE = {
   height: 0,
   margin: null,
   maxXTicks: 0,
+  maxYTicks: 0,
+  areaOpacity: 0.15,
+  barLabels: true,
   seriesColors: []
 };
 var DEFAULT_SERIES_COLORS = [
@@ -565,9 +568,11 @@ function makeAxis(style, axis, columnName, opts2 = {}) {
     out.tickRotation = rotate;
     out.format = (v) => formatVal(v, s, numeric);
   }
+  const maxTicks = isX ? s.maxXTicks : s.maxYTicks;
+  if (numeric && maxTicks > 0) out.tickValues = maxTicks;
   return out;
 }
-function BarView({ records, groupColumn, valueColumn, aggFn = "count", data: presetData, style }) {
+function BarView({ records, groupColumn, valueColumn, aggFn = "count", data: presetData, layout = "vertical", style }) {
   const computed = useMemo(() => {
     if (presetData || !records) return [];
     const groups = groupBy(records, groupColumn);
@@ -576,18 +581,24 @@ function BarView({ records, groupColumn, valueColumn, aggFn = "count", data: pre
   const data = presetData || computed;
   const s = withStyleDefaults(style);
   const { frameClass, frameStyle, margin } = chartSizing(style, { top: 20, right: 20, bottom: 60, left: 60 });
+  const horizontal = layout === "horizontal";
+  const plotted = horizontal ? [...data].reverse() : data;
+  const axisBottom = horizontal ? makeAxis(style, "x", valueColumn, { numeric: true }) : makeAxis(style, "x", groupColumn);
+  const axisLeft = horizontal ? makeAxis(style, "y", groupColumn) : makeAxis(style, "y", valueColumn, { numeric: true });
   return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
     ResponsiveBar,
     {
-      data,
+      data: plotted,
       keys: ["value"],
       indexBy: "group",
+      layout,
       margin,
       padding: 0.3,
       colors: [s.seriesColors[0] || "rgba(74, 222, 128, 0.8)"],
       borderColor: { from: "color", modifiers: [["darker", 1.6]] },
-      axisBottom: makeAxis(style, "x", groupColumn),
-      axisLeft: makeAxis(style, "y", valueColumn, { numeric: true }),
+      axisBottom,
+      axisLeft,
+      enableLabel: s.barLabels,
       labelSkipWidth: 12,
       labelSkipHeight: 12,
       labelTextColor: { from: "color", modifiers: [["darker", 3]] },
@@ -633,7 +644,7 @@ function PieView({ records, groupColumn, data: presetData, style }) {
     }
   ) });
 }
-function LineView({ records, xColumn, yColumn, data: presetData, style }) {
+function LineView({ records, xColumn, yColumn, data: presetData, dashedIds, style }) {
   const computed = useMemo(() => {
     if (presetData || !records) return [];
     const sorted = [...records].filter((r) => r[xColumn] != null && r[yColumn] != null).sort((a, b) => {
@@ -653,7 +664,21 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
     serie.id,
     s.seriesColors.length || data.length > 1 ? seriesColor(i, s) : "rgba(96, 165, 250, 0.9)"
   ]));
-  const tickValues = thinTicks(data[0]?.data.map((d) => d.x) ?? [], s.maxXTicks);
+  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 dashed = new Set(dashedIds || []);
+  const linesLayer = ({ series, lineGenerator }) => /* @__PURE__ */ jsx(Fragment, { children: series.map((serie) => /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: lineGenerator(serie.data.map((d) => d.position)),
+      fill: "none",
+      stroke: serie.color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeDasharray: dashed.has(String(serie.id)) ? "1 5" : void 0
+    },
+    serie.id
+  )) });
   return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
     ResponsiveLine,
     {
@@ -662,10 +687,10 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
       xScale: { type: "point" },
       yScale: { type: "linear", min: "auto", max: "auto" },
       curve: "monotoneX",
-      enableArea: true,
-      areaOpacity: 0.15,
+      enableArea: s.areaOpacity > 0,
+      areaOpacity: s.areaOpacity,
       colors: ((serie) => colorById.get(serie.id)),
-      pointSize: (data[0]?.data.length ?? 0) > 50 ? 0 : 6,
+      pointSize: 0,
       pointColor: { theme: "background" },
       pointBorderWidth: 2,
       pointBorderColor: { from: "serieColor" },
@@ -673,6 +698,7 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
       axisBottom: { ...makeAxis(style, "x", xColumn), ...tickValues ? { tickValues } : {} },
       axisLeft: makeAxis(style, "y", yColumn, { numeric: true }),
       useMesh: true,
+      layers: ["grid", "markers", "axes", "areas", linesLayer, "crosshair", "slices", "mesh", "legends"],
       theme: buildNivoTheme(style)
     }
   ) });