@matchstick-trading/primitives 0.0.10

package/dist/TransportParts.d.ts

@@ -0,0 +1,52 @@
+import { type ButtonHTMLAttributes, type ReactElement, type ReactNode } from 'react';
+export interface TransportRootProps {
+    playing: boolean;
+    /** Another operation is running: Previous, Next, Start and End are disabled; Play is aria-disabled and ignores activation. */
+    loading?: boolean;
+    /** Set when the cursor sits at the start or the end of the session. */
+    boundary?: 'start' | 'end' | null;
+    className?: string;
+    'aria-label'?: string;
+    children?: ReactNode;
+}
+declare function Root({ playing, loading, boundary, className, 'aria-label': label, children }: TransportRootProps): import("react").JSX.Element;
+declare function Group({ className, label, children }: {
+    className?: string;
+    label?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export type PartButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'disabled'>;
+/** The play toggle is never `disabled`: disabling the focused button would drop focus to <body> mid-gesture. */
+declare function Play({ onClick, ...rest }: PartButtonProps): import("react").JSX.Element;
+export type StepButton = {
+    (props: PartButtonProps): ReactElement;
+    displayName?: string;
+};
+declare const Previous: StepButton;
+declare const Next: StepButton;
+declare const Start: StepButton;
+declare const End: StepButton;
+export interface TransportSpeedProps {
+    speed: number;
+    options: readonly number[];
+    onSpeedChange: (speed: number) => void;
+    /** Text for one option, for example `formatSpeed`. */
+    format: (speed: number) => string;
+    className?: string;
+    labelClassName?: string;
+    label?: string;
+    'aria-label'?: string;
+}
+declare function Speed({ speed, options, onSpeedChange, format, className, labelClassName, label, 'aria-label': ariaLabel }: TransportSpeedProps): import("react").JSX.Element;
+/** Not announced while playing: the readout changes every frame. */
+declare function Readout({ className, children }: {
+    className?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** A normal boundary condition, not a failure: polite status text, nothing when no boundary is reached. */
+declare function Boundary({ label, className }: {
+    label: string | null;
+    className?: string;
+}): import("react").JSX.Element | null;
+export { Root, Group, Play, Previous, Next, Start, End, Speed, Readout, Boundary };
+//# sourceMappingURL=TransportParts.d.ts.map

package/dist/TransportParts.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { Notice } from './Notice.js';
+const Context = createContext({ playing: false, loading: false });
+function Root({ playing, loading = false, boundary = null, className, 'aria-label': label = 'Replay transport', children }) {
+    return (_jsx(Context.Provider, { value: { playing, loading }, children: _jsx("nav", { className: className, "aria-label": label, "data-state": playing ? 'playing' : 'paused', "data-boundary": boundary ?? undefined, children: children }) }));
+}
+function Group({ className, label, children }) {
+    return label ? (_jsx("div", { className: className, role: "group", "aria-label": label, children: children })) : (_jsx("div", { className: className, children: children }));
+}
+/** The play toggle is never `disabled`: disabling the focused button would drop focus to <body> mid-gesture. */
+function Play({ onClick, ...rest }) {
+    const { playing, loading } = useContext(Context);
+    return (_jsx("button", { type: "button", ...rest, onClick: (event) => {
+            if (loading)
+                return;
+            onClick?.(event);
+        }, "aria-disabled": loading ? 'true' : undefined, "data-state": playing ? 'playing' : 'paused', "data-disabled": loading ? '' : undefined }));
+}
+function stepButton(name) {
+    const Part = (props) => {
+        const { loading } = useContext(Context);
+        return _jsx("button", { type: "button", ...props, disabled: loading, "data-disabled": loading ? '' : undefined });
+    };
+    Part.displayName = `Transport.${name}`;
+    return Part;
+}
+const Previous = stepButton('Previous');
+const Next = stepButton('Next');
+const Start = stepButton('Start');
+const End = stepButton('End');
+function Speed({ speed, options = [], onSpeedChange, format = (value) => `${value}x`, className, labelClassName, label = 'Speed', 'aria-label': ariaLabel = 'Playback speed, multiple of real time' }) {
+    return (_jsxs("label", { className: className, children: [_jsx("span", { className: labelClassName, children: label }), _jsx("select", { value: String(speed), onChange: (event) => onSpeedChange(Number(event.target.value)), "aria-label": ariaLabel, children: (options ?? []).map((option) => (_jsx("option", { value: String(option), children: format(option) }, option))) })] }));
+}
+/** Not announced while playing: the readout changes every frame. */
+function Readout({ className, children }) {
+    const { playing } = useContext(Context);
+    return (_jsx("output", { className: className, "aria-live": playing ? 'off' : 'polite', children: children }));
+}
+/** A normal boundary condition, not a failure: polite status text, nothing when no boundary is reached. */
+function Boundary({ label, className }) {
+    if (!label)
+        return null;
+    return (_jsx(Notice, { as: "span", kind: "info", className: className, children: label }));
+}
+export { Root, Group, Play, Previous, Next, Start, End, Speed, Readout, Boundary };

package/dist/VolumeProfile.d.ts

@@ -0,0 +1,7 @@
+import { Histogram, Table } from './VolumeProfileParts.js';
+export * from './VolumeProfileParts.js';
+export declare const VolumeProfile: {
+    Histogram: typeof Histogram;
+    Table: typeof Table;
+};
+//# sourceMappingURL=VolumeProfile.d.ts.map

package/dist/VolumeProfile.js

@@ -0,0 +1,5 @@
+import { Histogram, Table } from './VolumeProfileParts.js';
+// The parts live in VolumeProfileParts.js (a client module). The namespace object is built here, outside it, so a server
+// component can write `VolumeProfile.Root`: a property of an object exported from a client module is not reachable there.
+export * from './VolumeProfileParts.js';
+export const VolumeProfile = { Histogram, Table };

package/dist/VolumeProfileParts.d.ts

@@ -0,0 +1,37 @@
+/**
+ * VolumeProfile as parts: Histogram, Table. The Histogram goes inside `Chart.Plot` and draws horizontal bars on the
+ * right of the price pane, one per price row, lined up with the chart's price scale; lines mark the point of control
+ * (the busiest row) and the value area's top and bottom. The Table says the same rows in text.
+ *
+ * Both read the bars in view, or a fixed `{ from, to }` range of timestamps (inclusive). Give both the same options.
+ */
+export interface VolumeProfileOptionsProps {
+    /** Number of price rows. Default 24. */
+    rows?: number;
+    /** Share of the volume the value area holds. Default 0.7. */
+    valueArea?: number;
+    /** A fixed range of Unix-millisecond timestamps instead of the bars in view. */
+    range?: {
+        from: number;
+        to: number;
+    };
+}
+export interface VolumeProfileHistogramProps extends VolumeProfileOptionsProps {
+    /** Width of the longest bar in chart units. Default a quarter of the frame. */
+    width?: number;
+    /** Draw the POC, VAH and VAL lines across the plot. Default true. */
+    lines?: boolean;
+    className?: string;
+}
+/**
+ * Horizontal bars growing left from the right edge. Each row is a `<g data-part="profile-row">` with an up and a down
+ * rect (`data-change`); `data-value-area` marks rows inside the value area and `data-poc` the busiest row.
+ */
+declare function Histogram({ width, lines, className, ...options }: VolumeProfileHistogramProps): import("react").JSX.Element | null;
+/** The rows as a table, highest price first: price range, volume and share of the total. */
+declare function Table({ className, caption, ...options }: VolumeProfileOptionsProps & {
+    className?: string;
+    caption?: string;
+}): import("react").JSX.Element;
+export { Histogram, Table };
+//# sourceMappingURL=VolumeProfileParts.d.ts.map

package/dist/VolumeProfileParts.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useChart } from './ChartParts.js';
+import { indexRangeOfTime, volumeProfile } from './core/volume-profile.js';
+function useProfile({ rows, valueArea, range }) {
+    const { bars, frame } = useChart('VolumeProfile');
+    // The length is a dependency too: a host that pushes onto the same array must still get the new bars counted.
+    const fixed = useMemo(() => (range ? indexRangeOfTime(bars, range.from, range.to) : null), [bars, bars.length, range?.from, range?.to]);
+    const first = fixed ? fixed.first : frame.first;
+    const last = fixed ? fixed.last : frame.last;
+    return useMemo(() => volumeProfile(bars, { first, last, rows, valueArea }), [bars, bars.length, first, last, rows, valueArea]);
+}
+/**
+ * Horizontal bars growing left from the right edge. Each row is a `<g data-part="profile-row">` with an up and a down
+ * rect (`data-change`); `data-value-area` marks rows inside the value area and `data-poc` the busiest row.
+ */
+function Histogram({ width, lines = true, className, ...options }) {
+    const { frame, readoutId } = useChart('VolumeProfile.Histogram');
+    const result = useProfile(options);
+    if (result.rows.length === 0 || result.poc < 0)
+        return null;
+    const longest = Math.max(1, Math.min(frame.plotWidth, Number.isFinite(width) ? Math.max(0, width) : frame.plotWidth * 0.25));
+    const peak = result.rows[result.poc].volume;
+    const [vaLow, vaHigh] = result.valueAreaRows;
+    const right = frame.plotWidth;
+    const nodes = [];
+    result.rows.forEach((row, i) => {
+        const top = frame.y(row.high);
+        const height = Math.max(1, frame.y(row.low) - top);
+        const upWidth = (row.upVolume / peak) * longest;
+        const downWidth = (row.downVolume / peak) * longest;
+        nodes.push(_jsxs("g", { "data-part": "profile-row", "data-value-area": i >= vaLow && i <= vaHigh ? '' : undefined, "data-poc": i === result.poc ? '' : undefined, children: [_jsx("rect", { "data-change": "up", x: right - upWidth, y: top, width: upWidth, height: height }), _jsx("rect", { "data-change": "down", x: right - upWidth - downWidth, y: top, width: downWidth, height: height })] }, i));
+    });
+    const line = (part, price) => {
+        if (price === null || !Number.isFinite(price))
+            return null;
+        const y = frame.y(price);
+        return _jsx("line", { "data-part": part, x1: 0, x2: frame.plotWidth, y1: y, y2: y });
+    };
+    const poc = result.rows[result.poc];
+    return (_jsxs("g", { className: className, "data-part": "volume-profile", clipPath: `url(#${readoutId}-price)`, "aria-hidden": "true", children: [nodes, lines && line('poc', (poc.low + poc.high) / 2), lines && line('vah', result.vah), lines && line('val', result.val)] }));
+}
+const volumeText = (v) => String(Math.round(v * 100) / 100);
+/** The rows as a table, highest price first: price range, volume and share of the total. */
+function Table({ className, caption = 'Volume by price', ...options }) {
+    const { decimals } = useChart('VolumeProfile.Table');
+    const result = useProfile(options);
+    const [vaLow, vaHigh] = result.valueAreaRows;
+    const body = [];
+    for (let i = result.rows.length - 1; i >= 0; i--) {
+        const row = result.rows[i];
+        body.push(_jsxs("tr", { "data-value-area": i >= vaLow && i <= vaHigh ? '' : undefined, "data-poc": i === result.poc ? '' : undefined, children: [_jsxs("td", { "data-mt-numeric": true, children: [row.low.toFixed(decimals), " \u2013 ", row.high.toFixed(decimals)] }), _jsx("td", { "data-mt-numeric": true, children: volumeText(row.volume) }), _jsx("td", { "data-mt-numeric": true, children: result.total > 0 ? `${((row.volume / result.total) * 100).toFixed(1)}%` : '–' })] }, i));
+    }
+    return (_jsxs("table", { className: className, children: [_jsx("caption", { children: caption }), _jsx("thead", { children: _jsx("tr", { children: ['Price', 'Volume', 'Share'].map((h) => _jsx("th", { scope: "col", children: h }, h)) }) }), _jsx("tbody", { children: body })] }));
+}
+export { Histogram, Table };

package/dist/accessible-name.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+/**
+ * The accessible-name rule. A control that is an icon and nothing else still names its action in words: the
+ * words are the `aria-label`, and the icon is a decorative `data-part='icon'` span that assistive technology skips. No
+ * icon ships in this package; `icon` is a slot the host fills.
+ */
+export interface NameProps {
+    /** A graphic for the button, drawn before any words. It is hidden from assistive technology, so give the button words too. */
+    icon?: ReactNode;
+    /** The action in words. It is the visible text unless `hideLabel` is set, and always the accessible name. */
+    label?: string;
+    /** Show only the icon. The `label` then becomes the `aria-label`. Needs `icon`. */
+    hideLabel?: boolean;
+}
+/**
+ * What a button shows and what it is called. `fallback` is the part's own word ("Lock", "Reset view"). Visible text is
+ * `children`, else `label`, else `fallback`; with `hideLabel` there is none and the name moves to `aria-label`.
+ */
+export declare function buttonFace(fallback: string | undefined, { icon, label, hideLabel, children, ariaLabel }: NameProps & {
+    children?: ReactNode;
+    ariaLabel?: string;
+}): {
+    'aria-label': string | undefined;
+    content: ReactNode;
+};
+//# sourceMappingURL=accessible-name.d.ts.map

package/dist/accessible-name.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * What a button shows and what it is called. `fallback` is the part's own word ("Lock", "Reset view"). Visible text is
+ * `children`, else `label`, else `fallback`; with `hideLabel` there is none and the name moves to `aria-label`.
+ */
+export function buttonFace(fallback, { icon, label, hideLabel, children, ariaLabel }) {
+    const hasIcon = icon !== undefined && icon !== null && icon !== false;
+    const visible = hideLabel && hasIcon ? null : (children ?? label ?? fallback ?? null);
+    const name = ariaLabel ?? label ?? (typeof children === 'string' ? children : fallback);
+    return {
+        'aria-label': visible === null || visible === false || visible === '' ? name : ariaLabel,
+        content: (_jsxs(_Fragment, { children: [hasIcon && _jsx("span", { "aria-hidden": "true", "data-part": "icon", children: icon }), visible] })),
+    };
+}

package/dist/attributes.d.ts

@@ -0,0 +1,8 @@
+import type { CSSProperties } from 'react';
+export * from './core/attributes.js';
+/**
+ * A column width that holds the widest value without growing: set the result as the element's style and give
+ * the cells `data-mt-numeric`. Counts characters of the longest sample (digits, separator, sign), in `ch`.
+ */
+export declare function numericWidth(...samples: readonly string[]): CSSProperties;
+//# sourceMappingURL=attributes.d.ts.map

package/dist/attributes.js

@@ -0,0 +1,9 @@
+import { numericWidthValue } from './core/attributes.js';
+export * from './core/attributes.js';
+/**
+ * A column width that holds the widest value without growing: set the result as the element's style and give
+ * the cells `data-mt-numeric`. Counts characters of the longest sample (digits, separator, sign), in `ch`.
+ */
+export function numericWidth(...samples) {
+    return { ['--mt-numeric-width']: numericWidthValue(...samples) };
+}

package/dist/core/adapter.d.ts

@@ -0,0 +1,38 @@
+import { type CsvBarsError, type CsvBarsOptions } from './csv-bars.js';
+import type { CandleBar } from './chart-scale.js';
+import type { DataSeries, SeriesSet } from './series.js';
+/** A problem found while reading. `line` is 1-based in the source; 0 means the source as a whole. */
+export type AdapterIssue = CsvBarsError;
+export interface AdapterResult {
+    /** Who read it, shown beside the data so a person can tell where it came from. */
+    adapter: {
+        name: string;
+        version: string;
+    };
+    bars: CandleBar[];
+    /** Series beside the bars, on the bars' timestamps. */
+    series: DataSeries[];
+    errors: AdapterIssue[];
+    /** Things that were assumed or changed on the way in, in words a status line can show. */
+    notes: string[];
+}
+/** The shape every adapter has: a name, a version and a `read` that never throws. */
+export interface DataAdapter<Input, Options = undefined> {
+    name: string;
+    version: string;
+    read(input: Input, options?: Options): AdapterResult;
+}
+export type CsvAdapterOptions = Pick<CsvBarsOptions, 'maxRows' | 'utcOffsetMinutes'>;
+/**
+ * Reads a CSV of bars and any all-number columns beside them. Times without a zone are UTC unless `utcOffsetMinutes`
+ * says otherwise, and the note says which was used. An extra column's empty cell (or `-`, `NA`, `NaN`, `null`) is an
+ * `unknown` point, because the file does not say why it is empty; a `0` is the value 0. A column with any other text in
+ * it is not a series and is named in the notes.
+ */
+export declare const csvAdapter: DataAdapter<string, CsvAdapterOptions>;
+/**
+ * The result as one set, with the bars' close as the primary series (`bars`), so `report` can say where another
+ * series has no point or a different kind of gap. The bars must be in time order (every adapter's are).
+ */
+export declare function toSeriesSet(result: AdapterResult): SeriesSet;
+//# sourceMappingURL=adapter.d.ts.map

package/dist/core/adapter.js

@@ -0,0 +1,64 @@
+// An adapter turns something a person has (a file, later a feed) into what the parts draw: bars, any series beside
+// them, and the problems it found, named by line. It is a plain function over its input: it reads, never repairs,
+// never throws, and never writes a zero where the source said nothing. `csvAdapter` is the first; a host can write
+// its own to the same shape and check the result with `seriesSetSchema`.
+import { parseBarsCsv } from './csv-bars.js';
+const NOTES = {
+    sorted: 'The rows were out of time order, so they were sorted.',
+    'no-volume': 'There is no volume column, so volume is 0.',
+    'no-header': 'There was no header row, so the columns were read as time, open, high, low, close, volume.',
+};
+/** A header turned into an id: lower case, words joined by a dash, and a number added when two would collide. */
+function idFromHeader(header, taken) {
+    const base = header.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'column';
+    let id = base;
+    for (let n = 2; taken.has(id); n++)
+        id = `${base}-${n}`;
+    taken.add(id);
+    return id;
+}
+/**
+ * Reads a CSV of bars and any all-number columns beside them. Times without a zone are UTC unless `utcOffsetMinutes`
+ * says otherwise, and the note says which was used. An extra column's empty cell (or `-`, `NA`, `NaN`, `null`) is an
+ * `unknown` point, because the file does not say why it is empty; a `0` is the value 0. A column with any other text in
+ * it is not a series and is named in the notes.
+ */
+export const csvAdapter = {
+    name: 'csv',
+    version: '1',
+    read(text, options = {}) {
+        const given = options.utcOffsetMinutes;
+        if (given !== undefined && !(Number.isInteger(given) && given >= -720 && given <= 840)) {
+            return { adapter: { name: 'csv', version: '1' }, bars: [], series: [], errors: [{ line: 0, message: `utcOffsetMinutes must be a whole number of minutes from -720 to 840, not ${String(given)}, so nothing was read.` }], notes: [] };
+        }
+        const parsed = parseBarsCsv(text, { ...options, extraColumns: true });
+        const offset = Number.isFinite(options.utcOffsetMinutes) ? options.utcOffsetMinutes : 0;
+        const notes = parsed.notes.map((n) => NOTES[n]);
+        if (parsed.bars.length > 0 && (parsed.zoneless ?? 0) > 0)
+            notes.push(offset === 0 ? 'Times with no zone were read as UTC.' : `Times with no zone were read as UTC${offset > 0 ? '+' : '-'}${Math.floor(Math.abs(offset) / 60)}:${String(Math.abs(offset) % 60).padStart(2, '0')}.`);
+        for (const h of parsed.skippedColumns ?? [])
+            notes.push(`Column "${h}" has a cell that is not a number or a no-value word (blank, -, NA, NaN, null), so it was left out and is not a series.`);
+        const taken = new Set(['bars']);
+        const series = (parsed.extras ?? []).map((col) => {
+            const points = parsed.bars.map((bar, i) => {
+                const t = new Date(bar.timestamp).toISOString();
+                const v = col.values[i];
+                return typeof v === 'number' ? { t, kind: 'value', v } : { t, kind: 'unknown' };
+            });
+            return { id: idFromHeader(col.header, taken), label: col.header, points };
+        });
+        return { adapter: { name: 'csv', version: '1' }, bars: parsed.bars, series, errors: parsed.errors, notes };
+    },
+};
+/**
+ * The result as one set, with the bars' close as the primary series (`bars`), so `report` can say where another
+ * series has no point or a different kind of gap. The bars must be in time order (every adapter's are).
+ */
+export function toSeriesSet(result) {
+    const bars = {
+        id: 'bars',
+        label: 'Close',
+        points: result.bars.map((b) => ({ t: new Date(b.timestamp).toISOString(), kind: 'value', v: b.close })),
+    };
+    return { schemaVersion: '0', alignment: { mode: 'exact', primary: 'bars' }, series: [bars, ...result.series] };
+}

package/dist/core/attributes.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The data-attribute vocabulary every primitive speaks. State lives in `data-*`
+ * attributes, never in class names, so a host styles with `[data-side="bid"]` and the tokens in
+ * `tokens.css`. Values are the whole vocabulary: a part never invents another.
+ */
+export type Side = 'bid' | 'ask';
+/** Movement since the previous step. Not the diff status below: `data-change` is movement, `data-diff` is difference. */
+export type Change = 'up' | 'down' | 'flat';
+/** How a level differs between two books; the report's `change` field, as an attribute. */
+export type DiffStatus = 'added' | 'removed' | 'modified';
+export type Quality = 'ok' | 'gap' | 'stale' | 'truncated';
+export type CursorMark = 'a' | 'b';
+export interface PrimitiveState {
+    side?: Side;
+    change?: Change;
+    diff?: DiffStatus;
+    quality?: Quality;
+    cursor?: CursorMark;
+    /** True when the value comes from a synthetic session. */
+    synthetic?: boolean;
+}
+export type PrimitiveAttributes = {
+    /** Scopes tokens.css to primitive markup. */
+    'data-mt': '';
+    'data-side'?: Side;
+    'data-change'?: Change;
+    'data-diff'?: DiffStatus;
+    'data-quality'?: Quality;
+    'data-cursor'?: CursorMark;
+    'data-synthetic'?: '';
+};
+/** Spreads onto a DOM element. Unset states emit nothing, so an attribute selector never matches by accident. */
+export declare function primitiveAttributes(state: PrimitiveState): PrimitiveAttributes;
+/** The width that holds the widest sample without growing, in `ch`: the value for `--mt-numeric-width`. */
+export declare function numericWidthValue(...samples: readonly string[]): string;
+//# sourceMappingURL=attributes.d.ts.map

package/dist/core/attributes.js

@@ -0,0 +1,22 @@
+/** Spreads onto a DOM element. Unset states emit nothing, so an attribute selector never matches by accident. */
+export function primitiveAttributes(state) {
+    const out = { 'data-mt': '' };
+    if (state.side)
+        out['data-side'] = state.side;
+    if (state.change)
+        out['data-change'] = state.change;
+    if (state.diff)
+        out['data-diff'] = state.diff;
+    if (state.quality)
+        out['data-quality'] = state.quality;
+    if (state.cursor)
+        out['data-cursor'] = state.cursor;
+    if (state.synthetic)
+        out['data-synthetic'] = '';
+    return out;
+}
+/** The width that holds the widest sample without growing, in `ch`: the value for `--mt-numeric-width`. */
+export function numericWidthValue(...samples) {
+    const longest = samples.reduce((n, s) => Math.max(n, s.length), 0);
+    return `${longest}ch`;
+}

package/dist/core/candles.d.ts

@@ -0,0 +1,6 @@
+import type { CandleBar } from './chart-scale.js';
+/** Heikin Ashi bars from ordinary ones: each bar averages its own prices and the previous Heikin Ashi bar. */
+export declare function heikinAshi(bars: readonly CandleBar[]): CandleBar[];
+/** The default time-axis label: HH:MM in UTC, with the month and day when the day changes from the previous label. */
+export declare const formatBarTime: (t: number, previous: number | null) => string;
+//# sourceMappingURL=candles.d.ts.map

package/dist/core/candles.js

@@ -0,0 +1,19 @@
+/** Heikin Ashi bars from ordinary ones: each bar averages its own prices and the previous Heikin Ashi bar. */
+export function heikinAshi(bars) {
+    const out = [];
+    for (let i = 0; i < bars.length; i++) {
+        const b = bars[i];
+        const close = (b.open + b.high + b.low + b.close) / 4;
+        const open = i === 0 ? (b.open + b.close) / 2 : (out[i - 1].open + out[i - 1].close) / 2;
+        out.push({ timestamp: b.timestamp, open, close, high: Math.max(b.high, open, close), low: Math.min(b.low, open, close), volume: b.volume });
+    }
+    return out;
+}
+const pad = (n) => String(n).padStart(2, '0');
+/** The default time-axis label: HH:MM in UTC, with the month and day when the day changes from the previous label. */
+export const formatBarTime = (t, previous) => {
+    const d = new Date(t);
+    const time = `${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}`;
+    const sameDay = previous !== null && new Date(previous).toISOString().slice(0, 10) === d.toISOString().slice(0, 10);
+    return sameDay ? time : `${d.toISOString().slice(5, 10)} ${time}`;
+};

package/dist/core/chart-gesture.d.ts

@@ -0,0 +1,109 @@
+/**
+ * The chart's pointer and wheel gestures as plain data in, plain data out: press and drag to pan, a drag on the price
+ * labels, the wheel, a two-finger pinch and the double tap that gives the price back to the bars. The host reads
+ * coordinates off its DOM events, passes them in with the frame, viewport and bar count of the moment, and applies the
+ * change the result names. Nothing here touches a DOM, so the rules run and test without one.
+ */
+import { type ChartFrame, type ChartViewport, type PriceSpan } from './chart-scale.js';
+export interface ChartPoint {
+    x: number;
+    y: number;
+}
+/** What the chart looks like at the moment of an event: the host reads it from its current render. */
+export interface ChartGestureView {
+    frame: ChartFrame;
+    viewport: ChartViewport;
+    /** Number of bars in the series. */
+    total: number;
+    /** Lowest and highest price of all the bars, or null for none; what a fixed price range is kept near. */
+    dataSpan: PriceSpan | null;
+    /** How far down the pointer still picks a bar: the bottom of the last panel. Default `frame.plotHeight` (one panel). The price is still the first panel's. */
+    hoverBottom?: number;
+}
+interface DragState {
+    id: number;
+    x: number;
+    y: number;
+    viewport: ChartViewport;
+    touch: boolean;
+    decided: boolean;
+    vertical: boolean;
+    price: {
+        range: PriceSpan;
+        perPixel: number;
+        moved: boolean;
+    } | null;
+}
+/** A pinch keeps the frame, viewport and range it began with, so it is measured against where the fingers started. */
+interface PinchState {
+    ids: [number, number];
+    frame: ChartFrame;
+    viewport: ChartViewport;
+    range: PriceSpan;
+    mid: ChartPoint;
+    dx: number;
+    dy: number;
+}
+export interface ChartGestureState {
+    /** Fingers down now, in the order they landed. */
+    touches: ReadonlyArray<{
+        id: number;
+    } & ChartPoint>;
+    drag: DragState | null;
+    pinch: PinchState | null;
+    lastTap: {
+        time: number;
+        x: number;
+        y: number;
+    } | null;
+}
+export declare const INITIAL_CHART_GESTURE: ChartGestureState;
+export type ChartGestureEvent = 
+/** A primary-button press. `touch` is whether the pointer is a finger. */
+{
+    type: 'down';
+    pointerId: number;
+    touch: boolean;
+    point: ChartPoint;
+    view: ChartGestureView;
+} | {
+    type: 'move';
+    pointerId: number;
+    point: ChartPoint;
+    view: ChartGestureView;
+}
+/** `time` is the event timestamp in milliseconds; it times the double tap. */
+ | {
+    type: 'up';
+    pointerId: number;
+    time: number;
+} | {
+    type: 'cancel';
+    pointerId: number;
+} | {
+    type: 'wheel';
+    point: ChartPoint;
+    deltaY: number;
+    view: ChartGestureView;
+};
+export interface ChartGestureResult {
+    state: ChartGestureState;
+    /** A new viewport to apply, if any. */
+    viewport?: ChartViewport;
+    /** A price range to fix, or null to give the price back to the bars; absent means leave it. */
+    priceRange?: PriceSpan | null;
+    /** The pointer is hovering the plot: the bar under it (absent leaves the crosshair bar) and its price (null when not over the price pane). */
+    hover?: {
+        bar?: number;
+        price: number | null;
+    };
+    /** Take the pointer, so the drag continues outside the chart. */
+    capture?: boolean;
+    /** The host should stop the browser's own handling (page scroll). */
+    preventDefault?: boolean;
+}
+/** Whether a one-pointer drag (a pan or a price-label drag) is in progress. A two-finger pinch is separate: read `state.pinch`. The Plot keeps the hover price while a drag runs, as before the reducer moved to core. */
+export declare function isChartGestureActive(state: ChartGestureState): boolean;
+export declare function reduceChartGesture(event: ChartGestureEvent, state: ChartGestureState): ChartGestureResult;
+export {};
+//# sourceMappingURL=chart-gesture.d.ts.map