@quillsql/react 2.10.31 → 2.10.32

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

@@ -0,0 +1,229 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { format, subDays } from 'date-fns';
+import ChartTooltipFrame from './ChartTooltipFrame';
+import ChartTooltipRow from './ChartTooltipRow';
+import { useComparisonRange, useDateFilter } from '../../Context';
+import ChartTooltipGroup from './ChartTooltipGroup';
+import { convertComparisonRange, isDateFormat } from '../../utils/dates';
+// The chart tooltip to display for primary labels (ie. not label2).
+const ChartTooltipPrimary = (props) => (_jsxs(ChartTooltipFrame, { theme: props.theme, children: [_jsx("div", { style: {
+                borderStyle: 'solid',
+                borderBottomColor: props.theme?.borderColor || '#E5E7EB',
+                background: props.theme?.backgroundColor || 'white',
+                borderTop: 'none',
+                borderLeft: 'none',
+                borderRight: 'none',
+                borderBottomWidth: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                paddingLeft: '16px',
+                paddingRight: '16px',
+                paddingTop: '8px',
+                paddingBottom: '8px',
+            }, children: _jsx("p", { style: {
+                    textAlign: 'left',
+                    marginTop: 0,
+                    marginBottom: 0,
+                    fontFamily: props.theme?.fontFamily,
+                    color: props.theme?.primaryTextColor,
+                    fontSize: props.theme?.fontSizeSmall || '14px',
+                    fontWeight: props.theme?.boldFontWeight || '500',
+                    paddingTop: 2,
+                    paddingBottom: 2,
+                }, children: !isNaN(new Date(props.label)) && props.dateFormatter
+                    ? props.dateFormatter(props.label)
+                    : !isNaN(new Date(props.label))
+                        ? format(new Date(props.label), 'MMM yyyy')
+                        : props.label }) }), _jsx("div", { style: {
+                paddingRight: '16px',
+                paddingLeft: '16px',
+                paddingTop: '8px',
+                paddingBottom: '8px',
+            }, children: props.payload.map(({ color, value, name }, idx) => (_jsx(ChartTooltipRow, { value: props.valueFormatter(value), name: name, color: color, theme: props.theme }, `id-${idx}`))) })] }));
+// The chart tooltip to display for secondary labels (ie. label2).
+const ChartTooltipSecondary = (props) => (_jsx(ChartTooltipFrame, { theme: props.theme, children: props.payload.map(({ color, value, name }, idx) => (_jsxs(_Fragment, { children: [idx === 0 && (_jsx("div", { style: {
+                    borderStyle: 'solid',
+                    borderBottomColor: props.theme?.borderColor || '#E5E7EB',
+                    background: props.theme?.backgroundColor || 'white',
+                    borderTop: 'none',
+                    borderLeft: 'none',
+                    borderRight: 'none',
+                    borderBottomWidth: 1,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    paddingLeft: '16px',
+                    paddingRight: '16px',
+                    paddingTop: '8px',
+                    paddingBottom: '8px',
+                }, children: _jsx("p", { style: {
+                        textAlign: 'left',
+                        marginTop: 0,
+                        marginBottom: 0,
+                        fontFamily: props.theme?.fontFamily,
+                        color: props.theme?.primaryTextColor,
+                        fontSize: props.theme?.fontSizeSmall || '14px',
+                        fontWeight: props.theme?.boldFontWeight || '500',
+                        paddingTop: 2,
+                        paddingBottom: 2,
+                    }, children: name }) })), _jsx("div", { style: {
+                    paddingRight: '16px',
+                    paddingLeft: '16px',
+                    paddingBottom: '8px',
+                    ...(idx === 0 && { paddingTop: '8px' }),
+                }, children: _jsx(ChartTooltipRow, { name: props.valueFormatter(value), value: !isNaN(new Date(idx === 0 ? props.label : props.label2)) &&
+                        props.dateFormatter
+                        ? props.dateFormatter(idx === 0 ? props.label : props.label2)
+                        : !isNaN(new Date(idx === 0 ? props.label : props.label2))
+                            ? format(new Date(idx === 0 ? props.label : props.label2), 'MMM yyyy')
+                            : idx === 0
+                                ? props.label
+                                : props.label2, color: color, theme: props.theme }, `id-${idx}`) })] }))) }));
+const LABEL_TO_DAYS = {
+    'This week': 7,
+    'This month': 30,
+    'This year': 365,
+    'Last 7 days': 7,
+    'Last 30 days': 30,
+    'Last 90 days': 90,
+    'Last 6 months': 180,
+    'All time': 0,
+};
+/**
+ * Transforms a list of payload items where some payload items have a dataKey
+ * prefixed with "comparison_" into an object where the keys are the grouped
+ * data keys (ie. "Fuel" and "comparison_Fuel" both map to the key "Fuel") and
+ * the values are a list of chart tooltip row items for that key.
+ *
+ * For example:
+ * [
+ *   { dataKey: "Fuel", value: 178 }
+ *   { dataKey: "Food", value: 58 }
+ *   { dataKey: "comparison_Fuel", value: 145 }
+ *   { dataKey: "comparison_Food", value: 72 }
+ * ]
+ *
+ * transforms into this
+ * {
+ *   "Fuel": [
+ *     { color: "blue", value: 178, name: "Last 6 months" }
+ *     { color: "blue", value: 145, name: "Previous Period" }
+ *   ]
+ *   "Food": [
+ *     { color: "red", value: 58, name: "Last 6 months" }
+ *     { color: "red", value: 72, name: "Previous Period" }
+ *   ]
+ * }
+ */
+function reformatComparisonPayload(props, primaryLabel, comparisonLabel) {
+    const columnsByKey = {};
+    const isDateXAxis = isDateFormat(props.xAxisFormat);
+    // When there is exactly one pair of entries for a comparison, we don't group
+    // them by section, and we flip things around so the label goes on top and the
+    // name of each colored tag is the date if the xAxis is a date format.
+    if (props.payload.length <= 2 && isDateXAxis) {
+        for (const item of props.payload) {
+            const isComparison = item.dataKey.includes('comparison_');
+            const nameKey = isComparison
+                ? `comparison_${props.xAxisField}`
+                : props.xAxisField;
+            const days = LABEL_TO_DAYS[primaryLabel] ?? 0;
+            const primaryDate = item.payload[props.xAxisField] ?? 0;
+            const compDate = subDays(new Date(primaryDate), days + 1);
+            const date = item.payload[nameKey] ?? format(compDate, props.xAxisFormat);
+            const name = props.dateFormatter(date);
+            const color = item.color;
+            const value = props.valueFormatter(item.value);
+            if (!columnsByKey['']) {
+                columnsByKey[''] = [];
+            }
+            columnsByKey[''].push({ color, name, value });
+        }
+        return columnsByKey;
+    }
+    // When there are more than one pair of entries in payload, we group them
+    // by the dataKey and use that key as the key in our map.
+    for (const item of props.payload) {
+        const key = item.dataKey.replace('comparison_', '');
+        const isComparison = item.dataKey.includes('comparison_');
+        const name = isComparison ? comparisonLabel : primaryLabel;
+        const color = item.color;
+        const value = props.valueFormatter(item.value);
+        if (!columnsByKey[key]) {
+            columnsByKey[key] = [];
+        }
+        columnsByKey[key].push({ color, name, value });
+    }
+    return columnsByKey;
+}
+/**
+ * Returns the label for the chart tooltip.
+ */
+function getTooltipLabel(props, altTooltipLabel, isDateXAxis) {
+    // TODO: clean me
+    return props.payload.length <= 2 && altTooltipLabel && isDateXAxis
+        ? !isNaN(new Date(altTooltipLabel)) && props.dateFormatter
+            ? props.dateFormatter(altTooltipLabel)
+            : !isNaN(new Date(altTooltipLabel))
+                ? format(new Date(altTooltipLabel), 'MMM yyyy')
+                : altTooltipLabel
+        : !isNaN(new Date(props.label)) && props.dateFormatter
+            ? props.dateFormatter(props.label)
+            : !isNaN(new Date(props.label))
+                ? format(new Date(props.label), 'MMM yyyy')
+                : props.label;
+}
+// The chart tooltip to display for comparison labels (eg. "previous period").
+function ChartTooltipComparison(props) {
+    const { comparisonRange } = useComparisonRange();
+    const { dateFilter } = useDateFilter();
+    const isDateXAxis = isDateFormat(props.xAxisFormat);
+    const altTooltipLabel = props.payload[0]?.dataKey
+        .replace('comparison_', '')
+        .replaceAll('_', ' ')
+        .toLowerCase();
+    const newRows = reformatComparisonPayload(props, dateFilter, convertComparisonRange(dateFilter, comparisonRange.text));
+    return (_jsxs(ChartTooltipFrame, { theme: props.theme, children: [_jsx("div", { style: {
+                    borderStyle: 'solid',
+                    borderBottomColor: props.theme?.borderColor || '#E5E7EB',
+                    background: props.theme?.backgroundColor || 'white',
+                    borderTop: 'none',
+                    borderLeft: 'none',
+                    borderRight: 'none',
+                    borderBottomWidth: 1,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    paddingLeft: '16px',
+                    paddingRight: '16px',
+                    paddingTop: '8px',
+                    paddingBottom: '8px',
+                }, children: _jsx("p", { style: {
+                        textAlign: 'left',
+                        marginTop: 0,
+                        marginBottom: 0,
+                        fontFamily: props.theme?.fontFamily,
+                        color: props.theme?.primaryTextColor,
+                        fontSize: props.theme?.fontSizeSmall || '14px',
+                        fontWeight: props.theme?.boldFontWeight || '500',
+                        textTransform: 'capitalize',
+                        paddingTop: 2,
+                        paddingBottom: 2,
+                    }, children: getTooltipLabel(props, altTooltipLabel ?? "", isDateXAxis) }) }), _jsx("div", { style: {
+                    paddingRight: '16px',
+                    paddingLeft: '16px',
+                    paddingTop: '8px',
+                    paddingBottom: '8px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 4,
+                }, children: Object.entries(newRows).map(([key, value], index) => (_jsx(ChartTooltipGroup, { name: key, items: value, theme: props.theme }, `id_${index}`))) })] }));
+}
+export default function ChartTooltip(props) {
+    const { comparisonRange } = useComparisonRange();
+    if (!props.active || !props.payload)
+        return null;
+    if (comparisonRange)
+        return _jsx(ChartTooltipComparison, { ...props });
+    if (props.label2)
+        return _jsx(ChartTooltipSecondary, { ...props });
+    return _jsx(ChartTooltipPrimary, { ...props });
+}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export default function ChartTooltipFrame({ children, theme, }: {
+    children: React.ReactNode;
+    theme: any;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChartTooltipFrame.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltipFrame.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartTooltipFrame.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,GAAG,CAAC;CACZ,2CAkBA"}

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ChartTooltipFrame({ children, theme, }) {
+    return (_jsx("div", { style: {
+            borderStyle: 'solid',
+            borderColor: theme?.borderColor || '#E5E7EB',
+            overflow: 'hidden',
+            borderWidth: 1,
+            background: theme?.backgroundColor || '#ffffff',
+            borderRadius: '6px',
+            zIndex: 40,
+            boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+        }, children: children }));
+}

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

@@ -0,0 +1,11 @@
+export interface ChartTooltipGroupProps {
+    name: string;
+    items: {
+        color: string;
+        name: string;
+        value: any;
+    }[];
+    theme: any;
+}
+export default function ChartTooltipGroup({ name, items, theme, }: ChartTooltipGroupProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChartTooltipGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltipGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartTooltipGroup.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,GAAG,CAAA;KAAE,EAAE,CAAC;IACrD,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,IAAI,EACJ,KAAK,EACL,KAAK,GACN,EAAE,sBAAsB,2CAuCxB"}

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ChartTooltipRow from './ChartTooltipRow';
+export default function ChartTooltipGroup({ name, items, theme, }) {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            paddingTop: 2,
+            paddingBottom: 2,
+            marginRight: '24px',
+        }, children: [_jsx("p", { style: {
+                    textAlign: 'left',
+                    marginTop: 0,
+                    marginBottom: 0,
+                    fontFamily: theme?.fontFamily,
+                    color: theme?.primaryTextColor,
+                    fontSize: theme?.fontSizeSmall || '14px',
+                    fontWeight: theme?.boldFontWeight || '500',
+                    paddingTop: 2,
+                    paddingBottom: 2,
+                    textTransform: 'capitalize',
+                }, children: name.replaceAll('_', ' ').toLowerCase() }), items.map(({ color, value, name }, idx) => (_jsx(ChartTooltipRow, { value: value, name: name, color: color, theme: theme }, `id-${idx}`)))] }));
+}

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

