@pushwoosh/kit-charts 0.0.1

package/core/scale/band.d.ts

@@ -0,0 +1,10 @@
+import { type BandScale } from '../types/scale';
+export interface BandScaleOptions {
+    domain: readonly string[];
+    range: readonly [number, number];
+    paddingInner?: number;
+    paddingOuter?: number;
+    /** Assign slots from the far end of the range, keeping the domain order intact. */
+    reversed?: boolean;
+}
+export declare function createBandScale(options: BandScaleOptions): BandScale;

package/core/scale/band.js

@@ -0,0 +1,33 @@
+export function createBandScale(options) {
+  const {
+    domain,
+    range,
+    paddingInner = 0.2,
+    paddingOuter = 0.1,
+    reversed = false
+  } = options;
+  const [r0, r1] = range;
+  const count = domain.length;
+  const width = r1 - r0;
+  const step = count > 0 ? width / Math.max(1e-6, count - paddingInner + 2 * paddingOuter) : width;
+  const bandwidth = step * (1 - paddingInner);
+  const start = r0 + step * paddingOuter;
+  const index = new Map(domain.map((value, i) => [value, i]));
+  const slotOf = i => reversed ? count - 1 - i : i;
+  return {
+    kind: 'band',
+    map: value => {
+      const i = index.get(value);
+      return i === undefined ? NaN : start + slotOf(i) * step;
+    },
+    invert: px => {
+      const slot = Math.floor((px - start) / step);
+      return slot >= 0 && slot < count ? domain[slotOf(slot)] : undefined;
+    },
+    ticks: () => [...domain],
+    domain: () => domain,
+    range: () => [r0, r1],
+    bandwidth: () => bandwidth,
+    step: () => step
+  };
+}

package/core/scale/color.d.ts

@@ -0,0 +1,9 @@
+import { type ColorScale, type ColorStop } from '../types/scale';
+export interface ColorScaleOptions {
+    domain: readonly [number, number];
+    stops: readonly ColorStop[];
+}
+type Rgba = [number, number, number, number];
+export declare const parseColor: (color: string) => Rgba | null;
+export declare function createColorScale(options: ColorScaleOptions): ColorScale;
+export {};

package/core/scale/color.js

@@ -0,0 +1,69 @@
+const clampChannel = value => Math.min(255, Math.max(0, Math.round(value)));
+const parseHex = color => {
+  const match = /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(color);
+  if (!match) {
+    return null;
+  }
+  const raw = match[1];
+  const short = raw.length === 3 || raw.length === 4;
+  const hex = short ? raw.split('').map(char => char + char).join('') : raw;
+  const channel = at => parseInt(hex.slice(at, at + 2), 16);
+  return [channel(0), channel(2), channel(4), hex.length === 8 ? channel(6) / 255 : 1];
+};
+const parseFunctional = color => {
+  const match = /^rgba?\(([^)]+)\)$/i.exec(color);
+  if (!match) {
+    return null;
+  }
+  const parts = match[1].split(/[,/\s]+/).filter(Boolean).map(Number);
+  if (parts.length < 3 || parts.some(part => !Number.isFinite(part))) {
+    return null;
+  }
+  return [parts[0], parts[1], parts[2], parts[3] === undefined ? 1 : parts[3]];
+};
+export const parseColor = color => parseHex(color.trim()) ?? parseFunctional(color.trim());
+const toCss = ([r, g, b, a]) => a >= 1 ? `#${[r, g, b].map(channel => clampChannel(channel).toString(16).padStart(2, '0')).join('')}` : `rgba(${clampChannel(r)}, ${clampChannel(g)}, ${clampChannel(b)}, ${Number(a.toFixed(3))})`;
+const mix = (from, to, t) => [from[0] + (to[0] - from[0]) * t, from[1] + (to[1] - from[1]) * t, from[2] + (to[2] - from[2]) * t, from[3] + (to[3] - from[3]) * t];
+// A stop whose colour cannot be parsed still holds its position: it is returned
+// verbatim on an exact hit and skipped when interpolating a neighbour.
+const resolveStops = stops => stops.map(([at, color]) => ({
+  at,
+  color,
+  rgba: parseColor(color) ?? [0, 0, 0, 0]
+})).sort((left, right) => left.at - right.at);
+export function createColorScale(options) {
+  const stops = resolveStops(options.stops);
+  const [min, max] = options.domain;
+  const span = max - min;
+  const positionOf = value => {
+    if (!Number.isFinite(value) || !Number.isFinite(span) || span === 0) {
+      return 0;
+    }
+    return Math.min(1, Math.max(0, (value - min) / span));
+  };
+  return {
+    kind: 'color',
+    map: value => {
+      if (!stops.length) {
+        return 'transparent';
+      }
+      const at = positionOf(value);
+      const upperIndex = stops.findIndex(stop => stop.at >= at);
+      if (upperIndex === -1) {
+        return stops[stops.length - 1].color;
+      }
+      const upper = stops[upperIndex];
+      const lower = stops[upperIndex - 1];
+      if (!lower || upper.at === at) {
+        return upper.color;
+      }
+      const local = (at - lower.at) / (upper.at - lower.at);
+      return toCss(mix(lower.rgba, upper.rgba, local));
+    },
+    domain: () => [min, max],
+    stops: () => stops.map(({
+      at,
+      color
+    }) => [at, color])
+  };
+}

