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/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;
+}