@quillsql/react 2.9.3 → 2.9.4

package/dist/cjs/components/Banner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Banner/index.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,iBAAiB,EACjB,aAAa,EACb,MAAM,EACN,KAAK,GACN,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA4D1B"}

package/dist/cjs/components/Banner/index.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+function Banner({ dashboardItemName, dashboardName, onExit, style, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { id: "quill-edit-banner", style: {
+            zIndex: 100,
+            display: 'flex',
+            paddingTop: '0.625rem',
+            paddingBottom: '0.625rem',
+            paddingLeft: '24px',
+            paddingRight: '24px',
+            alignItems: 'center',
+            backgroundColor: '#111827',
+            ...style,
+        }, children: (0, jsx_runtime_1.jsxs)("p", { style: {
+                fontSize: '14px',
+                color: '#ffffff',
+            }, children: [(0, jsx_runtime_1.jsx)("strong", { style: { fontWeight: 600 }, children: "Edit Mode" }), (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 2 2", style: {
+                        display: 'inline',
+                        marginLeft: '8px',
+                        marginRight: '8px',
+                        width: '2px',
+                        height: '2px',
+                        fill: 'currentColor',
+                    }, "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("circle", { cx: 1, cy: 1, r: 1 }) }), `You are currently editing `, (0, jsx_runtime_1.jsx)("strong", { style: { fontWeight: 600 }, children: dashboardItemName }), ` on the `, (0, jsx_runtime_1.jsx)("strong", { style: { fontWeight: 600 }, children: dashboardName }), ` dashboard.`] }) }));
+}
+exports.default = Banner;

package/dist/cjs/components/BigModal/BigModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BigModal.d.ts","sourceRoot":"","sources":["../../../../src/components/BigModal/BigModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG1D,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EACR,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,GAC7C,CAAC,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,QAAA,MAAM,QAAQ,mFAoFZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/dist/cjs/components/BigModal/BigModal.js

@@ -0,0 +1,87 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-nocheck
+/* eslint-disable react/display-name */
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../../hooks");
+const lib_1 = require("../../lib");
+const BigModal = react_1.default.forwardRef((props, ref) => {
+    const { showModal, setShowModal, parentRef, width, maxHeight = '18rem', children, className, theme, ...other } = props;
+    const [modalExceedsWindow, setModalExceedsWindow] = (0, react_1.useState)(false);
+    const modalRef = (0, react_1.useRef)(null);
+    const checkModalExceedsWindow = (0, react_1.useCallback)((modalWidth, windowWidth) => {
+        if (!parentRef.current) {
+            return false;
+        }
+        const modalBoundingRight = parentRef.current.getBoundingClientRect().left + modalWidth;
+        return windowWidth - modalBoundingRight < 0;
+    }, [parentRef]);
+    const getAbsoluteSpacing = () => {
+        return modalExceedsWindow ? '0' : '0';
+    };
+    (0, hooks_1.useOnClickOutside)(modalRef, e => {
+        // Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
+        const isTriggerElem = parentRef
+            ? parentRef.current?.contains(e.target)
+            : false;
+        if (!isTriggerElem) {
+            setShowModal(false);
+        }
+    });
+    // Execute only when modal is of absolute size
+    (0, react_1.useEffect)(() => {
+        if (width) {
+            setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
+        }
+    }, [checkModalExceedsWindow, parentRef, width]);
+    (0, hooks_1.useOnWindowResize)(() => {
+        if (width) {
+            setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
+        }
+    });
+    return showModal ? ((0, jsx_runtime_1.jsx)("div", { ref: (0, lib_1.mergeRefs)([modalRef, ref]), style: {
+            position: 'absolute',
+            zIndex: 10,
+            overflowY: 'auto',
+            backgroundColor: theme?.backgroundColor || 'white',
+            borderColor: theme?.borderColor || '#E5E7EB',
+            borderTopStyle: 'solid',
+            borderBottomStyle: 'solid',
+            borderLeftStyle: 'solid',
+            borderRightStyle: 'solid',
+            borderTopWidth: 1,
+            borderBottomWidth: 1,
+            borderLeftWidth: 1,
+            borderRightWidth: 1,
+            borderRadius: '0.375rem',
+            boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+        }, ...other, children: children })) : null;
+});
+exports.default = BigModal;

package/dist/cjs/components/Chart/BarChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarChart.tsx"],"names":[],"mappings":";AAgBA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,MAAM,EACN,WAAW,EACX,IAAI,EACJ,cAAc,EACd,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,SAAS,EACT,iBAAwB,EACzB,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,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,2CA6IA"}

package/dist/cjs/components/Chart/BarChart.js

@@ -0,0 +1,63 @@
+"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 recharts_1 = require("recharts");
+const valueFormatter_1 = require("../../utils/valueFormatter");
+const axisFormatter_1 = require("../../utils/axisFormatter");
+const color_1 = require("../../utils/color");
+const ChartTooltip_1 = __importDefault(require("../../components/Chart/ChartTooltip"));
+const getDomain_1 = __importDefault(require("../../utils/getDomain"));
+function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive = true }) {
+    if (!data || data.length === 0) {
+        return ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("div", { style: {
+            ...containerStyle,
+            boxSizing: 'content-box',
+        }, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: '100%', children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { data: data, layout: 'horizontal', children: [(0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { strokeDasharray: "3 3", horizontal: true, vertical: false }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { width: 44, hide: false, axisLine: false, tickLine: false, type: "number", domain: (0, getDomain_1.default)(data, yAxisFields), tick: { transform: 'translate(-3, 0)' }, style: {
+                            fontSize: '12px',
+                            fontFamily: theme.chartLabelFontFamily,
+                        }, tickFormatter: (tick) => (0, axisFormatter_1.axisFormatter)({
+                            value: tick,
+                            field: yAxisFields[0].field || 'what',
+                            fields: yAxisFields,
+                        }) }), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, { hide: false, dataKey: xAxisField, tick: { transform: 'translate(0, 6)' }, style: {
+                            fontSize: '12px',
+                            fontFamily: theme.chartLabelFontFamily,
+                            marginTop: '20px',
+                        }, tickLine: false, axisLine: false, tickFormatter: (tick) => (0, axisFormatter_1.axisFormatter)({
+                            value: tick,
+                            field: xAxisField,
+                            fields: [{ field: xAxisField, format: xAxisFormat }],
+                        }) }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { wrapperStyle: { outline: 'none', zIndex: 2 }, isAnimationActive: false, cursor: { fill: '#d1d5db', opacity: '0.15' }, content: ({ active, payload, label }) => {
+                            let label2;
+                            if (comparison &&
+                                payload?.length > 1 &&
+                                payload[0].payload[xAxisField + '2']) {
+                                label2 = payload[0].payload[xAxisField + '2'];
+                            }
+                            return ((0, jsx_runtime_1.jsx)(ChartTooltip_1.default, { theme: theme, active: active, payload: payload, label: label, label2: label2, dateFormatter: (value) => (0, valueFormatter_1.valueFormatter)({
+                                    value,
+                                    field: xAxisField,
+                                    fields: [{ field: xAxisField, format: xAxisFormat }],
+                                }), valueFormatter: (value) => (0, valueFormatter_1.valueFormatter)({
+                                    value,
+                                    field: payload[0].dataKey,
+                                    fields: yAxisFields,
+                                }), xAxisFormat: xAxisFormat, xAxisField: xAxisField, colors: colors }));
+                        }, position: { y: 0 } }), yAxisFields.map((elem) => ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { name: elem.label, dataKey: elem.field, stackId: isStacked && (elem.field?.replace('comparison_', '') ?? "unknown"), type: "linear", fill: (0, color_1.selectColor)(elem, colors, yAxisFields.findIndex((field) => field.field === (elem.field?.replace('comparison_', '')))), isAnimationActive: isAnimationActive }, elem.field)))] }) }) }));
+}
+exports.default = BarChart;

