@quillsql/react 2.10.30 → 2.10.31

package/dist/esm/Chart.js

@@ -1,353 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-nocheck
-import { useState, useEffect, useContext, useMemo } from 'react';
-import { differenceInHours } from 'date-fns';
-import BarList from './BarList';
-import PieChart from './PieChart';
-import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, } from './Context';
-import QuillTable from './components/QuillTable';
-import { getData } from './utils/dataFetcher';
-import { generatePivotTable, generatePivotTableYAxis, } from './internals/ReportBuilder/PivotModal';
-import { valueFormatter } from './utils/valueFormatter';
-import LineChart from './components/Chart/LineChart';
-import BarChart from './components/Chart/BarChart';
-import { mergeComparisonRange } from './utils/merge';
-import ChartSkeleton from './components/Chart/ChartSkeleton';
-import ChartError from './components/Chart/ChartError';
-import { COMPARISON_OPTIONS } from './DateRangePicker/dateRangePickerUtils';
-// @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(dateStr1, dateStr2) {
-    return Math.abs(differenceInHours(dateStr1, dateStr2)) < 24;
-}
-function isEquivalent(filters1, filters2) {
-    if (Object.keys(filters2).length !== Object.keys(filters1).length) {
-        return false;
-    }
-    const filterKeys = Object.keys(filters2);
-    for (let i = 0; i < filterKeys.length; i++) {
-        const currentKeyWereLookingAt = filterKeys[i];
-        const filter1 = filters1[currentKeyWereLookingAt];
-        if (!filter1) {
-            return false;
-        }
-        const filter2 = filters2[currentKeyWereLookingAt];
-        const filterType = filter2.filterType;
-        if (filterType === 'string') {
-            if (filter1.selectedValue !== filter2.selectedValue) {
-                return false;
-            }
-        }
-        else if (filterType === 'date_range') {
-            if (!areDatesNearby(filter1.startDate, filter2.startDate) ||
-                !areDatesNearby(filter1.endDate, filter2.endDate)) {
-                return false;
-            }
-            if (filter1.comparisonRange && filter2.comparisonRange) {
-                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;
-    }
-    if (dashboardItem?.filtersApplied.comparison !== !filters.comparison) {
-        return true;
-    }
-    return !isEquivalent(dashboardItem.filtersApplied, filters);
-}
-const Chart = ({ chartId, config, colors, containerStyle, query, SelectComponent, dateRangeFilterDisabled = false, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) => {
-    const { dispatch, dashboard } = useContext(DashboardContext);
-    const { dashboardFilters } = useContext(DashboardFiltersContext);
-    // eslint-disable-next-line no-unused-vars
-    const [client, _] = useContext(ClientContext);
-    const [theme] = useContext(ThemeContext);
-    const chartColors = useMemo(() => {
-        return colors?.length
-            ? colors
-            : theme && theme.chartColors.length
-                ? theme.chartColors
-                : ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
-    }, [colors]);
-    return (_jsx(ChartUpdater, { config: config, dispatch: dispatch, dashboard: dashboard, chartId: chartId, containerStyle: containerStyle, colors: chartColors, client: client, theme: theme, dashboardFilters: dashboardFilters, query: query, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, dateRangeFilterDisabled: dateRangeFilterDisabled }));
-};
-const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, dispatch, client, theme, dashboardFilters, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, dateRangeFilterDisabled, }) => {
-    const [initialLoad, setInitialLoad] = useState(true);
-    const [loading, setLoading] = useState(false);
-    const [isComparison, setIsComparison] = useState(false);
-    useEffect(() => {
-        async function getChartOptions() {
-            if (!didFiltersChange(dashboard[chartId], dashboardFilters)) {
-                setLoading(false);
-                return;
-            }
-            try {
-                setLoading(true);
-                // Remove extra fields on each filter so we don't confuse the backend.
-                const allowDateRange = !dateRangeFilterDisabled;
-                const minimalFilters = Object.values(dashboardFilters).length
-                    ? Object.values(dashboardFilters)
-                        .filter((f) => allowDateRange || f.filterType !== 'date_range')
-                        .map((filter) => {
-                        const newFilter = { ...filter };
-                        if (newFilter.filterType === 'date_range') {
-                            delete newFilter['field'];
-                            delete newFilter['options'];
-                            delete newFilter['selectedValue'];
-                        }
-                        return newFilter;
-                    })
-                    : [];
-                const hostedBody = {
-                    metadata: {
-                        dashboardItemId: chartId,
-                        orgId: client.customerId || '*',
-                        clientId: client.publicKey,
-                        task: 'item',
-                        databaseType: client.databaseType,
-                        filters: minimalFilters,
-                    },
-                };
-                const cloudBody = {
-                    id: chartId,
-                    filters: minimalFilters,
-                };
-                const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
-                if (resp && resp.name !== 'error' && !resp.errorMessage) {
-                    setIsComparison(!!resp.compareRows?.length);
-                    if (resp.compareRows) {
-                        mergeComparisonRange(resp);
-                    }
-                    dispatch({
-                        type: 'UPDATE_DASHBOARD_ITEM',
-                        id: chartId,
-                        data: {
-                            ...resp,
-                            filtersApplied: dashboardFilters,
-                        },
-                    });
-                }
-                setLoading(false);
-            }
-            catch (e) {
-                console.log('Error fetching chart: ', e);
-                setLoading(false);
-            }
-        }
-        if (config) {
-            setLoading(false);
-            return;
-        }
-        setInitialLoad(false);
-        getChartOptions();
-    }, [dashboardFilters, client, chartId]);
-    const dateFilter = Object.values(dashboardFilters ?? {}).find((filter) => filter.filterType == 'date_range');
-    const isPivot = dashboard[chartId]?.pivot || config?.pivot;
-    const pivotTable = useMemo(() => {
-        const pivot = dashboard[chartId]?.pivot || config?.pivot;
-        const data = dashboard[chartId] ? dashboard[chartId] : config;
-        return pivot && data?.rows
-            ? generatePivotTable(pivot, JSON.parse(JSON.stringify(data.rows)), // deep copy
-            dateFilter?.startDate
-                ? [dateFilter?.startDate, dateFilter?.endDate, null]
-                : [null, null, null], Boolean(dateFilter?.comparisonRange?.startDate), -1, dateFilter?.comparisonRange?.startDate
-                ? [
-                    dateFilter?.comparisonRange.startDate,
-                    dateFilter?.comparisonRange.endDate,
-                    null,
-                ]
-                : [null, null, null])
-            : null;
-    }, [dashboard, chartId, dashboard[chartId], config, dateFilter]);
-    const pivotTableYAxis = useMemo(() => {
-        if (!pivotTable) {
-            return null;
-        }
-        const pivot = dashboard[chartId]?.pivot || config?.pivot;
-        const yAxisFields = config
-            ? config.yAxisFields
-            : dashboard[chartId]?.yAxisFields;
-        return yAxisFields
-            ? generatePivotTableYAxis(pivot, pivotTable.columns, yAxisFields?.[0]?.format)
-            : null;
-    }, [pivotTable]);
-    if (!config && (!dashboard[chartId] || loading)) {
-        if (loading || initialLoad) {
-            return _jsx(ChartSkeleton, { containerStyle: containerStyle });
-        }
-        else {
-            return _jsx(ChartError, { containerStyle: containerStyle });
-        }
-    }
-    // TODO: Figure out if we can use ?? to coalesce these into the variable.
-    const chartTypes = [config?.chartType, dashboard[chartId]?.chartType];
-    if (chartTypes.includes('pie')) {
-        const rows = pivotTable
-            ? pivotTable.rows
-            : config
-                ? config.rows
-                : dashboard[chartId].rows;
-        const yAxisFields = pivotTableYAxis
-            ? pivotTableYAxis
-            : config
-                ? config.yAxisFields
-                : dashboard[chartId].yAxisFields;
-        const xAxisField = config
-            ? config.xAxisField
-            : dashboard[chartId].xAxisField;
-        return (_jsx(PieChart, { containerStyle: containerStyle, data: rows.map((row) => {
-                return {
-                    ...row,
-                    count: parseInt(row[yAxisFields[0].field]) /
-                        sumByKey(rows, yAxisFields[0].field),
-                };
-            }), category: yAxisFields[0].field, index: xAxisField, colors: colors, theme: theme }));
-    }
-    if (chartTypes.includes('table')) {
-        const data = dashboard[chartId] ? dashboard[chartId] : config;
-        const columns = pivotTable?.columns ?? data.columns ?? data.yAxisFields;
-        // Walk through data.columns and pick off the labels from yAxisFields
-        columns.forEach((col) => {
-            if (!data.yAxisFields)
-                return;
-            const matchingCol = data.yAxisFields.find((c) => c.field === col.field);
-            if (!col.label && matchingCol) {
-                col.label = matchingCol.label;
-                col.format = matchingCol.format;
-            }
-        });
-        return (_jsx(QuillTable, { rows: pivotTable?.rows ?? data.rows ?? [], columns: pivotTable?.columns ?? data.columns ?? data.yAxisFields, containerStyle: {
-                height: '400px',
-                width: containerStyle?.width || '100%',
-            }, downloadFileName: data.name, showDownloadCSVButton: true }));
-    }
-    if (chartTypes.includes('bar')) {
-        return (_jsx(BarList, { data: pivotTable
-                ? pivotTable.rows
-                : config
-                    ? config.rows
-                    : dashboard[chartId].rows, theme: theme, yAxisFields: pivotTableYAxis
-                ? pivotTableYAxis
-                : config
-                    ? config.yAxisFields
-                    : dashboard[chartId].yAxisFields, colors: colors, xAxisField: config ? config.xAxisField : dashboard[chartId].xAxisField, xAxisFormat: config ? config.xAxisFormat : dashboard[chartId].xAxisFormat, containerStyle: containerStyle }));
-    }
-    const yAxisFields = pivotTableYAxis
-        ? pivotTableYAxis
-        : config
-            ? config.yAxisFields
-            : dashboard[chartId].yAxisFields;
-    if (isComparison && yAxisFields.length == 1) {
-        const sampleField = yAxisFields[0];
-        yAxisFields[yAxisFields.length] = {
-            ...sampleField,
-            field: `comparison_${sampleField.field}`,
-            label: `comparison ${sampleField.label}`,
-        };
-    }
-    const data = (pivotTable
-        ? pivotTable.rows
-        : config
-            ? config.rows
-            : dashboard[chartId].rows)
-        // filter out any rows with a comparison key but no corresponding primary
-        ?.filter((row) => Object.keys(row).every((key) => !key.startsWith('comparison_') ||
-        (key.startsWith('comparison_') &&
-            Boolean(row[key.replace('comparison_', '')]))));
-    if (chartTypes.includes('column')) {
-        return (_jsx(BarChart, { colors: colors, theme: theme, isStacked: isPivot && yAxisFields.length > (dateFilter?.comparison ? 2 : 1), yAxisFields: yAxisFields, 
-            // @ts-ignore
-            data: data, xAxisField: config ? config.xAxisField : dashboard[chartId].xAxisField, xAxisLabel: config ? config.xAxisLabel : dashboard[chartId].xAxisLabel, xAxisFormat: config ? config.xAxisFormat : dashboard[chartId].xAxisFormat, containerStyle: containerStyle, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }));
-    }
-    if (chartTypes.includes('metric')) {
-        const data = dashboard[chartId] ? dashboard[chartId] : config;
-        const isComparison = data.rows.length > 0 &&
-            Object.keys(data.rows[0]).includes(`comparison_${data.xAxisField}`);
-        const primaryMetricLabel = data?.filtersApplied?.date_range?.preset?.label;
-        const comparisonKey = data?.filtersApplied?.date_range?.comparisonRange?.value;
-        const comparisonLabel = COMPARISON_OPTIONS.find((opt) => opt.value === comparisonKey)?.text;
-        return (_jsxs("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',
-            }, children: [_jsxs("div", { style: {
-                        display: 'flex',
-                        gap: 4,
-                        alignItems: 'baseline',
-                        marginRight: 'auto',
-                    }, children: [_jsx("span", { children: data.rows.length > 0 &&
-                                valueFormatter({
-                                    value: data.rows[0][data.xAxisField],
-                                    field: data.xAxisField,
-                                    fields: [
-                                        {
-                                            field: data.xAxisField,
-                                            format: data.xAxisFormat,
-                                        },
-                                    ],
-                                }) }), isComparison && (_jsx("span", { style: {
-                                fontSize: 13,
-                                fontWeight: '500',
-                                fontFamily: theme?.fontFamily,
-                                color: theme?.primaryTextColor,
-                                marginLeft: 2,
-                            }, children: primaryMetricLabel
-                                ? `in ${primaryMetricLabel.toLowerCase()}`
-                                : 'this period' }))] }), isComparison && (_jsxs("div", { style: {
-                        display: 'flex',
-                        gap: 4,
-                        alignItems: 'baseline',
-                        paddingTop: 4,
-                        color: theme?.secondaryTextColor,
-                    }, children: [_jsx("span", { style: {
-                                fontSize: 28,
-                                fontWeight: '500',
-                                fontFamily: theme?.fontFamily,
-                                color: theme?.secondaryTextColor,
-                            }, children: data.rows.length > 0 &&
-                                valueFormatter({
-                                    value: data.rows[0][`comparison_${data.xAxisField}`],
-                                    field: data.xAxisField,
-                                    fields: [
-                                        {
-                                            field: data.xAxisField,
-                                            format: data.xAxisFormat,
-                                        },
-                                    ],
-                                }) }), _jsx("span", { style: {
-                                fontSize: 13,
-                                fontWeight: '500',
-                                fontFamily: theme?.fontFamily,
-                                color: theme?.secondaryTextColor,
-                                marginLeft: 2,
-                            }, children: comparisonLabel
-                                ? 'in ' + comparisonLabel.toLowerCase()
-                                : 'previous period' })] }))] }));
-    }
-    return (_jsx(LineChart, { colors: colors, yAxisFields: yAxisFields, data: data, xAxisField: config ? config.xAxisField : dashboard[chartId].xAxisField, xAxisLabel: config ? config.xAxisLabel : dashboard[chartId].xAxisLabel, xAxisFormat: config ? config.xAxisFormat : dashboard[chartId].xAxisFormat, containerStyle: containerStyle, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }));
-};
-export default Chart;

