@spteck/fluentui-react-charts 1.0.6 → 1.0.7

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.6",
+  "version": "1.0.7",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -54,9 +54,9 @@
     "@fluentui/react-components": "^9.66.2",
     "@iconify/react": "^6.0.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@spteck/m365-hooks": "^1.2.0",
     "chart.js": "^4.5.0",
     "chartjs-plugin-datalabels": "^2.2.0",
+    "idb": "^8.0.3",
     "react": "^18.3.1",
     "react-chartjs-2": "^5.3.0",
     "react-charts": "^3.0.0-beta.57",

package/src/components/dashboard/DashBoard.tsx

@@ -13,7 +13,7 @@ import { NoDashboards } from './NoDashboards';
 import { SelectZoom } from './selectZoom/SelectZoom';
 import { useChartFactory } from '../../hooks/useChartFactory';
 import { useDashboardStyles } from './useDashboardStyles';
-import { useIndexedDBCache } from '@spteck/m365-hooks';
+import { useIndexedDBCache } from '../../hooks/useIndexedDBCache';
 
 const MINIMUM_DASHBOARD_WIDTH = 600;
 const MAX_ROWS = 4;
@@ -115,7 +115,7 @@ export const Dashboard: React.FC<IDashboardProps> = ({
     };
     
     initializeData();
-  }, [cardCharts, getData, getOrderData]);
+  }, [cardCharts]); // Only depend on cardCharts - getData/getOrderData are stable
 
   // Save sizes to cache whenever they change
   useEffect(() => {
@@ -131,7 +131,7 @@ export const Dashboard: React.FC<IDashboardProps> = ({
     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
   useEffect(() => {
@@ -148,7 +148,7 @@ export const Dashboard: React.FC<IDashboardProps> = ({
     if (CardChartContainer.length > 0) {
       saveOrderToCache();
     }
-  }, [CardChartContainer, setOrderData]);
+  }, [CardChartContainer]); // Only depend on CardChartContainer - setOrderData is stable
 
   useEffect(() => {
     if (containerWidth <= MINIMUM_DASHBOARD_WIDTH) {

package/src/components/dashboard/selectZoom/SelectZoom.tsx

@@ -16,7 +16,6 @@ import {
   bundleIcon,
 } from "@fluentui/react-icons";
 
-import { Icon } from "@iconify/react";
 import { RenderLabel } from "../../RenderLabel";
 import { css } from "@emotion/css";
 
@@ -35,6 +34,7 @@ const useStyles = (): {
   selectedCell: string;
   menuPopover: string;
   bottomText: string;
+  zoomContainer: string;
 } => ({
   gridContainer: css`
     display: grid;
@@ -65,8 +65,17 @@ const useStyles = (): {
     padding-left: 8px;
     padding-right: 8px;
   `,
- 
-   
+  zoomContainer: css({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: '6px',
+    width: '100%',
+    boxSizing: 'border-box',
+    
+    padding: '8px 0px',
+    
+  }),
 });
 
 export const SelectZoom: React.FunctionComponent<ISelectZoomProps> = (
@@ -148,25 +157,11 @@ export const SelectZoom: React.FunctionComponent<ISelectZoomProps> = (
         style={{ width: `${popoverWidth}px`, minWidth: "120px", padding: 8 }}
       >
         <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "center",
-            gap: "6px",
-            width: "100%",
-            boxSizing: "border-box",
-            padding: "8px",
-          }}
+          className={styles.zoomContainer}        
         >
           <RenderLabel
-            label={`Selected Span (${values.spanCols} × ${values.spanRows})`}
-            icon={
-              <Icon
-                icon="fluent:number-row-20-regular"
-                width="32"
-                height="32"
-              />
-            }
+            label={`Span (${values.spanCols} × ${values.spanRows})`}
+           
           />
         </div>
 

package/src/hooks/useIndexedDBCache.ts

@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/no-floating-promises */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
 import {
   DBSchema,
   openDB,