@pushwoosh/kit-charts 0.0.1

package/core/layout/title-layout.js

@@ -0,0 +1,99 @@
+import { DEFAULT_SUBTITLE_FONT_SIZE, DEFAULT_TITLE_FONT_SIZE, measureText, textHeight } from './measure-text';
+import { HINT_ICON_GAP, HINT_ICON_SIZE, TITLE_BLOCK_GAP } from './metrics';
+const ANCHOR = {
+  left: 'start',
+  center: 'middle',
+  right: 'end'
+};
+const shown = title => {
+  var _title$style;
+  return Boolean(title === null || title === void 0 ? void 0 : title.text) && (title === null || title === void 0 || (_title$style = title.style) === null || _title$style === void 0 ? void 0 : _title$style.display) !== 'none';
+};
+const sizeOf = (title, fallback) => {
+  var _title$style2;
+  return (title === null || title === void 0 || (_title$style2 = title.style) === null || _title$style2 === void 0 ? void 0 : _title$style2.fontSize) ?? fallback;
+};
+export function layoutTitles(options, size, spacing) {
+  const [spaceTop, spaceRight,, spaceLeft] = spacing;
+  const {
+    title,
+    subtitle
+  } = options;
+  const entries = [];
+  const push = (key, source, fontSize, top) => {
+    const height = textHeight({
+      ...(source === null || source === void 0 ? void 0 : source.style),
+      fontSize
+    });
+    if (!shown(source)) {
+      return 0;
+    }
+    const align = (source === null || source === void 0 ? void 0 : source.align) ?? 'left';
+    const x = (() => {
+      if (align === 'center') {
+        return size.width / 2;
+      }
+      if (align === 'right') {
+        return size.width - spaceRight;
+      }
+      return spaceLeft;
+    })();
+    const text = (source === null || source === void 0 ? void 0 : source.text) ?? '';
+    const baseline = top + height;
+    const width = measureText(text, {
+      ...(source === null || source === void 0 ? void 0 : source.style),
+      fontSize
+    });
+    // The icon follows the text, wherever the anchor put it.
+    const textEnd = (() => {
+      if (align === 'center') {
+        return x + width / 2;
+      }
+      if (align === 'right') {
+        return x;
+      }
+      return x + width;
+    })();
+    entries.push({
+      key,
+      text,
+      x,
+      // `y` is a baseline, so the first line starts one line height down.
+      y: baseline,
+      anchor: ANCHOR[align],
+      style: source === null || source === void 0 ? void 0 : source.style,
+      fontSize,
+      hint: source !== null && source !== void 0 && source.hint ? {
+        text: source.hint,
+        x: textEnd + HINT_ICON_GAP + HINT_ICON_SIZE / 2,
+        y: baseline - textHeight({
+          fontSize
+        }) / 3
+      } : undefined
+    });
+    return height;
+  };
+  const titleHeight = push('title', title, sizeOf(title, DEFAULT_TITLE_FONT_SIZE), spaceTop);
+  // The caption shares the title's row, pushed to the far edge: the note about
+  // what the figures cover belongs beside the name, not under it.
+  if (title !== null && title !== void 0 && title.caption) {
+    push('caption', {
+      text: title.caption,
+      align: 'right',
+      style: title.captionStyle
+    }, sizeOf({
+      style: title.captionStyle
+    }, DEFAULT_SUBTITLE_FONT_SIZE), spaceTop + titleHeight - textHeight({
+      ...title.captionStyle,
+      fontSize: sizeOf({
+        style: title.captionStyle
+      }, DEFAULT_SUBTITLE_FONT_SIZE)
+    }));
+  }
+  const subtitleHeight = push('subtitle', subtitle, sizeOf(subtitle, DEFAULT_SUBTITLE_FONT_SIZE), spaceTop + titleHeight);
+  const total = titleHeight + subtitleHeight;
+  return {
+    height: total > 0 ? total + TITLE_BLOCK_GAP : 0,
+    entries
+  };
+}

package/core/model/build-model.d.ts

@@ -0,0 +1,69 @@
+import { type NormalizedPoint } from '../data/points';
+import { type TitleEntry } from '../layout/title-layout';
+import { type Rect, type Size, type SlotGeometry, type Spacing } from '../types/geometry';
+import { type AxisOptions, type ChartOptions, type SeriesOptionsBase } from '../types/options';
+import { type AnySeriesRenderer, type LegendItem, type NumberFormatter, type StackedValue } from '../types/renderer';
+import { type AnyScale, type BandScale, type ColorScale, type ContinuousScale } from '../types/scale';
+export interface ResolvedSeries {
+    options: SeriesOptionsBase;
+    renderer: AnySeriesRenderer;
+    index: number;
+    color: string;
+    points: NormalizedPoint[];
+    /** Point indices switched off in the legend; kept so their shape can animate out. */
+    hiddenPoints: Set<number>;
+    /**
+     * Switched off in the legend, or `visible: false` in the options. Such a series
+     * keeps its legend entry and is still handed to its renderer — transparently —
+     * so that hiding and showing it can be animated instead of popping.
+     */
+    hidden: boolean;
+}
+export type TickAnchor = 'start' | 'middle' | 'end';
+export interface AxisTick {
+    value: number | string;
+    position: number;
+    label: string;
+    anchor: TickAnchor;
+    /** Sentence this tick explains itself with, opened from the label on hover. */
+    hint?: string;
+}
+export interface AxisModel {
+    id: string;
+    options: AxisOptions;
+    scale: AnyScale;
+    ticks: AxisTick[];
+}
+export interface ChartModel {
+    plot: Rect;
+    axisless: boolean;
+    xAxis: AxisModel;
+    yAxes: AxisModel[];
+    titles: TitleEntry[];
+    colorScale: ColorScale | undefined;
+    series: ResolvedSeries[];
+    legend: LegendItem[];
+    colors: readonly string[];
+    categories: string[];
+    stacks: Map<number, Array<StackedValue | undefined>>;
+    slots: Map<number, SlotGeometry>;
+    numberFormat: NumberFormatter;
+    /** Resolved `chart.spacing`; the legend needs the bottom of it to sit inside. */
+    spacing: Spacing;
+}
+/** Key for a switched-off series, or for one of its points. */
+export declare const hiddenKey: (seriesIndex: number, pointIndex?: number) => string;
+declare const isBand: (scale: AnyScale) => scale is BandScale;
+declare const isContinuous: (scale: AnyScale) => scale is ContinuousScale;
+export interface BuildModelInput {
+    options: ChartOptions;
+    size: Size;
+    renderers: ReadonlyMap<string, AnySeriesRenderer>;
+    /**
+     * What the viewer has switched off in the legend, keyed by `hiddenKey`: a whole
+     * series, or a single point where the legend keys points, as a pie does.
+     */
+    hidden?: ReadonlySet<string>;
+}
+export declare function buildChartModel({ options, size, renderers, hidden, }: BuildModelInput): ChartModel | null;
+export { isBand, isContinuous };