@pushwoosh/kit-charts 0.0.1

package/presets/StackedColumnChart.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Chart } from '../core/Chart/Chart';
+import { column } from '../series/column';
+export function StackedColumnChart(props) {
+  const {
+    renderers,
+    stacking = 'normal',
+    options,
+    ...rest
+  } = props;
+  const stackedOptions = useMemo(() => {
+    const plotOptions = options.plotOptions ?? {};
+    const columnOptions = plotOptions.column ?? {};
+    return {
+      ...options,
+      plotOptions: {
+        ...plotOptions,
+        column: {
+          stacking,
+          ...columnOptions
+        }
+      }
+    };
+  }, [options, stacking]);
+  return _jsx(Chart, {
+    ...rest,
+    options: stackedOptions,
+    renderers: renderers ? [column, ...renderers] : [column]
+  });
+}

package/presets/index.d.ts

@@ -0,0 +1,5 @@
+export { AreaChart } from './AreaChart';
+export { ColumnChart } from './ColumnChart';
+export { LineChart } from './LineChart';
+export { PieChart } from './PieChart';
+export { StackedColumnChart, type StackedColumnChartProps } from './StackedColumnChart';

package/presets/index.js

@@ -0,0 +1,5 @@
+export { AreaChart } from './AreaChart';
+export { ColumnChart } from './ColumnChart';
+export { LineChart } from './LineChart';
+export { PieChart } from './PieChart';
+export { StackedColumnChart } from './StackedColumnChart';

package/series/area/area.d.ts

@@ -0,0 +1,2 @@
+import { type SeriesRenderer } from '../../core/types/renderer';
+export declare const area: SeriesRenderer;

package/series/area/area.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { drawable, projectSeries, toAreaPath, toLinePath } from '../../core/geometry/path';
+import { includeZero } from '../shared/domain';
+import { nearestByX } from '../shared/hit';
+import { seriesLegend } from '../shared/legend';
+import { Markers } from '../shared/Markers';
+const DEFAULT_FILL_OPACITY = 0.75;
+export const area = {
+  type: 'area',
+  scales: {
+    x: 'linear',
+    y: 'linear'
+  },
+  extendDomain: (series, acc) => includeZero(series, acc),
+  render: ctx => {
+    var _ctx$hovered, _ctx$series$marker;
+    const slots = projectSeries(ctx);
+    const projected = drawable(slots);
+    if (!projected.length) {
+      return null;
+    }
+    const color = ctx.color;
+    const lineWidth = ctx.series.lineWidth ?? 2;
+    const hoveredIndex = (_ctx$hovered = ctx.hovered) === null || _ctx$hovered === void 0 ? void 0 : _ctx$hovered.pointIndex;
+    const hovered = hoveredIndex === undefined ? undefined : projected.find(({
+      point
+    }) => point.index === hoveredIndex);
+    return _jsxs("g", {
+      children: [_jsx("path", {
+        d: toAreaPath(slots),
+        fill: color,
+        fillOpacity: ctx.series.fillOpacity ?? DEFAULT_FILL_OPACITY,
+        stroke: "none"
+      }), lineWidth ? _jsx("path", {
+        d: toLinePath(slots),
+        fill: "none",
+        stroke: color,
+        strokeWidth: lineWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }) : null, _jsx(Markers, {
+        marker: ctx.series.marker,
+        projected: projected,
+        color: color
+      }), hovered ? _jsx("circle", {
+        cx: hovered.px,
+        cy: hovered.py,
+        r: ((_ctx$series$marker = ctx.series.marker) === null || _ctx$series$marker === void 0 || (_ctx$series$marker = _ctx$series$marker.states) === null || _ctx$series$marker === void 0 || (_ctx$series$marker = _ctx$series$marker.hover) === null || _ctx$series$marker === void 0 ? void 0 : _ctx$series$marker.radius) ?? 4,
+        fill: color,
+        stroke: "#FFFFFF",
+        strokeWidth: 2
+      }) : null]
+    });
+  },
+  hitTest: (ctx, pointer) => nearestByX(ctx, pointer),
+  legendItems: (series, seriesIndex) => seriesLegend(series, seriesIndex, 'square')
+};

package/series/area/index.d.ts

@@ -0,0 +1 @@
+export { area } from './area';

package/series/area/index.js

@@ -0,0 +1 @@
+export { area } from './area';

