@quillsql/react 2.15.2 → 2.15.4

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

@@ -1,186 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Area, CartesianGrid, ComposedChart, Customized, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
-import { DATE_FORMAT_TYPES, valueFormatter } from '../../utils/valueFormatter';
-import { axisFormatter } from '../../utils/axisFormatter';
-import { selectColor } from '../../utils/color';
-import ChartTooltip from '../../components/Chart/ChartTooltip';
-import getDomain from '../../utils/getDomain';
-import { hashCode } from '../../utils/crypto';
-import { useMemo } from 'react';
-import CustomReferenceLine from './CustomReferenceLine';
-import { RenderLegend } from './CustomLegend';
-function createLineForEmptyChart(yAxisFields, dateFilter, xAxisField, xAxisFormat) {
-    let lineChartData = [];
-    if (dateFilter &&
-        dateFilter.startDate &&
-        dateFilter.endDate &&
-        DATE_FORMAT_TYPES.includes(xAxisFormat || '') &&
-        (!lineChartData || lineChartData.length === 0)) {
-        const xAxis = xAxisField || '';
-        const yAxis = yAxisFields[0]?.field;
-        lineChartData = [
-            { [xAxis]: dateFilter.startDate, [yAxis]: '0' },
-            { [xAxis]: dateFilter.endDate, [yAxis]: '0' },
-        ];
-    }
-    return lineChartData;
-}
-export default 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, showLegend = false, }) {
-    const formattedData = useMemo(() => {
-        if (!data || data.length === 0) {
-            return createLineForEmptyChart(yAxisFields, dateFilter, xAxisField, xAxisFormat);
-        }
-        const newData = [...data];
-        // if (newData.length === 1) {
-        //   const point = { ...newData[0] };
-        //   newData.push(point);
-        // }
-        return newData;
-    }, [data, yAxisFields, dateFilter, xAxisField, xAxisFormat]);
-    if (!formattedData || formattedData.length === 0) {
-        return (_jsx("div", { style: {
-                display: 'flex',
-                flex: '1 0 auto',
-                // height: '100%',
-                marginLeft: 'auto',
-                marginRight: 'auto',
-                marginTop: 'auto',
-                marginBottom: 'auto',
-                justifyContent: 'center',
-                alignItems: 'center',
-                fontSize: 13,
-                color: theme.secondaryTextColor,
-                fontFamily: theme.fontFamily,
-                ...containerStyle,
-            }, className: className, children: "No results" }));
-    }
-    // Allows the users to override the color scheme on a per-chart basis.
-    const getCustomColor = (index, field, gradient) => {
-        let key = index === 0 ? 'comparison' : 'primary';
-        field = field.replace('comparison_', '');
-        if (colorMap && colorMap[field]) {
-            if (index === 1 && gradient === 'start')
-                key = 'primaryGradientStart';
-            if (index === 1 && gradient === 'stop')
-                key = 'primaryGradientStop';
-            if (index === 0 && gradient === 'start')
-                key = 'comparisonGradientStart';
-            if (index === 0 && gradient === 'stop')
-                key = 'comparisonGradientStop';
-            // @ts-ignore
-            return colorMap[field][key];
-        }
-        return undefined; // use the default colors from the theme
-    };
-    const numComparisons = yAxisFields.reduce((sum, x) => {
-        if (x.field?.startsWith('comparison_'))
-            return sum + 1;
-        return sum;
-    }, 0);
-    return (_jsx("div", { style: { ...containerStyle }, className: className, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', minWidth: 0, minHeight: 0, children: _jsxs(ComposedChart, { data: formattedData, onClick: (event) => onClickChartElement(event?.activePayload ? event.activePayload[0].payload : undefined), children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: !hideHorizontalCartesianGrid, vertical: !hideVerticalCartesianGrid, stroke: cartesianGridLineColor ?? '#e5e7eb', strokeDasharray: cartesianGridLineStyle === 'dashed' ? '5 5' : undefined })), showLegend && (_jsx(Legend, { verticalAlign: "top", align: "left", fontSize: 11, color: theme.secondaryTextColor, wrapperStyle: {
-                            paddingBottom: 20,
-                            fontFamily: theme?.fontFamily,
-                        }, content: _jsx(RenderLegend, {}) })), _jsx(XAxis, { dataKey: xAxisField, hide: hideXAxis, tick: { transform: 'translate(0, 6)' }, style: {
-                            fontSize: '12px',
-                            fontFamily: theme?.chartLabelFontFamily ||
-                                theme?.fontFamily ||
-                                'Inter; Helvetica',
-                            color: theme?.chartLabelColor || '#666666',
-                        }, tickLine: false, axisLine: false, minTickGap: 5, tickFormatter: (tick, i) => {
-                            // Don't display subsequent ticks when hideSubXAxisTicks is true
-                            if (hideSubsequentXAxisTicks && i !== 0)
-                                return '';
-                            return axisFormatter({
-                                value: tick,
-                                field: xAxisField,
-                                fields: [{ field: xAxisField, format: xAxisFormat }],
-                            });
-                        } }), _jsx(YAxis, { hide: hideYAxis, width: 44, axisLine: false, tickLine: false, type: "number", domain: getDomain(data, yAxisFields, referenceLines), tick: { transform: 'translate(-3, 0)' }, tickCount: 5, style: {
-                            fontSize: '12px',
-                            fontFamily: theme?.chartLabelFontFamily ||
-                                theme?.fontFamily ||
-                                'Inter; Helvetica',
-                            color: theme?.chartLabelColor || '#666666',
-                        }, tickFormatter: (value) => yAxisFields && yAxisFields.length > 0
-                            ? axisFormatter({
-                                value,
-                                field: yAxisFields[0].field,
-                                fields: [
-                                    ...yAxisFields,
-                                    { field: xAxisField, format: xAxisFormat },
-                                ],
-                            })
-                            : value }), _jsx(Tooltip, { wrapperStyle: { outline: 'none', zIndex: 2 }, isAnimationActive: false, cursor: { stroke: '#d1d5db', strokeWidth: 1 }, content: ({ active, payload, label }) => {
-                            if (!payload || payload.length === 0) {
-                                return null;
-                            }
-                            const payloadItems = payload
-                                .sort((a, b) => {
-                                if (a.value === b.value)
-                                    return 0;
-                                if (!a.value)
-                                    return 1;
-                                if (!b.value)
-                                    return -1;
-                                const aValue = parseFloat(a.value?.toString()?.replace(/,/g, '') ?? '');
-                                const bValue = parseFloat(b.value?.toString()?.replace(/,/g, '') ?? '');
-                                if (isNaN(aValue) || isNaN(bValue)) {
-                                    return a.value > b.value ? -1 : 1;
-                                }
-                                return aValue > bValue ? -1 : 1;
-                            })
-                                .map((p) => {
-                                const name = yAxisFields?.find((f) => f.field === p.name?.toString())?.label;
-                                return {
-                                    ...p,
-                                    color: p.color || 'black',
-                                    chartType: 'line',
-                                    dataKey: p.dataKey?.toLocaleString() || '',
-                                    name: name || p.name?.toString() || '',
-                                    payload: p.payload || {},
-                                    type: p.type || 'none',
-                                    unit: 'string',
-                                    value: p.value || '',
-                                };
-                            });
-                            return (_jsx(ChartTooltip, { active: active, payload: payloadItems, label: label, dateFormatter: (value) => valueFormatter({
-                                    value,
-                                    field: xAxisField,
-                                    fields: [{ field: xAxisField, format: xAxisFormat }],
-                                }), valueFormatter: (value, name) => {
-                                    const field = payloadItems.find((p) => p.dataKey === name)?.dataKey;
-                                    if (!field)
-                                        return value;
-                                    return valueFormatter({
-                                        value,
-                                        field,
-                                        fields: [
-                                            ...yAxisFields,
-                                            { field: xAxisField, format: xAxisFormat },
-                                        ],
-                                    });
-                                }, xAxisFormat: xAxisFormat, xAxisField: xAxisField, colors: colors, theme: theme, comparison: comparison, dateFilter: dateFilter, hideDot: showLegend }));
-                        }, position: { y: 0 } }), yAxisFields &&
-                        yAxisFields.map((elem, index) => {
-                            // hash the color stops so they're stable, valid html ids
-                            const gradientStart = getCustomColor(index, elem.field, 'start') ??
-                                getCustomColor(index, elem.field) ??
-                                selectColor(elem, colors, index - numComparisons);
-                            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 &&
-                        yAxisFields.map((elem, index) => {
-                            const gradientStart = hashCode(getCustomColor(index, elem.field, 'start') ??
-                                getCustomColor(index, elem.field) ??
-                                selectColor(elem, colors, index - numComparisons));
-                            const gradientStop = hashCode(getCustomColor(index, elem.field, 'stop') ?? '#00000000');
-                            const uniqueId = `gradient_${gradientStart}_${gradientStop}`;
-                            return (_jsx(Area, { type: "linear", dataKey: elem.field, stroke: getCustomColor(index, elem.field) ??
-                                    selectColor(elem, colors, index - numComparisons), fill: `url(#${uniqueId})`, strokeWidth: 2, dot: false, strokeDasharray: comparison && comparisonLineStyle === 'dashed' && index > 0
-                                    ? '5 5'
-                                    : undefined, isAnimationActive: isAnimationActive }, elem.field));
-                        })] }) }) }));
-}

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

@@ -1,36 +0,0 @@
-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/esm/components/Chart/MapChart.d.ts.map

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