@pushwoosh/kit-charts 0.0.1

package/series/pie/pie.js

@@ -0,0 +1,224 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTweenedNumbers } from '../../core/animation/useTweenedNumbers';
+import { normalizePoints } from '../../core/data/points';
+import { applyValueFormat } from '../../core/format/time';
+import { DEFAULT_SURFACE_COLOR } from '../../core/model/palette';
+import { brighten } from '../shared/color';
+const RADIUS_FRACTION = 0.85;
+const LABEL_OFFSET = 12;
+const HOVER_BRIGHTNESS = 0.12;
+const FULL_TURN = Math.PI * 2;
+const positive = point => {
+  const raw = point.value ?? point.y;
+  return raw !== null && Number.isFinite(raw) && raw > 0 ? raw : 0;
+};
+function geometryOf(ctx, radiusScale = 1) {
+  const {
+    plot
+  } = ctx;
+  const outer = Math.min(plot.width, plot.height) / 2 * RADIUS_FRACTION * radiusScale;
+  const requested = ctx.series.innerSize;
+  const fraction = typeof requested === 'string' ? Number.parseFloat(requested) / 100 : requested ?? 0;
+  return {
+    cx: plot.x + plot.width / 2,
+    cy: plot.y + plot.height / 2,
+    outer,
+    inner: outer * Math.min(0.95, Math.max(0, Number.isFinite(fraction) ? fraction : 0))
+  };
+}
+function toSlices(ctx) {
+  const shown = point => !ctx.hiddenPoints.has(point.index);
+  const visibleTotal = ctx.points.reduce((sum, point) => sum + (shown(point) ? positive(point) : 0), 0);
+  // Nothing left on show: keep the angles the circle had and let the radius carry it
+  // away, so the last slice pulls into the centre rather than snapping shut.
+  const total = visibleTotal > 0 ? visibleTotal : ctx.points.reduce((sum, point) => sum + positive(point), 0);
+  if (total <= 0) {
+    return [];
+  }
+  const slices = [];
+  let cursor = -Math.PI / 2;
+  ctx.points.forEach((point, index) => {
+    const value = positive(point);
+    if (value <= 0) {
+      return;
+    }
+    // A switched-off slice takes no angle: it closes like a fan while the slices
+    // after it slide into the room it leaves, and the shape of the path is the same
+    // throughout, which is what lets the browser interpolate it.
+    const sweep = shown(point) || visibleTotal <= 0 ? value / total * FULL_TURN : 0;
+    slices.push({
+      point,
+      from: cursor,
+      to: cursor + sweep,
+      color: point.color ?? ctx.colors[index % ctx.colors.length] ?? ctx.color,
+      hidden: !shown(point)
+    });
+    cursor += sweep;
+  });
+  return slices;
+}
+const polar = (cx, cy, radius, angle) => ({
+  x: cx + radius * Math.cos(angle),
+  y: cy + radius * Math.sin(angle)
+});
+function slicePath(slice, geometry) {
+  const {
+    cx,
+    cy,
+    outer,
+    inner
+  } = geometry;
+  const sweep = slice.to - slice.from;
+  const large = sweep > Math.PI ? 1 : 0;
+  const outerStart = polar(cx, cy, outer, slice.from);
+  const outerEnd = polar(cx, cy, outer, slice.to);
+  if (sweep >= FULL_TURN - 1e-9) {
+    const half = polar(cx, cy, outer, slice.from + Math.PI);
+    const ring = `M${outerStart.x} ${outerStart.y}` + `A${outer} ${outer} 0 1 1 ${half.x} ${half.y}` + `A${outer} ${outer} 0 1 1 ${outerStart.x} ${outerStart.y}Z`;
+    if (inner <= 0) {
+      return ring;
+    }
+    const innerStart = polar(cx, cy, inner, slice.from);
+    const innerHalf = polar(cx, cy, inner, slice.from + Math.PI);
+    return `${ring}M${innerStart.x} ${innerStart.y}` + `A${inner} ${inner} 0 1 0 ${innerHalf.x} ${innerHalf.y}` + `A${inner} ${inner} 0 1 0 ${innerStart.x} ${innerStart.y}Z`;
+  }
+  if (inner <= 0) {
+    return `M${cx} ${cy}L${outerStart.x} ${outerStart.y}` + `A${outer} ${outer} 0 ${large} 1 ${outerEnd.x} ${outerEnd.y}Z`;
+  }
+  const innerEnd = polar(cx, cy, inner, slice.to);
+  const innerStart = polar(cx, cy, inner, slice.from);
+  return `M${outerStart.x} ${outerStart.y}` + `A${outer} ${outer} 0 ${large} 1 ${outerEnd.x} ${outerEnd.y}` + `L${innerEnd.x} ${innerEnd.y}` + `A${inner} ${inner} 0 ${large} 0 ${innerStart.x} ${innerStart.y}Z`;
+}
+function Labels({
+  ctx,
+  slices,
+  geometry
+}) {
+  const labels = ctx.series.dataLabels;
+  if (!(labels !== null && labels !== void 0 && labels.enabled)) {
+    return null;
+  }
+  return slices.filter(slice => !slice.hidden).map(slice => {
+    var _labels$style, _labels$style2, _labels$style3, _labels$style4;
+    const mid = (slice.from + slice.to) / 2;
+    const at = polar(geometry.cx, geometry.cy, geometry.outer + LABEL_OFFSET, mid);
+    const text = labels.formatter ? labels.formatter({
+      x: slice.point.x,
+      y: slice.point.y,
+      value: slice.point.value,
+      pointIndex: slice.point.index,
+      seriesIndex: ctx.seriesIndex,
+      seriesName: ctx.series.name ?? '',
+      meta: ctx.series.meta
+    }) : applyValueFormat(labels.format ?? '{value}', slice.point.y ?? '');
+    return _jsx("text", {
+      x: at.x,
+      y: at.y,
+      textAnchor: Math.cos(mid) < 0 ? 'end' : 'start',
+      dominantBaseline: "middle",
+      fill: labels.color ?? ((_labels$style = labels.style) === null || _labels$style === void 0 ? void 0 : _labels$style.color),
+      fontFamily: (_labels$style2 = labels.style) === null || _labels$style2 === void 0 ? void 0 : _labels$style2.fontFamily,
+      fontSize: ((_labels$style3 = labels.style) === null || _labels$style3 === void 0 ? void 0 : _labels$style3.fontSize) ?? '11px',
+      fontWeight: (_labels$style4 = labels.style) === null || _labels$style4 === void 0 ? void 0 : _labels$style4.fontWeight,
+      children: text
+    }, `label-${slice.point.index}`);
+  });
+}
+/**
+ * The circle is drawn from tweened numbers: two angles per slice plus the radius of
+ * the whole pie. A slice that is switched off loses its angle and closes like a fan;
+ * a series that is switched off loses its radius and pulls into the centre. Because
+ * every frame regenerates the arc from those numbers, the shape is always a true
+ * arc — interpolating the path itself would bend it.
+ */
+function Slices({
+  ctx
+}) {
+  var _ctx$hovered;
+  const slices = toSlices(ctx);
+  const alive = ctx.points.some(point => !ctx.hiddenPoints.has(point.index));
+  const targets = [...slices.flatMap(slice => [slice.from, slice.to]), ctx.hidden || !alive ? 0 : 1];
+  const tweened = useTweenedNumbers(targets);
+  if (!slices.length) {
+    return null;
+  }
+  const radiusScale = tweened[tweened.length - 1] ?? 1;
+  const geometry = geometryOf(ctx, radiusScale);
+  const hovered = (_ctx$hovered = ctx.hovered) === null || _ctx$hovered === void 0 ? void 0 : _ctx$hovered.pointIndex;
+  const drawn = slices.map((slice, index) => ({
+    ...slice,
+    from: tweened[index * 2] ?? slice.from,
+    to: tweened[index * 2 + 1] ?? slice.to
+  }));
+  return _jsxs("g", {
+    children: [drawn.map(slice => _jsx("path", {
+      d: slicePath(slice, geometry),
+      opacity: slice.hidden ? 0 : 1,
+      fill: slice.point.index === hovered ? brighten(slice.color, HOVER_BRIGHTNESS) : slice.color,
+      stroke: ctx.series.borderColor ?? DEFAULT_SURFACE_COLOR,
+      strokeWidth: ctx.series.borderWidth ?? 1
+    }, `slice-${slice.point.index}`)), _jsx(Labels, {
+      ctx: ctx,
+      slices: drawn,
+      geometry: geometry
+    })]
+  });
+}
+export const pie = {
+  type: 'pie',
+  scales: {
+    x: 'none',
+    y: 'none'
+  },
+  // The renderer tweens its own geometry; CSS must not transition it as well.
+  exit: 'collapse',
+  animatesGeometry: true,
+  extendDomain: (_series, acc) => acc,
+  render: ctx => _jsx(Slices, {
+    ctx: ctx
+  }),
+  hitTest: (ctx, pointer) => {
+    const slices = toSlices(ctx).filter(slice => !slice.hidden);
+    if (!slices.length) {
+      return null;
+    }
+    const geometry = geometryOf(ctx);
+    const dx = pointer.x - geometry.cx;
+    const dy = pointer.y - geometry.cy;
+    const radius = Math.sqrt(dx * dx + dy * dy);
+    if (radius > geometry.outer || radius < geometry.inner) {
+      return null;
+    }
+    const raw = Math.atan2(dy, dx);
+    const angle = raw < -Math.PI / 2 ? raw + FULL_TURN : raw;
+    const hit = slices.find(slice => angle >= slice.from && angle < slice.to);
+    if (!hit) {
+      return null;
+    }
+    const mid = (hit.from + hit.to) / 2;
+    return [{
+      seriesIndex: ctx.seriesIndex,
+      pointIndex: hit.point.index,
+      x: hit.point.name ?? hit.point.x,
+      y: hit.point.y,
+      value: hit.point.value,
+      anchor: polar(geometry.cx, geometry.cy, (geometry.outer + geometry.inner) / 2, mid),
+      distance: 0
+    }];
+  },
+  legendItems: (series, seriesIndex, colors) => {
+    if (series.showInLegend === false) {
+      return [];
+    }
+    // One item per slice: a pie's legend keys the points, so each item toggles its
+    // own slice and the remaining ones share the circle out again.
+    return normalizePoints(series.data, series.name).map((point, index) => ({
+      seriesIndex,
+      pointIndex: point.index,
+      label: point.name ?? String(point.y ?? index + 1),
+      color: point.color ?? colors[index % colors.length] ?? '',
+      symbol: 'circle',
+      visible: true
+    }));
+  }
+};

