@quillsql/react 2.12.37 → 2.12.38

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ChartTooltipRow({ value, name, color, theme, }) {
+    return (_jsxs("div", { style: {
+            marginRight: '24px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            width: '100%',
+            paddingTop: 2,
+            paddingBottom: 2,
+        }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx("span", { style: {
+                            background: color,
+                            borderWidth: 2,
+                            borderStyle: 'solid',
+                            borderColor: 'white',
+                            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+                            height: '12px',
+                            width: '12px',
+                            borderRadius: 100,
+                            marginRight: 6,
+                            boxSizing: 'border-box',
+                        } }), _jsx("p", { style: {
+                            marginTop: 0,
+                            marginBottom: 0,
+                            fontFamily: theme?.fontFamily,
+                            color: theme?.primaryTextColor,
+                            fontSize: theme?.fontSizeSmall || '14px',
+                            fontWeight: theme?.fontWeightMedium || '500',
+                        }, children: value })] }), _jsx("p", { style: {
+                    marginTop: 0,
+                    marginBottom: 0,
+                    fontFamily: theme?.fontFamily,
+                    color: theme?.secondaryTextColor,
+                    textAlign: 'right',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    fontSize: theme?.fontSizeSmall || '14px',
+                    fontWeight: theme?.fontWeightNormal || '400',
+                }, children: name })] }));
+}

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

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { type ColorMapType } from '../../Chart';
+import { AxisFormat } from '../../Dashboard';
+export default function LineChart({ colors, colorMap, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid, hideVerticalCartesianGrid, hideSubsequentXAxisTicks, cartesianGridLineStyle, comparisonLineStyle, cartesianGridLineColor, onClickChartElement, dateFilter, }: {
+    colors?: string[];
+    colorMap?: ColorMapType;
+    yAxisFields: any[];
+    data: any[];
+    containerStyle?: React.CSSProperties;
+    className?: string;
+    xAxisField: string;
+    xAxisLabel: string;
+    xAxisFormat: AxisFormat;
+    theme: any;
+    comparison: any;
+    isAnimationActive: boolean;
+    hideXAxis: boolean;
+    hideYAxis: boolean;
+    hideCartesianGrid: boolean;
+    hideHorizontalCartesianGrid: boolean;
+    hideVerticalCartesianGrid: boolean;
+    hideSubsequentXAxisTicks: boolean;
+    cartesianGridLineStyle: 'solid' | 'dashed';
+    comparisonLineStyle: 'solid' | 'dashed';
+    cartesianGridLineColor?: string;
+    onClickChartElement?: (e: any) => void;
+    dateFilter?: any;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LineChart.d.ts.map

package/dist/esm/components/Chart/LineChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAgC7C,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,QAAa,EACb,WAAW,EACX,IAAI,EACJ,cAAc,EACd,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,2BAAmC,EACnC,yBAAgC,EAChC,wBAAgC,EAChC,sBAAgC,EAChC,mBAA6B,EAC7B,sBAAsB,EACtB,mBAA8B,EAC9B,UAAU,GACX,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,GAAG,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,2BAA2B,EAAE,OAAO,CAAC;IACrC,yBAAyB,EAAE,OAAO,CAAC;IACnC,wBAAwB,EAAE,OAAO,CAAC;IAClC,sBAAsB,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3C,mBAAmB,EAAE,OAAO,GAAG,QAAQ,CAAC;IACxC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,GAAG,CAAC;CAClB,2CAuQA"}

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

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import { Area, CartesianGrid, ComposedChart as ReChartsAreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { DATE_FORMAT_TYPES, quillFormat, 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 { useEffect, useState } from 'react';
+import { hashCode } from '../../utils/crypto';
+function createLineForEmptyChart(yAxisFields, dateFilter, xAxisField, xAxisFormat) {
+    let lineChartData = [];
+    if (dateFilter &&
+        DATE_FORMAT_TYPES.includes(xAxisFormat || '') &&
+        (!lineChartData || lineChartData.length === 0)) {
+        const xAxis = xAxisField || '';
+        const yAxis = yAxisFields[0]?.field;
+        const startDate = quillFormat({
+            value: dateFilter?.startDate,
+            format: xAxisFormat,
+        });
+        const endDate = quillFormat({
+            value: dateFilter?.endDate,
+            format: xAxisFormat,
+        });
+        lineChartData = [
+            { [xAxis]: startDate, [yAxis]: '0' },
+            { [xAxis]: 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, }) {
+    const [formattedData, setFormattedData] = useState(data);
+    useEffect(() => {
+        if (!data || data.length === 0) {
+            setFormattedData(createLineForEmptyChart(yAxisFields, dateFilter, xAxisField, xAxisFormat));
+            return;
+        }
+        let newData = [...data];
+        if (typeof data[0][xAxisField] === 'object') {
+            newData = data.map((d) => {
+                const formatted = { ...d };
+                // NEED TO FORMAT FOR BIG QUERY
+                if (d[xAxisField] && typeof d[xAxisField] === 'object') {
+                    formatted[xAxisField] = d[xAxisField].value;
+                }
+                return formatted;
+            });
+        }
+        if (newData.length === 1) {
+            const point = { ...newData[0] };
+            newData.push(point);
+        }
+        setFormattedData(newData);
+    }, [data]);
+    if (!formattedData || formattedData.length === 0) {
+        return (_jsx("div", { style: {
+                display: 'flex',
+                flex: '1 0 auto',
+                height: '100%',
+                margin: 'auto',
+                justifyContent: 'center',
+                alignItems: 'center',
+                fontSize: 13,
+                color: theme.secondaryTextColor,
+                ...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%', children: _jsxs(ReChartsAreaChart, { data: formattedData, children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: !hideHorizontalCartesianGrid, vertical: !hideVerticalCartesianGrid, stroke: cartesianGridLineColor ?? '#e5e7eb', strokeDasharray: cartesianGridLineStyle === 'dashed' ? '5 5' : undefined })), _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), 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 }) => {
+                            let label2;
+                            if (comparison &&
+                                payload?.length > 1 &&
+                                payload[0].payload[xAxisField + '2']) {
+                                label2 = payload[0].payload[xAxisField + '2'];
+                            }
+                            return (_jsx(ChartTooltip, { active: active, payload: payload, label: label, label2: label2, dateFormatter: (value) => valueFormatter({
+                                    value,
+                                    field: xAxisField,
+                                    fields: [{ field: xAxisField, format: xAxisFormat }],
+                                }), valueFormatter: (value) => valueFormatter({
+                                    value,
+                                    field: payload[0].dataKey,
+                                    fields: [
+                                        ...yAxisFields,
+                                        { field: xAxisField, format: xAxisFormat },
+                                    ],
+                                }), xAxisFormat: xAxisFormat, xAxisField: xAxisField, colors: colors, theme: theme, comparison: comparison, dateFilter: dateFilter }));
+                        }, 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}`));
+                        }), 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, { name: elem.label, 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, onClick: onClickChartElement }, elem.field));
+                        })] }) }) }));
+}

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

@@ -0,0 +1,62 @@
+import React, { CSSProperties } from 'react';
+export type ValueFormatter = {
+    (value: number): string;
+};
+declare const iconVariantValues: readonly ["simple", "light", "shadow", "solid", "outlined"];
+export type IconVariant = (typeof iconVariantValues)[number];
+export type HorizontalPosition = 'left' | 'right';
+export type VerticalPosition = 'top' | 'bottom';
+export type ButtonVariant = 'primary' | 'secondary' | 'light';
+declare const deltaTypeValues: readonly ["increase", "moderateIncrease", "decrease", "moderateDecrease", "unchanged"];
+export type DeltaType = (typeof deltaTypeValues)[number];
+declare const sizeValues: readonly ["xs", "sm", "md", "lg", "xl"];
+export type Size = (typeof sizeValues)[number];
+declare const colorValues: readonly ["slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
+export type Color = (typeof colorValues)[number];
+declare const justifyContentValues: readonly ["start", "end", "center", "between", "around", "evenly"];
+export type JustifyContent = (typeof justifyContentValues)[number];
+declare const alignItemsValues: readonly ["start", "end", "center", "baseline", "stretch"];
+export type AlignItems = (typeof alignItemsValues)[number];
+export type FlexDirection = 'row' | 'col' | 'row-reverse' | 'col-reverse';
+export declare const defaultValueFormatter: ValueFormatter;
+export declare const sumNumericArray: (arr: number[]) => number;
+export declare const parseData: (data: any, colors: any, categoryKey: any, valueKey: any) => any;
+export declare const parseLabelInput: (labelInput: string | undefined, valueFormatter: ValueFormatter, data: any[], category: string) => string;
+export declare const ChartTooltipFrame: ({ children, theme, }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export interface ChartTooltipRowProps {
+    value: string;
+    name: string;
+    color: Color;
+    theme: any;
+}
+export declare const ChartTooltipRow: ({ value, name, color, theme, }: ChartTooltipRowProps) => import("react/jsx-runtime").JSX.Element;
+export interface DonutChartTooltipProps {
+    active: boolean | undefined;
+    payload: any;
+    valueFormatter: ValueFormatter;
+    theme: any;
+}
+export declare const DonutChartTooltip: ({ active, payload, valueFormatter, theme, }: DonutChartTooltipProps) => import("react/jsx-runtime").JSX.Element | null;
+type DonutChartVariant = 'donut' | 'pie';
+export interface DonutChartProps extends React.HTMLAttributes<HTMLDivElement> {
+    category?: string;
+    index?: string;
+    colors?: any[];
+    colorMap?: any;
+    data: any[];
+    variant?: DonutChartVariant;
+    valueFormatter?: ValueFormatter;
+    label?: string;
+    showLabel?: boolean;
+    showAnimation?: boolean;
+    showTooltip?: boolean;
+    containerStyle?: CSSProperties;
+    className?: string;
+    theme?: any;
+    onClickChartElement?: (e: any) => void;
+}
+declare const PieChartWrapper: React.ForwardRefExoticComponent<DonutChartProps & React.RefAttributes<HTMLDivElement>>;
+export default PieChartWrapper;
+//# sourceMappingURL=PieChart.d.ts.map

package/dist/esm/components/Chart/PieChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/PieChart.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,195 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import React from 'react';
+import { Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
+import { generateArrayFromColor } from '../../utils/color';
+const iconVariantValues = [
+    'simple',
+    'light',
+    'shadow',
+    'solid',
+    'outlined',
+];
+const deltaTypeValues = [
+    'increase',
+    'moderateIncrease',
+    'decrease',
+    'moderateDecrease',
+    'unchanged',
+];
+const sizeValues = ['xs', 'sm', 'md', 'lg', 'xl'];
+const colorValues = [
+    'slate',
+    'gray',
+    'zinc',
+    'neutral',
+    'stone',
+    'red',
+    'orange',
+    'amber',
+    'yellow',
+    'lime',
+    'green',
+    'emerald',
+    'teal',
+    'cyan',
+    'sky',
+    'blue',
+    'indigo',
+    'violet',
+    'purple',
+    'fuchsia',
+    'pink',
+    'rose',
+];
+const justifyContentValues = [
+    'start',
+    'end',
+    'center',
+    'between',
+    'around',
+    'evenly',
+];
+const alignItemsValues = [
+    'start',
+    'end',
+    'center',
+    'baseline',
+    'stretch',
+];
+export const defaultValueFormatter = (value) => (value * 1).toFixed(1) + '%';
+export const sumNumericArray = (arr) => arr.reduce((prefixSum, num) => prefixSum + num, 0);
+// @ts-ignore
+export const parseData = (data, colors, categoryKey, valueKey) => {
+    const maxItems = 20;
+    const slicedData = data.slice(0, maxItems);
+    let totalValue = slicedData.reduce((acc, dataPoint) => acc + Number(dataPoint[valueKey]), 0);
+    if (totalValue !== 100) {
+        slicedData.forEach((dataPoint) => {
+            dataPoint[valueKey] = (Number(dataPoint[valueKey]) * 100) / totalValue;
+        });
+        totalValue = 100;
+    }
+    const parsedData = slicedData.map((dataPoint, idx) => {
+        const baseColor = idx < colors.length ? colors[idx] : colors[colors.length - 1];
+        return {
+            ...dataPoint,
+            color: baseColor,
+            fill: baseColor,
+        };
+    });
+    if (data.length > maxItems) {
+        const otherData = data.slice(maxItems);
+        const otherSum = otherData.reduce((acc, dataPoint) => acc + Number(dataPoint[valueKey]), 0);
+        const otherColor = colors[colors.length - 1];
+        const normalizedOtherSum = (otherSum * 100) / totalValue;
+        parsedData.push({
+            [categoryKey]: 'Other',
+            [valueKey]: normalizedOtherSum,
+            color: otherColor,
+            fill: otherColor,
+        });
+    }
+    return parsedData;
+};
+const calculateDefaultLabel = (data, category) => sumNumericArray(data.map((dataPoint) => dataPoint[category]));
+export const parseLabelInput = (labelInput, valueFormatter, data, category) => labelInput
+    ? labelInput
+    : valueFormatter(calculateDefaultLabel(data, category));
+export const ChartTooltipFrame = ({ children, theme, }) => (_jsx("div", { style: {
+        borderStyle: 'solid',
+        borderColor: theme?.borderColor || '#E5E7EB',
+        borderWidth: 1,
+        background: theme?.backgroundColor || '#ffffff',
+        fontSize: theme?.fontSize || '14px',
+        borderRadius: '6px',
+        boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+    }, children: children }));
+export const ChartTooltipRow = ({ value, name, color, theme, }) => (_jsxs("div", { style: {
+        display: 'flex',
+        gap: 8,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        minWidth: 120,
+    }, children: [_jsxs("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }, children: [_jsx("span", { style: {
+                        background: color,
+                        borderWidth: 2,
+                        borderStyle: 'solid',
+                        borderColor: 'white',
+                        height: '8px',
+                        width: '8px',
+                        boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+                        borderRadius: '9999px',
+                        marginRight: 5,
+                    } }), _jsx("p", { style: {
+                        marginTop: 0,
+                        marginBottom: 0,
+                        fontFamily: theme?.fontFamily,
+                        color: theme?.primaryTextColor,
+                        paddingTop: 2,
+                        paddingBottom: 2,
+                        fontSize: theme?.fontSizeSmall || '14px',
+                        fontWeight: theme?.fontWeightMedium || '500',
+                    }, children: value })] }), _jsx("p", { style: {
+                marginTop: 0,
+                marginBottom: 0,
+                fontFamily: theme?.fontFamily,
+                color: theme?.secondaryTextColor,
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                textAlign: 'right',
+                fontSize: theme?.fontSizeSmall || '14px',
+                fontWeight: theme?.fontWeightNormal || '400',
+            }, children: name })] }));
+export const DonutChartTooltip = ({ active, payload, valueFormatter, theme, }) => {
+    if (active && payload[0]) {
+        const payloadRow = payload[0];
+        return (_jsx(ChartTooltipFrame, { theme: theme, children: _jsx("div", { style: {
+                    paddingLeft: '1rem',
+                    paddingRight: '1rem',
+                    paddingTop: '8px',
+                    paddingBottom: '8px',
+                }, children: _jsx(ChartTooltipRow, { value: valueFormatter(payloadRow.value), name: payloadRow.name, color: payloadRow.payload.color, theme: theme }) }) }));
+    }
+    return null;
+};
+const PieChartWrapper = React.forwardRef((props, ref) => {
+    const { category = 'pct_of_the_total', index = 'status', data, colors = [], colorMap = {}, variant = 'donut', valueFormatter = defaultValueFormatter, className, containerStyle, theme, onClickChartElement, ...other } = props;
+    const isDonut = variant == 'donut';
+    if (!data || data.length === 0) {
+        return (_jsx("div", { style: {
+                display: 'flex',
+                flex: '1 0 auto',
+                height: '100%',
+                margin: 'auto',
+                justifyContent: 'center',
+                alignItems: 'center',
+                fontSize: 13,
+                color: theme.secondaryTextColor,
+                ...containerStyle,
+            }, className: className, children: "No results found for specified time period." }));
+    }
+    return (_jsx("div", { ref: ref, className: className, style: {
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            boxSizing: 'content-box',
+            ...containerStyle,
+        }, ...other, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(PieChart, { children: [_jsx(Pie, { data: parseData(data, (colorMap[category] &&
+                            colorMap[category]['primary'] &&
+                            generateArrayFromColor(colorMap[category]['primary'], data.length)) ??
+                            (colors.length >= data.length
+                                ? colors
+                                : generateArrayFromColor(colors.slice(0, 2), data.length)), index, category), cx: "50%", cy: "50%", startAngle: 90, endAngle: -270, innerRadius: isDonut ? '70%' : '0%', outerRadius: "100%", paddingAngle: 0, dataKey: category, nameKey: index, isAnimationActive: true, onClick: onClickChartElement }), _jsx(Tooltip, { wrapperStyle: {
+                            outline: 'none',
+                        }, content: ({ active, payload }) => {
+                            return (_jsx(DonutChartTooltip, { active: active, payload: payload, valueFormatter: valueFormatter, theme: theme }));
+                        } })] }) }) }));
+});
+export default PieChartWrapper;

package/dist/esm/components/Dashboard/ChartComponent.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { QuillReportProps } from '../../Dashboard';
+export default function QuillChartComponent({ report, onClick, children, isLoading, }: QuillReportProps): JSX.Element;
+//# sourceMappingURL=ChartComponent.d.ts.map

package/dist/esm/components/Dashboard/ChartComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/ChartComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAInD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAsGhC"}

package/dist/esm/components/Dashboard/ChartComponent.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '../../hooks';
+import ChartSkeleton from '../Chart/ChartSkeleton';
+export default function QuillChartComponent({ report, onClick, children, isLoading, }) {
+    const theme = useTheme();
+    return (_jsx("div", { onClick: () => onClick && onClick(report), style: {
+            cursor: 'pointer',
+            boxSizing: 'content-box',
+            minHeight: 400,
+            borderRadius: 8,
+        }, children: _jsx("div", { style: {
+                width: '100%',
+                height: '100%',
+                boxSizing: 'content-box',
+            }, children: _jsx("div", { style: {
+                    width: '100%',
+                    height: '100%',
+                    boxSizing: 'content-box',
+                }, children: _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'space-between',
+                        height: '100%',
+                        boxSizing: 'content-box',
+                    }, children: [_jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                justifyContent: 'space-between',
+                                boxSizing: 'content-box',
+                                paddingBottom: 20,
+                            }, children: [_jsx("div", { style: {
+                                        fontFamily: theme.fontFamily,
+                                        color: theme.primaryTextColor,
+                                        boxSizing: 'content-box',
+                                        fontSize: 18,
+                                        fontWeight: '500',
+                                        textOverflow: 'ellipsis',
+                                        padding: 0,
+                                        whiteSpace: 'nowrap',
+                                        display: 'block',
+                                        maxWidth: '100%',
+                                        overflow: 'hidden',
+                                    }, children: report?.name }), onClick && report?.name ? (_jsx("div", { style: {
+                                        fontFamily: theme.fontFamily,
+                                        color: theme.primaryTextColor,
+                                        boxSizing: 'content-box',
+                                        fontWeight: '500',
+                                        fontSize: 14,
+                                        minWidth: 14 * 7,
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'flex-end',
+                                    }, children: 'view report →' })) : null] }), isLoading ? (_jsx(ChartSkeleton, { containerStyle: {
+                                height: '100%',
+                            } })) : (_jsx("div", { style: {
+                                padding: 0,
+                                height: '100%',
+                                boxSizing: 'content-box',
+                            }, children: children }))] }) }) }) }, report?.name));
+}

package/dist/esm/components/Dashboard/DashboardFilter.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { type DateRangePickerComponentProps } from '../../DateRangePicker/QuillDateRangePicker';
+type SelectComponentType = ({ label, value, options, onChange, width, }: {
+    value: string;
+    label?: string | undefined;
+    width: number;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+}) => JSX.Element;
+type MultiSelectComponentType = ({ label, value, options, onChange, width, }: {
+    value: string[];
+    label?: string | undefined;
+    width: number;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    onChange: (event: React.ChangeEvent<HTMLSelectElement> | {
+        target: {
+            value: string[];
+        };
+    }) => void;
+}) => JSX.Element;
+type DateRangePickerComponentType = ({ dateRange, onChangeDateRange, presetOptions, onChangePreset, preset, selectWidth, }: DateRangePickerComponentProps) => JSX.Element;
+interface DashboardFilterProps {
+    filter: any;
+    onChangeFilter: (...args: any[]) => void;
+    SelectComponent: SelectComponentType | React.MemoExoticComponent<SelectComponentType>;
+    MultiSelectComponent: MultiSelectComponentType | React.MemoExoticComponent<MultiSelectComponentType>;
+    DateRangePickerComponent: DateRangePickerComponentType | React.MemoExoticComponent<DateRangePickerComponentType>;
+    theme: any;
+}
+export declare function DashboardFilter({ filter, onChangeFilter, SelectComponent, MultiSelectComponent, DateRangePickerComponent, theme, }: DashboardFilterProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=DashboardFilter.d.ts.map

package/dist/esm/components/Dashboard/DashboardFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,KAAK,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAIhG,KAAK,mBAAmB,GAAG,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,GACN,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACjE,KAAK,GAAG,CAAC,OAAO,CAAC;AAElB,KAAK,wBAAwB,GAAG,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,GACN,EAAE;IACD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CACR,KAAK,EACD,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,GACpC;QAAE,MAAM,EAAE;YAAE,KAAK,EAAE,MAAM,EAAE,CAAA;SAAE,CAAA;KAAE,KAChC,IAAI,CAAC;CACX,KAAK,GAAG,CAAC,OAAO,CAAC;AAElB,KAAK,4BAA4B,GAAG,CAAC,EACnC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,MAAM,EACN,WAAW,GACZ,EAAE,6BAA6B,KAAK,GAAG,CAAC,OAAO,CAAC;AAEjD,UAAU,oBAAoB;IAC5B,MAAM,EAAE,GAAG,CAAC;IACZ,cAAc,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACzC,eAAe,EACX,mBAAmB,GACnB,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;IACnD,oBAAoB,EAChB,wBAAwB,GACxB,KAAK,CAAC,mBAAmB,CAAC,wBAAwB,CAAC,CAAC;IACxD,wBAAwB,EACpB,4BAA4B,GAC5B,KAAK,CAAC,mBAAmB,CAAC,4BAA4B,CAAC,CAAC;IAC5D,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,cAAc,EACd,eAAsC,EACtC,oBAAgD,EAChD,wBAAwB,EACxB,KAAK,GACN,EAAE,oBAAoB,kDAwItB"}