@quillsql/react 2.13.39 → 2.13.41

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

@@ -0,0 +1,198 @@
+"use strict";
+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");
+require("d3-transition");
+const axisFormatter_1 = require("../../utils/axisFormatter");
+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)
+        ? Math.max(Math.min(percentage / 100, 1), 0)
+        : Math.max(Math.min(percentage, 1), 0);
+    return ((0, jsx_runtime_1.jsx)(D3Gauge, { percentage: normalizedPercentage, xAxisFormat: xAxisFormat, containerStyle: { ...containerStyle }, colors: colors, isAnimationActive: isAnimationActive }));
+}
+function D3Gauge({ percentage, containerStyle, xAxisFormat, colors, isAnimationActive }) {
+    const containerRef = (0, react_1.useRef)(null);
+    const svgRef = (0, react_1.useRef)(null);
+    const gaugeGroupRef = (0, react_1.useRef)(null);
+    const needleRef = (0, react_1.useRef)(null);
+    const needleOutlineRef = (0, react_1.useRef)(null);
+    const textRef = (0, react_1.useRef)(null);
+    const previousPercentageRef = (0, react_1.useRef)(0);
+    const firstMountRef = (0, react_1.useRef)(true);
+    // Gauge arc from -135° to +135°
+    const startAngle = -(3 * Math.PI) / 4;
+    const totalAngle = (3 * Math.PI) / 2;
+    // --- Initialization ---
+    (0, react_1.useEffect)(() => {
+        if (!containerRef.current)
+            return;
+        const container = containerRef.current;
+        (0, d3_selection_1.select)(container).select('svg').remove();
+        svgRef.current = (0, d3_selection_1.select)(container)
+            // Let CSS control the size.
+            .append('svg')
+            .attr('width', '100%')
+            .attr('height', '100%')
+            .attr('preserveAspectRatio', 'xMidYMid meet');
+        // .style('display', 'block')
+        // .style('margin', '0 auto');
+        // Create one main group for all gauge elements.
+        gaugeGroupRef.current = svgRef.current.append('g');
+        // Append placeholder arc segments.
+        for (let i = 0; i < 3; i++) {
+            gaugeGroupRef.current.append('path').attr('class', `arc-seg seg${i}`);
+        }
+        // Create needle outline and needle.
+        needleOutlineRef.current = gaugeGroupRef.current.append('line')
+            .attr('stroke', 'white')
+            .attr('stroke-width', 8)
+            .attr('stroke-linecap', 'round');
+        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')
+            .attr('class', 'gauge-label')
+            .attr('text-anchor', 'middle')
+            .attr('fill', '#000')
+            .attr('font-weight', '500')
+            .text(`${Math.round(percentage * 100)}%`);
+        return () => {
+            svgRef.current?.remove();
+            svgRef.current = null;
+        };
+    }, [colors]);
+    // --- Update & Resize ---
+    (0, react_1.useEffect)(() => {
+        if (!containerRef.current ||
+            !svgRef.current ||
+            !gaugeGroupRef.current ||
+            !needleRef.current ||
+            !needleOutlineRef.current ||
+            !textRef.current)
+            return;
+        // Use getBoundingClientRect() so we get accurate dimensions.
+        const rect = containerRef.current.getBoundingClientRect();
+        const cw = rect.width;
+        const ch = rect.height;
+        // Our desired gauge has a 1:1.2 (height:width) ratio.
+        // We choose gaugeHeight as the smaller of ch and (cw / 1.2)
+        const gaugeHeight = Math.min(ch, cw / 1.2);
+        const gaugeWidth = gaugeHeight * 1.2;
+        const radius = gaugeHeight / 2;
+        const innerRadius = radius * 0.65;
+        // const arcWidth = radius - innerRadius;
+        // 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}`);
+        // 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' },
+        ];
+        const arcGenerator = (0, d3_shape_1.arc)()
+            .innerRadius(innerRadius)
+            .outerRadius(radius);
+        segments.forEach((seg, i) => {
+            gaugeGroupRef.current?.select(`.arc-seg.seg${i}`)
+                .attr('d', arcGenerator({
+                innerRadius,
+                outerRadius: radius,
+                startAngle: seg.start,
+                endAngle: seg.end,
+            }) || '')
+                .attr('fill', seg.color);
+        });
+        // Needle endpoints: tweak these factors to adjust length.
+        const calcEndpoints = (angle) => {
+            const startFactor = 0.85; // relative to innerRadius
+            const endFactor = 1.05; // relative to radius
+            const x1 = innerRadius * startFactor * Math.cos(angle);
+            const y1 = innerRadius * startFactor * Math.sin(angle);
+            const x2 = radius * endFactor * Math.cos(angle);
+            const y2 = radius * endFactor * Math.sin(angle);
+            return { x1, y1, x2, y2 };
+        };
+        // Compute the new needle angle (rotate so 0 = north).
+        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)
+            // Position text below the gauge center.
+            .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);
+            needleRef.current.interrupt()
+                .transition()
+                .duration(1000)
+                .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);
+                    const currentPercentage = textInterpolator(t);
+                    const percentText = (0, axisFormatter_1.axisFormatter)({
+                        value: xAxisFormat === 'percent' ? currentPercentage : currentPercentage * 100,
+                        field: 'amount',
+                        fields: [{ field: 'amount', format: xAxisFormat }]
+                    }) + (xAxisFormat === 'percent' ? '' : '%');
+                    textRef.current?.text(percentText);
+                };
+            });
+        }
+        else {
+            needleRef.current.interrupt()
+                .attr('x1', endpoints.x1)
+                .attr('y1', endpoints.y1)
+                .attr('x2', endpoints.x2)
+                .attr('y2', endpoints.y2);
+            needleOutlineRef.current.interrupt()
+                .attr('x1', endpoints.x1)
+                .attr('y1', endpoints.y1)
+                .attr('x2', endpoints.x2)
+                .attr('y2', endpoints.y2);
+            const percentText = (0, axisFormatter_1.axisFormatter)({
+                value: xAxisFormat === 'percent' ? percentage : percentage * 100,
+                field: 'amount',
+                fields: [{ field: 'amount', format: xAxisFormat }]
+            }) + (xAxisFormat === 'percent' ? '' : '%');
+            textRef.current.text(percentText);
+        }
+        previousPercentageRef.current = percentage;
+        firstMountRef.current = false;
+    }, [percentage, colors, isAnimationActive, xAxisFormat]);
+    // Use ResizeObserver to trigger updates on container size changes.
+    (0, react_1.useEffect)(() => {
+        if (!containerRef.current)
+            return;
+        const observer = new ResizeObserver(() => {
+            // Force update by reading dimensions in the update effect.
+            previousPercentageRef.current = percentage;
+        });
+        observer.observe(containerRef.current);
+        return () => observer.disconnect();
+    }, [percentage]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: { width: '100%', height: '100%', ...containerStyle } }));
+}

