@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/components/series-chart.js

@@ -21,11 +21,39 @@ import {
   DEFAULT_Y_AXIS,
   axisExtent,
   withChartZoom
-} from "./chart-zoom.js";
+} from "./chart-zoom-core.js";
 import { STEP_DASH, strokeDash } from "./toggle-legend.js";
 import { DEFAULT_SERIES_CHART_LABELS } from "./series-chart-labels.js";
 import { categoryTicks, integerTicks, niceTicks, tickTarget, timeTicksWithUnit } from "./series-chart-ticks.js";
 import { autoAxisBudget, axisUnit, budgetedAxes } from "./series-chart-budget.js";
+import { thinnedRows } from "./series-chart-thin.js";
+import {
+  AXIS_TITLE_OFFSET,
+  MIN_TICK_GAP,
+  TIME_TICK_FORMAT,
+  anchoredBand,
+  axisBandWidth,
+  extend,
+  finite,
+  padBand,
+  resolveTicks,
+  soleSeriesColor,
+  tiltedTickBand,
+  xModel
+} from "./series-chart-axes.js";
+import {
+  AXIS_TICK_WIDTH,
+  AXIS_TITLE_STRIP,
+  anchoredBand as anchoredBand2,
+  axisBandWidth as axisBandWidth2,
+  mergeSeries,
+  oneAxis,
+  padBand as padBand2,
+  paddedDomain,
+  seriesKey,
+  soleSeriesColor as soleSeriesColor2,
+  visibleSeries
+} from "./series-chart-axes.js";
 import { paletteFor } from "../theme/chart-palette.js";
 import {
   useKitChartTooltipPlacement,
@@ -51,74 +79,6 @@ const TONE_COLOR = {
   danger: "var(--danger)",
   info: "var(--info)"
 };
-const AXIS_TITLE_STRIP = 16;
-const AXIS_TITLE_OFFSET = 10;
-const MAX_TILTED_TICK_BAND = 120;
-const TICK_CHAR_WIDTH = 7;
-const TICK_LINE_HEIGHT = 12;
-const TICK_GAP = 8;
-const LEVEL_TICK_BAND = 30;
-const MIN_TICK_GAP = 32;
-function tiltedTickBand(labels, angle, scale = 1) {
-  if (!angle) return scale === 1 ? void 0 : Math.ceil(LEVEL_TICK_BAND * scale);
-  const rad = Math.abs(angle) * Math.PI / 180;
-  const longest = Math.max(0, ...labels.map((label) => label.length)) * TICK_CHAR_WIDTH * scale;
-  const band = Math.sin(rad) * longest + Math.cos(rad) * TICK_LINE_HEIGHT * scale + TICK_GAP;
-  return Math.min(Math.round(MAX_TILTED_TICK_BAND * scale), Math.max(Math.ceil(LEVEL_TICK_BAND * scale), Math.ceil(band)));
-}
-const AXIS_TICK_WIDTH = 48;
-const AUTO_PAD = 0.04;
-function paddedDomain(values) {
-  let low = Infinity;
-  let high = -Infinity;
-  for (const value of values) {
-    if (!Number.isFinite(value)) continue;
-    if (value < low) low = value;
-    if (value > high) high = value;
-  }
-  return padBand(low, high);
-}
-function padBand(low, high) {
-  if (!(low <= high)) return void 0;
-  const pad = (high - low) * AUTO_PAD || Math.abs(high) * AUTO_PAD || 1;
-  return [low - pad, high + pad];
-}
-function axisBandWidth(tickWidth, titled, scale = 1) {
-  const band = (tickWidth ?? AXIS_TICK_WIDTH) + (titled ? AXIS_TITLE_STRIP : 0);
-  return scale === 1 ? band : Math.round(band * scale);
-}
-function soleSeriesColor(axis, series) {
-  const mine = series.filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axis.id);
-  return mine.length === 1 ? axis.color : void 0;
-}
-function oneAxis(format, title, width, orientation) {
-  return [{ id: DEFAULT_Y_AXIS, format, title, width, orientation }];
-}
-function mergeSeries(sources) {
-  const byAbscissa = /* @__PURE__ */ new Map();
-  for (const source of sources) {
-    source.x.forEach((value, index) => {
-      const row = byAbscissa.get(value) ?? { x: value };
-      for (const [key, channel] of Object.entries(source.channels)) row[key] = channel[index];
-      byAbscissa.set(value, row);
-    });
-  }
-  return [...byAbscissa.values()].sort((a, b) => a.x - b.x);
-}
-function seriesKey(...parts) {
-  const key = parts.map((part) => String(part).replace(/[^A-Za-z0-9_-]/g, "_")).join("_");
-  return /^[A-Za-z_]/.test(key) ? key : `_${key}`;
-}
-function anchoredBand(extent) {
-  if (!extent) return void 0;
-  const low = Math.min(0, extent[0]);
-  const high = Math.max(0, extent[1]);
-  const pad = (high - low) * AUTO_PAD || 1;
-  return [low < 0 ? low - pad : 0, high > 0 ? high + pad : 0];
-}
-function visibleSeries(series, hidden) {
-  return series.map((entry, index) => ({ ...entry, color: entry.color ?? paletteFor(index) })).filter((entry) => !hidden.has(entry.key));
-}
 function withUnit(label, unit) {
   if (!unit) return label;
   if (typeof label === "string" || typeof label === "number") {
@@ -157,77 +117,6 @@ function useDefaultFormat(localeProp) {
   }, [locale]);
 }
 const ONE_UNTITLED_AXIS = [{ id: DEFAULT_Y_AXIS, title: "" }];
