@spteck/fluentui-react-charts 1.0.4 → 1.0.6

package/dist/hooks/index.d.ts

@@ -1 +1 @@
-export * from './useGraphUtils';
+export * from './useChartUtils';

package/dist/hooks/useChartFactory.d.ts

@@ -0,0 +1,6 @@
+import { Theme } from "@fluentui/react-components";
+import { IChart } from "../models";
+import React from 'react';
+export declare const useChartFactory: () => {
+    getChartComponent: (chart: IChart, theme: Theme) => React.JSX.Element;
+};

package/dist/hooks/{useGraphUtils.d.ts → useChartUtils.d.ts}

@@ -1,7 +1,5 @@
 import { ChartType, TooltipOptions } from 'chart.js';
 import { Theme } from '@fluentui/react-components';
-import { IChart } from '../models/IChart';
-import React from 'react';
 /**
  * Lightens a given hex color by a percentage amount (0 to 1).
  */
@@ -21,12 +19,11 @@ export declare const createAxisLabelFormatter: ({ maxLength, suffix, prefix, }:
 }) => (this: any, value: string | number) => string;
 declare function debounce<T extends (...args: any[]) => void>(fn: T, delay: number): T;
 /**
- * useGraphUtils — shared theming and chart helpers.
+ * useChartUtils — shared theming and chart helpers.
  */
