@quillsql/react 2.12.36 → 2.12.37

package/dist/esm/Chart.js

@@ -1,431 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useContext, useMemo, } from 'react';
-import { useExport } from './hooks/useExport';
-import { differenceInHours } from 'date-fns';
-import BarList from './components/Chart/BarList';
-import PieChart from './components/Chart/PieChart';
-import { ClientContext, CustomFieldContext, DashboardContext, ReportFiltersContext, } from './Context';
-import QuillTable from './components/QuillTable';
-import LineChart from './components/Chart/LineChart';
-import BarChart from './components/Chart/BarChart';
-import { QuillLoadingSkeleton } from './components/Chart/ChartSkeleton';
-import ChartError from './components/Chart/ChartError';
-import useTheme from './hooks/useTheme';
-import { findAndProcessDateFilter, processFilterFromBackend, updateFilter, } from './utils/filterProcessing';
-import { QuillFilterContainerComponent, } from './components/UiComponents';
-import { DashboardFilter } from './components/Dashboard/DashboardFilter';
-import { QuillSelectComponent } from './components/QuillSelect';
-import { QuillMultiSelectComponent } from './components/QuillMultiSelect';
-import { QuillDateRangePicker } from './DateRangePicker/QuillDateRangePicker';
-import { convertInternalReportToReport, EMPTY_REPORT, fetchReport, } from './utils/report';
-import { shouldFetchMore, DEFAULT_PAGINATION, shouldSortInMemory, } from './utils/paginationProcessing';
-import { fetchTableByReport } from './utils/tableProcessing';
-import QuillMetricComponent from './components/Dashboard/MetricComponent';
-const MAX_ROWS_FOR_GENERIC_TABLE = 500;
-// @ts-ignore
-function sumByKey(arr, key) {
-    // @ts-ignore
-    return arr.reduce((acc, cur) => {
-        const val = parseInt(cur[key], 10);
-        return isNaN(val) ? acc : acc + val;
-    }, 0);
-}
-function areDatesNearby(date1, date2) {
-    return Math.abs(differenceInHours(date1, date2)) < 24;
-}
-export function isEquivalent(filters1, filters2) {
-    if (filters2.length !== filters1.length) {
-        return false;
-    }
-    // const filterKeys = Object.keys(filters2);
-    for (let i = 0; i < filters1.length; i++) {
-        const filter1 = filters1[i];
-        if (!filter1) {
-            return false;
-        }
-        const filter2 = filters2[i];
-        if (filter1.isUserFilter !== filter2.isUserFilter) {
-            return false;
-        }
-        else if (filter1.isUserFilter) {
-            if (filter1.operator !== filter2.operator ||
-                filter1.value !== filter2.value) {
-                return false;
-            }
-        }
-        const filterType = filter2.filterType;
-        if (filterType === 'string') {
-            if (filter1.stringFilterType === 'multiselect') {
-                if (filter1.values &&
-                    filter2.values &&
-                    filter1.values.length !== filter2.values.length) {
-                    return false;
-                }
-                if ((filter1.values && !filter2.values) ||
-                    (filter2.values && !filter1.values)) {
-                    return false;
-                }
-                // make sure that filter1.values is equivalent to filter2.values ignoring order
-                const sortedValues1 = filter1.values?.slice().sort() || [];
-                const sortedValues2 = filter2.values?.slice().sort() || [];
-                if (!sortedValues1.every((value, index) => value === sortedValues2[index])) {
-                    return false;
-                }
-            }
-            if (filter1.selectedValue !== filter2.selectedValue) {
-                return false;
-            }
-        }
-        else if (filter1?.operator === 'BETWEEN' &&
-            filter2?.operator === 'BETWEEN') {
-            if (!filter1?.values && !filter2?.values) {
-                continue;
-            }
-            else if (!filter1?.values || !filter2?.values) {
-                return false;
-            }
-            if (filter1?.values && filter2?.values) {
-                if (!areDatesNearby(filter1.values[0], filter2.values[0]) ||
-                    !areDatesNearby(filter1.values[1], filter2.values[1])) {
-                    return false;
-                }
-            }
-        }
-        else if (filterType === 'date_range') {
-            if (!filter1.startDate && !filter2.startDate) {
-                continue;
-            }
-            if (!areDatesNearby(filter1.startDate, filter2.startDate) ||
-                !areDatesNearby(filter1.endDate, filter2.endDate)) {
-                return false;
-            }
-            if (filter1.comparison !== filter2.comparison) {
-                return false;
-            }
-            if (filter1.comparisonRange && filter2.comparisonRange) {
-                if (!filter1.comparisonRange.startDate &&
-                    !filter2.comparisonRange.endDate) {
-                    continue;
-                }
-                if (!areDatesNearby(filter1.comparisonRange.startDate, filter2.comparisonRange.startDate) ||
-                    !areDatesNearby(filter1.comparisonRange.endDate, filter2.comparisonRange.endDate)) {
-                    return false;
-                }
-            }
-        }
-    }
-    return true;
-}
-export function didFiltersChange(dashboardItem, filters) {
-    if (!dashboardItem?.filtersApplied || !filters) {
-        return true;
-    }
-    return !isEquivalent(dashboardItem.filtersApplied, filters);
-}
-export default function Chart({ colors, reportId, className, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, hideDateRangeFilter = false, hideFilters = false, mapColorsToFields, LoadingComponent = QuillLoadingSkeleton, SelectComponent = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponent, DateRangePickerComponent = QuillDateRangePicker, FilterContainerComponent = QuillFilterContainerComponent, filters, onClickChartElement, dateBucket, }) {
-    const [dashboard] = useContext(DashboardContext);
-    const { reportFiltersDispatch, reportFilters } = useContext(ReportFiltersContext);
-    const [initialLoad, setInitialLoad] = useState(true);
-    const [loading, setLoading] = useState(true);
-    const [paginating, setPaginating] = useState(false);
-    const [error, setError] = useState(undefined);
-    const [colorMap, setColorMap] = useState({});
-    const [client] = useContext(ClientContext);
-    const [customFields] = useContext(CustomFieldContext);
-    const [additionalProcessing, setAdditionProcessing] = useState({
-        page: 0,
-    });
-    const [report, setReport] = useState(undefined);
-    const [chartFilters, setChartFilters] = useState([]);
-    const [previousPage, setPreviousPage] = useState(0);
-    const [filterUpdateIndex, setFilterUpdateIndex] = useState(-1);
-    const [previousDateBucket, setPreviousDateBucket] = useState(undefined);
-    const theme = useTheme();
-    const onPageChange = (page) => {
-        if (additionalProcessing.page &&
-            shouldFetchMore(DEFAULT_PAGINATION, page, previousPage)) {
-            const newPagination = { ...additionalProcessing.page, page };
-            const updatedProcessing = {
-                ...additionalProcessing,
-                page: newPagination,
-            };
-            setAdditionProcessing(updatedProcessing);
-            updateTableRows(updatedProcessing);
-        }
-        if (page > previousPage) {
-            setPreviousPage(page);
-        }
-    };
-    const onSortChange = (sort) => {
-        if (report &&
-            shouldSortInMemory(DEFAULT_PAGINATION, report.rowCount, !!report.pivot)) {
-            return;
-        }
-        const updatedProcessing = { page: DEFAULT_PAGINATION, sort };
-        fetchReportHelper(true, additionalProcessing);
-        updateTableRows(updatedProcessing, true);
-        setPreviousPage(0);
-    };
-    const updateTableRows = async (processing, resetRows = false) => {
-        if (!loading && report) {
-            setPaginating(true);
-            try {
-                const updatedProcessing = { ...additionalProcessing, ...processing };
-                const paginatedRows = await fetchTableByReport(reportId, client, updatedProcessing, filters, customFields);
-                if (paginatedRows.error) {
-                    throw new Error('Error fetching chart');
-                }
-                let tempRows = [...report.rows, ...paginatedRows.rows];
-                if (resetRows) {
-                    tempRows = paginatedRows.rows;
-                }
-                setReport({ ...report, rows: tempRows });
-                setTimeout(() => {
-                    setPaginating(false);
-                }, 200);
-            }
-            catch (e) {
-                console.log(e);
-                setPaginating(false);
-            }
-        }
-    };
-    const fetchReportHelper = async (useReportTask = true, reportFilterInfo, processing) => {
-        const tempReport = dashboard[reportId];
-        const allowDateRange = !hideDateRangeFilter;
-        const minimalFilters = Object.values(reportFilterInfo.filters).length
-            ? Object.values(reportFilterInfo.filters)
-                .filter((f) => allowDateRange || f.filterType !== 'date_range')
-                .map((filter) => {
-                const newFilter = { ...filter };
-                return newFilter;
-            })
-            : [];
-        if (!didFiltersChange(tempReport, minimalFilters) &&
-            !loading &&
-            tempReport &&
-            !tempReport.triggerReload &&
-            !processing &&
-            dateBucket === previousDateBucket) {
-            setLoading(false);
-            setReport(tempReport);
-            return;
-        }
-        setLoading(true);
-        const { report, error } = await fetchReport(reportId, client, useReportTask, minimalFilters, processing, dateBucket, customFields);
-        if (error) {
-            setError(error);
-            setLoading(false);
-            return;
-        }
-        setPreviousDateBucket(dateBucket);
-        setReport(report);
-        if (mapColorsToFields && report) {
-            setColorMap(mapColorsToFields(report, theme));
-        }
-        let filterArray = minimalFilters;
-        // THIS SHOULD ONLY BE UNDEFINED ON INITIAL LOAD
-        if (!filterArray) {
-            filterArray = report.filtersApplied
-                ? report.filtersApplied.map((filter) => {
-                    return processFilterFromBackend(filter);
-                })
-                : [];
-            reportFiltersDispatch({
-                type: 'UPDATE_REPORT_FILTER',
-                id: reportId,
-                data: {
-                    filters: filterArray,
-                    updateIndex: reportFilterInfo.updateIndex,
-                },
-            });
-        }
-        setFilterUpdateIndex(reportFilterInfo.updateIndex);
-        setChartFilters(filterArray || []);
-        if (mapColorsToFields) {
-            setColorMap(mapColorsToFields(report, theme));
-        }
-        setAdditionProcessing(processing);
-        setError(error);
-        setLoading(false);
-    };
-    useEffect(() => {
-        if (!client) {
-            return;
-        }
-        // IF WE HAVE THE DATA IN DASHBOARD CONTEXT AND IT IS THE INITIAL LOAD DON'T FETCH DATA
-        if (initialLoad && dashboard[reportId]) {
-            setInitialLoad(false);
-            return;
-        }
-        setInitialLoad(false);
-        const parsedReportFilters = reportFilters[reportId]
-            ? reportFilters[reportId]
-            : { updateIndex: 0, filters: [] };
-        if (filterUpdateIndex === parsedReportFilters.updateIndex) {
-            return;
-        }
-        fetchReportHelper(true, reportFilters[reportId] || { filters: [] }, additionalProcessing);
-    }, [client, reportId, reportFilters[reportId]?.updateIndex, dateBucket]);
-    useEffect(() => {
-        const tempReport = dashboard[reportId];
-        if (!tempReport) {
-            return;
-        }
-        setInitialLoad(false);
-        setLoading(false);
-        let filtersApplied = [];
-        if (tempReport.filtersApplied && tempReport.filtersApplied.length > 0) {
-            filtersApplied = tempReport.filtersApplied.map((filter) => {
-                return filter;
-            });
-        }
-        setReport(tempReport);
-        setChartFilters(filtersApplied);
-        if (tempReport.error) {
-            setError(tempReport.error);
-        }
-    }, [dashboard[reportId]]);
-    if (error) {
-        return (_jsx("div", { style: containerStyle, className: className, children: _jsx(ChartError, { errorMessage: error }) }));
-    }
-    return (_jsxs("div", { children: [!hideFilters && (_jsx(FilterContainerComponent, { children: chartFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: (filter, value = null, comparison = null) => {
-                        const updatedFilters = chartFilters.map((f) => {
-                            if (f.field === filter.field ||
-                                (f.filterType === 'date_range' &&
-                                    filter.filterType === 'date_range')) {
-                                return updateFilter(f, value, comparison);
-                            }
-                            return f;
-                        });
-                        setChartFilters(updatedFilters);
-                        fetchReportHelper(true, {
-                            filters: updatedFilters,
-                            updateIndex: filterUpdateIndex + 1,
-                        }, additionalProcessing);
-                        reportFiltersDispatch({
-                            type: 'UPDATE_REPORT_FILTER',
-                            id: reportId,
-                            data: {
-                                filters: updatedFilters,
-                                updateIndex: filterUpdateIndex + 1,
-                            },
-                        });
-                    }, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent }, index))) })), _jsx(ChartDisplay, { config: report ? convertInternalReportToReport(report) : undefined, reportId: reportId, colors: colors, className: className, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle, cartesianGridLineColor: cartesianGridLineColor, hideDateRangeFilter: hideDateRangeFilter, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, loading: loading || initialLoad, paginating: paginating, scrollable: true, colorMap: colorMap, LoadingComponent: LoadingComponent, onPageChange: onPageChange, onSortChange: onSortChange, onClickChartElement: onClickChartElement })] }));
-}
-export const ChartDisplay = ({ reportId, config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, isAnimationActive, scrollable = false, loading = false, paginating = false, ErrorComponent = ChartError, colorMap, LoadingComponent = QuillLoadingSkeleton, onPageChange, onSortChange, onClickChartElement, overrideTheme, }) => {
-    const { downloadCSV } = useExport(reportId);
-    const theme = overrideTheme ?? useTheme();
-    const chartColors = useMemo(() => {
-        return colors?.length
-            ? colors
-            : theme && theme.chartColors.length
-                ? theme.chartColors
-                : ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
-    }, [colors]);
-    const getDateFilter = () => {
-        if (!hideDateRangeFilter && config && config.filtersApplied) {
-            return findAndProcessDateFilter(config.filtersApplied.map((f) => f));
-        }
-        return undefined;
-    };
-    const [dateFilter, setDateFilter] = useState(getDateFilter());
-    useEffect(() => {
-        setDateFilter(getDateFilter());
-    }, [config]);
-    if (config &&
-        !config.pivot &&
-        config.chartType !== 'metric' &&
-        config.chartType !== 'table' &&
-        ((config.rowCount && config.rowCount > MAX_ROWS_FOR_GENERIC_TABLE) ||
-            (config?.rows && config?.rows.length > MAX_ROWS_FOR_GENERIC_TABLE))) {
-        return (_jsx("div", { style: containerStyle, className: className, children: _jsx(ErrorComponent, { errorMessage: `Charts can only display ${MAX_ROWS_FOR_GENERIC_TABLE} rows. Please add a pivot or modify the query.` }) }));
-    }
-    else if (loading) {
-        return (_jsx("div", { className: className, style: containerStyle, children: _jsx(LoadingComponent, {}) }));
-    }
-    const chartTypes = [config?.chartType];
-    if (chartTypes.includes('pie')) {
-        return (_jsx(PieChart, { className: className, containerStyle: containerStyle, data: config?.rows.map((row) => {
-                return {
-                    ...row,
-                    count: 
-                    // @ts-ignore
-                    parseInt(row[config?.yAxisFields[0]?.field]) /
-                        // @ts-ignore
-                        sumByKey(config?.rows, config?.yAxisFields[0].field),
-                };
-            }) || [], category: config?.yAxisFields[0]?.field, index: config?.xAxisField, colors: chartColors, theme: theme, colorMap: colorMap, onClickChartElement: onClickChartElement }));
-    }
-    if (chartTypes.includes('table')) {
-        return (_jsx(QuillTable, { rows: config?.rows ?? [], rowCount: config?.rowCount, columns: config?.columns ?? config?.yAxisFields ?? [], currentPage: config?.pagination?.page || 1, sort: config?.sort, rowsPerPage: config?.pagination?.rowsPerPage || 10, containerStyle: {
-                width: containerStyle?.width || '100%',
-                height: containerStyle?.height || '400px',
-                ...containerStyle,
-            }, className: className, downloadCSV: async () => {
-                downloadCSV();
-            }, onPageChange: (page) => {
-                onPageChange && onPageChange(page);
-            }, onSortChange: (sort) => {
-                onSortChange && onSortChange(sort);
-            }, isLoading: paginating }));
-    }
-    if (chartTypes.includes('bar')) {
-        return (_jsx(BarList, { data: config?.rows || [], theme: theme, yAxisFields: config?.yAxisFields || [], colors: chartColors, xAxisField: config?.xAxisField || '', xAxisFormat: config?.xAxisFormat || 'string', containerStyle: containerStyle, className: className, colorMap: colorMap, onClickChartElement: onClickChartElement, scrollable: scrollable }));
-    }
-    if (chartTypes.includes('column')) {
-        return (_jsx(BarChart, { colors: chartColors, theme: theme, isStacked: !!config?.pivot &&
-                config?.yAxisFields?.length > (dateFilter?.comparison ? 2 : 1), yAxisFields: config?.yAxisFields || [], data: config?.rows || [], xAxisField: config?.xAxisField || '', xAxisLabel: config?.xAxisLabel || '', xAxisFormat: config?.xAxisFormat || 'string', containerStyle: containerStyle, className: className, comparison: dateFilter?.comparison &&
-                dateFilter.comparisonRange.value !== 'NO_COMPARISON', isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, colorMap: colorMap, onClickChartElement: onClickChartElement, dateFilter: dateFilter }));
-    }
-    if (chartTypes.includes('metric')) {
-        if (!config?.rows ||
-            config?.rows?.length === 0 ||
-            // @ts-ignore
-            config?.rows[0][config?.xAxisField] === null) {
-            return (_jsx("div", { style: {
-                    display: 'flex',
-                    flex: '1 0 auto',
-                    height: containerStyle?.height || '100%',
-                    margin: 'auto',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    fontSize: 13,
-                    color: theme.secondaryTextColor,
-                    maxWidth: '100%',
-                    width: '100%',
-                    ...containerStyle,
-                }, className: className, children: "No results" }));
-        }
-        return (_jsx("div", { style: {
-                fontFamily: theme?.fontFamily,
-                fontSize: 32,
-                color: theme?.primaryTextColor,
-                fontWeight: '600',
-                textOverflow: 'ellipsis',
-                margin: 0,
-                whiteSpace: 'nowrap',
-                boxSizing: 'content-box',
-                maxWidth: '100%',
-                textAlign: 'left',
-                overflow: 'hidden',
-                height: containerStyle?.height || '100%',
-                display: 'flex',
-                width: '100%',
-                flexDirection: 'row',
-                ...containerStyle,
-            }, className: className, children: _jsx(QuillMetricComponent, { report: config ?? EMPTY_REPORT }) }));
-    }
-    return (_jsx(LineChart, { colors: chartColors, colorMap: colorMap, yAxisFields: config?.yAxisFields.sort(sortComparisonFirst) || [], data: config?.rows || [], xAxisField: config?.xAxisField || '', xAxisLabel: config?.xAxisLabel || '', xAxisFormat: config?.xAxisFormat || 'string', containerStyle: containerStyle, className: className, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle ?? 'solid', comparisonLineStyle: comparisonLineStyle ?? 'solid', cartesianGridLineColor: cartesianGridLineColor, onClickChartElement: onClickChartElement, dateFilter: dateFilter }));
-};
-// Sort to put comparison first (ie. underneath) primary.
-const sortComparisonFirst = (a, b) => {
-    const key = 'comparison_';
-    if (a.field.startsWith(key) && b.field.startsWith(key))
-        return 0;
-    if (a.field.startsWith(key))
-        return -1;
-    if (b.field.startsWith(key))
-        return 1;
-    return 0;
-};