@quillsql/react 2.13.48 → 2.13.49

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

@@ -1,5 +1,5 @@
 import 'd3-transition';
-import { AxisFormat } from "../../Dashboard";
+import { AxisFormat } from '../../Dashboard';
 export default function GaugeChart({ data, xAxisField, xAxisFormat, containerStyle, colors, isAnimationActive, }: {
     data: any[];
     xAxisField: string;

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":"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"}
+{"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,2CAiBA"}

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+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";
+import { axisFormatter } from '../../utils/axisFormatter';
 export default function GaugeChart({ data, xAxisField, xAxisFormat, containerStyle, colors, isAnimationActive = true, }) {
     const percentage = parseFloat(data[0]?.[xAxisField]) || 0;
     const normalizedPercentage = ['whole_number', 'two_decimal_places'].includes(xAxisFormat)
@@ -13,7 +13,7 @@ export default function GaugeChart({ data, xAxisField, xAxisFormat, containerSty
         : Math.max(Math.min(percentage, 1), 0);
     return (_jsx(D3Gauge, { percentage: normalizedPercentage, xAxisFormat: xAxisFormat, containerStyle: { ...containerStyle }, colors: colors, isAnimationActive: isAnimationActive }));
 }
-function D3Gauge({ percentage, containerStyle, xAxisFormat, colors, isAnimationActive }) {
+function D3Gauge({ percentage, containerStyle, xAxisFormat, colors, isAnimationActive, }) {
     const containerRef = useRef(null);
     const svgRef = useRef(null);
     const gaugeGroupRef = useRef(null);
@@ -32,13 +32,13 @@ function D3Gauge({ percentage, containerStyle, xAxisFormat, colors, isAnimationA
     useEffect(() => {
         import('d3-shape').then(({ arc }) => {
             setArc(() => arc);
-        }).catch(err => console.error('Failed to load d3-shape:', err));
+        });
         import('d3-interpolate').then(({ interpolate }) => {
             setInterpolate(() => interpolate);
-        }).catch(err => console.error('Failed to load d3-interpolate:', err));
+        });
         import('d3-selection').then(({ select }) => {
             setSelect(() => select);
-        }).catch(err => console.error('Failed to load d3-selection:', err));
+        });
     }, []);
     // --- Initialization ---
     useEffect(() => {
@@ -61,16 +61,19 @@ function D3Gauge({ percentage, containerStyle, xAxisFormat, colors, isAnimationA
             gaugeGroupRef.current.append('path').attr('class', `arc-seg seg${i}`);
         }
         // Create needle outline and needle.
-        needleOutlineRef.current = gaugeGroupRef.current.append('line')
+        needleOutlineRef.current = gaugeGroupRef.current
+            .append('line')
             .attr('stroke', 'white')
             .attr('stroke-width', 8)
             .attr('stroke-linecap', 'round');
-        needleRef.current = gaugeGroupRef.current.append('line')
+        needleRef.current = gaugeGroupRef.current
+            .append('line')
             .attr('stroke', 'black')
             .attr('stroke-width', 4)
             .attr('stroke-linecap', 'round');
         // Create text label.
-        textRef.current = gaugeGroupRef.current.append('text')
+        textRef.current = gaugeGroupRef.current
+            .append('text')
             .attr('class', 'gauge-label')
             .attr('text-anchor', 'middle')
             .attr('fill', '#000')
@@ -107,21 +110,31 @@ function D3Gauge({ percentage, containerStyle, xAxisFormat, colors, isAnimationA
         // Vertical offset to visually center the 270° arc.
         const verticalOffset = gaugeHeight * 0.05;
         // Update viewBox so our internal coordinates scale.
-        svgRef.current
-            .attr('viewBox', `0 0 ${gaugeWidth} ${gaugeHeight}`);
+        svgRef.current.attr('viewBox', `0 0 ${gaugeWidth} ${gaugeHeight}`);
         // Center the gauge group.
         gaugeGroupRef.current.attr('transform', `translate(${gaugeWidth / 2}, ${gaugeHeight / 2 + verticalOffset})`);
         // Draw the arc segments.
         const segments = [
-            { start: startAngle, end: startAngle + totalAngle / 3, color: colors[1] || 'red' },
-            { 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' },
+            {
+                start: startAngle,
+                end: startAngle + totalAngle / 3,
+                color: colors[1] || 'red',
+            },
+            {
+                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 = arc()
-            .innerRadius(innerRadius)
-            .outerRadius(radius);
+        const arcGenerator = arc().innerRadius(innerRadius).outerRadius(radius);
         segments.forEach((seg, i) => {
-            gaugeGroupRef.current?.select(`.arc-seg.seg${i}`)
+            gaugeGroupRef.current
+                ?.select(`.arc-seg.seg${i}`)
                 .attr('d', arcGenerator({
                 innerRadius,
                 outerRadius: radius,
@@ -144,47 +157,53 @@ function D3Gauge({ percentage, containerStyle, xAxisFormat, colors, isAnimationA
         const newAngle = startAngle + totalAngle * percentage - Math.PI / 2;
         const endpoints = calcEndpoints(newAngle);
         // Update text font-size relative to radius.
-        textRef.current.attr('font-size', radius / 3)
+        textRef.current
+            .attr('font-size', radius / 3)
             // Position text below the gauge center.
             .attr('y', radius * 0.1);
         if (isAnimationActive) {
             const prevAngle = startAngle + totalAngle * previousPercentageRef.current - Math.PI / 2;
             const angleInterpolator = interpolate(prevAngle, newAngle);
             const textInterpolator = interpolate(previousPercentageRef.current, percentage);
-            needleRef.current.interrupt()
+            needleRef.current
+                .interrupt()
                 .transition()
                 .duration(1000)
-                .tween("needle", function () {
+                .tween('needle', function () {
                 return function (t) {
                     const currentAngle = angleInterpolator(t);
                     const { x1, y1, x2, y2 } = calcEndpoints(currentAngle);
-                    needleRef.current
-                        .attr("x1", x1)
-                        .attr("y1", y1)
-                        .attr("x2", x2)
-                        .attr("y2", y2);
-                    needleOutlineRef.current
-                        .attr("x1", x1)
-                        .attr("y1", y1)
-                        .attr("x2", x2)
-                        .attr("y2", y2);
+                    needleRef
+                        .current.attr('x1', x1)
+                        .attr('y1', y1)
+                        .attr('x2', x2)
+                        .attr('y2', y2);
+                    needleOutlineRef
+                        .current.attr('x1', x1)
+                        .attr('y1', y1)
+                        .attr('x2', x2)
+                        .attr('y2', y2);
                     const currentPercentage = textInterpolator(t);
                     const percentText = axisFormatter({
-                        value: xAxisFormat === 'percent' ? currentPercentage : currentPercentage * 100,
+                        value: xAxisFormat === 'percent'
+                            ? currentPercentage
+                            : currentPercentage * 100,
                         field: 'amount',
-                        fields: [{ field: 'amount', format: xAxisFormat }]
+                        fields: [{ field: 'amount', format: xAxisFormat }],
                     }) + (xAxisFormat === 'percent' ? '' : '%');
                     textRef.current?.text(percentText);
                 };
             });
         }
         else {
-            needleRef.current.interrupt()
+            needleRef.current
+                .interrupt()
                 .attr('x1', endpoints.x1)
                 .attr('y1', endpoints.y1)
                 .attr('x2', endpoints.x2)
                 .attr('y2', endpoints.y2);
-            needleOutlineRef.current.interrupt()
+            needleOutlineRef.current
+                .interrupt()
                 .attr('x1', endpoints.x1)
                 .attr('y1', endpoints.y1)
                 .attr('x2', endpoints.x2)
@@ -192,13 +211,21 @@ function D3Gauge({ percentage, containerStyle, xAxisFormat, colors, isAnimationA
             const percentText = axisFormatter({
                 value: xAxisFormat === 'percent' ? percentage : percentage * 100,
                 field: 'amount',
-                fields: [{ field: 'amount', format: xAxisFormat }]
+                fields: [{ field: 'amount', format: xAxisFormat }],
             }) + (xAxisFormat === 'percent' ? '' : '%');
             textRef.current.text(percentText);
         }
         previousPercentageRef.current = percentage;
         firstMountRef.current = false;
-    }, [percentage, colors, isAnimationActive, xAxisFormat, select, arc, interpolate]);
+    }, [
+        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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InternalChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/InternalChart.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAgB,UAAU,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,WAAW,EAAkB,MAAM,qBAAqB,CAAC;AAOlE,wBAAgB,YAAY,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,WAiH5D;AAyFD,MAAM,MAAM,YAAY,GAAG;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,MAAM,EACN,MAAM,EACN,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,2BAAmC,EACnC,yBAAgC,EAChC,wBAAgC,EAChC,sBAAgC,EAChC,sBAAsB,EACtB,mBAAmB,EACnB,mBAA2B,EAC3B,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,gBAAuC,EACvC,eAAsC,EACtC,oBAAyD,EACzD,wBAA+C,EAC/C,eAAsC,EACtC,OAAO,EACP,uBAAuB,EACvB,mBAAmB,EACnB,OAAO,EACP,KAAK,EACL,OAAO,EACP,oBAAoB,EACpB,aAAa,GACd,EAAE,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG;IAChC,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uBAAuB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7D,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,2CAudA"}
+{"version":3,"file":"InternalChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/InternalChart.tsx"],"names":[],"mappings":"AAmCA,OAAO,EAAgB,UAAU,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,WAAW,EAAkB,MAAM,qBAAqB,CAAC;AAQlE,wBAAgB,YAAY,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,WAiH5D;AAyFD,MAAM,MAAM,YAAY,GAAG;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,MAAM,EACN,MAAM,EACN,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,2BAAmC,EACnC,yBAAgC,EAChC,wBAAgC,EAChC,sBAAgC,EAChC,sBAAsB,EACtB,mBAAmB,EACnB,mBAA2B,EAC3B,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,gBAAuC,EACvC,eAA+C,EAC/C,oBAAyD,EACzD,wBAA+C,EAC/C,eAAsC,EACtC,OAAO,EACP,uBAAuB,EACvB,mBAAmB,EACnB,OAAO,EACP,KAAK,EACL,OAAO,EACP,oBAAoB,EACpB,aAAa,GACd,EAAE,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG;IAChC,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uBAAuB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7D,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,2CA+dA"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useContext, useMemo, useRef, useLayoutEffect } from 'react';
+import { useState, useEffect, useContext, useMemo, useRef, useLayoutEffect, } from 'react';
 import { differenceInHours } from 'date-fns';
 import { DashboardConfigContext, ReportFiltersContext, ThemeContext, } from '../../Context';
 import { QuillLoadingSkeleton } from '../../components/Chart/ChartSkeleton';
@@ -9,13 +9,13 @@ import {
 DashboardFilterType as DashboardFilterVariant, FilterType, } from '../../models/Filter';
 import { applyCustomFilterToDashDateFilter } from '../../utils/filterProcessing';
 import { DashboardFilter } from '../../components/Dashboard/DashboardFilter';
-import { QuillSelectComponent } from '../../components/QuillSelect';
 import { QuillDateRangePicker } from '../../DateRangePicker/QuillDateRangePicker';
 import QuillMetricComponent from '../../components/Dashboard/MetricComponent';
-import { COMPARISON_RANGE, defaultOptionsV2, getRangeFromPresetOptions, PRIMARY_RANGE, } from '../../DateRangePicker/dateRangePickerUtils';
+import { COMPARISON_RANGE, convertPresetOptionsToSelectableList, defaultOptionsV2, getRangeFromPresetOptions, } from '../../DateRangePicker/dateRangePickerUtils';
 import { ChartDisplay } from '../../Chart';
 import { TEMP_REPORT_ID } from '../../models/Report';
 import { QuillMultiSelectComponentWithCombo } from '../QuillMultiSelectWithCombo';
+import { QuillSelectComponentWithCombo } from '../QuillSelectWithCombo';
 function areDatesNearby(date1, date2) {
     return Math.abs(differenceInHours(date1, date2)) < 24;
 }
@@ -160,7 +160,7 @@ const TogglePrimitive = ({ value, onClick, style, disabled, }) => {
                     color: '#607D8B',
                 } }))] }));
 };
-export default function InternalChart({ report, colors, className, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, hideDateRangeFilter = false, filtersEnabled, setFiltersEnabled, mapColorsToFields, LoadingComponent = QuillLoadingSkeleton, SelectComponent = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponentWithCombo, DateRangePickerComponent = QuillDateRangePicker, MetricComponent = QuillMetricComponent, filters, onDashboardFilterChange, onClickChartElement, loading, error, isAdmin, filterToggleDisabled, layoutChanged, }) {
+export default function InternalChart({ report, colors, className, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, hideDateRangeFilter = false, filtersEnabled, setFiltersEnabled, mapColorsToFields, LoadingComponent = QuillLoadingSkeleton, SelectComponent = QuillSelectComponentWithCombo, MultiSelectComponent = QuillMultiSelectComponentWithCombo, DateRangePickerComponent = QuillDateRangePicker, MetricComponent = QuillMetricComponent, filters, onDashboardFilterChange, onClickChartElement, loading, error, isAdmin, filterToggleDisabled, layoutChanged, }) {
     const { reportFilters } = useContext(ReportFiltersContext);
     const { dashboardConfig } = useContext(DashboardConfigContext);
     const currentReportFilters = useMemo(() => {
@@ -184,28 +184,12 @@ export default function InternalChart({ report, colors, className, containerStyl
         });
     }, [reportFilters, report?.id]);
     const reportDateFilter = useMemo(() => {
-        return Object.values(reportFilters[report?.id ?? TEMP_REPORT_ID] ?? {}).find((f) => f.filter.filterType === 'date_range')?.filter;
+        return Object.values(reportFilters[report?.id ?? TEMP_REPORT_ID] ?? {}).find((f) => f.filter.filterType === 'date_range')
+            ?.filter;
     }, [reportFilters, report?.id]);
     const presetOptions = useMemo(() => {
         return reportDateFilter
-            ? (reportDateFilter.presetRanges?.map((elem) => {
-                if (!elem.isStatic) {
-                    return {
-                        label: elem.label,
-                        value: elem.value,
-                        startDate: PRIMARY_RANGE[elem.value]?.startDate ??
-                            PRIMARY_RANGE['LAST_30_DAYS'].startDate,
-                        endDate: PRIMARY_RANGE[elem.value]?.endDate ??
-                            PRIMARY_RANGE['LAST_30_DAYS'].endDate,
-                    };
-                }
-                return {
-                    label: elem.label,
-                    value: elem.value,
-                    startDate: new Date(elem.startDate),
-                    endDate: new Date(elem.endDate),
-                };
-            }) ?? defaultOptionsV2)
+            ? convertPresetOptionsToSelectableList(reportDateFilter.presetOptions ?? [], reportDateFilter.defaultPresetRanges ?? [])
             : defaultOptionsV2;
     }, [reportDateFilter]);
     // const userFilters = useMemo(() => {
@@ -221,10 +205,7 @@ export default function InternalChart({ report, colors, className, containerStyl
     useEffect(() => {
         if (reportDateFilter) {
             // Filter for custom date filter that applies to the report's dateField
-            const customDateFilter = filters?.find((f) => f.filterType === FilterType.Date
-            // FIXME: this is the correct way to do it but the demo has a hardcoded filter field
-            // && f.field === report?.dateField?.field && f.table === report?.dateField?.table,
-            );
+            const customDateFilter = filters?.find((f) => f.filterType === FilterType.Date);
             if (!customDateFilter) {
                 return;
             }
@@ -343,8 +324,8 @@ export default function InternalChart({ report, colors, className, containerStyl
         const handleResize = () => {
             measureItems();
         };
-        window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener("resize", handleResize);
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
     }, [currentReportFilters, filtersEnabled, layoutChanged]);
     if (error) {
         return (_jsx("div", { style: containerStyle, className: className, children: _jsx(ChartError, { errorMessage: error }) }));
@@ -402,7 +383,9 @@ export default function InternalChart({ report, colors, className, containerStyl
                             // If filters are expanded, show all filters, otherwise show only the first row
                             maxHeight: filtersExpanded ? undefined : 108,
                             minWidth: 500,
-                            paddingBottom: !filtersExpanded && filtersOverflowing && filtersEnabled ? 116 : 0,
+                            paddingBottom: !filtersExpanded && filtersOverflowing && filtersEnabled
+                                ? 116
+                                : 0,
                             position: 'relative',
                         }, children: [filtersEnabled &&
                                 currentReportFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: {
@@ -413,7 +396,9 @@ export default function InternalChart({ report, colors, className, containerStyl
                                         ...filterValues[filter.filter.label],
                                     }, isLoading: filter.loading, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent, disabled: !filtersEnabled, containerStyle: {
                                         // display: !filtersExpanded && visibleFilters[index] ? 'none' : 'inline',
-                                        visibility: !filtersExpanded && visibleFilters[index] ? 'hidden' : 'visible',
+                                        visibility: !filtersExpanded && visibleFilters[index]
+                                            ? 'hidden'
+                                            : 'visible',
                                     } }, index))), filtersOverflowing && filtersEnabled && (_jsx("div", { style: {
                                     width: '100%',
                                     position: filtersExpanded ? 'static' : 'absolute',
@@ -462,9 +447,21 @@ export default function InternalChart({ report, colors, className, containerStyl
                             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: 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',
-                            marginRight: ['gauge'].includes(report.chartType) ? 'undefined' : 'auto',
+                            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',
+                            marginRight: ['gauge'].includes(report.chartType)
+                                ? 'undefined'
+                                : 'auto',
                         }, reportId: report.id, colors: colors, className: className, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle, cartesianGridLineColor: cartesianGridLineColor, hideDateRangeFilter: hideDateRangeFilter, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, loading: loading, scrollable: true, colorMap: colorMap, LoadingComponent: LoadingComponent, onClickChartElement: onClickChartElement, referenceLines: report.referenceLineYValues }))] }))] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AA4B7C,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,QAAa,EACb,WAAW,EACX,IAAI,EACJ,cAAc,EACd,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,2BAAmC,EACnC,yBAAgC,EAChC,wBAAgC,EAChC,sBAAgC,EAChC,mBAA6B,EAC7B,sBAAsB,EACtB,mBAA8B,EAC9B,UAAU,EACV,cAAc,GACf,EAAE;IACD,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,GAAG,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,2BAA2B,EAAE,OAAO,CAAC;IACrC,yBAAyB,EAAE,OAAO,CAAC;IACnC,wBAAwB,EAAE,OAAO,CAAC;IAClC,sBAAsB,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3C,mBAAmB,EAAE,OAAO,GAAG,QAAQ,CAAC;IACxC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,cAAc,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,EAAE,CAAA;KAAC,EAAE,CAAC;CACrD,2CAyRA"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AA4B7C,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,QAAa,EACb,WAAW,EACX,IAAI,EACJ,cAAc,EACd,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,2BAAmC,EACnC,yBAAgC,EAChC,wBAAgC,EAChC,sBAAgC,EAChC,mBAA6B,EAC7B,sBAAsB,EACtB,mBAA8B,EAC9B,UAAU,EACV,cAAc,GACf,EAAE;IACD,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,GAAG,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,2BAA2B,EAAE,OAAO,CAAC;IACrC,yBAAyB,EAAE,OAAO,CAAC;IACnC,wBAAwB,EAAE,OAAO,CAAC;IAClC,sBAAsB,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3C,mBAAmB,EAAE,OAAO,GAAG,QAAQ,CAAC;IACxC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,cAAc,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,EAAE,CAAC;CACvD,2CAySA"}

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

@@ -160,7 +160,9 @@ export default function LineChart({ colors, colorMap = {}, yAxisFields, data, co
                             const gradientStop = getCustomColor(index, elem.field, 'stop') ?? '#00000000';
                             const uniqueId = `gradient_${hashCode(gradientStart)}_${hashCode(gradientStop)}`;
                             return (_jsx("defs", { children: _jsxs("linearGradient", { id: uniqueId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: gradientStart, stopOpacity: 0.4 }), _jsx("stop", { offset: "95%", stopColor: gradientStop, stopOpacity: 0 })] }) }, `defs_${uniqueId}_${index}`));
-                        }), referenceLines && Array.isArray(referenceLines) && (referenceLines.map(({ label, query }) => (_jsx(Customized, { component: (props) => _jsx(CustomReferenceLine, { ...props, referenceLine: query, label: label }) }, label)))), yAxisFields &&
+                        }), referenceLines &&
+                        Array.isArray(referenceLines) &&
+                        referenceLines.map(({ label, query }) => (_jsx(Customized, { component: (props) => (_jsx(CustomReferenceLine, { ...props, referenceLine: query, label: label })) }, label))), yAxisFields &&
                         yAxisFields.map((elem, index) => {
                             const gradientStart = hashCode(getCustomColor(index, elem.field, 'start') ??
                                 getCustomColor(index, elem.field) ??

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

@@ -1,6 +1,6 @@
-import { QuillTheme } from "../../QuillProvider";
-import { AxisFormat } from "../../Dashboard";
-import { ColorMapType } from "../../Chart";
+import { QuillTheme } from '../../QuillProvider';
+import { AxisFormat } from '../../Dashboard';
+import { ColorMapType } from '../../Chart';
 export declare function USMap({ theme, data, xAxisField, xAxisFormat, yAxisFields, onClickChartElement, colors, colorMap, className, containerStyle, }: {
     theme: QuillTheme | null;
     data: any[];

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":"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"}
+{"version":3,"file":"MapChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/MapChart.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AA+T3C,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,CAAA;KAAE,EAAE,CAAC;IACpE,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,2CAsLA;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,CAAA;KAAE,EAAE,CAAC;IACpE,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,2CAuLA"}

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ComposableMap, Geographies, Geography, useMapContext } from "react-simple-maps";
-import { useEffect, useMemo, useRef, useState } from "react";
-import ChartTooltipFrame from "./ChartTooltipFrame";
-import ChartTooltipRow from "./ChartTooltipRow";
-import { valueFormatter } from "../../utils/valueFormatter";
-const statesUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
-const countriesUrl = "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json";
+import { ComposableMap, Geographies, Geography, useMapContext, } from 'react-simple-maps';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import ChartTooltipFrame from './ChartTooltipFrame';
+import ChartTooltipRow from './ChartTooltipRow';
+import { valueFormatter } from '../../utils/valueFormatter';
+const statesUrl = 'https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json';
+const countriesUrl = 'https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json';
 const fipsToNames = {
     '01': { name: 'Alabama', abbreviation: 'AL' },
     '02': { name: 'Alaska', abbreviation: 'AK' },
@@ -130,7 +130,10 @@ const isoToNames = {
     '233': { name: 'Estonia', abbreviation: 'EE' },
     '234': { name: 'Faroe Islands', abbreviation: 'FO' },
     '238': { name: 'Falkland Islands', abbreviation: 'FK' },
-    '239': { name: 'South Georgia and the South Sandwich Islands', abbreviation: 'GS' },
+    '239': {
+        name: 'South Georgia and the South Sandwich Islands',
+        abbreviation: 'GS',
+    },
     '242': { name: 'Fiji', abbreviation: 'FJ' },
     '246': { name: 'Finland', abbreviation: 'FI' },
     '248': { name: 'Åland Islands', abbreviation: 'AX' },
@@ -247,7 +250,10 @@ const isoToNames = {
     '643': { name: 'Russia', abbreviation: 'RU' },
     '646': { name: 'Rwanda', abbreviation: 'RW' },
     '652': { name: 'Saint Barthélemy', abbreviation: 'BL' },
-    '654': { name: 'Saint Helena, Ascension and Tristan da Cunha', abbreviation: 'SH' },
+    '654': {
+        name: 'Saint Helena, Ascension and Tristan da Cunha',
+        abbreviation: 'SH',
+    },
     '659': { name: 'Saint Kitts and Nevis', abbreviation: 'KN' },
     '660': { name: 'Anguilla', abbreviation: 'AI' },
     '662': { name: 'Saint Lucia', abbreviation: 'LC' },
@@ -322,7 +328,7 @@ export function USMap({ theme, data, xAxisField, xAxisFormat, yAxisFields, onCli
     // These must be dynamically loaded as they are not available as CommonJS modules.
     const [scaleLog, setScaleLog] = useState(null);
     useEffect(() => {
-        import("d3-scale").then((scale) => {
+        import('d3-scale').then((scale) => {
             setScaleLog(() => scale.scaleLog);
         });
     }, []);
@@ -355,24 +361,34 @@ export function USMap({ theme, data, xAxisField, xAxisFormat, yAxisFields, onCli
             colors[0];
         return scaleLog()
             .domain([minValue, maxValue])
-            .range([gradientStart ?? "#f7fbff", gradientStop ?? "#08306b"]);
-    }, [mappedData, measureField, colorMap, yAxisFields, xAxisField, colors, scaleLog]);
+            .range([gradientStart ?? '#f7fbff', gradientStop ?? '#08306b']);
+    }, [
+        mappedData,
+        measureField,
+        colorMap,
+        yAxisFields,
+        xAxisField,
+        colors,
+        scaleLog,
+    ]);
     const hoveredValue = useMemo(() => {
-        return !hoveredState ? undefined : mappedData[fipsToNames[hoveredState]?.abbreviation ?? '']?.[measureField] ??
-            mappedData[fipsToNames[hoveredState]?.name ?? '']?.[measureField] ??
-            mappedData[fipsToNames[hoveredState]?.abbreviation?.toLowerCase() ?? '']?.[measureField] ??
-            mappedData[fipsToNames[hoveredState]?.name?.toLowerCase() ?? '']?.[measureField];
+        return !hoveredState
+            ? undefined
+            : (mappedData[fipsToNames[hoveredState]?.abbreviation ?? '']?.[measureField] ??
+                mappedData[fipsToNames[hoveredState]?.name ?? '']?.[measureField] ??
+                mappedData[fipsToNames[hoveredState]?.abbreviation?.toLowerCase() ?? '']?.[measureField] ??
+                mappedData[fipsToNames[hoveredState]?.name?.toLowerCase() ?? '']?.[measureField]);
     }, [hoveredState, mappedData, measureField]);
     return (_jsxs("div", { ref: containerRef, className: className, style: {
-            width: "100%",
-            height: "auto",
+            width: '100%',
+            height: 'auto',
             marginTop: '-6.5%',
             zIndex: 0,
             ...containerStyle,
-            position: "relative",
+            position: 'relative',
         }, children: [_jsx(ComposableMap, { projection: "geoAlbersUsa", children: _jsx(MapLayout, { hoveredRegion: hoveredState, setHoveredRegion: setHoveredState, setHoveredCoords: setHoveredCoords, containerRef: containerRef, mappedData: mappedData, measureField: measureField, colorScale: colorScale, onClickChartElement: onClickChartElement, regionNames: fipsToNames, geographyUrl: statesUrl }) }), hoveredCoords && hoveredState && (_jsx("div", { style: {
-                    position: "absolute",
-                    pointerEvents: "none",
+                    position: 'absolute',
+                    pointerEvents: 'none',
                     left: hoveredCoords[0],
                     top: hoveredCoords[1],
                 }, children: _jsxs(ChartTooltipFrame, { theme: theme, children: [_jsx("div", { style: {
@@ -425,7 +441,7 @@ export function WorldMap({ theme, data, xAxisField, xAxisFormat, yAxisFields, on
     // These must be dynamically loaded as they are not available as CommonJS modules.
     const [scaleLog, setScaleLog] = useState(null);
     useEffect(() => {
-        import("d3-scale").then((scale) => {
+        import('d3-scale').then((scale) => {
             setScaleLog(() => scale.scaleLog);
         });
     }, []);
@@ -458,25 +474,35 @@ export function WorldMap({ theme, data, xAxisField, xAxisFormat, yAxisFields, on
             colors[0];
         return scaleLog()
             .domain([minValue, maxValue])
-            .range([gradientStart ?? "#f7fbff", gradientStop ?? "#08306b"]);
-    }, [mappedData, measureField, colorMap, yAxisFields, xAxisField, colors, scaleLog]);
+            .range([gradientStart ?? '#f7fbff', gradientStop ?? '#08306b']);
+    }, [
+        mappedData,
+        measureField,
+        colorMap,
+        yAxisFields,
+        xAxisField,
+        colors,
+        scaleLog,
+    ]);
     const hoveredValue = useMemo(() => {
-        return !hoveredCountry ? undefined : mappedData[isoToNames[hoveredCountry]?.abbreviation ?? '']?.[measureField] ??
-            mappedData[isoToNames[hoveredCountry]?.name ?? '']?.[measureField] ??
-            mappedData[isoToNames[hoveredCountry]?.abbreviation?.toLowerCase() ?? '']?.[measureField] ??
-            mappedData[isoToNames[hoveredCountry]?.name?.toLowerCase() ?? '']?.[measureField];
+        return !hoveredCountry
+            ? undefined
+            : (mappedData[isoToNames[hoveredCountry]?.abbreviation ?? '']?.[measureField] ??
+                mappedData[isoToNames[hoveredCountry]?.name ?? '']?.[measureField] ??
+                mappedData[isoToNames[hoveredCountry]?.abbreviation?.toLowerCase() ?? '']?.[measureField] ??
+                mappedData[isoToNames[hoveredCountry]?.name?.toLowerCase() ?? '']?.[measureField]);
     }, [hoveredCountry, mappedData, measureField]);
     return (_jsxs("div", { ref: containerRef, className: className, style: {
-            width: "100%",
-            height: "auto",
+            width: '100%',
+            height: 'auto',
             marginTop: '-5%',
             marginBottom: '-6.5%',
             zIndex: 0,
             ...containerStyle,
-            position: "relative",
+            position: 'relative',
         }, children: [_jsx(ComposableMap, { projection: "geoEqualEarth", children: _jsx(MapLayout, { hoveredRegion: hoveredCountry, setHoveredRegion: setHoveredCountry, setHoveredCoords: setHoveredCoords, containerRef: containerRef, mappedData: mappedData, measureField: measureField, colorScale: colorScale, onClickChartElement: onClickChartElement, geographyUrl: countriesUrl, regionNames: isoToNames }) }), hoveredCoords && hoveredCountry && (_jsx("div", { style: {
-                    position: "absolute",
-                    pointerEvents: "none",
+                    position: 'absolute',
+                    pointerEvents: 'none',
                     left: hoveredCoords[0],
                     top: hoveredCoords[1],
                 }, children: _jsxs(ChartTooltipFrame, { theme: theme, children: [_jsx("div", { style: {
@@ -522,7 +548,7 @@ function MapLayout({ geographyUrl, hoveredRegion, setHoveredRegion, setHoveredCo
     // These must be dynamically loaded as they are not available as CommonJS modules.
     const [geoCentroid, setGeoCentroid] = useState(null);
     useEffect(() => {
-        import("d3-geo").then((geo) => {
+        import('d3-geo').then((geo) => {
             setGeoCentroid(() => geo.geoCentroid);
         });
     }, []);
@@ -532,16 +558,18 @@ function MapLayout({ geographyUrl, hoveredRegion, setHoveredRegion, setHoveredCo
                 mappedData[regionNames[geo.id]?.name ?? ''] ??
                 mappedData[regionNames[geo.id]?.abbreviation?.toLowerCase() ?? ''] ??
                 mappedData[regionNames[geo.id]?.name?.toLowerCase() ?? ''];
-            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: () => {
+            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) {
                         const [x, y] = projected;
-                        const svg = containerRef.current.querySelector("svg");
+                        const svg = containerRef.current.querySelector('svg');
                         if (svg) {
                             const svgRect = svg.getBoundingClientRect();
                             const viewBoxWidth = 800, viewBoxHeight = 600;
@@ -561,6 +589,6 @@ function MapLayout({ geographyUrl, hoveredRegion, setHoveredRegion, setHoveredCo
                     if (regionData) {
                         onClickChartElement?.(regionData);
                     }
-                } }, geo.id + index.toString());
+                } }, geo.id + index.toString()));
         }) }));
 }

package/dist/esm/components/Chart/PieChart.d.ts

@@ -29,11 +29,13 @@ export declare const ChartTooltipFrame: ({ children, theme, }: {
 }) => import("react/jsx-runtime").JSX.Element;
 export interface ChartTooltipRowProps {
     value: string;
+    rawValue?: string;
+    valueKey?: string;
     name: string;
     color: Color;
     theme: any;
 }
-export declare const ChartTooltipRow: ({ value, name, color, theme, }: ChartTooltipRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ChartTooltipRow: ({ value, rawValue, valueKey, name, color, theme, }: ChartTooltipRowProps) => import("react/jsx-runtime").JSX.Element;
 export interface DonutChartTooltipProps {
     active: boolean | undefined;
     payload: any;

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

@@ -1 +1 @@
-{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/PieChart.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/PieChart.tsx"],"names":[],"mappings":"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"}