package/core/scale/linear.d.ts

@@ -0,0 +1,17 @@
+import { type ContinuousScale } from '../types/scale';
+/** Which ends of the domain may be rounded outwards to a whole tick step. */
+export interface NiceEnds {
+    min?: boolean;
+    max?: boolean;
+}
+export interface LinearScaleOptions {
+    domain: readonly [number, number];
+    range: readonly [number, number];
+    nice?: boolean | NiceEnds;
+    tickHint?: number;
+    /** False keeps every tick a whole number, as a count axis needs. */
+    allowDecimals?: boolean;
+}
+export declare function niceStep(rough: number, allowDecimals?: boolean): number;
+export declare function linearTicks(min: number, max: number, count: number, allowDecimals?: boolean): number[];
+export declare function createLinearScale(options: LinearScaleOptions): ContinuousScale;

package/core/scale/linear.js

@@ -0,0 +1,64 @@
+const STEPS = [1, 2, 2.5, 5, 10];
+export function niceStep(rough, allowDecimals = true) {
+  if (!(rough > 0)) {
+    return 1;
+  }
+  const magnitude = 10 ** Math.floor(Math.log10(rough));
+  const normalized = rough / magnitude;
+  // A whole-number axis keeps only the candidates that stay whole at this
+  // magnitude — below magnitude 1 that leaves 10, which lands the step on 1.
+  const steps = allowDecimals ? STEPS : STEPS.filter(candidate => Number.isInteger(candidate * magnitude));
+  const step = (steps.find(candidate => normalized <= candidate) ?? 10) * magnitude;
+  return allowDecimals ? step : Math.max(1, step);
+}
+export function linearTicks(min, max, count, allowDecimals = true) {
+  if (!Number.isFinite(min) || !Number.isFinite(max) || count < 1) {
+    return [];
+  }
+  if (min === max) {
+    return [min];
+  }
+  const step = niceStep((max - min) / count, allowDecimals);
+  const first = Math.ceil(min / step) * step;
+  const ticks = [];
+  for (let i = 0; first + i * step <= max + step * 1e-9; i += 1) {
+    ticks.push(Number((first + i * step).toPrecision(12)));
+  }
+  return ticks;
+}
+export function createLinearScale(options) {
+  const {
+    range,
+    nice = false,
+    tickHint = 5,
+    allowDecimals = true
+  } = options;
+  let [min, max] = options.domain;
+  if (!Number.isFinite(min) || !Number.isFinite(max)) {
+    [min, max] = [0, 1];
+  } else if (min === max) {
+    const pad = Math.abs(min) || 1;
+    [min, max] = [min - pad, max + pad];
+  }
+  const niceMin = nice === true || typeof nice === 'object' && nice.min === true;
+  const niceMax = nice === true || typeof nice === 'object' && nice.max === true;
+  if (niceMin || niceMax) {
+    const step = niceStep((max - min) / tickHint, allowDecimals);
+    if (niceMin) {
+      min = Math.floor(min / step) * step;
+    }
+    if (niceMax) {
+      max = Math.ceil(max / step) * step;
+    }
+  }
+  const [r0, r1] = range;
+  const scale = (r1 - r0) / (max - min);
+  return {
+    kind: 'linear',
+    map: value => r0 + (value - min) * scale,
+    invert: px => min + (px - r0) / scale,
+    ticks: (hint = tickHint) => linearTicks(min, max, hint, allowDecimals),
+    domain: () => [min, max],
+    range: () => [r0, r1]
+  };
+}