package/series/column/column.d.ts

@@ -0,0 +1,2 @@
+import { type SeriesRenderer } from '../../core/types/renderer';
+export declare const column: SeriesRenderer;

package/series/column/column.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { pointKey } from '../../core/data/points';
+import { drawable, projectSeries } from '../../core/geometry/path';
+import { TEXT_BASELINE_SHIFT, VALUE_LABEL_GAP } from '../../core/layout/metrics';
+import { brighten } from '../shared/color';
+import { DataLabels } from '../shared/DataLabels';
+import { includeZero } from '../shared/domain';
+import { seriesLegend } from '../shared/legend';
+const DEFAULT_HOVER_BRIGHTNESS = 0.1;
+const SLOT_FALLBACK = {
+  width: 10,
+  offset: 0
+};
+function toBars(ctx) {
+  const slot = ctx.slot ?? SLOT_FALLBACK;
+  const minLength = ctx.series.minPointLength ?? 0;
+  return drawable(projectSeries(ctx)).map(projected => {
+    const centre = projected.px + slot.offset;
+    // Switched off: sit flat on the bar's own base. Every bar then shrinks into the
+    // place it grew from, which for a stack is the segment below it.
+    if (ctx.hidden) {
+      return {
+        ...projected,
+        x: centre - slot.width / 2,
+        y: projected.baseY,
+        width: slot.width,
+        height: 0
+      };
+    }
+    const raw = Math.abs(projected.py - projected.baseY);
+    const height = Math.max(raw, minLength);
+    // Growing a bar to `minPointLength` must keep it on its own side of the
+    // baseline, so a value at the axis minimum stays visible without flipping.
+    const top = projected.py <= projected.baseY ? Math.min(projected.py, projected.baseY) - (height - raw) : Math.min(projected.py, projected.baseY);
+    return {
+      ...projected,
+      x: centre - slot.width / 2,
+      y: top,
+      width: slot.width,
+      height
+    };
+  });
+}
+const fillOf = (ctx, bar, hovered) => {
+  var _ctx$series$states;
+  const base = bar.point.color ?? ctx.color;
+  if (!hovered) {
+    return base;
+  }
+  return brighten(base, ((_ctx$series$states = ctx.series.states) === null || _ctx$series$states === void 0 || (_ctx$series$states = _ctx$series$states.hover) === null || _ctx$series$states === void 0 ? void 0 : _ctx$series$states.brightness) ?? DEFAULT_HOVER_BRIGHTNESS);
+};
+/**
+ * A translucent body under a solid rule is the funnel look: the series keeps its
+ * real colour, so the legend and the tooltip swatch stay readable, and only the
+ * bar is washed out. Hovering deepens it.
+ */
+const opacityOf = (ctx, hovered) => {
+  var _ctx$series$states2;
+  const base = ctx.series.fillOpacity;
+  if (!hovered) {
+    return base;
+  }
+  return ((_ctx$series$states2 = ctx.series.states) === null || _ctx$series$states2 === void 0 || (_ctx$series$states2 = _ctx$series$states2.hover) === null || _ctx$series$states2 === void 0 ? void 0 : _ctx$series$states2.fillOpacity) ?? base;
+};
+export const column = {
+  type: 'column',
+  scales: {
+    x: 'band',
+    y: 'linear'
+  },
+  exit: 'collapse',
+  extendDomain: (series, acc) => includeZero(series, acc),
+  render: ctx => {
+    var _ctx$hovered;
+    const bars = toBars(ctx);
+    if (!bars.length) {
+      return null;
+    }
+    const hoveredIndex = (_ctx$hovered = ctx.hovered) === null || _ctx$hovered === void 0 ? void 0 : _ctx$hovered.pointIndex;
+    const radius = ctx.series.borderRadius;
+    const borderWidth = ctx.series.borderWidth ?? 0;
+    const capped = borderWidth > 0 && ctx.series.borderPosition === 'top';
+    return _jsxs("g", {
+      children: [bars.map(bar => _jsx("rect", {
+        x: bar.x,
+        y: bar.y,
+        width: bar.width,
+        height: bar.height,
+        rx: radius,
+        ry: radius,
+        fill: fillOf(ctx, bar, bar.point.index === hoveredIndex),
+        fillOpacity: opacityOf(ctx, bar.point.index === hoveredIndex),
+        stroke: borderWidth && !capped ? ctx.series.borderColor : undefined,
+        strokeWidth: borderWidth && !capped ? borderWidth : undefined
+      }, `c-${bar.point.index}`)), capped ? bars.map(bar => {
+        // The rule sits on the value edge, so a bar counting down wears it below.
+        const edge = bar.py <= bar.baseY ? bar.y : bar.y + bar.height;
+        return _jsx("line", {
+          x1: bar.x,
+          x2: bar.x + bar.width,
+          y1: edge,
+          y2: edge,
+          stroke: ctx.series.borderColor ?? ctx.color,
+          strokeWidth: borderWidth
+        }, `cap-${bar.point.index}`);
+      }) : null, _jsx(DataLabels, {
+        ctx: ctx,
+        projected: bars,
+        positionOf: projected => {
+          const bar = projected;
+          return ctx.stacked ? {
+            x: bar.x + bar.width / 2,
+            y: bar.y + bar.height / 2 + TEXT_BASELINE_SHIFT
+          } : {
+            x: bar.x + bar.width / 2,
+            y: bar.y - VALUE_LABEL_GAP
+          };
+        }
+      })]
+    });
+  },
+  hitTest: (ctx, pointer) => {
+    var _ctx$slot;
+    const bars = toBars(ctx);
+    if (!bars.length) {
+      return null;
+    }
+    const top = ctx.plot.y;
+    const bottom = ctx.plot.y + ctx.plot.height;
+    if (pointer.y < top || pointer.y > bottom) {
+      return null;
+    }
+    const step = ((_ctx$slot = ctx.slot) === null || _ctx$slot === void 0 ? void 0 : _ctx$slot.step) ?? ctx.plot.width / 2;
+    let candidate;
+    let candidateGap = Infinity;
+    bars.forEach(bar => {
+      const gap = Math.abs(pointer.x - bar.px);
+      if (gap < candidateGap) {
+        candidate = bar;
+        candidateGap = gap;
+      }
+    });
+    if (!candidate || candidateGap > step / 2) {
+      return null;
+    }
+    const gapTo = (from, to, value) => Math.max(0, from - value, value - to);
+    const horizontal = gapTo(candidate.x, candidate.x + candidate.width, pointer.x);
+    const vertical = gapTo(candidate.y, candidate.y + candidate.height, pointer.y);
+    return [{
+      seriesIndex: ctx.seriesIndex,
+      pointIndex: candidate.point.index,
+      x: pointKey(candidate.point),
+      y: candidate.point.y,
+      value: candidate.point.value,
+      anchor: {
+        x: candidate.x + candidate.width / 2,
+        y: candidate.y
+      },
+      distance: horizontal + vertical
+    }];
+  },
+  legendItems: (series, seriesIndex) => seriesLegend(series, seriesIndex, 'square')
+};