package/series/shared/DataLabels.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import { type Projected } from '../../core/geometry/path';
+import { type DataLabelsOptions } from '../../core/types/options';
+import { type RenderContext } from '../../core/types/renderer';
+export declare const labelAnchor: (align: DataLabelsOptions["align"]) => "start" | "middle" | "end";
+export interface DataLabelsProps {
+    ctx: RenderContext;
+    projected: readonly Projected[];
+    positionOf: (projected: Projected) => {
+        x: number;
+        y: number;
+    };
+}
+export declare function DataLabels({ ctx, projected, positionOf }: DataLabelsProps): ReactNode;

package/series/shared/DataLabels.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { applyValueFormat } from '../../core/format/time';
+import { measureText, textHeight } from '../../core/layout/measure-text';
+import { CHART_EDGE_GAP } from '../../core/layout/metrics';
+import { DEFAULT_TEXT_COLOR } from '../../core/model/palette';
+export const labelAnchor = align => {
+  if (align === 'left') {
+    return 'start';
+  }
+  if (align === 'right') {
+    return 'end';
+  }
+  return 'middle';
+};
+const textProps = style => ({
+  fontFamily: style === null || style === void 0 ? void 0 : style.fontFamily,
+  fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
+  fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
+  fontStyle: style === null || style === void 0 ? void 0 : style.fontStyle,
+  paintOrder: (style === null || style === void 0 ? void 0 : style.textOutline) === 'none' ? undefined : 'stroke'
+});
+/** No formatter and no format string: the chart's own number rule prints it. */
+const defaultLabel = (ctx, format, y) => {
+  if (format) {
+    return applyValueFormat(format, y ?? '');
+  }
+  return y === null ? '' : ctx.numberFormat(y);
+};
+const boxOf = (lines, at, anchor, styles) => {
+  const width = lines.reduce((widest, text, index) => Math.max(widest, measureText(text, styles[Math.min(index, 1)])), 0);
+  const height = lines.reduce((total, _text, index) => total + textHeight(styles[Math.min(index, 1)]), 0);
+  const left = anchor === 'start' ? at.x : at.x - (anchor === 'middle' ? width / 2 : width);
+  return {
+    left,
+    right: left + width,
+    top: at.y - textHeight(styles[0]),
+    bottom: at.y - textHeight(styles[0]) + height
+  };
+};
+const overlaps = (a, b) => a.left < b.right && b.left < a.right && a.top < b.bottom && b.top < a.bottom;
+export function DataLabels({
+  ctx,
+  projected,
+  positionOf
+}) {
+  const options = ctx.series.dataLabels;
+  if (!(options !== null && options !== void 0 && options.enabled)) {
+    return null;
+  }
+  const turbo = ctx.series.turboThreshold;
+  if (turbo !== undefined && ctx.points.length > turbo) {
+    return null;
+  }
+  const style = options.style;
+  const secondary = options.secondaryStyle;
+  const styles = [style, secondary ?? style];
+  const anchor = labelAnchor(options.align);
+  // A newline splits the label into stacked lines: a value with its share under
+  // it is one label, not two, so it moves and hides as one.
+  const linesOf = content => {
+    if (typeof content !== 'string' && typeof content !== 'number') {
+      return null;
+    }
+    return String(content).split('\n');
+  };
+  // Highcharts hides a label rather than let it collide. Only text can be
+  // measured, so a formatter returning an element is always drawn.
+  const placed = [];
+  const collides = (lines, at) => {
+    if (options.allowOverlap === true || !lines) {
+      return false;
+    }
+    const box = boxOf(lines, at, anchor, styles);
+    if (placed.some(other => overlaps(box, other))) {
+      return true;
+    }
+    placed.push(box);
+    return false;
+  };
+  return projected.map(item => {
+    const {
+      point
+    } = item;
+    const content = options.formatter ? options.formatter({
+      x: point.x,
+      y: point.y,
+      value: point.value,
+      pointIndex: point.index,
+      seriesIndex: ctx.seriesIndex,
+      seriesName: ctx.series.name ?? `Series ${ctx.seriesIndex + 1}`,
+      meta: ctx.series.meta
+    }) : defaultLabel(ctx, options.format, point.y);
+    if (content === null || content === undefined || content === '') {
+      return null;
+    }
+    const lines = linesOf(content);
+    const at = positionOf(item);
+    // A label may sit above the plot area — that is what the headroom is for — but
+    // never against the chart edge, where it reads as glued to the border. Extra
+    // lines grow downwards, so only the first one has to clear the edge.
+    const stack = lines ? lines.length - 1 : 0;
+    const y = Math.max(at.y - stack * textHeight(secondary ?? style), textHeight(style) + CHART_EDGE_GAP);
+    if (collides(lines, {
+      x: at.x,
+      y
+    })) {
+      return null;
+    }
+    return _jsx("text", {
+      x: at.x,
+      y: y,
+      textAnchor: anchor,
+      fill: options.color ?? (style === null || style === void 0 ? void 0 : style.color) ?? DEFAULT_TEXT_COLOR,
+      ...textProps(style),
+      children: lines && lines.length > 1 ? lines.map((text, index) => _jsx("tspan", {
+        x: at.x,
+        dy: index === 0 ? 0 : textHeight(secondary ?? style),
+        fill: index === 0 ? undefined : secondary === null || secondary === void 0 ? void 0 : secondary.color,
+        ...(index === 0 ? {} : textProps(secondary)),
+        children: text
+      }, `line-${index}`)) : content
+    }, `dl-${point.index}`);
+  });
+}

