@licklist/design 0.78.5-dev.33 → 0.78.5-dev.35

package/dist/v2/dashboard-analytics/chart/Chart.js

@@ -0,0 +1,733 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { ResponsiveContainer, AreaChart, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine, Area } from 'recharts';
+import { TrendingUp, TrendingDown } from 'lucide-react';
+import './Chart.scss.js';
+
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var Chart = function(param) {
+    var title = param.title, subtitle = param.subtitle, data = param.data, _param_isRevenue = param.isRevenue, isRevenue = _param_isRevenue === void 0 ? false : _param_isRevenue, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className, _param_period = param.period, period = _param_period === void 0 ? 'today' : _param_period; param.bookingType; var tmp = param.isFullWidth, propIsFullWidth = tmp === void 0 ? false : tmp, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_isRefreshing = param.isRefreshing, isRefreshing = _param_isRefreshing === void 0 ? false : _param_isRefreshing;
+    var _Math;
+    var _React_useState = _sliced_to_array(React__default.useState(0), 2), animationKey = _React_useState[0], setAnimationKey = _React_useState[1];
+    var _React_useState1 = _sliced_to_array(React__default.useState(false), 2), isAnimating = _React_useState1[0], setIsAnimating = _React_useState1[1];
+    var _React_useState2 = _sliced_to_array(React__default.useState(0), 2), forceResize = _React_useState2[0], setForceResize = _React_useState2[1];
+    var prevDataRef = React__default.useRef(data);
+    var prevPeriodRef = React__default.useRef(period);
+    React__default.useEffect(function() {
+        var dataChanged = JSON.stringify(prevDataRef.current) !== JSON.stringify(data);
+        var periodChanged = prevPeriodRef.current !== period;
+        if (dataChanged || periodChanged) {
+            setIsAnimating(true);
+            setAnimationKey(function(prev) {
+                return prev + 1;
+            });
+            if (periodChanged) {
+                setForceResize(function(prev) {
+                    return prev + 1;
+                });
+                prevPeriodRef.current = period;
+            }
+            prevDataRef.current = data;
+            var timer = setTimeout(function() {
+                setIsAnimating(false);
+            }, 800);
+            return function() {
+                return clearTimeout(timer);
+            };
+        }
+    }, [
+        data,
+        period
+    ]);
+    var _React_useState3 = _sliced_to_array(React__default.useState(false), 2), isMobile = _React_useState3[0], setIsMobile = _React_useState3[1];
+    var _React_useState4 = _sliced_to_array(React__default.useState(false), 2), isTablet = _React_useState4[0], setIsTablet = _React_useState4[1];
+    var _React_useState5 = _sliced_to_array(React__default.useState(false), 2), detectedFullWidth = _React_useState5[0], setDetectedFullWidth = _React_useState5[1];
+    var _React_useState6 = _sliced_to_array(React__default.useState({
+        width: 0,
+        height: 0
+    }), 2); _React_useState6[0]; var setDimensions = _React_useState6[1];
+    var chartRef = React__default.useRef(null);
+    var isFullWidth = propIsFullWidth || detectedFullWidth;
+    React__default.useEffect(function() {
+        var checkScreenSize = function() {
+            setIsMobile(window.innerWidth < 480);
+            setIsTablet(window.innerWidth >= 480 && window.innerWidth < 768);
+            if (chartRef.current) {
+                var rect = chartRef.current.getBoundingClientRect();
+                setDimensions({
+                    width: rect.width,
+                    height: rect.height
+                });
+            }
+        };
+        checkScreenSize();
+        window.addEventListener('resize', checkScreenSize);
+        return function() {
+            return window.removeEventListener('resize', checkScreenSize);
+        };
+    }, []);
+    var useChartRecalculation = function() {
+        var forceRecalculation = React__default.useCallback(function() {
+            if (chartRef.current) {
+                var resizeObserver = new ResizeObserver(function() {});
+                resizeObserver.observe(chartRef.current);
+                setTimeout(function() {
+                    resizeObserver.disconnect();
+                }, 100);
+                setTimeout(function() {
+                    window.dispatchEvent(new Event('resize'));
+                }, 50);
+            }
+        }, []);
+        return forceRecalculation;
+    };
+    var forceRecalculation = useChartRecalculation();
+    React__default.useEffect(function() {
+        forceRecalculation();
+    }, [
+        period,
+        forceRecalculation
+    ]);
+    React__default.useEffect(function() {
+        if (propIsFullWidth !== undefined) return;
+        var checkChartWidth = function() {
+            if (chartRef.current) {
+                var chartWidth = chartRef.current.offsetWidth;
+                var viewportWidth = window.innerWidth;
+                var isWide = chartWidth > viewportWidth * 0.65;
+                setDetectedFullWidth(isWide);
+            }
+        };
+        var timeoutId = setTimeout(checkChartWidth, 100);
+        window.addEventListener('resize', checkChartWidth);
+        var resizeObserver = new ResizeObserver(function() {
+            setTimeout(checkChartWidth, 50);
+        });
+        if (chartRef.current) {
+            resizeObserver.observe(chartRef.current);
+        }
+        return function() {
+            clearTimeout(timeoutId);
+            window.removeEventListener('resize', checkChartWidth);
+            resizeObserver.disconnect();
+        };
+    }, [
+        propIsFullWidth,
+        forceResize
+    ]);
+    React__default.useEffect(function() {
+        if (chartRef.current) {
+            var resizeEvent = new Event('resize');
+            window.dispatchEvent(resizeEvent);
+            var currentRef = chartRef.current;
+            var display = currentRef.style.display;
+            currentRef.style.display = 'none';
+            currentRef.offsetHeight;
+            currentRef.style.display = display;
+            setTimeout(function() {
+                var rect = currentRef.getBoundingClientRect();
+                setDimensions({
+                    width: rect.width,
+                    height: rect.height
+                });
+            }, 10);
+        }
+    }, [
+        period,
+        forceResize,
+        animationKey
+    ]);
+    var processedData = React__default.useMemo(function() {
+        var transformXAxisForPeriod = function(data, period) {
+            if (period === 'week') {
+                var days = [
+                    'Mon',
+                    'Tue',
+                    'Wed',
+                    'Thu',
+                    'Fri',
+                    'Sat',
+                    'Sun'
+                ];
+                return days.map(function(day, index) {
+                    var hourIndex = index * 3;
+                    var dayData = data[hourIndex] || {
+                        time: '',
+                        value: 0,
+                        participants: 0
+                    };
+                    return {
+                        time: day,
+                        value: dayData.value,
+                        participants: dayData.participants || 0
+                    };
+                });
+            }
+            if (isFullWidth) {
+                if (data.length > 8) {
+                    return data.length <= 24 ? data : data.filter(function(_, index) {
+                        return index % 2 === 0;
+                    });
+                }
+                return data;
+            }
+            if (period === 'today' && data.length > 12) {
+                return data.filter(function(_, index) {
+                    return index % 3 === 0;
+                });
+            }
+            return data;
+        };
+        var transformed = transformXAxisForPeriod(data, period);
+        var months = [
+            'Jan',
+            'Feb',
+            'Mar',
+            'Apr',
+            'May',
+            'Jun',
+            'Jul',
+            'Aug',
+            'Sep',
+            'Oct',
+            'Nov',
+            'Dec'
+        ];
+        var isMonthlyData = transformed.some(function(item) {
+            return months.some(function(month) {
+                return item.time.includes(month);
+            });
+        });
+        if (isMonthlyData) {
+            var last12Months = transformed.slice(-12);
+            return last12Months;
+        }
+        return transformed;
+    }, [
+        data,
+        period,
+        isFullWidth
+    ]);
+    var maxValue = (_Math = Math).max.apply(_Math, _to_consumable_array(processedData.map(function(d) {
+        return d.value;
+    })));
+    var yAxisMax;
+    var yAxisMin = 0;
+    var calculateOptimalScale = function(max) {
+        if (max === 0) return isRevenue ? 10 : 5;
+        var bufferedMax = max * (isRevenue ? 1.15 : 1.1);
+        if (isRevenue) {
+            if (bufferedMax <= 1) return 1;
+            if (bufferedMax <= 2) return 2;
+            if (bufferedMax <= 5) return 5;
+            if (bufferedMax <= 10) return 10;
+            if (bufferedMax <= 20) return 20;
+            if (bufferedMax <= 25) return 25;
+            if (bufferedMax <= 50) return 50;
+            if (bufferedMax <= 100) return 100;
+            if (bufferedMax <= 250) return 250;
+            if (bufferedMax <= 500) return 500;
+            if (bufferedMax <= 1000) return 1000;
+            var magnitude = Math.pow(10, Math.floor(Math.log10(bufferedMax)));
+            var normalized = bufferedMax / magnitude;
+            if (normalized <= 1) return magnitude;
+            if (normalized <= 2) return 2 * magnitude;
+            if (normalized <= 2.5) return 2.5 * magnitude;
+            if (normalized <= 5) return 5 * magnitude;
+            return 10 * magnitude;
+        } else {
+            if (bufferedMax <= 1) return 2;
+            if (bufferedMax <= 2) return 3;
+            if (bufferedMax <= 3) return 4;
+            if (bufferedMax <= 5) return 6;
+            if (bufferedMax <= 8) return 10;
+            if (bufferedMax <= 12) return 15;
+            if (bufferedMax <= 20) return 25;
+            if (bufferedMax <= 40) return 50;
+            if (bufferedMax <= 80) return 100;
+            var magnitude1 = Math.pow(10, Math.floor(Math.log10(bufferedMax)));
+            var normalized1 = bufferedMax / magnitude1;
+            if (normalized1 <= 1) return magnitude1;
+            if (normalized1 <= 2) return 2 * magnitude1;
+            if (normalized1 <= 5) return 5 * magnitude1;
+            return 10 * magnitude1;
+        }
+    };
+    yAxisMax = calculateOptimalScale(maxValue);
+    var getTickInterval = function(max) {
+        var targetTickCount = 5;
+        if (isRevenue) {
+            if (max <= 1) return 0.25;
+            if (max <= 2) return 0.5;
+            if (max <= 5) return 1;
+            if (max <= 10) return 2;
+            if (max <= 20) return 5;
+            if (max <= 25) return 5;
+            if (max <= 50) return 10;
+            if (max <= 100) return 20;
+            if (max <= 250) return 50;
+            if (max <= 500) return 100;
+            if (max <= 1000) return 200;
+            var roughInterval = max / targetTickCount;
+            var magnitude = Math.pow(10, Math.floor(Math.log10(roughInterval)));
+            var normalized = roughInterval / magnitude;
+            if (normalized <= 1) return magnitude;
+            if (normalized <= 2) return 2 * magnitude;
+            if (normalized <= 2.5) return 2.5 * magnitude;
+            if (normalized <= 5) return 5 * magnitude;
+            return 10 * magnitude;
+        } else {
+            if (max <= 2) return 1;
+            if (max <= 3) return 1;
+            if (max <= 6) return 2;
+            if (max <= 10) return 2;
+            if (max <= 15) return 3;
+            if (max <= 25) return 5;
+            if (max <= 50) return 10;
+            if (max <= 100) return 20;
+            var roughInterval1 = max / targetTickCount;
+            var magnitude1 = Math.pow(10, Math.floor(Math.log10(roughInterval1)));
+            var normalized1 = roughInterval1 / magnitude1;
+            if (normalized1 <= 1) return magnitude1;
+            if (normalized1 <= 2) return 2 * magnitude1;
+            if (normalized1 <= 5) return 5 * magnitude1;
+            return 10 * magnitude1;
+        }
+    };
+    var tickInterval = getTickInterval(yAxisMax);
+    var ticks = [];
+    for(var i = yAxisMin; i <= yAxisMax; i += tickInterval){
+        var tick = Math.round(i * 100) / 100;
+        ticks.push(tick);
+    }
+    if (ticks[ticks.length - 1] > yAxisMax) {
+        ticks.pop();
+    }
+    if (ticks[ticks.length - 1] < yAxisMax) {
+        ticks.push(yAxisMax);
+    }
+    var getXAxisInterval = function(dataLength) {
+        var isMonthly = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false, isWeekly = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false, isHourly = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false;
+        if (isMobile) {
+            if (isFullWidth) {
+                if (dataLength <= 6) return 0;
+                if (dataLength <= 10) return 1;
+                return Math.floor(dataLength / 5);
+            }
+            if (isMonthly && dataLength <= 12) return 2;
+            if (isWeekly && dataLength <= 7) return 0;
+            if (isHourly && dataLength <= 12) return 3;
+            if (dataLength <= 4) return 0;
+            if (dataLength <= 7) return 1;
+            if (dataLength <= 12) return 2;
+            return Math.floor(dataLength / 3);
+        }
+        if (isTablet) {
+            if (isFullWidth) {
+                if (isMonthly && dataLength <= 12) return 0;
+                if (isWeekly && dataLength <= 7) return 0;
+                if (isHourly && dataLength <= 16) return 0;
+                if (dataLength <= 10) return 0;
+                if (dataLength <= 20) return 1;
+                return Math.floor(dataLength / 10);
+            }
+            if (isMonthly && dataLength <= 12) return 0;
+            if (isWeekly && dataLength <= 7) return 0;
+            if (isHourly && dataLength <= 12) return 1;
+            if (dataLength <= 4) return 0;
+            if (dataLength <= 7) return 0;
+            if (dataLength <= 12) return 1;
+            return Math.floor(dataLength / 5);
+        }
+        if (isFullWidth) {
+            if (isMonthly && dataLength <= 12) return 0;
+            if (isWeekly && dataLength <= 7) return 0;
+            if (isHourly && dataLength <= 24) return 1;
+            if (dataLength <= 10) return 0;
+            if (dataLength <= 20) return 1;
+            return Math.floor(dataLength / 12);
+        }
+        if (isMonthly && dataLength <= 12) return 0;
+        if (isWeekly && dataLength <= 7) return 0;
+        if (isHourly && dataLength <= 12) return 1;
+        if (dataLength <= 4) return 0;
+        if (dataLength <= 7) return 0;
+        if (dataLength <= 12) return 2;
+        return Math.floor(dataLength / 6);
+    };
+    var months = [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec'
+    ];
+    var days = [
+        'Mon',
+        'Tue',
+        'Wed',
+        'Thu',
+        'Fri',
+        'Sat',
+        'Sun'
+    ];
+    var isMonthlyData = processedData.some(function(item) {
+        return months.some(function(month) {
+            return item.time.includes(month);
+        });
+    });
+    var isWeeklyData = processedData.some(function(item) {
+        return days.some(function(day) {
+            return item.time === day;
+        });
+    });
+    var isHourlyData = processedData.some(function(item) {
+        return item.time.includes(':');
+    });
+    var xAxisInterval = getXAxisInterval(processedData.length, isMonthlyData, isWeeklyData, isHourlyData);
+    var getCurrentTimeReference = function() {
+        if (subtitle && subtitle.includes('Yesterday')) return null;
+        var now = new Date();
+        if (subtitle === 'Today') {
+            return "".concat(now.getHours().toString().padStart(2, '0'), ":00");
+        }
+        if (subtitle && subtitle.includes(' - ') && (subtitle.includes('Mon') || subtitle.includes('Tue') || subtitle.includes('Wed') || subtitle.includes('Thu') || subtitle.includes('Fri') || subtitle.includes('Sat') || subtitle.includes('Sun'))) {
+            var dayNames = [
+                'Mon',
+                'Tue',
+                'Wed',
+                'Thu',
+                'Fri',
+                'Sat',
+                'Sun'
+            ];
+            return dayNames[now.getDay() === 0 ? 6 : now.getDay() - 1];
+        }
+        if (subtitle && /^[A-Z][a-z]+ \d{4}$/.test(subtitle)) {
+            var dayOfMonth = now.getDate();
+            var weekNumber = Math.ceil(dayOfMonth / 7);
+            var weekStart = (weekNumber - 1) * 7 + 1;
+            var weekEnd = Math.min(weekNumber * 7, new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate());
+            var formatOrdinal = function(n) {
+                var suffix = n % 10 === 1 && n !== 11 ? 'st' : n % 10 === 2 && n !== 12 ? 'nd' : n % 10 === 3 && n !== 13 ? 'rd' : 'th';
+                return "".concat(n).concat(suffix);
+            };
+            return "".concat(formatOrdinal(weekStart), " - ").concat(formatOrdinal(weekEnd));
+        }
+        if (subtitle && /^\d{4}$/.test(subtitle)) {
+            var months = [
+                'Jan',
+                'Feb',
+                'Mar',
+                'Apr',
+                'May',
+                'Jun',
+                'Jul',
+                'Aug',
+                'Sep',
+                'Oct',
+                'Nov',
+                'Dec'
+            ];
+            return months[now.getMonth()];
+        }
+        return null;
+    };
+    var currentTimeRef = getCurrentTimeReference();
+    var CustomTooltip = function(param) {
+        var active = param.active, payload = param.payload, label = param.label;
+        if (active && payload && payload.length) {
+            var currentValue = payload[0].value;
+            var currentIndex = processedData.findIndex(function(d) {
+                return d.time === label;
+            });
+            var trend = null;
+            if (currentIndex >= 0 && currentIndex > 0) {
+                var prevValue = processedData[currentIndex - 1].value;
+                var prevTime = processedData[currentIndex - 1].time;
+                var change = currentValue - prevValue;
+                if (typeof prevValue === 'number' && typeof currentValue === 'number') {
+                    var previousValue = prevValue === 0 ? 0.1 : Math.abs(prevValue);
+                    var percentChange = change / previousValue * 100;
+                    if (!isNaN(percentChange) && isFinite(percentChange)) {
+                        trend = {
+                            change: change,
+                            percentChange: Math.abs(percentChange).toFixed(1),
+                            isPositive: change > 0,
+                            isEqual: change === 0,
+                            comparisonText: "vs ".concat(prevTime),
+                            previousValue: prevValue
+                        };
+                    }
+                }
+            }
+            var formatValue = function(value) {
+                if (isRevenue) {
+                    return "\xa3".concat(value.toLocaleString("en-GB", {
+                        minimumFractionDigits: 2,
+                        maximumFractionDigits: 2
+                    }));
+                }
+                return value.toLocaleString();
+            };
+            return /*#__PURE__*/ jsxs("div", {
+                className: "chart__tooltip",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "chart__tooltip-label",
+                        children: label
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "chart__tooltip-value",
+                        children: isRevenue ? formatValue(currentValue) : "".concat(currentValue, " ").concat(currentValue === 1 ? 'Booking' : 'Bookings')
+                    }),
+                    !isRevenue && payload && payload[0] && payload[0].payload.participants !== undefined && /*#__PURE__*/ jsxs("div", {
+                        className: "chart__tooltip-participants",
+                        children: [
+                            payload[0].payload.participants,
+                            " people"
+                        ]
+                    }),
+                    trend && !trend.isEqual && /*#__PURE__*/ jsx("div", {
+                        className: "chart__tooltip-trend ".concat(trend.isEqual ? 'neutral' : trend.isPositive ? 'positive' : 'negative'),
+                        children: /*#__PURE__*/ jsxs("div", {
+                            className: "chart__tooltip-trend-content",
+                            children: [
+                                trend.isPositive ? /*#__PURE__*/ jsx(TrendingUp, {
+                                    size: 12,
+                                    className: "chart__tooltip-trend-icon"
+                                }) : /*#__PURE__*/ jsx(TrendingDown, {
+                                    size: 12,
+                                    className: "chart__tooltip-trend-icon"
+                                }),
+                                /*#__PURE__*/ jsx("span", {
+                                    className: "chart__tooltip-trend-value",
+                                    children: (trend.isPositive ? '+' : '') + (isRevenue ? "\xa3".concat(Math.abs(trend.change).toFixed(2)) : "".concat(trend.change, " ").concat(Math.abs(trend.change) === 1 ? 'Booking' : 'Bookings'))
+                                })
+                            ]
+                        })
+                    }),
+                    trend && !trend.isEqual && /*#__PURE__*/ jsx("div", {
+                        className: "chart__tooltip-comparison",
+                        children: trend.comparisonText
+                    })
+                ]
+            });
+        }
+        return null;
+    };
+    return /*#__PURE__*/ jsxs("section", {
+        ref: chartRef,
+        className: "chart ".concat(className, " ").concat(isLoading || isAnimating ? 'chart--loading' : '', " ").concat(isRefreshing ? 'chart--refreshing' : '').trim(),
+        "data-full-width": isFullWidth,
+        children: [
+            /*#__PURE__*/ jsxs("header", {
+                className: "chart__header",
+                children: [
+                    /*#__PURE__*/ jsxs("h2", {
+                        className: "chart__title",
+                        children: [
+                            title,
+                            isRefreshing && !isLoading && /*#__PURE__*/ jsx("span", {
+                                className: "chart__title-refresh-indicator",
+                                children: "⟳"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("p", {
+                        className: "chart__subtitle",
+                        children: subtitle
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "chart__container",
+                children: [
+                    isLoading && /*#__PURE__*/ jsx("div", {
+                        className: "chart__loading-overlay",
+                        children: /*#__PURE__*/ jsx("div", {
+                            className: "chart__loading-spinner"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "chart__wrapper ".concat(isAnimating ? 'chart__wrapper--recalculating' : ''),
+                        children: /*#__PURE__*/ jsx(ResponsiveContainer, {
+                            width: "100%",
+                            height: "100%",
+                            debounce: 1,
+                            children: /*#__PURE__*/ jsxs(AreaChart, {
+                                data: processedData,
+                                margin: {
+                                    top: 10,
+                                    right: 10,
+                                    left: 10,
+                                    bottom: 16
+                                },
+                                children: [
+                                    /*#__PURE__*/ jsx("defs", {
+                                        children: /*#__PURE__*/ jsxs("linearGradient", {
+                                            id: "chartGradient",
+                                            x1: "0",
+                                            y1: "0",
+                                            x2: "0",
+                                            y2: "1",
+                                            children: [
+                                                /*#__PURE__*/ jsx("stop", {
+                                                    offset: "0%",
+                                                    stopColor: "#1F9AB5",
+                                                    stopOpacity: 0.5
+                                                }),
+                                                /*#__PURE__*/ jsx("stop", {
+                                                    offset: "100%",
+                                                    stopColor: "#1F9AB5",
+                                                    stopOpacity: 0
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(CartesianGrid, {
+                                        strokeDasharray: "3 3",
+                                        stroke: "#E8E9EF"
+                                    }),
+                                    /*#__PURE__*/ jsx(XAxis, {
+                                        dataKey: "time",
+                                        type: "category",
+                                        axisLine: false,
+                                        tickLine: false,
+                                        tick: {
+                                            fontSize: isMobile ? 9 : isTablet ? 10 : 11,
+                                            fill: '#626A90'
+                                        },
+                                        tickMargin: isMobile ? 5 : 10,
+                                        interval: xAxisInterval
+                                    }),
+                                    /*#__PURE__*/ jsx(YAxis, {
+                                        domain: [
+                                            yAxisMin,
+                                            yAxisMax
+                                        ],
+                                        ticks: ticks,
+                                        axisLine: false,
+                                        tickLine: false,
+                                        tick: {
+                                            fontSize: isMobile ? 9 : isTablet ? 10 : 11,
+                                            fill: '#626A90'
+                                        },
+                                        tickFormatter: function(value) {
+                                            if (isRevenue) {
+                                                return isMobile ? "\xa3".concat(Math.round(value)) : "\xa3".concat(value);
+                                            }
+                                            return value.toString();
+                                        },
+                                        tickMargin: isMobile ? 3 : 5,
+                                        width: isMobile ? 30 : isTablet ? 35 : 40
+                                    }),
+                                    /*#__PURE__*/ jsx(Tooltip, {
+                                        content: CustomTooltip
+                                    }),
+                                    currentTimeRef && /*#__PURE__*/ jsx(ReferenceLine, {
+                                        x: currentTimeRef,
+                                        stroke: "#7C3AED",
+                                        strokeWidth: 2,
+                                        strokeDasharray: "6 4"
+                                    }),
+                                    /*#__PURE__*/ jsx(Area, {
+                                        type: "monotone",
+                                        dataKey: "value",
+                                        stroke: "#1F9AB5",
+                                        strokeWidth: isMobile ? 1.5 : 2,
+                                        fill: "url(#chartGradient)",
+                                        dot: {
+                                            fill: '#1F9AB5',
+                                            strokeWidth: 0,
+                                            r: isMobile ? 3 : isTablet ? 3.5 : 4,
+                                            fillOpacity: 1
+                                        },
+                                        activeDot: {
+                                            r: isMobile ? 5 : isTablet ? 5.5 : 6,
+                                            stroke: '#1F9AB5',
+                                            strokeWidth: 2,
+                                            fill: '#fff',
+                                            fillOpacity: 1,
+                                            strokeOpacity: 1
+                                        },
+                                        animationBegin: 0,
+                                        animationDuration: 800,
+                                        animationEasing: "ease-out",
+                                        isAnimationActive: true
+                                    })
+                                ]
+                            }, "chart-".concat(animationKey, "-").concat(forceResize))
+                        }, "responsive-".concat(animationKey, "-").concat(forceResize))
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+export { Chart };