package/core/scale/time.d.ts

@@ -0,0 +1,19 @@
+import { type ContinuousScale, type TimeUnit } from '../types/scale';
+export declare const SECOND = 1000;
+export declare const MINUTE: number;
+export declare const HOUR: number;
+export declare const DAY: number;
+export declare const WEEK: number;
+export interface TimeTicksOptions {
+    count?: number;
+    unit?: TimeUnit;
+}
+export declare function timeTicks(min: number, max: number, options?: TimeTicksOptions): number[];
+export declare function defaultTimeFormat(min: number, max: number): string;
+export interface TimeScaleOptions {
+    domain: readonly [number, number];
+    range: readonly [number, number];
+    tickHint?: number;
+    tickUnit?: TimeUnit;
+}
+export declare function createTimeScale(options: TimeScaleOptions): ContinuousScale;

package/core/scale/time.js

@@ -0,0 +1,187 @@
+export const SECOND = 1000;
+export const MINUTE = 60 * SECOND;
+export const HOUR = 60 * MINUTE;
+export const DAY = 24 * HOUR;
+export const WEEK = 7 * DAY;
+const LADDER = [{
+  unit: 'second',
+  step: 1,
+  approx: SECOND
+}, {
+  unit: 'second',
+  step: 5,
+  approx: 5 * SECOND
+}, {
+  unit: 'second',
+  step: 15,
+  approx: 15 * SECOND
+}, {
+  unit: 'second',
+  step: 30,
+  approx: 30 * SECOND
+}, {
+  unit: 'minute',
+  step: 1,
+  approx: MINUTE
+}, {
+  unit: 'minute',
+  step: 5,
+  approx: 5 * MINUTE
+}, {
+  unit: 'minute',
+  step: 15,
+  approx: 15 * MINUTE
+}, {
+  unit: 'minute',
+  step: 30,
+  approx: 30 * MINUTE
+}, {
+  unit: 'hour',
+  step: 1,
+  approx: HOUR
+}, {
+  unit: 'hour',
+  step: 3,
+  approx: 3 * HOUR
+}, {
+  unit: 'hour',
+  step: 6,
+  approx: 6 * HOUR
+}, {
+  unit: 'hour',
+  step: 12,
+  approx: 12 * HOUR
+}, {
+  unit: 'day',
+  step: 1,
+  approx: DAY
+}, {
+  unit: 'day',
+  step: 2,
+  approx: 2 * DAY
+}, {
+  unit: 'week',
+  step: 1,
+  approx: WEEK
+}, {
+  unit: 'month',
+  step: 1,
+  approx: 30 * DAY,
+  calendar: true
+}, {
+  unit: 'month',
+  step: 3,
+  approx: 91 * DAY,
+  calendar: true
+}, {
+  unit: 'month',
+  step: 6,
+  approx: 182 * DAY,
+  calendar: true
+}, {
+  unit: 'year',
+  step: 1,
+  approx: 365 * DAY,
+  calendar: true
+}];
+const pickRung = (span, count) => {
+  const target = span / Math.max(1, count);
+  return LADDER.find(rung => rung.approx >= target) ?? LADDER[LADDER.length - 1];
+};
+const alignUp = (from, rung) => {
+  const date = new Date(from);
+  if (rung.unit === 'year') {
+    const year = date.getUTCFullYear();
+    const aligned = Date.UTC(Math.ceil(year / rung.step) * rung.step, 0, 1);
+    return aligned;
+  }
+  if (rung.unit === 'month') {
+    const month = date.getUTCMonth();
+    const stepped = Math.ceil(month / rung.step) * rung.step;
+    return Date.UTC(date.getUTCFullYear(), stepped, 1);
+  }
+  if (rung.unit === 'week') {
+    const midnight = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
+    const shift = (8 - (new Date(midnight).getUTCDay() || 7)) % 7;
+    return midnight + shift * DAY;
+  }
+  const size = rung.approx;
+  const midnight = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
+  const sinceMidnight = from - midnight;
+  return midnight + Math.ceil(sinceMidnight / size) * size;
+};
+const advance = (timestamp, rung) => {
+  if (!rung.calendar) {
+    return timestamp + rung.approx;
+  }
+  const date = new Date(timestamp);
+  const months = rung.unit === 'year' ? rung.step * 12 : rung.step;
+  return Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + months, date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
+};
+const rungFor = unit => LADDER.find(rung => rung.unit === unit && rung.step === 1) ?? LADDER[LADDER.length - 1];
+export function timeTicks(min, max, options = {}) {
+  const {
+    count = 6,
+    unit
+  } = options;
+  if (!Number.isFinite(min) || !Number.isFinite(max) || max < min) {
+    return [];
+  }
+  if (min === max) {
+    return [min];
+  }
+  const rung = unit ? rungFor(unit) : pickRung(max - min, count);
+  const ticks = [];
+  // Calendar alignment lands on the start of the current unit, which can sit
+  // before the domain — a tick there would be drawn outside the plot.
+  let cursor = alignUp(min, rung);
+  if (cursor < min) {
+    cursor = advance(cursor, rung);
+  }
+  for (let i = 0; cursor <= max && i < 1000; i += 1) {
+    ticks.push(cursor);
+    cursor = advance(cursor, rung);
+  }
+  return ticks.length ? ticks : [min, max];
+}
+const sameUtcDay = (a, b) => {
+  const left = new Date(a);
+  const right = new Date(b);
+  return left.getUTCFullYear() === right.getUTCFullYear() && left.getUTCMonth() === right.getUTCMonth() && left.getUTCDate() === right.getUTCDate();
+};
+export function defaultTimeFormat(min, max) {
+  const span = max - min;
+  if (span <= 2 * DAY) {
+    return sameUtcDay(min, max) ? '%H:%M' : '%b %d, %H:%M';
+  }
+  if (span <= 200 * DAY) {
+    return '%b %d';
+  }
+  return '%b, %Y';
+}
+export function createTimeScale(options) {
+  const {
+    range,
+    tickHint = 6,
+    tickUnit
+  } = options;
+  let [min, max] = options.domain;
+  if (!Number.isFinite(min) || !Number.isFinite(max)) {
+    [min, max] = [0, DAY];
+  } else if (min === max) {
+    [min, max] = [min - HOUR, max + HOUR];
+  }
+  const [r0, r1] = range;
+  const scale = (r1 - r0) / (max - min);
+  return {
+    kind: 'time',
+    map: value => r0 + (value - min) * scale,
+    invert: px => min + (px - r0) / scale,
+    ticks: (hint = tickHint) => timeTicks(min, max, {
+      count: hint,
+      unit: tickUnit
+    }),
+    domain: () => [min, max],
+    range: () => [r0, r1]
+  };
+}

