h2o-library 1.3.8 → 1.3.9
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/components/index.d.ts +2 -1
- package/dist/components/src/chart-bar.d.ts +4 -1
- package/dist/components/src/chart-heatmap.d.ts +14 -0
- package/dist/components/src/chart-line.d.ts +4 -3
- package/dist/components/src/chart-pie.d.ts +4 -1
- package/dist/css/src/accordion.css +0 -2
- package/dist/css/src/charts.css +48 -0
- package/dist/esm/components/index.d.ts +2 -1
- package/dist/esm/components/src/chart-bar.d.ts +4 -1
- package/dist/esm/components/src/chart-heatmap.d.ts +14 -0
- package/dist/esm/components/src/chart-line.d.ts +4 -3
- package/dist/esm/components/src/chart-pie.d.ts +4 -1
- package/dist/esm/index.js +4 -4
- package/dist/esm/index.js.map +1 -1
- package/dist/index.cjs.js +4 -4
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
|
@@ -27,8 +27,9 @@ export * from "./src/month-calendar";
|
|
|
27
27
|
export * from "./src/loader";
|
|
28
28
|
export * from "./src/message";
|
|
29
29
|
export * from "./src/multi-menu";
|
|
30
|
+
export * from "./src/chart-heatmap";
|
|
31
|
+
export * from "./src/compact-multi-select";
|
|
30
32
|
export * from "./src/chart-line";
|
|
31
33
|
export * from "./src/chart-bar";
|
|
32
34
|
export * from "./src/chart-pie";
|
|
33
35
|
export * from "./src/chart-stat";
|
|
34
|
-
export * from "./src/compact-multi-select";
|
|
@@ -6,11 +6,14 @@ export interface BarChartDataPoint {
|
|
|
6
6
|
export interface BarProps {
|
|
7
7
|
dataKey: string;
|
|
8
8
|
fill: string;
|
|
9
|
+
label: string;
|
|
9
10
|
}
|
|
10
11
|
export interface BarChartProps {
|
|
11
12
|
data: BarChartDataPoint[];
|
|
12
13
|
bars: BarProps[];
|
|
14
|
+
layout?: 'single' | 'grouped' | 'stacked';
|
|
13
15
|
showGrid?: boolean;
|
|
14
16
|
showLegend?: boolean;
|
|
17
|
+
height?: number;
|
|
15
18
|
}
|
|
16
|
-
export declare const BarChart: ({ data, bars, showGrid, showLegend, }: BarChartProps) => React.JSX.Element;
|
|
19
|
+
export declare const BarChart: ({ data, bars, layout, showGrid, showLegend, height, }: BarChartProps) => React.JSX.Element;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface HeatmapDataPoint {
|
|
3
|
+
value: number;
|
|
4
|
+
percentage: number;
|
|
5
|
+
}
|
|
6
|
+
export interface HeatmapData {
|
|
7
|
+
rows: string[];
|
|
8
|
+
columns: string[];
|
|
9
|
+
data: HeatmapDataPoint[][];
|
|
10
|
+
}
|
|
11
|
+
export interface HeatmapChartProps {
|
|
12
|
+
data: HeatmapData;
|
|
13
|
+
}
|
|
14
|
+
export declare const HeatmapChart: ({ data }: HeatmapChartProps) => React.JSX.Element;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export interface LineChartDataPoint {
|
|
3
3
|
name: string;
|
|
4
|
-
[key: string]: number | string;
|
|
4
|
+
[key: string]: number | string | undefined;
|
|
5
5
|
}
|
|
6
6
|
export interface LineProps {
|
|
7
7
|
dataKey: string;
|
|
8
8
|
stroke: string;
|
|
9
|
-
|
|
9
|
+
dashed?: boolean;
|
|
10
10
|
unit?: string;
|
|
11
11
|
}
|
|
12
12
|
export interface LineChartProps {
|
|
@@ -15,5 +15,6 @@ export interface LineChartProps {
|
|
|
15
15
|
showGrid?: boolean;
|
|
16
16
|
showLegend?: boolean;
|
|
17
17
|
showGradient?: boolean;
|
|
18
|
+
height?: number;
|
|
18
19
|
}
|
|
19
|
-
export declare const LineChart: ({ data, lines, showGrid, showLegend, showGradient, }: LineChartProps) => React.JSX.Element;
|
|
20
|
+
export declare const LineChart: ({ data, lines, showGrid, showLegend, showGradient, height, }: LineChartProps) => React.JSX.Element;
|
|
@@ -6,6 +6,9 @@ export interface PieChartDataPoint {
|
|
|
6
6
|
}
|
|
7
7
|
export interface PieChartProps {
|
|
8
8
|
data: PieChartDataPoint[];
|
|
9
|
+
variant?: 'pie' | 'donut';
|
|
9
10
|
showLegend?: boolean;
|
|
11
|
+
height?: number;
|
|
12
|
+
showLabels?: boolean;
|
|
10
13
|
}
|
|
11
|
-
export declare const PieChart: ({ data, showLegend }: PieChartProps) => React.JSX.Element;
|
|
14
|
+
export declare const PieChart: ({ data, variant, showLegend, height, showLabels, }: PieChartProps) => React.JSX.Element;
|
package/dist/css/src/charts.css
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
.bar-chart-container {
|
|
2
2
|
font-family: sans-serif;
|
|
3
3
|
text-align: center;
|
|
4
|
+
padding: 2rem 2rem 2rem 0px;
|
|
4
5
|
}
|
|
5
6
|
|
|
6
7
|
.line-chart-container {
|
|
7
8
|
font-family: sans-serif;
|
|
8
9
|
text-align: center;
|
|
10
|
+
padding: 2rem 2rem 2rem 0px;
|
|
9
11
|
}
|
|
10
12
|
|
|
11
13
|
.pie-chart-container {
|
|
@@ -44,3 +46,49 @@
|
|
|
44
46
|
.recharts-tooltip-wrapper {
|
|
45
47
|
z-index: 1000;
|
|
46
48
|
}
|
|
49
|
+
|
|
50
|
+
.heatmap-container {
|
|
51
|
+
width: 100%;
|
|
52
|
+
padding: 1rem;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.heatmap-grid {
|
|
56
|
+
display: grid;
|
|
57
|
+
gap: 0.5rem;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.heatmap-col-header {
|
|
61
|
+
padding: 0.5rem;
|
|
62
|
+
font-weight: 500;
|
|
63
|
+
text-align: center;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.heatmap-row-header {
|
|
67
|
+
padding: 0.5rem;
|
|
68
|
+
font-weight: 500;
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.heatmap-cell {
|
|
74
|
+
padding: 0.75rem;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.heatmap-cell-content {
|
|
78
|
+
display: flex;
|
|
79
|
+
align-items: center;
|
|
80
|
+
gap: 0.25rem;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.heatmap-cell-value-container {
|
|
84
|
+
font-size: 0.875rem;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.heatmap-cell-percentage-container {
|
|
88
|
+
font-size: 0.75rem;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.heatmap-icon {
|
|
92
|
+
width: 0.75rem;
|
|
93
|
+
height: 0.75rem;
|
|
94
|
+
}
|
|
@@ -27,8 +27,9 @@ export * from "./src/month-calendar";
|
|
|
27
27
|
export * from "./src/loader";
|
|
28
28
|
export * from "./src/message";
|
|
29
29
|
export * from "./src/multi-menu";
|
|
30
|
+
export * from "./src/chart-heatmap";
|
|
31
|
+
export * from "./src/compact-multi-select";
|
|
30
32
|
export * from "./src/chart-line";
|
|
31
33
|
export * from "./src/chart-bar";
|
|
32
34
|
export * from "./src/chart-pie";
|
|
33
35
|
export * from "./src/chart-stat";
|
|
34
|
-
export * from "./src/compact-multi-select";
|
|
@@ -6,11 +6,14 @@ export interface BarChartDataPoint {
|
|
|
6
6
|
export interface BarProps {
|
|
7
7
|
dataKey: string;
|
|
8
8
|
fill: string;
|
|
9
|
+
label: string;
|
|
9
10
|
}
|
|
10
11
|
export interface BarChartProps {
|
|
11
12
|
data: BarChartDataPoint[];
|
|
12
13
|
bars: BarProps[];
|
|
14
|
+
layout?: 'single' | 'grouped' | 'stacked';
|
|
13
15
|
showGrid?: boolean;
|
|
14
16
|
showLegend?: boolean;
|
|
17
|
+
height?: number;
|
|
15
18
|
}
|
|
16
|
-
export declare const BarChart: ({ data, bars, showGrid, showLegend, }: BarChartProps) => React.JSX.Element;
|
|
19
|
+
export declare const BarChart: ({ data, bars, layout, showGrid, showLegend, height, }: BarChartProps) => React.JSX.Element;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface HeatmapDataPoint {
|
|
3
|
+
value: number;
|
|
4
|
+
percentage: number;
|
|
5
|
+
}
|
|
6
|
+
export interface HeatmapData {
|
|
7
|
+
rows: string[];
|
|
8
|
+
columns: string[];
|
|
9
|
+
data: HeatmapDataPoint[][];
|
|
10
|
+
}
|
|
11
|
+
export interface HeatmapChartProps {
|
|
12
|
+
data: HeatmapData;
|
|
13
|
+
}
|
|
14
|
+
export declare const HeatmapChart: ({ data }: HeatmapChartProps) => React.JSX.Element;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export interface LineChartDataPoint {
|
|
3
3
|
name: string;
|
|
4
|
-
[key: string]: number | string;
|
|
4
|
+
[key: string]: number | string | undefined;
|
|
5
5
|
}
|
|
6
6
|
export interface LineProps {
|
|
7
7
|
dataKey: string;
|
|
8
8
|
stroke: string;
|
|
9
|
-
|
|
9
|
+
dashed?: boolean;
|
|
10
10
|
unit?: string;
|
|
11
11
|
}
|
|
12
12
|
export interface LineChartProps {
|
|
@@ -15,5 +15,6 @@ export interface LineChartProps {
|
|
|
15
15
|
showGrid?: boolean;
|
|
16
16
|
showLegend?: boolean;
|
|
17
17
|
showGradient?: boolean;
|
|
18
|
+
height?: number;
|
|
18
19
|
}
|
|
19
|
-
export declare const LineChart: ({ data, lines, showGrid, showLegend, showGradient, }: LineChartProps) => React.JSX.Element;
|
|
20
|
+
export declare const LineChart: ({ data, lines, showGrid, showLegend, showGradient, height, }: LineChartProps) => React.JSX.Element;
|
|
@@ -6,6 +6,9 @@ export interface PieChartDataPoint {
|
|
|
6
6
|
}
|
|
7
7
|
export interface PieChartProps {
|
|
8
8
|
data: PieChartDataPoint[];
|
|
9
|
+
variant?: 'pie' | 'donut';
|
|
9
10
|
showLegend?: boolean;
|
|
11
|
+
height?: number;
|
|
12
|
+
showLabels?: boolean;
|
|
10
13
|
}
|
|
11
|
-
export declare const PieChart: ({ data, showLegend }: PieChartProps) => React.JSX.Element;
|
|
14
|
+
export declare const PieChart: ({ data, variant, showLegend, height, showLabels, }: PieChartProps) => React.JSX.Element;
|