@spteck/fluentui-react-charts 1.0.5 → 1.0.6

package/src/hooks/useChartFactory.tsx

@@ -0,0 +1,136 @@
+import { Theme, webLightTheme } from "@fluentui/react-components";
+
+import AreaChart from '../charts/areaChart/AreaChart';
+import BarChart from '../charts/BarChart/BarChart';
+import BarHorizontalChart from '../charts/barHorizontalChart/BarHotizontalChart';
+import BubbleChart from '../charts/bubbleChart/BubbleChart';
+import ComboChart from '../charts/ComboChart/ComboChart';
+import DoughnutChart from '../charts/Doughnut/DoughnutChart';
+import FloatingBarChart from '../charts/floatBarChart/FloatBarChart';
+import { IChart } from "../models";
+import LineChart from '../charts/lineChart/LineChart';
+import PieChart from '../charts/PieChart/PieChart';
+import PolarChart from '../charts/polarChart/PolarChart';
+import RadarChart from '../charts/radarChart/RadarChart';
+import React from 'react';
+import ScatterChart from '../charts/scatterChart/ScatterChart';
+import StackedLineChart from '../charts/stackedLineChart/StackedLineChart';
+import SteamChart from '../charts/steamChart/SteamChart';
+
+const chartProps = (chart: IChart) => ({
+  data: chart.data,
+  title: chart.title,
+  getPrimary: (d: any) => d.name,
+  getSecondary: (d: any) => d.value,
+});
+
+const getChartComponent = (chart: IChart, theme: Theme) => {
+  const { type } = chart;
+  const  fuiTheme =  theme ?? webLightTheme; 
+  switch (type) {
+    case 'bar':
+      return <BarChart {...chartProps(chart)} stacked={false} theme={fuiTheme} />;
+    case 'line':
+      return <LineChart {...chartProps(chart)} theme={fuiTheme} />;
+    case 'area':
+      return <AreaChart {...chartProps(chart)} stacked={false} theme={fuiTheme} />;
+
+    case 'bar-horizontal':
+      return <BarHorizontalChart {...chartProps(chart)} stacked={true} theme={fuiTheme} />;
+    case 'bubble':
+      return (
+        <BubbleChart {...chartProps(chart)} getRadius={d => d.radius ?? 1} theme={fuiTheme} />
+      );
+    case 'multiple-axes':
+      return (
+        <ComboChart
+          {...chartProps(chart)}
+          theme={fuiTheme}
+       
+          data={chart.data.map((series: any) => ({
+            label: series.label,
+            type: series.type ?? 'bar',
+            data: series.data,
+            yAxisID: series.secondaryAxisId,
+     
+          }))}
+        />
+      );
+    case 'steam':
+      return <SteamChart {...chartProps(chart)} theme={fuiTheme} />;
+    case 'floating-bar':
+      return (
+        <FloatingBarChart
+          getRange={d => [d.min ?? 0, d.max ?? 0]}
+          {...chartProps(chart)}
+          theme={fuiTheme}
+        />
+      );
+    case 'stacked-line':
+      return <StackedLineChart {...chartProps(chart)} theme={fuiTheme} />;
+    case 'doughnut':
+      return (
+        <DoughnutChart
+          getLabel={datum => datum.name}
+          getValue={datum => datum.value ?? 0}
+          {...chartProps(chart)}
+          theme={fuiTheme}
+        />
+      );
+    case 'pie':
+      return (
+        <PieChart
+          getLabel={datum => datum.name}
+          getValue={datum => datum.value ?? 0}
+          showDataLabels={true}
+          {...chartProps(chart)}
+          theme={fuiTheme}
+        />
+      );
+    case 'scatter':
+      return (
+        <ScatterChart
+          getX={d => {
+            if (typeof d.x === 'number') return d.x;
+            if (typeof d.x === 'string') return Number(d.x) || 0;
+            if (d.x instanceof Date) return d.x.getTime();
+            return 0;
+          }}
+          getY={d => (typeof d.y === 'number' ? d.y : 0)}
+          {...chartProps(chart)}
+          theme={fuiTheme}
+          showDataLabels={false}
+        />
+      );
+    case 'polar':
+      return (
+        <PolarChart
+          data={chart.data}
+          getLabel={d => d.name}
+          getValue={d => d.value ?? 0}
+          title={chart.title}
+          showDataLabels={true} 
+          theme={fuiTheme}
+        />
+      );
+    case 'radar':
+      return (
+        <RadarChart
+          data={chart.data}
+          getLabel={d => d.name}
+          getValue={d => d.value ?? 0}
+          title={chart.title}
+          theme={fuiTheme}
+        />
+      );
+
+    default:
+      throw new Error(`Unsupported chart type: ${type}`);
+  }
+};
+
+export const useChartFactory = () => {
+  return React.useMemo(() => ({
+    getChartComponent
+  }), []);
+};

