Add settings page for managing forecasting API key and URL via UI

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-20 14:37:36 +00:00 · 2026-07-20 14:37:36 +00:00 · 1c411e402e
commit 1c411e402e
parent cae411eae7
19809 changed files with 1962608 additions and 97 deletions
--- a/frontend/node_modules/recharts/lib/util/ActiveShapeUtils.js
+++ b/frontend/node_modules/recharts/lib/util/ActiveShapeUtils.js
@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Shape = Shape;
+exports.getPropsFromShapeOption = getPropsFromShapeOption;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _Layer = require("../container/Layer");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * This is an abstraction for rendering a user defined prop for a customized shape in several forms.
+ *
+ * <Shape /> is the root and will handle taking in:
+ *  - an object of svg properties
+ *  - a boolean
+ *  - a render prop(inline function that returns jsx)
+ *  - a React element
+ *
+ * The concrete default shape is supplied by the caller so this helper does not
+ * import unrelated shapes and accidentally couple bundles together.
+ */
+
+function mergeShapeProps(option, props) {
+  return _objectSpread(_objectSpread({}, props), option);
+}
+function getPropsFromShapeOption(option) {
+  if (/*#__PURE__*/(0, _react.isValidElement)(option)) {
+    return option.props;
+  }
+  return option;
+}
+function renderWithShapeElement(option, props) {
+  return /*#__PURE__*/(0, _react.cloneElement)(option, mergeShapeProps(getPropsFromShapeOption(option), props));
+}
+function getShapeIndex(shapeProps) {
+  if (!('index' in shapeProps)) {
+    return undefined;
+  }
+  var index = shapeProps.index;
+  return typeof index === 'number' || typeof index === 'string' ? index : undefined;
+}
+function isActiveShape(shapeProps) {
+  return 'isActive' in shapeProps && shapeProps.isActive === true;
+}
+
+/**
+ * Renders the user-provided active shape option while keeping each runtime branch aligned with its TypeScript type.
+ *
+ * The `option` prop supports four shapes:
+ * - React element: clone it and let its own props override the injected ones
+ * - function: call it with the forwarded props and optional index
+ * - plain object: merge it into the default shape props
+ * - boolean / undefined: ignore it and render the default shape with the forwarded props
+ */
+function Shape(_ref) {
+  var option = _ref.option,
+    DefaultShape = _ref.DefaultShape,
+    shapeProps = _ref.shapeProps,
+    _ref$activeClassName = _ref.activeClassName,
+    activeClassName = _ref$activeClassName === void 0 ? 'recharts-active-shape' : _ref$activeClassName,
+    _ref$inActiveClassNam = _ref.inActiveClassName,
+    inActiveClassName = _ref$inActiveClassNam === void 0 ? 'recharts-shape' : _ref$inActiveClassNam;
+  var index = getShapeIndex(shapeProps);
+  var shape;
+  if (/*#__PURE__*/(0, _react.isValidElement)(option)) {
+    shape = renderWithShapeElement(option, shapeProps);
+  } else if (option === DefaultShape) {
+    shape = /*#__PURE__*/React.createElement(DefaultShape, shapeProps);
+  } else if (typeof option === 'function') {
+    shape = option(shapeProps, index);
+  } else if (typeof option === 'object') {
+    shape = /*#__PURE__*/React.createElement(DefaultShape, mergeShapeProps(option, shapeProps));
+  } else {
+    shape = /*#__PURE__*/React.createElement(DefaultShape, shapeProps);
+  }
+  if (isActiveShape(shapeProps)) {
+    return /*#__PURE__*/React.createElement(_Layer.Layer, {
+      className: activeClassName
+    }, shape);
+  }
+  return /*#__PURE__*/React.createElement(_Layer.Layer, {
+    className: inActiveClassName
+  }, shape);
+}
--- a/frontend/node_modules/recharts/lib/util/BarUtils.js
+++ b/frontend/node_modules/recharts/lib/util/BarUtils.js
@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BarRectangle = BarRectangle;
+exports.minPointSizeCallback = exports.defaultBarShape = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _Rectangle = require("../shape/Rectangle");
+var _ActiveShapeUtils = require("./ActiveShapeUtils");
+var _DataUtils = require("./DataUtils");
+var _excluded = ["option"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var defaultBarShape = exports.defaultBarShape = _Rectangle.Rectangle;
+function BarRectangle(_ref) {
+  var option = _ref.option,
+    shapeProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(_ActiveShapeUtils.Shape, {
+    option: option,
+    DefaultShape: defaultBarShape,
+    shapeProps: shapeProps,
+    activeClassName: "recharts-active-bar",
+    inActiveClassName: "recharts-inactive-bar"
+  });
+}
+/**
+ * Safely gets minPointSize from the minPointSize prop if it is a function
+ * @param minPointSize minPointSize as passed to the Bar component
+ * @param defaultValue default minPointSize
+ * @returns minPointSize
+ */
+var minPointSizeCallback = exports.minPointSizeCallback = function minPointSizeCallback(minPointSize) {
+  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return (value, index) => {
+    if ((0, _DataUtils.isNumber)(minPointSize)) return minPointSize;
+    var isValueNumberOrNil = (0, _DataUtils.isNumber)(value) || (0, _DataUtils.isNullish)(value);
+    if (isValueNumberOrNil) {
+      return minPointSize(value, index);
+    }
+    !isValueNumberOrNil ? true ? (0, _tinyInvariant.default)(false, "minPointSize callback function received a value with type of ".concat(typeof value, ". Currently only numbers or null/undefined are supported.")) : (0, _tinyInvariant.default)(false) : void 0;
+    return defaultValue;
+  };
+};
--- a/frontend/node_modules/recharts/lib/util/CartesianUtils.js
+++ b/frontend/node_modules/recharts/lib/util/CartesianUtils.js
@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAngledRectangleWidth = void 0;
+exports.normalizeAngle = normalizeAngle;
+exports.rectWithPoints = exports.rectWithCoords = void 0;
+var rectWithPoints = (_ref, _ref2) => {
+  var x1 = _ref.x,
+    y1 = _ref.y;
+  var x2 = _ref2.x,
+    y2 = _ref2.y;
+  return {
+    x: Math.min(x1, x2),
+    y: Math.min(y1, y2),
+    width: Math.abs(x2 - x1),
+    height: Math.abs(y2 - y1)
+  };
+};
+
+/**
+ * Compute the x, y, width, and height of a box from two reference points.
+ * @param  {Object} coords     x1, x2, y1, and y2
+ * @return {Object} object
+ */
+exports.rectWithPoints = rectWithPoints;
+var rectWithCoords = _ref3 => {
+  var x1 = _ref3.x1,
+    y1 = _ref3.y1,
+    x2 = _ref3.x2,
+    y2 = _ref3.y2;
+  return rectWithPoints({
+    x: x1,
+    y: y1
+  }, {
+    x: x2,
+    y: y2
+  });
+};
+
+/** Normalizes the angle so that 0 <= angle < 180.
+ * @param {number} angle Angle in degrees.
+ * @return {number} the normalized angle with a value of at least 0 and never greater or equal to 180. */
+exports.rectWithCoords = rectWithCoords;
+function normalizeAngle(angle) {
+  return (angle % 180 + 180) % 180;
+}
+
+/** Calculates the width of the largest horizontal line that fits inside a rectangle that is displayed at an angle.
+ * @param {Object} size Width and height of the text in a horizontal position.
+ * @param {number} angle Angle in degrees in which the text is displayed.
+ * @return {number} The width of the largest horizontal line that fits inside a rectangle that is displayed at an angle.
+ */
+var getAngledRectangleWidth = exports.getAngledRectangleWidth = function getAngledRectangleWidth(_ref4) {
+  var width = _ref4.width,
+    height = _ref4.height;
+  var angle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  // Ensure angle is >= 0 && < 180
+  var normalizedAngle = normalizeAngle(angle);
+  var angleRadians = normalizedAngle * Math.PI / 180;
+
+  /* Depending on the height and width of the rectangle, we may need to use different formulas to calculate the angled
+   * width. This threshold defines when each formula should kick in. */
+  var angleThreshold = Math.atan(height / width);
+  var angledWidth = angleRadians > angleThreshold && angleRadians < Math.PI - angleThreshold ? height / Math.sin(angleRadians) : width / Math.cos(angleRadians);
+  return Math.abs(angledWidth);
+};
--- a/frontend/node_modules/recharts/lib/util/ChartUtils.js
+++ b/frontend/node_modules/recharts/lib/util/ChartUtils.js
@ -0,0 +1,533 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCateCoordinateOfBar = exports.getBaseValueOfBar = exports.getBandSizeOfAxis = exports.calculatePolarTooltipPos = exports.calculateCartesianTooltipPos = exports.appendOffsetOfLegend = exports.MIN_VALUE_REG = exports.MAX_VALUE_REG = void 0;
+exports.getCateCoordinateOfLine = getCateCoordinateOfLine;
+exports.getDomainOfStackGroups = exports.getCoordinatesOfGrid = void 0;
+exports.getNormalizedStackId = getNormalizedStackId;
+exports.getTicksOfAxis = exports.getStackedData = void 0;
+exports.getTooltipEntry = getTooltipEntry;
+exports.getTooltipNameProp = getTooltipNameProp;
+exports.getValueByDataKey = getValueByDataKey;
+exports.truncateByDomain = exports.offsetSign = exports.offsetPositive = exports.isCategoricalAxis = void 0;
+var _sortBy = _interopRequireDefault(require("es-toolkit/compat/sortBy"));
+var _get = _interopRequireDefault(require("es-toolkit/compat/get"));
+var _d3Shape = require("victory-vendor/d3-shape");
+var _DataUtils = require("./DataUtils");
+var _getSliced = require("./getSliced");
+var _isWellBehavedNumber = require("./isWellBehavedNumber");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function getValueByDataKey(obj, dataKey, defaultValue) {
+  if ((0, _DataUtils.isNullish)(obj) || (0, _DataUtils.isNullish)(dataKey)) {
+    return defaultValue;
+  }
+  if ((0, _DataUtils.isNumOrStr)(dataKey)) {
+    return (0, _get.default)(obj, dataKey, defaultValue);
+  }
+  if (typeof dataKey === 'function') {
+    return dataKey(obj);
+  }
+  return defaultValue;
+}
+var appendOffsetOfLegend = (offset, legendSettings, legendSize) => {
+  if (legendSettings && legendSize) {
+    var boxWidth = legendSize.width,
+      boxHeight = legendSize.height;
+    var align = legendSettings.align,
+      verticalAlign = legendSettings.verticalAlign,
+      layout = legendSettings.layout;
+    if ((layout === 'vertical' || layout === 'horizontal' && verticalAlign === 'middle') && align !== 'center' && (0, _DataUtils.isNumber)(offset[align])) {
+      return _objectSpread(_objectSpread({}, offset), {}, {
+        [align]: offset[align] + (boxWidth || 0)
+      });
+    }
+    if ((layout === 'horizontal' || layout === 'vertical' && align === 'center') && verticalAlign !== 'middle' && (0, _DataUtils.isNumber)(offset[verticalAlign])) {
+      return _objectSpread(_objectSpread({}, offset), {}, {
+        [verticalAlign]: offset[verticalAlign] + (boxHeight || 0)
+      });
+    }
+  }
+  return offset;
+};
+exports.appendOffsetOfLegend = appendOffsetOfLegend;
+var isCategoricalAxis = (layout, axisType) => layout === 'horizontal' && axisType === 'xAxis' || layout === 'vertical' && axisType === 'yAxis' || layout === 'centric' && axisType === 'angleAxis' || layout === 'radial' && axisType === 'radiusAxis';
+
+/**
+ * Calculate the Coordinates of grid
+ * @param  {Array} ticks           The ticks in axis
+ * @param {Number} minValue        The minimum value of axis
+ * @param {Number} maxValue        The maximum value of axis
+ * @param {boolean} syncWithTicks  Synchronize grid lines with ticks or not
+ * @return {Array}                 Coordinates
+ */
+exports.isCategoricalAxis = isCategoricalAxis;
+var getCoordinatesOfGrid = (ticks, minValue, maxValue, syncWithTicks) => {
+  if (syncWithTicks) {
+    return ticks.map(entry => entry.coordinate);
+  }
+  var hasMin, hasMax;
+  var values = ticks.map(entry => {
+    if (entry.coordinate === minValue) {
+      hasMin = true;
+    }
+    if (entry.coordinate === maxValue) {
+      hasMax = true;
+    }
+    return entry.coordinate;
+  });
+  if (!hasMin) {
+    values.push(minValue);
+  }
+  if (!hasMax) {
+    values.push(maxValue);
+  }
+  return values;
+};
+exports.getCoordinatesOfGrid = getCoordinatesOfGrid;
+/**
+ * Of on four almost identical implementations of tick generation.
+ * The four horsemen of tick generation are:
+ * - {@link selectTooltipAxisTicks}
+ * - {@link combineAxisTicks}
+ * - {@link getTicksOfAxis}.
+ * - {@link combineGraphicalItemTicks}
+ */
+var getTicksOfAxis = (axis, isGrid, isAll) => {
+  if (!axis) {
+    return null;
+  }
+  var duplicateDomain = axis.duplicateDomain,
+    type = axis.type,
+    range = axis.range,
+    scale = axis.scale,
+    realScaleType = axis.realScaleType,
+    isCategorical = axis.isCategorical,
+    categoricalDomain = axis.categoricalDomain,
+    tickCount = axis.tickCount,
+    ticks = axis.ticks,
+    niceTicks = axis.niceTicks,
+    axisType = axis.axisType;
+  if (!scale) {
+    return null;
+  }
+  var offsetForBand = realScaleType === 'scaleBand' && scale.bandwidth ? scale.bandwidth() / 2 : 2;
+  var offset = (isGrid || isAll) && type === 'category' && scale.bandwidth ? scale.bandwidth() / offsetForBand : 0;
+  offset = axisType === 'angleAxis' && range && range.length >= 2 ? (0, _DataUtils.mathSign)(range[0] - range[1]) * 2 * offset : offset;
+
+  // The ticks set by user should only affect the ticks adjacent to axis line
+  if (isGrid && (ticks || niceTicks)) {
+    var result = (ticks || niceTicks || []).map((entry, index) => {
+      var scaleContent = duplicateDomain ? duplicateDomain.indexOf(entry) : entry;
+      var scaled = scale.map(scaleContent);
+      if (!(0, _isWellBehavedNumber.isWellBehavedNumber)(scaled)) {
+        return null;
+      }
+      return {
+        // If the scaleContent is not a number, the coordinate will be NaN.
+        // That could be the case for example with a PointScale and a string as domain.
+        coordinate: scaled + offset,
+        value: entry,
+        offset,
+        index
+      };
+    }).filter(_DataUtils.isNotNil);
+    return result;
+  }
+
+  // When axis is a categorical axis, but the type of axis is number or the scale of axis is not "auto"
+  // For type='number' with niceTicks available, skip this branch so ticks are evenly spaced (GitHub issue #4271)
+  if (isCategorical && categoricalDomain) {
+    return categoricalDomain.map((entry, index) => {
+      var scaled = scale.map(entry);
+      if (!(0, _isWellBehavedNumber.isWellBehavedNumber)(scaled)) {
+        return null;
+      }
+      return {
+        coordinate: scaled + offset,
+        value: entry,
+        index,
+        offset
+      };
+    }).filter(_DataUtils.isNotNil);
+  }
+  if (scale.ticks && !isAll && tickCount != null) {
+    return scale.ticks(tickCount).map((entry, index) => {
+      var scaled = scale.map(entry);
+      if (!(0, _isWellBehavedNumber.isWellBehavedNumber)(scaled)) {
+        return null;
+      }
+      return {
+        coordinate: scaled + offset,
+        value: entry,
+        index,
+        offset
+      };
+    }).filter(_DataUtils.isNotNil);
+  }
+
+  // When axis has duplicated text, serial numbers are used to generate scale
+  return scale.domain().map((entry, index) => {
+    var scaled = scale.map(entry);
+    if (!(0, _isWellBehavedNumber.isWellBehavedNumber)(scaled)) {
+      return null;
+    }
+    return {
+      coordinate: scaled + offset,
+      // @ts-expect-error can't use Date as an index
+      value: duplicateDomain ? duplicateDomain[entry] : entry,
+      index,
+      offset
+    };
+  }).filter(_DataUtils.isNotNil);
+};
+
+/**
+ * Both value and domain are tuples of two numbers
+ * - but the type stays as array of numbers until we have better support in rest of the app
+ * @param value input that will be truncated
+ * @param domain boundaries
+ * @returns tuple of two numbers
+ */
+exports.getTicksOfAxis = getTicksOfAxis;
+var truncateByDomain = (value, domain) => {
+  if (!domain || domain.length !== 2 || !(0, _DataUtils.isNumber)(domain[0]) || !(0, _DataUtils.isNumber)(domain[1])) {
+    return value;
+  }
+  var minValue = Math.min(domain[0], domain[1]);
+  var maxValue = Math.max(domain[0], domain[1]);
+  var result = [value[0], value[1]];
+  if (!(0, _DataUtils.isNumber)(value[0]) || value[0] < minValue) {
+    result[0] = minValue;
+  }
+  if (!(0, _DataUtils.isNumber)(value[1]) || value[1] > maxValue) {
+    result[1] = maxValue;
+  }
+  if (result[0] > maxValue) {
+    result[0] = maxValue;
+  }
+  if (result[1] < minValue) {
+    result[1] = minValue;
+  }
+  return result;
+};
+
+/**
+ * Stacks all positive numbers above zero and all negative numbers below zero.
+ *
+ * If all values in the series are positive then this behaves the same as 'none' stacker.
+ *
+ * @param {Array} series from d3-shape Stack
+ * @return {Array} series with applied offset
+ */
+exports.truncateByDomain = truncateByDomain;
+var offsetSign = series => {
+  var _series$;
+  var n = series.length;
+  if (n <= 0) {
+    return;
+  }
+  var m = (_series$ = series[0]) === null || _series$ === void 0 ? void 0 : _series$.length;
+  if (m == null || m <= 0) {
+    return;
+  }
+  for (var j = 0; j < m; ++j) {
+    var positive = 0;
+    var negative = 0;
+    for (var i = 0; i < n; ++i) {
+      var row = series[i];
+      var col = row === null || row === void 0 ? void 0 : row[j];
+      if (col == null) {
+        continue;
+      }
+      var series1 = col[1];
+      var series0 = col[0];
+      var value = (0, _DataUtils.isNan)(series1) ? series0 : series1;
+      if (value >= 0) {
+        col[0] = positive;
+        positive += value;
+        col[1] = positive;
+      } else {
+        col[0] = negative;
+        negative += value;
+        col[1] = negative;
+      }
+    }
+  }
+};
+
+/**
+ * Replaces all negative values with zero when stacking data.
+ *
+ * If all values in the series are positive then this behaves the same as 'none' stacker.
+ *
+ * @param {Array} series from d3-shape Stack
+ * @return {Array} series with applied offset
+ */
+exports.offsetSign = offsetSign;
+var offsetPositive = series => {
+  var _series$2;
+  var n = series.length;
+  if (n <= 0) {
+    return;
+  }
+  var m = (_series$2 = series[0]) === null || _series$2 === void 0 ? void 0 : _series$2.length;
+  if (m == null || m <= 0) {
+    return;
+  }
+  for (var j = 0; j < m; ++j) {
+    var positive = 0;
+    for (var i = 0; i < n; ++i) {
+      var row = series[i];
+      var col = row === null || row === void 0 ? void 0 : row[j];
+      if (col == null) {
+        continue;
+      }
+      var value = (0, _DataUtils.isNan)(col[1]) ? col[0] : col[1];
+      if (value >= 0) {
+        col[0] = positive;
+        positive += value;
+        col[1] = positive;
+      } else {
+        col[0] = 0;
+        col[1] = 0;
+      }
+    }
+  }
+};
+
+/**
+ * Function type to compute offset for stacked data.
+ *
+ * d3-shape has something fishy going on with its types.
+ * In @definitelytyped/d3-shape, this function (the offset accessor) is typed as Series<> => void.
+ * However! When I actually open the storybook I can see that the offset accessor actually receives Array<Series<>>.
+ * The same I can see in the source code itself:
+ * https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/66042
+ * That one unfortunately has no types but we can tell it passes three-dimensional array.
+ *
+ * Which leads me to believe that definitelytyped is wrong on this one.
+ * There's open discussion on this topic without much attention:
+ * https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/66042
+ */
+exports.offsetPositive = offsetPositive;
+var STACK_OFFSET_MAP = {
+  sign: offsetSign,
+  // @ts-expect-error definitelytyped types are incorrect
+  expand: _d3Shape.stackOffsetExpand,
+  // @ts-expect-error definitelytyped types are incorrect
+  none: _d3Shape.stackOffsetNone,
+  // @ts-expect-error definitelytyped types are incorrect
+  silhouette: _d3Shape.stackOffsetSilhouette,
+  // @ts-expect-error definitelytyped types are incorrect
+  wiggle: _d3Shape.stackOffsetWiggle,
+  positive: offsetPositive
+};
+var getStackedData = (data, dataKeys, offsetType) => {
+  var _STACK_OFFSET_MAP$off;
+  var offsetAccessor = (_STACK_OFFSET_MAP$off = STACK_OFFSET_MAP[offsetType]) !== null && _STACK_OFFSET_MAP$off !== void 0 ? _STACK_OFFSET_MAP$off : _d3Shape.stackOffsetNone;
+  var stack = (0, _d3Shape.stack)().keys(dataKeys).value((d, key) => Number(getValueByDataKey(d, key, 0))).order(_d3Shape.stackOrderNone)
+  // @ts-expect-error definitelytyped types are incorrect
+  .offset(offsetAccessor);
+  var result = stack(data);
+
+  // Post-process ranged data: if value is an array of two numbers, use them directly without stacking
+  result.forEach((series, seriesIndex) => {
+    series.forEach((point, pointIndex) => {
+      var value = getValueByDataKey(data[pointIndex], dataKeys[seriesIndex], 0);
+      if (Array.isArray(value) && value.length === 2 && (0, _DataUtils.isNumber)(value[0]) && (0, _DataUtils.isNumber)(value[1])) {
+        // eslint-disable-next-line prefer-destructuring,no-param-reassign
+        point[0] = value[0];
+        // eslint-disable-next-line prefer-destructuring,no-param-reassign
+        point[1] = value[1];
+      }
+    });
+  });
+  return result;
+};
+
+/**
+ * Externally, we accept both strings and numbers as stack IDs
+ * @inline
+ */
+
+/**
+ * Stack IDs in the external props allow numbers; but internally we use it as an object key
+ * and object keys are always strings. Also, it would be kinda confusing if stackId=8 and stackId='8' were different stacks
+ * so let's just force a string.
+ */
+exports.getStackedData = getStackedData;
+function getNormalizedStackId(publicStackId) {
+  return publicStackId == null ? undefined : String(publicStackId);
+}
+function getCateCoordinateOfLine(_ref) {
+  var axis = _ref.axis,
+    ticks = _ref.ticks,
+    bandSize = _ref.bandSize,
+    entry = _ref.entry,
+    index = _ref.index,
+    dataKey = _ref.dataKey;
+  if (axis.type === 'category') {
+    // find coordinate of category axis by the value of category
+    // @ts-expect-error why does this use direct object access instead of getValueByDataKey?
+    if (!axis.allowDuplicatedCategory && axis.dataKey && !(0, _DataUtils.isNullish)(entry[axis.dataKey])) {
+      // @ts-expect-error why does this use direct object access instead of getValueByDataKey?
+      var matchedTick = (0, _DataUtils.findEntryInArray)(ticks, 'value', entry[axis.dataKey]);
+      if (matchedTick) {
+        return matchedTick.coordinate + bandSize / 2;
+      }
+    }
+    return ticks !== null && ticks !== void 0 && ticks[index] ? ticks[index].coordinate + bandSize / 2 : null;
+  }
+  var value = getValueByDataKey(entry, !(0, _DataUtils.isNullish)(dataKey) ? dataKey : axis.dataKey);
+  var scaled = axis.scale.map(value);
+  if (!(0, _DataUtils.isNumber)(scaled)) {
+    return null;
+  }
+  return scaled;
+}
+var getCateCoordinateOfBar = _ref2 => {
+  var axis = _ref2.axis,
+    ticks = _ref2.ticks,
+    offset = _ref2.offset,
+    bandSize = _ref2.bandSize,
+    entry = _ref2.entry,
+    index = _ref2.index;
+  if (axis.type === 'category') {
+    return ticks[index] ? ticks[index].coordinate + offset : null;
+  }
+  // getValueByDataKey does not validate the output type
+  var value = getValueByDataKey(entry, axis.dataKey, axis.scale.domain()[index]);
+  if ((0, _DataUtils.isNullish)(value)) {
+    return null;
+  }
+  var scaled = axis.scale.map(value);
+  if (!(0, _DataUtils.isNumber)(scaled)) {
+    return null;
+  }
+  return scaled - bandSize / 2 + offset;
+};
+exports.getCateCoordinateOfBar = getCateCoordinateOfBar;
+var getBaseValueOfBar = _ref3 => {
+  var numericAxis = _ref3.numericAxis;
+  var domain = numericAxis.scale.domain();
+  if (numericAxis.type === 'number') {
+    // @ts-expect-error type number means the domain has numbers in it but this relationship is not known to typescript
+    var minValue = Math.min(domain[0], domain[1]);
+    // @ts-expect-error type number means the domain has numbers in it but this relationship is not known to typescript
+    var maxValue = Math.max(domain[0], domain[1]);
+    if (minValue <= 0 && maxValue >= 0) {
+      return 0;
+    }
+    if (maxValue < 0) {
+      return maxValue;
+    }
+    return minValue;
+  }
+  return domain[0];
+};
+exports.getBaseValueOfBar = getBaseValueOfBar;
+var getDomainOfSingle = data => {
+  var flat = data.flat(2).filter(_DataUtils.isNumber);
+  return [Math.min(...flat), Math.max(...flat)];
+};
+var makeDomainFinite = domain => {
+  return [domain[0] === Infinity ? 0 : domain[0], domain[1] === -Infinity ? 0 : domain[1]];
+};
+var getDomainOfStackGroups = (stackGroups, startIndex, endIndex) => {
+  if (stackGroups == null || Object.keys(stackGroups).length === 0) {
+    return undefined;
+  }
+  return makeDomainFinite(Object.keys(stackGroups).reduce((result, stackId) => {
+    var group = stackGroups[stackId];
+    if (!group) {
+      return result;
+    }
+    var stackedData = group.stackedData;
+    var domain = stackedData.reduce((res, entry) => {
+      var sliced = (0, _getSliced.getSliced)(entry, startIndex, endIndex);
+      var s = getDomainOfSingle(sliced);
+      if (!(0, _isWellBehavedNumber.isWellBehavedNumber)(s[0]) || !(0, _isWellBehavedNumber.isWellBehavedNumber)(s[1])) {
+        return res;
+      }
+      return [Math.min(res[0], s[0]), Math.max(res[1], s[1])];
+    }, [Infinity, -Infinity]);
+    return [Math.min(domain[0], result[0]), Math.max(domain[1], result[1])];
+  }, [Infinity, -Infinity]));
+};
+exports.getDomainOfStackGroups = getDomainOfStackGroups;
+var MIN_VALUE_REG = exports.MIN_VALUE_REG = /^dataMin[\s]*-[\s]*([0-9]+([.]{1}[0-9]+){0,1})$/;
+var MAX_VALUE_REG = exports.MAX_VALUE_REG = /^dataMax[\s]*\+[\s]*([0-9]+([.]{1}[0-9]+){0,1})$/;
+
+/**
+ * Calculate the size between two category
+ * @param  {Object} axis  The options of axis
+ * @param  {Array}  ticks The ticks of axis
+ * @param  {Boolean} isBar if items in axis are bars
+ * @return {Number} Size
+ */
+var getBandSizeOfAxis = (axis, ticks, isBar) => {
+  if (axis && axis.scale && axis.scale.bandwidth) {
+    var bandWidth = axis.scale.bandwidth();
+    if (!isBar || bandWidth > 0) {
+      return bandWidth;
+    }
+  }
+  if (axis && ticks && ticks.length >= 2) {
+    var orderedTicks = (0, _sortBy.default)(ticks, o => o.coordinate);
+    var bandSize = Infinity;
+    for (var i = 1, len = orderedTicks.length; i < len; i++) {
+      var cur = orderedTicks[i];
+      var prev = orderedTicks[i - 1];
+      bandSize = Math.min(((cur === null || cur === void 0 ? void 0 : cur.coordinate) || 0) - ((prev === null || prev === void 0 ? void 0 : prev.coordinate) || 0), bandSize);
+    }
+    return bandSize === Infinity ? 0 : bandSize;
+  }
+  return isBar ? undefined : 0;
+};
+exports.getBandSizeOfAxis = getBandSizeOfAxis;
+function getTooltipEntry(_ref4) {
+  var tooltipEntrySettings = _ref4.tooltipEntrySettings,
+    dataKey = _ref4.dataKey,
+    payload = _ref4.payload,
+    value = _ref4.value,
+    name = _ref4.name;
+  return _objectSpread(_objectSpread({}, tooltipEntrySettings), {}, {
+    dataKey,
+    payload,
+    value,
+    name
+  });
+}
+function getTooltipNameProp(nameFromItem, dataKey) {
+  if (nameFromItem != null) {
+    return String(nameFromItem);
+  }
+  if (typeof dataKey === 'string') {
+    return dataKey;
+  }
+  return undefined;
+}
+var calculateCartesianTooltipPos = (coordinate, layout) => {
+  if (layout === 'horizontal') {
+    return coordinate.relativeX;
+  }
+  if (layout === 'vertical') {
+    return coordinate.relativeY;
+  }
+  return undefined;
+};
+exports.calculateCartesianTooltipPos = calculateCartesianTooltipPos;
+var calculatePolarTooltipPos = (rangeObj, layout) => {
+  if (layout === 'centric') {
+    return rangeObj.angle;
+  }
+  return rangeObj.radius;
+};
+exports.calculatePolarTooltipPos = calculatePolarTooltipPos;
--- a/frontend/node_modules/recharts/lib/util/Constants.js
+++ b/frontend/node_modules/recharts/lib/util/Constants.js
@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_Y_AXIS_WIDTH = exports.DATA_ITEM_INDEX_ATTRIBUTE_NAME = exports.DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME = exports.COLOR_PANEL = void 0;
+var COLOR_PANEL = exports.COLOR_PANEL = ['#1890FF', '#66B5FF', '#41D9C7', '#2FC25B', '#6EDB8F', '#9AE65C', '#FACC14', '#E6965C', '#57AD71', '#223273', '#738AE6', '#7564CC', '#8543E0', '#A877ED', '#5C8EE6', '#13C2C2', '#70E0E0', '#5CA3E6', '#3436C7', '#8082FF', '#DD81E6', '#F04864', '#FA7D92', '#D598D9'];
+
+/**
+ * We use this attribute to identify which element is the one that the user is touching.
+ * The index is the position of the element in the data array.
+ * This can be either a number (for array-based charts) or a string (for the charts that have a matrix-shaped data).
+ */
+var DATA_ITEM_INDEX_ATTRIBUTE_NAME = exports.DATA_ITEM_INDEX_ATTRIBUTE_NAME = 'data-recharts-item-index';
+
+/**
+ * We use this attribute to identify which element is the one that the user is touching.
+ * Unlike dataKey, or name, it is always unique.
+ */
+var DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME = exports.DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME = 'data-recharts-item-id';
+var DEFAULT_Y_AXIS_WIDTH = exports.DEFAULT_Y_AXIS_WIDTH = 60;
--- a/frontend/node_modules/recharts/lib/util/CssPrefixUtils.js
+++ b/frontend/node_modules/recharts/lib/util/CssPrefixUtils.js
@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generatePrefixStyle = void 0;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var PREFIX_LIST = ['Webkit', 'Moz', 'O', 'ms'];
+var generatePrefixStyle = (name, value) => {
+  if (!name) {
+    return undefined;
+  }
+  var camelName = name.replace(/(\w)/, v => v.toUpperCase());
+  var result = PREFIX_LIST.reduce((res, entry) => _objectSpread(_objectSpread({}, res), {}, {
+    [entry + camelName]: value
+  }), {});
+  result[name] = value;
+  return result;
+};
+exports.generatePrefixStyle = generatePrefixStyle;
--- a/frontend/node_modules/recharts/lib/util/DOMUtils.js
+++ b/frontend/node_modules/recharts/lib/util/DOMUtils.js
@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTextMeasurementConfig = exports.getStringSize = exports.getStringCacheStats = exports.configureTextMeasurement = exports.clearStringCache = void 0;
+var _Global = require("./Global");
+var _LRUCache = require("./LRUCache");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var defaultConfig = {
+  cacheSize: 2000,
+  enableCache: true
+};
+var currentConfig = _objectSpread({}, defaultConfig);
+var stringCache = new _LRUCache.LRUCache(currentConfig.cacheSize);
+var SPAN_STYLE = {
+  position: 'absolute',
+  top: '-20000px',
+  left: 0,
+  padding: 0,
+  margin: 0,
+  border: 'none',
+  whiteSpace: 'pre'
+};
+var MEASUREMENT_SPAN_ID = 'recharts_measurement_span';
+function createCacheKey(text, style) {
+  // Simple string concatenation for better performance than JSON.stringify
+  var fontSize = style.fontSize || '';
+  var fontFamily = style.fontFamily || '';
+  var fontWeight = style.fontWeight || '';
+  var fontStyle = style.fontStyle || '';
+  var letterSpacing = style.letterSpacing || '';
+  var textTransform = style.textTransform || '';
+  return "".concat(text, "|").concat(fontSize, "|").concat(fontFamily, "|").concat(fontWeight, "|").concat(fontStyle, "|").concat(letterSpacing, "|").concat(textTransform);
+}
+
+/**
+ * Measure text using DOM (accurate but slower)
+ * @param text - The text to measure
+ * @param style - CSS style properties to apply
+ * @returns The size of the text
+ */
+var measureTextWithDOM = (text, style) => {
+  try {
+    var measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
+    if (!measurementSpan) {
+      measurementSpan = document.createElement('span');
+      measurementSpan.setAttribute('id', MEASUREMENT_SPAN_ID);
+      measurementSpan.setAttribute('aria-hidden', 'true');
+      document.body.appendChild(measurementSpan);
+    }
+
+    // Apply styles directly without unnecessary object creation
+    Object.assign(measurementSpan.style, SPAN_STYLE, style);
+    measurementSpan.textContent = "".concat(text);
+    var rect = measurementSpan.getBoundingClientRect();
+    return {
+      width: rect.width,
+      height: rect.height
+    };
+  } catch (_unused) {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+};
+var getStringSize = exports.getStringSize = function getStringSize(text) {
+  var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (text === undefined || text === null || _Global.Global.isSsr) {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+
+  // If caching is disabled, measure directly
+  if (!currentConfig.enableCache) {
+    return measureTextWithDOM(text, style);
+  }
+  var cacheKey = createCacheKey(text, style);
+  var cachedResult = stringCache.get(cacheKey);
+  if (cachedResult) {
+    return cachedResult;
+  }
+
+  // Measure using DOM
+  var result = measureTextWithDOM(text, style);
+
+  // Store in LRU cache
+  stringCache.set(cacheKey, result);
+  return result;
+};
+
+/**
+ * Configure text measurement behavior
+ * @param config - Partial configuration to apply
+ * @returns void
+ */
+var configureTextMeasurement = config => {
+  var newConfig = _objectSpread(_objectSpread({}, currentConfig), config);
+  if (newConfig.cacheSize !== currentConfig.cacheSize) {
+    stringCache = new _LRUCache.LRUCache(newConfig.cacheSize);
+  }
+  currentConfig = newConfig;
+};
+
+/**
+ * Get current text measurement configuration
+ * @returns Current configuration
+ */
+exports.configureTextMeasurement = configureTextMeasurement;
+var getTextMeasurementConfig = () => _objectSpread({}, currentConfig);
+
+/**
+ * Clear the string size cache. Useful for testing or memory management.
+ * @returns void
+ */
+exports.getTextMeasurementConfig = getTextMeasurementConfig;
+var clearStringCache = () => {
+  stringCache.clear();
+};
+
+/**
+ * Get cache statistics for debugging purposes.
+ * @returns Cache statistics including size and max size
+ */
+exports.clearStringCache = clearStringCache;
+var getStringCacheStats = () => ({
+  size: stringCache.size(),
+  maxSize: currentConfig.cacheSize
+});
+exports.getStringCacheStats = getStringCacheStats;
--- a/frontend/node_modules/recharts/lib/util/DataUtils.js
+++ b/frontend/node_modules/recharts/lib/util/DataUtils.js
@ -0,0 +1,209 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findEntryInArray = findEntryInArray;
+exports.hasDuplicate = exports.getPercentValue = exports.getLinearRegression = void 0;
+exports.interpolate = interpolate;
+exports.isNan = void 0;
+exports.isNotNil = isNotNil;
+exports.mathSign = exports.isPercent = exports.isNumber = exports.isNumOrStr = exports.isNullish = void 0;
+exports.noop = noop;
+exports.upperFirst = exports.uniqueId = void 0;
+var _get = _interopRequireDefault(require("es-toolkit/compat/get"));
+var _round = require("./round");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var mathSign = value => {
+  if (value === 0) {
+    return 0;
+  }
+  if (value > 0) {
+    return 1;
+  }
+  return -1;
+};
+exports.mathSign = mathSign;
+var isNan = value => {
+  // eslint-disable-next-line eqeqeq
+  return typeof value == 'number' && value != +value;
+};
+
+/**
+ * Checks if the value is a percent string.
+ * A valid percent string must end with '%' and have at least one character before the '%'.
+ *
+ * @param {string | number | undefined} value The value to check
+ * @returns {boolean} true if the value is a percent string
+ */
+exports.isNan = isNan;
+var isPercent = value => typeof value === 'string' && value.length > 1 && value.indexOf('%') === value.length - 1;
+exports.isPercent = isPercent;
+var isNumber = value => (typeof value === 'number' || value instanceof Number) && !isNan(value);
+exports.isNumber = isNumber;
+var isNumOrStr = value => isNumber(value) || typeof value === 'string';
+exports.isNumOrStr = isNumOrStr;
+var idCounter = 0;
+var uniqueId = prefix => {
+  var id = ++idCounter;
+  return "".concat(prefix || '').concat(id);
+};
+
+/**
+ * Calculates the numeric value represented by a percent string or number, based on a total value.
+ *
+ * - If `percent` is not a number or string, returns `defaultValue`.
+ * - If `percent` is a percent string but `totalValue` is null/undefined, returns `defaultValue`.
+ * - If the result is NaN, returns `defaultValue`.
+ * - If `validate` is true and the result exceeds `totalValue`, returns `totalValue`.
+ *
+ * @param percent - The percent value to convert. Can be a number (e.g. 25) or a string ending with '%' (e.g. '25%').
+ *                  If a string, it must end with '%' to be treated as a percent; otherwise, it is parsed as a number.
+ * @param totalValue - The total value to calculate the percent of. Required if `percent` is a percent string.
+ * @param defaultValue - The value returned if `percent` is undefined, invalid, or cannot be converted to a number.
+ * @param validate - If true, ensures the result does not exceed `totalValue` (when provided).
+ * @returns The calculated value, or `defaultValue` for invalid input.
+ */
+exports.uniqueId = uniqueId;
+var getPercentValue = exports.getPercentValue = function getPercentValue(percent, totalValue) {
+  var defaultValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var validate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  if (!isNumber(percent) && typeof percent !== 'string') {
+    return defaultValue;
+  }
+  var value;
+  if (isPercent(percent)) {
+    if (totalValue == null) {
+      return defaultValue;
+    }
+    var index = percent.indexOf('%');
+    value = totalValue * parseFloat(percent.slice(0, index)) / 100;
+  } else {
+    value = +percent;
+  }
+  if (isNan(value)) {
+    value = defaultValue;
+  }
+  if (validate && totalValue != null && value > totalValue) {
+    value = totalValue;
+  }
+  return value;
+};
+var hasDuplicate = ary => {
+  if (!Array.isArray(ary)) {
+    return false;
+  }
+  var len = ary.length;
+  var cache = {};
+  for (var i = 0; i < len; i++) {
+    if (!cache[String(ary[i])]) {
+      cache[String(ary[i])] = true;
+    } else {
+      return true;
+    }
+  }
+  return false;
+};
+
+/**
+ * Function to interpolate between two numbers.
+ * If both start and end are numbers, it calculates the interpolated value based on the parameter animationElapsedTime (0 to 1).
+ * If either start or end is not a number, it returns the end value directly.
+ *
+ * You will typically use this function when implementing custom animations.
+ *
+ * `animationElapsedTime` can be outside the (0, 1) range, depending on easing.
+ *
+ * This one interpolates only numbers;
+ * if you want to interpolate colors or strings then perhaps see {@link https://d3js.org/d3-interpolate d3-interpolate}.
+ * @param start the starting value (when animationElapsedTime=0)
+ * @param end the final value (when animationElapsedTime=1)
+ * @param animationElapsedTime interpolation factor; values in [0, 1] interpolate between start and end, and values outside that range extrapolate
+ *
+ * @since 3.9
+ */
+exports.hasDuplicate = hasDuplicate;
+function interpolate(start, end, animationElapsedTime) {
+  if (isNumber(start) && isNumber(end)) {
+    return (0, _round.round)(start + animationElapsedTime * (end - start));
+  }
+  return end;
+}
+function findEntryInArray(ary, specifiedKey, specifiedValue) {
+  if (!ary || !ary.length) {
+    return undefined;
+  }
+  return ary.find(entry => entry && (typeof specifiedKey === 'function' ? specifiedKey(entry) : (0, _get.default)(entry, specifiedKey)) === specifiedValue);
+}
+/**
+ * The least square linear regression
+ * @param {Array} data The array of points
+ * @returns {Object} The domain of x, and the parameter of linear function
+ */
+var getLinearRegression = data => {
+  var len = data.length;
+  var xsum = 0;
+  var ysum = 0;
+  var xysum = 0;
+  var xxsum = 0;
+  var xmin = Infinity;
+  var xmax = -Infinity;
+  var xcurrent = 0;
+  var ycurrent = 0;
+  for (var i = 0; i < len; i++) {
+    var _data$i, _data$i2;
+    xcurrent = ((_data$i = data[i]) === null || _data$i === void 0 ? void 0 : _data$i.cx) || 0;
+    ycurrent = ((_data$i2 = data[i]) === null || _data$i2 === void 0 ? void 0 : _data$i2.cy) || 0;
+    xsum += xcurrent;
+    ysum += ycurrent;
+    xysum += xcurrent * ycurrent;
+    xxsum += xcurrent * xcurrent;
+    xmin = Math.min(xmin, xcurrent);
+    xmax = Math.max(xmax, xcurrent);
+  }
+  var a = len * xxsum !== xsum * xsum ? (len * xysum - xsum * ysum) / (len * xxsum - xsum * xsum) : 0;
+  return {
+    xmin,
+    xmax,
+    a,
+    b: (ysum - a * xsum) / len
+  };
+};
+exports.getLinearRegression = getLinearRegression;
+/**
+ * Checks if the value is null or undefined
+ * @param value The value to check
+ * @returns true if the value is null or undefined
+ */
+var isNullish = value => {
+  return value === null || typeof value === 'undefined';
+};
+
+/**
+ * Uppercase the first letter of a string
+ * @param {string} value The string to uppercase
+ * @returns {string} The uppercased string
+ */
+exports.isNullish = isNullish;
+var upperFirst = value => {
+  if (isNullish(value)) {
+    return value;
+  }
+  return "".concat(value.charAt(0).toUpperCase()).concat(value.slice(1));
+};
+
+/**
+ * Checks if the value is not null nor undefined.
+ * @param value The value to check
+ * @returns true if the value is not null nor undefined
+ */
+exports.upperFirst = upperFirst;
+function isNotNil(value) {
+  return value != null;
+}
+
+/**
+ * No-operation function that does nothing.
+ * Useful as a placeholder or default callback function.
+ */
+function noop() {}
--- a/frontend/node_modules/recharts/lib/util/Events.js
+++ b/frontend/node_modules/recharts/lib/util/Events.js
@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.eventCenter = exports.TOOLTIP_SYNC_EVENT = exports.BRUSH_SYNC_EVENT = void 0;
+var _eventemitter = _interopRequireDefault(require("eventemitter3"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var eventCenter = exports.eventCenter = new _eventemitter.default();
+var TOOLTIP_SYNC_EVENT = exports.TOOLTIP_SYNC_EVENT = 'recharts.syncEvent.tooltip';
+var BRUSH_SYNC_EVENT = exports.BRUSH_SYNC_EVENT = 'recharts.syncEvent.brush';
--- a/frontend/node_modules/recharts/lib/util/FunnelUtils.js
+++ b/frontend/node_modules/recharts/lib/util/FunnelUtils.js
@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FunnelTrapezoid = FunnelTrapezoid;
+exports.defaultFunnelShape = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Trapezoid = require("../shape/Trapezoid");
+var _ActiveShapeUtils = require("./ActiveShapeUtils");
+var _excluded = ["option"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var defaultFunnelShape = exports.defaultFunnelShape = _Trapezoid.Trapezoid;
+function FunnelTrapezoid(_ref) {
+  var option = _ref.option,
+    shapeProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(_ActiveShapeUtils.Shape, {
+    option: option,
+    DefaultShape: defaultFunnelShape,
+    shapeProps: shapeProps
+  });
+}
--- a/frontend/node_modules/recharts/lib/util/Global.js
+++ b/frontend/node_modules/recharts/lib/util/Global.js
@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Global = void 0;
+var parseIsSsrByDefault = () => !(typeof window !== 'undefined' && window.document && Boolean(window.document.createElement) && window.setTimeout);
+var Global = exports.Global = {
+  devToolsEnabled: true,
+  isSsr: parseIsSsrByDefault()
+};
--- a/frontend/node_modules/recharts/lib/util/IfOverflow.js
+++ b/frontend/node_modules/recharts/lib/util/IfOverflow.js
@ -0,0 +1 @@
+"use strict";
--- a/frontend/node_modules/recharts/lib/util/LRUCache.js
+++ b/frontend/node_modules/recharts/lib/util/LRUCache.js
@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LRUCache = void 0;
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * Simple LRU (Least Recently Used) cache implementation
+ */
+class LRUCache {
+  constructor(maxSize) {
+    _defineProperty(this, "cache", new Map());
+    this.maxSize = maxSize;
+  }
+  get(key) {
+    var value = this.cache.get(key);
+    if (value !== undefined) {
+      this.cache.delete(key);
+      this.cache.set(key, value);
+    }
+    return value;
+  }
+  set(key, value) {
+    if (this.cache.has(key)) {
+      this.cache.delete(key);
+    } else if (this.cache.size >= this.maxSize) {
+      var firstKey = this.cache.keys().next().value;
+      if (firstKey != null) {
+        this.cache.delete(firstKey);
+      }
+    }
+    this.cache.set(key, value);
+  }
+  clear() {
+    this.cache.clear();
+  }
+  size() {
+    return this.cache.size;
+  }
+}
+exports.LRUCache = LRUCache;
--- a/frontend/node_modules/recharts/lib/util/LogUtils.js
+++ b/frontend/node_modules/recharts/lib/util/LogUtils.js
@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.warn = void 0;
+/* eslint no-console: 0 */
+var isDev = true;
+var warn = exports.warn = function warn(condition, format) {
+  for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    args[_key - 2] = arguments[_key];
+  }
+  if (isDev && typeof console !== 'undefined' && console.warn) {
+    if (format === undefined) {
+      console.warn('LogUtils requires an error message argument');
+    }
+    if (!condition) {
+      if (format === undefined) {
+        console.warn('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
+      } else {
+        var argIndex = 0;
+        console.warn(format.replace(/%s/g, () => args[argIndex++]));
+      }
+    }
+  }
+};
--- a/frontend/node_modules/recharts/lib/util/PolarUtils.js
+++ b/frontend/node_modules/recharts/lib/util/PolarUtils.js
@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.radianToDegree = exports.polarToCartesian = exports.inRangeOfSector = exports.getMaxRadius = exports.degreeToRadian = exports.RADIAN = void 0;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var RADIAN = exports.RADIAN = Math.PI / 180;
+var degreeToRadian = angle => angle * Math.PI / 180;
+exports.degreeToRadian = degreeToRadian;
+var radianToDegree = angleInRadian => angleInRadian * 180 / Math.PI;
+exports.radianToDegree = radianToDegree;
+var polarToCartesian = (cx, cy, radius, angle) => ({
+  x: cx + Math.cos(-RADIAN * angle) * radius,
+  y: cy + Math.sin(-RADIAN * angle) * radius
+});
+exports.polarToCartesian = polarToCartesian;
+var getMaxRadius = exports.getMaxRadius = function getMaxRadius(width, height) {
+  var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    width: 0,
+    height: 0,
+    brushBottom: 0
+  };
+  return Math.min(Math.abs(width - (offset.left || 0) - (offset.right || 0)), Math.abs(height - (offset.top || 0) - (offset.bottom || 0))) / 2;
+};
+var distanceBetweenPoints = (point, anotherPoint) => {
+  var x1 = point.x,
+    y1 = point.y;
+  var x2 = anotherPoint.x,
+    y2 = anotherPoint.y;
+  return Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2);
+};
+var getAngleOfPoint = (_ref, _ref2) => {
+  var x = _ref.x,
+    y = _ref.y;
+  var cx = _ref2.cx,
+    cy = _ref2.cy;
+  var radius = distanceBetweenPoints({
+    x,
+    y
+  }, {
+    x: cx,
+    y: cy
+  });
+  if (radius <= 0) {
+    return {
+      radius,
+      angle: 0
+    };
+  }
+  var cos = (x - cx) / radius;
+  var angleInRadian = Math.acos(cos);
+  if (y > cy) {
+    angleInRadian = 2 * Math.PI - angleInRadian;
+  }
+  return {
+    radius,
+    angle: radianToDegree(angleInRadian),
+    angleInRadian
+  };
+};
+var formatAngleOfSector = _ref3 => {
+  var startAngle = _ref3.startAngle,
+    endAngle = _ref3.endAngle;
+  var startCnt = Math.floor(startAngle / 360);
+  var endCnt = Math.floor(endAngle / 360);
+  var min = Math.min(startCnt, endCnt);
+  return {
+    startAngle: startAngle - min * 360,
+    endAngle: endAngle - min * 360
+  };
+};
+var reverseFormatAngleOfSector = (angle, _ref4) => {
+  var startAngle = _ref4.startAngle,
+    endAngle = _ref4.endAngle;
+  var startCnt = Math.floor(startAngle / 360);
+  var endCnt = Math.floor(endAngle / 360);
+  var min = Math.min(startCnt, endCnt);
+  return angle + min * 360;
+};
+var inRangeOfSector = (_ref5, viewBox) => {
+  var x = _ref5.relativeX,
+    y = _ref5.relativeY;
+  var _getAngleOfPoint = getAngleOfPoint({
+      x,
+      y
+    }, viewBox),
+    radius = _getAngleOfPoint.radius,
+    angle = _getAngleOfPoint.angle;
+  var innerRadius = viewBox.innerRadius,
+    outerRadius = viewBox.outerRadius;
+  if (radius < innerRadius || radius > outerRadius) {
+    return null;
+  }
+  if (radius === 0) {
+    return null;
+  }
+  var _formatAngleOfSector = formatAngleOfSector(viewBox),
+    startAngle = _formatAngleOfSector.startAngle,
+    endAngle = _formatAngleOfSector.endAngle;
+  var formatAngle = angle;
+  var inRange;
+  if (startAngle <= endAngle) {
+    while (formatAngle > endAngle) {
+      formatAngle -= 360;
+    }
+    while (formatAngle < startAngle) {
+      formatAngle += 360;
+    }
+    inRange = formatAngle >= startAngle && formatAngle <= endAngle;
+  } else {
+    while (formatAngle > startAngle) {
+      formatAngle -= 360;
+    }
+    while (formatAngle < endAngle) {
+      formatAngle += 360;
+    }
+    inRange = formatAngle >= endAngle && formatAngle <= startAngle;
+  }
+  if (inRange) {
+    return _objectSpread(_objectSpread({}, viewBox), {}, {
+      radius,
+      angle: reverseFormatAngleOfSector(formatAngle, viewBox)
+    });
+  }
+  return null;
+};
+exports.inRangeOfSector = inRangeOfSector;
--- a/frontend/node_modules/recharts/lib/util/RadialBarUtils.js
+++ b/frontend/node_modules/recharts/lib/util/RadialBarUtils.js
@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadialBarSector = RadialBarSector;
+exports.defaultRadialBarShape = void 0;
+exports.parseCornerRadius = parseCornerRadius;
+var React = _interopRequireWildcard(require("react"));
+var _Sector = require("../shape/Sector");
+var _ActiveShapeUtils = require("./ActiveShapeUtils");
+var _excluded = ["option"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var defaultRadialBarShape = exports.defaultRadialBarShape = _Sector.Sector;
+function parseCornerRadius(cornerRadius) {
+  if (typeof cornerRadius === 'string') {
+    return parseInt(cornerRadius, 10);
+  }
+  return cornerRadius;
+}
+function RadialBarSector(_ref) {
+  var option = _ref.option,
+    shapeProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(_ActiveShapeUtils.Shape, {
+    option: option,
+    DefaultShape: defaultRadialBarShape,
+    shapeProps: shapeProps
+  });
+}
--- a/frontend/node_modules/recharts/lib/util/ReactUtils.js
+++ b/frontend/node_modules/recharts/lib/util/ReactUtils.js
@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SCALE_TYPES = void 0;
+exports.findAllByType = findAllByType;
+exports.toArray = exports.isClipDot = exports.getDisplayName = void 0;
+var _get = _interopRequireDefault(require("es-toolkit/compat/get"));
+var _react = require("react");
+var _reactIs = require("react-is");
+var _DataUtils = require("./DataUtils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var SCALE_TYPES = exports.SCALE_TYPES = ['auto', 'linear', 'pow', 'sqrt', 'log', 'identity', 'time', 'band', 'point', 'ordinal', 'quantile', 'quantize', 'utc', 'sequential', 'threshold'];
+
+/**
+ * @deprecated instead find another approach that does not depend on displayName.
+ * Get the display name of a component
+ * @param  {Object} Comp Specified Component
+ * @return {String}      Display name of Component
+ */
+var getDisplayName = Comp => {
+  if (typeof Comp === 'string') {
+    return Comp;
+  }
+  if (!Comp) {
+    return '';
+  }
+  return Comp.displayName || Comp.name || 'Component';
+};
+
+// `toArray` gets called multiple times during the render
+// so we can memoize last invocation (since reference to `children` is the same)
+exports.getDisplayName = getDisplayName;
+var lastChildren = null;
+var lastResult = null;
+
+/**
+ * @deprecated instead find another approach that does not require reading React Elements from DOM.
+ *
+ * @param children do not use
+ * @return deprecated do not use
+ */
+var toArray = children => {
+  if (children === lastChildren && Array.isArray(lastResult)) {
+    return lastResult;
+  }
+  var result = [];
+  _react.Children.forEach(children, child => {
+    if ((0, _DataUtils.isNullish)(child)) return;
+    if ((0, _reactIs.isFragment)(child)) {
+      result = result.concat(toArray(child.props.children));
+    } else {
+      // @ts-expect-error this could still be Iterable<ReactNode> and TS does not like that
+      result.push(child);
+    }
+  });
+  lastResult = result;
+  lastChildren = children;
+  return result;
+};
+
+/**
+ * @deprecated instead find another approach that does not require reading React Elements from DOM.
+ *
+ * Find and return all matched children by type.
+ * `type` must be a React.ComponentType
+ *
+ * @param children do not use
+ * @param type do not use
+ * @return deprecated do not use
+ */
+exports.toArray = toArray;
+function findAllByType(children, type) {
+  var result = [];
+  var types = [];
+  if (Array.isArray(type)) {
+    types = type.map(t => getDisplayName(t));
+  } else {
+    types = [getDisplayName(type)];
+  }
+  toArray(children).forEach(child => {
+    // @ts-expect-error toArray and lodash.get are not compatible. Let's get rid of the whole findAllByType function
+    var childType = (0, _get.default)(child, 'type.displayName') || (0, _get.default)(child, 'type.name');
+    if (childType && types.indexOf(childType) !== -1) {
+      result.push(child);
+    }
+  });
+  return result;
+}
+var isClipDot = dot => {
+  if (dot && typeof dot === 'object' && 'clipDot' in dot) {
+    return Boolean(dot.clipDot);
+  }
+  return true;
+};
+exports.isClipDot = isClipDot;
--- a/frontend/node_modules/recharts/lib/util/ReduceCSSCalc.js
+++ b/frontend/node_modules/recharts/lib/util/ReduceCSSCalc.js
@ -0,0 +1,171 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.reduceCSSCalc = reduceCSSCalc;
+exports.safeEvaluateExpression = safeEvaluateExpression;
+var _DataUtils = require("./DataUtils");
+var _DecimalCSS;
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { 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 _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var MULTIPLY_OR_DIVIDE_REGEX = /(-?\d+(?:\.\d+)?[a-zA-Z%]*)([*/])(-?\d+(?:\.\d+)?[a-zA-Z%]*)/;
+var ADD_OR_SUBTRACT_REGEX = /(-?\d+(?:\.\d+)?[a-zA-Z%]*)([+-])(-?\d+(?:\.\d+)?[a-zA-Z%]*)/;
+var CSS_LENGTH_UNIT_REGEX = /^(px|cm|vh|vw|em|rem|%|mm|in|pt|pc|ex|ch|vmin|vmax|Q)$/;
+var NUM_SPLIT_REGEX = /(-?\d+(?:\.\d+)?)([a-zA-Z%]+)?/;
+var CONVERSION_RATES = {
+  cm: 96 / 2.54,
+  mm: 96 / 25.4,
+  pt: 96 / 72,
+  pc: 96 / 6,
+  in: 96,
+  Q: 96 / (2.54 * 40),
+  px: 1
+};
+var FIXED_CSS_LENGTH_UNITS = ['cm', 'mm', 'pt', 'pc', 'in', 'Q', 'px'];
+function isSupportedUnit(unit) {
+  return FIXED_CSS_LENGTH_UNITS.includes(unit);
+}
+var STR_NAN = 'NaN';
+function convertToPx(value, unit) {
+  return value * CONVERSION_RATES[unit];
+}
+class DecimalCSS {
+  static parse(str) {
+    var _NUM_SPLIT_REGEX$exec;
+    var _ref = (_NUM_SPLIT_REGEX$exec = NUM_SPLIT_REGEX.exec(str)) !== null && _NUM_SPLIT_REGEX$exec !== void 0 ? _NUM_SPLIT_REGEX$exec : [],
+      _ref2 = _slicedToArray(_ref, 3),
+      numStr = _ref2[1],
+      unit = _ref2[2];
+    if (numStr == null) {
+      return DecimalCSS.NaN;
+    }
+    return new DecimalCSS(parseFloat(numStr), unit !== null && unit !== void 0 ? unit : '');
+  }
+  constructor(num, unit) {
+    this.num = num;
+    this.unit = unit;
+    this.num = num;
+    this.unit = unit;
+    if ((0, _DataUtils.isNan)(num)) {
+      this.unit = '';
+    }
+    if (unit !== '' && !CSS_LENGTH_UNIT_REGEX.test(unit)) {
+      this.num = NaN;
+      this.unit = '';
+    }
+    if (isSupportedUnit(unit)) {
+      this.num = convertToPx(num, unit);
+      this.unit = 'px';
+    }
+  }
+  add(other) {
+    if (this.unit !== other.unit) {
+      return new DecimalCSS(NaN, '');
+    }
+    return new DecimalCSS(this.num + other.num, this.unit);
+  }
+  subtract(other) {
+    if (this.unit !== other.unit) {
+      return new DecimalCSS(NaN, '');
+    }
+    return new DecimalCSS(this.num - other.num, this.unit);
+  }
+  multiply(other) {
+    if (this.unit !== '' && other.unit !== '' && this.unit !== other.unit) {
+      return new DecimalCSS(NaN, '');
+    }
+    return new DecimalCSS(this.num * other.num, this.unit || other.unit);
+  }
+  divide(other) {
+    if (this.unit !== '' && other.unit !== '' && this.unit !== other.unit) {
+      return new DecimalCSS(NaN, '');
+    }
+    return new DecimalCSS(this.num / other.num, this.unit || other.unit);
+  }
+  toString() {
+    return "".concat(this.num).concat(this.unit);
+  }
+  isNaN() {
+    return (0, _DataUtils.isNan)(this.num);
+  }
+}
+_DecimalCSS = DecimalCSS;
+_defineProperty(DecimalCSS, "NaN", new _DecimalCSS(NaN, ''));
+function calculateArithmetic(expr) {
+  if (expr == null || expr.includes(STR_NAN)) {
+    return STR_NAN;
+  }
+  var newExpr = expr;
+  while (newExpr.includes('*') || newExpr.includes('/')) {
+    var _MULTIPLY_OR_DIVIDE_R;
+    var _ref3 = (_MULTIPLY_OR_DIVIDE_R = MULTIPLY_OR_DIVIDE_REGEX.exec(newExpr)) !== null && _MULTIPLY_OR_DIVIDE_R !== void 0 ? _MULTIPLY_OR_DIVIDE_R : [],
+      _ref4 = _slicedToArray(_ref3, 4),
+      leftOperand = _ref4[1],
+      operator = _ref4[2],
+      rightOperand = _ref4[3];
+    var lTs = DecimalCSS.parse(leftOperand !== null && leftOperand !== void 0 ? leftOperand : '');
+    var rTs = DecimalCSS.parse(rightOperand !== null && rightOperand !== void 0 ? rightOperand : '');
+    var result = operator === '*' ? lTs.multiply(rTs) : lTs.divide(rTs);
+    if (result.isNaN()) {
+      return STR_NAN;
+    }
+    newExpr = newExpr.replace(MULTIPLY_OR_DIVIDE_REGEX, result.toString());
+  }
+  while (newExpr.includes('+') || /.-\d+(?:\.\d+)?/.test(newExpr)) {
+    var _ADD_OR_SUBTRACT_REGE;
+    var _ref5 = (_ADD_OR_SUBTRACT_REGE = ADD_OR_SUBTRACT_REGEX.exec(newExpr)) !== null && _ADD_OR_SUBTRACT_REGE !== void 0 ? _ADD_OR_SUBTRACT_REGE : [],
+      _ref6 = _slicedToArray(_ref5, 4),
+      _leftOperand = _ref6[1],
+      _operator = _ref6[2],
+      _rightOperand = _ref6[3];
+    var _lTs = DecimalCSS.parse(_leftOperand !== null && _leftOperand !== void 0 ? _leftOperand : '');
+    var _rTs = DecimalCSS.parse(_rightOperand !== null && _rightOperand !== void 0 ? _rightOperand : '');
+    var _result = _operator === '+' ? _lTs.add(_rTs) : _lTs.subtract(_rTs);
+    if (_result.isNaN()) {
+      return STR_NAN;
+    }
+    newExpr = newExpr.replace(ADD_OR_SUBTRACT_REGEX, _result.toString());
+  }
+  return newExpr;
+}
+var PARENTHESES_REGEX = /\(([^()]*)\)/;
+function calculateParentheses(expr) {
+  var newExpr = expr;
+  var match;
+  // eslint-disable-next-line no-cond-assign
+  while ((match = PARENTHESES_REGEX.exec(newExpr)) != null) {
+    var _match = match,
+      _match2 = _slicedToArray(_match, 2),
+      parentheticalExpression = _match2[1];
+    newExpr = newExpr.replace(PARENTHESES_REGEX, calculateArithmetic(parentheticalExpression));
+  }
+  return newExpr;
+}
+function evaluateExpression(expression) {
+  var newExpr = expression.replace(/\s+/g, '');
+  newExpr = calculateParentheses(newExpr);
+  newExpr = calculateArithmetic(newExpr);
+  return newExpr;
+}
+function safeEvaluateExpression(expression) {
+  try {
+    return evaluateExpression(expression);
+  } catch (_unused) {
+    return STR_NAN;
+  }
+}
+function reduceCSSCalc(expression) {
+  var result = safeEvaluateExpression(expression.slice(5, -1));
+  if (result === STR_NAN) {
+    return '';
+  }
+  return result;
+}
--- a/frontend/node_modules/recharts/lib/util/ScatterUtils.js
+++ b/frontend/node_modules/recharts/lib/util/ScatterUtils.js
@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScatterSymbol = ScatterSymbol;
+var React = _interopRequireWildcard(require("react"));
+var _Symbols = require("../shape/Symbols");
+var _ActiveShapeUtils = require("./ActiveShapeUtils");
+var _Constants = require("./Constants");
+var _excluded = ["option"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function renderSymbols(props) {
+  return /*#__PURE__*/React.createElement(_Symbols.Symbols, props);
+}
+function ScatterSymbol(_ref) {
+  var option = _ref.option,
+    props = _objectWithoutProperties(_ref, _excluded);
+  if (typeof option === 'string') {
+    return /*#__PURE__*/React.createElement(_ActiveShapeUtils.Shape, {
+      option: /*#__PURE__*/React.createElement(_Symbols.Symbols, _extends({
+        type: option
+      }, props)),
+      DefaultShape: renderSymbols,
+      shapeProps: props
+    });
+  }
+  return /*#__PURE__*/React.createElement(_ActiveShapeUtils.Shape, {
+    option: option,
+    DefaultShape: renderSymbols,
+    shapeProps: props
+  });
+}
--- a/frontend/node_modules/recharts/lib/util/TickUtils.js
+++ b/frontend/node_modules/recharts/lib/util/TickUtils.js
@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAngledTickWidth = getAngledTickWidth;
+exports.getNumberIntervalTicks = getNumberIntervalTicks;
+exports.getTickBoundaries = getTickBoundaries;
+exports.isVisible = isVisible;
+var _CartesianUtils = require("./CartesianUtils");
+var _getEveryNth = require("./getEveryNth");
+function getAngledTickWidth(contentSize, unitSize, angle) {
+  var size = {
+    width: contentSize.width + unitSize.width,
+    height: contentSize.height + unitSize.height
+  };
+  return (0, _CartesianUtils.getAngledRectangleWidth)(size, angle);
+}
+function getTickBoundaries(viewBox, sign, sizeKey) {
+  var isWidth = sizeKey === 'width';
+  var x = viewBox.x,
+    y = viewBox.y,
+    width = viewBox.width,
+    height = viewBox.height;
+  if (sign === 1) {
+    return {
+      start: isWidth ? x : y,
+      end: isWidth ? x + width : y + height
+    };
+  }
+  return {
+    start: isWidth ? x + width : y + height,
+    end: isWidth ? x : y
+  };
+}
+function isVisible(sign, tickPosition, getSize, start, end) {
+  /* Since getSize() is expensive (it reads the ticks' size from the DOM), we do this check first to avoid calculating
+   * the tick's size. */
+  if (sign * tickPosition < sign * start || sign * tickPosition > sign * end) {
+    return false;
+  }
+  var size = getSize();
+  return sign * (tickPosition - sign * size / 2 - start) >= 0 && sign * (tickPosition + sign * size / 2 - end) <= 0;
+}
+function getNumberIntervalTicks(ticks, interval) {
+  return (0, _getEveryNth.getEveryNth)(ticks, interval + 1);
+}
--- a/frontend/node_modules/recharts/lib/util/YAxisUtils.js
+++ b/frontend/node_modules/recharts/lib/util/YAxisUtils.js
@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCalculatedYAxisWidth = void 0;
+/**
+ * Calculates the width of the Y-axis based on the tick labels and the axis label.
+ * @param params - The parameters object.
+ * @param [params.ticks] - An array-like object of tick elements, each with a `getBoundingClientRect` method.
+ * @param [params.label] - The axis label element, with a `getBoundingClientRect` method.
+ * @param [params.labelGapWithTick=5] - The gap between the label and the tick.
+ * @param [params.tickSize=0] - The length of the tick line.
+ * @param [params.tickMargin=0] - The margin between the tick line and the tick text.
+ * @returns The calculated width of the Y-axis.
+ */
+var getCalculatedYAxisWidth = _ref => {
+  var ticks = _ref.ticks,
+    label = _ref.label,
+    _ref$labelGapWithTick = _ref.labelGapWithTick,
+    labelGapWithTick = _ref$labelGapWithTick === void 0 ? 5 : _ref$labelGapWithTick,
+    _ref$tickSize = _ref.tickSize,
+    tickSize = _ref$tickSize === void 0 ? 0 : _ref$tickSize,
+    _ref$tickMargin = _ref.tickMargin,
+    tickMargin = _ref$tickMargin === void 0 ? 0 : _ref$tickMargin;
+  // find the max width of the tick labels
+  var maxTickWidth = 0;
+  if (ticks) {
+    Array.from(ticks).forEach(tickNode => {
+      if (tickNode) {
+        var bbox = tickNode.getBoundingClientRect();
+        if (bbox.width > maxTickWidth) {
+          maxTickWidth = bbox.width;
+        }
+      }
+    });
+
+    // calculate width of the axis label
+    var labelWidth = label ? label.getBoundingClientRect().width : 0;
+    var tickWidth = tickSize + tickMargin;
+
+    // calculate the updated width of the y-axis
+    var updatedYAxisWidth = maxTickWidth + tickWidth + labelWidth + (label ? labelGapWithTick : 0);
+    return Math.round(updatedYAxisWidth);
+  }
+  return 0;
+};
+exports.getCalculatedYAxisWidth = getCalculatedYAxisWidth;
--- a/frontend/node_modules/recharts/lib/util/axisPropsAreEqual.js
+++ b/frontend/node_modules/recharts/lib/util/axisPropsAreEqual.js
@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.axisPropsAreEqual = axisPropsAreEqual;
+var _propsAreEqual = require("./propsAreEqual");
+var _excluded = ["domain", "range"],
+  _excluded2 = ["domain", "range"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function shortArraysAreEqual(arr1, arr2) {
+  if (arr1 === arr2) {
+    return true;
+  }
+  if (Array.isArray(arr1) && arr1.length === 2 && Array.isArray(arr2) && arr2.length === 2) {
+    return arr1[0] === arr2[0] && arr1[1] === arr2[1];
+  }
+  return false;
+}
+
+/**
+ * Usually we would not compare array props deeply for performance consideration.
+ * However, for axis props, domain is sometimes defined as a two-elements array, and range is always
+ * a two-elements array. So we can do a shallow comparison for the rest props and a shallow
+ * comparison for these two array props.
+ * @param prevProps
+ * @param nextProps
+ */
+function axisPropsAreEqual(prevProps, nextProps) {
+  if (prevProps === nextProps) {
+    return true;
+  }
+  var prevDomain = prevProps.domain,
+    prevRange = prevProps.range,
+    prevRest = _objectWithoutProperties(prevProps, _excluded);
+  var nextDomain = nextProps.domain,
+    nextRange = nextProps.range,
+    nextRest = _objectWithoutProperties(nextProps, _excluded2);
+  if (!shortArraysAreEqual(prevDomain, nextDomain)) {
+    return false;
+  }
+  if (!shortArraysAreEqual(prevRange, nextRange)) {
+    return false;
+  }
+  return (0, _propsAreEqual.propsAreEqual)(prevRest, nextRest);
+}
--- a/frontend/node_modules/recharts/lib/util/createCartesianCharts.js
+++ b/frontend/node_modules/recharts/lib/util/createCartesianCharts.js
@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createHorizontalChart = createHorizontalChart;
+exports.createVerticalChart = createVerticalChart;
+var React = _interopRequireWildcard(require("react"));
+var _AreaChart = require("../chart/AreaChart");
+var _BarChart = require("../chart/BarChart");
+var _LineChart = require("../chart/LineChart");
+var _ComposedChart = require("../chart/ComposedChart");
+var _ScatterChart = require("../chart/ScatterChart");
+var _FunnelChart = require("../chart/FunnelChart");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var createCartesianCharts = layout => ({
+  AreaChart: props => /*#__PURE__*/React.createElement(_AreaChart.AreaChart, _extends({}, props, {
+    layout: layout
+  })),
+  BarChart: props => /*#__PURE__*/React.createElement(_BarChart.BarChart, _extends({}, props, {
+    layout: layout
+  })),
+  LineChart: props => /*#__PURE__*/React.createElement(_LineChart.LineChart, _extends({}, props, {
+    layout: layout
+  })),
+  ComposedChart: props => /*#__PURE__*/React.createElement(_ComposedChart.ComposedChart, _extends({}, props, {
+    layout: layout
+  })),
+  ScatterChart: props => /*#__PURE__*/React.createElement(_ScatterChart.ScatterChart, _extends({}, props, {
+    layout: layout
+  }))
+});
+/**
+ * Creates a typed context for horizontal Cartesian charts.
+ *
+ * **Motivation:**
+ * Recharts components fall back to `any` by default. While explicit typing using Generics (e.g. `<Area<MyDataType, number>>`)
+ * works per-component, it becomes tedious and error-prone across an entire chart.
+ *
+ * This Chart Helper allows you to perfectly align your data properties and ensure all your charts, axes, and lines work in harmony.
+ * Once you define the helper with your generic requirements, all returned components strictly enforce your data structure,
+ * catching `dataKey` typos and shape errors early.
+ *
+ * **Layout Binding:**
+ * Curries the chart definition to statically bind the `layout="horizontal"` property at the component level.
+ * By stripping `layout` from the configuration options of generated wrapper components, developers avoid accidentally
+ * overriding chart alignments. Evaluates `TComponents` generics at compile-time to reject strictly vertical components
+ * natively (`Funnel`, `FunnelChart`) from being passed.
+ *
+ * @example
+ * ```tsx
+ * // 1. Lock in the Generics: Data = MyData, X-Axis = string, Y-Axis = number
+ * const TypedCharts = createHorizontalChart<MyData, string, number>()({
+ *   AreaChart,
+ *   Area,
+ *   XAxis,
+ *   YAxis,
+ * });
+ * // 2. TypedCharts.AreaChart is now strictly horizontal.
+ * // 3. TypedCharts.Area strictly expects string/number keys matching MyData.
+ * ```
+ *
+ * @since 3.8
+ * @see {@link https://recharts.github.io/en-US/guide/typescript/ Guide: Strong typing for Recharts components}
+ */
+function createHorizontalChart() {
+  return function withComponents(components) {
+    return _objectSpread(_objectSpread({}, createCartesianCharts('horizontal')), components);
+  };
+}
+
+/**
+ * Creates a typed context for vertical Cartesian charts.
+ *
+ * **Motivation:**
+ * Recharts components fall back to `any` by default. While explicit typing using Generics (e.g. `<Area<MyDataType, number>>`)
+ * works per-component, it becomes tedious and error-prone across an entire chart.
+ *
+ * This Chart Helper allows you to perfectly align your data properties and ensure all your charts, axes, and lines work in harmony.
+ * Once you define the helper with your generic requirements, all returned components strictly enforce your data structure,
+ * catching `dataKey` typos and shape errors early.
+ *
+ * **Layout Binding:**
+ * Curries the chart definition to statically bind the `layout="vertical"` property at the component level.
+ * By stripping `layout` from the configuration options of generated wrapper components, developers avoid accidentally
+ * overriding chart alignments. Natively supports strictly vertical components like `Funnel` and `FunnelChart`.
+ *
+ * @example
+ * ```tsx
+ * // 1. Lock in the Generics: Data = MyData, X-Axis = number, Y-Axis = string
+ * const TypedCharts = createVerticalChart<MyData, number, string>()({
+ *   BarChart,
+ *   Bar,
+ *   Funnel,
+ *   XAxis,
+ *   YAxis,
+ * });
+ * // 2. TypedCharts.BarChart is now strictly vertical.
+ * // 3. `Funnel` evaluates safely inside vertical contexts exclusively and enforces MyData limits.
+ * ```
+ *
+ * @since 3.8
+ * @see {@link https://recharts.github.io/en-US/guide/typescript/ Guide: Strong typing for Recharts components}
+ */
+function createVerticalChart() {
+  return function withComponents(components) {
+    return _objectSpread(_objectSpread({}, createCartesianCharts('vertical')), {}, {
+      FunnelChart: props => /*#__PURE__*/React.createElement(_FunnelChart.FunnelChart, _extends({}, props, {
+        layout: "vertical"
+      }))
+    }, components);
+  };
+}
--- a/frontend/node_modules/recharts/lib/util/createEventProxy.js
+++ b/frontend/node_modules/recharts/lib/util/createEventProxy.js
@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createEventProxy = createEventProxy;
+function createEventProxy(reactEvent) {
+  reactEvent.persist();
+  var currentTarget = reactEvent.currentTarget;
+  return new Proxy(reactEvent, {
+    get: (target, prop) => {
+      if (prop === 'currentTarget') {
+        return currentTarget;
+      }
+      var value = Reflect.get(target, prop);
+      if (typeof value === 'function') {
+        return value.bind(target);
+      }
+      return value;
+    }
+  });
+}
--- a/frontend/node_modules/recharts/lib/util/createPolarCharts.js
+++ b/frontend/node_modules/recharts/lib/util/createPolarCharts.js
@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createCentricChart = createCentricChart;
+exports.createRadialChart = createRadialChart;
+var React = _interopRequireWildcard(require("react"));
+var _RadialBarChart = require("../chart/RadialBarChart");
+var _RadarChart = require("../chart/RadarChart");
+var _PieChart = require("../chart/PieChart");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * Creates a typed context for centric Polar charts.
+ *
+ * **Motivation:**
+ * Recharts components fall back to `any` by default. While explicit typing using Generics works per-component,
+ * it becomes tedious and error-prone across an entire chart.
+ *
+ * This Chart Helper allows you to perfectly align your data properties and ensure all your charts and axes work in harmony.
+ * Once you define the helper with your generic requirements, all returned components strictly enforce your data structure,
+ * catching `dataKey` typos and shape errors early.
+ *
+ * **Layout Binding:**
+ * Curries chart definitions to strictly bind `layout="centric"` prop behavior statically onto components.
+ * By wrapping the chart implementations, it completely masks the `layout` prop on initialization to prevent regressions.
+ * Evaluates `TComponents` generics at compile-time to reject radial-only elements natively (`RadialBar`, `Pie`, etc.)
+ *
+ * @example
+ * ```tsx
+ * // 1. Lock in the Generics: Data = MyData
+ * const TypedCentric = createCentricChart<MyData, string, number>()({
+ *   RadarChart,
+ *   Radar,
+ * });
+ * // 2. `layout` is permanently bound to "centric".
+ * // 3. Passing `Pie` or `RadialBar` into the components map will explicitly trigger a TS error.
+ * ```
+ *
+ * @since 3.8
+ * @see {@link https://recharts.github.io/en-US/guide/typescript/ Guide: Strong typing for Recharts components}
+ */
+function createCentricChart() {
+  return function withComponents(components) {
+    return _objectSpread({
+      RadarChart: props => /*#__PURE__*/React.createElement(_RadarChart.RadarChart, _extends({}, props, {
+        layout: "centric"
+      }))
+    }, components);
+  };
+}
+
+/**
+ * Creates a typed context for radial Polar charts.
+ *
+ * **Motivation:**
+ * Recharts components fall back to `any` by default. While explicit typing using Generics works per-component,
+ * it becomes tedious and error-prone across an entire chart.
+ *
+ * This Chart Helper allows you to perfectly align your data properties and ensure all your charts and layers work in harmony.
+ * Once you define the helper with your generic requirements, all returned components strictly enforce your data structure,
+ * catching `dataKey` typos and shape errors early.
+ *
+ * **Layout Binding:**
+ * Curries chart definitions to strictly bind `layout="radial"` prop behavior statically onto components.
+ * By wrapping the chart implementations, it completely masks the `layout` prop on initialization to prevent runtime faults.
+ * Evaluates `TComponents` generics at compile-time to reject centric-only elements natively (`Radar`, `RadarChart`, etc.)
+ *
+ * @example
+ * ```tsx
+ * // 1. Lock in the Generics: Data = MyData
+ * const TypedRadial = createRadialChart<MyData, string, number>()({
+ *   RadialBarChart,
+ *   RadialBar,
+ * });
+ * // 2. `layout` is permanently bound to "radial".
+ * // 3. Passing `Radar` or `RadarChart` into the components map will explicitly trigger a TS error.
+ * ```
+ *
+ * @since 3.8
+ * @see {@link https://recharts.github.io/en-US/guide/typescript/ Guide: Strong typing for Recharts components}
+ */
+function createRadialChart() {
+  return function withComponents(components) {
+    return _objectSpread({
+      RadialBarChart: props => /*#__PURE__*/React.createElement(_RadialBarChart.RadialBarChart, _extends({}, props, {
+        layout: "radial"
+      })),
+      PieChart: props => /*#__PURE__*/React.createElement(_PieChart.PieChart, _extends({}, props, {
+        layout: "radial"
+      }))
+    }, components);
+  };
+}
--- a/frontend/node_modules/recharts/lib/util/cursor/getCursorPoints.js
+++ b/frontend/node_modules/recharts/lib/util/cursor/getCursorPoints.js
@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCursorPoints = getCursorPoints;
+var _PolarUtils = require("../PolarUtils");
+var _types = require("../types");
+var _getRadialCursorPoints = require("./getRadialCursorPoints");
+function getCursorPoints(layout, activeCoordinate, offset) {
+  if (layout === 'horizontal') {
+    return [{
+      x: activeCoordinate.x,
+      y: offset.top
+    }, {
+      x: activeCoordinate.x,
+      y: offset.top + offset.height
+    }];
+  }
+  if (layout === 'vertical') {
+    return [{
+      x: offset.left,
+      y: activeCoordinate.y
+    }, {
+      x: offset.left + offset.width,
+      y: activeCoordinate.y
+    }];
+  }
+  if ((0, _types.isPolarCoordinate)(activeCoordinate)) {
+    if (layout === 'centric') {
+      var cx = activeCoordinate.cx,
+        cy = activeCoordinate.cy,
+        innerRadius = activeCoordinate.innerRadius,
+        outerRadius = activeCoordinate.outerRadius,
+        angle = activeCoordinate.angle;
+      var innerPoint = (0, _PolarUtils.polarToCartesian)(cx, cy, innerRadius, angle);
+      var outerPoint = (0, _PolarUtils.polarToCartesian)(cx, cy, outerRadius, angle);
+      return [{
+        x: innerPoint.x,
+        y: innerPoint.y
+      }, {
+        x: outerPoint.x,
+        y: outerPoint.y
+      }];
+    }
+    return (0, _getRadialCursorPoints.getRadialCursorPoints)(activeCoordinate);
+  }
+  return undefined;
+}
--- a/frontend/node_modules/recharts/lib/util/cursor/getCursorRectangle.js
+++ b/frontend/node_modules/recharts/lib/util/cursor/getCursorRectangle.js
@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCursorRectangle = getCursorRectangle;
+function getCursorRectangle(layout, activeCoordinate, offset, tooltipAxisBandSize) {
+  var halfSize = tooltipAxisBandSize / 2;
+  return {
+    stroke: 'none',
+    fill: '#ccc',
+    x: layout === 'horizontal' ? activeCoordinate.x - halfSize : offset.left + 0.5,
+    y: layout === 'horizontal' ? offset.top + 0.5 : activeCoordinate.y - halfSize,
+    width: layout === 'horizontal' ? tooltipAxisBandSize : offset.width - 1,
+    height: layout === 'horizontal' ? offset.height - 1 : tooltipAxisBandSize
+  };
+}
--- a/frontend/node_modules/recharts/lib/util/cursor/getRadialCursorPoints.js
+++ b/frontend/node_modules/recharts/lib/util/cursor/getRadialCursorPoints.js
@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRadialCursorPoints = getRadialCursorPoints;
+var _PolarUtils = require("../PolarUtils");
+/**
+ * Only applicable for radial layouts
+ * @param {Object} activeCoordinate ChartCoordinate
+ * @returns {Object} RadialCursorPoints
+ */
+function getRadialCursorPoints(activeCoordinate) {
+  var cx = activeCoordinate.cx,
+    cy = activeCoordinate.cy,
+    radius = activeCoordinate.radius,
+    startAngle = activeCoordinate.startAngle,
+    endAngle = activeCoordinate.endAngle;
+  var startPoint = (0, _PolarUtils.polarToCartesian)(cx, cy, radius, startAngle);
+  var endPoint = (0, _PolarUtils.polarToCartesian)(cx, cy, radius, endAngle);
+  return {
+    points: [startPoint, endPoint],
+    cx,
+    cy,
+    radius,
+    startAngle,
+    endAngle
+  };
+}
--- a/frontend/node_modules/recharts/lib/util/excludeEventProps.js
+++ b/frontend/node_modules/recharts/lib/util/excludeEventProps.js
@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isEventKey = isEventKey;
+var EventKeys = ['dangerouslySetInnerHTML', 'onCopy', 'onCopyCapture', 'onCut', 'onCutCapture', 'onPaste', 'onPasteCapture', 'onCompositionEnd', 'onCompositionEndCapture', 'onCompositionStart', 'onCompositionStartCapture', 'onCompositionUpdate', 'onCompositionUpdateCapture', 'onFocus', 'onFocusCapture', 'onBlur', 'onBlurCapture', 'onChange', 'onChangeCapture', 'onBeforeInput', 'onBeforeInputCapture', 'onInput', 'onInputCapture', 'onReset', 'onResetCapture', 'onSubmit', 'onSubmitCapture', 'onInvalid', 'onInvalidCapture', 'onLoad', 'onLoadCapture', 'onError', 'onErrorCapture', 'onKeyDown', 'onKeyDownCapture', 'onKeyPress', 'onKeyPressCapture', 'onKeyUp', 'onKeyUpCapture', 'onAbort', 'onAbortCapture', 'onCanPlay', 'onCanPlayCapture', 'onCanPlayThrough', 'onCanPlayThroughCapture', 'onDurationChange', 'onDurationChangeCapture', 'onEmptied', 'onEmptiedCapture', 'onEncrypted', 'onEncryptedCapture', 'onEnded', 'onEndedCapture', 'onLoadedData', 'onLoadedDataCapture', 'onLoadedMetadata', 'onLoadedMetadataCapture', 'onLoadStart', 'onLoadStartCapture', 'onPause', 'onPauseCapture', 'onPlay', 'onPlayCapture', 'onPlaying', 'onPlayingCapture', 'onProgress', 'onProgressCapture', 'onRateChange', 'onRateChangeCapture', 'onSeeked', 'onSeekedCapture', 'onSeeking', 'onSeekingCapture', 'onStalled', 'onStalledCapture', 'onSuspend', 'onSuspendCapture', 'onTimeUpdate', 'onTimeUpdateCapture', 'onVolumeChange', 'onVolumeChangeCapture', 'onWaiting', 'onWaitingCapture', 'onAuxClick', 'onAuxClickCapture', 'onClick', 'onClickCapture', 'onContextMenu', 'onContextMenuCapture', 'onDoubleClick', 'onDoubleClickCapture', 'onDrag', 'onDragCapture', 'onDragEnd', 'onDragEndCapture', 'onDragEnter', 'onDragEnterCapture', 'onDragExit', 'onDragExitCapture', 'onDragLeave', 'onDragLeaveCapture', 'onDragOver', 'onDragOverCapture', 'onDragStart', 'onDragStartCapture', 'onDrop', 'onDropCapture', 'onMouseDown', 'onMouseDownCapture', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseMoveCapture', 'onMouseOut', 'onMouseOutCapture', 'onMouseOver', 'onMouseOverCapture', 'onMouseUp', 'onMouseUpCapture', 'onSelect', 'onSelectCapture', 'onTouchCancel', 'onTouchCancelCapture', 'onTouchEnd', 'onTouchEndCapture', 'onTouchMove', 'onTouchMoveCapture', 'onTouchStart', 'onTouchStartCapture', 'onPointerDown', 'onPointerDownCapture', 'onPointerMove', 'onPointerMoveCapture', 'onPointerUp', 'onPointerUpCapture', 'onPointerCancel', 'onPointerCancelCapture', 'onPointerEnter', 'onPointerEnterCapture', 'onPointerLeave', 'onPointerLeaveCapture', 'onPointerOver', 'onPointerOverCapture', 'onPointerOut', 'onPointerOutCapture', 'onGotPointerCapture', 'onGotPointerCaptureCapture', 'onLostPointerCapture', 'onLostPointerCaptureCapture', 'onScroll', 'onScrollCapture', 'onWheel', 'onWheelCapture', 'onAnimationStart', 'onAnimationStartCapture', 'onAnimationEnd', 'onAnimationEndCapture', 'onAnimationIteration', 'onAnimationIterationCapture', 'onTransitionEnd', 'onTransitionEndCapture'];
+function isEventKey(key) {
+  if (typeof key !== 'string') {
+    return false;
+  }
+  var allowedEventKeys = EventKeys;
+  return allowedEventKeys.includes(key);
+}
--- a/frontend/node_modules/recharts/lib/util/getActiveCoordinate.js
+++ b/frontend/node_modules/recharts/lib/util/getActiveCoordinate.js
@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getActivePolarCoordinate = exports.getActiveCartesianCoordinate = exports.calculateActiveTickIndex = void 0;
+exports.isInCartesianRange = isInCartesianRange;
+var _PolarUtils = require("./PolarUtils");
+var _DataUtils = require("./DataUtils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var getActiveCartesianCoordinate = (layout, tooltipTicks, activeIndex, pointer) => {
+  var entry = tooltipTicks.find(tick => tick && tick.index === activeIndex);
+  if (entry) {
+    if (layout === 'horizontal') {
+      return {
+        x: entry.coordinate,
+        y: pointer.relativeY
+      };
+    }
+    if (layout === 'vertical') {
+      return {
+        x: pointer.relativeX,
+        y: entry.coordinate
+      };
+    }
+  }
+  return {
+    x: 0,
+    y: 0
+  };
+};
+
+/**
+ * Get the active coordinate in polar coordinate system.
+ * Internally we only really use x and y, but this returned object is part of public API
+ * (because it goes straight to the tooltip content) so we keep all the other properties
+ * for backwards compatibility.
+ *
+ * @param layout - The polar layout type ('centric' or 'radial').
+ * @param tooltipTicks - Array of tick items used for tooltips.
+ * @param activeIndex - The index of the active tick.
+ * @param rangeObj - The range object containing polar chart properties.
+ * @returns The active coordinate object with polar properties.
+ */
+exports.getActiveCartesianCoordinate = getActiveCartesianCoordinate;
+var getActivePolarCoordinate = (layout, tooltipTicks, activeIndex, rangeObj) => {
+  var entry = tooltipTicks.find(tick => tick && tick.index === activeIndex);
+  if (entry) {
+    if (layout === 'centric') {
+      var _angle = entry.coordinate;
+      var _radius = rangeObj.radius;
+      return _objectSpread(_objectSpread(_objectSpread({}, rangeObj), (0, _PolarUtils.polarToCartesian)(rangeObj.cx, rangeObj.cy, _radius, _angle)), {}, {
+        angle: _angle,
+        radius: _radius
+      });
+    }
+    var radius = entry.coordinate;
+    var angle = rangeObj.angle;
+    return _objectSpread(_objectSpread(_objectSpread({}, rangeObj), (0, _PolarUtils.polarToCartesian)(rangeObj.cx, rangeObj.cy, radius, angle)), {}, {
+      angle,
+      radius
+    });
+  }
+  return {
+    angle: 0,
+    clockWise: false,
+    cx: 0,
+    cy: 0,
+    endAngle: 0,
+    innerRadius: 0,
+    outerRadius: 0,
+    radius: 0,
+    startAngle: 0,
+    x: 0,
+    y: 0
+  };
+};
+exports.getActivePolarCoordinate = getActivePolarCoordinate;
+function isInCartesianRange(pointer, offset) {
+  var x = pointer.relativeX,
+    y = pointer.relativeY;
+  return x >= offset.left && x <= offset.left + offset.width && y >= offset.top && y <= offset.top + offset.height;
+}
+var calculateActiveTickIndex = (coordinate, ticks, unsortedTicks, axisType, range) => {
+  var _ticks$length;
+  var len = (_ticks$length = ticks === null || ticks === void 0 ? void 0 : ticks.length) !== null && _ticks$length !== void 0 ? _ticks$length : 0;
+
+  // if there are 1 or fewer ticks or if there is no coordinate then the active tick is at index 0
+  if (len <= 1 || coordinate == null) {
+    return 0;
+  }
+  if (axisType === 'angleAxis' && range != null && Math.abs(Math.abs(range[1] - range[0]) - 360) <= 1e-6) {
+    // ticks are distributed in a circle
+    for (var i = 0; i < len; i++) {
+      var _unsortedTicks, _unsortedTicks2, _unsortedTicks$i, _unsortedTicks$, _unsortedTicks3;
+      var before = i > 0 ? (_unsortedTicks = unsortedTicks[i - 1]) === null || _unsortedTicks === void 0 ? void 0 : _unsortedTicks.coordinate : (_unsortedTicks2 = unsortedTicks[len - 1]) === null || _unsortedTicks2 === void 0 ? void 0 : _unsortedTicks2.coordinate;
+      var cur = (_unsortedTicks$i = unsortedTicks[i]) === null || _unsortedTicks$i === void 0 ? void 0 : _unsortedTicks$i.coordinate;
+      var after = i >= len - 1 ? (_unsortedTicks$ = unsortedTicks[0]) === null || _unsortedTicks$ === void 0 ? void 0 : _unsortedTicks$.coordinate : (_unsortedTicks3 = unsortedTicks[i + 1]) === null || _unsortedTicks3 === void 0 ? void 0 : _unsortedTicks3.coordinate;
+      var sameDirectionCoord = void 0;
+      if (before == null || cur == null || after == null) {
+        continue;
+      }
+      if ((0, _DataUtils.mathSign)(cur - before) !== (0, _DataUtils.mathSign)(after - cur)) {
+        var diffInterval = [];
+        if ((0, _DataUtils.mathSign)(after - cur) === (0, _DataUtils.mathSign)(range[1] - range[0])) {
+          sameDirectionCoord = after;
+          var curInRange = cur + range[1] - range[0];
+          diffInterval[0] = Math.min(curInRange, (curInRange + before) / 2);
+          diffInterval[1] = Math.max(curInRange, (curInRange + before) / 2);
+        } else {
+          sameDirectionCoord = before;
+          var afterInRange = after + range[1] - range[0];
+          diffInterval[0] = Math.min(cur, (afterInRange + cur) / 2);
+          diffInterval[1] = Math.max(cur, (afterInRange + cur) / 2);
+        }
+        var sameInterval = [Math.min(cur, (sameDirectionCoord + cur) / 2), Math.max(cur, (sameDirectionCoord + cur) / 2)];
+        if (coordinate > sameInterval[0] && coordinate <= sameInterval[1] || coordinate >= diffInterval[0] && coordinate <= diffInterval[1]) {
+          var _unsortedTicks$i2;
+          return (_unsortedTicks$i2 = unsortedTicks[i]) === null || _unsortedTicks$i2 === void 0 ? void 0 : _unsortedTicks$i2.index;
+        }
+      } else {
+        var minValue = Math.min(before, after);
+        var maxValue = Math.max(before, after);
+        if (coordinate > (minValue + cur) / 2 && coordinate <= (maxValue + cur) / 2) {
+          var _unsortedTicks$i3;
+          return (_unsortedTicks$i3 = unsortedTicks[i]) === null || _unsortedTicks$i3 === void 0 ? void 0 : _unsortedTicks$i3.index;
+        }
+      }
+    }
+  } else if (ticks) {
+    // ticks are distributed in a single direction
+    for (var _i = 0; _i < len; _i++) {
+      var curr = ticks[_i];
+      if (curr == null) {
+        continue;
+      }
+      var next = ticks[_i + 1];
+      var prev = ticks[_i - 1];
+      if (_i === 0 && next != null && coordinate <= (curr.coordinate + next.coordinate) / 2) {
+        return curr.index;
+      }
+      if (_i === len - 1 && prev != null && coordinate > (curr.coordinate + prev.coordinate) / 2) {
+        return curr.index;
+      }
+      if (_i > 0 && _i < len - 1 && prev != null && next != null && coordinate > (curr.coordinate + prev.coordinate) / 2 && coordinate <= (curr.coordinate + next.coordinate) / 2) {
+        return curr.index;
+      }
+    }
+  }
+  return -1;
+};
+exports.calculateActiveTickIndex = calculateActiveTickIndex;
--- a/frontend/node_modules/recharts/lib/util/getAxisTypeBasedOnLayout.js
+++ b/frontend/node_modules/recharts/lib/util/getAxisTypeBasedOnLayout.js
@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAxisTypeBasedOnLayout = getAxisTypeBasedOnLayout;
+var _ChartUtils = require("./ChartUtils");
+/**
+ * This function evaluates the "auto" axis domain type based on the chart layout and axis type.
+ * It outputs a definitive axis domain type that can be used for further processing.
+ */
+function getAxisTypeBasedOnLayout(layout, axisType, axisDomainType) {
+  if (axisDomainType !== 'auto') {
+    return axisDomainType;
+  }
+  if (layout == null) {
+    return undefined;
+  }
+  return (0, _ChartUtils.isCategoricalAxis)(layout, axisType) ? 'category' : 'number';
+}
--- a/frontend/node_modules/recharts/lib/util/getClassNameFromUnknown.js
+++ b/frontend/node_modules/recharts/lib/util/getClassNameFromUnknown.js
@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getClassNameFromUnknown = getClassNameFromUnknown;
+function getClassNameFromUnknown(u) {
+  if (u && typeof u === 'object' && 'className' in u && typeof u.className === 'string') {
+    return u.className;
+  }
+  return '';
+}
--- a/frontend/node_modules/recharts/lib/util/getEveryNth.js
+++ b/frontend/node_modules/recharts/lib/util/getEveryNth.js
@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getEveryNth = getEveryNth;
+/**
+ * Given an array and a number N, return a new array which contains every nTh
+ * element of the input array. For n below 1, an empty array is returned.
+ * For n equal to 1, the input array is returned as is.
+ * For n greater than the length of the array, an array containing the first element
+ * and every nTh element after that (if any) is returned.
+ *
+ * @param array An input array.
+ * @param n A number specifying which elements to take.
+ * @returns The result array of the same type as the input array.
+ */
+function getEveryNth(array, n) {
+  if (n < 1) {
+    return [];
+  }
+  if (n === 1) {
+    return array;
+  }
+  var result = [];
+  for (var i = 0; i < array.length; i += n) {
+    var item = array[i];
+    if (item !== undefined) {
+      result.push(item);
+    }
+  }
+  return result;
+}
--- a/frontend/node_modules/recharts/lib/util/getRadiusAndStrokeWidthFromDot.js
+++ b/frontend/node_modules/recharts/lib/util/getRadiusAndStrokeWidthFromDot.js
@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRadiusAndStrokeWidthFromDot = getRadiusAndStrokeWidthFromDot;
+var _svgPropertiesNoEvents = require("./svgPropertiesNoEvents");
+function getRadiusAndStrokeWidthFromDot(dot) {
+  var props = (0, _svgPropertiesNoEvents.svgPropertiesNoEventsFromUnknown)(dot);
+  var defaultR = 3;
+  var defaultStrokeWidth = 2;
+  if (props != null) {
+    var r = props.r,
+      strokeWidth = props.strokeWidth;
+    var realR = Number(r);
+    var realStrokeWidth = Number(strokeWidth);
+    if (Number.isNaN(realR) || realR < 0) {
+      realR = defaultR;
+    }
+    if (Number.isNaN(realStrokeWidth) || realStrokeWidth < 0) {
+      realStrokeWidth = defaultStrokeWidth;
+    }
+    return {
+      r: realR,
+      strokeWidth: realStrokeWidth
+    };
+  }
+  return {
+    r: defaultR,
+    strokeWidth: defaultStrokeWidth
+  };
+}
--- a/frontend/node_modules/recharts/lib/util/getRelativeCoordinate.js
+++ b/frontend/node_modules/recharts/lib/util/getRelativeCoordinate.js
@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRelativeCoordinate = getRelativeCoordinate;
+/**
+ * Type guard to check if the pointer event is from an SVG element.
+ */
+function isSvgPointer(pointer) {
+  return 'getBBox' in pointer.currentTarget && typeof pointer.currentTarget.getBBox === 'function';
+}
+
+/**
+ * Computes relative element coordinates from mouse or touch event.
+ *
+ * The output coordinates are relative to the top-left corner of the active element (= currentTarget),
+ * where the top-left corner is (0, 0).
+ * Moving right, the x-coordinate increases, and moving down, the y-coordinate increases.
+ *
+ * The coordinates are rounded to the nearest integer and account for CSS transform scale.
+ * So element that's scaled will return the same coordinates as element that's not scaled.
+ *
+ * In other words: you zoom in or out, numbers stay the same.
+ *
+ * This function works with both HTML elements and SVG elements.
+ *
+ * It works with both Mouse and Touch events.
+ * For Touch events, it returns an array of coordinates, one for each touch point.
+ * For Mouse events, it returns a single coordinate object.
+ *
+ * @example
+ * ```tsx
+ * // In an HTML element event handler. Legend passes the native event as the 3rd argument.
+ * <Legend onMouseMove={(_data, _i, e) => {
+ *   // These coordinates are relative to the top-left corner of the Legend element
+ *   const { relativeX, relativeY } = getRelativeCoordinate(e);
+ *   console.log(`Mouse at Legend position: (${relativeX}, ${relativeY})`);
+ * }}>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // In an SVG element event handler. Area is an SVG element, and passes the event as second argument.
+ * <Area onMouseMove={(_, e) => {
+ *   const { relativeX, relativeY } = getRelativeCoordinate(e);
+ *   console.log(`Mouse at Area position: (${relativeX}, ${relativeY})`);
+ *   // Here you can call usePlotArea to convert to chart coordinates
+ * }}>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // In a chart root touch handler. Chart root passes the event as second argument.
+ * <LineChart onTouchMove={(_, e) => {
+ *   const touchPoints = getRelativeCoordinate(e);
+ *   touchPoints.forEach(({ relativeX, relativeY }, index) => {
+ *     console.log(`Touch point ${index} at LineChart position: (${relativeX}, ${relativeY})`);
+ *   });
+ * }}>
+ * ```
+ *
+ * @since 3.8
+ * @param event The mouse or touch event from React event handlers (works with both HTML and SVG elements)
+ * @returns Coordinates relative to the top-left corner of the element. Single object for Mouse events, array of objects for Touch events.
+ */
+
+function getRelativeCoordinate(event) {
+  var rect = event.currentTarget.getBoundingClientRect();
+  var scaleX, scaleY;
+  if (isSvgPointer(event)) {
+    // For SVG elements, use getBBox() to get the intrinsic size in SVG coordinates
+    var bbox = event.currentTarget.getBBox();
+    scaleX = bbox.width > 0 ? rect.width / bbox.width : 1;
+    scaleY = bbox.height > 0 ? rect.height / bbox.height : 1;
+  } else {
+    // For HTML elements, use offsetWidth/offsetHeight
+    var element = event.currentTarget;
+    scaleX = element.offsetWidth > 0 ? rect.width / element.offsetWidth : 1;
+    scaleY = element.offsetHeight > 0 ? rect.height / element.offsetHeight : 1;
+  }
+  var getCoordinates = (clientX, clientY) => ({
+    /*
+     * Here it's important to use:
+     * - event.clientX and event.clientY to get the mouse position relative to the viewport, including scroll.
+     * - pageX and pageY are not used because they are relative to the whole document, and ignore scroll.
+     * - rect.left and rect.top are used to get the position of the chart relative to the viewport.
+     * - offsetX and offsetY are not used because they are relative to the offset parent
+     *  which may or may not be the same as the clientX and clientY, depending on the position of the chart in the DOM
+     *  and surrounding element styles. CSS position: relative, absolute, fixed, will change the offset parent.
+     * - scaleX and scaleY are necessary for when the chart element is scaled using CSS `transform: scale(N)`.
+     */
+    relativeX: Math.round((clientX - rect.left) / scaleX),
+    relativeY: Math.round((clientY - rect.top) / scaleY)
+  });
+  if ('touches' in event) {
+    return Array.from(event.touches).map(touch => getCoordinates(touch.clientX, touch.clientY));
+  }
+  return getCoordinates(event.clientX, event.clientY);
+}
--- a/frontend/node_modules/recharts/lib/util/getSliced.js
+++ b/frontend/node_modules/recharts/lib/util/getSliced.js
@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSliced = getSliced;
+function getSliced(arr, startIndex, endIndex) {
+  if (!Array.isArray(arr)) {
+    return arr;
+  }
+  if (arr && startIndex + endIndex !== 0) {
+    return arr.slice(startIndex, endIndex + 1);
+  }
+  return arr;
+}
--- a/frontend/node_modules/recharts/lib/util/isDomainSpecifiedByUser.js
+++ b/frontend/node_modules/recharts/lib/util/isDomainSpecifiedByUser.js
@ -0,0 +1,198 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extendDomain = extendDomain;
+exports.isWellFormedNumberDomain = isWellFormedNumberDomain;
+exports.numericalDomainSpecifiedWithoutRequiringData = numericalDomainSpecifiedWithoutRequiringData;
+exports.parseNumericalUserDomain = parseNumericalUserDomain;
+var _ChartUtils = require("./ChartUtils");
+var _DataUtils = require("./DataUtils");
+var _isWellBehavedNumber = require("./isWellBehavedNumber");
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { 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 _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function isWellFormedNumberDomain(v) {
+  if (Array.isArray(v) && v.length === 2) {
+    var _v = _slicedToArray(v, 2),
+      min = _v[0],
+      max = _v[1];
+    if ((0, _isWellBehavedNumber.isWellBehavedNumber)(min) && (0, _isWellBehavedNumber.isWellBehavedNumber)(max)) {
+      return true;
+    }
+  }
+  return false;
+}
+function extendDomain(providedDomain, boundaryDomain, allowDataOverflow) {
+  if (allowDataOverflow) {
+    // If the data are allowed to overflow - we're fine with whatever user provided
+    return providedDomain;
+  }
+  /*
+   * If the data are not allowed to overflow - we need to extend the domain.
+   * Means that effectively the user is allowed to make the domain larger
+   * but not smaller.
+   */
+  return [Math.min(providedDomain[0], boundaryDomain[0]), Math.max(providedDomain[1], boundaryDomain[1])];
+}
+
+/**
+ * So Recharts allows users to provide their own domains,
+ * but it also places some expectations on what the domain is.
+ * We can improve on the typescript typing, but we also need a runtime test
+ to observe that the user-provided domain is well-formed,
+ * that is: an array with exactly two numbers.
+ *
+ * This function does not accept data as an argument.
+ * This is to enable a performance optimization - if the domain is there,
+ * and we know what it is without traversing all the data,
+ * then we don't have to traverse all the data!
+ *
+ * If the user-provided domain is not well-formed,
+ * this function will return undefined - in which case we should traverse the data to calculate the real domain.
+ *
+ * This function is for parsing the numerical domain only.
+ *
+ * @param userDomain external prop, user provided, before validation. Can have various shapes: array, function, special magical strings inside too.
+ * @param allowDataOverflow boolean, provided by users. If true then the data domain wins
+ *
+ * @return [min, max] domain if it's well-formed; undefined if the domain is invalid
+ */
+function numericalDomainSpecifiedWithoutRequiringData(userDomain, allowDataOverflow) {
+  if (!allowDataOverflow) {
+    // Cannot compute data overflow if the data is not provided
+    return undefined;
+  }
+  if (typeof userDomain === 'function') {
+    // The user function expects the data to be provided as an argument
+    return undefined;
+  }
+  if (Array.isArray(userDomain) && userDomain.length === 2) {
+    var _userDomain = _slicedToArray(userDomain, 2),
+      providedMin = _userDomain[0],
+      providedMax = _userDomain[1];
+    var finalMin, finalMax;
+    if ((0, _isWellBehavedNumber.isWellBehavedNumber)(providedMin)) {
+      finalMin = providedMin;
+    } else if (typeof providedMin === 'function') {
+      // The user function expects the data to be provided as an argument
+      return undefined;
+    }
+    if ((0, _isWellBehavedNumber.isWellBehavedNumber)(providedMax)) {
+      finalMax = providedMax;
+    } else if (typeof providedMax === 'function') {
+      // The user function expects the data to be provided as an argument
+      return undefined;
+    }
+    var candidate = [finalMin, finalMax];
+    if (isWellFormedNumberDomain(candidate)) {
+      return candidate;
+    }
+  }
+  return undefined;
+}
+
+/**
+ * So Recharts allows users to provide their own domains,
+ * but it also places some expectations on what the domain is.
+ * We can improve on the typescript typing, but we also need a runtime test
+ * to observe that the user-provided domain is well-formed,
+ * that is: an array with exactly two numbers.
+ * If the user-provided domain is not well-formed,
+ * this function will return undefined - in which case we should traverse the data to calculate the real domain.
+ *
+ * This function is for parsing the numerical domain only.
+ *
+ * You are probably thinking, why does domain need tick count?
+ * Well it adjusts the domain based on where the "nice ticks" land, and nice ticks depend on the tick count.
+ *
+ * @param userDomain external prop, user provided, before validation. Can have various shapes: array, function, special magical strings inside too.
+ * @param dataDomain calculated from data. Can be undefined, as an option for performance optimization
+ * @param allowDataOverflow provided by users. If true then the data domain wins
+ *
+ * @return [min, max] domain if it's well-formed; undefined if the domain is invalid
+ */
+function parseNumericalUserDomain(userDomain, dataDomain, allowDataOverflow) {
+  if (!allowDataOverflow && dataDomain == null) {
+    // Cannot compute data overflow if the data is not provided
+    return undefined;
+  }
+  if (typeof userDomain === 'function' && dataDomain != null) {
+    try {
+      var result = userDomain(dataDomain, allowDataOverflow);
+      if (isWellFormedNumberDomain(result)) {
+        return extendDomain(result, dataDomain, allowDataOverflow);
+      }
+    } catch (_unused) {
+      /* ignore the exception and compute domain from data later */
+    }
+  }
+  if (Array.isArray(userDomain) && userDomain.length === 2) {
+    var _userDomain2 = _slicedToArray(userDomain, 2),
+      providedMin = _userDomain2[0],
+      providedMax = _userDomain2[1];
+    var finalMin, finalMax;
+    if (providedMin === 'auto') {
+      if (dataDomain != null) {
+        finalMin = Math.min(...dataDomain);
+      }
+    } else if ((0, _DataUtils.isNumber)(providedMin)) {
+      finalMin = providedMin;
+    } else if (typeof providedMin === 'function') {
+      try {
+        if (dataDomain != null) {
+          finalMin = providedMin(dataDomain === null || dataDomain === void 0 ? void 0 : dataDomain[0]);
+        }
+      } catch (_unused2) {
+        /* ignore the exception and compute domain from data later */
+      }
+    } else if (typeof providedMin === 'string' && _ChartUtils.MIN_VALUE_REG.test(providedMin)) {
+      var match = _ChartUtils.MIN_VALUE_REG.exec(providedMin);
+      if (match == null || match[1] == null || dataDomain == null) {
+        finalMin = undefined;
+      } else {
+        var value = +match[1];
+        finalMin = dataDomain[0] - value;
+      }
+    } else {
+      finalMin = dataDomain === null || dataDomain === void 0 ? void 0 : dataDomain[0];
+    }
+    if (providedMax === 'auto') {
+      if (dataDomain != null) {
+        finalMax = Math.max(...dataDomain);
+      }
+    } else if ((0, _DataUtils.isNumber)(providedMax)) {
+      finalMax = providedMax;
+    } else if (typeof providedMax === 'function') {
+      try {
+        if (dataDomain != null) {
+          finalMax = providedMax(dataDomain === null || dataDomain === void 0 ? void 0 : dataDomain[1]);
+        }
+      } catch (_unused3) {
+        /* ignore the exception and compute domain from data later */
+      }
+    } else if (typeof providedMax === 'string' && _ChartUtils.MAX_VALUE_REG.test(providedMax)) {
+      var _match = _ChartUtils.MAX_VALUE_REG.exec(providedMax);
+      if (_match == null || _match[1] == null || dataDomain == null) {
+        finalMax = undefined;
+      } else {
+        var _value = +_match[1];
+        finalMax = dataDomain[1] + _value;
+      }
+    } else {
+      finalMax = dataDomain === null || dataDomain === void 0 ? void 0 : dataDomain[1];
+    }
+    var candidate = [finalMin, finalMax];
+    if (isWellFormedNumberDomain(candidate)) {
+      if (dataDomain == null) {
+        return candidate;
+      }
+      return extendDomain(candidate, dataDomain, allowDataOverflow);
+    }
+  }
+  return undefined;
+}
--- a/frontend/node_modules/recharts/lib/util/isWellBehavedNumber.js
+++ b/frontend/node_modules/recharts/lib/util/isWellBehavedNumber.js
@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isPositiveNumber = isPositiveNumber;
+exports.isWellBehavedNumber = isWellBehavedNumber;
+function isWellBehavedNumber(n) {
+  return Number.isFinite(n);
+}
+function isPositiveNumber(n) {
+  return typeof n === 'number' && n > 0 && Number.isFinite(n);
+}
--- a/frontend/node_modules/recharts/lib/util/payload/getUniqPayload.js
+++ b/frontend/node_modules/recharts/lib/util/payload/getUniqPayload.js
@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getUniqPayload = getUniqPayload;
+var _uniqBy = _interopRequireDefault(require("es-toolkit/compat/uniqBy"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * This is configuration option that decides how to filter for unique values only:
+ *
+ * - `false` means "no filter"
+ * - `true` means "use recharts default filter"
+ * - function means "use return of this function as the default key"
+ */
+
+function getUniqPayload(payload, option, defaultUniqBy) {
+  if (option === true) {
+    return (0, _uniqBy.default)(payload, defaultUniqBy);
+  }
+  if (typeof option === 'function') {
+    return (0, _uniqBy.default)(payload, option);
+  }
+  return payload;
+}
--- a/frontend/node_modules/recharts/lib/util/propsAreEqual.js
+++ b/frontend/node_modules/recharts/lib/util/propsAreEqual.js
@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propsAreEqual = propsAreEqual;
+var _reactRedux = require("react-redux");
+var propsToShallowCompare = new Set(['axisLine', 'tickLine', 'activeBar', 'activeDot', 'activeLabel', 'activeShape', 'allowEscapeViewBox', 'background', 'cursor', 'dot', 'label', 'line', 'margin', 'padding', 'position', 'shape', 'style', 'tick', 'wrapperStyle',
+// radius can be an array of 4 numbers, easy to compare shallowly
+'radius', 'throttledEvents']);
+
+/**
+ * When comparing two values, returns true if they are the same value or
+ * are both NaN.
+ *
+ * If we used just a simple triple equals, we would get false negatives for two NaNs
+ * which could cause extra re-renders so let's have this instead.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Equality_comparisons_and_sameness#same-value-zero_equality
+ *
+ * @param x first value to compare
+ * @param y second value to compare
+ * return true if the same, false if different
+ */
+function sameValueZero(x, y) {
+  if (x == null && y == null) {
+    /*
+     * treat null and undefined as equal. Internally in Recharts we make no difference between these two
+     * so there is no need to re-render.
+     */
+    return true;
+  }
+  if (typeof x === 'number' && typeof y === 'number') {
+    // x and y are equal (this is true for -0 and 0) or they are both NaN
+    // eslint-disable-next-line no-self-compare
+    return x === y || x !== x && y !== y;
+  }
+  return x === y;
+}
+
+/**
+ * So usually React would compare only the first level of props using Object.is.
+ * However, in our case many props are objects or arrays, and our own docs recommend to do that!
+ * Therefore, we need a custom comparison function that does a shallow comparison of each prop value.
+ *
+ * Because charts can and do receive large props (typically the data array),
+ * we only limit this to a subset of known props that are likely to be objects/arrays.
+ *
+ * @param prevProps
+ * @param nextProps
+ */
+function propsAreEqual(prevProps, nextProps) {
+  var allKeys = new Set([...Object.keys(prevProps), ...Object.keys(nextProps)]);
+  for (var key of allKeys) {
+    /*
+     * If a key is on a special allowlist, go one level deeper
+     * and do a shallow comparison of the values.
+     */
+    if (propsToShallowCompare.has(key)) {
+      if (prevProps[key] == null && nextProps[key] == null) {
+        /*
+         * treat null and undefined as equal. Internally in Recharts we make no difference between these two
+         * so there is no need to re-render.
+         */
+        continue;
+      }
+      if (!(0, _reactRedux.shallowEqual)(prevProps[key], nextProps[key])) {
+        return false;
+      }
+      /*
+       * Otherwise do a simple same-value comparison (with NaN support).
+       */
+    } else if (!sameValueZero(prevProps[key], nextProps[key])) {
+      return false;
+    }
+  }
+  return true;
+}
--- a/frontend/node_modules/recharts/lib/util/resolveDefaultProps.js
+++ b/frontend/node_modules/recharts/lib/util/resolveDefaultProps.js
@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolveDefaultProps = resolveDefaultProps;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * This function mimics the behavior of the `defaultProps` static property in React.
+ * Functional components do not have a defaultProps property, so this function is useful to resolve default props.
+ *
+ * The common recommendation is to use ES6 destructuring with default values in the function signature,
+ * but you need to be careful there and make sure you destructure all the individual properties
+ * and not the whole object. See the test file for example.
+ *
+ * And because destructuring all properties one by one is a faff, and it's easy to miss one property,
+ * this function exists.
+ *
+ * @param realProps - the props object passed to the component by the user
+ * @param defaultProps - the default props object defined in the component by Recharts
+ * @returns - the props object with all the default props resolved. All `undefined` values are replaced with the default value.
+ */
+function resolveDefaultProps(realProps, defaultProps) {
+  /*
+   * To avoid mutating the original `realProps` object passed to the function, create a shallow copy of it.
+   * `resolvedProps` will be modified directly with the defaults.
+   */
+  var resolvedProps = _objectSpread({}, realProps);
+  /*
+   * Since the function guarantees `D extends Partial<T>`, this assignment is safe.
+   * It allows TypeScript to work with the well-defined `Partial<T>` type inside the loop,
+   * making subsequent type inference (especially for `dp[key]`) much more straightforward for the compiler.
+   * This is a key step to improve type safety *without* value assertions later.
+   */
+  var dp = defaultProps;
+  /*
+   * `Object.keys` doesn't preserve strong key types - it always returns Array<string>.
+   * However, due to the `D extends Partial<T>` constraint,
+   * we know these keys *must* also be valid keys of `T`.
+   * This assertion informs TypeScript of this relationship, avoiding type errors when using `key` to index `acc` (type T).
+   *
+   * Type assertions are not sound but in this case it's necessary
+   * as `Object.keys` does not do what we want it to do.
+   */
+  var keys = Object.keys(defaultProps);
+  var withDefaults = keys.reduce((acc, key) => {
+    if (acc[key] === undefined && dp[key] !== undefined) {
+      acc[key] = dp[key];
+    }
+    return acc;
+  }, resolvedProps);
+  /*
+   * And again type assertions are not safe but here we have done the runtime work
+   * so let's bypass the lack of static type safety and tell the compiler what happened.
+   */
+  return withDefaults;
+}
+
+/**
+ * Helper type to extract the keys of T that are required.
+ * It iterates through each key K in T. If Pick<T, K> cannot be assigned an empty object {},
+ * it means K is required, so we keep K; otherwise, we discard it (never).
+ * [keyof T] at the end creates a union of the kept keys.
+ */
+
+/**
+ * Helper type to extract the keys of T that are optional.
+ * It iterates through each key K in T. If Pick<T, K> can be assigned an empty object {},
+ * it means K is optional (or potentially missing), so we keep K; otherwise, we discard it (never).
+ * [keyof T] at the end creates a union of the kept keys.
+ */
+
+/**
+ * Helper type to ensure keys of D exist in T.
+ * For each key K in D, if K is also a key of T, keep the type D[K].
+ * If K is NOT a key of T, map it to type `never`.
+ * An object cannot have a property of type `never`, effectively disallowing extra keys.
+ */
+
+/**
+ * This type will take a source type `Props` and a default type `Defaults` and will return a new type
+ * where all properties that are optional in `Props` but required in `Defaults` are made required in the result.
+ * Properties that are required in `Props` and optional in `Defaults` will remain required.
+ * Properties that are optional in both `Props` and `Defaults` will remain optional.
+ *
+ * This is useful for creating a type that represents the resolved props of a component with default props.
+ */
--- a/frontend/node_modules/recharts/lib/util/round.js
+++ b/frontend/node_modules/recharts/lib/util/round.js
@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.round = round;
+exports.roundTemplateLiteral = roundTemplateLiteral;
+// if you go lower than 3, wild wild things happen during rendering
+var defaultRoundPrecision = 4;
+function round(num) {
+  var roundPrecision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultRoundPrecision;
+  var factor = 10 ** roundPrecision;
+  var rounded = Math.round(num * factor) / factor;
+  if (Object.is(rounded, -0)) {
+    return 0;
+  }
+  return rounded;
+}
+
+/**
+ * This function will accept a string template literal and for each
+ * variable placeholder, it will round the value to avoid long float numbers in
+ * the SVG path which might cause rendering issues in some browsers.
+ */
+function roundTemplateLiteral(strings) {
+  for (var _len = arguments.length, values = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    values[_key - 1] = arguments[_key];
+  }
+  return strings.reduce((result, string, i) => {
+    var value = values[i - 1];
+    if (typeof value === 'string') {
+      return result + value + string;
+    }
+    if (value !== undefined) {
+      return result + round(value) + string;
+    }
+    return result + string;
+  }, '');
+}
--- a/frontend/node_modules/recharts/lib/util/scale/CartesianScaleHelper.js
+++ b/frontend/node_modules/recharts/lib/util/scale/CartesianScaleHelper.js
@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CartesianScaleHelperImpl = void 0;
+/**
+ * Groups X and Y scale functions together and provides helper methods.
+ */
+class CartesianScaleHelperImpl {
+  constructor(_ref) {
+    var x = _ref.x,
+      y = _ref.y;
+    this.xAxisScale = x;
+    this.yAxisScale = y;
+  }
+  map(value, _ref2) {
+    var _this$xAxisScale$map, _this$yAxisScale$map;
+    var position = _ref2.position;
+    return {
+      x: (_this$xAxisScale$map = this.xAxisScale.map(value.x, {
+        position
+      })) !== null && _this$xAxisScale$map !== void 0 ? _this$xAxisScale$map : 0,
+      y: (_this$yAxisScale$map = this.yAxisScale.map(value.y, {
+        position
+      })) !== null && _this$yAxisScale$map !== void 0 ? _this$yAxisScale$map : 0
+    };
+  }
+  mapWithFallback(value, _ref3) {
+    var _this$xAxisScale$map2, _this$yAxisScale$map2;
+    var position = _ref3.position,
+      fallback = _ref3.fallback;
+    var fallbackY, fallbackX;
+    if (fallback === 'rangeMin') {
+      fallbackY = this.yAxisScale.rangeMin();
+    } else if (fallback === 'rangeMax') {
+      fallbackY = this.yAxisScale.rangeMax();
+    } else {
+      fallbackY = 0;
+    }
+    if (fallback === 'rangeMin') {
+      fallbackX = this.xAxisScale.rangeMin();
+    } else if (fallback === 'rangeMax') {
+      fallbackX = this.xAxisScale.rangeMax();
+    } else {
+      fallbackX = 0;
+    }
+    return {
+      x: (_this$xAxisScale$map2 = this.xAxisScale.map(value.x, {
+        position
+      })) !== null && _this$xAxisScale$map2 !== void 0 ? _this$xAxisScale$map2 : fallbackX,
+      y: (_this$yAxisScale$map2 = this.yAxisScale.map(value.y, {
+        position
+      })) !== null && _this$yAxisScale$map2 !== void 0 ? _this$yAxisScale$map2 : fallbackY
+    };
+  }
+  isInRange(_ref4) {
+    var x = _ref4.x,
+      y = _ref4.y;
+    var xInRange = x == null || this.xAxisScale.isInRange(x);
+    var yInRange = y == null || this.yAxisScale.isInRange(y);
+    return xInRange && yInRange;
+  }
+}
+exports.CartesianScaleHelperImpl = CartesianScaleHelperImpl;
--- a/frontend/node_modules/recharts/lib/util/scale/CustomScaleDefinition.js
+++ b/frontend/node_modules/recharts/lib/util/scale/CustomScaleDefinition.js
@ -0,0 +1 @@
+"use strict";
--- a/frontend/node_modules/recharts/lib/util/scale/RechartsScale.js
+++ b/frontend/node_modules/recharts/lib/util/scale/RechartsScale.js
@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rechartsScaleFactory = rechartsScaleFactory;
+/**
+ * This is internal representation of scale used in Recharts.
+ * Users will provide CustomScaleDefinition or a string, which we will parse into RechartsScale.
+ * Most importantly, RechartsScale is fully immutable - there are no setters that mutate the scale in place.
+ * This is important for React integration - if the scale changes, we want to trigger re-renders.
+ * Mutating the scale in place would not trigger re-renders, leading to stale UI.
+ */
+
+/**
+ * Position within a band for banded scales.
+ * In scales that are not banded, this parameter is ignored.
+ *
+ * @inline
+ */
+
+function rechartsScaleFactory(d3Scale) {
+  if (d3Scale == null) {
+    return undefined;
+  }
+  var ticksFn = d3Scale.ticks;
+  var bandwidthFn = d3Scale.bandwidth;
+  var d3Range = d3Scale.range();
+  var range = [Math.min(...d3Range), Math.max(...d3Range)];
+  return {
+    domain: () => d3Scale.domain(),
+    range: function (_range) {
+      function range() {
+        return _range.apply(this, arguments);
+      }
+      range.toString = function () {
+        return _range.toString();
+      };
+      return range;
+    }(() => range),
+    rangeMin: () => range[0],
+    rangeMax: () => range[1],
+    isInRange(value) {
+      var first = range[0];
+      var last = range[1];
+      return first <= last ? value >= first && value <= last : value >= last && value <= first;
+    },
+    bandwidth: bandwidthFn ? () => bandwidthFn.call(d3Scale) : undefined,
+    ticks: ticksFn ? count => ticksFn.call(d3Scale, count) : undefined,
+    map: (input, options) => {
+      var baseValue = d3Scale(input);
+      if (baseValue == null) {
+        return undefined;
+      }
+      if (d3Scale.bandwidth && options !== null && options !== void 0 && options.position) {
+        var bandWidth = d3Scale.bandwidth();
+        switch (options.position) {
+          case 'middle':
+            baseValue += bandWidth / 2;
+            break;
+          case 'end':
+            baseValue += bandWidth;
+            break;
+          default:
+            // 'start' requires no adjustment
+            break;
+        }
+      }
+      return baseValue;
+    }
+  };
+}
--- a/frontend/node_modules/recharts/lib/util/scale/createCategoricalInverse.js
+++ b/frontend/node_modules/recharts/lib/util/scale/createCategoricalInverse.js
@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.bisect = bisect;
+exports.createCategoricalInverse = createCategoricalInverse;
+/**
+ * Binary search to find the index where x would fit in array a.
+ * Works for arrays that are sorted both ascending and descending.
+ *
+ * Unlike d3.bisect, this implementation handles both ascending and descending arrays.
+ *
+ * @param haystack Sorted array of numbers
+ * @param needle Number to find the insertion index for
+ * @returns Index where x would fit in array a
+ */
+function bisect(haystack, needle) {
+  var lo = 0;
+  var hi = haystack.length;
+  var ascending = haystack[0] < haystack[haystack.length - 1];
+  while (lo < hi) {
+    var mid = Math.floor((lo + hi) / 2);
+    if (ascending ? haystack[mid] < needle : haystack[mid] > needle) {
+      lo = mid + 1;
+    } else {
+      hi = mid;
+    }
+  }
+  return lo;
+}
+
+/**
+ * Computes an inverse scale function for categorical/ordinal scales.
+ * Uses bisect to find the closest domain value for a given pixel coordinate.
+ */
+function createCategoricalInverse(scale, allDataPointsOnAxis) {
+  if (!scale) {
+    return undefined;
+  }
+  var domain = allDataPointsOnAxis !== null && allDataPointsOnAxis !== void 0 ? allDataPointsOnAxis : scale.domain();
+  // Build an array of pixel positions for each domain value
+  // @ts-expect-error we're attempting to scale unknown without having guarantee that it is a Domain type
+  var pixelPositions = domain.map(d => {
+    var _scale;
+    return (_scale = scale(d)) !== null && _scale !== void 0 ? _scale : 0;
+  });
+  var range = scale.range();
+  if (domain.length === 0 || range.length < 2) {
+    return undefined;
+  }
+  return pixelValue => {
+    var _pixelPositions, _pixelPositions$index;
+    // Find the closest domain value using bisect
+    var index = bisect(pixelPositions, pixelValue);
+
+    // Clamp to valid range
+    if (index <= 0) {
+      return domain[0];
+    }
+    if (index >= domain.length) {
+      return domain[domain.length - 1];
+    }
+
+    // Check which neighbor is closer
+    var leftPixel = (_pixelPositions = pixelPositions[index - 1]) !== null && _pixelPositions !== void 0 ? _pixelPositions : 0;
+    var rightPixel = (_pixelPositions$index = pixelPositions[index]) !== null && _pixelPositions$index !== void 0 ? _pixelPositions$index : 0;
+    if (Math.abs(pixelValue - leftPixel) <= Math.abs(pixelValue - rightPixel)) {
+      return domain[index - 1];
+    }
+    return domain[index];
+  };
+}
--- a/frontend/node_modules/recharts/lib/util/scale/getNiceTickValues.js
+++ b/frontend/node_modules/recharts/lib/util/scale/getNiceTickValues.js
@ -0,0 +1,294 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getValidInterval = exports.getTickValuesFixedDomain = exports.getTickOfSingleValue = exports.getSnap125Step = exports.getNiceTickValues = exports.getAdaptiveStep = exports.calculateStep = void 0;
+var _decimal = _interopRequireDefault(require("decimal.js-light"));
+var _arithmetic = require("./util/arithmetic");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { 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 _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /**
+ * @fileOverview calculate tick values of scale
+ * @author xile611, arcthur
+ * @date 2015-09-17
+ */
+/**
+ * Calculate a interval of a minimum value and a maximum value
+ *
+ * @param  {Number} min       The minimum value
+ * @param  {Number} max       The maximum value
+ * @return {Array} An interval
+ */
+var getValidInterval = _ref => {
+  var _ref2 = _slicedToArray(_ref, 2),
+    min = _ref2[0],
+    max = _ref2[1];
+  var validMin = min,
+    validMax = max;
+
+  // exchange
+  if (min > max) {
+    validMin = max;
+    validMax = min;
+  }
+  return [validMin, validMax];
+};
+
+/**
+ * Calculate the step which is easy to understand between ticks, like 10, 20, 25
+ *
+ * @param  roughStep        The rough step calculated by dividing the difference by the tickCount
+ * @param  allowDecimals    Allow the ticks to be decimals or not
+ * @param  correctionFactor A correction factor
+ * @return The step which is easy to understand between two ticks
+ */
+exports.getValidInterval = getValidInterval;
+var getAdaptiveStep = (roughStep, allowDecimals, correctionFactor) => {
+  if (roughStep.lte(0)) {
+    return new _decimal.default(0);
+  }
+  var digitCount = (0, _arithmetic.getDigitCount)(roughStep.toNumber());
+  // The ratio between the rough step and the smallest number which has a bigger
+  // order of magnitudes than the rough step
+  var digitCountValue = new _decimal.default(10).pow(digitCount);
+  var stepRatio = roughStep.div(digitCountValue);
+  // When an integer and a float multiplied, the accuracy of result may be wrong
+  var stepRatioScale = digitCount !== 1 ? 0.05 : 0.1;
+  var amendStepRatio = new _decimal.default(Math.ceil(stepRatio.div(stepRatioScale).toNumber())).add(correctionFactor).mul(stepRatioScale);
+  var formatStep = amendStepRatio.mul(digitCountValue);
+  return allowDecimals ? new _decimal.default(formatStep.toNumber()) : new _decimal.default(Math.ceil(formatStep.toNumber()));
+};
+exports.getAdaptiveStep = getAdaptiveStep;
+/**
+ * The snap125 step algorithm snaps to nice numbers (1, 2, 2.5, 5) at each
+ * order of magnitude, producing human-friendly tick intervals like
+ * 0, 5, 10, 15, 20 instead of 0, 4, 8, 12, 16.
+ *
+ * This is opt-in and can be enabled via the `niceTicks` prop on axis components.
+ *
+ * @param  roughStep        The rough step calculated by dividing the difference by the tickCount
+ * @param  allowDecimals    Allow the ticks to be decimals or not
+ * @param  correctionFactor A correction factor
+ * @return The step which is easy to understand between two ticks
+ */
+var getSnap125Step = (roughStep, allowDecimals, correctionFactor) => {
+  var _NICE_STEPS$niceIdx;
+  if (roughStep.lte(0)) {
+    return new _decimal.default(0);
+  }
+  var NICE_STEPS = [1, 2, 2.5, 5];
+  var roughNum = roughStep.toNumber();
+  var exponent = Math.floor(new _decimal.default(roughNum).abs().log(10).toNumber());
+  var magnitude = new _decimal.default(10).pow(exponent);
+
+  // normalized is in the range [1, 10)
+  var normalized = roughStep.div(magnitude).toNumber();
+
+  // Find the smallest nice step >= normalized (ceiling)
+  var niceIdx = NICE_STEPS.findIndex(s => s >= normalized - 1e-10);
+  if (niceIdx === -1) {
+    // normalized > 5 (e.g. 7.3), move to next order of magnitude
+    magnitude = magnitude.mul(10);
+    niceIdx = 0;
+  }
+
+  // Apply correction factor by stepping through the nice number sequence
+  niceIdx += correctionFactor;
+  if (niceIdx >= NICE_STEPS.length) {
+    var extraMag = Math.floor(niceIdx / NICE_STEPS.length);
+    niceIdx %= NICE_STEPS.length;
+    magnitude = magnitude.mul(new _decimal.default(10).pow(extraMag));
+  }
+  var niceStep = (_NICE_STEPS$niceIdx = NICE_STEPS[niceIdx]) !== null && _NICE_STEPS$niceIdx !== void 0 ? _NICE_STEPS$niceIdx : 1;
+  var formatStep = new _decimal.default(niceStep).mul(magnitude);
+  return allowDecimals ? formatStep : new _decimal.default(Math.ceil(formatStep.toNumber()));
+};
+
+/**
+ * calculate the ticks when the minimum value equals to the maximum value
+ *
+ * @param  value         The minimum value which is also the maximum value
+ * @param  tickCount     The count of ticks
+ * @param  allowDecimals Allow the ticks to be decimals or not
+ * @return array of ticks
+ */
+exports.getSnap125Step = getSnap125Step;
+var getTickOfSingleValue = (value, tickCount, allowDecimals) => {
+  var step = new _decimal.default(1);
+  // calculate the middle value of ticks
+  var middle = new _decimal.default(value);
+  if (!middle.isint() && allowDecimals) {
+    var absVal = Math.abs(value);
+    if (absVal < 1) {
+      // The step should be a float number when the difference is smaller than 1
+      step = new _decimal.default(10).pow((0, _arithmetic.getDigitCount)(value) - 1);
+      middle = new _decimal.default(Math.floor(middle.div(step).toNumber())).mul(step);
+    } else if (absVal > 1) {
+      // Return the maximum integer which is smaller than 'value' when 'value' is greater than 1
+      middle = new _decimal.default(Math.floor(value));
+    }
+  } else if (value === 0) {
+    middle = new _decimal.default(Math.floor((tickCount - 1) / 2));
+  } else if (!allowDecimals) {
+    middle = new _decimal.default(Math.floor(value));
+  }
+  var middleIndex = Math.floor((tickCount - 1) / 2);
+  var ticks = [];
+  for (var i = 0; i < tickCount; i++) {
+    ticks.push(middle.add(new _decimal.default(i - middleIndex).mul(step)).toNumber());
+  }
+  return ticks;
+};
+
+/**
+ * Calculate the step
+ *
+ * @param  min              The minimum value of an interval
+ * @param  max              The maximum value of an interval
+ * @param  tickCount        The count of ticks
+ * @param  allowDecimals    Allow the ticks to be decimals or not
+ * @param  correctionFactor A correction factor
+ * @return The step, minimum value of ticks, maximum value of ticks
+ */
+exports.getTickOfSingleValue = getTickOfSingleValue;
+var _calculateStep = exports.calculateStep = function calculateStep(min, max, tickCount, allowDecimals) {
+  var correctionFactor = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  var stepFn = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : getAdaptiveStep;
+  // dirty hack (for recharts' test)
+  if (!Number.isFinite((max - min) / (tickCount - 1))) {
+    return {
+      step: new _decimal.default(0),
+      tickMin: new _decimal.default(0),
+      tickMax: new _decimal.default(0)
+    };
+  }
+
+  // The step which is easy to understand between two ticks
+  var step = stepFn(new _decimal.default(max).sub(min).div(tickCount - 1), allowDecimals, correctionFactor);
+
+  // A medial value of ticks
+  var middle;
+
+  // When 0 is inside the interval, 0 should be a tick
+  if (min <= 0 && max >= 0) {
+    middle = new _decimal.default(0);
+  } else {
+    // calculate the middle value
+    middle = new _decimal.default(min).add(max).div(2);
+    // minus modulo value
+    middle = middle.sub(new _decimal.default(middle).mod(step));
+  }
+  var belowCount = Math.ceil(middle.sub(min).div(step).toNumber());
+  var upCount = Math.ceil(new _decimal.default(max).sub(middle).div(step).toNumber());
+  var scaleCount = belowCount + upCount + 1;
+  if (scaleCount > tickCount) {
+    // When more ticks need to cover the interval, step should be bigger.
+    return _calculateStep(min, max, tickCount, allowDecimals, correctionFactor + 1, stepFn);
+  }
+  if (scaleCount < tickCount) {
+    // When less ticks can cover the interval, we should add some additional ticks
+    upCount = max > 0 ? upCount + (tickCount - scaleCount) : upCount;
+    belowCount = max > 0 ? belowCount : belowCount + (tickCount - scaleCount);
+  }
+  return {
+    step,
+    tickMin: middle.sub(new _decimal.default(belowCount).mul(step)),
+    tickMax: middle.add(new _decimal.default(upCount).mul(step))
+  };
+};
+
+/**
+ * Calculate the ticks of an interval. Ticks can appear outside the interval
+ * if it makes them more rounded and nice.
+ *
+ * @param tuple of [min,max] min: The minimum value, max: The maximum value
+ * @param tickCount     The count of ticks
+ * @param allowDecimals Allow the ticks to be decimals or not
+ * @param niceTicksMode The algorithm to use for calculating nice ticks.
+ * @return array of ticks
+ */
+var getNiceTickValues = exports.getNiceTickValues = function getNiceTickValues(_ref3) {
+  var _ref4 = _slicedToArray(_ref3, 2),
+    min = _ref4[0],
+    max = _ref4[1];
+  var tickCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 6;
+  var allowDecimals = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var niceTicksMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'auto';
+  // More than two ticks should be return
+  var count = Math.max(tickCount, 2);
+  var _getValidInterval = getValidInterval([min, max]),
+    _getValidInterval2 = _slicedToArray(_getValidInterval, 2),
+    cormin = _getValidInterval2[0],
+    cormax = _getValidInterval2[1];
+  if (cormin === -Infinity || cormax === Infinity) {
+    var _values = cormax === Infinity ? [cormin, ...Array(tickCount - 1).fill(Infinity)] : [...Array(tickCount - 1).fill(-Infinity), cormax];
+    return min > max ? _values.reverse() : _values;
+  }
+  if (cormin === cormax) {
+    return getTickOfSingleValue(cormin, tickCount, allowDecimals);
+  }
+  var stepFn = niceTicksMode === 'snap125' ? getSnap125Step : getAdaptiveStep;
+
+  // Get the step between two ticks
+  var _calculateStep2 = _calculateStep(cormin, cormax, count, allowDecimals, 0, stepFn),
+    step = _calculateStep2.step,
+    tickMin = _calculateStep2.tickMin,
+    tickMax = _calculateStep2.tickMax;
+  var values = (0, _arithmetic.rangeStep)(tickMin, tickMax.add(new _decimal.default(0.1).mul(step)), step);
+  return min > max ? values.reverse() : values;
+};
+
+/**
+ * Calculate the ticks of an interval.
+ * Ticks will be constrained to the interval [min, max] even if it makes them less rounded and nice.
+ *
+ * @param tuple of [min,max] min: The minimum value, max: The maximum value
+ * @param tickCount     The count of ticks. This function may return less than tickCount ticks if the interval is too small.
+ * @param allowDecimals Allow the ticks to be decimals or not
+ * @param niceTicksMode          The algorithm to use for calculating nice ticks. See {@link NiceTicksAlgorithm}.
+ * @return array of ticks
+ */
+var getTickValuesFixedDomain = exports.getTickValuesFixedDomain = function getTickValuesFixedDomain(_ref5, tickCount) {
+  var _ref6 = _slicedToArray(_ref5, 2),
+    min = _ref6[0],
+    max = _ref6[1];
+  var allowDecimals = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var niceTicksMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'auto';
+  // More than two ticks should be return
+  var _getValidInterval3 = getValidInterval([min, max]),
+    _getValidInterval4 = _slicedToArray(_getValidInterval3, 2),
+    cormin = _getValidInterval4[0],
+    cormax = _getValidInterval4[1];
+  if (cormin === -Infinity || cormax === Infinity) {
+    return [min, max];
+  }
+  if (cormin === cormax) {
+    return [cormin];
+  }
+  var stepFn = niceTicksMode === 'snap125' ? getSnap125Step : getAdaptiveStep;
+  var count = Math.max(tickCount, 2);
+  var step = stepFn(new _decimal.default(cormax).sub(cormin).div(count - 1), allowDecimals, 0);
+  var values = [...(0, _arithmetic.rangeStep)(new _decimal.default(cormin), new _decimal.default(cormax), step), cormax];
+  if (allowDecimals === false) {
+    /*
+     * allowDecimals is false means that we want to have integer ticks.
+     * The step is guaranteed to be an integer in the code above which is great start
+     * but when the first step is not an integer, it will start stepping from a decimal value anyway.
+     * So we need to round all the values to integers after the fact.
+     * The domain boundary (cormax) is appended after the rangeStep values. When
+     * cormax rounds down to the same integer as the last rangeStep value, we end up
+     * with a duplicate trailing tick. Remove it.
+     */
+    values = values.map(value => Math.round(value));
+    var last = values.length - 1;
+    if (last > 0 && values[last] === values[last - 1]) {
+      values = values.slice(0, last);
+    }
+  }
+  return min > max ? values.reverse() : values;
+};
--- a/frontend/node_modules/recharts/lib/util/scale/index.js
+++ b/frontend/node_modules/recharts/lib/util/scale/index.js
@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getNiceTickValues", {
+  enumerable: true,
+  get: function get() {
+    return _getNiceTickValues.getNiceTickValues;
+  }
+});
+Object.defineProperty(exports, "getTickValuesFixedDomain", {
+  enumerable: true,
+  get: function get() {
+    return _getNiceTickValues.getTickValuesFixedDomain;
+  }
+});
+var _getNiceTickValues = require("./getNiceTickValues");
--- a/frontend/node_modules/recharts/lib/util/scale/util/arithmetic.js
+++ b/frontend/node_modules/recharts/lib/util/scale/util/arithmetic.js
@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDigitCount = getDigitCount;
+exports.rangeStep = rangeStep;
+var _decimal = _interopRequireDefault(require("decimal.js-light"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * @fileOverview Some common arithmetic methods
+ * @author xile611
+ * @date 2015-09-17
+ */
+
+/**
+ * Get the digit count of a number.
+ * If the absolute value is in the interval [0.1, 1), the result is 0.
+ * If the absolute value is in the interval [0.01, 0.1), the digit count is -1.
+ * If the absolute value is in the interval [0.001, 0.01), the digit count is -2.
+ *
+ * @param  {Number} value The number
+ * @return {Integer}      Digit count
+ */
+function getDigitCount(value) {
+  var result;
+  if (value === 0) {
+    result = 1;
+  } else {
+    result = Math.floor(new _decimal.default(value).abs().log(10).toNumber()) + 1;
+  }
+  return result;
+}
+
+/**
+ * Get the data in the interval [start, end) with a fixed step.
+ * Also handles JS calculation precision issues.
+ *
+ * @param  {Decimal} start Start point
+ * @param  {Decimal} end   End point, not included
+ * @param  {Decimal} step  Step size
+ * @return {Array}         Array of numbers
+ */
+function rangeStep(start, end, step) {
+  var num = new _decimal.default(start);
+  var i = 0;
+  var result = [];
+
+  // magic number to prevent infinite loop
+  while (num.lt(end) && i < 100000) {
+    result.push(num.toNumber());
+    num = num.add(step);
+    i++;
+  }
+  return result;
+}
--- a/frontend/node_modules/recharts/lib/util/stacks/getStackSeriesIdentifier.js
+++ b/frontend/node_modules/recharts/lib/util/stacks/getStackSeriesIdentifier.js
@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStackSeriesIdentifier = getStackSeriesIdentifier;
+/**
+ * Returns identifier for stack series which is one individual graphical item in the stack.
+ * @param graphicalItem - The graphical item representing the series in the stack.
+ * @return The identifier for the series in the stack
+ */
+function getStackSeriesIdentifier(graphicalItem) {
+  return graphicalItem === null || graphicalItem === void 0 ? void 0 : graphicalItem.id;
+}
--- a/frontend/node_modules/recharts/lib/util/stacks/stackTypes.js
+++ b/frontend/node_modules/recharts/lib/util/stacks/stackTypes.js
@ -0,0 +1 @@
+"use strict";
--- a/frontend/node_modules/recharts/lib/util/svgPropertiesAndEvents.js
+++ b/frontend/node_modules/recharts/lib/util/svgPropertiesAndEvents.js
@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.svgPropertiesAndEvents = svgPropertiesAndEvents;
+exports.svgPropertiesAndEventsFromUnknown = svgPropertiesAndEventsFromUnknown;
+var _react = require("react");
+var _excludeEventProps = require("./excludeEventProps");
+var _svgPropertiesNoEvents = require("./svgPropertiesNoEvents");
+/**
+ * Filters an object to only include SVG properties, data attributes, and event handlers.
+ * @param obj - The object to filter.
+ * @returns A new object containing only valid SVG properties, data attributes, and event handlers.
+ */
+function svgPropertiesAndEvents(obj) {
+  var result = {};
+  // for ... in loop is 10x faster than Object.entries + filter + Object.fromEntries in Chrome
+
+  for (var key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      if ((0, _svgPropertiesNoEvents.isSvgElementPropKey)(key) || (0, _svgPropertiesNoEvents.isDataAttribute)(key) || (0, _excludeEventProps.isEventKey)(key)) {
+        result[key] = obj[key];
+      }
+    }
+  }
+  return result;
+}
+
+/**
+ * Function to filter SVG properties from various input types.
+ * The input types can be:
+ * - A record of string keys to any values, in which case it returns a record of only SVG properties
+ * - A React element, in which case it returns the props of the element filtered to only SVG properties
+ * - Anything else, in which case it returns null
+ *
+ * This function has a wide-open return type, because it will read and filter the props of an arbitrary React element.
+ * This can be SVG, HTML, whatnot, with arbitrary values, so we can't type it more specifically.
+ *
+ * If you wish to have a type-safe version, use svgPropertiesNoEvents directly with a typed object.
+ *
+ * @param input - The input to filter, which can be a record, a React element, or other types.
+ * @returns A record of SVG properties if the input is a record or React element, otherwise null.
+ */
+function svgPropertiesAndEventsFromUnknown(input) {
+  if (input == null) {
+    return null;
+  }
+  if (/*#__PURE__*/(0, _react.isValidElement)(input)) {
+    // @ts-expect-error we can't type this better because input can be any React element
+    return svgPropertiesAndEvents(input.props);
+  }
+  if (typeof input === 'object' && !Array.isArray(input)) {
+    return svgPropertiesAndEvents(input);
+  }
+  return null;
+}
--- a/frontend/node_modules/recharts/lib/util/svgPropertiesNoEvents.js
+++ b/frontend/node_modules/recharts/lib/util/svgPropertiesNoEvents.js
@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isDataAttribute = isDataAttribute;
+exports.isSvgElementPropKey = isSvgElementPropKey;
+exports.svgPropertiesNoEvents = svgPropertiesNoEvents;
+exports.svgPropertiesNoEventsFromUnknown = svgPropertiesNoEventsFromUnknown;
+var _react = require("react");
+var SVGElementPropKeys = ['aria-activedescendant', 'aria-atomic', 'aria-autocomplete', 'aria-busy', 'aria-checked', 'aria-colcount', 'aria-colindex', 'aria-colspan', 'aria-controls', 'aria-current', 'aria-describedby', 'aria-details', 'aria-disabled', 'aria-errormessage', 'aria-expanded', 'aria-flowto', 'aria-haspopup', 'aria-hidden', 'aria-invalid', 'aria-keyshortcuts', 'aria-label', 'aria-labelledby', 'aria-level', 'aria-live', 'aria-modal', 'aria-multiline', 'aria-multiselectable', 'aria-orientation', 'aria-owns', 'aria-placeholder', 'aria-posinset', 'aria-pressed', 'aria-readonly', 'aria-relevant', 'aria-required', 'aria-roledescription', 'aria-rowcount', 'aria-rowindex', 'aria-rowspan', 'aria-selected', 'aria-setsize', 'aria-sort', 'aria-valuemax', 'aria-valuemin', 'aria-valuenow', 'aria-valuetext', 'className', 'color', 'height', 'id', 'lang', 'max', 'media', 'method', 'min', 'name', 'style',
+/*
+ * removed 'type' SVGElementPropKey because we do not currently use any SVG elements
+ * that can use it, and it conflicts with the recharts prop 'type'
+ * https://github.com/recharts/recharts/pull/3327
+ * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/type
+ */
+// 'type',
+'target', 'width', 'role', 'tabIndex', 'accentHeight', 'accumulate', 'additive', 'alignmentBaseline', 'allowReorder', 'alphabetic', 'amplitude', 'arabicForm', 'ascent', 'attributeName', 'attributeType', 'autoReverse', 'azimuth', 'baseFrequency', 'baselineShift', 'baseProfile', 'bbox', 'begin', 'bias', 'by', 'calcMode', 'capHeight', 'clip', 'clipPath', 'clipPathUnits', 'clipRule', 'colorInterpolation', 'colorInterpolationFilters', 'colorProfile', 'colorRendering', 'contentScriptType', 'contentStyleType', 'cursor', 'cx', 'cy', 'd', 'decelerate', 'descent', 'diffuseConstant', 'direction', 'display', 'divisor', 'dominantBaseline', 'dur', 'dx', 'dy', 'edgeMode', 'elevation', 'enableBackground', 'end', 'exponent', 'externalResourcesRequired', 'fill', 'fillOpacity', 'fillRule', 'filter', 'filterRes', 'filterUnits', 'floodColor', 'floodOpacity', 'focusable', 'fontFamily', 'fontSize', 'fontSizeAdjust', 'fontStretch', 'fontStyle', 'fontVariant', 'fontWeight', 'format', 'from', 'fx', 'fy', 'g1', 'g2', 'glyphName', 'glyphOrientationHorizontal', 'glyphOrientationVertical', 'glyphRef', 'gradientTransform', 'gradientUnits', 'hanging', 'horizAdvX', 'horizOriginX', 'href', 'ideographic', 'imageRendering', 'in2', 'in', 'intercept', 'k1', 'k2', 'k3', 'k4', 'k', 'kernelMatrix', 'kernelUnitLength', 'kerning', 'keyPoints', 'keySplines', 'keyTimes', 'lengthAdjust', 'letterSpacing', 'lightingColor', 'limitingConeAngle', 'local', 'markerEnd', 'markerHeight', 'markerMid', 'markerStart', 'markerUnits', 'markerWidth', 'mask', 'maskContentUnits', 'maskUnits', 'mathematical', 'mode', 'numOctaves', 'offset', 'opacity', 'operator', 'order', 'orient', 'orientation', 'origin', 'overflow', 'overlinePosition', 'overlineThickness', 'paintOrder', 'panose1', 'pathLength', 'patternContentUnits', 'patternTransform', 'patternUnits', 'pointerEvents', 'pointsAtX', 'pointsAtY', 'pointsAtZ', 'preserveAlpha', 'preserveAspectRatio', 'primitiveUnits', 'r', 'radius', 'refX', 'refY', 'renderingIntent', 'repeatCount', 'repeatDur', 'requiredExtensions', 'requiredFeatures', 'restart', 'result', 'rotate', 'rx', 'ry', 'seed', 'shapeRendering', 'slope', 'spacing', 'specularConstant', 'specularExponent', 'speed', 'spreadMethod', 'startOffset', 'stdDeviation', 'stemh', 'stemv', 'stitchTiles', 'stopColor', 'stopOpacity', 'strikethroughPosition', 'strikethroughThickness', 'string', 'stroke', 'strokeDasharray', 'strokeDashoffset', 'strokeLinecap', 'strokeLinejoin', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'surfaceScale', 'systemLanguage', 'tableValues', 'targetX', 'targetY', 'textAnchor', 'textDecoration', 'textLength', 'textRendering', 'to', 'transform', 'u1', 'u2', 'underlinePosition', 'underlineThickness', 'unicode', 'unicodeBidi', 'unicodeRange', 'unitsPerEm', 'vAlphabetic', 'values', 'vectorEffect', 'version', 'vertAdvY', 'vertOriginX', 'vertOriginY', 'vHanging', 'vIdeographic', 'viewTarget', 'visibility', 'vMathematical', 'widths', 'wordSpacing', 'writingMode', 'x1', 'x2', 'x', 'xChannelSelector', 'xHeight', 'xlinkActuate', 'xlinkArcrole', 'xlinkHref', 'xlinkRole', 'xlinkShow', 'xlinkTitle', 'xlinkType', 'xmlBase', 'xmlLang', 'xmlns', 'xmlnsXlink', 'xmlSpace', 'y1', 'y2', 'y', 'yChannelSelector', 'z', 'zoomAndPan', 'ref', 'key', 'angle'];
+var SVGElementPropKeySet = new Set(SVGElementPropKeys);
+function isSvgElementPropKey(key) {
+  if (typeof key !== 'string') {
+    return false;
+  }
+  return SVGElementPropKeySet.has(key);
+}
+/**
+ * Checks if the property is a data attribute.
+ * @param key The property key.
+ * @returns True if the key starts with 'data-', false otherwise.
+ */
+function isDataAttribute(key) {
+  return typeof key === 'string' && key.startsWith('data-');
+}
+
+/**
+ * Filters an object to only include SVG properties. Removes all event handlers too.
+ * @param obj - The object to filter
+ * @returns A new object containing only valid SVG properties, excluding event handlers.
+ */
+function svgPropertiesNoEvents(obj) {
+  if (typeof obj !== 'object' || obj === null) {
+    return {};
+  }
+  var result = {};
+  for (var key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      if (isSvgElementPropKey(key) || isDataAttribute(key)) {
+        result[key] = obj[key];
+      }
+    }
+  }
+  return result;
+}
+
+/**
+ * Function to filter SVG properties from various input types.
+ * The input types can be:
+ * - A record of string keys to any values, in which case it returns a record of only SVG properties
+ * - A React element, in which case it returns the props of the element filtered to only SVG properties
+ * - Anything else, in which case it returns null
+ *
+ * This function has a wide-open return type, because it will read and filter the props of an arbitrary React element.
+ * This can be SVG, HTML, whatnot, with arbitrary values, so we can't type it more specifically.
+ *
+ * If you wish to have a type-safe version, use svgPropertiesNoEvents directly with a typed object.
+ *
+ * @param input - The input to filter, which can be a record, a React element, or other types.
+ * @returns A record of SVG properties if the input is a record or React element, otherwise null.
+ */
+function svgPropertiesNoEventsFromUnknown(input) {
+  if (input == null) {
+    return null;
+  }
+  if (/*#__PURE__*/(0, _react.isValidElement)(input) && typeof input.props === 'object' && input.props !== null) {
+    var p = input.props;
+    return svgPropertiesNoEvents(p);
+  }
+  if (typeof input === 'object' && !Array.isArray(input)) {
+    return svgPropertiesNoEvents(input);
+  }
+  return null;
+}
--- a/frontend/node_modules/recharts/lib/util/tooltip/translate.js
+++ b/frontend/node_modules/recharts/lib/util/tooltip/translate.js
@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTooltipCSSClassName = getTooltipCSSClassName;
+exports.getTooltipTranslate = getTooltipTranslate;
+exports.getTooltipTranslateXY = getTooltipTranslateXY;
+exports.getTransformStyle = getTransformStyle;
+var _clsx = require("clsx");
+var _DataUtils = require("../DataUtils");
+var CSS_CLASS_PREFIX = 'recharts-tooltip-wrapper';
+var TOOLTIP_HIDDEN = {
+  visibility: 'hidden'
+};
+function getTooltipCSSClassName(_ref) {
+  var coordinate = _ref.coordinate,
+    translateX = _ref.translateX,
+    translateY = _ref.translateY;
+  return (0, _clsx.clsx)(CSS_CLASS_PREFIX, {
+    ["".concat(CSS_CLASS_PREFIX, "-right")]: (0, _DataUtils.isNumber)(translateX) && coordinate && (0, _DataUtils.isNumber)(coordinate.x) && translateX >= coordinate.x,
+    ["".concat(CSS_CLASS_PREFIX, "-left")]: (0, _DataUtils.isNumber)(translateX) && coordinate && (0, _DataUtils.isNumber)(coordinate.x) && translateX < coordinate.x,
+    ["".concat(CSS_CLASS_PREFIX, "-bottom")]: (0, _DataUtils.isNumber)(translateY) && coordinate && (0, _DataUtils.isNumber)(coordinate.y) && translateY >= coordinate.y,
+    ["".concat(CSS_CLASS_PREFIX, "-top")]: (0, _DataUtils.isNumber)(translateY) && coordinate && (0, _DataUtils.isNumber)(coordinate.y) && translateY < coordinate.y
+  });
+}
+function getTooltipTranslateXY(_ref2) {
+  var allowEscapeViewBox = _ref2.allowEscapeViewBox,
+    coordinate = _ref2.coordinate,
+    key = _ref2.key,
+    offset = _ref2.offset,
+    position = _ref2.position,
+    reverseDirection = _ref2.reverseDirection,
+    tooltipDimension = _ref2.tooltipDimension,
+    viewBox = _ref2.viewBox,
+    viewBoxDimension = _ref2.viewBoxDimension;
+  if (position && (0, _DataUtils.isNumber)(position[key])) {
+    return position[key];
+  }
+  var negative = coordinate[key] - tooltipDimension - (offset > 0 ? offset : 0);
+  var positive = coordinate[key] + offset;
+  if (allowEscapeViewBox[key]) {
+    return reverseDirection[key] ? negative : positive;
+  }
+  var viewBoxKey = viewBox[key];
+  if (viewBoxKey == null) {
+    return 0;
+  }
+  if (reverseDirection[key]) {
+    var _tooltipBoundary = negative;
+    var _viewBoxBoundary = viewBoxKey;
+    if (_tooltipBoundary < _viewBoxBoundary) {
+      return Math.max(positive, viewBoxKey);
+    }
+    return Math.max(negative, viewBoxKey);
+  }
+  if (viewBoxDimension == null) {
+    return 0;
+  }
+  var tooltipBoundary = positive + tooltipDimension;
+  var viewBoxBoundary = viewBoxKey + viewBoxDimension;
+  if (tooltipBoundary > viewBoxBoundary) {
+    return Math.max(negative, viewBoxKey);
+  }
+  return Math.max(positive, viewBoxKey);
+}
+function getTransformStyle(_ref3) {
+  var translateX = _ref3.translateX,
+    translateY = _ref3.translateY,
+    useTranslate3d = _ref3.useTranslate3d;
+  return {
+    transform: useTranslate3d ? "translate3d(".concat(translateX, "px, ").concat(translateY, "px, 0)") : "translate(".concat(translateX, "px, ").concat(translateY, "px)")
+  };
+}
+function getTooltipTranslate(_ref4) {
+  var allowEscapeViewBox = _ref4.allowEscapeViewBox,
+    coordinate = _ref4.coordinate,
+    offsetTop = _ref4.offsetTop,
+    offsetLeft = _ref4.offsetLeft,
+    position = _ref4.position,
+    reverseDirection = _ref4.reverseDirection,
+    tooltipBox = _ref4.tooltipBox,
+    useTranslate3d = _ref4.useTranslate3d,
+    viewBox = _ref4.viewBox;
+  var cssProperties, translateX, translateY;
+  if (tooltipBox.height > 0 && tooltipBox.width > 0 && coordinate) {
+    translateX = getTooltipTranslateXY({
+      allowEscapeViewBox,
+      coordinate,
+      key: 'x',
+      offset: offsetLeft,
+      position,
+      reverseDirection,
+      tooltipDimension: tooltipBox.width,
+      viewBox,
+      viewBoxDimension: viewBox.width
+    });
+    translateY = getTooltipTranslateXY({
+      allowEscapeViewBox,
+      coordinate,
+      key: 'y',
+      offset: offsetTop,
+      position,
+      reverseDirection,
+      tooltipDimension: tooltipBox.height,
+      viewBox,
+      viewBoxDimension: viewBox.height
+    });
+    cssProperties = getTransformStyle({
+      translateX,
+      translateY,
+      useTranslate3d
+    });
+  } else {
+    cssProperties = TOOLTIP_HIDDEN;
+  }
+  return {
+    cssProperties,
+    cssClasses: getTooltipCSSClassName({
+      translateX,
+      translateY,
+      coordinate
+    })
+  };
+}
--- a/frontend/node_modules/recharts/lib/util/typedDataKey.js
+++ b/frontend/node_modules/recharts/lib/util/typedDataKey.js
@ -0,0 +1 @@
+"use strict";
--- a/frontend/node_modules/recharts/lib/util/types.js
+++ b/frontend/node_modules/recharts/lib/util/types.js
@ -0,0 +1,306 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isPolarCoordinate = exports.isNonEmptyArray = exports.adaptEventsOfChild = exports.adaptEventHandlers = void 0;
+var _react = require("react");
+var _excludeEventProps = require("./excludeEventProps");
+/**
+ * Determines how values are stacked:
+ *
+ * - `none` is the default, it adds values on top of each other. No smarts. Negative values will overlap.
+ * - `expand` make it so that the values always add up to 1 - so the chart will look like a rectangle.
+ * - `wiggle` and `silhouette` tries to keep the chart centered.
+ * - `sign` stacks positive values above zero and negative values below zero. Similar to `none` but handles negatives.
+ * - `positive` ignores all negative values, and then behaves like \`none\`.
+ *
+ * @see {@link https://d3js.org/d3-shape/stack#stack-offsets}
+ * (note that the `diverging` offset in d3 is named `sign` in recharts)
+ *
+ * @inline
+ */
+
+/**
+ * @deprecated use either `CartesianLayout` or `PolarLayout` instead.
+ * Mixing both charts families leads to ambiguity in the type system.
+ * These two layouts share very few properties, so it is best to keep them separate.
+ */
+
+/**
+ * The type of axis.
+ *
+ * `category`: Treats data as distinct values.
+ * Each value is in the same distance from its neighbors, regardless of their actual numeric difference.
+ *
+ * `number`: Treats data as continuous range.
+ * Values that are numerically closer are placed closer together on the axis.
+ *
+ * `auto`: the type is inferred based on the chart layout.
+ *
+ * This is external type - users will provide this type in props.
+ * Internally we will evaluate it to either 'category' or 'number' based on the layout,
+ * before sending it to the store.
+ *
+ * @inline
+ */
+
+/**
+ * Individual axes are responsible for resolving the 'auto' type to either 'number' or 'category',
+ * based on the chart layout and axis kind. Then they can start using this type.
+ */
+
+/**
+ * Extracts values from data objects.
+ *
+ * @inline
+ */
+
+/**
+ * @inline
+ */
+
+/**
+ * @inline
+ */
+
+/**
+ * @deprecated do not use: too many properties, mixing too many concepts, cartesian and polar together, everything optional.
+ * Instead, use either `Coordinate` or `PolarCoordinate`.
+ */
+
+var isPolarCoordinate = c => {
+  return 'radius' in c && 'startAngle' in c && 'endAngle' in c;
+};
+
+/**
+ * String shortcuts for scale types.
+ * In case none of these does what you want you can also provide your own scale function
+ * @see {@link CustomScaleDefinition}
+ */
+
+//
+// Event Handler Types -- Copied from @types/react/index.d.ts and adapted for Props.
+//
+
+/**
+ * The type of easing function to use for animations
+ *
+ * @inline
+ */
+
+/** @deprecated Use EasingInput instead */
+
+/** Specifies the duration of animation, the unit of this option is ms. */
+
+/**
+ * This object defines the offset of the chart area and width and height and brush and ... it's a bit too much information all in one.
+ * We use it internally but let's not expose it to the outside world.
+ * If you are looking for this information, instead import `ChartOffset` or `PlotArea` from `recharts`.
+ */
+
+/**
+ * The domain of axis.
+ * This is the definition
+ *
+ * Numeric domain is always defined by an array of exactly two values, for the min and the max of the axis.
+ * Categorical domain is defined as array of all possible values.
+ *
+ * Can be specified in many ways:
+ * - array of numbers
+ * - with special strings like 'dataMin' and 'dataMax'
+ * - with special string math like 'dataMin - 100'
+ * - with keyword 'auto'
+ * - or a function
+ * - array of functions
+ * - or a combination of the above
+ */
+
+/**
+ * NumberDomain is an evaluated {@link AxisDomain}.
+ * Unlike {@link AxisDomain}, it has no variety - it's a tuple of two number.
+ * This is after all the keywords and functions were evaluated and what is left is [min, max].
+ *
+ * Know that the min, max values are not guaranteed to be nice numbers - values like -Infinity or NaN are possible.
+ *
+ * There are also `category` axes that have different things than numbers in their domain.
+ */
+
+/**
+ * @inline
+ */
+
+/**
+ * Props shared in all renderable axes - meaning the ones that are drawn on the chart,
+ * can have ticks, axis line, etc.
+ */
+
+/** Defines how ticks are placed and whether / how tick collisions are handled.
+ * 'preserveStart' keeps the left tick on collision and ensures that the first tick is always shown.
+ * 'preserveEnd' keeps the right tick on collision and ensures that the last tick is always shown.
+ * 'preserveStartEnd' keeps the left tick on collision and ensures that the first and last ticks always show.
+ * 'equidistantPreserveStart' selects a number N such that every nTh tick will be shown without collision.
+ * 'equidistantPreserveEnd' selects a number N such that every nTh tick will be shown, ensuring the last tick is always visible.
+ */
+
+/**
+ * Ticks can be any type when the axis is the type of category.
+ *
+ * Ticks must be numbers when the axis is the type of number.
+ *
+ * @inline
+ */
+
+/**
+ * @inline
+ */
+
+/**
+ * @inline
+ */
+exports.isPolarCoordinate = isPolarCoordinate;
+var adaptEventHandlers = (props, newHandler) => {
+  if (!props || typeof props === 'function' || typeof props === 'boolean') {
+    return null;
+  }
+  var inputProps = props;
+  if (/*#__PURE__*/(0, _react.isValidElement)(props)) {
+    inputProps = props.props;
+  }
+  if (typeof inputProps !== 'object' && typeof inputProps !== 'function') {
+    return null;
+  }
+  var out = {};
+  Object.keys(inputProps).forEach(key => {
+    if ((0, _excludeEventProps.isEventKey)(key) && typeof inputProps[key] === 'function') {
+      out[key] = newHandler || (e => inputProps[key](inputProps, e));
+    }
+  });
+  return out;
+};
+exports.adaptEventHandlers = adaptEventHandlers;
+var getEventHandlerOfChild = (originalHandler, data, index) => e => {
+  originalHandler(data, index, e);
+  return null;
+};
+var adaptEventsOfChild = (props, data, index) => {
+  if (props === null || typeof props !== 'object' && typeof props !== 'function') {
+    return null;
+  }
+  var out = null;
+  Object.keys(props).forEach(key => {
+    var item = props[key];
+    if ((0, _excludeEventProps.isEventKey)(key) && typeof item === 'function') {
+      if (!out) out = {};
+      out[key] = getEventHandlerOfChild(item, data, index);
+    }
+  });
+  return out;
+};
+
+/**
+ * 'axis' means that all graphical items belonging to this axis tick will be highlighted,
+ * and all will be present in the tooltip.
+ * Tooltip with 'axis' will display when hovering on the chart background.
+ *
+ * 'item' means only the one graphical item being hovered will show in the tooltip.
+ * Tooltip with 'item' will display when hovering over individual graphical items.
+ *
+ * This is calculated internally;
+ * charts have a `defaultTooltipEventType` and `validateTooltipEventTypes` options.
+ *
+ * Users then use <Tooltip shared={true} /> or <Tooltip shared={false} /> to control their preference,
+ * and charts will then see what is allowed and what is not.
+ */
+
+/**
+ * These are the props we are going to pass to an `activeDot` or `dot` if it is a function or a custom Component
+ */
+
+/**
+ * This is the type of `activeDot` prop on:
+ * - Area
+ * - Line
+ * - Radar
+ *
+ * @inline
+ */
+
+/**
+ * Inside the dot event handlers we provide extra information about the dot point
+ * that the Dot component itself does not need but users might find useful.
+ */
+
+/**
+ * This is the type of `dot` prop on:
+ * - Area
+ * - Line
+ * - Radar
+ *
+ * @inline
+ */
+
+/**
+ * Animation metadata forwarded to custom chart shapes.
+ *
+ * These props let a shape react to the current animation state without needing
+ * to know how its parent chart component computes the animated geometry.
+ */
+
+/**
+ * Simplified version of the MouseEvent so that we don't have to mock the whole thing in tests.
+ *
+ * This is meant to represent the React.MouseEvent
+ * which is a wrapper on top of https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
+ */
+
+/**
+ * Simplified version of the MouseEvent for SVG elements.
+ *
+ * Similar to MousePointer but uses SVGGraphicsElement properties instead of HTMLElement properties.
+ * SVG elements use getBBox() to get the intrinsic size instead of offsetWidth/offsetHeight.
+ */
+
+/**
+ * Recharts accepts mouse events from both HTML and SVG elements.
+ */
+
+/**
+ * Coordinates relative to the top-left corner of the active element.
+ * Also include scale which means that element that's scaled will return the same coordinates as element that's not scaled.
+ */
+
+/**
+ * Data provider means that this component accepts a `data` prop which is where you can input your data into the chart state.
+ * The data is an array of objects, where each object represents a data point.
+ *
+ * DataPointType is the type of each data point object in the data array.
+ *
+ * The data is reused in multiple charts and components. Meaning if you provide data on the chart level,
+ * then all child components, graphical items, legend, tooltip, axes ... will be able to access the data.
+ *
+ * Same goes for the graphical item. If you provide data on the graphical item level,
+ * then that data is visible for the main chart, and all axes, tooltip, legend ... in the whole chart.
+ * This is not scoped to the graphical item only.
+ */
+
+/**
+ * Data consumer means that this component accepts a `dataKey` prop which is how you specify
+ * which dimension of the data to use for this component.
+ *
+ * DataPointType is the type of each data point object in the data array.
+ * DataValueType is the type of the value that this dataKey extracts from each data point.
+ */
+
+/**
+ * Props shared with all Cartesian and Polar charts.
+ * There are three charts that do not use these base props, and define their own:
+ * - Treemap
+ * - Sunburst
+ * - Sankey
+ */
+exports.adaptEventsOfChild = adaptEventsOfChild;
+var isNonEmptyArray = arr => {
+  return Array.isArray(arr) && arr.length > 0;
+};
+exports.isNonEmptyArray = isNonEmptyArray;
--- a/frontend/node_modules/recharts/lib/util/useAnimationId.js
+++ b/frontend/node_modules/recharts/lib/util/useAnimationId.js
@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimationId = useAnimationId;
+var _react = require("react");
+var _DataUtils = require("./DataUtils");
+/**
+ * This hook returns a unique animation id for the object input.
+ * If input changes (as in, reference equality is different), the animation id will change.
+ * If input does not change, the animation id will not change.
+ *
+ * This is useful for animations. The Animate component
+ * does have a `shouldReAnimate` prop but that doesn't seem to be doing what the name implies.
+ * Also, we don't always want to re-animate on every render;
+ * we only want to re-animate when the input changes. Not the internal state (e.g. `isAnimating`).
+ *
+ * @param input The object to check for changes. Uses reference equality (=== operator)
+ * @param prefix Optional prefix to use for the animation id
+ * @returns A unique animation id
+ */
+function useAnimationId(input) {
+  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'animation-';
+  var animationId = (0, _react.useRef)((0, _DataUtils.uniqueId)(prefix));
+  var prevProps = (0, _react.useRef)(input);
+  if (prevProps.current !== input) {
+    animationId.current = (0, _DataUtils.uniqueId)(prefix);
+    prevProps.current = input;
+  }
+  return animationId.current;
+}
--- a/frontend/node_modules/recharts/lib/util/useElementOffset.js
+++ b/frontend/node_modules/recharts/lib/util/useElementOffset.js
@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useElementOffset = useElementOffset;
+var _react = require("react");
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { 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 _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var EPS = 1;
+
+/**
+ * Stores the dimensions and position of a DOM element as returned by `getBoundingClientRect()`.
+ *
+ * Values are viewport-relative and may be fractional (subpixel precision).
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect}
+ */
+
+/**
+ * Callback ref setter returned by {@link useElementOffset}.
+ *
+ * Pass this to a DOM element's `ref` prop to start observing its layout.
+ *
+ * @param node - the DOM element to observe, or `null` when the element unmounts
+ */
+
+/**
+ * Checks whether two ElementOffset values differ by more than `EPS` (1px) in any dimension.
+ *
+ * @param a - the first ElementOffset to compare
+ * @param b - the second ElementOffset to compare
+ * @returns true if any dimension differs by more than 1px
+ */
+function hasSignificantChange(a, b) {
+  return Math.abs(a.height - b.height) > EPS || Math.abs(a.left - b.left) > EPS || Math.abs(a.top - b.top) > EPS || Math.abs(a.width - b.width) > EPS;
+}
+
+/**
+ * Reads the current bounding box of a DOM element using `getBoundingClientRect()`.
+ *
+ * @param node - the DOM element to measure
+ * @returns an ElementOffset with the element's current dimensions and viewport-relative position
+ */
+function readElementOffset(node) {
+  var rect = node.getBoundingClientRect();
+  return {
+    height: rect.height,
+    left: rect.left,
+    top: rect.top,
+    width: rect.width
+  };
+}
+
+/**
+ * Use this to listen to element layout changes.
+ *
+ * Very useful for reading actual sizes of DOM elements relative to the viewport.
+ *
+ * Uses ResizeObserver to automatically detect size changes of the observed element.
+ *
+ * @param extraDependencies use this to trigger new DOM dimensions read when any of these change. Good for things like payload and label, that will re-render something down in the children array, but you want to read the layout box of a parent.
+ * @returns [lastElementOffset, updateElementOffset] most recent value, and setter. Pass the setter to a DOM element ref like this: `<div ref={updateElementOffset}>`
+ */
+function useElementOffset() {
+  var extraDependencies = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var _useState = (0, _react.useState)({
+      height: 0,
+      left: 0,
+      top: 0,
+      width: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    lastBoundingBox = _useState2[0],
+    setLastBoundingBox = _useState2[1];
+  var observerRef = (0, _react.useRef)(null);
+  var lastBoundingBoxRef = (0, _react.useRef)(lastBoundingBox);
+  lastBoundingBoxRef.current = lastBoundingBox;
+  var updateBoundingBox = (0, _react.useCallback)(node => {
+    // Disconnect any previously active ResizeObserver
+    if (observerRef.current != null) {
+      observerRef.current.disconnect();
+      observerRef.current = null;
+    }
+    if (node != null) {
+      // Measure immediately on ref attach
+      var box = readElementOffset(node);
+      if (hasSignificantChange(box, lastBoundingBoxRef.current)) {
+        setLastBoundingBox(box);
+      }
+
+      // Set up ResizeObserver for future size changes
+      if (typeof ResizeObserver !== 'undefined') {
+        var observer = new ResizeObserver(() => {
+          var newBox = readElementOffset(node);
+          if (hasSignificantChange(newBox, lastBoundingBoxRef.current)) {
+            setLastBoundingBox(newBox);
+          }
+        });
+        observer.observe(node);
+        observerRef.current = observer;
+      }
+    }
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [...extraDependencies]);
+
+  // Cleanup on unmount
+  (0, _react.useEffect)(() => {
+    return () => {
+      var _observerRef$current;
+      (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 || _observerRef$current.disconnect();
+    };
+  }, []);
+  return [lastBoundingBox, updateBoundingBox];
+}
--- a/frontend/node_modules/recharts/lib/util/useId.js
+++ b/frontend/node_modules/recharts/lib/util/useId.js
@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIdFallback = exports.useId = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _DataUtils = require("./DataUtils");
+var _ref;
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { 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 _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+/**
+ * Fallback for React.useId() for versions prior to React 18.
+ * Generates a unique ID using a simple counter and a prefix.
+ *
+ * @returns A unique ID that remains consistent across renders.
+ */
+var useIdFallback = () => {
+  var _React$useState = React.useState(() => (0, _DataUtils.uniqueId)('uid-')),
+    _React$useState2 = _slicedToArray(_React$useState, 1),
+    id = _React$useState2[0];
+  return id;
+};
+
+/*
+ * This weird syntax is used to avoid a build-time error in React 17 and earlier when building with Webpack.
+ * See https://github.com/webpack/webpack/issues/14814
+ */
+exports.useIdFallback = useIdFallback;
+var useId = exports.useId = (_ref = React['useId'.toString()]) !== null && _ref !== void 0 ? _ref : useIdFallback;
--- a/frontend/node_modules/recharts/lib/util/usePrefersReducedMotion.js
+++ b/frontend/node_modules/recharts/lib/util/usePrefersReducedMotion.js
@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePrefersReducedMotion = usePrefersReducedMotion;
+var _react = require("react");
+var _Global = require("./Global");
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { 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 _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+/**
+ * Detects and subscribes to the user's `prefers-reduced-motion` system preference.
+ * Returns `true` when the user prefers reduced motion, `false` otherwise.
+ * SSR-safe: always returns `false` during server-side rendering.
+ */
+function usePrefersReducedMotion() {
+  var _useState = (0, _react.useState)(() => {
+      if (_Global.Global.isSsr) {
+        return false;
+      }
+      if (!window.matchMedia) {
+        return false;
+      }
+      return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    prefersReducedMotion = _useState2[0],
+    setPrefersReducedMotion = _useState2[1];
+  (0, _react.useEffect)(() => {
+    if (!window.matchMedia) {
+      return;
+    }
+    var mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    var handleChange = () => {
+      setPrefersReducedMotion(mediaQuery.matches);
+    };
+    mediaQuery.addEventListener('change', handleChange);
+    // eslint-disable-next-line consistent-return
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, []);
+  return prefersReducedMotion;
+}
--- a/frontend/node_modules/recharts/lib/util/useReportScale.js
+++ b/frontend/node_modules/recharts/lib/util/useReportScale.js
@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useReportScale = useReportScale;
+var _react = require("react");
+var _hooks = require("../state/hooks");
+var _containerSelectors = require("../state/selectors/containerSelectors");
+var _layoutSlice = require("../state/layoutSlice");
+var _isWellBehavedNumber = require("./isWellBehavedNumber");
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { 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 _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function useReportScale() {
+  var dispatch = (0, _hooks.useAppDispatch)();
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    ref = _useState2[0],
+    setRef = _useState2[1];
+  var scale = (0, _hooks.useAppSelector)(_containerSelectors.selectContainerScale);
+  (0, _react.useEffect)(() => {
+    if (ref == null) {
+      return;
+    }
+    var rect = ref.getBoundingClientRect();
+    var newScale = rect.width / ref.offsetWidth;
+    if ((0, _isWellBehavedNumber.isWellBehavedNumber)(newScale) && newScale !== scale) {
+      dispatch((0, _layoutSlice.setScale)(newScale));
+    }
+  }, [ref, dispatch, scale]);
+  return setRef;
+}
--- a/frontend/node_modules/recharts/lib/util/useUniqueId.js
+++ b/frontend/node_modules/recharts/lib/util/useUniqueId.js
@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUniqueId = useUniqueId;
+var _useId = require("./useId");
+/**
+ * A hook that generates a unique ID. It uses React.useId() in React 18+ for SSR safety
+ * and falls back to a client-side-only unique ID generator for older versions.
+ *
+ * The ID will stay the same across renders, and you can optionally provide a prefix.
+ *
+ * @param [prefix] - An optional prefix for the generated ID.
+ * @param [customId] - An optional custom ID to override the generated one.
+ * @returns The unique ID.
+ */
+function useUniqueId(prefix, customId) {
+  /*
+   * We have to call this hook here even if we don't use the result because
+   * rules of hooks demand that hooks are never called conditionally.
+   */
+  var generatedId = (0, _useId.useId)();
+
+  // If a custom ID is provided, it always takes precedence.
+  if (customId) {
+    return customId;
+  }
+
+  // Apply the prefix if one was provided.
+  return prefix ? "".concat(prefix, "-").concat(generatedId) : generatedId;
+}
+
+/**
+ * The useUniqueId hook returns a unique ID that is either reused from external props or generated internally.
+ * Either way the ID is now guaranteed to be present so no more nulls or undefined.
+ */