package/core/stack/stack.d.ts

@@ -0,0 +1,9 @@
+import { type NormalizedPoint } from '../data/points';
+import { type SeriesOptionsBase } from '../types/options';
+import { type StackedValue } from '../types/renderer';
+export interface StackInput {
+    index: number;
+    options: SeriesOptionsBase;
+    points: readonly NormalizedPoint[];
+}
+export declare function computeStacks(series: readonly StackInput[]): Map<number, Array<StackedValue | undefined>>;

package/core/stack/stack.js

@@ -0,0 +1,76 @@
+const groupKey = series => series.stacking ? `${series.yAxis ?? 0}:${series.stacking}` : null;
+const keyOf = point => String(point.x);
+const emptyRunning = () => ({
+  positive: 0,
+  negative: 0
+});
+export function computeStacks(series) {
+  const result = new Map();
+  const groups = new Map();
+  series.forEach(entry => {
+    const key = groupKey(entry.options);
+    if (key === null) {
+      return;
+    }
+    const existing = groups.get(key);
+    if (existing) {
+      existing.push(entry);
+    } else {
+      groups.set(key, [entry]);
+    }
+  });
+  groups.forEach((members, key) => {
+    const percent = key.endsWith(':percent');
+    const totals = new Map();
+    members.forEach(({
+      points
+    }) => {
+      points.forEach(point => {
+        if (point.y === null) {
+          return;
+        }
+        const running = totals.get(keyOf(point)) ?? {
+          signed: 0,
+          absolute: 0
+        };
+        running.signed += point.y;
+        running.absolute += Math.abs(point.y);
+        totals.set(keyOf(point), running);
+      });
+    });
+    const cursors = new Map();
+    members.forEach(({
+      index,
+      points
+    }) => {
+      const stacked = points.map(point => {
+        if (point.y === null) {
+          return undefined;
+        }
+        const pointKey = keyOf(point);
+        const cursor = cursors.get(pointKey) ?? emptyRunning();
+        const total = totals.get(pointKey) ?? {
+          signed: 0,
+          absolute: 0
+        };
+        const negative = point.y < 0;
+        const from = negative ? cursor.negative : cursor.positive;
+        const magnitude = percent && total.absolute !== 0 ? point.y / total.absolute * 100 : point.y;
+        const to = from + magnitude;
+        if (negative) {
+          cursor.negative = to;
+        } else {
+          cursor.positive = to;
+        }
+        cursors.set(pointKey, cursor);
+        return {
+          from,
+          to,
+          total: total.signed
+        };
+      });
+      result.set(index, stacked);
+    });
+  });
+  return result;
+}

