@quillsql/react 2.13.42 → 2.13.43

package/dist/cjs/components/Chart/GaugeChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/GaugeChart.tsx"],"names":[],"mappings":"AAIA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,UAAU,EACV,WAAW,EACX,cAAc,EACd,MAAM,EACN,iBAAwB,GACzB,EAAE;IACD,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,2CAeA"}
+{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/GaugeChart.tsx"],"names":[],"mappings":"AAOA,OAAO,eAAe,CAAC;AAGvB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,UAAU,EACV,WAAW,EACX,cAAc,EACd,MAAM,EACN,iBAAwB,GACzB,EAAE;IACD,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,2CAeA"}

package/dist/cjs/components/Chart/GaugeChart.js

@@ -1,11 +1,45 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = GaugeChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const d3_selection_1 = require("d3-selection");
-const d3_shape_1 = require("d3-shape");
-const d3_interpolate_1 = require("d3-interpolate");
+// import { arc } from 'd3-shape';
+// import { interpolate } from 'd3-interpolate';
+// import { select } from 'd3-selection';
+// These two are just for type checking
 require("d3-transition");
 const axisFormatter_1 = require("../../utils/axisFormatter");
 function GaugeChart({ data, xAxisField, xAxisFormat, containerStyle, colors, isAnimationActive = true, }) {
@@ -27,13 +61,34 @@ function D3Gauge({ percentage, containerStyle, xAxisFormat, colors, isAnimationA
     // Gauge arc from -135° to +135°
     const startAngle = -(3 * Math.PI) / 4;
     const totalAngle = (3 * Math.PI) / 2;
+    // We need to dynamically import d3 to avoid cjs/esm issues.
+    const [arc, setArc] = (0, react_1.useState)(null);
+    const [interpolate, setInterpolate] = (0, react_1.useState)(null);
+    const [select, setSelect] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        console.log('Loading D3 modules');
+        Promise.resolve().then(() => __importStar(require('d3-shape'))).then(({ arc }) => {
+            console.log('d3-shape loaded');
+            setArc(() => arc);
+        }).catch(err => console.error('Failed to load d3-shape:', err));
+        Promise.resolve().then(() => __importStar(require('d3-interpolate'))).then(({ interpolate }) => {
+            console.log('d3-interpolate loaded');
+            setInterpolate(() => interpolate);
+        }).catch(err => console.error('Failed to load d3-interpolate:', err));
+        Promise.resolve().then(() => __importStar(require('d3-selection'))).then(({ select }) => {
+            console.log('d3-selection loaded');
+            setSelect(() => select);
+        }).catch(err => console.error('Failed to load d3-selection:', err));
+    }, []);
     // --- Initialization ---
     (0, react_1.useEffect)(() => {
-        if (!containerRef.current)
+        console.log('effect run');
+        if (!containerRef.current || !select)
             return;
+        console.log('made it');
         const container = containerRef.current;
-        (0, d3_selection_1.select)(container).select('svg').remove();
-        svgRef.current = (0, d3_selection_1.select)(container)
+        select(container).select('svg').remove();
+        svgRef.current = select(container)
             // Let CSS control the size.
             .append('svg')
             .attr('width', '100%')
@@ -67,7 +122,7 @@ function D3Gauge({ percentage, containerStyle, xAxisFormat, colors, isAnimationA
             svgRef.current?.remove();
             svgRef.current = null;
         };
-    }, [colors]);
+    }, [colors, select]);
     // --- Update & Resize ---
     (0, react_1.useEffect)(() => {
         if (!containerRef.current ||
@@ -75,7 +130,10 @@ function D3Gauge({ percentage, containerStyle, xAxisFormat, colors, isAnimationA
             !gaugeGroupRef.current ||
             !needleRef.current ||
             !needleOutlineRef.current ||
-            !textRef.current)
+            !textRef.current ||
+            !arc ||
+            !interpolate ||
+            !select)
             return;
         // Use getBoundingClientRect() so we get accurate dimensions.
         const rect = containerRef.current.getBoundingClientRect();
@@ -101,7 +159,7 @@ function D3Gauge({ percentage, containerStyle, xAxisFormat, colors, isAnimationA
             { start: startAngle + totalAngle / 3, end: startAngle + (2 * totalAngle) / 3, color: colors[3] || 'yellow' },
             { start: startAngle + (2 * totalAngle) / 3, end: startAngle + totalAngle, color: colors[2] || 'green' },
         ];
-        const arcGenerator = (0, d3_shape_1.arc)()
+        const arcGenerator = arc()
             .innerRadius(innerRadius)
             .outerRadius(radius);
         segments.forEach((seg, i) => {
@@ -133,8 +191,8 @@ function D3Gauge({ percentage, containerStyle, xAxisFormat, colors, isAnimationA
             .attr('y', radius * 0.1);
         if (isAnimationActive) {
             const prevAngle = startAngle + totalAngle * previousPercentageRef.current - Math.PI / 2;
-            const angleInterpolator = (0, d3_interpolate_1.interpolate)(prevAngle, newAngle);
-            const textInterpolator = (0, d3_interpolate_1.interpolate)(previousPercentageRef.current, percentage);
+            const angleInterpolator = interpolate(prevAngle, newAngle);
+            const textInterpolator = interpolate(previousPercentageRef.current, percentage);
             needleRef.current.interrupt()
                 .transition()
                 .duration(1000)
@@ -182,7 +240,7 @@ function D3Gauge({ percentage, containerStyle, xAxisFormat, colors, isAnimationA
         }
         previousPercentageRef.current = percentage;
         firstMountRef.current = false;
-    }, [percentage, colors, isAnimationActive, xAxisFormat]);
+    }, [percentage, colors, isAnimationActive, xAxisFormat, select, arc, interpolate]);
     // Use ResizeObserver to trigger updates on container size changes.
     (0, react_1.useEffect)(() => {
         if (!containerRef.current)

package/dist/cjs/components/Chart/InternalChart.js

@@ -466,7 +466,7 @@ function InternalChart({ report, colors, className, containerStyle, isAnimationA
                             marginBottom: 'auto',
                             display: 'flex',
                         }, children: (0, jsx_runtime_1.jsx)(MetricComponent, { error: error, isLoading: loading, report: report, children: report?.rows?.[0]?.[report.xAxisField] }) })), report.chartType !== 'table' && report.chartType !== 'metric' && ((0, jsx_runtime_1.jsx)(Chart_1.ChartDisplay, { config: report, containerStyle: {
-                            minHeight: ['gauge'].includes(report.chartType) ? 500 : 400,
+                            minHeight: 300,
                             width: ['US map', 'World map'].includes(report.chartType) ? '70%' : ['gauge'].includes(report.chartType) ? undefined : '100%',
                             height: ['US map', 'World map'].includes(report.chartType) ? 'fit-content' : ['gauge'].includes(report.chartType) ? 500 : undefined,
                             marginLeft: ['gauge'].includes(report.chartType) ? 'undefined' : 'auto',

package/dist/cjs/components/Chart/MapChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/MapChart.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAuT3C,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,cAAc,GACf,EAAE;IACD,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,UAAU,CAAC;KAAE,EAAE,CAAC;IACrE,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC,2CAuJA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,cAAc,GACf,EAAE;IACD,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,UAAU,CAAC;KAAE,EAAE,CAAC;IACrE,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC,2CAwJA"}
+{"version":3,"file":"MapChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/MapChart.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAuT3C,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,cAAc,GACf,EAAE;IACD,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,UAAU,CAAC;KAAE,EAAE,CAAC;IACrE,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC,2CAgKA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,cAAc,GACf,EAAE;IACD,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,UAAU,CAAC;KAAE,EAAE,CAAC;IACrE,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC,2CAiKA"}

package/dist/cjs/components/Chart/MapChart.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -7,8 +40,6 @@ exports.USMap = USMap;
 exports.WorldMap = WorldMap;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_simple_maps_1 = require("react-simple-maps");
-const d3_geo_1 = require("d3-geo");
-const d3_scale_1 = require("d3-scale");
 const react_1 = require("react");
 const ChartTooltipFrame_1 = __importDefault(require("./ChartTooltipFrame"));
 const ChartTooltipRow_1 = __importDefault(require("./ChartTooltipRow"));
@@ -328,7 +359,16 @@ function USMap({ theme, data, xAxisField, xAxisFormat, yAxisFields, onClickChart
         return acc;
     }, {});
     const measureField = yAxisFields[0].field;
+    // These must be dynamically loaded as they are not available as CommonJS modules.
+    const [scaleLog, setScaleLog] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        Promise.resolve().then(() => __importStar(require("d3-scale"))).then((scale) => {
+            setScaleLog(() => scale.scaleLog);
+        });
+    }, []);
     const colorScale = (0, react_1.useMemo)(() => {
+        if (!scaleLog)
+            return () => '#FFFFFF';
         const values = Object.values(mappedData)
             .map((d) => parseFloat(d[measureField]))
             .filter((v) => !isNaN(v));
@@ -353,10 +393,10 @@ function USMap({ theme, data, xAxisField, xAxisFormat, yAxisFields, onClickChart
         const gradientStop = getCustomColor(yAxisFields[0]?.field ?? xAxisField, 'stop') ??
             getCustomColor(yAxisFields[0]?.field ?? xAxisField) ??
             colors[0];
-        return (0, d3_scale_1.scaleLog)()
+        return scaleLog()
             .domain([minValue, maxValue])
             .range([gradientStart ?? "#f7fbff", gradientStop ?? "#08306b"]);
-    }, [mappedData, measureField, colorMap, yAxisFields, xAxisField, colors]);
+    }, [mappedData, measureField, colorMap, yAxisFields, xAxisField, colors, scaleLog]);
     const hoveredValue = (0, react_1.useMemo)(() => {
         return !hoveredState ? undefined : mappedData[fipsToNames[hoveredState]?.abbreviation ?? '']?.[measureField] ??
             mappedData[fipsToNames[hoveredState]?.name ?? '']?.[measureField] ??
@@ -422,7 +462,16 @@ function WorldMap({ theme, data, xAxisField, xAxisFormat, yAxisFields, onClickCh
         return acc;
     }, {});
     const measureField = yAxisFields[0].field;
+    // These must be dynamically loaded as they are not available as CommonJS modules.
+    const [scaleLog, setScaleLog] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        Promise.resolve().then(() => __importStar(require("d3-scale"))).then((scale) => {
+            setScaleLog(() => scale.scaleLog);
+        });
+    }, []);
     const colorScale = (0, react_1.useMemo)(() => {
+        if (!scaleLog)
+            return () => '#FFFFFF';
         const values = Object.values(mappedData)
             .map((d) => parseFloat(d[measureField]))
             .filter((v) => !isNaN(v));
@@ -447,10 +496,10 @@ function WorldMap({ theme, data, xAxisField, xAxisFormat, yAxisFields, onClickCh
         const gradientStop = getCustomColor(yAxisFields[0]?.field ?? xAxisField, 'stop') ??
             getCustomColor(yAxisFields[0]?.field ?? xAxisField) ??
             colors[0];
-        return (0, d3_scale_1.scaleLog)()
+        return scaleLog()
             .domain([minValue, maxValue])
             .range([gradientStart ?? "#f7fbff", gradientStop ?? "#08306b"]);
-    }, [mappedData, measureField, colorMap, yAxisFields, xAxisField, colors]);
+    }, [mappedData, measureField, colorMap, yAxisFields, xAxisField, colors, scaleLog]);
     const hoveredValue = (0, react_1.useMemo)(() => {
         return !hoveredCountry ? undefined : mappedData[isoToNames[hoveredCountry]?.abbreviation ?? '']?.[measureField] ??
             mappedData[isoToNames[hoveredCountry]?.name ?? '']?.[measureField] ??
@@ -510,6 +559,13 @@ function WorldMap({ theme, data, xAxisField, xAxisFormat, yAxisFields, onClickCh
 }
 function MapLayout({ geographyUrl, hoveredRegion, setHoveredRegion, setHoveredCoords, containerRef, mappedData, measureField, colorScale, onClickChartElement, regionNames, }) {
     const { projection } = (0, react_simple_maps_1.useMapContext)();
+    // These must be dynamically loaded as they are not available as CommonJS modules.
+    const [geoCentroid, setGeoCentroid] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        Promise.resolve().then(() => __importStar(require("d3-geo"))).then((geo) => {
+            setGeoCentroid(() => geo.geoCentroid);
+        });
+    }, []);
     return ((0, jsx_runtime_1.jsx)(react_simple_maps_1.Geographies, { geography: geographyUrl, children: ({ geographies }) => geographies.map((geo, index) => {
             const regionData = mappedData[geo.id] ??
                 mappedData[regionNames[geo.id]?.abbreviation ?? ''] ??
@@ -519,7 +575,9 @@ function MapLayout({ geographyUrl, hoveredRegion, setHoveredRegion, setHoveredCo
             const value = regionData ? parseFloat(regionData[measureField]) : null;
             const fill = value != null ? colorScale(value) : "#D6D6DA";
             return (0, jsx_runtime_1.jsx)(react_simple_maps_1.Geography, { geography: geo, fill: fill, stroke: "#FFFFFF", strokeWidth: 0.5, onMouseEnter: () => {
-                    const centroid = (0, d3_geo_1.geoCentroid)(geo);
+                    if (!geoCentroid)
+                        return;
+                    const centroid = geoCentroid(geo);
                     const projected = projection(centroid);
                     if (projected && containerRef.current) {
                         const [x, y] = projected;

package/dist/esm/components/Chart/GaugeChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/GaugeChart.tsx"],"names":[],"mappings":"AAIA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,UAAU,EACV,WAAW,EACX,cAAc,EACd,MAAM,EACN,iBAAwB,GACzB,EAAE;IACD,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,2CAeA"}
+{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/GaugeChart.tsx"],"names":[],"mappings":"AAOA,OAAO,eAAe,CAAC;AAGvB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,UAAU,EACV,WAAW,EACX,cAAc,EACd,MAAM,EACN,iBAAwB,GACzB,EAAE;IACD,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,2CAeA"}

package/dist/esm/components/Chart/GaugeChart.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import { select } from 'd3-selection';
-import { arc } from 'd3-shape';
-import { interpolate } from 'd3-interpolate';
+import { useEffect, useRef, useState } from "react";
+// import { arc } from 'd3-shape';
+// import { interpolate } from 'd3-interpolate';
+// import { select } from 'd3-selection';
+// These two are just for type checking
 import 'd3-transition';
 import { axisFormatter } from "../../utils/axisFormatter";
 export default function GaugeChart({ data, xAxisField, xAxisFormat, containerStyle, colors, isAnimationActive = true, }) {
@@ -24,10 +25,31 @@ function D3Gauge({ percentage, containerStyle, xAxisFormat, colors, isAnimationA
     // Gauge arc from -135° to +135°
     const startAngle = -(3 * Math.PI) / 4;
     const totalAngle = (3 * Math.PI) / 2;
+    // We need to dynamically import d3 to avoid cjs/esm issues.
+    const [arc, setArc] = useState(null);
+    const [interpolate, setInterpolate] = useState(null);
+    const [select, setSelect] = useState(null);
+    useEffect(() => {
+        console.log('Loading D3 modules');
+        import('d3-shape').then(({ arc }) => {
+            console.log('d3-shape loaded');
+            setArc(() => arc);
+        }).catch(err => console.error('Failed to load d3-shape:', err));
+        import('d3-interpolate').then(({ interpolate }) => {
+            console.log('d3-interpolate loaded');
+            setInterpolate(() => interpolate);
+        }).catch(err => console.error('Failed to load d3-interpolate:', err));
+        import('d3-selection').then(({ select }) => {
+            console.log('d3-selection loaded');
+            setSelect(() => select);
+        }).catch(err => console.error('Failed to load d3-selection:', err));
+    }, []);
     // --- Initialization ---
     useEffect(() => {
-        if (!containerRef.current)
+        console.log('effect run');
+        if (!containerRef.current || !select)
             return;
+        console.log('made it');
         const container = containerRef.current;
         select(container).select('svg').remove();
         svgRef.current = select(container)
@@ -64,7 +86,7 @@ function D3Gauge({ percentage, containerStyle, xAxisFormat, colors, isAnimationA
             svgRef.current?.remove();
             svgRef.current = null;
         };
-    }, [colors]);
+    }, [colors, select]);
     // --- Update & Resize ---
     useEffect(() => {
         if (!containerRef.current ||
@@ -72,7 +94,10 @@ function D3Gauge({ percentage, containerStyle, xAxisFormat, colors, isAnimationA
             !gaugeGroupRef.current ||
             !needleRef.current ||
             !needleOutlineRef.current ||
-            !textRef.current)
+            !textRef.current ||
+            !arc ||
+            !interpolate ||
+            !select)
             return;
         // Use getBoundingClientRect() so we get accurate dimensions.
         const rect = containerRef.current.getBoundingClientRect();
@@ -179,7 +204,7 @@ function D3Gauge({ percentage, containerStyle, xAxisFormat, colors, isAnimationA
         }
         previousPercentageRef.current = percentage;
         firstMountRef.current = false;
-    }, [percentage, colors, isAnimationActive, xAxisFormat]);
+    }, [percentage, colors, isAnimationActive, xAxisFormat, select, arc, interpolate]);
     // Use ResizeObserver to trigger updates on container size changes.
     useEffect(() => {
         if (!containerRef.current)

package/dist/esm/components/Chart/InternalChart.js

@@ -461,7 +461,7 @@ export default function InternalChart({ report, colors, className, containerStyl
                             marginBottom: 'auto',
                             display: 'flex',
                         }, children: _jsx(MetricComponent, { error: error, isLoading: loading, report: report, children: report?.rows?.[0]?.[report.xAxisField] }) })), report.chartType !== 'table' && report.chartType !== 'metric' && (_jsx(ChartDisplay, { config: report, containerStyle: {
-                            minHeight: ['gauge'].includes(report.chartType) ? 500 : 400,
+                            minHeight: 300,
                             width: ['US map', 'World map'].includes(report.chartType) ? '70%' : ['gauge'].includes(report.chartType) ? undefined : '100%',
                             height: ['US map', 'World map'].includes(report.chartType) ? 'fit-content' : ['gauge'].includes(report.chartType) ? 500 : undefined,
                             marginLeft: ['gauge'].includes(report.chartType) ? 'undefined' : 'auto',

package/dist/esm/components/Chart/MapChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/MapChart.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAuT3C,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,cAAc,GACf,EAAE;IACD,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,UAAU,CAAC;KAAE,EAAE,CAAC;IACrE,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC,2CAuJA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,cAAc,GACf,EAAE;IACD,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,UAAU,CAAC;KAAE,EAAE,CAAC;IACrE,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC,2CAwJA"}
+{"version":3,"file":"MapChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/MapChart.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAuT3C,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,cAAc,GACf,EAAE;IACD,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,UAAU,CAAC;KAAE,EAAE,CAAC;IACrE,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC,2CAgKA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,cAAc,GACf,EAAE;IACD,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,UAAU,CAAC;KAAE,EAAE,CAAC;IACrE,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC,2CAiKA"}

package/dist/esm/components/Chart/MapChart.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ComposableMap, Geographies, Geography, useMapContext } from "react-simple-maps";
-import { geoCentroid } from "d3-geo";
-import { scaleLog } from "d3-scale";
-import { useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import ChartTooltipFrame from "./ChartTooltipFrame";
 import ChartTooltipRow from "./ChartTooltipRow";
 import { valueFormatter } from "../../utils/valueFormatter";
@@ -321,7 +319,16 @@ export function USMap({ theme, data, xAxisField, xAxisFormat, yAxisFields, onCli
         return acc;
     }, {});
     const measureField = yAxisFields[0].field;
+    // These must be dynamically loaded as they are not available as CommonJS modules.
+    const [scaleLog, setScaleLog] = useState(null);
+    useEffect(() => {
+        import("d3-scale").then((scale) => {
+            setScaleLog(() => scale.scaleLog);
+        });
+    }, []);
     const colorScale = useMemo(() => {
+        if (!scaleLog)
+            return () => '#FFFFFF';
         const values = Object.values(mappedData)
             .map((d) => parseFloat(d[measureField]))
             .filter((v) => !isNaN(v));
@@ -349,7 +356,7 @@ export function USMap({ theme, data, xAxisField, xAxisFormat, yAxisFields, onCli
         return scaleLog()
             .domain([minValue, maxValue])
             .range([gradientStart ?? "#f7fbff", gradientStop ?? "#08306b"]);
-    }, [mappedData, measureField, colorMap, yAxisFields, xAxisField, colors]);
+    }, [mappedData, measureField, colorMap, yAxisFields, xAxisField, colors, scaleLog]);
     const hoveredValue = useMemo(() => {
         return !hoveredState ? undefined : mappedData[fipsToNames[hoveredState]?.abbreviation ?? '']?.[measureField] ??
             mappedData[fipsToNames[hoveredState]?.name ?? '']?.[measureField] ??
@@ -415,7 +422,16 @@ export function WorldMap({ theme, data, xAxisField, xAxisFormat, yAxisFields, on
         return acc;
     }, {});
     const measureField = yAxisFields[0].field;
+    // These must be dynamically loaded as they are not available as CommonJS modules.
+    const [scaleLog, setScaleLog] = useState(null);
+    useEffect(() => {
+        import("d3-scale").then((scale) => {
+            setScaleLog(() => scale.scaleLog);
+        });
+    }, []);
     const colorScale = useMemo(() => {
+        if (!scaleLog)
+            return () => '#FFFFFF';
         const values = Object.values(mappedData)
             .map((d) => parseFloat(d[measureField]))
             .filter((v) => !isNaN(v));
@@ -443,7 +459,7 @@ export function WorldMap({ theme, data, xAxisField, xAxisFormat, yAxisFields, on
         return scaleLog()
             .domain([minValue, maxValue])
             .range([gradientStart ?? "#f7fbff", gradientStop ?? "#08306b"]);
-    }, [mappedData, measureField, colorMap, yAxisFields, xAxisField, colors]);
+    }, [mappedData, measureField, colorMap, yAxisFields, xAxisField, colors, scaleLog]);
     const hoveredValue = useMemo(() => {
         return !hoveredCountry ? undefined : mappedData[isoToNames[hoveredCountry]?.abbreviation ?? '']?.[measureField] ??
             mappedData[isoToNames[hoveredCountry]?.name ?? '']?.[measureField] ??
@@ -503,6 +519,13 @@ export function WorldMap({ theme, data, xAxisField, xAxisFormat, yAxisFields, on
 }
 function MapLayout({ geographyUrl, hoveredRegion, setHoveredRegion, setHoveredCoords, containerRef, mappedData, measureField, colorScale, onClickChartElement, regionNames, }) {
     const { projection } = useMapContext();
+    // These must be dynamically loaded as they are not available as CommonJS modules.
+    const [geoCentroid, setGeoCentroid] = useState(null);
+    useEffect(() => {
+        import("d3-geo").then((geo) => {
+            setGeoCentroid(() => geo.geoCentroid);
+        });
+    }, []);
     return (_jsx(Geographies, { geography: geographyUrl, children: ({ geographies }) => geographies.map((geo, index) => {
             const regionData = mappedData[geo.id] ??
                 mappedData[regionNames[geo.id]?.abbreviation ?? ''] ??
@@ -512,6 +535,8 @@ function MapLayout({ geographyUrl, hoveredRegion, setHoveredRegion, setHoveredCo
             const value = regionData ? parseFloat(regionData[measureField]) : null;
             const fill = value != null ? colorScale(value) : "#D6D6DA";
             return _jsx(Geography, { geography: geo, fill: fill, stroke: "#FFFFFF", strokeWidth: 0.5, onMouseEnter: () => {
+                    if (!geoCentroid)
+                        return;
                     const centroid = geoCentroid(geo);
                     const projected = projection(centroid);
                     if (projected && containerRef.current) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quillsql/react",
-  "version": "2.13.42",
+  "version": "2.13.43",
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",
@@ -29,7 +29,10 @@
     "@monaco-editor/react": "^4.5.1",
     "big.js": "^6.2.1",
     "d3-geo": "2.0.2",
-    "d3-transition": "2.0.0",
+    "d3-interpolate": "3.0.1",
+    "d3-scale": "4.0.2",
+    "d3-selection": "2.0.0",
+    "d3-shape": "3.2.0",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^2.0.0",
     "fast-deep-equal": "^3.1.3",