-const PLOTTED_X = "__seriesChartX";
-const finite = (value) => typeof value === "number" && Number.isFinite(value) ? value : void 0;
-function toTime(value) {
-  if (value instanceof Date) return finite(value.getTime());
-  if (typeof value === "number") return finite(value);
-  if (typeof value !== "string") return void 0;
-  const day = /^(\d{4})-(\d{2})(?:-(\d{2}))?$/.exec(value);
-  if (day) return new Date(Number(day[1]), Number(day[2]) - 1, Number(day[3] ?? 1)).getTime();
-  return finite(Date.parse(value));
-}
-const categoryId = (value) => value instanceof Date ? `d:${value.getTime()}` : `${typeof value}:${String(value)}`;
-function xModel(rows, x) {
-  const sourceKey = x.key ?? "x";
-  if (x.type === "category") {
-    const slots = /* @__PURE__ */ new Map();
-    rows.forEach((row, index) => {
-      const id = categoryId(row[sourceKey]);
-      if (!slots.has(id)) slots.set(id, index);
-    });
-    return {
-      kind: "category",
-      sourceKey,
-      plotKey: PLOTTED_X,
-      rows: rows.map((row, index) => ({ ...row, [PLOTTED_X]: index })),
-      source: rows,
-      position: (value) => slots.get(categoryId(value)),
-      valueAt: (position) => rows[Math.round(position)]?.[sourceKey]
-    };
-  }
-  if (x.type === "time") {
-    return {
-      kind: "time",
-      sourceKey,
-      plotKey: PLOTTED_X,
-      rows: rows.map((row) => ({ ...row, [PLOTTED_X]: toTime(row[sourceKey]) })),
-      source: rows,
-      position: toTime,
-      valueAt: (position) => new Date(position)
-    };
-  }
-  return {
-    kind: "number",
-    sourceKey,
-    plotKey: sourceKey,
-    rows,
-    source: rows,
-    position: finite,
-    valueAt: (position) => position
-  };
-}
-function resolveTicks(values, domain, position) {
-  if (!values || !domain) return void 0;
-  const list = typeof values === "function" ? values(domain) : values;
-  if (!list) return void 0;
-  const slack = (domain[1] - domain[0]) * 1e-9;
-  return list.map(position).filter((at) => at !== void 0 && at >= domain[0] - slack && at <= domain[1] + slack);
-}
-function extend(span, values) {
-  let out = span ? [span[0], span[1]] : void 0;
-  for (const value of values) {
-    if (value === void 0 || !Number.isFinite(value)) continue;
-    out = out ? [Math.min(out[0], value), Math.max(out[1], value)] : [value, value];
-  }
-  return out;
-}
-const TIME_TICK_FORMAT = {
-  hour: { hour: "2-digit", minute: "2-digit" },
-  day: { day: "numeric", month: "short" },
-  month: { month: "short", year: "2-digit" },
-  year: { year: "numeric" }
-};
 const LINE_WIDTH = 2;
 const STEP_WIDTH = 1.5;
 const BAR_RADIUS = [3, 3, 0, 0];