package/core/types/formatter.d.ts

@@ -0,0 +1,59 @@
+import { type ReactNode } from 'react';
+import { type ScaleKind } from './scale';
+export interface AxisLabelContext {
+    value: number | string;
+    index: number;
+    isFirst: boolean;
+    isLast: boolean;
+    axis: {
+        kind: ScaleKind;
+        min: number | undefined;
+        max: number | undefined;
+    };
+}
+export type AxisLabelFormatter = (ctx: AxisLabelContext) => ReactNode;
+export interface LegendLabelContext<TSeriesMeta = unknown> {
+    seriesIndex: number;
+    name: string;
+    color: string;
+    visible: boolean;
+    meta: TSeriesMeta | undefined;
+}
+export type LegendLabelFormatter<TSeriesMeta = unknown> = (ctx: LegendLabelContext<TSeriesMeta>) => ReactNode;
+export interface DataLabelContext<TSeriesMeta = unknown> {
+    x: number | string;
+    y: number | null;
+    value: number | null;
+    pointIndex: number;
+    seriesIndex: number;
+    seriesName: string;
+    meta: TSeriesMeta | undefined;
+}
+export type DataLabelFormatter<TSeriesMeta = unknown> = (ctx: DataLabelContext<TSeriesMeta>) => ReactNode;
+export interface TooltipNeighbour {
+    x: number | string;
+    y: number | null;
+    index: number;
+}
+export interface TooltipPoint<TSeriesMeta = unknown> {
+    seriesIndex: number;
+    seriesName: string;
+    color: string;
+    x: number | string;
+    y: number | null;
+    value: number | null;
+    index: number;
+    meta: TSeriesMeta | undefined;
+    prev: TooltipNeighbour | undefined;
+    next: TooltipNeighbour | undefined;
+}
+export interface TooltipContext<TChartMeta = unknown, TSeriesMeta = unknown> {
+    x: number | string;
+    points: readonly TooltipPoint<TSeriesMeta>[];
+    chart: {
+        title: string | undefined;
+        meta: TChartMeta | undefined;
+    };
+}
+export type TooltipFormatter<TChartMeta = unknown, TSeriesMeta = unknown> = (ctx: TooltipContext<TChartMeta, TSeriesMeta>) => ReactNode;
+export type TooltipCellFormatter<TSeriesMeta = unknown> = (point: TooltipPoint<TSeriesMeta>) => ReactNode;

package/core/types/formatter.js

@@ -0,0 +1 @@
+export {};

package/core/types/geometry.d.ts

@@ -0,0 +1,16 @@
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Size {
+    width: number;
+    height: number;
+}
+export interface Rect extends Point, Size {
+}
+export type Spacing = [number, number, number, number];
+export interface SlotGeometry {
+    width: number;
+    offset: number;
+    step: number;
+}

package/core/types/geometry.js

@@ -0,0 +1 @@
+export {};