-export declare function useGraphUtils(theme?: Theme): {
+export declare function useChartUtils(theme?: Theme): {
     lightenColor: (hex: string, amount: number) => string;
     getFluentPalette: (_theme: Theme) => string[];
-    getChartComponent: (chart: IChart, theme: Theme) => React.JSX.Element;
     createFluentTooltip: typeof createFluentTooltip;
     createAxisLabelFormatter: ({ maxLength, suffix, prefix, }: {
         maxLength?: number | undefined;

package/dist/hooks/useIndexedDBCache.d.ts

@@ -0,0 +1,33 @@
+export interface CacheData<T> {
+    data: T;
+    timestamp: number;
+}
+interface UseIndexedDBCacheReturn<T> {
+    getData: (key: string) => Promise<T | undefined>;
+    setData: (key: string, data: T) => Promise<void>;
+    deleteData: (key: string) => Promise<void>;
+    clearAllCache: () => Promise<void>;
+}
+/**
+ * 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.
+ */
+export declare const useIndexedDBCache: <T>(maxAge?: number) => UseIndexedDBCacheReturn<T>;
+export default useIndexedDBCache;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './hooks';
+export { useChartUtils as useGraphUtils } from './hooks/useChartUtils';
 export * from './models';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.4",
+  "version": "1.0.6",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -54,6 +54,7 @@
     "@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",
     "react": "^18.3.1",

package/src/charts/BarChart/BarChart.tsx

@@ -9,7 +9,7 @@ import {
   Tooltip,
 } from 'chart.js';
 import React, { useMemo, useState } from 'react';
-import { createAxisLabelFormatter, useGraphUtils } from '../../hooks/useGraphUtils';
+import { createAxisLabelFormatter, useChartUtils } from '../../hooks/useChartUtils';
 
 import { Bar } from 'react-chartjs-2';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
@@ -50,7 +50,7 @@ export default function BarChart<T extends object>({
     data.length > 1 ? data.map(s => s.label) : [data[0]?.label]
   );
 
-  const { lightenColor, getFluentPalette, createFluentTooltip } = useGraphUtils(
+  const { lightenColor, getFluentPalette, createFluentTooltip } = useChartUtils(
     theme
   );
   const styles = useGraphGlobalStyles();

package/src/charts/ComboChart/ComboChart.tsx

@@ -16,8 +16,8 @@ import { Theme, webLightTheme } from '@fluentui/react-components';
 import { Chart } from 'react-chartjs-2';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import RenderLegend from '../../components/RenderLegend/RenderLegend';
+import { useChartUtils } from '../../hooks/useChartUtils';
 import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
-import { useGraphUtils } from '../../hooks/useGraphUtils';
 
 ChartJS.register(ChartDataLabels);
 ChartJS.register(
@@ -58,7 +58,7 @@ export default function ComboChart<T extends object>({
   );
 
  const styles = useGraphGlobalStyles();
-  const { lightenColor, getFluentPalette, createFluentTooltip } = useGraphUtils(theme);
+  const { lightenColor, getFluentPalette, createFluentTooltip } = useChartUtils(theme);
 
   const seriesColors = useMemo(() => {
     return data.reduce((acc, series, idx) => {

package/src/charts/Doughnut/DoughnutChart.tsx

@@ -12,8 +12,8 @@ import { Theme, webLightTheme } from '@fluentui/react-components';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { Doughnut } from 'react-chartjs-2';
 import RenderValueLegend from '../../components/renderValueLegend/RenderValueLegend';
+import { useChartUtils } from '../../hooks/useChartUtils';
 import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
-import { useGraphUtils } from '../../hooks/useGraphUtils';
 
 ChartJS.register(ChartDataLabels);
 ChartJS.register(ArcElement, Tooltip, Legend, Title);
@@ -39,7 +39,7 @@ export default function DoughnutChart<T extends object>({
   theme = webLightTheme,
 }: DoughnutChartProps<T>) {
   const styles = useGraphGlobalStyles();
-  const { lightenColor, getFluentPalette, createFluentTooltip } = useGraphUtils(
+  const { lightenColor, getFluentPalette, createFluentTooltip } = useChartUtils(
     theme
   );
   const [hiddenLabels, setHiddenLabels] = useState<string[]>([]);

package/src/charts/PieChart/PieChart.tsx

@@ -12,9 +12,9 @@ import { Theme, webLightTheme } from '@fluentui/react-components';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { Pie } from 'react-chartjs-2';
 import RenderValueLegend from '../../components/renderValueLegend/RenderValueLegend';
-import { createFluentTooltip } from '../../hooks/useGraphUtils';
+import { createFluentTooltip } from '../../hooks/useChartUtils';
+import { useChartUtils } from '../../hooks/useChartUtils';
 import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
-import { useGraphUtils } from '../../hooks/useGraphUtils';
 
 ChartJS.register(ChartDataLabels);
 ChartJS.register(ArcElement, Tooltip, Legend, Title);
@@ -39,7 +39,7 @@ export default function PieChart<T extends object>({
   showDataLabels = false,
   theme = webLightTheme,
 }: PieChartProps<T>) {
-  const { getFluentPalette, lightenColor } = useGraphUtils(theme);
+  const { getFluentPalette, lightenColor } = useChartUtils(theme);
   const [hiddenLabels, setHiddenLabels] = useState<string[]>([]);
   const styles = useGraphGlobalStyles();
   const toggleLabel = (label: string): void => {

package/src/charts/areaChart/AreaChart.tsx

@@ -16,8 +16,8 @@ import { Theme, webLightTheme } from '@fluentui/react-components';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { Line } from 'react-chartjs-2';
 import RenderLegend from '../../components/RenderLegend/RenderLegend';
+import { useChartUtils } from '../../hooks/useChartUtils';
 import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
-import { useGraphUtils } from '../../hooks/useGraphUtils';
 
 ChartJS.register(
   CategoryScale,
@@ -55,7 +55,7 @@ export default function AreaChart<T extends object>({
   );
 
  const styles = useGraphGlobalStyles();
-  const { lightenColor, getFluentPalette, createFluentTooltip } = useGraphUtils(
+  const { lightenColor, getFluentPalette, createFluentTooltip } = useChartUtils(
     theme
   );
 

package/src/charts/barHorizontalChart/BarHotizontalChart.tsx

@@ -14,8 +14,8 @@ import { Bar } from 'react-chartjs-2';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import RenderLegend from '../../components/RenderLegend/RenderLegend';
 import { Theme } from '@fluentui/react-theme';
+import { useChartUtils } from '../../hooks/useChartUtils';
 import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
-import { useGraphUtils } from '../../hooks/useGraphUtils';
 
 ChartJS.register(
   CategoryScale,
@@ -55,7 +55,7 @@ export default function BarHorizontalChart<T extends object>({
   );
 const styles = useGraphGlobalStyles();
  
-  const { lightenColor, getFluentPalette , createFluentTooltip} = useGraphUtils(theme);
+  const { lightenColor, getFluentPalette , createFluentTooltip} = useChartUtils(theme);
 
   const seriesColors = useMemo(() => {
     return data.reduce((acc, series, idx) => {

package/src/charts/bubbleChart/BubbleChart.tsx

@@ -15,8 +15,8 @@ import { Theme, webLightTheme } from '@fluentui/react-components';
 import { Bubble } from 'react-chartjs-2';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import RenderLegend from '../../components/RenderLegend/RenderLegend';
+import { useChartUtils } from '../../hooks/useChartUtils';
 import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
-import { useGraphUtils } from '../../hooks/useGraphUtils';
 
 ChartJS.register(
   CategoryScale,
@@ -51,7 +51,7 @@ export default function BubbleChart<T extends object>({
     data.length > 1 ? data.map(s => s.label) : [data[0]?.label]
   );
 
-  const { lightenColor, getFluentPalette, createFluentTooltip } = useGraphUtils(
+  const { lightenColor, getFluentPalette, createFluentTooltip } = useChartUtils(
     theme
   );
 

package/src/charts/floatBarChart/FloatBarChart.tsx

@@ -14,8 +14,8 @@ import { Theme, webLightTheme } from '@fluentui/react-components';
 import { Bar } from 'react-chartjs-2';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import RenderLegend from '../../components/RenderLegend/RenderLegend';
+import { useChartUtils } from '../../hooks/useChartUtils';
 import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
-import { useGraphUtils } from '../../hooks/useGraphUtils';
 
 ChartJS.register(ChartDataLabels);
 ChartJS.register(
@@ -49,7 +49,7 @@ export default function FloatingBarChart<T extends object>({
   );
 
   const styles = useGraphGlobalStyles();
-  const { lightenColor, getFluentPalette, createFluentTooltip } = useGraphUtils(
+  const { lightenColor, getFluentPalette, createFluentTooltip } = useChartUtils(
     theme
   );
 

package/src/charts/lineChart/LineChart.tsx

@@ -15,8 +15,8 @@ import { Theme, webLightTheme } from '@fluentui/react-components';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { Line } from 'react-chartjs-2';
 import RenderLegend from '../../components/RenderLegend/RenderLegend';
+import { useChartUtils } from '../../hooks/useChartUtils';
 import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
-import { useGraphUtils } from '../../hooks/useGraphUtils';
 
 ChartJS.register(ChartDataLabels);
 ChartJS.register(
@@ -51,7 +51,7 @@ export default function LineChart<T extends object>({
   );
 
   const styles = useGraphGlobalStyles();
-  const { lightenColor, getFluentPalette , createFluentTooltip} = useGraphUtils(theme);
+  const { lightenColor, getFluentPalette , createFluentTooltip} = useChartUtils(theme);
 
   const seriesColors = useMemo(() => {
     return data.reduce((acc, series, idx) => {

package/src/charts/polarChart/PolarChart.tsx

@@ -9,7 +9,7 @@ import {
 } from 'chart.js';
 import React, { useMemo, useState } from 'react';
 import { Theme, webLightTheme } from '@fluentui/react-components';
-import { createFluentTooltip, useGraphUtils } from '../../hooks/useGraphUtils';
+import { createFluentTooltip, useChartUtils } from '../../hooks/useChartUtils';
 
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { PolarArea } from 'react-chartjs-2';
@@ -45,7 +45,7 @@ export default function PolarChart<T extends object>({
   showDataLabels = true,
   theme = webLightTheme,
 }: PolarChartProps<T>) {
-  const { getFluentPalette, lightenColor } = useGraphUtils(theme);
+  const { getFluentPalette, lightenColor } = useChartUtils(theme);
   const [hiddenLabels, setHiddenLabels] = useState<string[]>([]);
   const styles = useGraphGlobalStyles();
   const toggleLabel = (label: string) => {

package/src/charts/radarChart/RadarChart.tsx

@@ -11,7 +11,7 @@ import {
 } from 'chart.js';
 import React, { useMemo, useState } from 'react';
 import { Theme, webLightTheme } from '@fluentui/react-components';
-import { createFluentTooltip, useGraphUtils } from '../../hooks/useGraphUtils';
+import { createFluentTooltip, useChartUtils } from '../../hooks/useChartUtils';
 
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { Radar } from 'react-chartjs-2';
@@ -51,7 +51,7 @@ export default function RadarChart<T extends object>({
   );
 
    const styles = useGraphGlobalStyles();
-  const { lightenColor, getFluentPalette } = useGraphUtils(theme);
+  const { lightenColor, getFluentPalette } = useChartUtils(theme);
 
   const seriesColors = useMemo(() => {
     return data.reduce((acc, series, idx) => {

package/src/charts/scatterChart/ScatterChart.tsx

@@ -12,8 +12,8 @@ import { Theme, webLightTheme } from '@fluentui/react-components';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import RenderLegend from '../../components/RenderLegend/RenderLegend';
 import { Scatter } from 'react-chartjs-2';
+import { useChartUtils } from '../../hooks/useChartUtils';
 import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
-import { useGraphUtils } from '../../hooks/useGraphUtils';
 
 ChartJS.register(ChartDataLabels);
 ChartJS.register(LinearScale, PointElement, Tooltip, Legend);
@@ -39,7 +39,7 @@ export default function ScatterChart<T extends object>({
     data.map(s => s.label)
   );
  const styles = useGraphGlobalStyles();
-  const { getFluentPalette, lightenColor, createFluentTooltip } = useGraphUtils(
+  const { getFluentPalette, lightenColor, createFluentTooltip } = useChartUtils(
     theme
   );
 

package/src/charts/stackedLineChart/StackedLineChart.tsx

@@ -15,8 +15,8 @@ import { Theme, webLightTheme } from '@fluentui/react-components';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { Line } from 'react-chartjs-2';
 import RenderLegend from '../../components/RenderLegend/RenderLegend';
+import { useChartUtils } from '../../hooks/useChartUtils';
 import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
-import { useGraphUtils } from '../../hooks/useGraphUtils';
 
 ChartJS.register(ChartDataLabels);
 ChartJS.register(
@@ -51,7 +51,7 @@ export default function StackedLineChart<T extends object>({
   );
 
    const  styles = useGraphGlobalStyles();
-  const { lightenColor, getFluentPalette, createFluentTooltip } = useGraphUtils(theme);
+  const { lightenColor, getFluentPalette, createFluentTooltip } = useChartUtils(theme);
 
   const seriesColors = useMemo(() => {
     return data.reduce((acc, series, idx) => {

package/src/charts/steamChart/SteamChart.tsx

@@ -12,7 +12,7 @@ import {
 } from 'chart.js';
 import React, { useMemo, useState } from 'react';
 import { Theme, ToggleButton, webLightTheme } from '@fluentui/react-components';
-import { createFluentTooltip, useGraphUtils } from '../../hooks/useGraphUtils';
+import { createFluentTooltip, useChartUtils } from '../../hooks/useChartUtils';
 
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { Line } from 'react-chartjs-2';
@@ -55,7 +55,7 @@ export default function SteamChart<T extends object>({
   const [showPercent, setShowPercent] = useState(false);
 const styles = useGraphGlobalStyles();
  
-  const { lightenColor, getFluentPalette } = useGraphUtils(theme);
+  const { lightenColor, getFluentPalette } = useChartUtils(theme);
 
   const seriesColors = useMemo(() => {
     return data.reduce((acc, series, idx) => {

package/src/components/dashboard/DashBoard.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Card, CardHeader, Text, Theme } from '@fluentui/react-components';
 import React, {
   useCallback,
@@ -13,11 +11,15 @@ import { ICardChartContainer } from '../../models/ICardChartContainer';
 import { IDashboardProps } from './IDashboardProps';
 import { NoDashboards } from './NoDashboards';
 import { SelectZoom } from './selectZoom/SelectZoom';
+import { useChartFactory } from '../../hooks/useChartFactory';
 import { useDashboardStyles } from './useDashboardStyles';
-import { useGraphUtils } from '../../hooks';
+import { useIndexedDBCache } from '@spteck/m365-hooks';
 
 const MINIMUM_DASHBOARD_WIDTH = 600;
 const MAX_ROWS = 4;
+const DASHBOARD_LAYOUT_CACHE_KEY = 'dashboard-layout-settings';
+const DASHBOARD_ORDER_CACHE_KEY = 'dashboard-card-order';
+const CACHE_EXPIRATION_DAYS = 30;
 
 export const Dashboard: React.FC<IDashboardProps> = ({
   cardCharts,
@@ -27,8 +29,22 @@ export const Dashboard: React.FC<IDashboardProps> = ({
   maxSpanRows = MAX_ROWS,
 }) => {
   const styles = useDashboardStyles();
+  const { getChartComponent } = useChartFactory();
+  
+  // Cache with 30-day expiration for dashboard layout settings
+  const { getData, setData } = useIndexedDBCache<Record<string, { spanCols: number; spanRows: number }>>(
+    CACHE_EXPIRATION_DAYS * 24 * 60 * 60 * 1000
+  );
+
+  // Cache for card order
+  const { 
+    getData: getOrderData, 
+    setData: setOrderData 
+  } = useIndexedDBCache<string[]>(
+    CACHE_EXPIRATION_DAYS * 24 * 60 * 60 * 1000
+  );
 
-  const { getChartComponent } = useGraphUtils(theme as Theme);
+ 
 
   const [CardChartContainer, setCardChartContainer] = useState<
     ICardChartContainer[]
@@ -42,21 +58,97 @@ export const Dashboard: React.FC<IDashboardProps> = ({
   const containerRef = useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
-    setCardChartContainer(cardCharts);
-    setSizes(() => {
-      const initialSizes: Record<
-        string,
-        { spanCols: number; spanRows: number }
-      > = {};
-      cardCharts.forEach(c => {
-        initialSizes[c.id] = {
-          spanCols: c.defaultSpan?.spanCols ?? 1,
-          spanRows: c.defaultSpan?.spanRows ?? 1,
-        };
-      });
-      return initialSizes;
-    });
-  }, [cardCharts]);
+    // Load cached card order and sizes
+    const initializeData = async () => {
+      try {
+        const [cachedSizes, cachedOrder] = await Promise.all([
+          getData(DASHBOARD_LAYOUT_CACHE_KEY),
+          getOrderData(DASHBOARD_ORDER_CACHE_KEY)
+        ]);
+        
+        // Restore card order if available, otherwise use original order
+        let orderedCards = cardCharts;
+        if (cachedOrder && cachedOrder.length > 0) {
+          // Reorder cards based on cached order, but handle cases where cards might have been added/removed
+          const cardMap = new Map(cardCharts.map(card => [card.id, card]));
+          const validCachedOrder = cachedOrder.filter(id => cardMap.has(id));
+          const missingCards = cardCharts.filter(card => !cachedOrder.includes(card.id));
+          
+          orderedCards = [
+            ...validCachedOrder.map(id => cardMap.get(id)!),
+            ...missingCards
+          ];
+        }
+        
+        setCardChartContainer(orderedCards);
+        
+        const initialSizes: Record<
+          string,
+          { spanCols: number; spanRows: number }
+        > = {};
+        
+        cardCharts.forEach(c => {
+          const cachedSize = cachedSizes?.[c.id];
+          initialSizes[c.id] = {
+            spanCols: cachedSize?.spanCols ?? c.defaultSpan?.spanCols ?? 1,
+            spanRows: cachedSize?.spanRows ?? c.defaultSpan?.spanRows ?? 1,
+          };
+        });
+        
+        setSizes(initialSizes);
+      } catch (error) {
+        // Fallback to default values if cache fails
+        console.warn('Failed to load dashboard data from cache:', error);
+        setCardChartContainer(cardCharts);
+        const fallbackSizes: Record<
+          string,
+          { spanCols: number; spanRows: number }
+        > = {};
+        cardCharts.forEach(c => {
+          fallbackSizes[c.id] = {
+            spanCols: c.defaultSpan?.spanCols ?? 1,
+            spanRows: c.defaultSpan?.spanRows ?? 1,
+          };
+        });
+        setSizes(fallbackSizes);
+      }
+    };
+    
+    initializeData();
+  }, [cardCharts, getData, getOrderData]);
+
+  // Save sizes to cache whenever they change
+  useEffect(() => {
+    const saveSizesToCache = async () => {
+      try {
+        await setData(DASHBOARD_LAYOUT_CACHE_KEY, sizes);
+      } catch (error) {
+        console.warn('Failed to save dashboard layout to cache:', error);
+      }
+    };
+
+    // Only save if sizes is not empty (avoid saving initial empty state)
+    if (Object.keys(sizes).length > 0) {
+      saveSizesToCache();
+    }
+  }, [sizes, setData]);
+
+  // Save card order to cache whenever it changes
+  useEffect(() => {
+    const saveOrderToCache = async () => {
+      try {
+        const cardOrder = CardChartContainer.map(card => card.id);
+        await setOrderData(DASHBOARD_ORDER_CACHE_KEY, cardOrder);
+      } catch (error) {
+        console.warn('Failed to save dashboard order to cache:', error);
+      }
+    };
+
+    // Only save if CardChartContainer is not empty
+    if (CardChartContainer.length > 0) {
+      saveOrderToCache();
+    }
+  }, [CardChartContainer, setOrderData]);
 
   useEffect(() => {
     if (containerWidth <= MINIMUM_DASHBOARD_WIDTH) {
@@ -110,12 +202,14 @@ export const Dashboard: React.FC<IDashboardProps> = ({
 
   const handleZoomSelect = useCallback(
     (id: string, span: { spanCols: number; spanRows: number }) => {
+      const newSizes = {
+        spanCols: Math.min(Math.max(span.spanCols, 1), maxZoom),
+        spanRows: Math.min(Math.max(span.spanRows, 1), maxSpanRows),
+      };
+      
       setSizes(prev => ({
         ...prev,
-        [id]: {
-          spanCols: Math.min(Math.max(span.spanCols, 1), maxZoom),
-          spanRows: Math.min(Math.max(span.spanRows, 1), maxSpanRows),
-        },
+        [id]: newSizes,
       }));
     },
     [maxZoom, maxSpanRows]

package/src/components/dashboard/ExampleDashboardUsage.tsx

@@ -105,7 +105,7 @@ const ExampleDashboardUsage: React.FC<{ theme: Theme }> = ({ theme }) => {
         cardCharts={cardChartContainers}
         theme={theme ?? webLightTheme}
         containerWidth={window.innerWidth}
-        containerHeight={window.innerHeight - 100} // Adjust height for header
+        containerHeight={(window.innerHeight - 100).toString()} // Adjust height for header
       />
     </Stack>
   );

package/src/components/dashboard/IDashboardProps.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { ICardChartContainer } from '../../models/ICardChartContainer';
 import { Theme } from '@fluentui/react-components';
 

package/src/hooks/index.ts

@@ -1 +1 @@
-export * from './useGraphUtils';
+export * from './useChartUtils';