package/dist/cjs/components/Chart/ChartTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartTooltip.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,GAAG,CAAC;IACpB,aAAa,EAAE,GAAG,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;CACZ,CAAC;AAoUF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,kDAM5D"}

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

@@ -0,0 +1,235 @@
+"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");
+const date_fns_1 = require("date-fns");
+const ChartTooltipFrame_1 = __importDefault(require("./ChartTooltipFrame"));
+const ChartTooltipRow_1 = __importDefault(require("./ChartTooltipRow"));
+const Context_1 = require("../../Context");
+const ChartTooltipGroup_1 = __importDefault(require("./ChartTooltipGroup"));
+const dates_1 = require("../../utils/dates");
+// The chart tooltip to display for primary labels (ie. not label2).
+const ChartTooltipPrimary = (props) => ((0, jsx_runtime_1.jsxs)(ChartTooltipFrame_1.default, { theme: props.theme, children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.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))
+                        ? (0, date_fns_1.format)(new Date(props.label), 'MMM yyyy')
+                        : props.label }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                paddingRight: '16px',
+                paddingLeft: '16px',
+                paddingTop: '8px',
+                paddingBottom: '8px',
+            }, children: props.payload.map(({ color, value, name }, idx) => ((0, jsx_runtime_1.jsx)(ChartTooltipRow_1.default, { 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) => ((0, jsx_runtime_1.jsx)(ChartTooltipFrame_1.default, { theme: props.theme, children: props.payload.map(({ color, value, name }, idx) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [idx === 0 && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.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 }) })), (0, jsx_runtime_1.jsx)("div", { style: {
+                    paddingRight: '16px',
+                    paddingLeft: '16px',
+                    paddingBottom: '8px',
+                    ...(idx === 0 && { paddingTop: '8px' }),
+                }, children: (0, jsx_runtime_1.jsx)(ChartTooltipRow_1.default, { 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))
+                            ? (0, date_fns_1.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 = (0, dates_1.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 = (0, date_fns_1.subDays)(new Date(primaryDate), days + 1);
+            const date = item.payload[nameKey] ?? (0, date_fns_1.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))
+                ? (0, date_fns_1.format)(new Date(altTooltipLabel), 'MMM yyyy')
+                : altTooltipLabel
+        : !isNaN(new Date(props.label)) && props.dateFormatter
+            ? props.dateFormatter(props.label)
+            : !isNaN(new Date(props.label))
+                ? (0, date_fns_1.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 } = (0, Context_1.useComparisonRange)();
+    const { dateFilter } = (0, Context_1.useDateFilter)();
+    const isDateXAxis = (0, dates_1.isDateFormat)(props.xAxisFormat);
+    const altTooltipLabel = props.payload[0]?.dataKey
+        .replace('comparison_', '')
+        .replaceAll('_', ' ')
+        .toLowerCase();
+    const newRows = reformatComparisonPayload(props, dateFilter, (0, dates_1.convertComparisonRange)(dateFilter, comparisonRange.text));
+    return ((0, jsx_runtime_1.jsxs)(ChartTooltipFrame_1.default, { theme: props.theme, children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.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) }) }), (0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsx)(ChartTooltipGroup_1.default, { name: key, items: value, theme: props.theme }, `id_${index}`))) })] }));
+}
+function ChartTooltip(props) {
+    const { comparisonRange } = (0, Context_1.useComparisonRange)();
+    if (!props.active || !props.payload)
+        return null;
+    if (comparisonRange)
+        return (0, jsx_runtime_1.jsx)(ChartTooltipComparison, { ...props });
+    if (props.label2)
+        return (0, jsx_runtime_1.jsx)(ChartTooltipSecondary, { ...props });
+    return (0, jsx_runtime_1.jsx)(ChartTooltipPrimary, { ...props });
+}
+exports.default = ChartTooltip;

