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

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/node_modules/recharts/lib/component/responsiveContainerUtils.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultResponsiveContainerProps = exports.calculateChartDimensions = void 0;
+exports.getDefaultWidthAndHeight = getDefaultWidthAndHeight;
+exports.getInnerDivStyle = void 0;
+var _DataUtils = require("../util/DataUtils");
+var defaultResponsiveContainerProps = exports.defaultResponsiveContainerProps = {
+  width: '100%',
+  height: '100%',
+  debounce: 0,
+  minWidth: 0,
+  initialDimension: {
+    width: -1,
+    height: -1
+  }
+};
+var calculateChartDimensions = (containerWidth, containerHeight, props) => {
+  var _props$width = props.width,
+    width = _props$width === void 0 ? defaultResponsiveContainerProps.width : _props$width,
+    _props$height = props.height,
+    height = _props$height === void 0 ? defaultResponsiveContainerProps.height : _props$height,
+    aspect = props.aspect,
+    maxHeight = props.maxHeight;
+
+  /*
+   * The containerWidth and containerHeight are already percentage based because it's set as that percentage in CSS.
+   * Means we don't have to calculate percentages here.
+   */
+  var calculatedWidth = (0, _DataUtils.isPercent)(width) ? containerWidth : Number(width);
+  var calculatedHeight = (0, _DataUtils.isPercent)(height) ? containerHeight : Number(height);
+  if (aspect && aspect > 0) {
+    // Preserve the desired aspect ratio
+    if (calculatedWidth) {
+      // Will default to using width for aspect ratio
+      calculatedHeight = calculatedWidth / aspect;
+    } else if (calculatedHeight) {
+      // But we should also take height into consideration
+      calculatedWidth = calculatedHeight * aspect;
+    }
+
+    // if maxHeight is set, overwrite if calculatedHeight is greater than maxHeight
+    if (maxHeight && calculatedHeight != null && calculatedHeight > maxHeight) {
+      calculatedHeight = maxHeight;
+    }
+  }
+  return {
+    calculatedWidth,
+    calculatedHeight
+  };
+};
+exports.calculateChartDimensions = calculateChartDimensions;
+var bothOverflow = {
+  width: 0,
+  height: 0,
+  overflow: 'visible'
+};
+var overflowX = {
+  width: 0,
+  overflowX: 'visible'
+};
+var overflowY = {
+  height: 0,
+  overflowY: 'visible'
+};
+var noStyle = {};
+
+/**
+ * This zero-size, overflow-visible is required to allow the chart to shrink.
+ * Without it, the chart itself will fill the ResponsiveContainer, and while it allows the chart to grow,
+ * it would always keep the container at the size of the chart,
+ * and ResizeObserver would never fire.
+ * With this zero-size element, the chart itself never actually fills the container,
+ * it just so happens that it is visible because it overflows.
+ * I learned this trick from the `react-virtualized` library: https://github.com/bvaughn/react-virtualized-auto-sizer/blob/master/src/AutoSizer.ts
+ * See https://github.com/recharts/recharts/issues/172 and also https://github.com/bvaughn/react-virtualized/issues/68
+ *
+ * Also, we don't need to apply the zero-size style if the dimension is a fixed number (or undefined),
+ * because in that case the chart can't shrink in that dimension anyway.
+ * This fixes defining the dimensions using aspect ratio: https://github.com/recharts/recharts/issues/6245
+ */
+var getInnerDivStyle = props => {
+  var width = props.width,
+    height = props.height;
+  var isWidthPercent = (0, _DataUtils.isPercent)(width);
+  var isHeightPercent = (0, _DataUtils.isPercent)(height);
+  if (isWidthPercent && isHeightPercent) {
+    return bothOverflow;
+  }
+  if (isWidthPercent) {
+    return overflowX;
+  }
+  if (isHeightPercent) {
+    return overflowY;
+  }
+  return noStyle;
+};
+exports.getInnerDivStyle = getInnerDivStyle;
+function getDefaultWidthAndHeight(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    aspect = _ref.aspect;
+  var calculatedWidth = width;
+  var calculatedHeight = height;
+  if (calculatedWidth === undefined && calculatedHeight === undefined) {
+    calculatedWidth = defaultResponsiveContainerProps.width;
+    calculatedHeight = defaultResponsiveContainerProps.height;
+  } else if (calculatedWidth === undefined) {
+    calculatedWidth = aspect && aspect > 0 ? undefined : defaultResponsiveContainerProps.width;
+  } else if (calculatedHeight === undefined) {
+    calculatedHeight = aspect && aspect > 0 ? undefined : defaultResponsiveContainerProps.height;
+  }
+  return {
+    width: calculatedWidth,
+    height: calculatedHeight
+  };
+}