package/dist/cjs/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,2CAsdA"}
+{"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"}

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

@@ -216,9 +216,9 @@ function InternalChart({ report, colors, className, containerStyle, isAnimationA
     // const userFilters = useMemo(() => {
     //   return filters?.filter(
     //     (f) =>
-    //       f.filterType !== FilterType.DateCustomFilter &&
-    //       f.filterType !== FilterType.DateFilter &&
-    //       f.filterType !== FilterType.DateComparisonFilter,
+    //       f.filterType !== InternalFilterType.DateCustomFilter &&
+    //       f.filterType !== InternalFilterType.DateFilter &&
+    //       f.filterType !== InternalFilterType.DateComparisonFilter,
     //   );
     // }, [filters]);
     // A filter value can either be a string, an array of strings for a multiselect, or a date range (that could have a comparison range)
@@ -226,9 +226,10 @@ function InternalChart({ report, colors, className, containerStyle, isAnimationA
     (0, react_1.useEffect)(() => {
         if (reportDateFilter) {
             // Filter for custom date filter that applies to the report's dateField
-            const customDateFilter = filters?.find((f) => f.filterType === Filter_1.FilterType.DateCustomFilter ||
-                f.filterType === Filter_1.FilterType.DateFilter ||
-                f.filterType === Filter_1.FilterType.DateComparisonFilter);
+            const customDateFilter = filters?.find((f) => f.filterType === Filter_1.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,
+            );
             if (!customDateFilter) {
                 return;
             }
@@ -371,6 +372,7 @@ function InternalChart({ report, colors, className, containerStyle, isAnimationA
                     padding: filtersEnabled ? 12 : 0,
                     borderRadius: 6,
                     opacity: filterToggleDisabled ? 0.5 : 1,
+                    zIndex: 1,
                 }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',
@@ -407,7 +409,6 @@ function InternalChart({ report, colors, className, containerStyle, isAnimationA
                             minWidth: 500,
                             paddingBottom: !filtersExpanded && filtersOverflowing && filtersEnabled ? 116 : 0,
                             position: 'relative',
-                            // overflow: filtersExpanded ? undefined : 'hidden',
                         }, children: [filtersEnabled &&
                                 currentReportFilters.map((filter, index) => ((0, jsx_runtime_1.jsx)(DashboardFilter_1.DashboardFilter, { filter: {
                                         ...filter.filter,
@@ -465,8 +466,10 @@ 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: {
-                            width: '100%',
-                            height: '100%',
-                            minHeight: 300,
-                        }, 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 }))] }))] }));
+                            minHeight: ['gauge'].includes(report.chartType) ? 500 : 400,
+                            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/cjs/components/Chart/LineChart.d.ts

@@ -1,6 +1,6 @@
 import { type ColorMapType } from '../../Chart';
 import { AxisFormat } from '../../Dashboard';
-export default function LineChart({ colors, colorMap, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid, hideVerticalCartesianGrid, hideSubsequentXAxisTicks, cartesianGridLineStyle, comparisonLineStyle, cartesianGridLineColor, onClickChartElement, dateFilter, }: {
+export default function LineChart({ colors, colorMap, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid, hideVerticalCartesianGrid, hideSubsequentXAxisTicks, cartesianGridLineStyle, comparisonLineStyle, cartesianGridLineColor, onClickChartElement, dateFilter, referenceLines, }: {
     colors: string[];
     colorMap?: ColorMapType;
     yAxisFields: any[];
@@ -24,5 +24,9 @@ export default function LineChart({ colors, colorMap, yAxisFields, data, contain
     cartesianGridLineColor?: string;
     onClickChartElement?: (e: any) => void;
     dateFilter?: any;
+    referenceLines?: {
+        label: string;
+        query: number[];
+    }[];
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LineChart.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AA2B7C,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,GACX,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;CAClB,2CAqRA"}
+{"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"}

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

@@ -13,6 +13,7 @@ const ChartTooltip_1 = __importDefault(require("../../components/Chart/ChartTool
 const getDomain_1 = __importDefault(require("../../utils/getDomain"));
 const crypto_1 = require("../../utils/crypto");
 const react_1 = require("react");
+const CustomReferenceLine_1 = __importDefault(require("./CustomReferenceLine"));
 function createLineForEmptyChart(yAxisFields, dateFilter, xAxisField, xAxisFormat) {
     let lineChartData = [];
     if (dateFilter &&
@@ -29,7 +30,7 @@ function createLineForEmptyChart(yAxisFields, dateFilter, xAxisField, xAxisForma
     }
     return lineChartData;
 }
-function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', comparisonLineStyle = 'solid', cartesianGridLineColor, onClickChartElement = () => { }, dateFilter, }) {
+function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', comparisonLineStyle = 'solid', cartesianGridLineColor, onClickChartElement = () => { }, dateFilter, referenceLines, }) {
     const formattedData = (0, react_1.useMemo)(() => {
         if (!data || data.length === 0) {
             return createLineForEmptyChart(yAxisFields, dateFilter, xAxisField, xAxisFormat);
@@ -92,7 +93,7 @@ function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, c
                                 field: xAxisField,
                                 fields: [{ field: xAxisField, format: xAxisFormat }],
                             });
-                        } }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: hideYAxis, width: 44, axisLine: false, tickLine: false, type: "number", domain: (0, getDomain_1.default)(data, yAxisFields), tick: { transform: 'translate(-3, 0)' }, tickCount: 5, style: {
+                        } }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: hideYAxis, width: 44, axisLine: false, tickLine: false, type: "number", domain: (0, getDomain_1.default)(data, yAxisFields, referenceLines), tick: { transform: 'translate(-3, 0)' }, tickCount: 5, style: {
                             fontSize: '12px',
                             fontFamily: theme?.chartLabelFontFamily ||
                                 theme?.fontFamily ||
@@ -165,7 +166,7 @@ function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, c
                             const gradientStop = getCustomColor(index, elem.field, 'stop') ?? '#00000000';
                             const uniqueId = `gradient_${(0, crypto_1.hashCode)(gradientStart)}_${(0, crypto_1.hashCode)(gradientStop)}`;
                             return ((0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: uniqueId, x1: "0", y1: "0", x2: "0", y2: "1", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "5%", stopColor: gradientStart, stopOpacity: 0.4 }), (0, jsx_runtime_1.jsx)("stop", { offset: "95%", stopColor: gradientStop, stopOpacity: 0 })] }) }, `defs_${uniqueId}_${index}`));
-                        }), yAxisFields &&
+                        }), referenceLines && Array.isArray(referenceLines) && (referenceLines.map(({ label, query }) => ((0, jsx_runtime_1.jsx)(recharts_1.Customized, { component: (props) => (0, jsx_runtime_1.jsx)(CustomReferenceLine_1.default, { ...props, referenceLine: query, label: label }) }, label)))), yAxisFields &&
                         yAxisFields.map((elem, index) => {
                             const gradientStart = (0, crypto_1.hashCode)(getCustomColor(index, elem.field, 'start') ??
                                 getCustomColor(index, elem.field) ??

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

@@ -0,0 +1,36 @@
+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[];
+    xAxisField: string;
+    xAxisFormat: AxisFormat;
+    yAxisFields: {
+        field: string;
+        label: string;
+        format: AxisFormat;
+    }[];
+    onClickChartElement?: (data: any) => void;
+    colors: string[];
+    colorMap?: ColorMapType;
+    className?: string;
+    containerStyle?: React.CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function WorldMap({ theme, data, xAxisField, xAxisFormat, yAxisFields, onClickChartElement, colors, colorMap, className, containerStyle, }: {
+    theme: QuillTheme | null;
+    data: any[];
+    xAxisField: string;
+    xAxisFormat: AxisFormat;
+    yAxisFields: {
+        field: string;
+        label: string;
+        format: AxisFormat;
+    }[];
+    onClickChartElement?: (data: any) => void;
+    colors: string[];
+    colorMap?: ColorMapType;
+    className?: string;
+    containerStyle?: React.CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MapChart.d.ts.map

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

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