bento-charts 2.4.2 → 2.5.0
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.d.ts +1 -1
- package/dist/Components/Charts/BentoBarChart.js +6 -4
- package/dist/Components/Charts/BentoBarChart.js.map +1 -1
- package/dist/Components/Charts/BentoPie.d.ts +1 -1
- package/dist/Components/Charts/BentoPie.js +8 -9
- package/dist/Components/Charts/BentoPie.js.map +1 -1
- package/dist/Components/Charts/ChartWrapper.d.ts +6 -0
- package/dist/Components/Charts/ChartWrapper.js +10 -0
- package/dist/Components/Charts/ChartWrapper.js.map +1 -0
- package/dist/constants/chartConstants.d.ts +0 -2
- package/dist/constants/chartConstants.js +2 -2
- package/dist/constants/chartConstants.js.map +1 -1
- package/dist/types/chartTypes.d.ts +1 -0
- package/package.json +1 -1
- package/src/Components/Charts/BentoBarChart.tsx +32 -29
- package/src/Components/Charts/BentoPie.tsx +46 -37
- package/src/Components/Charts/ChartWrapper.tsx +15 -0
- package/src/constants/chartConstants.ts +2 -2
- package/src/types/chartTypes.ts +3 -0
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { BarChartProps } from '../../types/chartTypes';
|
|
2
|
-
declare const BentoBarChart: ({ height, units, title, onClick, colorTheme, ...params }: BarChartProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const BentoBarChart: ({ height, width, units, title, onClick, colorTheme, ...params }: BarChartProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default BentoBarChart;
|
|
@@ -11,19 +11,21 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { useCallback } from 'react';
|
|
14
|
-
import { BarChart, Bar, Cell, XAxis, YAxis, Tooltip, Label } from 'recharts';
|
|
15
|
-
import { TOOL_TIP_STYLE, COUNT_STYLE, LABEL_STYLE,
|
|
14
|
+
import { BarChart, Bar, Cell, XAxis, YAxis, Tooltip, Label, ResponsiveContainer } from 'recharts';
|
|
15
|
+
import { TOOL_TIP_STYLE, COUNT_STYLE, LABEL_STYLE, MAX_TICK_LABEL_CHARS, TITLE_STYLE, TICKS_SHOW_ALL_LABELS_BELOW, UNITS_LABEL_OFFSET, TICK_MARGIN, } from '../../constants/chartConstants';
|
|
16
16
|
import { useChartTheme, useChartTranslation } from '../../ChartConfigProvider';
|
|
17
17
|
import NoData from '../NoData';
|
|
18
18
|
import { useTransformedChartData } from '../../util/chartUtils';
|
|
19
|
+
import ChartWrapper from './ChartWrapper';
|
|
19
20
|
var tickFormatter = function (tickLabel) {
|
|
20
21
|
if (tickLabel.length <= MAX_TICK_LABEL_CHARS) {
|
|
21
22
|
return tickLabel;
|
|
22
23
|
}
|
|
23
24
|
return "".concat(tickLabel.substring(0, MAX_TICK_LABEL_CHARS), "...");
|
|
24
25
|
};
|
|
26
|
+
var BAR_CHART_MARGINS = { top: 10, bottom: 100, right: 20 };
|
|
25
27
|
var BentoBarChart = function (_a) {
|
|
26
|
-
var height = _a.height, units = _a.units, title = _a.title, onClick = _a.onClick, _b = _a.colorTheme, colorTheme = _b === void 0 ? 'default' : _b, params = __rest(_a, ["height", "units", "title", "onClick", "colorTheme"]);
|
|
28
|
+
var height = _a.height, width = _a.width, units = _a.units, title = _a.title, onClick = _a.onClick, _b = _a.colorTheme, colorTheme = _b === void 0 ? 'default' : _b, params = __rest(_a, ["height", "width", "units", "title", "onClick", "colorTheme"]);
|
|
27
29
|
var t = useChartTranslation();
|
|
28
30
|
var _c = useChartTheme().bar[colorTheme], chartFill = _c.fill, missing = _c.missing;
|
|
29
31
|
var fill = function (entry) { return (entry.x === 'missing' ? missing : chartFill); };
|
|
@@ -42,7 +44,7 @@ var BentoBarChart = function (_a) {
|
|
|
42
44
|
// Basically, if data is empty, Recharts will default to a domain of [0, "auto"] and our tickFormatter trips up
|
|
43
45
|
// on formatting a non-string. This hack manually overrides the ticks for the axis and blanks it out.
|
|
44
46
|
// - David L, 2023-01-03
|
|
45
|
-
return (_jsxs(
|
|
47
|
+
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'], offset: -10, position: "left", angle: 270 }) }), _jsx(Tooltip, { content: _jsx(BarTooltip, { totalCount: totalCount }) }), _jsx(Bar, { dataKey: "y", isAnimationActive: false, onClick: onClick, onMouseEnter: onHover, children: data.map(function (entry) { return (_jsx(Cell, { fill: fill(entry) }, entry.x)); }) })] }) })] }));
|
|
46
48
|
};
|
|
47
49
|
var BarTooltip = function (_a) {
|
|
48
50
|
var _b, _c, _d;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BentoBarChart.js","sourceRoot":"","sources":["../../../src/Components/Charts/BentoBarChart.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAY,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"BentoBarChart.js","sourceRoot":"","sources":["../../../src/Components/Charts/BentoBarChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { PieChartProps } from '../../types/chartTypes';
|
|
2
|
-
declare const BentoPie: ({ height, onClick, sort, colorTheme, chartThreshold, maxLabelChars, ...params }: PieChartProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const BentoPie: ({ height, width, onClick, sort, colorTheme, chartThreshold, maxLabelChars, ...params }: PieChartProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default BentoPie;
|
|
@@ -31,11 +31,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
31
31
|
};
|
|
32
32
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
33
33
|
import { useCallback, useMemo, useState } from 'react';
|
|
34
|
-
import { PieChart, Pie, Cell, Curve, Tooltip, Sector } from 'recharts';
|
|
35
|
-
import { TOOL_TIP_STYLE, LABEL_STYLE, COUNT_STYLE, CHART_MISSING_FILL,
|
|
34
|
+
import { PieChart, Pie, Cell, Curve, Tooltip, Sector, ResponsiveContainer, } from 'recharts';
|
|
35
|
+
import { TOOL_TIP_STYLE, LABEL_STYLE, COUNT_STYLE, CHART_MISSING_FILL, RADIAN, LABEL_THRESHOLD, COUNT_TEXT_STYLE, TEXT_STYLE, } 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';
|
|
39
|
+
import ChartWrapper from './ChartWrapper';
|
|
39
40
|
var labelShortName = function (name, maxChars) {
|
|
40
41
|
if (name.length <= maxChars) {
|
|
41
42
|
return name;
|
|
@@ -43,10 +44,8 @@ var labelShortName = function (name, maxChars) {
|
|
|
43
44
|
// removing 3 character cause ... s add three characters
|
|
44
45
|
return "".concat(name.substring(0, maxChars - 3), "\u2026");
|
|
45
46
|
};
|
|
46
|
-
var OUTER_RADIUS_REDUCTION_FACTOR = 3.75; // originally from 300 / 80
|
|
47
|
-
var INNER_RADIUS_REDUCTION_FACTOR = 8.5; // roughly originally from 300 / 35
|
|
48
47
|
var BentoPie = function (_a) {
|
|
49
|
-
var height = _a.height, onClick = _a.onClick, _b = _a.sort, sort = _b === void 0 ? true : _b, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'default' : _c, _d = _a.chartThreshold, chartThreshold = _d === void 0 ? useChartThreshold() : _d, _e = _a.maxLabelChars, maxLabelChars = _e === void 0 ? useChartMaxLabelChars() : _e, params = __rest(_a, ["height", "onClick", "sort", "colorTheme", "chartThreshold", "maxLabelChars"]);
|
|
48
|
+
var height = _a.height, width = _a.width, onClick = _a.onClick, _b = _a.sort, sort = _b === void 0 ? true : _b, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'default' : _c, _d = _a.chartThreshold, chartThreshold = _d === void 0 ? useChartThreshold() : _d, _e = _a.maxLabelChars, maxLabelChars = _e === void 0 ? useChartMaxLabelChars() : _e, params = __rest(_a, ["height", "width", "onClick", "sort", "colorTheme", "chartThreshold", "maxLabelChars"]);
|
|
50
49
|
var t = useChartTranslation();
|
|
51
50
|
var theme = useChartTheme().pie[colorTheme];
|
|
52
51
|
var _f = useState(undefined), activeIndex = _f[0], setActiveIndex = _f[1];
|
|
@@ -87,10 +86,10 @@ var BentoPie = function (_a) {
|
|
|
87
86
|
var onLeave = useCallback(function () {
|
|
88
87
|
setActiveIndex(undefined);
|
|
89
88
|
}, []);
|
|
90
|
-
return (_jsx(
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
89
|
+
return (_jsx(ChartWrapper, { 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
|
+
var fill = entry.name.toLowerCase() === 'missing' ? CHART_MISSING_FILL : theme[index % theme.length];
|
|
91
|
+
return _jsx(Cell, { fill: fill }, index);
|
|
92
|
+
}) }), _jsx(Tooltip, { content: _jsx(CustomTooltip, { totalCount: sum }), isAnimationActive: false, allowEscapeViewBox: { x: true, y: true } })] }) }) }));
|
|
94
93
|
};
|
|
95
94
|
var toNumber = function (val, defaultValue) {
|
|
96
95
|
if (val && typeof val === 'string') {
|
|
@@ -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,
|
|
1
|
+
{"version":3,"file":"BentoPie.js","sourceRoot":"","sources":["../../../src/Components/Charts/BentoPie.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import { CHART_WRAPPER_STYLE } from '../../constants/chartConstants';
|
|
4
|
+
var ChartWrapper = forwardRef(function (_a, ref) {
|
|
5
|
+
var children = _a.children;
|
|
6
|
+
return (_jsx("div", { style: CHART_WRAPPER_STYLE, ref: ref, children: children }));
|
|
7
|
+
});
|
|
8
|
+
ChartWrapper.displayName = "ChartWrapper";
|
|
9
|
+
export default ChartWrapper;
|
|
10
|
+
//# sourceMappingURL=ChartWrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;AAMrE,IAAM,YAAY,GAAG,UAAU,CAAC,UAAC,EAA6B,EAAE,GAAiC;QAA/D,QAAQ,cAAA;IAA4D,OAAA,CACpG,cAAK,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,GAAG,YACtC,QAAQ,GACL,CACP;AAJqG,CAIrG,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAE1C,eAAe,YAAY,CAAC"}
|
|
@@ -12,11 +12,9 @@ export declare const CHART_WRAPPER_STYLE: CSS.Properties;
|
|
|
12
12
|
export declare const TITLE_STYLE: CSS.Properties;
|
|
13
13
|
export declare const TEXT_STYLE: CSS.Properties;
|
|
14
14
|
export declare const COUNT_TEXT_STYLE: CSS.Properties;
|
|
15
|
-
export declare const ASPECT_RATIO = 1.2;
|
|
16
15
|
export declare const MAX_TICK_LABEL_CHARS = 15;
|
|
17
16
|
export declare const UNITS_LABEL_OFFSET = -75;
|
|
18
17
|
export declare const TICKS_SHOW_ALL_LABELS_BELOW = 11;
|
|
19
18
|
export declare const TICK_MARGIN = 5;
|
|
20
|
-
export declare const CHART_ASPECT_RATIO = 1.4;
|
|
21
19
|
export declare const LABEL_THRESHOLD = 0.05;
|
|
22
20
|
export declare const RADIAN: number;
|
|
@@ -72,6 +72,8 @@ export var CHART_WRAPPER_STYLE = {
|
|
|
72
72
|
display: 'flex',
|
|
73
73
|
flexDirection: 'column',
|
|
74
74
|
alignItems: 'center',
|
|
75
|
+
overflowX: 'auto',
|
|
76
|
+
overflowY: 'hidden',
|
|
75
77
|
};
|
|
76
78
|
// bar chart
|
|
77
79
|
export var TITLE_STYLE = {
|
|
@@ -90,13 +92,11 @@ export var COUNT_TEXT_STYLE = {
|
|
|
90
92
|
};
|
|
91
93
|
// ################### CHART CONSTANTS ###################
|
|
92
94
|
// bar chart
|
|
93
|
-
export var ASPECT_RATIO = 1.2;
|
|
94
95
|
export var MAX_TICK_LABEL_CHARS = 15;
|
|
95
96
|
export var UNITS_LABEL_OFFSET = -75;
|
|
96
97
|
export var TICKS_SHOW_ALL_LABELS_BELOW = 11; // Below this # of X-axis ticks, force-show all labels
|
|
97
98
|
export var TICK_MARGIN = 5; // vertical spacing between tick line and tick label
|
|
98
99
|
// pie chart
|
|
99
|
-
export var CHART_ASPECT_RATIO = 1.4;
|
|
100
100
|
export var LABEL_THRESHOLD = 0.05;
|
|
101
101
|
// ################### UTIL CONSTANTS ###################
|
|
102
102
|
export var RADIAN = Math.PI / 180;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chartConstants.js","sourceRoot":"","sources":["../../src/constants/chartConstants.ts"],"names":[],"mappings":"AAGA,4DAA4D;AAC5D,MAAM,CAAC,IAAM,wBAAwB,GAAsB;IACzD,EAAE,EAAE;QACF,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,OAAO;KACf;IACD,EAAE,EAAE;QACF,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,OAAO;KACf;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,MAAM;KAChB;IACD,GAAG,EAAE;QACH,OAAO,EAAE;YACP,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,kBAAkB;SAC5B;KACF;CACF,CAAC;AAEF,uDAAuD;AAEvD,SAAS;AACT,MAAM,CAAC,IAAM,cAAc,GAAmB;IAC5C,eAAe,EAAE,0BAA0B;IAC3C,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,gBAAgB;IACxB,SAAS,EAAE,gCAAgC;IAC3C,YAAY,EAAE,KAAK;IACnB,SAAS,EAAE,MAAM;CAClB,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAmB;IACzC,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;CACZ,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAmB;IACzC,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;CACZ,CAAC;AAEF,MAAM,CAAC,IAAM,mBAAmB,GAAmB;IACjD,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,UAAU,EAAE,QAAQ;
|
|
1
|
+
{"version":3,"file":"chartConstants.js","sourceRoot":"","sources":["../../src/constants/chartConstants.ts"],"names":[],"mappings":"AAGA,4DAA4D;AAC5D,MAAM,CAAC,IAAM,wBAAwB,GAAsB;IACzD,EAAE,EAAE;QACF,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,OAAO;KACf;IACD,EAAE,EAAE;QACF,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,OAAO;KACf;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,MAAM;KAChB;IACD,GAAG,EAAE;QACH,OAAO,EAAE;YACP,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,kBAAkB;SAC5B;KACF;CACF,CAAC;AAEF,uDAAuD;AAEvD,SAAS;AACT,MAAM,CAAC,IAAM,cAAc,GAAmB;IAC5C,eAAe,EAAE,0BAA0B;IAC3C,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,gBAAgB;IACxB,SAAS,EAAE,gCAAgC;IAC3C,YAAY,EAAE,KAAK;IACnB,SAAS,EAAE,MAAM;CAClB,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAmB;IACzC,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;CACZ,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAmB;IACzC,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;CACZ,CAAC;AAEF,MAAM,CAAC,IAAM,mBAAmB,GAAmB;IACjD,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,MAAM;IACjB,SAAS,EAAE,QAAQ;CACpB,CAAC;AAEF,YAAY;AACZ,MAAM,CAAC,IAAM,WAAW,GAAmB;IACzC,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE,OAAO;IACjB,SAAS,EAAE,QAAQ;CACpB,CAAC;AAEF,YAAY;AACZ,MAAM,CAAC,IAAM,UAAU,GAAmB;IACxC,QAAQ,EAAE,MAAM;IAChB,IAAI,EAAE,MAAM;CACb,CAAC;AACF,MAAM,CAAC,IAAM,gBAAgB,GAAmB;IAC9C,QAAQ,EAAE,MAAM;IAChB,IAAI,EAAE,MAAM;CACb,CAAC;AAEF,0DAA0D;AAC1D,YAAY;AACZ,MAAM,CAAC,IAAM,oBAAoB,GAAG,EAAE,CAAC;AACvC,MAAM,CAAC,IAAM,kBAAkB,GAAG,CAAC,EAAE,CAAC;AACtC,MAAM,CAAC,IAAM,2BAA2B,GAAG,EAAE,CAAC,CAAC,sDAAsD;AACrG,MAAM,CAAC,IAAM,WAAW,GAAG,CAAC,CAAC,CAAC,oDAAoD;AAElF,YAAY;AACZ,MAAM,CAAC,IAAM,eAAe,GAAG,IAAI,CAAC;AAEpC,yDAAyD;AACzD,MAAM,CAAC,IAAM,MAAM,GAAG,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC"}
|
|
@@ -52,6 +52,7 @@ export interface CategoricalChartDataWithTransforms {
|
|
|
52
52
|
}
|
|
53
53
|
export interface BaseChartComponentProps {
|
|
54
54
|
height: number;
|
|
55
|
+
width?: number | string;
|
|
55
56
|
}
|
|
56
57
|
export interface BaseCategoricalChartProps extends BaseChartComponentProps, CategoricalChartDataWithTransforms {
|
|
57
58
|
}
|
package/package.json
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import React, { useCallback } from 'react';
|
|
2
|
-
import { BarChart, Bar, Cell, XAxis, YAxis, Tooltip, Label, BarProps } from 'recharts';
|
|
2
|
+
import { BarChart, Bar, Cell, XAxis, YAxis, Tooltip, Label, BarProps, ResponsiveContainer } from 'recharts';
|
|
3
3
|
import {
|
|
4
4
|
TOOL_TIP_STYLE,
|
|
5
5
|
COUNT_STYLE,
|
|
6
6
|
LABEL_STYLE,
|
|
7
|
-
CHART_WRAPPER_STYLE,
|
|
8
7
|
MAX_TICK_LABEL_CHARS,
|
|
9
8
|
TITLE_STYLE,
|
|
10
|
-
ASPECT_RATIO,
|
|
11
9
|
TICKS_SHOW_ALL_LABELS_BELOW,
|
|
12
10
|
UNITS_LABEL_OFFSET,
|
|
13
11
|
TICK_MARGIN,
|
|
@@ -17,6 +15,7 @@ import type { BarChartProps, CategoricalChartDataItem, TooltipPayload } from '..
|
|
|
17
15
|
import { useChartTheme, useChartTranslation } from '../../ChartConfigProvider';
|
|
18
16
|
import NoData from '../NoData';
|
|
19
17
|
import { useTransformedChartData } from '../../util/chartUtils';
|
|
18
|
+
import ChartWrapper from './ChartWrapper';
|
|
20
19
|
|
|
21
20
|
const tickFormatter = (tickLabel: string) => {
|
|
22
21
|
if (tickLabel.length <= MAX_TICK_LABEL_CHARS) {
|
|
@@ -25,7 +24,9 @@ const tickFormatter = (tickLabel: string) => {
|
|
|
25
24
|
return `${tickLabel.substring(0, MAX_TICK_LABEL_CHARS)}...`;
|
|
26
25
|
};
|
|
27
26
|
|
|
28
|
-
const
|
|
27
|
+
const BAR_CHART_MARGINS = { top: 10, bottom: 100, right: 20 };
|
|
28
|
+
|
|
29
|
+
const BentoBarChart = ({ height, width, units, title, onClick, colorTheme = 'default', ...params }: BarChartProps) => {
|
|
29
30
|
const t = useChartTranslation();
|
|
30
31
|
const { fill: chartFill, missing } = useChartTheme().bar[colorTheme];
|
|
31
32
|
|
|
@@ -53,32 +54,34 @@ const BentoBarChart = ({ height, units, title, onClick, colorTheme = 'default',
|
|
|
53
54
|
// on formatting a non-string. This hack manually overrides the ticks for the axis and blanks it out.
|
|
54
55
|
// - David L, 2023-01-03
|
|
55
56
|
return (
|
|
56
|
-
<
|
|
57
|
+
<ChartWrapper>
|
|
57
58
|
<div style={TITLE_STYLE}>{title}</div>
|
|
58
|
-
<
|
|
59
|
-
<
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
<
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
{
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
59
|
+
<ResponsiveContainer width={width ?? "100%"} height={height}>
|
|
60
|
+
<BarChart data={data} margin={BAR_CHART_MARGINS}>
|
|
61
|
+
<XAxis
|
|
62
|
+
dataKey="x"
|
|
63
|
+
height={20}
|
|
64
|
+
angle={-45}
|
|
65
|
+
ticks={data.length ? undefined : ['']}
|
|
66
|
+
tickFormatter={tickFormatter}
|
|
67
|
+
tickMargin={TICK_MARGIN}
|
|
68
|
+
textAnchor="end"
|
|
69
|
+
interval={data.length < TICKS_SHOW_ALL_LABELS_BELOW ? 0 : 'preserveStartEnd'}
|
|
70
|
+
>
|
|
71
|
+
<Label value={units} offset={UNITS_LABEL_OFFSET} position="insideBottom" />
|
|
72
|
+
</XAxis>
|
|
73
|
+
<YAxis>
|
|
74
|
+
<Label value={t['Count']} offset={-10} position="left" angle={270} />
|
|
75
|
+
</YAxis>
|
|
76
|
+
<Tooltip content={<BarTooltip totalCount={totalCount} />} />
|
|
77
|
+
<Bar dataKey="y" isAnimationActive={false} onClick={onClick} onMouseEnter={onHover}>
|
|
78
|
+
{data.map((entry) => (
|
|
79
|
+
<Cell key={entry.x} fill={fill(entry)} />
|
|
80
|
+
))}
|
|
81
|
+
</Bar>
|
|
82
|
+
</BarChart>
|
|
83
|
+
</ResponsiveContainer>
|
|
84
|
+
</ChartWrapper>
|
|
82
85
|
);
|
|
83
86
|
};
|
|
84
87
|
|
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
import React, { useCallback, useMemo, useState } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
PieChart,
|
|
4
|
+
Pie,
|
|
5
|
+
Cell,
|
|
6
|
+
Curve,
|
|
7
|
+
Tooltip,
|
|
8
|
+
Sector,
|
|
9
|
+
PieProps,
|
|
10
|
+
PieLabelRenderProps,
|
|
11
|
+
ResponsiveContainer,
|
|
12
|
+
} from 'recharts';
|
|
3
13
|
import type CSS from 'csstype';
|
|
4
14
|
|
|
5
15
|
import {
|
|
@@ -7,9 +17,7 @@ import {
|
|
|
7
17
|
LABEL_STYLE,
|
|
8
18
|
COUNT_STYLE,
|
|
9
19
|
CHART_MISSING_FILL,
|
|
10
|
-
CHART_WRAPPER_STYLE,
|
|
11
20
|
RADIAN,
|
|
12
|
-
CHART_ASPECT_RATIO,
|
|
13
21
|
LABEL_THRESHOLD,
|
|
14
22
|
COUNT_TEXT_STYLE,
|
|
15
23
|
TEXT_STYLE,
|
|
@@ -23,6 +31,7 @@ import {
|
|
|
23
31
|
} from '../../ChartConfigProvider';
|
|
24
32
|
import { polarToCartesian, useTransformedChartData } from '../../util/chartUtils';
|
|
25
33
|
import NoData from '../NoData';
|
|
34
|
+
import ChartWrapper from './ChartWrapper';
|
|
26
35
|
|
|
27
36
|
const labelShortName = (name: string, maxChars: number) => {
|
|
28
37
|
if (name.length <= maxChars) {
|
|
@@ -32,11 +41,9 @@ const labelShortName = (name: string, maxChars: number) => {
|
|
|
32
41
|
return `${name.substring(0, maxChars - 3)}\u2026`;
|
|
33
42
|
};
|
|
34
43
|
|
|
35
|
-
const OUTER_RADIUS_REDUCTION_FACTOR = 3.75; // originally from 300 / 80
|
|
36
|
-
const INNER_RADIUS_REDUCTION_FACTOR = 8.5; // roughly originally from 300 / 35
|
|
37
|
-
|
|
38
44
|
const BentoPie = ({
|
|
39
45
|
height,
|
|
46
|
+
width,
|
|
40
47
|
onClick,
|
|
41
48
|
sort = true,
|
|
42
49
|
colorTheme = 'default',
|
|
@@ -97,37 +104,39 @@ const BentoPie = ({
|
|
|
97
104
|
}, []);
|
|
98
105
|
|
|
99
106
|
return (
|
|
100
|
-
<
|
|
101
|
-
<
|
|
102
|
-
<
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
107
|
+
<ChartWrapper>
|
|
108
|
+
<ResponsiveContainer width={width ?? "100%"} height={height}>
|
|
109
|
+
<PieChart>
|
|
110
|
+
<Pie
|
|
111
|
+
data={data}
|
|
112
|
+
dataKey="value"
|
|
113
|
+
cx="50%"
|
|
114
|
+
cy="50%"
|
|
115
|
+
innerRadius="25%"
|
|
116
|
+
outerRadius="55%"
|
|
117
|
+
label={renderLabel(maxLabelChars)}
|
|
118
|
+
labelLine={false}
|
|
119
|
+
isAnimationActive={false}
|
|
120
|
+
onMouseEnter={onEnter}
|
|
121
|
+
onMouseLeave={onLeave}
|
|
122
|
+
onMouseOver={onHover}
|
|
123
|
+
activeIndex={activeIndex}
|
|
124
|
+
activeShape={RenderActiveLabel}
|
|
125
|
+
onClick={onClick}
|
|
126
|
+
>
|
|
127
|
+
{data.map((entry, index) => {
|
|
128
|
+
const fill = entry.name.toLowerCase() === 'missing' ? CHART_MISSING_FILL : theme[index % theme.length];
|
|
129
|
+
return <Cell key={index} fill={fill} />;
|
|
130
|
+
})}
|
|
131
|
+
</Pie>
|
|
132
|
+
<Tooltip
|
|
133
|
+
content={<CustomTooltip totalCount={sum} />}
|
|
134
|
+
isAnimationActive={false}
|
|
135
|
+
allowEscapeViewBox={{ x: true, y: true }}
|
|
136
|
+
/>
|
|
137
|
+
</PieChart>
|
|
138
|
+
</ResponsiveContainer>
|
|
139
|
+
</ChartWrapper>
|
|
131
140
|
);
|
|
132
141
|
};
|
|
133
142
|
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React, { ForwardedRef, forwardRef, ReactNode } from 'react';
|
|
2
|
+
import { CHART_WRAPPER_STYLE } from '../../constants/chartConstants';
|
|
3
|
+
|
|
4
|
+
interface ChartWrapperProps {
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
const ChartWrapper = forwardRef(({children}: ChartWrapperProps, ref: ForwardedRef<HTMLDivElement>) => (
|
|
9
|
+
<div style={CHART_WRAPPER_STYLE} ref={ref}>
|
|
10
|
+
{children}
|
|
11
|
+
</div>
|
|
12
|
+
));
|
|
13
|
+
ChartWrapper.displayName = "ChartWrapper";
|
|
14
|
+
|
|
15
|
+
export default ChartWrapper;
|
|
@@ -83,6 +83,8 @@ export const CHART_WRAPPER_STYLE: CSS.Properties = {
|
|
|
83
83
|
display: 'flex',
|
|
84
84
|
flexDirection: 'column',
|
|
85
85
|
alignItems: 'center',
|
|
86
|
+
overflowX: 'auto',
|
|
87
|
+
overflowY: 'hidden',
|
|
86
88
|
};
|
|
87
89
|
|
|
88
90
|
// bar chart
|
|
@@ -104,14 +106,12 @@ export const COUNT_TEXT_STYLE: CSS.Properties = {
|
|
|
104
106
|
|
|
105
107
|
// ################### CHART CONSTANTS ###################
|
|
106
108
|
// bar chart
|
|
107
|
-
export const ASPECT_RATIO = 1.2;
|
|
108
109
|
export const MAX_TICK_LABEL_CHARS = 15;
|
|
109
110
|
export const UNITS_LABEL_OFFSET = -75;
|
|
110
111
|
export const TICKS_SHOW_ALL_LABELS_BELOW = 11; // Below this # of X-axis ticks, force-show all labels
|
|
111
112
|
export const TICK_MARGIN = 5; // vertical spacing between tick line and tick label
|
|
112
113
|
|
|
113
114
|
// pie chart
|
|
114
|
-
export const CHART_ASPECT_RATIO = 1.4;
|
|
115
115
|
export const LABEL_THRESHOLD = 0.05;
|
|
116
116
|
|
|
117
117
|
// ################### UTIL CONSTANTS ###################
|
package/src/types/chartTypes.ts
CHANGED
|
@@ -62,6 +62,9 @@ export interface CategoricalChartDataWithTransforms {
|
|
|
62
62
|
// ################### COMPONENT PROPS #####################
|
|
63
63
|
export interface BaseChartComponentProps {
|
|
64
64
|
height: number;
|
|
65
|
+
// Width is useful to have, to force re-render / force a specific width, but it is optional.
|
|
66
|
+
// Otherwise, it will be set to 100%.
|
|
67
|
+
width?: number | string;
|
|
65
68
|
}
|
|
66
69
|
|
|
67
70
|
export interface BaseCategoricalChartProps extends BaseChartComponentProps, CategoricalChartDataWithTransforms {}
|