package/series/shared/Markers.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import { type Projected } from '../../core/geometry/path';
+import { type MarkerOptions } from '../../core/types/options';
+export interface MarkersProps {
+    marker: MarkerOptions | undefined;
+    projected: readonly Projected[];
+    color: string;
+}
+export declare function Markers({ marker, projected, color }: MarkersProps): ReactNode;

package/series/shared/Markers.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const markerRadius = marker => (marker === null || marker === void 0 ? void 0 : marker.radius) ?? (marker !== null && marker !== void 0 && marker.width ? marker.width / 2 : 3);
+export function Markers({
+  marker,
+  projected,
+  color
+}) {
+  if ((marker === null || marker === void 0 ? void 0 : marker.enabled) === false || (marker === null || marker === void 0 ? void 0 : marker.symbol) === 'none') {
+    return null;
+  }
+  const radius = markerRadius(marker);
+  const fill = (marker === null || marker === void 0 ? void 0 : marker.fillColor) ?? color;
+  const square = (marker === null || marker === void 0 ? void 0 : marker.symbol) === 'square';
+  return projected.map(({
+    point,
+    px,
+    py
+  }) => square ? _jsx("rect", {
+    x: px - radius,
+    y: py - radius,
+    width: radius * 2,
+    height: radius * 2,
+    fill: fill,
+    stroke: marker === null || marker === void 0 ? void 0 : marker.lineColor,
+    strokeWidth: marker === null || marker === void 0 ? void 0 : marker.lineWidth
+  }, `m-${point.index}`) : _jsx("circle", {
+    cx: px,
+    cy: py,
+    r: radius,
+    fill: fill,
+    stroke: marker === null || marker === void 0 ? void 0 : marker.lineColor,
+    strokeWidth: marker === null || marker === void 0 ? void 0 : marker.lineWidth
+  }, `m-${point.index}`));
+}

