@quillsql/react 2.10.31 → 2.10.32

package/dist/esm/Chart.js

@@ -0,0 +1,353 @@
+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

@@ -0,0 +1,46 @@
+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

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