package/dist/cjs/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,2CAiBA"}

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+function ChartTooltipFrame({ children, theme, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            borderStyle: 'solid',
+            borderColor: theme?.borderColor || '#E5E7EB',
+            overflow: 'hidden',
+            borderWidth: 1,
+            background: theme?.backgroundColor || '#ffffff',
+            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 }));
+}
+exports.default = ChartTooltipFrame;

package/dist/cjs/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/cjs/components/Chart/ChartTooltipGroup.js

@@ -0,0 +1,29 @@
+"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");
+const ChartTooltipRow_1 = __importDefault(require("./ChartTooltipRow"));
+function ChartTooltipGroup({ name, items, theme, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            paddingTop: 2,
+            paddingBottom: 2,
+            marginRight: '24px',
+        }, children: [(0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsx)(ChartTooltipRow_1.default, { value: value, name: name, color: color, theme: theme }, `id-${idx}`)))] }));
+}
+exports.default = ChartTooltipGroup;

package/dist/cjs/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/cjs/components/Chart/ChartTooltipRow.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+function ChartTooltipRow({ value, name, color, theme, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            marginRight: '24px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            width: '100%',
+            paddingTop: 2,
+            paddingBottom: 2,
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.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',
+                        } }), (0, jsx_runtime_1.jsx)("p", { style: {
+                            marginTop: 0,
+                            marginBottom: 0,
+                            fontFamily: theme?.fontFamily,
+                            color: theme?.primaryTextColor,
+                            fontSize: theme?.fontSizeSmall || '14px',
+                            fontWeight: theme?.fontWeightMedium || '500',
+                        }, children: value })] }), (0, jsx_runtime_1.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 })] }));
+}
+exports.default = ChartTooltipRow;

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

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":";AAgBA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,WAAW,EACX,IAAI,EACJ,cAAc,EACd,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,GACzB,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;CAC5B,kDA0KA"}

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

