@quillsql/react 2.9.2 → 2.9.4

package/dist/cjs/Chart.js

@@ -0,0 +1,381 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-nocheck
+const react_1 = require("react");
+const aggregate_1 = require("./utils/aggregate");
+const ReportBuilder_1 = require("./ReportBuilder");
+const date_fns_1 = require("date-fns");
+const BarList_1 = __importDefault(require("./BarList"));
+const PieChart_1 = __importDefault(require("./PieChart"));
+const Context_1 = require("./Context");
+const Table_1 = require("./Table");
+const dataFetcher_1 = require("./utils/dataFetcher");
+const PivotModal_1 = require("./internals/ReportBuilder/PivotModal");
+const valueFormatter_1 = require("./utils/valueFormatter");
+const LineChart_1 = __importDefault(require("./components/Chart/LineChart"));
+const BarChart_1 = __importDefault(require("./components/Chart/BarChart"));
+const merge_1 = require("./utils/merge");
+// @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((0, date_fns_1.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;
+}
+function didFiltersChange(dashboardItem, filters) {
+    if (!dashboardItem?.filtersApplied || !filters) {
+        return true;
+    }
+    if (dashboardItem?.filtersApplied.comparison !== !filters.comparison) {
+        return true;
+    }
+    return !isEquivalent(dashboardItem.filtersApplied, filters);
+}
+function hashCode(s) {
+    return s.split('').reduce(function (a, b) {
+        a = (a << 5) - a + b.charCodeAt(0);
+        return a & a;
+    }, 0);
+}
+const Chart = ({ chartId, config, colors, containerStyle, query, SelectComponent, DatePickerComponent, isAnimationActive = true, }) => {
+    const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
+    const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
+    // eslint-disable-next-line no-unused-vars
+    const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
+    const chartColors = (0, react_1.useMemo)(() => {
+        return colors?.length
+            ? colors
+            : theme && theme.chartColors.length
+                ? theme.chartColors
+                : ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
+    }, [colors]);
+    return ((0, jsx_runtime_1.jsx)(ChartUpdater, { config: config, dispatch: dispatch, dashboard: dashboard, chartId: chartId, containerStyle: containerStyle, colors: chartColors, client: client, theme: theme, dashboardFilters: dashboardFilters, query: query, SelectComponent: SelectComponent, DatePickerComponent: DatePickerComponent, isAnimationActive: isAnimationActive }));
+};
+const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, dispatch, client, theme, dashboardFilters, isAnimationActive, }) => {
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [isComparison, setIsComparison] = (0, react_1.useState)(false);
+    const [bucketData, setBucketData] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        async function getChartOptions() {
+            if (!didFiltersChange(dashboard[chartId], dashboardFilters)) {
+                setLoading(false);
+                return;
+            }
+            try {
+                setLoading(true);
+                const yoloFilters = Object.values(dashboardFilters).length
+                    ? Object.values(dashboardFilters).map((filter) => {
+                        const newFilter = { ...filter };
+                        if (newFilter.filterType === 'date_range') {
+                            // filter.field = chartDateFilter?.field;
+                            delete newFilter['field'];
+                            delete newFilter['options'];
+                            delete newFilter['selectedValue'];
+                        }
+                        return newFilter;
+                    })
+                    : [];
+                const hostedBody = {
+                    metadata: {
+                        dashboardItemId: chartId,
+                        ...(client.customerId && { orgId: client.customerId }),
+                        clientId: client.publicKey,
+                        task: 'item',
+                        filters: yoloFilters,
+                    },
+                };
+                const cloudBody = {
+                    id: chartId,
+                    filters: yoloFilters,
+                };
+                const resp = await (0, dataFetcher_1.getData)(client, 'itempost', 'omit', hostedBody, cloudBody);
+                if (resp) {
+                    setLoading(false);
+                    setIsComparison(!!resp.compareRows?.length);
+                    if (resp.compareRows) {
+                        (0, merge_1.mergeComparisonRange)(resp);
+                    }
+                    dispatch({
+                        type: 'UPDATE_DASHBOARD_ITEM',
+                        id: chartId,
+                        data: {
+                            ...resp,
+                            filtersApplied: dashboardFilters,
+                        },
+                    });
+                }
+            }
+            catch (e) {
+                console.log('Error fetching chart: ', e);
+                setLoading(false);
+            }
+        }
+        if (config) {
+            setLoading(false);
+            return;
+        }
+        getChartOptions();
+    }, [dashboardFilters, client, chartId]);
+    (0, react_1.useEffect)(() => {
+        if (!dashboardFilters ||
+            !chartId ||
+            !dashboard[chartId] ||
+            !dashboard[chartId].buckets ||
+            !dashboard[chartId].buckets.length) {
+            return;
+        }
+        const dateFilter = Object.values(dashboardFilters).find((filter) => filter.filterType == 'date_range');
+        if (dateFilter && dashboard[chartId].rows.length) {
+            const aggregatedObj = (0, aggregate_1.aggregate)(dashboard[chartId], dashboard[chartId].buckets, dateFilter);
+            setBucketData({
+                name: dashboard[chartId].name,
+                xAxisFormat: aggregatedObj.xAxisFormat,
+                xAxisField: aggregatedObj.xAxisField,
+                xAxisLabel: aggregatedObj.xAxisLabel,
+                rows: aggregatedObj.bucketedRows,
+            });
+        }
+        const stringFilters = dashboard[chartId].buckets.filter((bucket) => {
+            return ((0, ReportBuilder_1.getPostgresBasicType)(dashboard[chartId].fields.find((field) => field.name === bucket.field)) === 'string');
+        });
+        if (stringFilters.length && dashboard[chartId].rows.length) {
+            const aggregatedObj = (0, aggregate_1.aggregate)(dashboard[chartId], dashboard[chartId].buckets, null);
+            setBucketData({
+                name: dashboard[chartId].name,
+                xAxisFormat: aggregatedObj.xAxisFormat,
+                xAxisField: aggregatedObj.xAxisField,
+                xAxisLabel: aggregatedObj.xAxisLabel,
+                rows: aggregatedObj.bucketedRows,
+            });
+        }
+        if (!dashboard[chartId].rows.length && bucketData !== null) {
+            setBucketData(null);
+        }
+    }, [dashboard[chartId]]);
+    const dateFilter = Object.values(dashboardFilters ?? {}).find((filter) => filter.filterType == 'date_range');
+    const isPivot = dashboard[chartId]?.pivot || config?.pivot;
+    const pivotTable = (0, react_1.useMemo)(() => {
+        const pivot = dashboard[chartId]?.pivot || config?.pivot;
+        const data = dashboard[chartId] ? dashboard[chartId] : config;
+        return pivot && data?.rows
+            ? (0, PivotModal_1.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 = (0, react_1.useMemo)(() => {
+        if (!pivotTable) {
+            return null;
+        }
+        const pivot = dashboard[chartId]?.pivot || config?.pivot;
+        const yAxisFields = config
+            ? config.yAxisFields
+            : dashboard[chartId]?.yAxisFields;
+        return yAxisFields
+            ? (0, PivotModal_1.generatePivotTableYAxis)(pivot, pivotTable.columns, yAxisFields?.[0]?.format)
+            : null;
+    }, [pivotTable]);
+    if (!config && (!dashboard[chartId] || loading)) {
+        return ((0, jsx_runtime_1.jsx)("div", { style: {
+                ...containerStyle,
+                boxSizing: 'content-box',
+                height: '100%',
+            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                    height: containerStyle?.height,
+                    width: '100%',
+                    boxSizing: 'content-box',
+                    borderRadius: 8,
+                    overflow: 'hidden',
+                }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [(0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: theme?.loadingStateBackgroundColor || '#F9F9FA' }), (0, jsx_runtime_1.jsx)("defs", { fill: theme?.loadingStateBackgroundColor || '#F9F9FA', children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "skeletonGradient", x1: "0%", y1: "0%", x2: "10%", y2: "0%", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "rgba(255,255,255,0)" }), (0, jsx_runtime_1.jsx)("stop", { offset: "50%", stopColor: "#FEFEFE" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "rgba(255,255,255,0)" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "x1", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "x2", from: "-50%", to: "150%", dur: "2s", repeatCount: "indefinite" })] }) }), (0, jsx_runtime_1.jsx)("rect", { width: "50%", height: "100%", fill: "url(#skeletonGradient)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "x", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }) })] }) }) }));
+    }
+    // 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 ((0, jsx_runtime_1.jsx)(PieChart_1.default, { 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;
+        return ((0, jsx_runtime_1.jsx)(Table_1.SpecialTable, { rows: pivotTable?.rows ?? data.rows ?? [], columns: pivotTable?.columns || data.columns || data.yAxisFields, height: '400px', containerStyle: {
+                ...containerStyle,
+            }, theme: theme, isTableChart: true, name: data.name }));
+    }
+    if (chartTypes.includes('bar')) {
+        return ((0, jsx_runtime_1.jsx)(BarList_1.default, { data: pivotTable
+                ? pivotTable.rows
+                : config
+                    ? (config.bucketedRows &&
+                        config.bucketedRows.length > 0 &&
+                        config.bucketedRows) ||
+                        config.rows
+                    : bucketData && bucketData.rows
+                        ? bucketData.rows
+                        : dashboard[chartId].rows, theme: theme, yAxisFields: pivotTableYAxis
+                ? pivotTableYAxis
+                : config
+                    ? config.yAxisFields
+                    : dashboard[chartId].yAxisFields, colors: colors, xAxisField: config
+                ? config.xAxisField
+                : bucketData
+                    ? bucketData.xAxisField
+                    : dashboard[chartId].xAxisField, xAxisFormat: config
+                ? config.xAxisFormat
+                : bucketData
+                    ? bucketData.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.bucketedRows &&
+                config.bucketedRows.length > 0 &&
+                config.bucketedRows) ||
+                config.rows
+            : bucketData && bucketData.rows && bucketData.rows.length > 0
+                ? bucketData.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 ((0, jsx_runtime_1.jsx)(BarChart_1.default, { colors: colors, theme: theme, isStacked: isPivot && yAxisFields.length > (dateFilter?.comparison ? 2 : 1), yAxisFields: yAxisFields, 
+            // @ts-ignore
+            data: data, xAxisField: config
+                ? config.xAxisField
+                : bucketData
+                    ? bucketData.xAxisField
+                    : dashboard[chartId].xAxisField, xAxisLabel: config
+                ? config.xAxisLabel
+                : bucketData
+                    ? bucketData.xAxisLabel
+                    : dashboard[chartId].xAxisLabel, xAxisFormat: config
+                ? config.xAxisFormat
+                : bucketData
+                    ? bucketData.xAxisFormat
+                    : dashboard[chartId].xAxisFormat, containerStyle: containerStyle, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive }));
+    }
+    if (chartTypes.includes('metric')) {
+        const data = dashboard[chartId] ? dashboard[chartId] : config;
+        return ((0, jsx_runtime_1.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',
+                flexDirection: 'column',
+            }, children: data.rows.length > 0 &&
+                (0, valueFormatter_1.valueFormatter)({
+                    value: data.rows[0][data.xAxisField],
+                    field: data.xAxisField,
+                    fields: [
+                        {
+                            field: data.xAxisField,
+                            format: data.xAxisFormat,
+                        },
+                    ],
+                }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(LineChart_1.default, { colors: colors, yAxisFields: yAxisFields, data: data, xAxisField: config
+            ? config.xAxisField
+            : bucketData
+                ? bucketData.xAxisField
+                : dashboard[chartId].xAxisField, xAxisLabel: config
+            ? config.xAxisLabel
+            : bucketData
+                ? bucketData.xAxisLabel
+                : dashboard[chartId].xAxisLabel, xAxisFormat: config
+            ? config.xAxisFormat
+            : bucketData
+                ? bucketData.xAxisFormat
+                : dashboard[chartId].xAxisFormat, containerStyle: containerStyle, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive }));
+};
+exports.default = Chart;

package/dist/cjs/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;AA0DD,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;CACrB;AACD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA4B5D"}