@spteck/fluentui-react-charts 1.0.7 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/charts/BarChart/BarChart.d.ts +2 -1
- package/dist/charts/ComboChart/ComboChart.d.ts +2 -1
- package/dist/charts/Doughnut/DoughnutChart.d.ts +2 -1
- package/dist/charts/PieChart/PieChart.d.ts +2 -1
- package/dist/charts/areaChart/AreaChart.d.ts +2 -1
- package/dist/charts/barHorizontalChart/BarHotizontalChart.d.ts +2 -1
- package/dist/charts/bubbleChart/BubbleChart.d.ts +2 -1
- package/dist/charts/floatBarChart/FloatBarChart.d.ts +2 -1
- package/dist/charts/index.d.ts +14 -0
- package/dist/charts/lineChart/LineChart.d.ts +2 -1
- package/dist/charts/polarChart/PolarChart.d.ts +2 -1
- package/dist/charts/radarChart/RadarChart.d.ts +2 -1
- package/dist/charts/scatterChart/ScatterChart.d.ts +2 -1
- package/dist/charts/stackedLineChart/StackedLineChart.d.ts +2 -1
- package/dist/charts/steamChart/SteamChart.d.ts +2 -1
- package/dist/components/index.d.ts +0 -14
- package/dist/fluentui-react-charts.cjs.development.js +1086 -1072
- package/dist/fluentui-react-charts.cjs.development.js.map +1 -1
- package/dist/fluentui-react-charts.cjs.production.min.js +1 -1
- package/dist/fluentui-react-charts.cjs.production.min.js.map +1 -1
- package/dist/fluentui-react-charts.esm.js +1074 -1074
- package/dist/fluentui-react-charts.esm.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/package.json +3 -3
- package/src/assets/sample1.png +0 -0
- package/src/assets/sample2.png +0 -0
- package/src/assets/sample3.png +0 -0
- package/src/charts/BarChart/BarChart.tsx +0 -227
- package/src/charts/BarChart/README.MD +0 -335
- package/src/charts/BarChart/index.ts +0 -1
- package/src/charts/ComboChart/ComboChart.tsx +0 -209
- package/src/charts/ComboChart/README.MD +0 -347
- package/src/charts/ComboChart/index.ts +0 -1
- package/src/charts/Doughnut/DoughnutChart.tsx +0 -152
- package/src/charts/Doughnut/README.MD +0 -296
- package/src/charts/Doughnut/index.ts +0 -1
- package/src/charts/PieChart/PieChart.tsx +0 -148
- package/src/charts/PieChart/README.MD +0 -315
- package/src/charts/PieChart/index.ts +0 -1
- package/src/charts/areaChart/AreaChart.tsx +0 -195
- package/src/charts/areaChart/README.MD +0 -236
- package/src/charts/areaChart/index.ts +0 -1
- package/src/charts/barHorizontalChart/BarHotizontalChart.tsx +0 -200
- package/src/charts/barHorizontalChart/README.MD +0 -278
- package/src/charts/barHorizontalChart/index.ts +0 -2
- package/src/charts/bubbleChart/BubbleChart.tsx +0 -184
- package/src/charts/bubbleChart/README.MD +0 -275
- package/src/charts/bubbleChart/index.ts +0 -1
- package/src/charts/floatBarChart/FloatBarChart.tsx +0 -178
- package/src/charts/floatBarChart/README.MD +0 -354
- package/src/charts/floatBarChart/index.ts +0 -1
- package/src/charts/lineChart/LineChart.tsx +0 -200
- package/src/charts/lineChart/README.MD +0 -354
- package/src/charts/lineChart/index.ts +0 -1
- package/src/charts/polarChart/PolarChart.tsx +0 -161
- package/src/charts/polarChart/README.MD +0 -336
- package/src/charts/polarChart/index.ts +0 -1
- package/src/charts/radarChart/README.MD +0 -388
- package/src/charts/radarChart/RadarChart.tsx +0 -173
- package/src/charts/radarChart/index.ts +0 -1
- package/src/charts/scatterChart/README.MD +0 -335
- package/src/charts/scatterChart/ScatterChart.tsx +0 -155
- package/src/charts/scatterChart/index.ts +0 -1
- package/src/charts/stackedLineChart/README.MD +0 -396
- package/src/charts/stackedLineChart/StackedLineChart.tsx +0 -188
- package/src/charts/stackedLineChart/index.ts +0 -1
- package/src/charts/steamChart/README.MD +0 -414
- package/src/charts/steamChart/SteamChart.tsx +0 -236
- package/src/charts/steamChart/index.ts +0 -1
- package/src/components/RenderLabel/RenderLabel.tsx +0 -39
- package/src/components/RenderLabel/index.ts +0 -2
- package/src/components/RenderLabel/useRenderLabelStylesStyles.ts +0 -25
- package/src/components/RenderLegend/RenderLegend.tsx +0 -40
- package/src/components/RenderTooltip/RenderTooltip.tsx +0 -111
- package/src/components/buttonMenu/ButtonMenu.tsx +0 -186
- package/src/components/buttonMenu/IButtonMenuOption.ts +0 -9
- package/src/components/buttonMenu/IButtonMenuProps.tsx +0 -40
- package/src/components/dashboard/DashBoard.tsx +0 -314
- package/src/components/dashboard/ExampleDashboardUsage.tsx +0 -114
- package/src/components/dashboard/IDashboardProps.tsx +0 -11
- package/src/components/dashboard/NoDashboards.tsx +0 -26
- package/src/components/dashboard/index.ts +0 -3
- package/src/components/dashboard/selectZoom/SelectZoom.tsx +0 -184
- package/src/components/dashboard/useDashboardStyles.ts +0 -76
- package/src/components/index.ts +0 -17
- package/src/components/legendContainer/LegendContainer.tsx +0 -118
- package/src/components/legendeButton/LegendButton.tsx +0 -57
- package/src/components/renderSliceLegend/RenderSliceLegend.tsx +0 -46
- package/src/components/renderValueLegend/RenderValueLegend.tsx +0 -43
- package/src/components/stack/IStackProps.tsx +0 -94
- package/src/components/stack/Stack.tsx +0 -103
- package/src/components/svgImages/BusinessReportIcon.tsx +0 -218
- package/src/components/themeProvider/ThemeProvider.tsx +0 -48
- package/src/constants/Constants.tsx +0 -23
- package/src/graphGlobalStyles/useGraphGlobalStyles.ts +0 -28
- package/src/hooks/index.ts +0 -1
- package/src/hooks/useChartFactory.tsx +0 -136
- package/src/hooks/useChartUtils.tsx +0 -187
- package/src/hooks/useIndexedDBCache.ts +0 -119
- package/src/hooks/useResponsiveLegend.ts +0 -35
- package/src/index.tsx +0 -5
- package/src/models/ChartDatum.ts +0 -4
- package/src/models/ICardChartContainer.tsx +0 -11
- package/src/models/IChart.ts +0 -50
- package/src/models/index.ts +0 -3
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
DBSchema,
|
|
3
|
-
openDB,
|
|
4
|
-
} from 'idb';
|
|
5
|
-
|
|
6
|
-
import { useEffect } from 'react';
|
|
7
|
-
|
|
8
|
-
export interface CacheData<T> {
|
|
9
|
-
data: T;
|
|
10
|
-
timestamp: number;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
interface CacheDB<T> extends DBSchema {
|
|
14
|
-
cache: {
|
|
15
|
-
key: string;
|
|
16
|
-
value: CacheData<T>;
|
|
17
|
-
};
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
interface UseIndexedDBCacheReturn<T> {
|
|
21
|
-
getData: (key: string) => Promise<T | undefined>;
|
|
22
|
-
setData: (key: string, data: T) => Promise<void>;
|
|
23
|
-
deleteData: (key: string) => Promise<void>;
|
|
24
|
-
clearAllCache: () => Promise<void>;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
const CACHE: string = "application-cache";
|
|
28
|
-
|
|
29
|
-
const openDatabase = async <T>() => {
|
|
30
|
-
return openDB<CacheDB<T>>('app-cache-db', 1, {
|
|
31
|
-
upgrade(db) {
|
|
32
|
-
db.createObjectStore(CACHE as never);
|
|
33
|
-
},
|
|
34
|
-
});
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
const getCachedData = async <T>(key: string): Promise<T | undefined> => {
|
|
38
|
-
const db = await openDatabase<T>();
|
|
39
|
-
const cached = await db.get((CACHE as never), key);
|
|
40
|
-
return cached ? cached.data : undefined;
|
|
41
|
-
};
|
|
42
|
-
|
|
43
|
-
const setCachedData = async <T>(key: string, data: T): Promise<void> => {
|
|
44
|
-
const db = await openDatabase<T>();
|
|
45
|
-
await db.put(CACHE as never, { data, timestamp: Date.now() }, key);
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
const deleteCachedData = async (key: string): Promise<void> => {
|
|
49
|
-
const db = await openDatabase<any>();
|
|
50
|
-
await db.delete(CACHE as never, key);
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
const clearCache = async (): Promise<void> => {
|
|
54
|
-
const db = await openDatabase<any>();
|
|
55
|
-
await db.clear(CACHE as never);
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
const clearExpiredCache = async (maxAge: number): Promise<void> => {
|
|
59
|
-
const db = await openDatabase<any>();
|
|
60
|
-
const allKeys = await db.getAllKeys(CACHE as never);
|
|
61
|
-
const now = Date.now();
|
|
62
|
-
|
|
63
|
-
for (const key of allKeys) {
|
|
64
|
-
const cached = await db.get(CACHE as never, key as string);
|
|
65
|
-
if (cached && now - cached.timestamp > maxAge) {
|
|
66
|
-
await db.delete(CACHE as never, key);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
};
|
|
70
|
-
const DEFAULT_MAX_AGE = 24 * 60 * 60 * 1000; // 1 day in milliseconds
|
|
71
|
-
/**
|
|
72
|
-
* Custom hook to manage IndexedDB cache with a specified maximum age.
|
|
73
|
-
*
|
|
74
|
-
* @template T - The type of data to be cached.
|
|
75
|
-
* @param {number} [maxAge=DEFAULT_MAX_AGE] - The maximum age (in milliseconds) for cached data before it is considered expired.
|
|
76
|
-
* @returns {UseIndexedDBCacheReturn<T>} An object containing methods to interact with the cache.
|
|
77
|
-
*
|
|
78
|
-
* @example
|
|
79
|
-
* const { getData, setData, deleteData, clearAllCache } = useIndexedDBCache<MyDataType>(3600000);
|
|
80
|
-
*
|
|
81
|
-
* @function
|
|
82
|
-
* @name useIndexedDBCache
|
|
83
|
-
* @memberof hooks
|
|
84
|
-
* @inner
|
|
85
|
-
*
|
|
86
|
-
* @typedef {Object} UseIndexedDBCacheReturn<T>
|
|
87
|
-
* @property {function(string): Promise<T | undefined>} getData - Retrieves cached data by key.
|
|
88
|
-
* @property {function(string, T): Promise<void>} setData - Caches data with a specified key.
|
|
89
|
-
* @property {function(string): Promise<void>} deleteData - Deletes cached data by key.
|
|
90
|
-
* @property {function(): Promise<void>} clearAllCache - Clears all cached data.
|
|
91
|
-
*/
|
|
92
|
-
export const useIndexedDBCache = <T>(maxAge: number = DEFAULT_MAX_AGE): UseIndexedDBCacheReturn<T> => {
|
|
93
|
-
useEffect(() => {
|
|
94
|
-
// Clear expired cache on component mount
|
|
95
|
-
(async () => {
|
|
96
|
-
await clearExpiredCache(maxAge);
|
|
97
|
-
})();
|
|
98
|
-
}, [maxAge]);
|
|
99
|
-
|
|
100
|
-
const getData = async (key: string): Promise<T | undefined> => {
|
|
101
|
-
return await getCachedData<T>(key);
|
|
102
|
-
};
|
|
103
|
-
|
|
104
|
-
const setData = async (key: string, data: T): Promise<void> => {
|
|
105
|
-
await setCachedData<T>(key, data);
|
|
106
|
-
};
|
|
107
|
-
|
|
108
|
-
const deleteData = async (key: string): Promise<void> => {
|
|
109
|
-
await deleteCachedData(key);
|
|
110
|
-
};
|
|
111
|
-
|
|
112
|
-
const clearAllCache = async (): Promise<void> => {
|
|
113
|
-
await clearCache();
|
|
114
|
-
};
|
|
115
|
-
|
|
116
|
-
return { getData, setData, deleteData, clearAllCache };
|
|
117
|
-
};
|
|
118
|
-
|
|
119
|
-
export default useIndexedDBCache;
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { useEffect, useRef, useState } from 'react';
|
|
2
|
-
|
|
3
|
-
import { ResizeObserver } from '@juggle/resize-observer';
|
|
4
|
-
import { useChartUtils } from './useChartUtils';
|
|
5
|
-
|
|
6
|
-
const BUTTON_WIDTH = 100;
|
|
7
|
-
const GAP = 10;
|
|
8
|
-
|
|
9
|
-
export function useResponsiveLegend<T extends { label: string }>(items: T[]) {
|
|
10
|
-
const containerRef = useRef<HTMLDivElement>(null);
|
|
11
|
-
const [maxVisible, setMaxVisible] = useState(items.length);
|
|
12
|
-
const { debounce } = useChartUtils();
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
const measure = () => {
|
|
15
|
-
const containerWidth = containerRef.current?.offsetWidth ?? 0;
|
|
16
|
-
const itemTotalWidth = BUTTON_WIDTH + GAP;
|
|
17
|
-
const count = Math.floor(containerWidth / itemTotalWidth);
|
|
18
|
-
setMaxVisible(count);
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
const debouncedMeasure = debounce(measure, 100); // debounce resize
|
|
22
|
-
|
|
23
|
-
const observer = new ResizeObserver(debouncedMeasure);
|
|
24
|
-
if (containerRef.current) observer.observe(containerRef.current);
|
|
25
|
-
measure(); // initial
|
|
26
|
-
|
|
27
|
-
return () => observer.disconnect();
|
|
28
|
-
}, [items]);
|
|
29
|
-
|
|
30
|
-
return {
|
|
31
|
-
containerRef,
|
|
32
|
-
visibleItems: items.slice(0, maxVisible),
|
|
33
|
-
overflowItems: items.slice(maxVisible),
|
|
34
|
-
};
|
|
35
|
-
}
|
package/src/index.tsx
DELETED
package/src/models/ChartDatum.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { ChartDatum } from './ChartDatum';
|
|
2
|
-
import { IChart } from '.';
|
|
3
|
-
|
|
4
|
-
export interface ICardChartContainer {
|
|
5
|
-
chart: IChart;
|
|
6
|
-
cardTitle: string;
|
|
7
|
-
showZoom?: boolean;
|
|
8
|
-
id: string;
|
|
9
|
-
data?: { label: string; data: ChartDatum[]; }[];
|
|
10
|
-
defaultSpan?: { spanCols: number; spanRows: number; };
|
|
11
|
-
}
|
package/src/models/IChart.ts
DELETED
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
export type ChartType =
|
|
2
|
-
| 'bar'
|
|
3
|
-
| 'line'
|
|
4
|
-
| 'area'
|
|
5
|
-
| 'band'
|
|
6
|
-
| 'bar-horizontal'
|
|
7
|
-
| 'bubble'
|
|
8
|
-
| 'steam'
|
|
9
|
-
| 'multiple-axes'
|
|
10
|
-
| 'floating-bar'
|
|
11
|
-
| 'stacked-line'
|
|
12
|
-
| 'doughnut'
|
|
13
|
-
| 'pie'
|
|
14
|
-
| 'radar'
|
|
15
|
-
| 'polar'
|
|
16
|
-
| 'combo'
|
|
17
|
-
| 'gauge'
|
|
18
|
-
| 'funnel'
|
|
19
|
-
| 'heatmap'
|
|
20
|
-
| 'treemap'
|
|
21
|
-
| 'sunburst'
|
|
22
|
-
| 'sankey'
|
|
23
|
-
| 'waterfall'
|
|
24
|
-
| 'boxplot'
|
|
25
|
-
| 'violin'
|
|
26
|
-
| 'radial-bar'
|
|
27
|
-
| 'sparkline'
|
|
28
|
-
| 'scatter';
|
|
29
|
-
|
|
30
|
-
export type ChartData = {
|
|
31
|
-
name: string;
|
|
32
|
-
value?: number;
|
|
33
|
-
min?: number;
|
|
34
|
-
max?: number;
|
|
35
|
-
radius?: number;
|
|
36
|
-
x?: number | string | Date;
|
|
37
|
-
y?: number;
|
|
38
|
-
|
|
39
|
-
};
|
|
40
|
-
export interface IChart {
|
|
41
|
-
id: string;
|
|
42
|
-
title: string;
|
|
43
|
-
type: ChartType;
|
|
44
|
-
data: { label: string; data: ChartData[]; secondaryAxisId?: string }[];
|
|
45
|
-
}
|
|
46
|
-
export interface BubbleDatum {
|
|
47
|
-
primary: number | string | Date;
|
|
48
|
-
secondary: number;
|
|
49
|
-
radius: number;
|
|
50
|
-
}
|
package/src/models/index.ts
DELETED