package/series/shared/color.d.ts

@@ -0,0 +1 @@
+export declare function brighten(color: string, amount: number): string;

package/series/shared/color.js

@@ -0,0 +1,19 @@
+const clamp = value => Math.min(255, Math.max(0, Math.round(value)));
+const parseHex = color => {
+  const match = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim());
+  if (!match) {
+    return null;
+  }
+  const hex = match[1].length === 3 ? match[1].split('').map(char => char + char).join('') : match[1];
+  return [parseInt(hex.slice(0, 2), 16), parseInt(hex.slice(2, 4), 16), parseInt(hex.slice(4, 6), 16)];
+};
+export function brighten(color, amount) {
+  const rgb = parseHex(color);
+  if (!rgb || !amount) {
+    return color;
+  }
+  const target = amount > 0 ? 255 : 0;
+  const ratio = Math.abs(amount);
+  const [r, g, b] = rgb.map(channel => clamp(channel + (target - channel) * ratio));
+  return `#${[r, g, b].map(channel => channel.toString(16).padStart(2, '0')).join('')}`;
+}

package/series/shared/domain.d.ts

@@ -0,0 +1,3 @@
+import { type SeriesOptionsBase } from '../../core/types/options';
+import { type DomainAcc } from '../../core/types/renderer';
+export declare function includeZero(series: SeriesOptionsBase, acc: DomainAcc): DomainAcc;

