bento-charts 2.6.5 → 2.6.7
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/Charts/BentoBarChart.js +14 -3
- package/dist/Components/Charts/BentoBarChart.js.map +1 -1
- package/dist/Components/Charts/BentoPie.js +4 -4
- package/dist/Components/Charts/BentoPie.js.map +1 -1
- package/dist/Components/Charts/ChartWrapper.d.ts +1 -0
- package/dist/Components/Charts/ChartWrapper.js +14 -3
- package/dist/Components/Charts/ChartWrapper.js.map +1 -1
- package/dist/constants/chartConstants.d.ts +8 -1
- package/dist/constants/chartConstants.js +8 -5
- package/dist/constants/chartConstants.js.map +1 -1
- package/package.json +1 -1
- package/src/Components/Charts/BentoBarChart.tsx +11 -11
- package/src/Components/Charts/BentoPie.tsx +6 -9
- package/src/Components/Charts/ChartWrapper.tsx +4 -3
- package/src/constants/chartConstants.ts +12 -5
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
1
12
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
13
|
var t = {};
|
|
3
14
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -12,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
23
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
24
|
import { useCallback } from 'react';
|
|
14
25
|
import { Bar, BarChart, CartesianGrid, Cell, Label, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
|
|
15
|
-
import {
|
|
26
|
+
import { TOOLTIP_STYLE, TOOLTIP_OTHER_PROPS, COUNT_STYLE, LABEL_STYLE, MAX_TICK_LABEL_CHARS, TITLE_STYLE, TICKS_SHOW_ALL_LABELS_BELOW, UNITS_LABEL_OFFSET, TICK_MARGIN, COUNT_KEY, } from '../../constants/chartConstants';
|
|
16
27
|
import { useChartTheme, useChartTranslation } from '../../ChartConfigProvider';
|
|
17
28
|
import NoData from '../NoData';
|
|
18
29
|
import { useTransformedChartData } from '../../util/chartUtils';
|
|
@@ -46,7 +57,7 @@ var BentoBarChart = function (_a) {
|
|
|
46
57
|
// Basically, if data is empty, Recharts will default to a domain of [0, "auto"] and our tickFormatter trips up
|
|
47
58
|
// on formatting a non-string. This hack manually overrides the ticks for the axis and blanks it out.
|
|
48
59
|
// - David L, 2023-01-03
|
|
49
|
-
return (_jsxs(ChartWrapper, { children: [_jsx("div", { style: TITLE_STYLE, children: title }), _jsx(ResponsiveContainer, { width: width !== null && width !== void 0 ? width : '100%', height: height, children: _jsxs(BarChart, { data: data, margin: BAR_CHART_MARGINS, children: [_jsx(XAxis, { dataKey: "x", height: 20, angle: -45, ticks: data.length ? undefined : [''], tickFormatter: tickFormatter, tickMargin: TICK_MARGIN, textAnchor: "end", interval: data.length < TICKS_SHOW_ALL_LABELS_BELOW ? 0 : 'preserveStartEnd', children: _jsx(Label, { value: units, offset: UNITS_LABEL_OFFSET, position: "insideBottom" }) }), _jsx(YAxis, { children: _jsx(Label, { value: t[COUNT_KEY], offset: -10, position: "left", angle: 270 }) }), _jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }), _jsx(Tooltip, { content: _jsx(BarTooltip, { totalCount: totalCount }) }), _jsx(Bar, { dataKey: "y", isAnimationActive: false, onClick: onClick, onMouseEnter: onHover, maxBarSize: 70, children: data.map(function (entry, index) { return (_jsx(Cell, { fill: fill(entry, index) }, entry.x)); }) })] }) })] }));
|
|
60
|
+
return (_jsxs(ChartWrapper, { responsive: typeof width !== 'number', children: [_jsx("div", { style: TITLE_STYLE, children: title }), _jsx(ResponsiveContainer, { width: width !== null && width !== void 0 ? width : '100%', height: height, children: _jsxs(BarChart, { data: data, margin: BAR_CHART_MARGINS, children: [_jsx(XAxis, { dataKey: "x", height: 20, angle: -45, ticks: data.length ? undefined : [''], tickFormatter: tickFormatter, tickMargin: TICK_MARGIN, textAnchor: "end", interval: data.length < TICKS_SHOW_ALL_LABELS_BELOW ? 0 : 'preserveStartEnd', children: _jsx(Label, { value: units, offset: UNITS_LABEL_OFFSET, position: "insideBottom" }) }), _jsx(YAxis, { children: _jsx(Label, { value: t[COUNT_KEY], offset: -10, position: "left", angle: 270 }) }), _jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }), _jsx(Tooltip, __assign({}, TOOLTIP_OTHER_PROPS, { content: _jsx(BarTooltip, { totalCount: totalCount }) })), _jsx(Bar, { dataKey: "y", isAnimationActive: false, onClick: onClick, onMouseEnter: onHover, maxBarSize: 70, children: data.map(function (entry, index) { return (_jsx(Cell, { fill: fill(entry, index) }, entry.x)); }) })] }) })] }));
|
|
50
61
|
};
|
|
51
62
|
var BarTooltip = function (_a) {
|
|
52
63
|
var _b, _c, _d;
|
|
@@ -57,7 +68,7 @@ var BarTooltip = function (_a) {
|
|
|
57
68
|
var name = (payload && ((_c = (_b = payload[0]) === null || _b === void 0 ? void 0 : _b.payload) === null || _c === void 0 ? void 0 : _c.x)) || '';
|
|
58
69
|
var value = (payload && ((_d = payload[0]) === null || _d === void 0 ? void 0 : _d.value)) || 0;
|
|
59
70
|
var percentage = totalCount ? Math.round((value / totalCount) * 100) : 0;
|
|
60
|
-
return (_jsxs("div", { style:
|
|
71
|
+
return (_jsxs("div", { style: TOOLTIP_STYLE, children: [_jsx("p", { style: LABEL_STYLE, children: name }), _jsxs("p", { style: COUNT_STYLE, children: [value, " (", percentage, "%)"] })] }));
|
|
61
72
|
};
|
|
62
73
|
export default BentoBarChart;
|
|
63
74
|
//# sourceMappingURL=BentoBarChart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BentoBarChart.js","sourceRoot":"","sources":["../../../src/Components/Charts/BentoBarChart.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BentoBarChart.js","sourceRoot":"","sources":["../../../src/Components/Charts/BentoBarChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -32,7 +32,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
32
32
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
33
33
|
import { useCallback, useMemo, useState } from 'react';
|
|
34
34
|
import { PieChart, Pie, Cell, Curve, Tooltip, Sector, ResponsiveContainer, } from 'recharts';
|
|
35
|
-
import {
|
|
35
|
+
import { TOOLTIP_STYLE, TOOLTIP_OTHER_PROPS, LABEL_STYLE, COUNT_STYLE, CHART_MISSING_FILL, RADIAN, LABEL_THRESHOLD, COUNT_TEXT_STYLE, TEXT_STYLE, OTHER_KEY, } from '../../constants/chartConstants';
|
|
36
36
|
import { useChartTheme, useChartTranslation, useChartThreshold, useChartMaxLabelChars, } from '../../ChartConfigProvider';
|
|
37
37
|
import { polarToCartesian, useTransformedChartData } from '../../util/chartUtils';
|
|
38
38
|
import NoData from '../NoData';
|
|
@@ -86,10 +86,10 @@ var BentoPie = function (_a) {
|
|
|
86
86
|
if (data.length === 0) {
|
|
87
87
|
return _jsx(NoData, { height: height });
|
|
88
88
|
}
|
|
89
|
-
return (_jsx(ChartWrapper, { children: _jsx(ResponsiveContainer, { width: width !== null && width !== void 0 ? width :
|
|
89
|
+
return (_jsx(ChartWrapper, { responsive: typeof width !== 'number', children: _jsx(ResponsiveContainer, { width: width !== null && width !== void 0 ? width : '100%', height: height, children: _jsxs(PieChart, { children: [_jsx(Pie, { data: data, dataKey: "value", cx: "50%", cy: "50%", innerRadius: "25%", outerRadius: "55%", label: renderLabel(maxLabelChars), labelLine: false, isAnimationActive: false, onMouseEnter: onEnter, onMouseLeave: onLeave, onMouseOver: onHover, activeIndex: activeIndex, activeShape: RenderActiveLabel, onClick: onClick, children: data.map(function (entry, index) {
|
|
90
90
|
var fill = entry.name.toLowerCase() === 'missing' ? CHART_MISSING_FILL : theme[index % theme.length];
|
|
91
91
|
return _jsx(Cell, { fill: fill }, index);
|
|
92
|
-
}) }), _jsx(Tooltip, { content: _jsx(CustomTooltip, { totalCount: sum }), isAnimationActive: false
|
|
92
|
+
}) }), _jsx(Tooltip, __assign({}, TOOLTIP_OTHER_PROPS, { content: _jsx(CustomTooltip, { totalCount: sum }), isAnimationActive: false }))] }) }) }));
|
|
93
93
|
};
|
|
94
94
|
var toNumber = function (val, defaultValue) {
|
|
95
95
|
if (val && typeof val === 'string') {
|
|
@@ -147,7 +147,7 @@ var CustomTooltip = function (_a) {
|
|
|
147
147
|
var name = payload ? payload[0].name : '';
|
|
148
148
|
var value = payload ? payload[0].value : 0;
|
|
149
149
|
var percentage = totalCount ? Math.round((value / totalCount) * 100) : 0;
|
|
150
|
-
return name !== 'other' ? (_jsxs("div", { style:
|
|
150
|
+
return name !== 'other' ? (_jsxs("div", { style: TOOLTIP_STYLE, children: [_jsx("p", { style: LABEL_STYLE, children: name }), _jsxs("p", { style: COUNT_STYLE, children: [' ', value, " (", percentage, "%)"] })] })) : (_jsx("div", { children: "No data" }));
|
|
151
151
|
};
|
|
152
152
|
export default BentoPie;
|
|
153
153
|
//# sourceMappingURL=BentoPie.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BentoPie.js","sourceRoot":"","sources":["../../../src/Components/Charts/BentoPie.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAc,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EACL,QAAQ,EACR,GAAG,EACH,IAAI,EACJ,KAAK,EACL,OAAO,EACP,MAAM,EAGN,mBAAmB,GACpB,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,
|
|
1
|
+
{"version":3,"file":"BentoPie.js","sourceRoot":"","sources":["../../../src/Components/Charts/BentoPie.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,21 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
1
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
13
|
import { forwardRef } from 'react';
|
|
3
14
|
import { CHART_WRAPPER_STYLE } from '../../constants/chartConstants';
|
|
4
15
|
var ChartWrapper = forwardRef(function (_a, ref) {
|
|
5
|
-
var children = _a.children;
|
|
6
|
-
return (_jsx("div", { style: CHART_WRAPPER_STYLE, ref: ref, children: children }));
|
|
16
|
+
var responsive = _a.responsive, children = _a.children;
|
|
17
|
+
return (_jsx("div", { style: __assign(__assign({}, CHART_WRAPPER_STYLE), (responsive ? {} : { overflowX: 'auto', overflowY: 'hidden' })), ref: ref, children: children }));
|
|
7
18
|
});
|
|
8
|
-
ChartWrapper.displayName =
|
|
19
|
+
ChartWrapper.displayName = 'ChartWrapper';
|
|
9
20
|
export default ChartWrapper;
|
|
10
21
|
//# sourceMappingURL=ChartWrapper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartWrapper.js","sourceRoot":"","sources":["../../../src/Components/Charts/ChartWrapper.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ChartWrapper.js","sourceRoot":"","sources":["../../../src/Components/Charts/ChartWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,EAAgB,UAAU,EAAa,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAOrE,IAAM,YAAY,GAAG,UAAU,CAAC,UAAC,EAA2C,EAAE,GAAiC;QAA5E,UAAU,gBAAA,EAAE,QAAQ,cAAA;IAA6D,OAAA,CAClH,cAAK,KAAK,wBAAO,mBAAmB,GAAK,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,GAAI,GAAG,EAAE,GAAG,YAChH,QAAQ,GACL,CACP;AAJmH,CAInH,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAE1C,eAAe,YAAY,CAAC"}
|
|
@@ -7,7 +7,14 @@ export declare const COLORS: HexColor[];
|
|
|
7
7
|
export declare const BAR_CHART_FILL = "#4575b4";
|
|
8
8
|
export declare const CHART_MISSING_FILL = "#bbbbbb";
|
|
9
9
|
export declare const DEFAULT_CHART_THEME: ChartTheme;
|
|
10
|
-
export declare const
|
|
10
|
+
export declare const TOOLTIP_OTHER_PROPS: {
|
|
11
|
+
wrapperStyle: CSS.Properties;
|
|
12
|
+
allowEscapeViewBox: {
|
|
13
|
+
x: boolean;
|
|
14
|
+
y: boolean;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
export declare const TOOLTIP_STYLE: CSS.Properties;
|
|
11
18
|
export declare const LABEL_STYLE: CSS.Properties;
|
|
12
19
|
export declare const COUNT_STYLE: CSS.Properties;
|
|
13
20
|
export declare const CHART_WRAPPER_STYLE: CSS.Properties;
|
|
@@ -43,7 +43,7 @@ export var DEFAULT_CHART_THEME = {
|
|
|
43
43
|
default: {
|
|
44
44
|
fill: COLORS,
|
|
45
45
|
other: CHART_MISSING_FILL,
|
|
46
|
-
}
|
|
46
|
+
},
|
|
47
47
|
},
|
|
48
48
|
bar: {
|
|
49
49
|
default: {
|
|
@@ -54,14 +54,19 @@ export var DEFAULT_CHART_THEME = {
|
|
|
54
54
|
};
|
|
55
55
|
// ################### CHART STYLES ###################
|
|
56
56
|
// common
|
|
57
|
-
export var
|
|
57
|
+
export var TOOLTIP_OTHER_PROPS = {
|
|
58
|
+
wrapperStyle: {
|
|
59
|
+
zIndex: 10,
|
|
60
|
+
},
|
|
61
|
+
allowEscapeViewBox: { x: true, y: true },
|
|
62
|
+
};
|
|
63
|
+
export var TOOLTIP_STYLE = {
|
|
58
64
|
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
|
59
65
|
padding: '5px',
|
|
60
66
|
border: '1px solid grey',
|
|
61
67
|
boxShadow: '0px 0px 2px rgba(0, 0, 0, 0.9)',
|
|
62
68
|
borderRadius: '2px',
|
|
63
69
|
textAlign: 'left',
|
|
64
|
-
zIndex: 1,
|
|
65
70
|
};
|
|
66
71
|
export var LABEL_STYLE = {
|
|
67
72
|
fontWeight: 'bold',
|
|
@@ -79,8 +84,6 @@ export var CHART_WRAPPER_STYLE = {
|
|
|
79
84
|
display: 'flex',
|
|
80
85
|
flexDirection: 'column',
|
|
81
86
|
alignItems: 'center',
|
|
82
|
-
overflowX: 'auto',
|
|
83
|
-
overflowY: 'hidden',
|
|
84
87
|
};
|
|
85
88
|
// bar chart
|
|
86
89
|
export var TITLE_STYLE = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chartConstants.js","sourceRoot":"","sources":["../../src/constants/chartConstants.ts"],"names":[],"mappings":";AAGA,4DAA4D;AAE5D,MAAM,CAAC,IAAM,SAAS,GAAG,OAAO,CAAC;AACjC,MAAM,CAAC,IAAM,SAAS,GAAG,OAAO,CAAC;AAEjC,MAAM,CAAC,IAAM,wBAAwB,GAAsB;IACzD,EAAE;QACA,GAAC,SAAS,IAAG,OAAO;QACpB,GAAC,SAAS,IAAG,OAAO;WACrB;IACD,EAAE;QACA,GAAC,SAAS,IAAG,UAAU;QACvB,GAAC,SAAS,IAAG,OAAO;WACrB;CACF,CAAC;AAEF,0DAA0D;AAC1D,oBAAoB;AACpB,MAAM,CAAC,IAAM,MAAM,GAAe;IAChC,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;CACV,CAAC;AAEF,MAAM,CAAC,IAAM,cAAc,GAAG,SAAS,CAAC;AACxC,MAAM,CAAC,IAAM,kBAAkB,GAAG,SAAS,CAAC;AAE5C,MAAM,CAAC,IAAM,mBAAmB,GAAe;IAC7C,GAAG,EAAE;QACH,OAAO,EAAE;YACP,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,kBAAkB;
|
|
1
|
+
{"version":3,"file":"chartConstants.js","sourceRoot":"","sources":["../../src/constants/chartConstants.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -11,8 +11,11 @@ import {
|
|
|
11
11
|
XAxis,
|
|
12
12
|
YAxis,
|
|
13
13
|
} from 'recharts';
|
|
14
|
+
import type { TooltipProps } from 'recharts';
|
|
15
|
+
|
|
14
16
|
import {
|
|
15
|
-
|
|
17
|
+
TOOLTIP_STYLE,
|
|
18
|
+
TOOLTIP_OTHER_PROPS,
|
|
16
19
|
COUNT_STYLE,
|
|
17
20
|
LABEL_STYLE,
|
|
18
21
|
MAX_TICK_LABEL_CHARS,
|
|
@@ -67,7 +70,7 @@ const BentoBarChart = ({ height, width, units, title, onClick, colorTheme = 'def
|
|
|
67
70
|
// on formatting a non-string. This hack manually overrides the ticks for the axis and blanks it out.
|
|
68
71
|
// - David L, 2023-01-03
|
|
69
72
|
return (
|
|
70
|
-
<ChartWrapper>
|
|
73
|
+
<ChartWrapper responsive={typeof width !== 'number'}>
|
|
71
74
|
<div style={TITLE_STYLE}>{title}</div>
|
|
72
75
|
<ResponsiveContainer width={width ?? '100%'} height={height}>
|
|
73
76
|
<BarChart data={data} margin={BAR_CHART_MARGINS}>
|
|
@@ -87,7 +90,7 @@ const BentoBarChart = ({ height, width, units, title, onClick, colorTheme = 'def
|
|
|
87
90
|
<Label value={t[COUNT_KEY]} offset={-10} position="left" angle={270} />
|
|
88
91
|
</YAxis>
|
|
89
92
|
<CartesianGrid strokeDasharray="3 3" vertical={false} />
|
|
90
|
-
<Tooltip content={<BarTooltip totalCount={totalCount} />} />
|
|
93
|
+
<Tooltip {...TOOLTIP_OTHER_PROPS} content={<BarTooltip totalCount={totalCount} />} />
|
|
91
94
|
<Bar dataKey="y" isAnimationActive={false} onClick={onClick} onMouseEnter={onHover} maxBarSize={70}>
|
|
92
95
|
{data.map((entry, index) => (
|
|
93
96
|
<Cell key={entry.x} fill={fill(entry, index)} />
|
|
@@ -99,15 +102,12 @@ const BentoBarChart = ({ height, width, units, title, onClick, colorTheme = 'def
|
|
|
99
102
|
);
|
|
100
103
|
};
|
|
101
104
|
|
|
102
|
-
|
|
103
|
-
active,
|
|
104
|
-
payload,
|
|
105
|
-
totalCount,
|
|
106
|
-
}: {
|
|
107
|
-
active?: boolean;
|
|
105
|
+
interface BarTooltipProps extends TooltipProps<number, string> {
|
|
108
106
|
payload?: TooltipPayload;
|
|
109
107
|
totalCount: number;
|
|
110
|
-
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
const BarTooltip = ({ active, payload, totalCount }: BarTooltipProps) => {
|
|
111
111
|
if (!active) {
|
|
112
112
|
return null;
|
|
113
113
|
}
|
|
@@ -117,7 +117,7 @@ const BarTooltip = ({
|
|
|
117
117
|
const percentage = totalCount ? Math.round((value / totalCount) * 100) : 0;
|
|
118
118
|
|
|
119
119
|
return (
|
|
120
|
-
<div style={
|
|
120
|
+
<div style={TOOLTIP_STYLE}>
|
|
121
121
|
<p style={LABEL_STYLE}>{name}</p>
|
|
122
122
|
<p style={COUNT_STYLE}>
|
|
123
123
|
{value} ({percentage}%)
|
|
@@ -13,7 +13,8 @@ import {
|
|
|
13
13
|
import type CSS from 'csstype';
|
|
14
14
|
|
|
15
15
|
import {
|
|
16
|
-
|
|
16
|
+
TOOLTIP_STYLE,
|
|
17
|
+
TOOLTIP_OTHER_PROPS,
|
|
17
18
|
LABEL_STYLE,
|
|
18
19
|
COUNT_STYLE,
|
|
19
20
|
CHART_MISSING_FILL,
|
|
@@ -105,8 +106,8 @@ const BentoPie = ({
|
|
|
105
106
|
}
|
|
106
107
|
|
|
107
108
|
return (
|
|
108
|
-
<ChartWrapper>
|
|
109
|
-
<ResponsiveContainer width={width ??
|
|
109
|
+
<ChartWrapper responsive={typeof width !== 'number'}>
|
|
110
|
+
<ResponsiveContainer width={width ?? '100%'} height={height}>
|
|
110
111
|
<PieChart>
|
|
111
112
|
<Pie
|
|
112
113
|
data={data}
|
|
@@ -130,11 +131,7 @@ const BentoPie = ({
|
|
|
130
131
|
return <Cell key={index} fill={fill} />;
|
|
131
132
|
})}
|
|
132
133
|
</Pie>
|
|
133
|
-
<Tooltip
|
|
134
|
-
content={<CustomTooltip totalCount={sum} />}
|
|
135
|
-
isAnimationActive={false}
|
|
136
|
-
allowEscapeViewBox={{ x: true, y: true }}
|
|
137
|
-
/>
|
|
134
|
+
<Tooltip {...TOOLTIP_OTHER_PROPS} content={<CustomTooltip totalCount={sum} />} isAnimationActive={false} />
|
|
138
135
|
</PieChart>
|
|
139
136
|
</ResponsiveContainer>
|
|
140
137
|
</ChartWrapper>
|
|
@@ -259,7 +256,7 @@ const CustomTooltip = ({
|
|
|
259
256
|
const percentage = totalCount ? Math.round((value / totalCount) * 100) : 0;
|
|
260
257
|
|
|
261
258
|
return name !== 'other' ? (
|
|
262
|
-
<div style={
|
|
259
|
+
<div style={TOOLTIP_STYLE}>
|
|
263
260
|
<p style={LABEL_STYLE}>{name}</p>
|
|
264
261
|
<p style={COUNT_STYLE}>
|
|
265
262
|
{' '}
|
|
@@ -2,14 +2,15 @@ import React, { ForwardedRef, forwardRef, ReactNode } from 'react';
|
|
|
2
2
|
import { CHART_WRAPPER_STYLE } from '../../constants/chartConstants';
|
|
3
3
|
|
|
4
4
|
interface ChartWrapperProps {
|
|
5
|
+
responsive: boolean;
|
|
5
6
|
children: ReactNode;
|
|
6
7
|
}
|
|
7
8
|
|
|
8
|
-
const ChartWrapper = forwardRef(({children}: ChartWrapperProps, ref: ForwardedRef<HTMLDivElement>) => (
|
|
9
|
-
<div style={CHART_WRAPPER_STYLE} ref={ref}>
|
|
9
|
+
const ChartWrapper = forwardRef(({ responsive, children }: ChartWrapperProps, ref: ForwardedRef<HTMLDivElement>) => (
|
|
10
|
+
<div style={{ ...CHART_WRAPPER_STYLE, ...(responsive ? {} : { overflowX: 'auto', overflowY: 'hidden' }) }} ref={ref}>
|
|
10
11
|
{children}
|
|
11
12
|
</div>
|
|
12
13
|
));
|
|
13
|
-
ChartWrapper.displayName =
|
|
14
|
+
ChartWrapper.displayName = 'ChartWrapper';
|
|
14
15
|
|
|
15
16
|
export default ChartWrapper;
|
|
@@ -50,7 +50,7 @@ export const DEFAULT_CHART_THEME: ChartTheme = {
|
|
|
50
50
|
default: {
|
|
51
51
|
fill: COLORS,
|
|
52
52
|
other: CHART_MISSING_FILL,
|
|
53
|
-
|
|
53
|
+
},
|
|
54
54
|
},
|
|
55
55
|
bar: {
|
|
56
56
|
default: {
|
|
@@ -63,14 +63,23 @@ export const DEFAULT_CHART_THEME: ChartTheme = {
|
|
|
63
63
|
// ################### CHART STYLES ###################
|
|
64
64
|
|
|
65
65
|
// common
|
|
66
|
-
export const
|
|
66
|
+
export const TOOLTIP_OTHER_PROPS: {
|
|
67
|
+
wrapperStyle: CSS.Properties;
|
|
68
|
+
allowEscapeViewBox: { x: boolean; y: boolean };
|
|
69
|
+
} = {
|
|
70
|
+
wrapperStyle: {
|
|
71
|
+
zIndex: 10,
|
|
72
|
+
},
|
|
73
|
+
allowEscapeViewBox: { x: true, y: true },
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
export const TOOLTIP_STYLE: CSS.Properties = {
|
|
67
77
|
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
|
68
78
|
padding: '5px',
|
|
69
79
|
border: '1px solid grey',
|
|
70
80
|
boxShadow: '0px 0px 2px rgba(0, 0, 0, 0.9)',
|
|
71
81
|
borderRadius: '2px',
|
|
72
82
|
textAlign: 'left',
|
|
73
|
-
zIndex: 1,
|
|
74
83
|
};
|
|
75
84
|
|
|
76
85
|
export const LABEL_STYLE: CSS.Properties = {
|
|
@@ -91,8 +100,6 @@ export const CHART_WRAPPER_STYLE: CSS.Properties = {
|
|
|
91
100
|
display: 'flex',
|
|
92
101
|
flexDirection: 'column',
|
|
93
102
|
alignItems: 'center',
|
|
94
|
-
overflowX: 'auto',
|
|
95
|
-
overflowY: 'hidden',
|
|
96
103
|
};
|
|
97
104
|
|
|
98
105
|
// bar chart
|