@sqlrooms/vega 0.24.12 → 0.24.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/VegaChartToolResult.d.ts +2 -1
- package/dist/VegaChartToolResult.d.ts.map +1 -1
- package/dist/VegaChartToolResult.js +3 -2
- package/dist/VegaChartToolResult.js.map +1 -1
- package/dist/VegaLiteChart.d.ts.map +1 -1
- package/dist/VegaLiteChart.js +2 -2
- package/dist/VegaLiteChart.js.map +1 -1
- package/package.json +6 -6
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { VisualizationSpec } from 'react-vega';
|
|
2
2
|
type VegaChartToolResultProps = {
|
|
3
|
+
className?: string;
|
|
3
4
|
reasoning: string;
|
|
4
5
|
sqlQuery: string;
|
|
5
6
|
vegaLiteSpec: VisualizationSpec;
|
|
@@ -9,6 +10,6 @@ type VegaChartToolResultProps = {
|
|
|
9
10
|
* @param {VegaChartToolResultProps} props - The component props
|
|
10
11
|
* @returns {JSX.Element} The rendered chart tool call
|
|
11
12
|
*/
|
|
12
|
-
export declare function VegaChartToolResult({ sqlQuery, vegaLiteSpec, }: VegaChartToolResultProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare function VegaChartToolResult({ className, sqlQuery, vegaLiteSpec, }: VegaChartToolResultProps): import("react/jsx-runtime").JSX.Element;
|
|
13
14
|
export {};
|
|
14
15
|
//# sourceMappingURL=VegaChartToolResult.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VegaChartToolResult.d.ts","sourceRoot":"","sources":["../src/VegaChartToolResult.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,iBAAiB,EAAC,MAAM,YAAY,CAAC;
|
|
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"}
|
|
@@ -2,12 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
2
2
|
import { Suspense } from 'react';
|
|
3
3
|
import { VegaLiteChart } from './VegaLiteChart';
|
|
4
4
|
import { QueryToolResult } from '@sqlrooms/ai';
|
|
5
|
+
import { cn } from '@sqlrooms/ui';
|
|
5
6
|
/**
|
|
6
7
|
* Renders a chart tool call with visualization using Vega-Lite
|
|
7
8
|
* @param {VegaChartToolResultProps} props - The component props
|
|
8
9
|
* @returns {JSX.Element} The rendered chart tool call
|
|
9
10
|
*/
|
|
10
|
-
export function VegaChartToolResult({ sqlQuery, vegaLiteSpec, }) {
|
|
11
|
-
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:
|
|
11
|
+
export function VegaChartToolResult({ className, sqlQuery, vegaLiteSpec, }) {
|
|
12
|
+
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 }) })] })) }));
|
|
12
13
|
}
|
|
13
14
|
//# sourceMappingURL=VegaChartToolResult.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VegaChartToolResult.js","sourceRoot":"","sources":["../src/VegaChartToolResult.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAS7C;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,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,
|
|
1
|
+
{"version":3,"file":"VegaChartToolResult.js","sourceRoot":"","sources":["../src/VegaChartToolResult.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAc,EAAE,EAAC,MAAM,cAAc,CAAC;AAS7C;;;;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 {Suspense} from 'react';\nimport {VegaLiteChart} from './VegaLiteChart';\nimport {QueryToolResult} from '@sqlrooms/ai';\nimport {VisualizationSpec} from 'react-vega';\nimport {AspectRatio, cn} from '@sqlrooms/ui';\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"]}
|
|
@@ -1 +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,
|
|
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"}
|
package/dist/VegaLiteChart.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { arrowTableToJson, useDuckDb } from '@sqlrooms/duckdb';
|
|
3
|
-
import { cn, useAspectRatioDimensions } from '@sqlrooms/ui';
|
|
3
|
+
import { AspectRatio, cn, useAspectRatioDimensions } from '@sqlrooms/ui';
|
|
4
4
|
import { safeJsonParse } from '@sqlrooms/utils';
|
|
5
5
|
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
6
6
|
import { VegaLite } from 'react-vega';
|
|
@@ -87,6 +87,6 @@ export const VegaLiteChart = ({ className, width = 'auto', height = 'auto', aspe
|
|
|
87
87
|
};
|
|
88
88
|
fetchData();
|
|
89
89
|
}, [sqlQuery, connector]);
|
|
90
|
-
return (_jsx("div", { ref: containerRef, className: cn('flex h-full w-full flex-col gap-2 overflow-hidden', className), children: refinedSpec && data && _jsx(VegaLite, { spec: refinedSpec, data: data }) }));
|
|
90
|
+
return (_jsx("div", { ref: containerRef, className: cn('flex h-full w-full flex-col gap-2 overflow-hidden', className), children: _jsx(AspectRatio, { ratio: aspectRatio, children: refinedSpec && data && _jsx(VegaLite, { spec: refinedSpec, data: data }) }) }));
|
|
91
91
|
};
|
|
92
92
|
//# sourceMappingURL=VegaLiteChart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VegaLiteChart.js","sourceRoot":"","sources":["../src/VegaLiteChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,gBAAgB,EAAE,SAAS,EAAC,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAC,EAAE,EAAE,wBAAwB,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"VegaLiteChart.js","sourceRoot":"","sources":["../src/VegaLiteChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,gBAAgB,EAAE,SAAS,EAAC,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAC,WAAW,EAAE,EAAE,EAAE,wBAAwB,EAAC,MAAM,cAAc,CAAC;AACvE,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC3D,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,SAAS,GAAG,SAAS,EAAE,CAAC;IAC9B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,EAA2B,CAAC;IAE5D,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,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,KAAK,IAAI,EAAE;YAC3B,MAAM,MAAM,GAAG,MAAM,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;YAC/C,OAAO,CAAC,EAAC,CAAC,SAAS,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAAC,CAAC,CAAC;QACnD,CAAC,CAAC;QACF,SAAS,EAAE,CAAC;IACd,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,cACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CACX,mDAAmD,EACnD,SAAS,CACV,YAED,KAAC,WAAW,IAAC,KAAK,EAAE,WAAW,YAC5B,WAAW,IAAI,IAAI,IAAI,KAAC,QAAQ,IAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAI,GACvD,GACV,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {arrowTableToJson, useDuckDb} from '@sqlrooms/duckdb';\nimport {AspectRatio, cn, useAspectRatioDimensions} from '@sqlrooms/ui';\nimport {safeJsonParse} from '@sqlrooms/utils';\nimport {useEffect, useMemo, useRef, useState} 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 connector = useDuckDb();\n const [data, setData] = useState<Record<string, unknown>>();\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 useEffect(() => {\n const fetchData = async () => {\n const result = await connector.query(sqlQuery);\n setData({[DATA_NAME]: arrowTableToJson(result)});\n };\n fetchData();\n }, [sqlQuery, connector]);\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 <AspectRatio ratio={aspectRatio}>\n {refinedSpec && data && <VegaLite spec={refinedSpec} data={data} />}\n </AspectRatio>\n </div>\n );\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/vega",
|
|
3
|
-
"version": "0.24.
|
|
3
|
+
"version": "0.24.14",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -19,10 +19,10 @@
|
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@openassistant/utils": "^0.5.13",
|
|
22
|
-
"@sqlrooms/ai": "0.24.
|
|
23
|
-
"@sqlrooms/duckdb": "0.24.
|
|
24
|
-
"@sqlrooms/ui": "0.24.
|
|
25
|
-
"@sqlrooms/utils": "0.24.
|
|
22
|
+
"@sqlrooms/ai": "0.24.14",
|
|
23
|
+
"@sqlrooms/duckdb": "0.24.14",
|
|
24
|
+
"@sqlrooms/ui": "0.24.14",
|
|
25
|
+
"@sqlrooms/utils": "0.24.14",
|
|
26
26
|
"react-vega": "^7.6.0",
|
|
27
27
|
"vega": "^5.33.0",
|
|
28
28
|
"vega-lite": "^5.23.0",
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"typecheck": "tsc --noEmit",
|
|
40
40
|
"typedoc": "typedoc"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "ecde53ffece563b8151b5b7139b444827add7135"
|
|
43
43
|
}
|