@@ -360,7 +249,8 @@ function SeriesPlot({
   minBarLength,
   maxVisibleAxes,
   axisBudget = "auto",
-  onAxisBudget
+  onAxisBudget,
+  maxRows
 }) {
   const labels = useKitLabels("seriesChart", DEFAULT_SERIES_CHART_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
@@ -396,6 +286,20 @@ function SeriesPlot({
   );
   const budgeted = [...capped, ...auto];
   const budgetKey = budgeted.join("\n");
+  const thinKeys = series.map((entry) => entry.key).join("\n");
+  const [windowFrom, windowTo] = zoom?.xDomain ?? [void 0, void 0];
+  const thin = useMemo(() => {
+    if (model.kind === "category" || maxRows === void 0) return void 0;
+    const keys = thinKeys ? thinKeys.split("\n") : [];
+    const window = windowFrom !== void 0 && windowTo !== void 0 ? [windowFrom, windowTo] : void 0;
+    const kept = thinnedRows(model.rows, model.plotKey, keys, maxRows, window);
+    if (!kept) return void 0;
+    return {
+      kept,
+      plotted: kept.map((index) => model.rows[index]),
+      source: kept.map((index) => model.source[index])
+    };
+  }, [model, thinKeys, maxRows, windowFrom, windowTo]);
   const reported = useRef("");
   useEffect(() => {
     if (budgetKey === reported.current) return;
@@ -409,14 +313,16 @@ function SeriesPlot({
       {
         className: cn("flex w-full items-center justify-center px-2 text-center", heightClass),
         style: heightStyle,
-        children: empty !== void 0 ? empty : /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: labels.empty })
+        children: empty !== void 0 ? empty : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted", children: labels.empty })
       }
     );
   }
   const x = xAxis;
   const xKey = model.plotKey;
-  const plotted = model.rows;
-  const rows = model.source;
+  const plotted = thin?.plotted ?? model.rows;
+  const rows = thin?.source ?? model.source;
+  const allPlotted = model.rows;
+  const origin = (index) => thin?.kept[index] ?? index;
   const drawnAxes = budgeted.length ? axes.map((axis) => budgeted.includes(axis.id) ? { ...axis, hide: true } : axis) : axes;
   const lostUnit = new Map(
     axes.filter((axis) => budgeted.includes(axis.id)).map((axis) => [axis.id, axisUnit(axis)])
@@ -451,14 +357,14 @@ function SeriesPlot({
     ...extend(
       void 0,
       [
-        ...plotted.map((row2) => finite(row2[xKey])),
+        ...allPlotted.map((row2) => finite(row2[xKey])),
         ...xRefs.map((ref) => xPos(ref.value)),
         ...(markers ?? []).map((marker) => xPos(marker.x))
       ]
     ) ?? [Infinity, -Infinity]
   ));
   const timeUnit = model.kind === "time" ? timeTicksWithUnit(fittedX, ticksAim) : void 0;
-  const integerX = model.kind === "number" && (x.integerTicks ?? plotted.every((row2) => {
+  const integerX = model.kind === "number" && (x.integerTicks ?? allPlotted.every((row2) => {
     const value = finite(row2[xKey]);
     return value === void 0 || Number.isInteger(value);
   }));
@@ -482,7 +388,7 @@ function SeriesPlot({
   const tickAngle = x.ticks === false ? 0 : x.tickAngle ?? 0;
   const tickBand = tiltedTickBand((xTicks ?? []).map((tick) => xFormat(tick)), tickAngle, scale);
   const source = {
-    rows: plotted,
+    rows: allPlotted,
     series,
     axes,
     xKey
@@ -491,7 +397,7 @@ function SeriesPlot({
     (entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axis.id && (entry.type ?? "line") !== "line"
   );
   const wholeOnly = (axis) => axis.integerTicks ?? series.filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axis.id).every(
-    (entry) => plotted.every((row2) => {
+    (entry) => allPlotted.every((row2) => {
       const value = finite(row2[entry.key]);
       return value === void 0 || Number.isInteger(value);
     })
@@ -511,7 +417,7 @@ function SeriesPlot({
   const xOf = (index) => model.kind === "category" ? rows[index][model.sourceKey] : model.valueAt(finite(plotted[index][xKey]) ?? NaN);
   const hitAt = (index, key) => {
     const row2 = rows[index];
-    return row2 ? { index, row: row2, x: xOf(index), key } : void 0;
+    return row2 ? { index: origin(index), row: row2, x: xOf(index), key } : void 0;
   };
   const stops = [];
   if (onPointClick) {
@@ -555,7 +461,7 @@ function SeriesPlot({
       if (value === void 0 || !Number.isFinite(cx) || !Number.isFinite(cy)) return /* @__PURE__ */ jsx("g", {});
       const point = {
         key: entry.key,
-        index,
+        index: origin(index),
         row: rows[index],
         x: xOf(index),
         value,
@@ -593,6 +499,7 @@ function SeriesPlot({
     {
       ref: setBox,
       "data-axis-budget": budgeted.length ? budgetKey.replace(/\n/g, " ") : void 0,
+      "data-thinned": thin ? `${thin.kept.length}/${allPlotted.length}` : void 0,
       config,
       className: cn(
         "w-full",
@@ -639,7 +546,7 @@ function SeriesPlot({
                     value: x.title,
                     position: "insideBottom",
                     offset: -grow(12),
-                    className: "fill-[var(--text-muted)] text-caption"
+                    className: "fill-muted text-caption"
                   }
                 )
               }
@@ -669,7 +576,7 @@ function SeriesPlot({
                       position: axis.orientation === "right" ? "insideRight" : "insideLeft",
                       style: { textAnchor: "middle", fill: soleSeriesColor(axis, series) },
                       offset: grow(AXIS_TITLE_OFFSET),
-                      className: "fill-[var(--text-muted)] text-caption"
+                      className: "fill-muted text-caption"
                     }
                   )
                 },
@@ -883,32 +790,34 @@ function SeriesPlot({
   ] });
 }
 const ZoomablePlot = withChartZoom(SeriesPlot);
-function plotProps(props) {
+function usePlotProps(props) {
   const x = props.x ?? {};
-  const model = xModel(props.rows, x);
+  const { rows } = props;
+  const { type, key } = x;
+  const model = useMemo(() => xModel(rows, { type, key }), [rows, type, key]);
   return { ...props, rows: model.rows, x: { key: model.plotKey }, model, xAxis: x };
 }
 function StaticSeriesChart(props) {
-  return /* @__PURE__ */ jsx(SeriesPlot, { ...plotProps(props) });
+  return /* @__PURE__ */ jsx(SeriesPlot, { ...usePlotProps(props) });
 }
 function SeriesChart(props) {
-  return /* @__PURE__ */ jsx(ZoomablePlot, { ...plotProps(props) });
+  return /* @__PURE__ */ jsx(ZoomablePlot, { ...usePlotProps(props) });
 }
 export {
   AXIS_TICK_WIDTH,
   AXIS_TITLE_STRIP,
   SeriesChart,
   StaticSeriesChart,
-  anchoredBand,
-  axisBandWidth,
+  anchoredBand2 as anchoredBand,
+  axisBandWidth2 as axisBandWidth,
   mergeSeries,
   oneAxis,
-  padBand,
+  padBand2 as padBand,
   paddedDomain,
   resolveTooltipPlacement,
   seriesKey,
   seriesLegendEntries,
-  soleSeriesColor,
+  soleSeriesColor2 as soleSeriesColor,
   visibleSeries
 };
 //# sourceMappingURL=series-chart.js.map