package/series/shared/domain.js

@@ -0,0 +1,14 @@
+export function includeZero(series, acc) {
+  const index = Math.min(series.yAxis ?? 0, acc.y.length - 1);
+  const target = acc.y[index];
+  if (!target) {
+    return acc;
+  }
+  return {
+    ...acc,
+    y: acc.y.map((range, current) => current === index ? {
+      min: Math.min(range.min, 0),
+      max: Math.max(range.max, 0)
+    } : range)
+  };
+}

package/series/shared/hit.d.ts

@@ -0,0 +1,3 @@
+import { type Point } from '../../core/types/geometry';
+import { type PointHit, type RenderContext } from '../../core/types/renderer';
+export declare function nearestByX(ctx: RenderContext, pointer: Point, radius?: number): PointHit[] | null;

package/series/shared/hit.js

@@ -0,0 +1,33 @@
+import { pointKey } from '../../core/data/points';
+import { drawable, projectSeries } from '../../core/geometry/path';
+const HIT_RADIUS = 40;
+export function nearestByX(ctx, pointer, radius = HIT_RADIUS) {
+  const projected = drawable(projectSeries(ctx));
+  if (!projected.length) {
+    return null;
+  }
+  let best;
+  let bestDistance = Infinity;
+  projected.forEach(candidate => {
+    const distance = Math.abs(candidate.px - pointer.x);
+    if (distance < bestDistance) {
+      best = candidate;
+      bestDistance = distance;
+    }
+  });
+  if (!best || bestDistance > radius) {
+    return null;
+  }
+  return [{
+    seriesIndex: ctx.seriesIndex,
+    pointIndex: best.point.index,
+    x: pointKey(best.point),
+    y: best.point.y,
+    value: best.point.value,
+    anchor: {
+      x: best.px,
+      y: best.py
+    },
+    distance: bestDistance
+  }];
+}

package/series/shared/legend.d.ts

@@ -0,0 +1,3 @@
+import { type SeriesOptionsBase } from '../../core/types/options';
+import { type LegendItem } from '../../core/types/renderer';
+export declare function seriesLegend(series: SeriesOptionsBase, seriesIndex: number, symbol: LegendItem['symbol']): LegendItem[];

package/series/shared/legend.js

@@ -0,0 +1,12 @@
+export function seriesLegend(series, seriesIndex, symbol) {
+  if (series.showInLegend === false) {
+    return [];
+  }
+  return [{
+    seriesIndex,
+    label: series.name ?? `Series ${seriesIndex + 1}`,
+    color: series.color ?? '',
+    symbol: series.legendSymbol ?? symbol,
+    visible: series.visible !== false
+  }];
+}