@sqlrooms/vega 0.4.0 → 0.4.1

package/dist/VegaLiteChart.d.ts

@@ -0,0 +1,60 @@
+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<{
+    className?: string;
+    width?: number | 'auto';
+    height?: number | 'auto';
+    aspectRatio?: number;
+    sqlQuery: string;
+    spec: string | VisualizationSpec;
+}>;
+//# sourceMappingURL=VegaLiteChart.d.ts.map

package/dist/VegaLiteChart.d.ts.map

@@ -0,0 +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,CAqDA,CAAC"}

package/dist/VegaLiteChart.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { arrowTableToJson, useDuckDb } from '@sqlrooms/duckdb';
+import { cn, useAspectRatioDimensions } from '@sqlrooms/ui';
+import { safeJsonParse } from '@sqlrooms/utils';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { VegaLite } from 'react-vega';
+const DATA_NAME = 'queryResult';
+/**
+ * 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 const VegaLiteChart = ({ className, width = 'auto', height = 'auto', aspectRatio = 3 / 2, sqlQuery, spec, }) => {
+    const containerRef = useRef(null);
+    const dimensions = useAspectRatioDimensions({
+        containerRef,
+        width,
+        height,
+        aspectRatio,
+    });
+    const { conn } = useDuckDb();
+    const [data, setData] = useState();
+    const refinedSpec = useMemo(() => {
+        const parsed = typeof spec === 'string' ? safeJsonParse(spec) : spec;
+        if (!parsed)
+            return null;
+        return {
+            ...parsed,
+            data: { name: DATA_NAME },
+            width: dimensions.width,
+            height: dimensions.height,
+            autosize: {
+                type: 'fit',
+                contains: 'padding',
+            },
+        };
+    }, [spec, dimensions]);
+    useEffect(() => {
+        const fetchData = async () => {
+            const result = await conn.query(sqlQuery);
+            setData({ [DATA_NAME]: arrowTableToJson(result) });
+        };
+        fetchData();
+    }, [sqlQuery, conn]);
+    return (_jsx("div", { ref: containerRef, className: cn('w-full h-full flex flex-col gap-2 overflow-hidden', className), children: refinedSpec && data && _jsx(VegaLite, { spec: refinedSpec, data: data }) }));
+};
+//# sourceMappingURL=VegaLiteChart.js.map

package/dist/VegaLiteChart.js.map

@@ -0,0 +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,EAAC,IAAI,EAAC,GAAG,SAAS,EAAE,CAAC;IAC3B,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,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;YAC1C,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,IAAI,CAAC,CAAC,CAAC;IAErB,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"}

package/dist/hooks/useChartDimensions.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Represents the dimensions of a chart
+ * @interface ChartDimensions
+ * @property {number} width - The width of the chart in pixels
+ * @property {number} height - The height of the chart in pixels
+ */
+export interface ChartDimensions {
+    width: number;
+    height: number;
+}
+/**
+ * Props for the useChartDimensions hook
+ * @interface UseChartDimensionsProps
+ * @property {number | 'auto'} width - The explicitly provided width, or 'auto' for container-based width
+ * @property {number | 'auto'} height - The explicitly provided height, or 'auto' for aspect ratio-based height
+ * @property {number} aspectRatio - The desired width-to-height ratio when dimensions are auto-calculated
+ * @property {React.RefObject<HTMLElement>} containerRef - Reference to the container element
+ */
+export interface UseChartDimensionsProps {
+    width: number | 'auto';
+    height: number | 'auto';
+    aspectRatio: number;
+    containerRef: React.RefObject<HTMLElement>;
+}
+/**
+ * A hook that calculates chart dimensions based on provided values and container size
+ *
+ * This hook handles various combinations of width/height specifications:
+ * - If both width and height are provided, uses those exact dimensions
+ * - If only width is provided, calculates height using the aspect ratio
+ * - If only height is provided, calculates width using the aspect ratio
+ * - If both are 'auto', uses container width and calculates height using the aspect ratio
+ *
+ * @param {UseChartDimensionsProps} props - The input parameters for dimension calculation
+ * @returns {ChartDimensions} The calculated width and height
+ *
+ * @example
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * const {width, height} = useChartDimensions({
+ *   width: 'auto',
+ *   height: 'auto',
+ *   aspectRatio: 16/9,
+ *   containerRef
+ * });
+ * // Returns dimensions based on container size
+ * ```
+ */
+export declare function useChartDimensions({ width, height, aspectRatio, containerRef, }: UseChartDimensionsProps): ChartDimensions;
+//# sourceMappingURL=useChartDimensions.d.ts.map