package/series/column/index.d.ts

@@ -0,0 +1 @@
+export { column } from './column';

package/series/column/index.js

@@ -0,0 +1 @@
+export { column } from './column';

package/series/heatmap/heatmap.d.ts

@@ -0,0 +1,2 @@
+import { type SeriesRenderer } from '../../core/types/renderer';
+export declare const heatmap: SeriesRenderer;

package/series/heatmap/heatmap.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { pointKey } from '../../core/data/points';
+import { TEXT_BASELINE_SHIFT, VALUE_LABEL_GAP } from '../../core/layout/metrics';
+import { brighten } from '../shared/color';
+import { DataLabels } from '../shared/DataLabels';
+const DEFAULT_HOVER_BRIGHTNESS = 0.1;
+/** Width of one column: a unit step on the x axis, or the whole plot if there is none. */
+function columnWidth(ctx) {
+  const scale = ctx.scales.x;
+  if (scale.kind === 'band') {
+    return Math.abs(scale.step());
+  }
+  if (scale.kind === 'color') {
+    return ctx.plot.width;
+  }
+  const width = Math.abs(scale.map(1) - scale.map(0));
+  return width > 0 ? width : ctx.plot.width;
+}
+/** Top edge and height of the row a point belongs to. */
+function rowOf(scale, point) {
+  if (scale.kind === 'band') {
+    const rows = scale.domain();
+    const row = point.y === null ? -1 : Math.round(point.y);
+    const category = rows[row];
+    if (category === undefined) {
+      return null;
+    }
+    return {
+      top: scale.map(category),
+      height: Math.abs(scale.bandwidth())
+    };
+  }
+  if (point.y === null) {
+    return null;
+  }
+  const height = Math.abs(scale.map(1) - scale.map(0));
+  return {
+    top: scale.map(point.y) - height / 2,
+    height
+  };
+}
+/** Horizontal centre of the cell: a band slot centre, or the point's x. */
+function cellCentre(scale, point) {
+  if (scale.kind === 'band') {
+    return scale.map(point.band ?? String(point.name ?? point.x)) + Math.abs(scale.bandwidth()) / 2;
+  }
+  if (scale.kind === 'color') {
+    return NaN;
+  }
+  return scale.map(Number(point.x));
+}
+function toCells(ctx) {
+  const width = columnWidth(ctx);
+  return ctx.points.reduce((cells, point) => {
+    const row = rowOf(ctx.scales.y, point);
+    if (!row) {
+      return cells;
+    }
+    const centre = cellCentre(ctx.scales.x, point);
+    if (!Number.isFinite(centre) || !Number.isFinite(row.top)) {
+      return cells;
+    }
+    cells.push({
+      point,
+      px: centre,
+      py: row.top + row.height / 2,
+      baseY: row.top + row.height,
+      x: centre - width / 2,
+      y: row.top,
+      width,
+      height: row.height
+    });
+    return cells;
+  }, []);
+}
+const fillOf = (ctx, cell, hovered) => {
+  var _ctx$scales$color, _ctx$series$states;
+  const scaled = cell.point.value === null ? undefined : (_ctx$scales$color = ctx.scales.color) === null || _ctx$scales$color === void 0 ? void 0 : _ctx$scales$color.map(cell.point.value);
+  const base = cell.point.color ?? scaled ?? ctx.color;
+  if (!hovered) {
+    return base;
+  }
+  return brighten(base, ((_ctx$series$states = ctx.series.states) === null || _ctx$series$states === void 0 || (_ctx$series$states = _ctx$series$states.hover) === null || _ctx$series$states === void 0 ? void 0 : _ctx$series$states.brightness) ?? DEFAULT_HOVER_BRIGHTNESS);
+};
+const labelX = (ctx, cell) => {
+  var _ctx$series$dataLabel, _ctx$series$dataLabel2;
+  const padding = ((_ctx$series$dataLabel = ctx.series.dataLabels) === null || _ctx$series$dataLabel === void 0 ? void 0 : _ctx$series$dataLabel.padding) ?? VALUE_LABEL_GAP;
+  const align = (_ctx$series$dataLabel2 = ctx.series.dataLabels) === null || _ctx$series$dataLabel2 === void 0 ? void 0 : _ctx$series$dataLabel2.align;
+  if (align === 'left') {
+    return cell.x + padding;
+  }
+  if (align === 'right') {
+    return cell.x + cell.width - padding;
+  }
+  return cell.px;
+};
+export const heatmap = {
+  type: 'heatmap',
+  scales: {
+    x: 'linear',
+    y: 'band'
+  },
+  // Cells have no baseline to fall into; they fade with their colour.
+  exit: 'fade',
+  // A cell is one unit wide and centred on its x, so the axis has to hold half a
+  // column of slack on each side or the first and last cells hang out of the plot.
+  extendDomain: (_series, acc) => {
+    if (!Number.isFinite(acc.x.min) || !Number.isFinite(acc.x.max)) {
+      return acc;
+    }
+    return {
+      ...acc,
+      x: {
+        min: acc.x.min - 0.5,
+        max: acc.x.max + 0.5
+      }
+    };
+  },
+  render: ctx => {
+    var _ctx$hovered;
+    const cells = toCells(ctx);
+    if (!cells.length) {
+      return null;
+    }
+    const hoveredIndex = (_ctx$hovered = ctx.hovered) === null || _ctx$hovered === void 0 ? void 0 : _ctx$hovered.pointIndex;
+    const borderWidth = ctx.series.borderWidth ?? 0;
+    const radius = ctx.series.borderRadius;
+    return _jsxs("g", {
+      children: [cells.map(cell => _jsx("rect", {
+        x: cell.x,
+        y: cell.y,
+        width: cell.width,
+        height: cell.height,
+        rx: radius,
+        ry: radius,
+        fill: fillOf(ctx, cell, cell.point.index === hoveredIndex),
+        stroke: borderWidth ? ctx.series.borderColor : undefined,
+        strokeWidth: borderWidth || undefined
+      }, `h-${cell.point.index}`)), _jsx(DataLabels, {
+        ctx: ctx,
+        projected: cells,
+        positionOf: projected => {
+          const cell = projected;
+          return {
+            x: labelX(ctx, cell),
+            y: cell.py + TEXT_BASELINE_SHIFT
+          };
+        }
+      })]
+    });
+  },
+  hitTest: (ctx, pointer) => {
+    const hit = toCells(ctx).find(cell => pointer.x >= cell.x && pointer.x <= cell.x + cell.width && pointer.y >= cell.y && pointer.y <= cell.y + cell.height);
+    if (!hit) {
+      return null;
+    }
+    return [{
+      seriesIndex: ctx.seriesIndex,
+      pointIndex: hit.point.index,
+      x: pointKey(hit.point),
+      y: hit.point.y,
+      value: hit.point.value,
+      anchor: {
+        x: hit.px,
+        y: hit.y
+      },
+      distance: 0
+    }];
+  },
+  // A heatmap is read through its colour axis, not through a series swatch.
+  legendItems: () => []
+};

