@spteck/fluentui-react-charts 1.0.6 → 1.0.7

package/dist/fluentui-react-charts.cjs.development.js

@@ -14,8 +14,13 @@ var css = require('@emotion/css');
 var resizeObserver = require('@juggle/resize-observer');
 var reactIcons = require('@fluentui/react-icons');
 var react = require('@iconify/react');
-var m365Hooks = require('@spteck/m365-hooks');
+var idb = require('idb');
 
+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 asyncGeneratorStep(n, t, e, r, o, a, c) {
   try {
     var i = n[a](c),
@@ -41,6 +46,23 @@ function _asyncToGenerator(n) {
     });
   };
 }
+function _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t) return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
+    t && (r = t);
+    var o = 0;
+    return function () {
+      return o >= r.length ? {
+        done: !0
+      } : {
+        done: !1,
+        value: r[o++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -163,6 +185,13 @@ function _regeneratorDefine(e, r, n, t) {
 function _taggedTemplateLiteralLoose(e, t) {
   return t || (t = e.slice(0)), e.raw = t, e;
 }
+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;
+  }
+}
 
 /**
  * Lightens a given hex color by a percentage amount (0 to 1).
@@ -1230,7 +1259,16 @@ var useStyles = function useStyles() {
     hoveredCell: css.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    transform: scale(1.05);\n  "])), reactComponents.tokens.colorNeutralBackground1Hover),
     selectedCell: css.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n  "])), reactComponents.tokens.colorNeutralBackground1Selected),
     menuPopover: css.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    min-width: fit-content;\n  "]))),
-    bottomText: css.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    padding-left: 8px;\n    padding-right: 8px;\n  "])))
+    bottomText: css.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    padding-left: 8px;\n    padding-right: 8px;\n  "]))),
+    zoomContainer: css.css({
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: '6px',
+      width: '100%',
+      boxSizing: 'border-box',
+      padding: '8px 0px'
+    })
   };
 };
 var SelectZoom = function SelectZoom(props) {
@@ -1323,22 +1361,9 @@ var SelectZoom = function SelectZoom(props) {
       padding: 8
     }
   }, React.createElement("div", {
-    style: {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      gap: "6px",
-      width: "100%",
-      boxSizing: "border-box",
-      padding: "8px"
-    }
+    className: styles.zoomContainer
   }, React.createElement(RenderLabel, {
-    label: "Selected Span (" + values.spanCols + " \xD7 " + values.spanRows + ")",
-    icon: React.createElement(react.Icon, {
-      icon: "fluent:number-row-20-regular",
-      width: "32",
-      height: "32"
-    })
+    label: "Span (" + values.spanCols + " \xD7 " + values.spanRows + ")"
   })), React.createElement("div", {
     className: styles.gridContainer,
     style: {
@@ -3509,6 +3534,268 @@ var useDashboardStyles = function useDashboardStyles() {
   };
 };
 
+var CACHE = "application-cache";
+var openDatabase = /*#__PURE__*/function () {
+  var _ref = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          return _context.a(2, idb.openDB('app-cache-db', 1, {
+            upgrade: function upgrade(db) {
+              db.createObjectStore(CACHE);
+            }
+          }));
+      }
+    }, _callee);
+  }));
+  return function openDatabase() {
+    return _ref.apply(this, arguments);
+  };
+}();
+var getCachedData = /*#__PURE__*/function () {
+  var _ref2 = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(key) {
+    var db, cached;
+    return _regenerator().w(function (_context2) {
+      while (1) switch (_context2.n) {
+        case 0:
+          _context2.n = 1;
+          return openDatabase();
+        case 1:
+          db = _context2.v;
+          _context2.n = 2;
+          return db.get(CACHE, key);
+        case 2:
+          cached = _context2.v;
+          return _context2.a(2, cached ? cached.data : undefined);
+      }
+    }, _callee2);
+  }));
+  return function getCachedData(_x) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+var setCachedData = /*#__PURE__*/function () {
+  var _ref3 = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(key, data) {
+    var db;
+    return _regenerator().w(function (_context3) {
+      while (1) switch (_context3.n) {
+        case 0:
+          _context3.n = 1;
+          return openDatabase();
+        case 1:
+          db = _context3.v;
+          _context3.n = 2;
+          return db.put(CACHE, {
+            data: data,
+            timestamp: Date.now()
+          }, key);
+        case 2:
+          return _context3.a(2);
+      }
+    }, _callee3);
+  }));
+  return function setCachedData(_x2, _x3) {
+    return _ref3.apply(this, arguments);
+  };
+}();
+var deleteCachedData = /*#__PURE__*/function () {
+  var _ref4 = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(key) {
+    var db;
+    return _regenerator().w(function (_context4) {
+      while (1) switch (_context4.n) {
+        case 0:
+          _context4.n = 1;
+          return openDatabase();
+        case 1:
+          db = _context4.v;
+          _context4.n = 2;
+          return db["delete"](CACHE, key);
+        case 2:
+          return _context4.a(2);
+      }
+    }, _callee4);
+  }));
+  return function deleteCachedData(_x4) {
+    return _ref4.apply(this, arguments);
+  };
+}();
+var clearCache = /*#__PURE__*/function () {
+  var _ref5 = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+    var db;
+    return _regenerator().w(function (_context5) {
+      while (1) switch (_context5.n) {
+        case 0:
+          _context5.n = 1;
+          return openDatabase();
+        case 1:
+          db = _context5.v;
+          _context5.n = 2;
+          return db.clear(CACHE);
+        case 2:
+          return _context5.a(2);
+      }
+    }, _callee5);
+  }));
+  return function clearCache() {
+    return _ref5.apply(this, arguments);
+  };
+}();
+var clearExpiredCache = /*#__PURE__*/function () {
+  var _ref6 = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(maxAge) {
+    var db, allKeys, now, _iterator, _step, key, cached;
+    return _regenerator().w(function (_context6) {
+      while (1) switch (_context6.n) {
+        case 0:
+          _context6.n = 1;
+          return openDatabase();
+        case 1:
+          db = _context6.v;
+          _context6.n = 2;
+          return db.getAllKeys(CACHE);
+        case 2:
+          allKeys = _context6.v;
+          now = Date.now();
+          _iterator = _createForOfIteratorHelperLoose(allKeys);
+        case 3:
+          if ((_step = _iterator()).done) {
+            _context6.n = 6;
+            break;
+          }
+          key = _step.value;
+          _context6.n = 4;
+          return db.get(CACHE, key);
+        case 4:
+          cached = _context6.v;
+          if (!(cached && now - cached.timestamp > maxAge)) {
+            _context6.n = 5;
+            break;
+          }
+          _context6.n = 5;
+          return db["delete"](CACHE, key);
+        case 5:
+          _context6.n = 3;
+          break;
+        case 6:
+          return _context6.a(2);
+      }
+    }, _callee6);
+  }));
+  return function clearExpiredCache(_x5) {
+    return _ref6.apply(this, arguments);
+  };
+}();
+var DEFAULT_MAX_AGE = 24 * 60 * 60 * 1000; // 1 day in milliseconds
+/**
+ * Custom hook to manage IndexedDB cache with a specified maximum age.
+ *
+ * @template T - The type of data to be cached.
+ * @param {number} [maxAge=DEFAULT_MAX_AGE] - The maximum age (in milliseconds) for cached data before it is considered expired.
+ * @returns {UseIndexedDBCacheReturn<T>} An object containing methods to interact with the cache.
+ *
+ * @example
+ * const { getData, setData, deleteData, clearAllCache } = useIndexedDBCache<MyDataType>(3600000);
+ *
+ * @function
+ * @name useIndexedDBCache
+ * @memberof hooks
+ * @inner
+ *
+ * @typedef {Object} UseIndexedDBCacheReturn<T>
+ * @property {function(string): Promise<T | undefined>} getData - Retrieves cached data by key.
+ * @property {function(string, T): Promise<void>} setData - Caches data with a specified key.
+ * @property {function(string): Promise<void>} deleteData - Deletes cached data by key.
+ * @property {function(): Promise<void>} clearAllCache - Clears all cached data.
+ */
+var useIndexedDBCache = function useIndexedDBCache(maxAge) {
+  if (maxAge === void 0) {
+    maxAge = DEFAULT_MAX_AGE;
+  }
+  React.useEffect(function () {
+    // Clear expired cache on component mount
+    _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+      return _regenerator().w(function (_context7) {
+        while (1) switch (_context7.n) {
+          case 0:
+            _context7.n = 1;
+            return clearExpiredCache(maxAge);
+          case 1:
+            return _context7.a(2);
+        }
+      }, _callee7);
+    }))();
+  }, [maxAge]);
+  var getData = /*#__PURE__*/function () {
+    var _ref8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8(key) {
+      return _regenerator().w(function (_context8) {
+        while (1) switch (_context8.n) {
+          case 0:
+            _context8.n = 1;
+            return getCachedData(key);
+          case 1:
+            return _context8.a(2, _context8.v);
+        }
+      }, _callee8);
+    }));
+    return function getData(_x6) {
+      return _ref8.apply(this, arguments);
+    };
+  }();
+  var setData = /*#__PURE__*/function () {
+    var _ref9 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9(key, data) {
+      return _regenerator().w(function (_context9) {
+        while (1) switch (_context9.n) {
+          case 0:
+            _context9.n = 1;
+            return setCachedData(key, data);
+          case 1:
+            return _context9.a(2);
+        }
+      }, _callee9);
+    }));
+    return function setData(_x7, _x8) {
+      return _ref9.apply(this, arguments);
+    };
+  }();
+  var deleteData = /*#__PURE__*/function () {
+    var _ref0 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0(key) {
+      return _regenerator().w(function (_context0) {
+        while (1) switch (_context0.n) {
+          case 0:
+            _context0.n = 1;
+            return deleteCachedData(key);
+          case 1:
+            return _context0.a(2);
+        }
+      }, _callee0);
+    }));
+    return function deleteData(_x9) {
+      return _ref0.apply(this, arguments);
+    };
+  }();
+  var clearAllCache = /*#__PURE__*/function () {
+    var _ref1 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1() {
+      return _regenerator().w(function (_context1) {
+        while (1) switch (_context1.n) {
+          case 0:
+            _context1.n = 1;
+            return clearCache();
+          case 1:
+            return _context1.a(2);
+        }
+      }, _callee1);
+    }));
+    return function clearAllCache() {
+      return _ref1.apply(this, arguments);
+    };
+  }();
+  return {
+    getData: getData,
+    setData: setData,
+    deleteData: deleteData,
+    clearAllCache: clearAllCache
+  };
+};
+
 var MINIMUM_DASHBOARD_WIDTH = 600;
 var MAX_ROWS = 4;
 var DASHBOARD_LAYOUT_CACHE_KEY = 'dashboard-layout-settings';
