@sqlrooms/vega 0.24.16 → 0.24.17
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.
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { Suspense } from 'react';
|
|
3
|
-
import { VegaLiteChart } from './VegaLiteChart';
|
|
4
2
|
import { QueryToolResult } from '@sqlrooms/ai';
|
|
5
3
|
import { cn } from '@sqlrooms/ui';
|
|
4
|
+
import { Suspense } from 'react';
|
|
5
|
+
import { VegaLiteChart } from './VegaLiteChart';
|
|
6
6
|
/**
|
|
7
7
|
* Renders a chart tool call with visualization using Vega-Lite
|
|
8
8
|
* @param {VegaChartToolResultProps} props - The component props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VegaChartToolResult.js","sourceRoot":"","sources":["../src/VegaChartToolResult.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,
|
|
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"]}
|
package/dist/VegaLiteChart.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useSql } from '@sqlrooms/duckdb';
|
|
3
3
|
import { AspectRatio, cn, useAspectRatioDimensions } from '@sqlrooms/ui';
|
|
4
4
|
import { safeJsonParse } from '@sqlrooms/utils';
|
|
5
|
-
import {
|
|
5
|
+
import { useMemo, useRef } from 'react';
|
|
6
6
|
import { VegaLite } from 'react-vega';
|
|
7
7
|
const DATA_NAME = 'queryResult';
|
|
8
8
|
/**
|
|
@@ -63,8 +63,6 @@ export const VegaLiteChart = ({ className, width = 'auto', height = 'auto', aspe
|
|
|
63
63
|
height,
|
|
64
64
|
aspectRatio,
|
|
65
65
|
});
|
|
66
|
-
const connector = useDuckDb();
|
|
67
|
-
const [data, setData] = useState();
|
|
68
66
|
const refinedSpec = useMemo(() => {
|
|
69
67
|
const parsed = typeof spec === 'string' ? safeJsonParse(spec) : spec;
|
|
70
68
|
if (!parsed)
|
|
@@ -80,13 +78,12 @@ export const VegaLiteChart = ({ className, width = 'auto', height = 'auto', aspe
|
|
|
80
78
|
},
|
|
81
79
|
};
|
|
82
80
|
}, [spec, dimensions]);
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
|
|
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 }) }) }));
|
|
81
|
+
const result = useSql({ query: sqlQuery });
|
|
82
|
+
const data = useMemo(() => {
|
|
83
|
+
if (!result.data)
|
|
84
|
+
return null;
|
|
85
|
+
return { [DATA_NAME]: result.data.toArray() };
|
|
86
|
+
}, [result.data]);
|
|
87
|
+
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 }) })] }));
|
|
91
88
|
};
|
|
92
89
|
//# sourceMappingURL=VegaLiteChart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VegaLiteChart.js","sourceRoot":"","sources":["../src/VegaLiteChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,
|
|
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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/vega",
|
|
3
|
-
"version": "0.24.
|
|
3
|
+
"version": "0.24.17",
|
|
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.17",
|
|
23
|
+
"@sqlrooms/duckdb": "0.24.17",
|
|
24
|
+
"@sqlrooms/ui": "0.24.17",
|
|
25
|
+
"@sqlrooms/utils": "0.24.17",
|
|
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": "31b706c4687780cefa92bc9e715f2839dbe4ee49"
|
|
43
43
|
}
|