package/series/heatmap/index.d.ts

@@ -0,0 +1 @@
+export { heatmap } from './heatmap';

package/series/heatmap/index.js

@@ -0,0 +1 @@
+export { heatmap } from './heatmap';

package/series/line/index.d.ts

@@ -0,0 +1 @@
+export { line } from './line';

package/series/line/index.js

@@ -0,0 +1 @@
+export { line } from './line';

package/series/line/line.d.ts

@@ -0,0 +1,2 @@
+import { type SeriesRenderer } from '../../core/types/renderer';
+export declare const line: SeriesRenderer;

package/series/line/line.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { drawable, projectSeries, toLinePath } from '../../core/geometry/path';
+import { nearestByX } from '../shared/hit';
+import { seriesLegend } from '../shared/legend';
+import { Markers } from '../shared/Markers';
+export const line = {
+  type: 'line',
+  scales: {
+    x: 'linear',
+    y: 'linear'
+  },
+  extendDomain: (_series, acc) => acc,
+  render: ctx => {
+    var _ctx$hovered, _ctx$series$marker;
+    const slots = projectSeries(ctx);
+    const projected = drawable(slots);
+    if (!projected.length) {
+      return null;
+    }
+    const color = ctx.color;
+    const hoveredIndex = (_ctx$hovered = ctx.hovered) === null || _ctx$hovered === void 0 ? void 0 : _ctx$hovered.pointIndex;
+    const hovered = hoveredIndex === undefined ? undefined : projected.find(({
+      point
+    }) => point.index === hoveredIndex);
+    return _jsxs("g", {
+      children: [_jsx("path", {
+        d: toLinePath(slots),
+        fill: "none",
+        stroke: color,
+        strokeWidth: ctx.series.lineWidth ?? 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }), _jsx(Markers, {
+        marker: ctx.series.marker,
+        projected: projected,
+        color: color
+      }), hovered ? _jsx("circle", {
+        cx: hovered.px,
+        cy: hovered.py,
+        r: ((_ctx$series$marker = ctx.series.marker) === null || _ctx$series$marker === void 0 || (_ctx$series$marker = _ctx$series$marker.states) === null || _ctx$series$marker === void 0 || (_ctx$series$marker = _ctx$series$marker.hover) === null || _ctx$series$marker === void 0 ? void 0 : _ctx$series$marker.radius) ?? 4,
+        fill: color,
+        stroke: "#FFFFFF",
+        strokeWidth: 2
+      }) : null]
+    });
+  },
+  hitTest: (ctx, pointer) => nearestByX(ctx, pointer),
+  legendItems: (series, seriesIndex) => seriesLegend(series, seriesIndex, 'line')
+};

package/series/pie/index.d.ts

@@ -0,0 +1 @@
+export { pie } from './pie';

package/series/pie/index.js

@@ -0,0 +1 @@
+export { pie } from './pie';

package/series/pie/pie.d.ts

@@ -0,0 +1,2 @@
+import { type SeriesRenderer } from '../../core/types/renderer';
+export declare const pie: SeriesRenderer;