package/dist/hooks/useChartDimensions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChartDimensions.d.ts","sourceRoot":"","sources":["../../src/hooks/useChartDimensions.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;CAC5C;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,MAAM,EACN,WAAW,EACX,YAAY,GACb,EAAE,uBAAuB,GAAG,eAAe,CAoB3C"}

package/dist/hooks/useChartDimensions.js

@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+import { useResizeObserver } from 'usehooks-ts';
+/**
+ * A hook that calculates chart dimensions based on provided values and container size
+ *
+ * This hook handles various combinations of width/height specifications:
+ * - If both width and height are provided, uses those exact dimensions
+ * - If only width is provided, calculates height using the aspect ratio
+ * - If only height is provided, calculates width using the aspect ratio
+ * - If both are 'auto', uses container width and calculates height using the aspect ratio
+ *
+ * @param {UseChartDimensionsProps} props - The input parameters for dimension calculation
+ * @returns {ChartDimensions} The calculated width and height
+ *
+ * @example
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * const {width, height} = useChartDimensions({
+ *   width: 'auto',
+ *   height: 'auto',
+ *   aspectRatio: 16/9,
+ *   containerRef
+ * });
+ * // Returns dimensions based on container size
+ * ```
+ */
+export function useChartDimensions({ width, height, aspectRatio, containerRef, }) {
+    const { width: containerWidth = 0 } = useResizeObserver({
+        ref: containerRef,
+        box: 'border-box',
+    });
+    return useMemo(() => {
+        if (width !== 'auto' && height !== 'auto') {
+            return { width, height };
+        }
+        if (width !== 'auto') {
+            return { width, height: width / aspectRatio };
+        }
+        if (height !== 'auto') {
+            return { width: height * aspectRatio, height };
+        }
+        const finalWidth = containerWidth;
+        const finalHeight = finalWidth / aspectRatio;
+        return { width: finalWidth, height: finalHeight };
+    }, [containerWidth, aspectRatio, width, height]);
+}
+//# sourceMappingURL=useChartDimensions.js.map

package/dist/hooks/useChartDimensions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChartDimensions.js","sourceRoot":"","sources":["../../src/hooks/useChartDimensions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AAC9B,OAAO,EAAC,iBAAiB,EAAC,MAAM,aAAa,CAAC;AA4B9C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,kBAAkB,CAAC,EACjC,KAAK,EACL,MAAM,EACN,WAAW,EACX,YAAY,GACY;IACxB,MAAM,EAAC,KAAK,EAAE,cAAc,GAAG,CAAC,EAAC,GAAG,iBAAiB,CAAC;QACpD,GAAG,EAAE,YAAY;QACjB,GAAG,EAAE,YAAY;KAClB,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,IAAI,KAAK,KAAK,MAAM,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;YAC1C,OAAO,EAAC,KAAK,EAAE,MAAM,EAAC,CAAC;QACzB,CAAC;QACD,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC;YACrB,OAAO,EAAC,KAAK,EAAE,MAAM,EAAE,KAAK,GAAG,WAAW,EAAC,CAAC;QAC9C,CAAC;QACD,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;YACtB,OAAO,EAAC,KAAK,EAAE,MAAM,GAAG,WAAW,EAAE,MAAM,EAAC,CAAC;QAC/C,CAAC;QACD,MAAM,UAAU,GAAG,cAAc,CAAC;QAClC,MAAM,WAAW,GAAG,UAAU,GAAG,WAAW,CAAC;QAC7C,OAAO,EAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAC,CAAC;IAClD,CAAC,EAAE,CAAC,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;AACnD,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { VegaLiteChart } from './vega-lite-chart';
+export { VegaLiteChart } from './VegaLiteChart';
 export type { VisualizationSpec } from 'react-vega';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAC,iBAAiB,EAAC,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EAAC,iBAAiB,EAAC,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -1,2 +1,2 @@
-export { VegaLiteChart } from './vega-lite-chart';
+export { VegaLiteChart } from './VegaLiteChart';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/vega",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
@@ -20,7 +20,8 @@
   },
   "dependencies": {
     "@sqlrooms/duckdb": "0.4.0",
-    "@sqlrooms/utils": "0.4.0",
+    "@sqlrooms/ui": "0.4.1",
+    "@sqlrooms/utils": "0.4.1",
     "react-vega": "^7.6.0",
     "vega": "^5.31.0",
     "vega-lite": "^5.23.0"
@@ -35,5 +36,5 @@
     "lint": "eslint .",
     "typedoc": "typedoc"
   },
-  "gitHead": "fbc92d77cf3a70bdbef67bb0d7cf9342ed3e81a1"
+  "gitHead": "4260241d97423fd1839746ebb7980d01eaffde97"
 }