hazo_dataviz 0.3.0

package/dist/schema/query.js

@@ -0,0 +1,37 @@
+import { z } from 'zod';
+import { fromZodValidation } from 'hazo_core';
+import { AggSchema, TimeGrainSchema } from './descriptor.js';
+export const FilterOpSchema = z.enum([
+    'eq', 'neq', 'in', 'gt', 'gte', 'lt', 'lte', 'between', 'is_null',
+]);
+export const MeasureRefSchema = z.object({
+    field: z.string().min(1),
+    agg: AggSchema.optional(),
+});
+export const FilterSchema = z.object({
+    field: z.string().min(1),
+    op: FilterOpSchema,
+    value: z.unknown(),
+});
+export const SortSchema = z.object({
+    field: z.string().min(1),
+    dir: z.enum(['asc', 'desc']),
+});
+export const QuerySchema = z.object({
+    measures: z.array(MeasureRefSchema),
+    dimensions: z.array(z.string()),
+    filters: z.array(FilterSchema).optional(),
+    timeGrain: TimeGrainSchema.optional(),
+    sort: z.array(SortSchema).optional(),
+    limit: z.number().int().positive().optional(),
+}).refine((q) => q.measures.length > 0 || q.dimensions.length > 0, { message: 'Query must have at least one measure or dimension' });
+export function parseQuery(input) {
+    const result = QuerySchema.safeParse(input);
+    if (!result.success) {
+        throw fromZodValidation(result.error, {
+            pkg: 'hazo_dataviz',
+            code: 'HAZO_DATAVIZ_INVALID_QUERY',
+        });
+    }
+    return result.data;
+}

package/dist/testing/fixtures.d.ts

@@ -0,0 +1,163 @@
+export declare const pricesDescriptor: {
+    name: string;
+    version: string;
+    grain: string[];
+    fields: Record<string, {
+        role: "measure";
+        agg: "sum" | "avg" | "min" | "max" | "last" | "count";
+        format?: {
+            kind: "currency";
+            ccy: string;
+        } | {
+            kind: "percent";
+        } | {
+            kind: "number";
+            decimals?: number | undefined;
+        } | {
+            kind: "compact";
+        } | {
+            kind: "date";
+            dateFormat?: string | undefined;
+        } | undefined;
+    } | {
+        role: "dimension";
+        type: "category" | "time";
+        timeGrains?: ("day" | "week" | "month" | "quarter" | "year")[] | undefined;
+        format?: {
+            kind: "currency";
+            ccy: string;
+        } | {
+            kind: "percent";
+        } | {
+            kind: "number";
+            decimals?: number | undefined;
+        } | {
+            kind: "compact";
+        } | {
+            kind: "date";
+            dateFormat?: string | undefined;
+        } | undefined;
+    }>;
+    defaults?: {
+        measures?: string[] | undefined;
+        dimensions?: string[] | undefined;
+        split?: string | undefined;
+        viz?: string | undefined;
+    } | undefined;
+    joinable?: {
+        key: string;
+        with?: string | undefined;
+    }[] | undefined;
+};
+export declare const pricesRows: Record<string, unknown>[];
+export declare const sectorDescriptor: {
+    name: string;
+    version: string;
+    grain: string[];
+    fields: Record<string, {
+        role: "measure";
+        agg: "sum" | "avg" | "min" | "max" | "last" | "count";
+        format?: {
+            kind: "currency";
+            ccy: string;
+        } | {
+            kind: "percent";
+        } | {
+            kind: "number";
+            decimals?: number | undefined;
+        } | {
+            kind: "compact";
+        } | {
+            kind: "date";
+            dateFormat?: string | undefined;
+        } | undefined;
+    } | {
+        role: "dimension";
+        type: "category" | "time";
+        timeGrains?: ("day" | "week" | "month" | "quarter" | "year")[] | undefined;
+        format?: {
+            kind: "currency";
+            ccy: string;
+        } | {
+            kind: "percent";
+        } | {
+            kind: "number";
+            decimals?: number | undefined;
+        } | {
+            kind: "compact";
+        } | {
+            kind: "date";
+            dateFormat?: string | undefined;
+        } | undefined;
+    }>;
+    defaults?: {
+        measures?: string[] | undefined;
+        dimensions?: string[] | undefined;
+        split?: string | undefined;
+        viz?: string | undefined;
+    } | undefined;
+    joinable?: {
+        key: string;
+        with?: string | undefined;
+    }[] | undefined;
+};
+export declare const sectorRows: Record<string, unknown>[];
+export declare const sparseDescriptor: {
+    name: string;
+    version: string;
+    grain: string[];
+    fields: Record<string, {
+        role: "measure";
+        agg: "sum" | "avg" | "min" | "max" | "last" | "count";
+        format?: {
+            kind: "currency";
+            ccy: string;
+        } | {
+            kind: "percent";
+        } | {
+            kind: "number";
+            decimals?: number | undefined;
+        } | {
+            kind: "compact";
+        } | {
+            kind: "date";
+            dateFormat?: string | undefined;
+        } | undefined;
+    } | {
+        role: "dimension";
+        type: "category" | "time";
+        timeGrains?: ("day" | "week" | "month" | "quarter" | "year")[] | undefined;
+        format?: {
+            kind: "currency";
+            ccy: string;
+        } | {
+            kind: "percent";
+        } | {
+            kind: "number";
+            decimals?: number | undefined;
+        } | {
+            kind: "compact";
+        } | {
+            kind: "date";
+            dateFormat?: string | undefined;
+        } | undefined;
+    }>;
+    defaults?: {
+        measures?: string[] | undefined;
+        dimensions?: string[] | undefined;
+        split?: string | undefined;
+        viz?: string | undefined;
+    } | undefined;
+    joinable?: {
+        key: string;
+        with?: string | undefined;
+    }[] | undefined;
+};
+export declare const sparseRows: Record<string, unknown>[];
+export declare const badDescriptorInput: {
+    name: string;
+    version: string;
+    grain: never[];
+    fields: {};
+};
+//# sourceMappingURL=fixtures.d.ts.map