package/src/hooks/{useGraphUtils.tsx → useChartUtils.tsx}

@@ -5,24 +5,8 @@ import {
   TooltipModel,
   TooltipOptions,
 } from 'chart.js';
-import { Theme, webLightTheme } from '@fluentui/react-components';
 
-import AreaChart from '../charts/areaChart/AreaChart';
-import BarChart from '../charts/BarChart/BarChart';
-import BarHorizontalChart from '../charts/barHorizontalChart/BarHotizontalChart';
-import BubbleChart from '../charts/bubbleChart/BubbleChart';
-import ComboChart from '../charts/ComboChart/ComboChart';
-import DoughnutChart from '../charts/Doughnut/DoughnutChart';
-import FloatingBarChart from '../charts/floatBarChart/FloatBarChart';
-import { IChart } from '../models/IChart';
-import LineChart from '../charts/lineChart/LineChart';
-import PieChart from '../charts/PieChart/PieChart';
-import PolarChart from '../charts/polarChart/PolarChart';
-import RadarChart from '../charts/radarChart/RadarChart';
-import React from 'react';
-import ScatterChart from '../charts/scatterChart/ScatterChart';
-import StackedLineChart from '../charts/stackedLineChart/StackedLineChart';
-import SteamChart from '../charts/steamChart/SteamChart';
+import { Theme } from '@fluentui/react-components';
 import { useMemo } from 'react';
 
 /**
@@ -62,117 +46,7 @@ export const getFluentPalette = (_theme: Theme): string[] => [
   '#79706e',
 ];
 
-const chartProps = (chart: IChart) => ({
-  data: chart.data,
-  title: chart.title,
-  getPrimary: (d: any) => d.name,
-  getSecondary: (d: any) => d.value,
-});
 
-const getChartComponent = (chart: IChart, theme: Theme) => {
-  const { type } = chart;
-  const  fuiTheme =  theme ?? webLightTheme; 
-  switch (type) {
-    case 'bar':
-      return <BarChart {...chartProps(chart)} stacked={false} theme={fuiTheme} />;
-    case 'line':
-      return <LineChart {...chartProps(chart)} theme={fuiTheme} />;
-    case 'area':
-      return <AreaChart {...chartProps(chart)} stacked={false} theme={fuiTheme} />;
-
-    case 'bar-horizontal':
-      return <BarHorizontalChart {...chartProps(chart)} stacked={true} theme={fuiTheme} />;
-    case 'bubble':
-      return (
-        <BubbleChart {...chartProps(chart)} getRadius={d => d.radius ?? 1} theme={fuiTheme} />
-      );
-    case 'multiple-axes':
-      return (
-        <ComboChart
-          {...chartProps(chart)}
-          theme={fuiTheme}
-       
-          data={chart.data.map((series: any) => ({
-            label: series.label,
-            type: series.type ?? 'bar',
-            data: series.data,
-            yAxisID: series.secondaryAxisId,
-     
-          }))}
-        />
-      );
-    case 'steam':
-      return <SteamChart {...chartProps(chart)} theme={fuiTheme} />;
-    case 'floating-bar':
-      return (
-        <FloatingBarChart
-          getRange={d => [d.min ?? 0, d.max ?? 0]}
-          {...chartProps(chart)}
-          theme={fuiTheme}
-        />
-      );
-    case 'stacked-line':
-      return <StackedLineChart {...chartProps(chart)} theme={fuiTheme} />;
-    case 'doughnut':
-      return (
-        <DoughnutChart
-          getLabel={datum => datum.name}
-          getValue={datum => datum.value ?? 0}
-          {...chartProps(chart)}
-          theme={fuiTheme}
-        />
-      );
-    case 'pie':
-      return (
-        <PieChart
-          getLabel={datum => datum.name}
-          getValue={datum => datum.value ?? 0}
-          showDataLabels={true}
-          {...chartProps(chart)}
-          theme={fuiTheme}
-        />
-      );
-    case 'scatter':
-      return (
-        <ScatterChart
-          getX={d => {
-            if (typeof d.x === 'number') return d.x;
-            if (typeof d.x === 'string') return Number(d.x) || 0;
-            if (d.x instanceof Date) return d.x.getTime();
-            return 0;
-          }}
-          getY={d => (typeof d.y === 'number' ? d.y : 0)}
-          {...chartProps(chart)}
-          theme={fuiTheme}
-          showDataLabels={false}
-        />
-      );
-    case 'polar':
-      return (
-        <PolarChart
-          data={chart.data}
-          getLabel={d => d.name}
-          getValue={d => d.value ?? 0}
-          title={chart.title}
-          showDataLabels={true} 
-          theme={fuiTheme}
-        />
-      );
-    case 'radar':
-      return (
-        <RadarChart
-          data={chart.data}
-          getLabel={d => d.name}
-          getValue={d => d.value ?? 0}
-          title={chart.title}
-          theme={fuiTheme}
-        />
-      );
-
-    default:
-      throw new Error(`Unsupported chart type: ${type}`);
-  }
-};
 
 /**
  * Smart Fluent tooltip generator with chart-type awareness.
@@ -297,14 +171,13 @@ 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 function useGraphUtils(theme?: Theme) {
+export function useChartUtils(theme?: Theme) {
   return useMemo(
     () => ({
       lightenColor,
       getFluentPalette,
-      getChartComponent,
       createFluentTooltip,
       createAxisLabelFormatter,
       debounce

package/src/hooks/useIndexedDBCache.ts

@@ -0,0 +1,122 @@
+/* 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,
+} from 'idb';
+
+import { useEffect } from 'react';
+
+export interface CacheData<T> {
+  data: T;
+  timestamp: number;
+}
+
+interface CacheDB<T> extends DBSchema {
+  cache: {
+    key: string;
+    value: CacheData<T>;
+  };
+}
+
+interface UseIndexedDBCacheReturn<T> {
+  getData: (key: string) => Promise<T | undefined>;
+  setData: (key: string, data: T) => Promise<void>;
+  deleteData: (key: string) => Promise<void>;
+  clearAllCache: () => Promise<void>;
+}
+
+const CACHE: string = "application-cache";
+
+const openDatabase = async <T>() => {
+  return openDB<CacheDB<T>>('app-cache-db', 1, {
+    upgrade(db) {
+      db.createObjectStore(CACHE as never);
+    },
+  });
+};
+
+const getCachedData = async <T>(key: string): Promise<T | undefined> => {
+  const db = await openDatabase<T>();
+  const cached = await db.get((CACHE as never), key);
+  return cached ? cached.data : undefined;
+};
+
+const setCachedData = async <T>(key: string, data: T): Promise<void> => {
+  const db = await openDatabase<T>();
+  await db.put(CACHE as never, { data, timestamp: Date.now() }, key);
+};
+
+const deleteCachedData = async (key: string): Promise<void> => {
+  const db = await openDatabase<any>();
+  await db.delete(CACHE as never, key);
+};
+
+const clearCache = async (): Promise<void> => {
+  const db = await openDatabase<any>();
+  await db.clear(CACHE as never);
+};
+
+const clearExpiredCache = async (maxAge: number): Promise<void> => {
+  const db = await openDatabase<any>();
+  const allKeys = await db.getAllKeys(CACHE as never);
+  const now = Date.now();
+
+  for (const key of allKeys) {
+    const cached = await db.get(CACHE as never, key as string);
+    if (cached && now - cached.timestamp > maxAge) {
+      await db.delete(CACHE as never, key);
+    }
+  }
+};
+const 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.
+ */
+export const useIndexedDBCache = <T>(maxAge: number = DEFAULT_MAX_AGE): UseIndexedDBCacheReturn<T> => {
+  useEffect(() => {
+    // Clear expired cache on component mount
+    (async () => {
+      await clearExpiredCache(maxAge);
+    })();
+  }, [maxAge]);
+
+  const getData = async (key: string): Promise<T | undefined> => {
+    return await getCachedData<T>(key);
+  };
+
+  const setData = async (key: string, data: T): Promise<void> => {
+    await setCachedData<T>(key, data);
+  };
+
+  const deleteData = async (key: string): Promise<void> => {
+    await deleteCachedData(key);
+  };
+
+  const clearAllCache = async (): Promise<void> => {
+    await clearCache();
+  };
+
+  return { getData, setData, deleteData, clearAllCache };
+};
+
+export default useIndexedDBCache;

package/src/hooks/useResponsiveLegend.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { ResizeObserver } from '@juggle/resize-observer';
-import { useGraphUtils } from './useGraphUtils';
+import { useChartUtils } from './useChartUtils';
 
 const BUTTON_WIDTH = 100;
 const GAP = 10;
@@ -9,7 +9,7 @@ const GAP = 10;
 export function useResponsiveLegend<T extends { label: string }>(items: T[]) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [maxVisible, setMaxVisible] = useState(items.length);
-  const { debounce } = useGraphUtils();
+  const { debounce } = useChartUtils();
   useEffect(() => {
     const measure = () => {
       const containerWidth = containerRef.current?.offsetWidth ?? 0;

package/src/index.tsx

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

package/src/models/ICardChartContainer.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { ChartDatum } from './ChartDatum';
 import { IChart } from '.';