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

package/dist/index.cjs

@@ -281,6 +281,9 @@ var DEFAULT_CHART_STYLE = {
   height: 0,
   margin: null,
   maxXTicks: 0,
+  maxYTicks: 0,
+  areaOpacity: 0.15,
+  barLabels: true,
   seriesColors: []
 };
 var DEFAULT_SERIES_COLORS = [
@@ -573,9 +576,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 = react.useMemo(() => {
     if (presetData || !records) return [];
     const groups = groupBy(records, groupColumn);
@@ -584,18 +589,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__ */ jsxRuntime.jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
     bar.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]] },
@@ -641,7 +652,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 = react.useMemo(() => {
     if (presetData || !records) return [];
     const sorted = [...records].filter((r) => r[xColumn] != null && r[yColumn] != null).sort((a, b) => {
@@ -661,7 +672,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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: series.map((serie) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
     line.ResponsiveLine,
     {
@@ -670,10 +695,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" },
@@ -681,6 +706,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)
     }
   ) });