package/dist/testing/fixtures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fixtures.d.ts","sourceRoot":"","sources":["../../src/testing/fixtures.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAW3B,CAAC;AAEH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAQ/C,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQ3B,CAAC;AAEH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAI/C,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAS3B,CAAC;AAEH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAK/C,CAAC;AAGF,eAAO,MAAM,kBAAkB;;;;;CAK9B,CAAC"}

package/dist/testing/fixtures.js

@@ -0,0 +1,59 @@
+import { parseDescriptor } from '../schema/descriptor.js';
+export const pricesDescriptor = parseDescriptor({
+    name: 'prices',
+    version: '1',
+    grain: ['date', 'symbol'],
+    fields: {
+        date: { role: 'dimension', type: 'time', timeGrains: ['day', 'week', 'month', 'quarter', 'year'] },
+        symbol: { role: 'dimension', type: 'category' },
+        close: { role: 'measure', agg: 'last', format: { kind: 'number', decimals: 2 } },
+        volume: { role: 'measure', agg: 'sum' },
+    },
+    defaults: { measures: ['close'], dimensions: ['date'], split: 'symbol' },
+});
+export const pricesRows = [
+    { date: '2024-01-01', symbol: 'AAPL', close: 185, volume: 1000 },
+    { date: '2024-01-02', symbol: 'AAPL', close: 190, volume: 1200 },
+    { date: '2024-01-03', symbol: 'AAPL', close: 188, volume: 900 },
+    { date: '2024-01-01', symbol: 'MSFT', close: 370, volume: 800 },
+    { date: '2024-01-02', symbol: 'MSFT', close: 375, volume: 850 },
+    { date: '2024-02-01', symbol: 'AAPL', close: 192, volume: 1100 },
+    { date: '2024-02-01', symbol: 'MSFT', close: 380, volume: 900 },
+];
+export const sectorDescriptor = parseDescriptor({
+    name: 'sector_breakdown',
+    version: '1',
+    grain: ['sector'],
+    fields: {
+        sector: { role: 'dimension', type: 'category' },
+        revenue: { role: 'measure', agg: 'sum', format: { kind: 'currency', ccy: 'USD' } },
+    },
+});
+export const sectorRows = [
+    { sector: 'Tech', revenue: 100 },
+    { sector: 'Tech', revenue: 200 },
+    { sector: 'Finance', revenue: 150 },
+];
+export const sparseDescriptor = parseDescriptor({
+    name: 'sparse',
+    version: '1',
+    grain: ['id'],
+    fields: {
+        category: { role: 'dimension', type: 'category' },
+        value: { role: 'measure', agg: 'sum' },
+        other: { role: 'measure', agg: 'avg' },
+    },
+});
+export const sparseRows = [
+    { category: 'A', value: 10, other: null },
+    { category: 'A', value: null, other: 5 },
+    { category: 'B', value: null, other: null },
+    { category: 'A', value: 20, other: 15 },
+];
+// bad_descriptor: fails parseDescriptor (no fields, empty grain)
+export const badDescriptorInput = {
+    name: 'bad',
+    version: '1',
+    grain: [], // must have at least 1
+    fields: {},
+};