@@ -3526,11 +3813,11 @@ var Dashboard = function Dashboard(_ref) {
   var _useChartFactory = useChartFactory(),
     getChartComponent = _useChartFactory.getChartComponent;
   // Cache with 30-day expiration for dashboard layout settings
-  var _useIndexedDBCache = m365Hooks.useIndexedDBCache(CACHE_EXPIRATION_DAYS * 24 * 60 * 60 * 1000),
+  var _useIndexedDBCache = useIndexedDBCache(CACHE_EXPIRATION_DAYS * 24 * 60 * 60 * 1000),
     getData = _useIndexedDBCache.getData,
     setData = _useIndexedDBCache.setData;
   // Cache for card order
-  var _useIndexedDBCache2 = m365Hooks.useIndexedDBCache(CACHE_EXPIRATION_DAYS * 24 * 60 * 60 * 1000),
+  var _useIndexedDBCache2 = useIndexedDBCache(CACHE_EXPIRATION_DAYS * 24 * 60 * 60 * 1000),
     getOrderData = _useIndexedDBCache2.getData,
     setOrderData = _useIndexedDBCache2.setData;
   var _useState = React.useState([]),
@@ -3612,7 +3899,7 @@ var Dashboard = function Dashboard(_ref) {
       };
     }();
     initializeData();
-  }, [cardCharts, getData, getOrderData]);
+  }, [cardCharts]); // Only depend on cardCharts - getData/getOrderData are stable
   // Save sizes to cache whenever they change
   React.useEffect(function () {
     var saveSizesToCache = /*#__PURE__*/function () {
@@ -3644,7 +3931,7 @@ var Dashboard = function Dashboard(_ref) {
     if (Object.keys(sizes).length > 0) {
       saveSizesToCache();
     }
-  }, [sizes, setData]);
+  }, [sizes]); // Only depend on sizes - setData is stable
   // Save card order to cache whenever it changes
   React.useEffect(function () {
     var saveOrderToCache = /*#__PURE__*/function () {
@@ -3679,7 +3966,7 @@ var Dashboard = function Dashboard(_ref) {
     if (CardChartContainer.length > 0) {
       saveOrderToCache();
     }
-  }, [CardChartContainer, setOrderData]);
+  }, [CardChartContainer]); // Only depend on CardChartContainer - setOrderData is stable
   React.useEffect(function () {
     if (containerWidth <= MINIMUM_DASHBOARD_WIDTH) {
       setSizes(function () {