@cfasim-ui/charts 0.3.18 → 0.4.0

package/dist/BarChart/BarChart.d.ts

@@ -0,0 +1,131 @@
+import { ChartData } from '../_shared/index.js';
+export type BarChartData = ChartData;
+export interface BarSeries {
+    /** Bar values; one entry per category. `y` is accepted as an alias. */
+    y?: BarChartData;
+    data?: BarChartData;
+    color?: string;
+    opacity?: number;
+    /** Label shown in the inline legend. */
+    legend?: string;
+}
+type __VLS_Props = {
+    /** Single-series values. Equivalent to `y`. */
+    data?: BarChartData;
+    /** Single-series values (alias for `data`). */
+    y?: BarChartData;
+    /** Multi-series mode. Each series has its own values. */
+    series?: BarSeries[];
+    /**
+     * Category labels for the categorical axis. Length should match the
+     * longest series. When omitted, indices (0, 1, 2, ...) are used.
+     */
+    categories?: readonly string[];
+    /** "vertical" (default, aka column) draws upright bars; "horizontal" draws sideways. */
+    orientation?: "vertical" | "horizontal";
+    /** "grouped" (default) places series side-by-side; "stacked" stacks them. */
+    layout?: "grouped" | "stacked";
+    width?: number;
+    height?: number;
+    title?: string;
+    xLabel?: string;
+    yLabel?: string;
+    /** Force the value axis to start at this value or lower (default 0). */
+    valueMin?: number;
+    /**
+     * Tick placement on the value axis (numeric). Number = interval,
+     * array = explicit values. When omitted, ticks are chosen automatically.
+     */
+    valueTicks?: number | number[];
+    /** Formatter for value-axis tick labels. */
+    valueTickFormat?: (value: number) => string;
+    /** Formatter for category-axis labels. Receives the resolved category string. */
+    categoryFormat?: (label: string, index: number) => string;
+    /**
+     * Fraction of each category slot reserved as gap between groups (0..1).
+     * Default 0.2 — i.e. bars/groups fill 80% of their slot.
+     */
+    barPadding?: number;
+    /**
+     * Pixel gap between bars within a single category group in `grouped` layout.
+     * Default 1.
+     */
+    groupGap?: number;
+    debounce?: number;
+    menu?: boolean | string;
+    valueGrid?: boolean;
+    /** Custom per-index data passed to the tooltip slot. */
+    tooltipData?: unknown[];
+    /** Tooltip activation mode. */
+    tooltipTrigger?: "hover" | "click";
+    /** Boundary for tooltip flip/clamp. Default "chart". */
+    tooltipClamp?: "none" | "chart" | "window";
+    /** Custom CSV content (string or function). When omitted, generated from the bars. */
+    csv?: string | (() => string);
+    /** Filename (without extension) for downloaded SVG, PNG, CSV. */
+    filename?: string;
+    /** Show a plain text link below the chart to download the CSV. */
+    downloadLink?: boolean | string;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        tooltip?(props: {
+            index: number;
+            category: string;
+            values: {
+                value: number;
+                color: string;
+                seriesIndex: number;
+            }[];
+            data: unknown;
+        }): unknown;
+    }> & {
+        tooltip?(props: {
+            index: number;
+            category: string;
+            values: {
+                value: number;
+                color: string;
+                seriesIndex: number;
+            }[];
+            data: unknown;
+        }): unknown;
+    };
+    refs: {
+        containerRef: HTMLDivElement;
+        svgRef: SVGSVGElement;
+        tooltipRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    hover: (payload: {
+        index: number;
+    } | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onHover?: ((payload: {
+        index: number;
+    } | null) => any) | undefined;
+}>, {
+    menu: boolean | string;
+    tooltipClamp: "none" | "chart" | "window";
+    orientation: "vertical" | "horizontal";
+    layout: "grouped" | "stacked";
+    valueMin: number;
+    barPadding: number;
+    groupGap: number;
+    valueGrid: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    containerRef: HTMLDivElement;
+    svgRef: SVGSVGElement;
+    tooltipRef: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/BarChart/BarChart.spec.d.ts

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

package/dist/BarChart/BarChart.test.d.ts

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

package/dist/LineChart/LineChart.d.ts

@@ -1,10 +1,11 @@
+import { ChartData } from '../_shared/index.js';
 /**
  * Numeric input accepted by the chart. `number[]` and any standard numeric
  * typed array are supported, so the output of
  * `ModelOutput.column('x')` (e.g. a `Float64Array`) can be passed directly
  * without copying into a plain array.
  */
-export type LineChartData = readonly number[] | Float64Array | Float32Array | Int32Array | Uint32Array | Int16Array | Uint16Array | Int8Array | Uint8Array | Uint8ClampedArray;
+export type LineChartData = ChartData;
 export interface Series {
     /**
      * Y-values. One of `y` or `data` must be supplied; `y` wins if both

package/dist/_shared/axes.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Pure helpers shared by chart components for axis tick math and value
+ * formatting. No Vue reactivity here; see `useAxisTicks` for the
+ * reactive wrapper.
+ */
+/** Round to nearest half-pixel so 1px SVG strokes stay sharp. */
+export declare function snap(v: number): number;
+export declare function niceStep(range: number, targetTicks: number): number;
+/** Generate interval-spaced values in [min, max], inclusive. */
+export declare function intervalValues(min: number, max: number, step: number): number[];
+export declare function formatTick(v: number): string;
+/**
+ * Numeric input accepted by chart components. `number[]` and any standard
+ * numeric typed array are supported, so the output of
+ * `ModelOutput.column('x')` (e.g. a `Float64Array`) can be passed
+ * directly without copying.
+ */
+export type ChartData = readonly number[] | Float64Array | Float32Array | Int32Array | Uint32Array | Int16Array | Uint16Array | Int8Array | Uint8Array | Uint8ClampedArray;

package/dist/_shared/axes.test.d.ts

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

package/dist/_shared/computeTicks.d.ts

@@ -0,0 +1,21 @@
+export interface TickValueOptions {
+    /** Data-space extent. */
+    min: number;
+    max: number;
+    /** Tick spec: number = interval, array = explicit values, undefined = auto. */
+    ticks?: number | number[];
+    /** Target tick count when auto-spacing (typically innerSize / 50 for y, /80 for x). */
+    targetTickCount?: number;
+    /**
+     * Display-space offset added to user-supplied explicit/interval values
+     * before they are interpreted. Used by LineChart's `xMin` semantics so
+     * users supply tick values in display coordinates.
+     */
+    displayOffset?: number;
+}
+/**
+ * Returns tick values in data-space ([min, max]) according to the spec.
+ * Display-space conversions (for labels) happen at the call site so
+ * each chart can layer its own formatting / fallback behavior.
+ */
+export declare function computeTickValues(opts: TickValueOptions): number[];

package/dist/_shared/computeTicks.test.d.ts

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

package/dist/_shared/index.d.ts

@@ -0,0 +1,7 @@
+export { snap, niceStep, intervalValues, formatTick, type ChartData, } from './axes.js';
+export { computeTickValues, type TickValueOptions } from './computeTicks.js';
+export { useChartSize, type ChartSizeOptions } from './useChartSize.js';
+export { useChartPadding, INLINE_LEGEND_HEIGHT, type ChartPaddingOptions, } from './useChartPadding.js';
+export { useChartTooltip, type ChartTooltipOptions, } from './useChartTooltip.js';
+export { useChartMenu, type ChartMenuOptions } from './useChartMenu.js';
+export { seriesToCsv, categoricalToCsv, type CsvSeries } from './seriesCsv.js';

package/dist/_shared/seriesCsv.d.ts

@@ -0,0 +1,20 @@
+import { ChartData } from './axes.js';
+export interface CsvSeries {
+    data: ChartData;
+    /** Optional parallel x-values; when all series share the same x, an `x` column is used. */
+    x?: ChartData;
+}
+/**
+ * Build a CSV string for one or more numeric series. When every series
+ * shares the same `x` reference an `x` column is emitted; otherwise
+ * rows are indexed.
+ */
+export declare function seriesToCsv(series: CsvSeries[]): string;
+/**
+ * Build a CSV for a categorical chart (BarChart vertical / horizontal):
+ * one row per category, one column per series.
+ */
+export declare function categoricalToCsv(categories: readonly string[], series: {
+    label?: string;
+    data: ChartData;
+}[], categoryHeader?: string): string;

package/dist/_shared/seriesCsv.test.d.ts

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

package/dist/_shared/useChartMenu.d.ts

@@ -0,0 +1,22 @@
+import { Ref } from 'vue';
+import { ChartMenuItem } from '../ChartMenu/ChartMenu';
+export interface ChartMenuOptions {
+    filename: () => string | undefined;
+    /** Used as the menu's filename fallback when `filename` is unset. */
+    legacyMenuLabel: () => boolean | string | undefined;
+    /** Builds the CSV content for downloads. */
+    getCsv: () => string;
+    /** Whether a separate download link is rendered (and the CSV menu item should be hidden). */
+    downloadLink: () => boolean | string | undefined;
+}
+/**
+ * Computes the standard chart menu items (SVG / PNG / CSV) plus the
+ * CSV-download-link state shared by every chart.
+ */
+export declare function useChartMenu(opts: ChartMenuOptions): {
+    svgRef: Ref<SVGSVGElement | null>;
+    items: import('vue').ComputedRef<ChartMenuItem[]>;
+    downloadLinkText: import('vue').ComputedRef<string | null>;
+    csvHref: import('vue').ComputedRef<string | null>;
+    resolvedFilename: () => string;
+};

package/dist/_shared/useChartPadding.d.ts

@@ -0,0 +1,26 @@
+/** Vertical space reserved at the top of the chart for inline legend swatches. */
+export declare const INLINE_LEGEND_HEIGHT = 20;
+export interface ChartPaddingOptions {
+    title: () => string | undefined;
+    xLabel: () => string | undefined;
+    yLabel: () => string | undefined;
+    hasInlineLegend: () => boolean;
+    width: () => number;
+    height: () => number;
+}
+/**
+ * Computes the standard chart padding (top/right/bottom/left) and the
+ * derived inner plotting region (innerW, innerH). Shared by LineChart
+ * and BarChart so the axis label spacing and inline legend strip stay
+ * consistent.
+ */
+export declare function useChartPadding(opts: ChartPaddingOptions): {
+    padding: import('vue').ComputedRef<{
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    }>;
+    innerW: import('vue').ComputedRef<number>;
+    innerH: import('vue').ComputedRef<number>;
+};

package/dist/_shared/useChartSize.d.ts

@@ -0,0 +1,16 @@
+import { Ref } from 'vue';
+export interface ChartSizeOptions {
+    /** Fallback width when measurement is not yet available. */
+    fallbackWidth?: number;
+    /** Optional debounce in ms applied to ResizeObserver updates. */
+    debounce?: () => number | undefined;
+}
+/**
+ * Watches an element ref for size changes and exposes the measured width.
+ * Mirrors the per-chart ResizeObserver wiring previously inlined in each
+ * chart component.
+ */
+export declare function useChartSize(opts?: ChartSizeOptions): {
+    containerRef: Ref<HTMLElement | null>;
+    measuredWidth: Ref<number>;
+};

package/dist/_shared/useChartTooltip.d.ts

@@ -0,0 +1,66 @@
+import { Ref } from 'vue';
+import { TooltipClamp } from '../tooltip-position.js';
+export interface ChartTooltipOptions {
+    /** Whether tooltip interactions are wired up at all. */
+    enabled: () => boolean;
+    /** Tooltip activation mode. */
+    trigger?: () => "hover" | "click" | undefined;
+    /** Boundary for tooltip flip/clamp. */
+    clamp?: () => TooltipClamp;
+    /**
+     * Maps a client (x, y) pointer location to a data index, or null when
+     * the pointer is outside the chart. Most charts only need `clientX`
+     * (categorical or x-indexed), but horizontal bar charts also need
+     * `clientY`.
+     */
+    pointerToIndex: (clientX: number, clientY: number) => number | null;
+    /** The chart's container element (used to compute relative position). */
+    containerRef: Ref<HTMLElement | null>;
+    /** Pointer-vertical offset applied for touch interactions. */
+    touchYOffset?: number;
+    /**
+     * Emit hover events. The first arg is `{ index }` while hovering and
+     * `null` when leaving.
+     */
+    onHover?: (payload: {
+        index: number;
+    } | null) => void;
+}
+/**
+ * Shared tooltip state + pointer/touch handlers used by chart components.
+ * The caller wires the returned `handlers` to its hit-test overlay and
+ * places the floating tooltip with `tooltipPos`.
+ */
+export declare function useChartTooltip(opts: ChartTooltipOptions): {
+    hoverIndex: Ref<number | null, number | null>;
+    isTouching: Ref<boolean, boolean>;
+    pointer: Ref<{
+        clientX: number;
+        clientY: number;
+    } | null, {
+        clientX: number;
+        clientY: number;
+    } | {
+        clientX: number;
+        clientY: number;
+    } | null>;
+    tooltipRef: Ref<HTMLElement | null, HTMLElement | null>;
+    tooltipPos: Ref<{
+        left: number;
+        top: number;
+    } | null, {
+        left: number;
+        top: number;
+    } | {
+        left: number;
+        top: number;
+    } | null>;
+    handlers: {
+        mousemove: (event: MouseEvent) => void;
+        mouseleave: () => void;
+        click: (event: MouseEvent) => void;
+        touchstart: (event: TouchEvent) => void;
+        touchmove: (event: TouchEvent) => void;
+        touchend: () => void;
+    };
+};

package/dist/index.css

@@ -1,2 +1,2 @@
-.chart-menu-trigger-area[data-v-fe2f6904]{z-index:1;position:absolute;top:0;right:0}.chart-menu-button[data-v-fe2f6904]{border:1px solid var(--color-border);background:var(--color-bg-0,#fff);width:28px;height:28px;color:var(--color-text-secondary);cursor:pointer;opacity:0;border-radius:.25em;justify-content:center;align-items:center;transition:opacity .15s;display:flex}.chart-menu-button[data-state=open][data-v-fe2f6904]{opacity:1}.chart-menu-button[data-v-fe2f6904]:hover{background:var(--color-bg-1,#0000000d);color:var(--color-text)}.chart-menu-content{z-index:100;background:var(--color-bg-0);border:1px solid var(--color-border);border-radius:.25em;min-width:140px;padding:.25em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.chart-menu-item{font-size:var(--font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:.25em;outline:none;align-items:center;padding:.375em .5em;display:flex}.chart-menu-item[data-highlighted]{background:var(--color-primary);color:#fff}.line-chart-wrapper[data-v-dc8afa83]{width:100%;position:relative}.line-chart-wrapper[data-v-dc8afa83]:hover .chart-menu-button{opacity:1}.line-chart-tooltip-label[data-v-dc8afa83]{margin-bottom:.25em;font-weight:600}.line-chart-tooltip-row[data-v-dc8afa83]{align-items:center;gap:.375em;display:flex}.line-chart-download-link[data-v-dc8afa83]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.line-chart-tooltip-swatch[data-v-dc8afa83]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.choropleth-wrapper[data-v-25a20d5b]{width:100%;position:relative}.choropleth-wrapper.pannable svg[data-v-25a20d5b]{cursor:grab}.choropleth-wrapper.pannable svg[data-v-25a20d5b]:active{cursor:grabbing}.choropleth-wrapper[data-v-25a20d5b]:hover .chart-menu-button{opacity:1}.state-path[data-v-25a20d5b]{cursor:pointer}.chart-tooltip-anchor[data-v-44377f70]{pointer-events:none;width:1px;height:1px;position:absolute}.chart-tooltip-content{z-index:100;background:var(--color-bg-0,#fff);border:1px solid var(--color-border,#e5e7eb);font-size:var(--font-size-sm,.875rem);pointer-events:none;border-radius:.375em;padding:.5em .75em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.TableOuter[data-v-505e2187]{display:inline-block;position:relative}.TableOuter.has-menu[data-v-505e2187]{margin-top:32px}.TableOuter[data-v-505e2187] .chart-menu-trigger-area{top:-32px;right:0}.TableOuter[data-v-505e2187]:hover .chart-menu-button{opacity:1}.TableWrapper[data-v-505e2187]{font-size:var(--font-size-sm);overflow-x:auto}.Table[data-v-505e2187]{border-collapse:collapse;font-variant-numeric:tabular-nums;border:1px solid var(--color-border);margin:0;display:table}.Table tr[data-v-505e2187],.Table th[data-v-505e2187],.Table td[data-v-505e2187]{background:0 0;border:none}.Table th[data-v-505e2187],.Table td[data-v-505e2187]{white-space:nowrap;padding:.75em 1.25em}.Table th[data-v-505e2187]{border-bottom:1px solid var(--color-border-header);font-weight:600;position:sticky;top:0}.Table tbody td[data-v-505e2187]{border-bottom:1px solid var(--color-border)}.Table tbody tr:last-child td[data-v-505e2187]{border-bottom:none}.data-table-download-link[data-v-505e2187]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}
+.chart-menu-trigger-area[data-v-fe2f6904]{z-index:1;position:absolute;top:0;right:0}.chart-menu-button[data-v-fe2f6904]{border:1px solid var(--color-border);background:var(--color-bg-0,#fff);width:28px;height:28px;color:var(--color-text-secondary);cursor:pointer;opacity:0;border-radius:.25em;justify-content:center;align-items:center;transition:opacity .15s;display:flex}.chart-menu-button[data-state=open][data-v-fe2f6904]{opacity:1}.chart-menu-button[data-v-fe2f6904]:hover{background:var(--color-bg-1,#0000000d);color:var(--color-text)}.chart-menu-content{z-index:100;background:var(--color-bg-0);border:1px solid var(--color-border);border-radius:.25em;min-width:140px;padding:.25em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.chart-menu-item{font-size:var(--font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:.25em;outline:none;align-items:center;padding:.375em .5em;display:flex}.chart-menu-item[data-highlighted]{background:var(--color-primary);color:#fff}.line-chart-wrapper[data-v-d66a19bd]{width:100%;position:relative}.line-chart-wrapper[data-v-d66a19bd]:hover .chart-menu-button{opacity:1}.line-chart-tooltip-label[data-v-d66a19bd]{margin-bottom:.25em;font-weight:600}.line-chart-tooltip-row[data-v-d66a19bd]{align-items:center;gap:.375em;display:flex}.line-chart-download-link[data-v-d66a19bd]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.line-chart-tooltip-swatch[data-v-d66a19bd]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.bar-chart-wrapper[data-v-c2d91885]{width:100%;position:relative}.bar-chart-wrapper[data-v-c2d91885]:hover .chart-menu-button{opacity:1}.bar-chart-tooltip-label[data-v-c2d91885]{margin-bottom:.25em;font-weight:600}.bar-chart-tooltip-row[data-v-c2d91885]{align-items:center;gap:.375em;display:flex}.bar-chart-download-link[data-v-c2d91885]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.bar-chart-tooltip-swatch[data-v-c2d91885]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.choropleth-wrapper[data-v-25a20d5b]{width:100%;position:relative}.choropleth-wrapper.pannable svg[data-v-25a20d5b]{cursor:grab}.choropleth-wrapper.pannable svg[data-v-25a20d5b]:active{cursor:grabbing}.choropleth-wrapper[data-v-25a20d5b]:hover .chart-menu-button{opacity:1}.state-path[data-v-25a20d5b]{cursor:pointer}.chart-tooltip-anchor[data-v-44377f70]{pointer-events:none;width:1px;height:1px;position:absolute}.chart-tooltip-content{z-index:100;background:var(--color-bg-0,#fff);border:1px solid var(--color-border,#e5e7eb);font-size:var(--font-size-sm,.875rem);pointer-events:none;border-radius:.375em;padding:.5em .75em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.TableOuter[data-v-505e2187]{display:inline-block;position:relative}.TableOuter.has-menu[data-v-505e2187]{margin-top:32px}.TableOuter[data-v-505e2187] .chart-menu-trigger-area{top:-32px;right:0}.TableOuter[data-v-505e2187]:hover .chart-menu-button{opacity:1}.TableWrapper[data-v-505e2187]{font-size:var(--font-size-sm);overflow-x:auto}.Table[data-v-505e2187]{border-collapse:collapse;font-variant-numeric:tabular-nums;border:1px solid var(--color-border);margin:0;display:table}.Table tr[data-v-505e2187],.Table th[data-v-505e2187],.Table td[data-v-505e2187]{background:0 0;border:none}.Table th[data-v-505e2187],.Table td[data-v-505e2187]{white-space:nowrap;padding:.75em 1.25em}.Table th[data-v-505e2187]{border-bottom:1px solid var(--color-border-header);font-weight:600;position:sticky;top:0}.Table tbody td[data-v-505e2187]{border-bottom:1px solid var(--color-border)}.Table tbody tr:last-child td[data-v-505e2187]{border-bottom:none}.data-table-download-link[data-v-505e2187]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}
 /*$vite$:1*/

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { default as LineChart, type LineChartData, type Series, type Area, type AreaSection, } from './LineChart/LineChart';
+export { default as BarChart, type BarChartData, type BarSeries, } from './BarChart/BarChart';
 export { default as ChoroplethMap, type GeoType, type StateData, type ChoroplethColorScale, type ThresholdStop, type CategoricalStop, } from './ChoroplethMap/ChoroplethMap';
 export { default as ChartTooltip } from './ChartTooltip/ChartTooltip';
 export { default as DataTable, type TableData, type TableRecord, type ColumnAlign, type ColumnConfig, type ColumnWidth, } from './DataTable/DataTable';