package/dist/testing/index.d.ts

@@ -0,0 +1,3 @@
+export { pricesDescriptor, pricesRows, sectorDescriptor, sectorRows, sparseDescriptor, sparseRows, badDescriptorInput, } from './fixtures.js';
+export { createInMemoryRunner } from '../lib/runners/in_memory.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/testing/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/testing/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,kBAAkB,GACnB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/testing/index.js

@@ -0,0 +1,2 @@
+export { pricesDescriptor, pricesRows, sectorDescriptor, sectorRows, sparseDescriptor, sparseRows, badDescriptorInput, } from './fixtures.js';
+export { createInMemoryRunner } from '../lib/runners/in_memory.js';

package/dist/types/index.d.ts

@@ -0,0 +1,62 @@
+import type * as React from 'react';
+import type { Agg, Format, TimeGrain, DatasetDescriptor } from '../schema/descriptor.js';
+import type { Query } from '../schema/query.js';
+/** One series value; null is a gap the chart skips. */
+export type ChartDataPoint = number | null;
+/** Ordered series for a single line. */
+export type ChartDataSeries = ChartDataPoint[];
+/** Multi-line series with its own color + label. */
+export interface MultiSeries {
+    label: string;
+    color: string;
+    data: ChartDataSeries;
+}
+export type { Agg, Format, TimeGrain, Query };
+export interface Column {
+    key: string;
+    role: 'measure' | 'dimension';
+    label: string;
+    format?: Format;
+    agg?: Agg;
+}
+export interface Result {
+    rows: Record<string, unknown>[];
+    columns: Column[];
+    query: Query;
+}
+export interface Encoding {
+    x: string;
+    series?: string;
+    y: string[];
+}
+export type QueryRunner = (query: Query) => Promise<Result>;
+export interface VisualizerOpts {
+    width?: number;
+    height?: number;
+    colors?: string[];
+    showLegend?: boolean;
+    showTooltip?: boolean;
+}
+export interface Visualizer {
+    id: 'line' | 'bar' | 'stacked_bar' | 'area' | 'table' | 'single_stat' | (string & {});
+    label: string;
+    /** 0 = cannot render; higher = better fit. Pure, no React. */
+    accepts(descriptor: DatasetDescriptor, query: Query, result?: Result): number;
+    /** client-only React renderer */
+    render(result: Result, encoding: Encoding, opts?: VisualizerOpts): React.ReactElement;
+}
+export interface PickerMeasure {
+    field: string;
+    aggs: Agg[];
+}
+export interface PickerDimension {
+    field: string;
+    type: 'category' | 'time';
+    timeGrains?: TimeGrain[];
+}
+export interface PickerOptions {
+    measures: PickerMeasure[];
+    dimensions: PickerDimension[];
+    filterableFields: string[];
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAMhD,uDAAuD;AACvD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,IAAI,CAAC;AAC3C,wCAAwC;AACxC,MAAM,MAAM,eAAe,GAAG,cAAc,EAAE,CAAC;AAC/C,oDAAoD;AACpD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,YAAY,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;AAE9C,MAAM,WAAW,MAAM;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,SAAS,GAAG,WAAW,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC;CACX;AAED,MAAM,WAAW,MAAM;IACrB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC;CACd;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,EAAE,MAAM,EAAE,CAAC;CACb;AAED,MAAM,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;AAE5D,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,GAAG,KAAK,GAAG,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,aAAa,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACtF,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,OAAO,CAAC,UAAU,EAAE,iBAAiB,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9E,iCAAiC;IACjC,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,cAAc,GAAG,KAAK,CAAC,YAAY,CAAC;CACvF;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,GAAG,EAAE,CAAC;CACb;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,UAAU,GAAG,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,gBAAgB,EAAE,MAAM,EAAE,CAAC;CAC5B"}

package/dist/types/index.js

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

package/dist/visualizers/area.d.ts

@@ -0,0 +1,3 @@
+import type { Visualizer } from '../types/index.js';
+export declare const area: Visualizer;
+//# sourceMappingURL=area.d.ts.map

package/dist/visualizers/area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"area.d.ts","sourceRoot":"","sources":["../../src/visualizers/area.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAoC,MAAM,mBAAmB,CAAC;AA+CtF,eAAO,MAAM,IAAI,EAAE,UAgFlB,CAAC"}

package/dist/visualizers/area.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from 'recharts';
+import { classifyShape } from '../lib/shape.js';
+import { pickColor } from './palette.js';
+import { makeFormatter, makeTooltip, EmptyState, axisProps, gridProps, legendProps, CHART_MARGIN, CHART_THEME, } from './chart_frame.js';
+function pivotData(result, encoding) {
+    if (!encoding.series) {
+        return { data: result.rows, seriesKeys: encoding.y };
+    }
+    const xKey = encoding.x;
+    const seriesKey = encoding.series;
+    const measureKey = encoding.y[0] ?? '';
+    const seriesValues = Array.from(new Set(result.rows.map((r) => String(r[seriesKey] ?? ''))));
+    const grouped = new Map();
+    for (const row of result.rows) {
+        const xVal = row[xKey];
+        if (!grouped.has(xVal)) {
+            grouped.set(xVal, { [xKey]: xVal });
+        }
+        const entry = grouped.get(xVal);
+        const sv = String(row[seriesKey] ?? '');
+        entry[sv] = row[measureKey];
+    }
+    return {
+        data: Array.from(grouped.values()),
+        seriesKeys: seriesValues,
+    };
+}
+export const area = {
+    id: 'area',
+    label: 'Area Chart',
+    accepts(descriptor, query) {
+        const shape = classifyShape(descriptor, query);
+        if (shape.temporalDims.length >= 1 && shape.measureCount >= 1)
+            return 0.5;
+        return 0;
+    },
+    render(result, encoding, opts) {
+        if (result.rows.length === 0)
+            return _jsx(EmptyState, {});
+        const xCol = result.columns.find((c) => c.key === encoding.x);
+        if (!xCol && encoding.x) {
+            if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+                console.warn(`[hazo_dataviz/area] encoding.x "${encoding.x}" not found in result.columns`);
+            }
+            return _jsx(EmptyState, {});
+        }
+        const { data, seriesKeys } = pivotData(result, encoding);
+        const xFormatter = makeFormatter(xCol);
+        const showLegend = opts?.showLegend ?? seriesKeys.length > 1;
+        const showTooltip = opts?.showTooltip ?? true;
+        const yCol = result.columns.find((c) => c.role === 'measure');
+        const yFormatter = makeFormatter(yCol);
+        const chartHeight = opts?.height ?? 300;
+        const chartWidth = opts?.width;
+        const chart = (_jsxs(AreaChart, { data: data, width: chartWidth, height: chartWidth !== undefined ? chartHeight : undefined, margin: CHART_MARGIN, children: [_jsx("defs", { children: seriesKeys.map((key, i) => {
+                        const color = pickColor(i, opts?.colors);
+                        return (_jsxs("linearGradient", { id: `hzdv-area-${i}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.34 }), _jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.02 })] }, key));
+                    }) }), _jsx(CartesianGrid, { ...gridProps }), _jsx(XAxis, { dataKey: encoding.x, tickFormatter: xFormatter, ...axisProps }), _jsx(YAxis, { tickFormatter: yFormatter, ...axisProps, width: 48 }), showTooltip && (_jsx(Tooltip, { cursor: { stroke: CHART_THEME.hairline, strokeWidth: 1.5 }, content: makeTooltip(xFormatter, yFormatter) })), showLegend && _jsx(Legend, { ...legendProps }), seriesKeys.map((key, i) => (_jsx(Area, { type: "monotone", dataKey: key, stroke: pickColor(i, opts?.colors), strokeWidth: CHART_THEME.strokeWidth, fill: `url(#hzdv-area-${i})`, activeDot: { r: 4, strokeWidth: 2, stroke: CHART_THEME.surface } }, key)))] }));
+        if (chartWidth !== undefined) {
+            return (_jsx("div", { style: { width: chartWidth, height: chartHeight, overflow: 'hidden' }, children: chart }));
+        }
+        return (_jsx(ResponsiveContainer, { width: "100%", height: chartHeight, children: chart }));
+    },
+};

package/dist/visualizers/bar.d.ts

@@ -0,0 +1,3 @@
+import type { Visualizer } from '../types/index.js';
+export declare const bar: Visualizer;
+//# sourceMappingURL=bar.d.ts.map

package/dist/visualizers/bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar.d.ts","sourceRoot":"","sources":["../../src/visualizers/bar.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAoC,MAAM,mBAAmB,CAAC;AAetF,eAAO,MAAM,GAAG,EAAE,UA+DjB,CAAC"}

package/dist/visualizers/bar.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from 'recharts';
+import { classifyShape } from '../lib/shape.js';
+import { pickColor } from './palette.js';
+import { makeFormatter, makeTooltip, EmptyState, axisProps, gridProps, legendProps, CHART_MARGIN, } from './chart_frame.js';
+export const bar = {
+    id: 'bar',
+    label: 'Bar Chart',
+    accepts(descriptor, query) {
+        const shape = classifyShape(descriptor, query);
+        if (shape.dimCount === 1 && shape.categoricalDims.length === 1 && shape.measureCount >= 1) {
+            return 0.9;
+        }
+        return 0;
+    },
+    render(result, encoding, opts) {
+        if (result.rows.length === 0)
+            return _jsx(EmptyState, {});
+        const xCol = result.columns.find((c) => c.key === encoding.x);
+        if (!xCol && encoding.x) {
+            if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+                console.warn(`[hazo_dataviz/bar] encoding.x "${encoding.x}" not found in result.columns`);
+            }
+            return _jsx(EmptyState, {});
+        }
+        const yKeys = encoding.y;
+        const xFormatter = makeFormatter(xCol);
+        const showLegend = opts?.showLegend ?? yKeys.length > 1;
+        const showTooltip = opts?.showTooltip ?? true;
+        const yCol = result.columns.find((c) => c.key === yKeys[0]);
+        const yFormatter = makeFormatter(yCol);
+        const chartHeight = opts?.height ?? 300;
+        const chartWidth = opts?.width;
+        const chart = (_jsxs(BarChart, { data: result.rows, width: chartWidth, height: chartWidth !== undefined ? chartHeight : undefined, margin: CHART_MARGIN, barCategoryGap: "28%", children: [_jsx(CartesianGrid, { ...gridProps }), _jsx(XAxis, { dataKey: encoding.x, tickFormatter: xFormatter, ...axisProps }), _jsx(YAxis, { tickFormatter: yFormatter, ...axisProps, width: 48 }), showTooltip && (_jsx(Tooltip, { cursor: { fill: 'rgba(47, 42, 37, 0.05)' }, content: makeTooltip(xFormatter, yFormatter) })), showLegend && _jsx(Legend, { ...legendProps }), yKeys.map((key, i) => (_jsx(Bar, { dataKey: key, fill: pickColor(i, opts?.colors), radius: [6, 6, 0, 0], maxBarSize: 64 }, key)))] }));
+        if (chartWidth !== undefined) {
+            return (_jsx("div", { style: { width: chartWidth, height: chartHeight, overflow: 'hidden' }, children: chart }));
+        }
+        return (_jsx(ResponsiveContainer, { width: "100%", height: chartHeight, children: chart }));
+    },
+};

package/dist/visualizers/builtins.d.ts

@@ -0,0 +1,3 @@
+import type { Visualizer } from '../types/index.js';
+export declare const builtinVisualizers: Visualizer[];
+//# sourceMappingURL=builtins.d.ts.map

package/dist/visualizers/builtins.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"builtins.d.ts","sourceRoot":"","sources":["../../src/visualizers/builtins.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD,eAAO,MAAM,kBAAkB,EAAE,UAAU,EAAqD,CAAC"}

package/dist/visualizers/builtins.js

@@ -0,0 +1,7 @@
+import { line } from './line.js';
+import { bar } from './bar.js';
+import { stackedBar } from './stacked_bar.js';
+import { area } from './area.js';
+import { table } from './table.js';
+import { singleStat } from './single_stat.js';
+export const builtinVisualizers = [line, bar, stackedBar, area, table, singleStat];

package/dist/visualizers/chart_frame.d.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import type { Column, VisualizerOpts } from '../types/index.js';
+/**
+ * "Studio" chart theme — a warm, editorial token set shared by every recharts
+ * visualizer so the package renders one coherent look out of the box.
+ *
+ * These are plain hex/number tokens (not Tailwind) on purpose: the charts are
+ * SVG and must look right in any consumer app regardless of its CSS pipeline.
+ * Font family is deliberately omitted so SVG text inherits the host page font.
+ */
+export declare const CHART_THEME: {
+    /** Primary text — warm near-black. */
+    readonly ink: "#2f2a25";
+    /** Axis ticks / secondary labels — warm grey. */
+    readonly muted: "#9a9087";
+    /** Hairline grid + axis lines — warm sand. */
+    readonly hairline: "#ece6dd";
+    /** Tooltip surface — warm white. */
+    readonly surface: "#fffdf9";
+    /** Tooltip / card border. */
+    readonly surfaceBorder: "#e7ddd0";
+    /** Base tick font size. */
+    readonly fontSize: 12;
+    /** Default series stroke width. */
+    readonly strokeWidth: 2.5;
+};
+/** Shared inner margin so axis labels never clip against a card edge. */
+export declare const CHART_MARGIN: {
+    readonly top: 12;
+    readonly right: 16;
+    readonly bottom: 4;
+    readonly left: 4;
+};
+/** Spread onto `<XAxis>` / `<YAxis>` for the Studio look (hairline, no tick marks). */
+export declare const axisProps: {
+    readonly tick: {
+        readonly fill: "#9a9087";
+        readonly fontSize: 12;
+    };
+    readonly axisLine: {
+        readonly stroke: "#ece6dd";
+    };
+    readonly tickLine: false;
+    readonly tickMargin: 8;
+};
+/** Spread onto `<CartesianGrid>` — horizontal hairlines only, no vertical clutter. */
+export declare const gridProps: {
+    readonly stroke: "#ece6dd";
+    readonly vertical: false;
+};
+/**
+ * Returns a recharts tick/value formatter for a given column.
+ * Uses formatValue when the column has a format, else a sane default.
+ */
+export declare function makeFormatter(column: Column | undefined): (v: unknown) => string;
+/**
+ * Returns the chart height to use. When opts has explicit height, use it;
+ * otherwise default to 300.
+ */
+export declare function resolveChartDimensions(opts: VisualizerOpts | undefined): {
+    width?: number;
+    height: number;
+};
+interface TooltipPayloadEntry {
+    name?: string | number;
+    value?: unknown;
+    color?: string;
+    dataKey?: string | number;
+}
+interface TooltipRenderProps {
+    active?: boolean;
+    payload?: TooltipPayloadEntry[];
+    label?: unknown;
+}
+/**
+ * Builds a recharts `content` renderer for `<Tooltip>` styled to match the
+ * Studio theme — a warm floating card with a colored swatch per series.
+ *
+ * @param labelFormatter formats the x value shown as the tooltip heading
+ * @param valueFormatter formats each series value
+ */
+export declare function makeTooltip(labelFormatter: (v: unknown) => string, valueFormatter: (v: unknown) => string): (props: TooltipRenderProps) => any;
+/** Props spread onto `<Legend>` for the Studio look. */
+export declare const legendProps: {
+    iconType: "circle";
+    wrapperStyle: {
+        fontSize: number;
+        color: "#9a9087";
+        paddingTop: number;
+    };
+};
+/**
+ * Empty state element returned when result.rows is empty.
+ */
+export declare function EmptyState(): React.ReactElement;
+export {};
+//# sourceMappingURL=chart_frame.d.ts.map

package/dist/visualizers/chart_frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart_frame.d.ts","sourceRoot":"","sources":["../../src/visualizers/chart_frame.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEhE;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW;IACtB,sCAAsC;;IAEtC,iDAAiD;;IAEjD,8CAA8C;;IAE9C,oCAAoC;;IAEpC,6BAA6B;;IAE7B,2BAA2B;;IAE3B,mCAAmC;;CAE3B,CAAC;AAEX,yEAAyE;AACzE,eAAO,MAAM,YAAY;;;;;CAAsD,CAAC;AAEhF,uFAAuF;AACvF,eAAO,MAAM,SAAS;;;;;;;;;;CAKZ,CAAC;AAEX,sFAAsF;AACtF,eAAO,MAAM,SAAS;;;CAGZ,CAAC;AAEX;;;GAGG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,CAAC,CAAC,EAAE,OAAO,KAAK,MAAM,CAYhF;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,cAAc,GAAG,SAAS,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAK3G;AAED,UAAU,mBAAmB;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAED,UAAU,kBAAkB;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;GAMG;AAMH,wBAAgB,WAAW,CACzB,cAAc,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,MAAM,EACtC,cAAc,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,MAAM,GACrC,CAAC,KAAK,EAAE,kBAAkB,KAAK,GAAG,CAqEpC;AAED,wDAAwD;AACxD,eAAO,MAAM,WAAW;;;;;;;CAOvB,CAAC;AAEF;;GAEG;AACH,wBAAgB,UAAU,IAAI,KAAK,CAAC,YAAY,CAqB/C"}