@sqlrooms/vega 0.16.4 → 0.18.0
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/README.md +26 -28
- package/dist/VegaLiteChart.js +1 -1
- package/dist/VegaLiteChart.js.map +1 -1
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -123,34 +123,32 @@ A tool for creating Vega-Lite charts in AI-assisted workflows, designed to work
|
|
|
123
123
|
```tsx
|
|
124
124
|
import {createVegaChartTool} from '@sqlrooms/vega';
|
|
125
125
|
import {createAiSlice} from '@sqlrooms/ai';
|
|
126
|
-
import {
|
|
127
|
-
|
|
128
|
-
// Create a
|
|
129
|
-
export const {
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
}),
|
|
153
|
-
);
|
|
126
|
+
import {createRoomStore} from '@sqlrooms/room-shell';
|
|
127
|
+
|
|
128
|
+
// Create a room store with the VegaChartTool configured
|
|
129
|
+
export const {roomStore, useRoomStore} = createRoomStore((set, get, store) => ({
|
|
130
|
+
// Other slices and state...
|
|
131
|
+
|
|
132
|
+
// AI slice with custom tools
|
|
133
|
+
...createAiSlice({
|
|
134
|
+
getApiKey: (modelProvider: string) => {
|
|
135
|
+
return get()?.apiKeys[modelProvider] || '';
|
|
136
|
+
},
|
|
137
|
+
// Configure custom tools at store creation time
|
|
138
|
+
customTools: {
|
|
139
|
+
// Add the VegaChart tool
|
|
140
|
+
chart: createVegaChartTool({
|
|
141
|
+
// Optional custom description
|
|
142
|
+
description:
|
|
143
|
+
'Create data visualizations using Vega-Lite and SQL queries',
|
|
144
|
+
}),
|
|
145
|
+
|
|
146
|
+
// Other custom tools...
|
|
147
|
+
},
|
|
148
|
+
})(set, get, store),
|
|
149
|
+
|
|
150
|
+
// Other state and methods...
|
|
151
|
+
}));
|
|
154
152
|
```
|
|
155
153
|
|
|
156
154
|
#### Tool Parameters
|
package/dist/VegaLiteChart.js
CHANGED
|
@@ -82,7 +82,7 @@ export const VegaLiteChart = ({ className, width = 'auto', height = 'auto', aspe
|
|
|
82
82
|
}, [spec, dimensions]);
|
|
83
83
|
useEffect(() => {
|
|
84
84
|
const fetchData = async () => {
|
|
85
|
-
const result = await connector.query(sqlQuery)
|
|
85
|
+
const result = await connector.query(sqlQuery);
|
|
86
86
|
setData({ [DATA_NAME]: arrowTableToJson(result) });
|
|
87
87
|
};
|
|
88
88
|
fetchData();
|
|
@@ -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;AAC1D,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
|
|
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;AAC1D,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,YAEA,WAAW,IAAI,IAAI,IAAI,KAAC,QAAQ,IAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAI,GAC/D,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {arrowTableToJson, useDuckDb} from '@sqlrooms/duckdb';\nimport {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 {refinedSpec && data && <VegaLite spec={refinedSpec} data={data} />}\n </div>\n );\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/vega",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.18.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -18,10 +18,10 @@
|
|
|
18
18
|
"access": "public"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@sqlrooms/ai": "0.
|
|
22
|
-
"@sqlrooms/duckdb": "0.
|
|
23
|
-
"@sqlrooms/ui": "0.
|
|
24
|
-
"@sqlrooms/utils": "0.
|
|
21
|
+
"@sqlrooms/ai": "0.18.0",
|
|
22
|
+
"@sqlrooms/duckdb": "0.18.0",
|
|
23
|
+
"@sqlrooms/ui": "0.18.0",
|
|
24
|
+
"@sqlrooms/utils": "0.18.0",
|
|
25
25
|
"react-vega": "^7.6.0",
|
|
26
26
|
"vega": "^5.33.0",
|
|
27
27
|
"vega-lite": "^5.23.0",
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"typecheck": "tsc --noEmit",
|
|
39
39
|
"typedoc": "typedoc"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "c1c06c9549ca74b9d4f515f6667b77d3196652df"
|
|
42
42
|
}
|