@sqlrooms/vega 0.24.21 → 0.24.22

package/dist/VegaChartToolResult.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VegaChartToolResult.d.ts","sourceRoot":"","sources":["../src/VegaChartToolResult.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,iBAAiB,EAAC,MAAM,YAAY,CAAC;AAG7C,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,iBAAiB,CAAC;CACjC,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,QAAQ,EACR,YAAY,GACb,EAAE,wBAAwB,2CAwB1B"}
+{"version":3,"file":"VegaChartToolResult.d.ts","sourceRoot":"","sources":["../src/VegaChartToolResult.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,iBAAiB,EAAC,MAAM,YAAY,CAAC;AAG7C,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,iBAAiB,CAAC;CACjC,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,QAAQ,EACR,YAAY,GACb,EAAE,wBAAwB,2CAgC1B"}

package/dist/VegaChartToolResult.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { QueryToolResult } from '@sqlrooms/ai';
+import { useSql } from '@sqlrooms/duckdb';
 import { cn } from '@sqlrooms/ui';
-import { Suspense } from 'react';
 import { VegaLiteChart } from './VegaLiteChart';
 /**
  * Renders a chart tool call with visualization using Vega-Lite
@@ -9,6 +9,7 @@ import { VegaLiteChart } from './VegaLiteChart';
  * @returns {JSX.Element} The rendered chart tool call
  */
 export function VegaChartToolResult({ className, sqlQuery, vegaLiteSpec, }) {
-    return (_jsx(_Fragment, { children: vegaLiteSpec && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(QueryToolResult, { title: "Query", sqlQuery: sqlQuery }), _jsx(Suspense, { fallback: _jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600" }) }), children: _jsx(VegaLiteChart, { className: cn('max-w-[600px]', className), aspectRatio: 16 / 9, sqlQuery: sqlQuery, spec: vegaLiteSpec }) })] })) }));
+    const result = useSql({ query: sqlQuery });
+    return (_jsx(_Fragment, { children: vegaLiteSpec && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(QueryToolResult, { title: "", arrowTable: result.data?.arrowTable, sqlQuery: sqlQuery }), result.error ? (_jsx("div", { className: "whitespace-pre-wrap font-mono text-sm text-red-500", children: result.error?.message })) : result.isLoading ? (_jsxs("div", { className: "text-muted-foreground align-center flex gap-2 px-2", children: [_jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600" }), "Running query for chart data\u2026"] })) : (_jsx(VegaLiteChart.ArrowChart, { className: cn('max-w-[600px]', className), aspectRatio: 16 / 9, arrowTable: result.data?.arrowTable, spec: vegaLiteSpec }))] })) }));
 }
 //# sourceMappingURL=VegaChartToolResult.js.map

package/dist/VegaChartToolResult.js.map

@@ -1 +1 @@
-{"version":3,"file":"VegaChartToolResult.js","sourceRoot":"","sources":["../src/VegaChartToolResult.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAChC,OAAO,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAS9C;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,SAAS,EACT,QAAQ,EACR,YAAY,GACa;IACzB,OAAO,CACL,4BACG,YAAY,IAAI,CACf,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,eAAe,IAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAE,QAAQ,GAAI,EACrD,KAAC,QAAQ,IACP,QAAQ,EACN,cAAK,SAAS,EAAC,gDAAgD,YAC7D,cAAK,SAAS,EAAC,8EAA8E,GAAO,GAChG,YAGR,KAAC,aAAa,IACZ,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EACzC,WAAW,EAAE,EAAE,GAAG,CAAC,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,GAClB,GACO,IACP,CACP,GACA,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import {QueryToolResult} from '@sqlrooms/ai';\nimport {cn} from '@sqlrooms/ui';\nimport {Suspense} from 'react';\nimport {VisualizationSpec} from 'react-vega';\nimport {VegaLiteChart} from './VegaLiteChart';\n\ntype VegaChartToolResultProps = {\n  className?: string;\n  reasoning: string;\n  sqlQuery: string;\n  vegaLiteSpec: VisualizationSpec;\n};\n\n/**\n * Renders a chart tool call with visualization using Vega-Lite\n * @param {VegaChartToolResultProps} props - The component props\n * @returns {JSX.Element} The rendered chart tool call\n */\nexport function VegaChartToolResult({\n  className,\n  sqlQuery,\n  vegaLiteSpec,\n}: VegaChartToolResultProps) {\n  return (\n    <>\n      {vegaLiteSpec && (\n        <div className=\"flex flex-col gap-2\">\n          <QueryToolResult title=\"Query\" sqlQuery={sqlQuery} />\n          <Suspense\n            fallback={\n              <div className=\"flex h-full w-full items-center justify-center\">\n                <div className=\"h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600\"></div>\n              </div>\n            }\n          >\n            <VegaLiteChart\n              className={cn('max-w-[600px]', className)}\n              aspectRatio={16 / 9}\n              sqlQuery={sqlQuery}\n              spec={vegaLiteSpec}\n            />\n          </Suspense>\n        </div>\n      )}\n    </>\n  );\n}\n"]}
+{"version":3,"file":"VegaChartToolResult.js","sourceRoot":"","sources":["../src/VegaChartToolResult.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAC,MAAM,EAAC,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAGhC,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAS9C;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,SAAS,EACT,QAAQ,EACR,YAAY,GACa;IACzB,MAAM,MAAM,GAAG,MAAM,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,CAAC,CAAC;IACzC,OAAO,CACL,4BACG,YAAY,IAAI,CACf,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,eAAe,IACd,KAAK,EAAC,EAAE,EACR,UAAU,EAAE,MAAM,CAAC,IAAI,EAAE,UAAU,EACnC,QAAQ,EAAE,QAAQ,GAClB,EACD,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CACd,cAAK,SAAS,EAAC,oDAAoD,YAChE,MAAM,CAAC,KAAK,EAAE,OAAO,GAClB,CACP,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CACrB,eAAK,SAAS,EAAC,oDAAoD,aACjE,cAAK,SAAS,EAAC,8EAA8E,GAAO,0CAEhG,CACP,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,CAAC,UAAU,IACvB,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EACzC,WAAW,EAAE,EAAE,GAAG,CAAC,EACnB,UAAU,EAAE,MAAM,CAAC,IAAI,EAAE,UAAU,EACnC,IAAI,EAAE,YAAY,GAClB,CACH,IACG,CACP,GACA,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import {QueryToolResult} from '@sqlrooms/ai';\nimport {useSql} from '@sqlrooms/duckdb';\nimport {cn} from '@sqlrooms/ui';\nimport {Suspense} from 'react';\nimport {VisualizationSpec} from 'react-vega';\nimport {VegaLiteChart} from './VegaLiteChart';\n\ntype VegaChartToolResultProps = {\n  className?: string;\n  reasoning: string;\n  sqlQuery: string;\n  vegaLiteSpec: VisualizationSpec;\n};\n\n/**\n * Renders a chart tool call with visualization using Vega-Lite\n * @param {VegaChartToolResultProps} props - The component props\n * @returns {JSX.Element} The rendered chart tool call\n */\nexport function VegaChartToolResult({\n  className,\n  sqlQuery,\n  vegaLiteSpec,\n}: VegaChartToolResultProps) {\n  const result = useSql({query: sqlQuery});\n  return (\n    <>\n      {vegaLiteSpec && (\n        <div className=\"flex flex-col gap-2\">\n          <QueryToolResult\n            title=\"\"\n            arrowTable={result.data?.arrowTable}\n            sqlQuery={sqlQuery}\n          />\n          {result.error ? (\n            <div className=\"whitespace-pre-wrap font-mono text-sm text-red-500\">\n              {result.error?.message}\n            </div>\n          ) : result.isLoading ? (\n            <div className=\"text-muted-foreground align-center flex gap-2 px-2\">\n              <div className=\"h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600\"></div>\n              Running query for chart data…\n            </div>\n          ) : (\n            <VegaLiteChart.ArrowChart\n              className={cn('max-w-[600px]', className)}\n              aspectRatio={16 / 9}\n              arrowTable={result.data?.arrowTable}\n              spec={vegaLiteSpec}\n            />\n          )}\n        </div>\n      )}\n    </>\n  );\n}\n"]}

package/dist/VegaLiteChart.d.ts

@@ -1,60 +1,40 @@
+import * as arrow from 'apache-arrow';
 import { VisualizationSpec } from 'react-vega';
-/**
- * A component that renders a Vega-Lite chart with SQL data and responsive sizing.
- *
- * The chart can be sized in multiple ways:
- * - Fixed dimensions: Provide both width and height as numbers
- * - Fixed width, proportional height: Provide width as number, height as 'auto'
- * - Fixed height, proportional width: Provide height as number, width as 'auto'
- * - Fully responsive: Leave both as 'auto' (default), chart will fill container while maintaining aspect ratio
- *
- * @param props - The component props
- * @param {number | 'auto'} [props.width='auto'] - The chart width in pixels, or 'auto' to use container width
- * @param {number | 'auto'} [props.height='auto'] - The chart height in pixels, or 'auto' to calculate from aspect ratio
- * @param {number} [props.aspectRatio=3/2] - The desired width-to-height ratio when dimensions are auto-calculated
- * @param {string} props.sqlQuery - The SQL query to fetch data for the chart
- * @param {string | VisualizationSpec} props.spec - The Vega-Lite specification for the chart.
- *   Can be either a JSON string or a VisualizationSpec object.
- *   The data and size properties will be overridden by the component.
- *
- * @returns The rendered chart component
- *
- * @example
- * // Fixed size chart
- * <VegaLiteChart
- *   width={600}
- *   height={400}
- *   sqlQuery="SELECT category, count(*) as count FROM sales GROUP BY category"
- *   spec={{
- *     mark: 'bar',
- *     encoding: {
- *       x: {field: 'category', type: 'nominal'},
- *       y: {field: 'count', type: 'quantitative'}
- *     }
- *   }}
- * />
- *
- * @example
- * // Responsive chart with 16:9 aspect ratio
- * <VegaLiteChart
- *   className="max-w-[600px]"
- *   aspectRatio={16/9}
- *   sqlQuery="SELECT date, value FROM metrics"
- *   spec={{
- *     mark: 'line',
- *     encoding: {
- *       x: {field: 'date', type: 'temporal'},
- *       y: {field: 'value', type: 'quantitative'}
- *     }
- *   }}
- * />
- */
-export declare const VegaLiteChart: React.FC<{
+export declare const ArrowChart: React.FC<{
     className?: string;
     width?: number | 'auto';
     height?: number | 'auto';
     aspectRatio?: number;
-    sqlQuery: string;
     spec: string | VisualizationSpec;
+    arrowTable: arrow.Table | undefined;
+    dataName?: string;
 }>;
+export declare const VegaLiteChart: import("react").FC<{
+    className?: string;
+    width?: number | "auto";
+    height?: number | "auto";
+    aspectRatio?: number;
+    sqlQuery: string;
+    spec: string | VisualizationSpec;
+    dataName?: string;
+}> & {
+    SqlChart: import("react").FC<{
+        className?: string;
+        width?: number | "auto";
+        height?: number | "auto";
+        aspectRatio?: number;
+        sqlQuery: string;
+        spec: string | VisualizationSpec;
+        dataName?: string;
+    }>;
+    ArrowChart: import("react").FC<{
+        className?: string;
+        width?: number | "auto";
+        height?: number | "auto";
+        aspectRatio?: number;
+        spec: string | VisualizationSpec;
+        arrowTable: arrow.Table | undefined;
+        dataName?: string;
+    }>;
+};
 //# sourceMappingURL=VegaLiteChart.d.ts.map

package/dist/VegaLiteChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VegaLiteChart.d.ts","sourceRoot":"","sources":["../src/VegaLiteChart.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAW,iBAAiB,EAAC,MAAM,YAAY,CAAC;AAIvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,GAAG,iBAAiB,CAAC;CAClC,CAuDA,CAAC"}
+{"version":3,"file":"VegaLiteChart.d.ts","sourceRoot":"","sources":["../src/VegaLiteChart.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAW,iBAAiB,EAAC,MAAM,YAAY,CAAC;AA2HvD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,GAAG,iBAAiB,CAAC;IACjC,UAAU,EAAE,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAwEA,CAAC;AAEF,eAAO,MAAM,aAAa;gBAtJZ,MAAM;YACV,MAAM,GAAG,MAAM;aACd,MAAM,GAAG,MAAM;kBACV,MAAM;cACV,MAAM;UACV,MAAM,GAAG,iBAAiB;eACrB,MAAM;;;oBANL,MAAM;gBACV,MAAM,GAAG,MAAM;iBACd,MAAM,GAAG,MAAM;sBACV,MAAM;kBACV,MAAM;cACV,MAAM,GAAG,iBAAiB;mBACrB,MAAM;;;oBA+DL,MAAM;gBACV,MAAM,GAAG,MAAM;iBACd,MAAM,GAAG,MAAM;sBACV,MAAM;cACd,MAAM,GAAG,iBAAiB;oBACpB,KAAK,CAAC,KAAK,GAAG,SAAS;mBACxB,MAAM;;CA8EjB,CAAC"}

package/dist/VegaLiteChart.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useSql } from '@sqlrooms/duckdb';
-import { AspectRatio, cn, useAspectRatioDimensions } from '@sqlrooms/ui';
+import { ToolErrorMessage } from '@sqlrooms/ai';
+import { arrowTableToJson, useSql } from '@sqlrooms/duckdb';
+import { AspectRatio, cn, useAspectRatioDimensions, } from '@sqlrooms/ui';
 import { safeJsonParse } from '@sqlrooms/utils';
-import { useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { VegaLite } from 'react-vega';
-const DATA_NAME = 'queryResult';
+const DEFAULT_DATA_NAME = 'queryResult';
 /**
  * A component that renders a Vega-Lite chart with SQL data and responsive sizing.
  *
@@ -55,7 +56,7 @@ const DATA_NAME = 'queryResult';
  *   }}
  * />
  */
-export const VegaLiteChart = ({ className, width = 'auto', height = 'auto', aspectRatio = 3 / 2, sqlQuery, spec, }) => {
+const VegaLiteSqlChart = ({ className, width = 'auto', height = 'auto', aspectRatio = 3 / 2, sqlQuery, spec, dataName = DEFAULT_DATA_NAME, }) => {
     const containerRef = useRef(null);
     const dimensions = useAspectRatioDimensions({
         containerRef,
@@ -69,7 +70,7 @@ export const VegaLiteChart = ({ className, width = 'auto', height = 'auto', aspe
             return null;
         return {
             ...parsed,
-            data: { name: DATA_NAME },
+            data: { name: dataName },
             width: dimensions.width,
             height: dimensions.height,
             autosize: {
@@ -79,11 +80,50 @@ export const VegaLiteChart = ({ className, width = 'auto', height = 'auto', aspe
         };
     }, [spec, dimensions]);
     const result = useSql({ query: sqlQuery });
+    const arrowTable = result.data?.arrowTable;
+    return (_jsxs("div", { ref: containerRef, className: cn('flex h-full w-full flex-col gap-2 overflow-hidden', className), children: [result.error && (_jsx("div", { className: "whitespace-pre-wrap font-mono text-sm text-red-500", children: result.error.message })), result.isLoading ? (_jsxs("div", { className: "text-muted-foreground align-center flex gap-2 px-2", children: [_jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600" }), "Running query for chart data\u2026"] })) : (refinedSpec &&
+                arrowTable && _jsx(ArrowChart, { spec: refinedSpec, arrowTable: arrowTable }))] }));
+};
+export const ArrowChart = ({ className, width = 'auto', height = 'auto', aspectRatio = 3 / 2, spec, arrowTable, dataName = DEFAULT_DATA_NAME, }) => {
+    const containerRef = useRef(null);
+    const [chartError, setChartError] = useState(null);
+    const dimensions = useAspectRatioDimensions({
+        containerRef,
+        width,
+        height,
+        aspectRatio,
+    });
+    const refinedSpec = useMemo(() => {
+        const parsed = typeof spec === 'string' ? safeJsonParse(spec) : spec;
+        if (!parsed) {
+            setChartError(new Error('Invalid Vega-Lite specification'));
+            return null;
+        }
+        return {
+            ...parsed,
+            data: { name: dataName },
+            width: dimensions.width,
+            height: dimensions.height,
+            autosize: {
+                type: 'fit',
+                contains: 'padding',
+            },
+        };
+    }, [spec, dimensions]);
     const data = useMemo(() => {
-        if (!result.data)
+        if (!arrowTable)
             return null;
-        return { [DATA_NAME]: result.data.toArray() };
-    }, [result.data]);
-    return (_jsxs("div", { ref: containerRef, className: cn('flex h-full w-full flex-col gap-2 overflow-hidden', className), children: [result.error && (_jsx("div", { className: "whitespace-pre-wrap font-mono text-sm text-red-500", children: result.error.message })), _jsx(AspectRatio, { ratio: aspectRatio, children: refinedSpec && data && _jsx(VegaLite, { spec: refinedSpec, data: data }) })] }));
+        return { queryResult: arrowTableToJson(arrowTable) };
+    }, [arrowTable]);
+    // Reset chart error whenever spec or data changes
+    useEffect(() => {
+        setChartError(null);
+    }, [spec, data]);
+    return (_jsx("div", { ref: containerRef, className: cn('flex h-full w-full flex-col gap-2 overflow-hidden', className), children: chartError ? (_jsx(ToolErrorMessage, { error: chartError, triggerLabel: "Chart rendering failed", title: "Chart error", align: "start", details: spec })) : (refinedSpec &&
+            data && (_jsx(AspectRatio, { ratio: aspectRatio, children: _jsx(VegaLite, { spec: refinedSpec, data: data, onError: setChartError }) }))) }));
 };
+export const VegaLiteChart = Object.assign(VegaLiteSqlChart, {
+    SqlChart: VegaLiteSqlChart,
+    ArrowChart: ArrowChart,
+});
 //# sourceMappingURL=VegaLiteChart.js.map

package/dist/VegaLiteChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"VegaLiteChart.js","sourceRoot":"","sources":["../src/VegaLiteChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAC,WAAW,EAAE,EAAE,EAAE,wBAAwB,EAAC,MAAM,cAAc,CAAC;AACvE,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,OAAO,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAoB,MAAM,YAAY,CAAC;AAEvD,MAAM,SAAS,GAAG,aAAa,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,MAAM,CAAC,MAAM,aAAa,GAOrB,CAAC,EACJ,SAAS,EACT,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,MAAM,EACf,WAAW,GAAG,CAAC,GAAG,CAAC,EACnB,QAAQ,EACR,IAAI,GACL,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,wBAAwB,CAAC;QAC1C,YAAY;QACZ,KAAK;QACL,MAAM;QACN,WAAW;KACZ,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,MAAM,MAAM,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACrE,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC;QACzB,OAAO;YACL,GAAG,MAAM;YACT,IAAI,EAAE,EAAC,IAAI,EAAE,SAAS,EAAC;YACvB,KAAK,EAAE,UAAU,CAAC,KAAK;YACvB,MAAM,EAAE,UAAU,CAAC,MAAM;YACzB,QAAQ,EAAE;gBACR,IAAI,EAAE,KAAK;gBACX,QAAQ,EAAE,SAAS;aACpB;SACmB,CAAC;IACzB,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvB,MAAM,MAAM,GAAG,MAAM,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,CAAC,CAAC;IACzC,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,MAAM,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC;QAC9B,OAAO,EAAC,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,EAAC,CAAC;IAC9C,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,eACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CACX,mDAAmD,EACnD,SAAS,CACV,aAEA,MAAM,CAAC,KAAK,IAAI,CACf,cAAK,SAAS,EAAC,oDAAoD,YAChE,MAAM,CAAC,KAAK,CAAC,OAAO,GACjB,CACP,EACD,KAAC,WAAW,IAAC,KAAK,EAAE,WAAW,YAC5B,WAAW,IAAI,IAAI,IAAI,KAAC,QAAQ,IAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAI,GACvD,IACV,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {useSql} from '@sqlrooms/duckdb';\nimport {AspectRatio, cn, useAspectRatioDimensions} from '@sqlrooms/ui';\nimport {safeJsonParse} from '@sqlrooms/utils';\nimport {useMemo, useRef} from 'react';\nimport {VegaLite, VisualizationSpec} from 'react-vega';\n\nconst DATA_NAME = 'queryResult';\n\n/**\n * A component that renders a Vega-Lite chart with SQL data and responsive sizing.\n *\n * The chart can be sized in multiple ways:\n * - Fixed dimensions: Provide both width and height as numbers\n * - Fixed width, proportional height: Provide width as number, height as 'auto'\n * - Fixed height, proportional width: Provide height as number, width as 'auto'\n * - Fully responsive: Leave both as 'auto' (default), chart will fill container while maintaining aspect ratio\n *\n * @param props - The component props\n * @param {number | 'auto'} [props.width='auto'] - The chart width in pixels, or 'auto' to use container width\n * @param {number | 'auto'} [props.height='auto'] - The chart height in pixels, or 'auto' to calculate from aspect ratio\n * @param {number} [props.aspectRatio=3/2] - The desired width-to-height ratio when dimensions are auto-calculated\n * @param {string} props.sqlQuery - The SQL query to fetch data for the chart\n * @param {string | VisualizationSpec} props.spec - The Vega-Lite specification for the chart.\n *   Can be either a JSON string or a VisualizationSpec object.\n *   The data and size properties will be overridden by the component.\n *\n * @returns The rendered chart component\n *\n * @example\n * // Fixed size chart\n * <VegaLiteChart\n *   width={600}\n *   height={400}\n *   sqlQuery=\"SELECT category, count(*) as count FROM sales GROUP BY category\"\n *   spec={{\n *     mark: 'bar',\n *     encoding: {\n *       x: {field: 'category', type: 'nominal'},\n *       y: {field: 'count', type: 'quantitative'}\n *     }\n *   }}\n * />\n *\n * @example\n * // Responsive chart with 16:9 aspect ratio\n * <VegaLiteChart\n *   className=\"max-w-[600px]\"\n *   aspectRatio={16/9}\n *   sqlQuery=\"SELECT date, value FROM metrics\"\n *   spec={{\n *     mark: 'line',\n *     encoding: {\n *       x: {field: 'date', type: 'temporal'},\n *       y: {field: 'value', type: 'quantitative'}\n *     }\n *   }}\n * />\n */\nexport const VegaLiteChart: React.FC<{\n  className?: string;\n  width?: number | 'auto';\n  height?: number | 'auto';\n  aspectRatio?: number;\n  sqlQuery: string;\n  spec: string | VisualizationSpec;\n}> = ({\n  className,\n  width = 'auto',\n  height = 'auto',\n  aspectRatio = 3 / 2,\n  sqlQuery,\n  spec,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const dimensions = useAspectRatioDimensions({\n    containerRef,\n    width,\n    height,\n    aspectRatio,\n  });\n\n  const refinedSpec = useMemo(() => {\n    const parsed = typeof spec === 'string' ? safeJsonParse(spec) : spec;\n    if (!parsed) return null;\n    return {\n      ...parsed,\n      data: {name: DATA_NAME},\n      width: dimensions.width,\n      height: dimensions.height,\n      autosize: {\n        type: 'fit',\n        contains: 'padding',\n      },\n    } as VisualizationSpec;\n  }, [spec, dimensions]);\n\n  const result = useSql({query: sqlQuery});\n  const data = useMemo(() => {\n    if (!result.data) return null;\n    return {[DATA_NAME]: result.data.toArray()};\n  }, [result.data]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        'flex h-full w-full flex-col gap-2 overflow-hidden',\n        className,\n      )}\n    >\n      {result.error && (\n        <div className=\"whitespace-pre-wrap font-mono text-sm text-red-500\">\n          {result.error.message}\n        </div>\n      )}\n      <AspectRatio ratio={aspectRatio}>\n        {refinedSpec && data && <VegaLite spec={refinedSpec} data={data} />}\n      </AspectRatio>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"VegaLiteChart.js","sourceRoot":"","sources":["../src/VegaLiteChart.tsx"],"names":[],"mappings":"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","sourcesContent":["import {ToolErrorMessage} from '@sqlrooms/ai';\nimport {arrowTableToJson, useSql} from '@sqlrooms/duckdb';\nimport {\n  AspectRatio,\n  Button,\n  cn,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  useAspectRatioDimensions,\n} from '@sqlrooms/ui';\nimport {safeJsonParse} from '@sqlrooms/utils';\nimport * as arrow from 'apache-arrow';\nimport {TriangleAlertIcon} from 'lucide-react';\nimport {useEffect, useMemo, useRef, useState} from 'react';\nimport {VegaLite, VisualizationSpec} from 'react-vega';\n\nconst DEFAULT_DATA_NAME = 'queryResult';\n\n/**\n * A component that renders a Vega-Lite chart with SQL data and responsive sizing.\n *\n * The chart can be sized in multiple ways:\n * - Fixed dimensions: Provide both width and height as numbers\n * - Fixed width, proportional height: Provide width as number, height as 'auto'\n * - Fixed height, proportional width: Provide height as number, width as 'auto'\n * - Fully responsive: Leave both as 'auto' (default), chart will fill container while maintaining aspect ratio\n *\n * @param props - The component props\n * @param {number | 'auto'} [props.width='auto'] - The chart width in pixels, or 'auto' to use container width\n * @param {number | 'auto'} [props.height='auto'] - The chart height in pixels, or 'auto' to calculate from aspect ratio\n * @param {number} [props.aspectRatio=3/2] - The desired width-to-height ratio when dimensions are auto-calculated\n * @param {string} props.sqlQuery - The SQL query to fetch data for the chart\n * @param {string | VisualizationSpec} props.spec - The Vega-Lite specification for the chart.\n *   Can be either a JSON string or a VisualizationSpec object.\n *   The data and size properties will be overridden by the component.\n *\n * @returns The rendered chart component\n *\n * @example\n * // Fixed size chart\n * <VegaLiteChart\n *   width={600}\n *   height={400}\n *   sqlQuery=\"SELECT category, count(*) as count FROM sales GROUP BY category\"\n *   spec={{\n *     mark: 'bar',\n *     encoding: {\n *       x: {field: 'category', type: 'nominal'},\n *       y: {field: 'count', type: 'quantitative'}\n *     }\n *   }}\n * />\n *\n * @example\n * // Responsive chart with 16:9 aspect ratio\n * <VegaLiteChart\n *   className=\"max-w-[600px]\"\n *   aspectRatio={16/9}\n *   sqlQuery=\"SELECT date, value FROM metrics\"\n *   spec={{\n *     mark: 'line',\n *     encoding: {\n *       x: {field: 'date', type: 'temporal'},\n *       y: {field: 'value', type: 'quantitative'}\n *     }\n *   }}\n * />\n */\nconst VegaLiteSqlChart: React.FC<{\n  className?: string;\n  width?: number | 'auto';\n  height?: number | 'auto';\n  aspectRatio?: number;\n  sqlQuery: string;\n  spec: string | VisualizationSpec;\n  dataName?: string;\n}> = ({\n  className,\n  width = 'auto',\n  height = 'auto',\n  aspectRatio = 3 / 2,\n  sqlQuery,\n  spec,\n  dataName = DEFAULT_DATA_NAME,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const dimensions = useAspectRatioDimensions({\n    containerRef,\n    width,\n    height,\n    aspectRatio,\n  });\n\n  const refinedSpec = useMemo(() => {\n    const parsed = typeof spec === 'string' ? safeJsonParse(spec) : spec;\n    if (!parsed) return null;\n    return {\n      ...parsed,\n      data: {name: dataName},\n      width: dimensions.width,\n      height: dimensions.height,\n      autosize: {\n        type: 'fit',\n        contains: 'padding',\n      },\n    } as VisualizationSpec;\n  }, [spec, dimensions]);\n\n  const result = useSql({query: sqlQuery});\n  const arrowTable = result.data?.arrowTable;\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        'flex h-full w-full flex-col gap-2 overflow-hidden',\n        className,\n      )}\n    >\n      {result.error && (\n        <div className=\"whitespace-pre-wrap font-mono text-sm text-red-500\">\n          {result.error.message}\n        </div>\n      )}\n      {result.isLoading ? (\n        <div className=\"text-muted-foreground align-center flex gap-2 px-2\">\n          <div className=\"h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600\"></div>\n          Running query for chart data…\n        </div>\n      ) : (\n        refinedSpec &&\n        arrowTable && <ArrowChart spec={refinedSpec} arrowTable={arrowTable} />\n      )}\n    </div>\n  );\n};\n\nexport const ArrowChart: React.FC<{\n  className?: string;\n  width?: number | 'auto';\n  height?: number | 'auto';\n  aspectRatio?: number;\n  spec: string | VisualizationSpec;\n  arrowTable: arrow.Table | undefined;\n  dataName?: string;\n}> = ({\n  className,\n  width = 'auto',\n  height = 'auto',\n  aspectRatio = 3 / 2,\n  spec,\n  arrowTable,\n  dataName = DEFAULT_DATA_NAME,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [chartError, setChartError] = useState<Error | null>(null);\n  const dimensions = useAspectRatioDimensions({\n    containerRef,\n    width,\n    height,\n    aspectRatio,\n  });\n\n  const refinedSpec = useMemo(() => {\n    const parsed = typeof spec === 'string' ? safeJsonParse(spec) : spec;\n    if (!parsed) {\n      setChartError(new Error('Invalid Vega-Lite specification'));\n      return null;\n    }\n    return {\n      ...parsed,\n      data: {name: dataName},\n      width: dimensions.width,\n      height: dimensions.height,\n      autosize: {\n        type: 'fit',\n        contains: 'padding',\n      },\n    } as VisualizationSpec;\n  }, [spec, dimensions]);\n\n  const data = useMemo(() => {\n    if (!arrowTable) return null;\n    return {queryResult: arrowTableToJson(arrowTable)};\n  }, [arrowTable]);\n\n  // Reset chart error whenever spec or data changes\n  useEffect(() => {\n    setChartError(null);\n  }, [spec, data]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        'flex h-full w-full flex-col gap-2 overflow-hidden',\n        className,\n      )}\n    >\n      {chartError ? (\n        <ToolErrorMessage\n          error={chartError}\n          triggerLabel=\"Chart rendering failed\"\n          title=\"Chart error\"\n          align=\"start\"\n          details={spec}\n        />\n      ) : (\n        refinedSpec &&\n        data && (\n          <AspectRatio ratio={aspectRatio}>\n            <VegaLite spec={refinedSpec} data={data} onError={setChartError} />\n          </AspectRatio>\n        )\n      )}\n    </div>\n  );\n};\n\nexport const VegaLiteChart = Object.assign(VegaLiteSqlChart, {\n  SqlChart: VegaLiteSqlChart,\n  ArrowChart: ArrowChart,\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/vega",
-  "version": "0.24.21",
+  "version": "0.24.22",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
@@ -19,10 +19,10 @@
   },
   "dependencies": {
     "@openassistant/utils": "^0.5.13",
-    "@sqlrooms/ai": "0.24.21",
-    "@sqlrooms/duckdb": "0.24.21",
-    "@sqlrooms/ui": "0.24.21",
-    "@sqlrooms/utils": "0.24.21",
+    "@sqlrooms/ai": "0.24.22",
+    "@sqlrooms/duckdb": "0.24.22",
+    "@sqlrooms/ui": "0.24.22",
+    "@sqlrooms/utils": "0.24.22",
     "react-vega": "^7.6.0",
     "vega": "^5.33.0",
     "vega-lite": "^5.23.0",
@@ -39,5 +39,5 @@
     "typecheck": "tsc --noEmit",
     "typedoc": "typedoc"
   },
-  "gitHead": "f9ab9f80a5362213c7cb257496c50e305ebd6a81"
+  "gitHead": "bc633cde7574270b679cb6c3d9ce9b496a634133"
 }