@@ -0,0 +1,74 @@
+"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 recharts_1 = require("recharts");
+const valueFormatter_1 = require("../../utils/valueFormatter");
+const axisFormatter_1 = require("../../utils/axisFormatter");
+const color_1 = require("../../utils/color");
+const ChartTooltip_1 = __importDefault(require("../../components/Chart/ChartTooltip"));
+const getDomain_1 = __importDefault(require("../../utils/getDomain"));
+function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, }) {
+    if (!yAxisFields || !yAxisFields.length) {
+        return null;
+    }
+    if (!data || data.length === 0) {
+        return ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("div", { style: { ...containerStyle, boxSizing: 'content-box' }, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: '100%', children: (0, jsx_runtime_1.jsxs)(recharts_1.ComposedChart, { data: data, children: [(0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { strokeDasharray: "3 3", horizontal: true, vertical: false }), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: xAxisField, 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) => (0, axisFormatter_1.axisFormatter)({
+                            value: tick,
+                            field: xAxisField,
+                            fields: [{ field: xAxisField, format: xAxisFormat }],
+                        }) }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { width: 44, axisLine: false, tickLine: false, type: "number", domain: (0, getDomain_1.default)(data, yAxisFields), tick: { transform: 'translate(-3, 0)' }, style: {
+                            fontSize: '12px',
+                            fontFamily: theme?.chartLabelFontFamily ||
+                                theme?.fontFamily ||
+                                'Inter; Helvetica',
+                            color: theme?.chartLabelColor || '#666666',
+                        }, tickFormatter: (value) => (0, axisFormatter_1.axisFormatter)({
+                            value,
+                            field: yAxisFields[0].field,
+                            fields: [
+                                ...yAxisFields,
+                                { field: xAxisField, format: xAxisFormat },
+                            ],
+                        }) }), (0, jsx_runtime_1.jsx)(recharts_1.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 ((0, jsx_runtime_1.jsx)(ChartTooltip_1.default, { active: active, payload: payload, label: label, label2: label2, dateFormatter: (value) => (0, valueFormatter_1.valueFormatter)({
+                                    value,
+                                    field: xAxisField,
+                                    fields: [{ field: xAxisField, format: xAxisFormat }],
+                                }), valueFormatter: (value) => (0, valueFormatter_1.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) => ((0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: `gradient${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "5%", stopColor: (0, color_1.selectColor)(elem, colors, index), stopOpacity: 0.4 }), (0, jsx_runtime_1.jsx)("stop", { offset: "95%", stopColor: 'rgba(0,0,0,0)', stopOpacity: 0 })] }) }, `defs${elem.field + index}`))), yAxisFields.map((elem, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Area, { name: elem.label, type: "linear", dataKey: elem.field, stroke: (0, color_1.selectColor)(elem, colors, index), fill: `url(#gradient${index})`, strokeWidth: 2, dot: false, isAnimationActive: isAnimationActive }, elem.field)))] }) }) }));
+}
+exports.default = LineChart;

package/dist/cjs/components/Dropdown/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAahD,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC;IACpD,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,QAAA,MAAM,QAAQ,sFA6Ib,CAAC;AAEF,eAAe,QAAQ,CAAC"}