@@ -0,0 +1,8 @@
+export interface ChartTooltipRowProps {
+    value: string;
+    name: string;
+    color: string;
+    theme: any;
+}
+export default function ChartTooltipRow({ value, name, color, theme, }: ChartTooltipRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChartTooltipRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltipRow.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartTooltipRow.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAK,GACN,EAAE,oBAAoB,2CA2DtB"}

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,16 @@
+/// <reference types="react" />
+export default function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, }: {
+    colors: string[];
+    yAxisFields: any[];
+    data: any[];
+    containerStyle?: React.CSSProperties;
+    xAxisField: string;
+    xAxisLabel: string;
+    xAxisFormat: string;
+    theme: any;
+    isAnimationActive: boolean;
+    hideXAxis: boolean;
+    hideYAxis: boolean;
+    hideCartesianGrid: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# 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":";AAiBA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,WAAW,EACX,IAAI,EACJ,cAAc,EACd,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,GAC1B,EAAE;IACD,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,kDAoMA"}

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

@@ -0,0 +1,91 @@
+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 { 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';
+export default function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) {
+    const [formattedData, setFormattedData] = useState([]);
+    if (!yAxisFields || !yAxisFields.length) {
+        return null;
+    }
+    useEffect(() => {
+        if (!data || data.length === 0) {
+            return;
+        }
+        if (typeof data[0][xAxisField] === 'object') {
+            const curData = 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;
+            });
+            setFormattedData(curData);
+        }
+        else {
+            setFormattedData(data);
+        }
+    }, [data]);
+    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,
+            }, children: "No results found for specified time period." }));
+    }
+    return (_jsx("div", { style: { ...containerStyle }, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', children: _jsxs(ReChartsAreaChart, { data: formattedData, children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), _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',
+                        }, interval: "preserveStartEnd", tickLine: false, axisLine: false, padding: { left: 10, right: 10 }, minTickGap: 5, tickFormatter: (tick) => {
+                            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)' }, style: {
+                            fontSize: '12px',
+                            fontFamily: theme?.chartLabelFontFamily ||
+                                theme?.fontFamily ||
+                                'Inter; Helvetica',
+                            color: theme?.chartLabelColor || '#666666',
+                        }, tickFormatter: (value) => axisFormatter({
+                            value,
+                            field: yAxisFields[0].field,
+                            fields: [
+                                ...yAxisFields,
+                                { field: xAxisField, format: xAxisFormat },
+                            ],
+                        }) }), _jsx(Tooltip, { wrapperStyle: { outline: 'none' }, 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 }));
+                        }, position: { y: 0 } }), yAxisFields.map((elem, index) => (_jsx("defs", { children: _jsxs("linearGradient", { id: `gradient${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: selectColor(elem, colors, index), stopOpacity: 0.4 }), _jsx("stop", { offset: "95%", stopColor: 'rgba(0,0,0,0)', stopOpacity: 0 })] }) }, `defs${elem.field + index}`))), yAxisFields.map((elem, index) => (_jsx(Area, { name: elem.label, type: "linear", dataKey: elem.field, stroke: selectColor(elem, colors, index), fill: `url(#gradient${index})`, strokeWidth: 2, dot: false, isAnimationActive: isAnimationActive }, elem.field)))] }) }) }));
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export default function DashboardItem({ dashboardItem, onClickDashboardItem, theme, style, children, }: any): 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,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,aAAa,EACb,oBAAoB,EACpB,KAAK,EACL,KAAK,EACL,QAAQ,GACT,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAqGnB"}

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function DashboardItem({ dashboardItem, onClickDashboardItem, theme, style, children, }) {
+    return (_jsx("div", { onClick: onClickDashboardItem
+            ? () => onClickDashboardItem(dashboardItem)
+            : () => { }, style: {
+            // height: '100%',
+            cursor: 'pointer',
+            boxSizing: 'content-box',
+            paddingRight: 25,
+            minHeight: 400,
+            borderRadius: 8,
+            paddingTop: 20,
+            ...style,
+        }, 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: dashboardItem?.name }), onClickDashboardItem ? (_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] }), _jsx("div", { style: {
+                                padding: 0,
+                                height: '100%',
+                                boxSizing: 'content-box',
+                            }, children: children })] }) }) }) }, dashboardItem?.name));
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export default function DashboardSection({ style, children, ...props }: any): JSX.Element;
+//# sourceMappingURL=DashboardSection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardSection.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardSection.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAmBnB"}

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function DashboardSection({ style, children, ...props }) {
+    return (_jsx("div", { style: {
+            boxSizing: 'content-box',
+            width: '100%',
+            // height: '100%',
+            listStyleType: 'none',
+            display: 'grid',
+            gap: 20,
+            gridTemplateColumns: `repeat(auto-fill,minmax(400px, 1fr))`,
+            gridTemplateRows: `repeat(${170}px)`,
+            ...style,
+        }, ...props, children: children }));
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export default function DashboardSectionContainer({ style, children, ...props }: any): JSX.Element;
+//# sourceMappingURL=DashboardSectionContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardSectionContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardSectionContainer.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAenB"}

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function DashboardSectionContainer({ style, children, ...props }) {
+    return (_jsx("div", { style: {
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 20,
+            ...style,
+        }, ...props, children: children }));
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export default function DataLoader({ id, SkeletonComponent, handleOnClickDashboardItem, onClickDashboardItem, TableComponent, name, theme, }: any): JSX.Element;
+//# sourceMappingURL=DataLoader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAWA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,EAAE,EACF,iBAAiB,EACjB,0BAA0B,EAC1B,oBAAoB,EACpB,cAAc,EACd,IAAI,EACJ,KAAK,GACN,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAsFnB"}