package/dist/esm/ChartBuilder.d.ts

@@ -1,46 +0,0 @@
-import React from 'react';
-import { Pivot } from './internals/ReportBuilder/PivotModal';
-import { SelectComponentProps, TextInputComponentProps, ButtonComponentProps, ModalComponentProps, HeaderProps, LabelProps, TextProps, DeleteButtonProps, PopoverComponentProps } from './components/UiComponents';
-export declare function snakeCaseToTitleCase(str: any): any;
-export declare const numberFormatOptions: string[];
-interface ChartBuilderProps {
-    isOpen: boolean;
-    setIsOpen: (isOpen: boolean) => void;
-    Select?: (props: SelectComponentProps) => JSX.Element;
-    TextInput?: (props: TextInputComponentProps) => JSX.Element;
-    Button?: (props: ButtonComponentProps) => JSX.Element;
-    SecondaryButton?: (props: ButtonComponentProps) => JSX.Element;
-    Header?: (props: HeaderProps) => JSX.Element;
-    Label?: (props: LabelProps) => JSX.Element;
-    Text?: (props: TextProps) => JSX.Element;
-    DeleteButton?: (props: DeleteButtonProps) => JSX.Element;
-    Modal?: (props: ModalComponentProps) => JSX.Element;
-    Popover?: (props: PopoverComponentProps) => JSX.Element;
-    rows: object[];
-    columns: object[];
-    query?: string;
-    isEditMode?: boolean;
-    formHeaderStyle?: React.CSSProperties;
-    formLabelStyle?: React.CSSProperties;
-    showTableFormatOptions?: boolean;
-    showDateFieldOptions?: boolean;
-    showAccessControlOptions?: boolean;
-    showDashboardDropdown?: boolean;
-    onAddToDashboardComplete?: () => void;
-    onDelete?: () => void;
-    fields?: object[];
-    pivot?: Pivot;
-    dateRange?: (string | Date)[];
-    dashboardItem?: any;
-    recommendedPivots?: Pivot[];
-    createdPivots?: Pivot[];
-    queryNoDateColumn?: string;
-    destinationDashboard?: string;
-    title?: string;
-    buttonLabel?: string;
-    dateColumn?: string;
-    organizationName?: string;
-}
-export default function ChartBuilder(props: ChartBuilderProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=ChartBuilder.d.ts.map

package/dist/esm/ChartBuilder.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChartBuilder.d.ts","sourceRoot":"","sources":["../../src/ChartBuilder.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAWhF,OAAO,EACL,KAAK,EAIN,MAAM,sCAAsC,CAAC;AAG9C,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACpB,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,SAAS,EACT,iBAAiB,EAUjB,qBAAqB,EAEtB,MAAM,2BAA2B,CAAC;AAgBnC,wBAAgB,oBAAoB,CAAC,GAAG,KAAA,OAavC;AAqED,eAAO,MAAM,mBAAmB,UAM/B,CAAC;AAoBF,UAAU,iBAAiB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7C,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC,OAAO,CAAC;IAC3C,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,GAAG,CAAC,OAAO,CAAC;IACzD,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,CAAC;IACxD,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAC9B,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,KAAK,EAAE,CAAC;IAC5B,aAAa,CAAC,EAAE,KAAK,EAAE,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AACD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA4B5D"}