bento-charts 2.0.1 → 2.1.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/ChartConfigProvider.d.ts +6 -4
- package/dist/ChartConfigProvider.js +11 -6
- package/dist/ChartConfigProvider.js.map +1 -1
- package/dist/Charts/BentoBarChart.d.ts +1 -2
- package/dist/Charts/BentoBarChart.js +7 -2
- package/dist/Charts/BentoBarChart.js.map +1 -1
- package/dist/Charts/BentoPie.d.ts +1 -2
- package/dist/Charts/BentoPie.js +20 -17
- package/dist/Charts/BentoPie.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/types/chartTypes.d.ts +4 -0
- package/package.json +8 -1
- package/src/ChartConfigProvider.tsx +17 -22
- package/src/Charts/BentoBarChart.tsx +8 -2
- package/src/Charts/BentoPie.tsx +50 -40
- package/src/index.ts +2 -1
- package/src/types/chartTypes.ts +7 -2
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { ChartTheme, LngDictionary, TranslationObject } from
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ChartTheme, LngDictionary, TranslationObject } from './types/chartTypes';
|
|
3
3
|
export declare function useChartTheme(): ChartTheme;
|
|
4
4
|
export declare function useChartTranslation(): LngDictionary;
|
|
5
|
-
declare
|
|
5
|
+
export declare function useChartThreshold(): number;
|
|
6
|
+
declare const ChartConfigProvider: ({ theme, Lng, translationMap, children, globalThreshold, }: {
|
|
6
7
|
theme?: ChartTheme | undefined;
|
|
7
8
|
Lng: string;
|
|
8
9
|
translationMap?: TranslationObject | undefined;
|
|
9
10
|
children: React.ReactElement;
|
|
10
|
-
|
|
11
|
+
globalThreshold?: number | undefined;
|
|
12
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
11
13
|
export default ChartConfigProvider;
|
|
@@ -10,8 +10,8 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
import React, { useContext } from
|
|
14
|
-
import { DEFAULT_CHART_THEME, defaultTranslationObject
|
|
13
|
+
import React, { useContext } from 'react';
|
|
14
|
+
import { DEFAULT_CHART_THEME, defaultTranslationObject } from './constants/chartConstants';
|
|
15
15
|
var ChartThemeContext = React.createContext(DEFAULT_CHART_THEME);
|
|
16
16
|
export function useChartTheme() {
|
|
17
17
|
return useContext(ChartThemeContext);
|
|
@@ -20,16 +20,21 @@ var ChartTranslationContext = React.createContext(defaultTranslationObject.en);
|
|
|
20
20
|
export function useChartTranslation() {
|
|
21
21
|
return useContext(ChartTranslationContext);
|
|
22
22
|
}
|
|
23
|
+
var ChartThresholdContext = React.createContext(0);
|
|
24
|
+
export function useChartThreshold() {
|
|
25
|
+
return useContext(ChartThresholdContext);
|
|
26
|
+
}
|
|
27
|
+
// TODO: reduce number of contexts
|
|
23
28
|
var ChartConfigProvider = function (_a) {
|
|
24
|
-
var _b = _a.theme, theme = _b === void 0 ? DEFAULT_CHART_THEME : _b, Lng = _a.Lng, translationMap = _a.translationMap, children = _a.children;
|
|
25
|
-
var lang =
|
|
29
|
+
var _b = _a.theme, theme = _b === void 0 ? DEFAULT_CHART_THEME : _b, Lng = _a.Lng, translationMap = _a.translationMap, children = _a.children, _c = _a.globalThreshold, globalThreshold = _c === void 0 ? 0 : _c;
|
|
30
|
+
var lang = 'en';
|
|
26
31
|
try {
|
|
27
32
|
lang = Lng;
|
|
28
33
|
}
|
|
29
34
|
catch (e) {
|
|
30
|
-
console.error(
|
|
35
|
+
console.error('Lng is not a supported language');
|
|
31
36
|
}
|
|
32
|
-
return (_jsx(ChartThemeContext.Provider, __assign({ value: theme }, { children: _jsx(ChartTranslationContext.Provider, __assign({ value: translationMap ? translationMap[lang] : defaultTranslationObject[lang] }, { children: children })) })));
|
|
37
|
+
return (_jsx(ChartThemeContext.Provider, __assign({ value: theme }, { children: _jsx(ChartTranslationContext.Provider, __assign({ value: translationMap ? translationMap[lang] : defaultTranslationObject[lang] }, { children: _jsx(ChartThresholdContext.Provider, __assign({ value: globalThreshold }, { children: children })) })) })));
|
|
33
38
|
};
|
|
34
39
|
export default ChartConfigProvider;
|
|
35
40
|
//# sourceMappingURL=ChartConfigProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartConfigProvider.js","sourceRoot":"","sources":["../src/ChartConfigProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,
|
|
1
|
+
{"version":3,"file":"ChartConfigProvider.js","sourceRoot":"","sources":["../src/ChartConfigProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAG3F,IAAM,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAa,mBAAmB,CAAC,CAAC;AAC/E,MAAM,UAAU,aAAa;IAC3B,OAAO,UAAU,CAAC,iBAAiB,CAAC,CAAC;AACvC,CAAC;AAED,IAAM,uBAAuB,GAAG,KAAK,CAAC,aAAa,CAAgB,wBAAwB,CAAC,EAAE,CAAC,CAAC;AAChG,MAAM,UAAU,mBAAmB;IACjC,OAAO,UAAU,CAAC,uBAAuB,CAAC,CAAC;AAC7C,CAAC;AAED,IAAM,qBAAqB,GAAG,KAAK,CAAC,aAAa,CAAS,CAAC,CAAC,CAAC;AAE7D,MAAM,UAAU,iBAAiB;IAC/B,OAAO,UAAU,CAAC,qBAAqB,CAAC,CAAC;AAC3C,CAAC;AAED,kCAAkC;AAClC,IAAM,mBAAmB,GAAG,UAAC,EAY5B;QAXC,aAA2B,EAA3B,KAAK,mBAAG,mBAAmB,KAAA,EAC3B,GAAG,SAAA,EACH,cAAc,oBAAA,EACd,QAAQ,cAAA,EACR,uBAAmB,EAAnB,eAAe,mBAAG,CAAC,KAAA;IAQnB,IAAI,IAAI,GAAiB,IAAI,CAAC;IAC9B,IAAI;QACF,IAAI,GAAG,GAAmB,CAAC;KAC5B;IAAC,OAAO,CAAC,EAAE;QACV,OAAO,CAAC,KAAK,CAAC,iCAAiC,CAAC,CAAC;KAClD;IACD,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,aAAC,KAAK,EAAE,KAAK,gBACtC,KAAC,uBAAuB,CAAC,QAAQ,aAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,wBAAwB,CAAC,IAAI,CAAC,gBAC7G,KAAC,qBAAqB,CAAC,QAAQ,aAAC,KAAK,EAAE,eAAe,gBAAG,QAAQ,IAAkC,IAClE,IACR,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import type { BarChartProps } from '../types/chartTypes';
|
|
3
|
-
declare const BentoBarChart: ({ data, height, units, title, preFilter, dataMap, postFilter, removeEmpty, colorTheme, }: BarChartProps) => JSX.Element;
|
|
2
|
+
declare const BentoBarChart: ({ data, height, units, title, preFilter, dataMap, postFilter, onClick, removeEmpty, colorTheme, }: BarChartProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
3
|
export default BentoBarChart;
|
|
@@ -29,7 +29,7 @@ var tickFormatter = function (tickLabel) {
|
|
|
29
29
|
return "".concat(tickLabel.substring(0, MAX_TICK_LABEL_CHARS), "...");
|
|
30
30
|
};
|
|
31
31
|
var BentoBarChart = function (_a) {
|
|
32
|
-
var data = _a.data, height = _a.height, units = _a.units, title = _a.title, preFilter = _a.preFilter, dataMap = _a.dataMap, postFilter = _a.postFilter, _b = _a.removeEmpty, removeEmpty = _b === void 0 ? true : _b, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'default' : _c;
|
|
32
|
+
var data = _a.data, height = _a.height, units = _a.units, title = _a.title, preFilter = _a.preFilter, dataMap = _a.dataMap, postFilter = _a.postFilter, onClick = _a.onClick, _b = _a.removeEmpty, removeEmpty = _b === void 0 ? true : _b, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'default' : _c;
|
|
33
33
|
var t = useChartTranslation();
|
|
34
34
|
var _d = useChartTheme().bar[colorTheme], chartFill = _d.fill, missing = _d.missing;
|
|
35
35
|
var fill = function (entry) { return (entry.x === 'missing' ? missing : chartFill); };
|
|
@@ -43,12 +43,17 @@ var BentoBarChart = function (_a) {
|
|
|
43
43
|
if (removeEmpty)
|
|
44
44
|
data = data.filter(function (d) { return d.y !== 0; });
|
|
45
45
|
var totalCount = data.reduce(function (sum, e) { return sum + e.y; }, 0);
|
|
46
|
+
var onHover = function (_data, _index, e) {
|
|
47
|
+
var target = e.target;
|
|
48
|
+
if (onClick && target)
|
|
49
|
+
target.style.cursor = 'pointer';
|
|
50
|
+
};
|
|
46
51
|
// Regarding XAxis.ticks below:
|
|
47
52
|
// The weird conditional is added from https://github.com/recharts/recharts/issues/2593#issuecomment-1311678397
|
|
48
53
|
// Basically, if data is empty, Recharts will default to a domain of [0, "auto"] and our tickFormatter trips up
|
|
49
54
|
// on formatting a non-string. This hack manually overrides the ticks for the axis and blanks it out.
|
|
50
55
|
// - David L, 2023-01-03
|
|
51
|
-
return (_jsxs("div", __assign({ style: CHART_WRAPPER_STYLE }, { children: [_jsx("div", __assign({ style: TITLE_STYLE }, { children: title })), _jsxs(BarChart, __assign({ width: height * ASPECT_RATIO, height: height, data: data, margin: { top: 10, bottom: 100, right: 20 } }, { children: [_jsx(XAxis, __assign({ 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, __assign({ dataKey: "y", isAnimationActive: false }, { children: data.map(function (entry) { return (_jsx(Cell, { fill: fill(entry) }, entry.x)); }) }))] }))] })));
|
|
56
|
+
return (_jsxs("div", __assign({ style: CHART_WRAPPER_STYLE }, { children: [_jsx("div", __assign({ style: TITLE_STYLE }, { children: title })), _jsxs(BarChart, __assign({ width: height * ASPECT_RATIO, height: height, data: data, margin: { top: 10, bottom: 100, right: 20 } }, { children: [_jsx(XAxis, __assign({ 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, __assign({ dataKey: "y", isAnimationActive: false, onClick: onClick, onMouseEnter: onHover }, { children: data.map(function (entry) { return (_jsx(Cell, { fill: fill(entry) }, entry.x)); }) }))] }))] })));
|
|
52
57
|
};
|
|
53
58
|
var BarTooltip = function (_a) {
|
|
54
59
|
var _b, _c, _d;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BentoBarChart.js","sourceRoot":"","sources":["../../src/Charts/BentoBarChart.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"BentoBarChart.js","sourceRoot":"","sources":["../../src/Charts/BentoBarChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import type { PieChartProps } from '../types/chartTypes';
|
|
3
|
-
declare const BentoPie: ({ data, height, preFilter, dataMap, postFilter, sort, removeEmpty, colorTheme, }: PieChartProps) => JSX.Element;
|
|
2
|
+
declare const BentoPie: ({ data, height, preFilter, dataMap, postFilter, onClick, sort, removeEmpty, colorTheme, chartThreshold, }: PieChartProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
3
|
export default BentoPie;
|
package/dist/Charts/BentoPie.js
CHANGED
|
@@ -18,11 +18,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
18
18
|
}
|
|
19
19
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
20
20
|
};
|
|
21
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
21
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
22
22
|
import { useState } from 'react';
|
|
23
23
|
import { PieChart, Pie, Cell, Curve, Tooltip, Sector } from 'recharts';
|
|
24
|
-
import { TOOL_TIP_STYLE, LABEL_STYLE, COUNT_STYLE,
|
|
25
|
-
import { useChartTheme, useChartTranslation } from '../ChartConfigProvider';
|
|
24
|
+
import { TOOL_TIP_STYLE, LABEL_STYLE, COUNT_STYLE, CHART_MISSING_FILL, CHART_WRAPPER_STYLE, RADIAN, MAX_LABEL_CHARS, CHART_ASPECT_RATIO, LABEL_THRESHOLD, COUNT_TEXT_STYLE, TEXT_STYLE, } from '../constants/chartConstants';
|
|
25
|
+
import { useChartTheme, useChartTranslation, useChartThreshold } from '../ChartConfigProvider';
|
|
26
26
|
import { polarToCartesian } from '../util/chartUtils';
|
|
27
27
|
var labelShortName = function (name) {
|
|
28
28
|
if (name.length <= MAX_LABEL_CHARS) {
|
|
@@ -32,10 +32,10 @@ var labelShortName = function (name) {
|
|
|
32
32
|
return "".concat(name.substring(0, MAX_LABEL_CHARS - 3), "\u2026");
|
|
33
33
|
};
|
|
34
34
|
var BentoPie = function (_a) {
|
|
35
|
-
var data = _a.data, height = _a.height, preFilter = _a.preFilter, dataMap = _a.dataMap, postFilter = _a.postFilter, _b = _a.sort, sort = _b === void 0 ? true : _b, _c = _a.removeEmpty, removeEmpty = _c === void 0 ? true : _c, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'default' : _d;
|
|
35
|
+
var data = _a.data, height = _a.height, preFilter = _a.preFilter, dataMap = _a.dataMap, postFilter = _a.postFilter, onClick = _a.onClick, _b = _a.sort, sort = _b === void 0 ? true : _b, _c = _a.removeEmpty, removeEmpty = _c === void 0 ? true : _c, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'default' : _d, _e = _a.chartThreshold, chartThreshold = _e === void 0 ? useChartThreshold() : _e;
|
|
36
36
|
var t = useChartTranslation();
|
|
37
37
|
var theme = useChartTheme().pie[colorTheme];
|
|
38
|
-
var
|
|
38
|
+
var _f = useState(undefined), activeIndex = _f[0], setActiveIndex = _f[1];
|
|
39
39
|
// ##################### Data processing #####################
|
|
40
40
|
data = __spreadArray([], data, true); // Changing immutable data to mutable data
|
|
41
41
|
if (preFilter)
|
|
@@ -52,37 +52,40 @@ var BentoPie = function (_a) {
|
|
|
52
52
|
// combining sections with less than OTHER_THRESHOLD
|
|
53
53
|
var sum = data.reduce(function (acc, e) { return acc + e.y; }, 0);
|
|
54
54
|
var length = data.length;
|
|
55
|
-
var threshold =
|
|
55
|
+
var threshold = chartThreshold * sum;
|
|
56
56
|
var temp = data.filter(function (e) { return e.y > threshold; });
|
|
57
57
|
// length - 1 intentional: if there is just one category bellow threshold the "Other" category is not necessary
|
|
58
58
|
data = temp.length === length - 1 ? data : temp;
|
|
59
59
|
if (data.length !== length) {
|
|
60
|
-
data.push({
|
|
60
|
+
data.push({
|
|
61
|
+
x: t['Other'],
|
|
62
|
+
y: sum - data.reduce(function (acc, e) { return acc + e.y; }, 0),
|
|
63
|
+
});
|
|
61
64
|
}
|
|
62
65
|
var bentoFormatData = data.map(function (e) { return ({ name: e.x, value: e.y }); });
|
|
63
66
|
// ##################### Rendering #####################
|
|
64
67
|
var onEnter = function (_data, index) {
|
|
65
68
|
setActiveIndex(index);
|
|
66
69
|
};
|
|
67
|
-
var onHover = function (
|
|
70
|
+
var onHover = function (data, _index, e) {
|
|
68
71
|
var target = e.target;
|
|
69
|
-
if (target)
|
|
72
|
+
if (onClick && target && data.name !== t['Other'])
|
|
70
73
|
target.style.cursor = 'pointer';
|
|
71
74
|
};
|
|
72
75
|
var onLeave = function () {
|
|
73
76
|
setActiveIndex(undefined);
|
|
74
77
|
};
|
|
75
|
-
return (_jsx("div", __assign({ style: CHART_WRAPPER_STYLE }, { children: _jsxs(PieChart, __assign({ height: height, width: height * CHART_ASPECT_RATIO }, { children: [_jsx(Pie, __assign({ data: bentoFormatData, dataKey: "value", cx: "50%", cy: "50%", innerRadius: 35, outerRadius: 80, label: RenderLabel, labelLine: false, isAnimationActive: false, onMouseEnter: onEnter, onMouseLeave: onLeave, onMouseOver: onHover, activeIndex: activeIndex, activeShape: RenderActiveLabel }, { children: data.map(function (entry, index) {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
78
|
+
return (_jsx(_Fragment, { children: _jsx("div", __assign({ style: CHART_WRAPPER_STYLE }, { children: _jsxs(PieChart, __assign({ height: height, width: height * CHART_ASPECT_RATIO }, { children: [_jsx(Pie, __assign({ data: bentoFormatData, dataKey: "value", cx: "50%", cy: "50%", innerRadius: 35, outerRadius: 80, label: RenderLabel, labelLine: false, isAnimationActive: false, onMouseEnter: onEnter, onMouseLeave: onLeave, onMouseOver: onHover, activeIndex: activeIndex, activeShape: RenderActiveLabel, onClick: onClick }, { children: data.map(function (entry, index) {
|
|
79
|
+
var fill = theme[index % theme.length];
|
|
80
|
+
fill = entry.x.toLowerCase() === 'missing' ? CHART_MISSING_FILL : fill;
|
|
81
|
+
return _jsx(Cell, { fill: fill }, index);
|
|
82
|
+
}) })), _jsx(Tooltip, { content: _jsx(CustomTooltip, { totalCount: sum }), isAnimationActive: false, allowEscapeViewBox: { x: true, y: true } })] })) })) }));
|
|
80
83
|
};
|
|
81
84
|
var toNumber = function (val, defaultValue) {
|
|
82
|
-
if (val && typeof val ===
|
|
85
|
+
if (val && typeof val === 'string') {
|
|
83
86
|
return Number(val);
|
|
84
87
|
}
|
|
85
|
-
else if (val && typeof val ===
|
|
88
|
+
else if (val && typeof val === 'number') {
|
|
86
89
|
return val;
|
|
87
90
|
}
|
|
88
91
|
return defaultValue || 0;
|
|
@@ -130,7 +133,7 @@ var CustomTooltip = function (_a) {
|
|
|
130
133
|
var name = payload ? payload[0].name : '';
|
|
131
134
|
var value = payload ? payload[0].value : 0;
|
|
132
135
|
var percentage = totalCount ? Math.round((value / totalCount) * 100) : 0;
|
|
133
|
-
return (_jsxs("div", __assign({ style: TOOL_TIP_STYLE }, { children: [_jsx("p", __assign({ style: LABEL_STYLE }, { children: name })), _jsxs("p", __assign({ style: COUNT_STYLE }, { children: [' ', value, " (", percentage, "%)"] }))] })));
|
|
136
|
+
return name !== 'other' ? (_jsxs("div", __assign({ style: TOOL_TIP_STYLE }, { children: [_jsx("p", __assign({ style: LABEL_STYLE }, { children: name })), _jsxs("p", __assign({ style: COUNT_STYLE }, { children: [' ', value, " (", percentage, "%)"] }))] }))) : (_jsx("div", { children: "No data" }));
|
|
134
137
|
};
|
|
135
138
|
export default BentoPie;
|
|
136
139
|
//# sourceMappingURL=BentoPie.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BentoPie.js","sourceRoot":"","sources":["../../src/Charts/BentoPie.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAiC,MAAM,UAAU,CAAC;AAGtG,OAAO,EACL,cAAc,EACd,WAAW,EACX,WAAW,EACX,
|
|
1
|
+
{"version":3,"file":"BentoPie.js","sourceRoot":"","sources":["../../src/Charts/BentoPie.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,cAAc,oBAAoB,CAAC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { PieProps, BarProps } from 'recharts';
|
|
1
2
|
export type ChartDataType = ChartDataItem[];
|
|
2
3
|
export interface ChartDataItem {
|
|
3
4
|
x: string;
|
|
@@ -52,10 +53,13 @@ interface BaseChartProps {
|
|
|
52
53
|
export interface PieChartProps extends BaseChartProps {
|
|
53
54
|
colorTheme?: keyof ChartTheme['pie'];
|
|
54
55
|
sort?: boolean;
|
|
56
|
+
onClick?: PieProps['onClick'];
|
|
57
|
+
chartThreshold?: number;
|
|
55
58
|
}
|
|
56
59
|
export interface BarChartProps extends BaseChartProps {
|
|
57
60
|
colorTheme?: keyof ChartTheme['bar'];
|
|
58
61
|
title?: string;
|
|
59
62
|
units: string;
|
|
63
|
+
onClick?: BarProps['onClick'];
|
|
60
64
|
}
|
|
61
65
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bento-charts",
|
|
3
|
-
"version": "2.0
|
|
3
|
+
"version": "2.1.0",
|
|
4
4
|
"description": "Charts library for Bento-platform",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -57,5 +57,12 @@
|
|
|
57
57
|
"semantic-release": "^20.1.3",
|
|
58
58
|
"ts-loader": "^9.4.2",
|
|
59
59
|
"typescript": "^4.9.5"
|
|
60
|
+
},
|
|
61
|
+
"prettier": {
|
|
62
|
+
"trailingComma": "es5",
|
|
63
|
+
"tabWidth": 2,
|
|
64
|
+
"semi": true,
|
|
65
|
+
"singleQuote": true,
|
|
66
|
+
"printWidth": 120
|
|
60
67
|
}
|
|
61
68
|
}
|
|
@@ -1,53 +1,48 @@
|
|
|
1
|
-
import React, { useContext } from
|
|
1
|
+
import React, { useContext } from 'react';
|
|
2
2
|
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
defaultTranslationObject,
|
|
6
|
-
} from "./constants/chartConstants";
|
|
7
|
-
import {
|
|
8
|
-
ChartTheme,
|
|
9
|
-
LngDictionary,
|
|
10
|
-
SupportedLng,
|
|
11
|
-
TranslationObject,
|
|
12
|
-
} from "./types/chartTypes";
|
|
3
|
+
import { DEFAULT_CHART_THEME, defaultTranslationObject } from './constants/chartConstants';
|
|
4
|
+
import { ChartTheme, LngDictionary, SupportedLng, TranslationObject } from './types/chartTypes';
|
|
13
5
|
|
|
14
6
|
const ChartThemeContext = React.createContext<ChartTheme>(DEFAULT_CHART_THEME);
|
|
15
7
|
export function useChartTheme() {
|
|
16
8
|
return useContext(ChartThemeContext);
|
|
17
9
|
}
|
|
18
10
|
|
|
19
|
-
const ChartTranslationContext = React.createContext<LngDictionary>(
|
|
20
|
-
defaultTranslationObject.en
|
|
21
|
-
);
|
|
11
|
+
const ChartTranslationContext = React.createContext<LngDictionary>(defaultTranslationObject.en);
|
|
22
12
|
export function useChartTranslation() {
|
|
23
13
|
return useContext(ChartTranslationContext);
|
|
24
14
|
}
|
|
25
15
|
|
|
16
|
+
const ChartThresholdContext = React.createContext<number>(0);
|
|
17
|
+
|
|
18
|
+
export function useChartThreshold() {
|
|
19
|
+
return useContext(ChartThresholdContext);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// TODO: reduce number of contexts
|
|
26
23
|
const ChartConfigProvider = ({
|
|
27
24
|
theme = DEFAULT_CHART_THEME,
|
|
28
25
|
Lng,
|
|
29
26
|
translationMap,
|
|
30
27
|
children,
|
|
28
|
+
globalThreshold = 0,
|
|
31
29
|
}: {
|
|
32
30
|
theme?: ChartTheme;
|
|
33
31
|
Lng: string;
|
|
34
32
|
translationMap?: TranslationObject;
|
|
35
33
|
children: React.ReactElement;
|
|
34
|
+
globalThreshold?: number;
|
|
36
35
|
}) => {
|
|
37
|
-
let lang: SupportedLng =
|
|
36
|
+
let lang: SupportedLng = 'en';
|
|
38
37
|
try {
|
|
39
38
|
lang = Lng as SupportedLng;
|
|
40
39
|
} catch (e) {
|
|
41
|
-
console.error(
|
|
40
|
+
console.error('Lng is not a supported language');
|
|
42
41
|
}
|
|
43
42
|
return (
|
|
44
43
|
<ChartThemeContext.Provider value={theme}>
|
|
45
|
-
<ChartTranslationContext.Provider
|
|
46
|
-
value={
|
|
47
|
-
translationMap ? translationMap[lang] : defaultTranslationObject[lang]
|
|
48
|
-
}
|
|
49
|
-
>
|
|
50
|
-
{children}
|
|
44
|
+
<ChartTranslationContext.Provider value={translationMap ? translationMap[lang] : defaultTranslationObject[lang]}>
|
|
45
|
+
<ChartThresholdContext.Provider value={globalThreshold}>{children}</ChartThresholdContext.Provider>
|
|
51
46
|
</ChartTranslationContext.Provider>
|
|
52
47
|
</ChartThemeContext.Provider>
|
|
53
48
|
);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { BarChart, Bar, Cell, XAxis, YAxis, Tooltip, Label } from 'recharts';
|
|
2
|
+
import { BarChart, Bar, Cell, XAxis, YAxis, Tooltip, Label, BarProps } from 'recharts';
|
|
3
3
|
import {
|
|
4
4
|
TOOL_TIP_STYLE,
|
|
5
5
|
COUNT_STYLE,
|
|
@@ -31,6 +31,7 @@ const BentoBarChart = ({
|
|
|
31
31
|
preFilter,
|
|
32
32
|
dataMap,
|
|
33
33
|
postFilter,
|
|
34
|
+
onClick,
|
|
34
35
|
removeEmpty = true,
|
|
35
36
|
colorTheme = 'default',
|
|
36
37
|
}: BarChartProps) => {
|
|
@@ -48,6 +49,11 @@ const BentoBarChart = ({
|
|
|
48
49
|
|
|
49
50
|
const totalCount = data.reduce((sum, e) => sum + e.y, 0);
|
|
50
51
|
|
|
52
|
+
const onHover: BarProps['onMouseEnter'] = (_data, _index, e) => {
|
|
53
|
+
const { target } = e;
|
|
54
|
+
if (onClick && target) (target as SVGElement).style.cursor = 'pointer';
|
|
55
|
+
};
|
|
56
|
+
|
|
51
57
|
// Regarding XAxis.ticks below:
|
|
52
58
|
// The weird conditional is added from https://github.com/recharts/recharts/issues/2593#issuecomment-1311678397
|
|
53
59
|
// Basically, if data is empty, Recharts will default to a domain of [0, "auto"] and our tickFormatter trips up
|
|
@@ -73,7 +79,7 @@ const BentoBarChart = ({
|
|
|
73
79
|
<Label value={t['Count']} offset={-10} position="left" angle={270} />
|
|
74
80
|
</YAxis>
|
|
75
81
|
<Tooltip content={<BarTooltip totalCount={totalCount} />} />
|
|
76
|
-
<Bar dataKey="y" isAnimationActive={false}>
|
|
82
|
+
<Bar dataKey="y" isAnimationActive={false} onClick={onClick} onMouseEnter={onHover}>
|
|
77
83
|
{data.map((entry) => (
|
|
78
84
|
<Cell key={entry.x} fill={fill(entry)} />
|
|
79
85
|
))}
|
package/src/Charts/BentoPie.tsx
CHANGED
|
@@ -6,7 +6,6 @@ import {
|
|
|
6
6
|
TOOL_TIP_STYLE,
|
|
7
7
|
LABEL_STYLE,
|
|
8
8
|
COUNT_STYLE,
|
|
9
|
-
OTHER_THRESHOLD,
|
|
10
9
|
CHART_MISSING_FILL,
|
|
11
10
|
CHART_WRAPPER_STYLE,
|
|
12
11
|
RADIAN,
|
|
@@ -17,7 +16,7 @@ import {
|
|
|
17
16
|
TEXT_STYLE,
|
|
18
17
|
} from '../constants/chartConstants';
|
|
19
18
|
import type { PieChartProps, TooltipPayload } from '../types/chartTypes';
|
|
20
|
-
import { useChartTheme, useChartTranslation } from '../ChartConfigProvider';
|
|
19
|
+
import { useChartTheme, useChartTranslation, useChartThreshold } from '../ChartConfigProvider';
|
|
21
20
|
import { polarToCartesian } from '../util/chartUtils';
|
|
22
21
|
|
|
23
22
|
const labelShortName = (name: string) => {
|
|
@@ -34,9 +33,11 @@ const BentoPie = ({
|
|
|
34
33
|
preFilter,
|
|
35
34
|
dataMap,
|
|
36
35
|
postFilter,
|
|
36
|
+
onClick,
|
|
37
37
|
sort = true,
|
|
38
38
|
removeEmpty = true,
|
|
39
39
|
colorTheme = 'default',
|
|
40
|
+
chartThreshold = useChartThreshold(),
|
|
40
41
|
}: PieChartProps) => {
|
|
41
42
|
const t = useChartTranslation();
|
|
42
43
|
const theme = useChartTheme().pie[colorTheme];
|
|
@@ -58,12 +59,16 @@ const BentoPie = ({
|
|
|
58
59
|
// combining sections with less than OTHER_THRESHOLD
|
|
59
60
|
const sum = data.reduce((acc, e) => acc + e.y, 0);
|
|
60
61
|
const length = data.length;
|
|
61
|
-
const threshold =
|
|
62
|
+
const threshold = chartThreshold * sum;
|
|
62
63
|
const temp = data.filter((e) => e.y > threshold);
|
|
64
|
+
|
|
63
65
|
// length - 1 intentional: if there is just one category bellow threshold the "Other" category is not necessary
|
|
64
66
|
data = temp.length === length - 1 ? data : temp;
|
|
65
67
|
if (data.length !== length) {
|
|
66
|
-
data.push({
|
|
68
|
+
data.push({
|
|
69
|
+
x: t['Other'],
|
|
70
|
+
y: sum - data.reduce((acc, e) => acc + e.y, 0),
|
|
71
|
+
});
|
|
67
72
|
}
|
|
68
73
|
|
|
69
74
|
const bentoFormatData = data.map((e) => ({ name: e.x, value: e.y }));
|
|
@@ -73,9 +78,9 @@ const BentoPie = ({
|
|
|
73
78
|
setActiveIndex(index);
|
|
74
79
|
};
|
|
75
80
|
|
|
76
|
-
const onHover: PieProps['onMouseOver'] = (
|
|
81
|
+
const onHover: PieProps['onMouseOver'] = (data, _index, e) => {
|
|
77
82
|
const { target } = e;
|
|
78
|
-
if (target) (target as SVGElement).style.cursor = 'pointer';
|
|
83
|
+
if (onClick && target && data.name !== t['Other']) (target as SVGElement).style.cursor = 'pointer';
|
|
79
84
|
};
|
|
80
85
|
|
|
81
86
|
const onLeave: PieProps['onMouseLeave'] = () => {
|
|
@@ -83,44 +88,47 @@ const BentoPie = ({
|
|
|
83
88
|
};
|
|
84
89
|
|
|
85
90
|
return (
|
|
86
|
-
|
|
87
|
-
<
|
|
88
|
-
<
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
91
|
+
<>
|
|
92
|
+
<div style={CHART_WRAPPER_STYLE}>
|
|
93
|
+
<PieChart height={height} width={height * CHART_ASPECT_RATIO}>
|
|
94
|
+
<Pie
|
|
95
|
+
data={bentoFormatData}
|
|
96
|
+
dataKey="value"
|
|
97
|
+
cx="50%"
|
|
98
|
+
cy="50%"
|
|
99
|
+
innerRadius={35}
|
|
100
|
+
outerRadius={80}
|
|
101
|
+
label={RenderLabel}
|
|
102
|
+
labelLine={false}
|
|
103
|
+
isAnimationActive={false}
|
|
104
|
+
onMouseEnter={onEnter}
|
|
105
|
+
onMouseLeave={onLeave}
|
|
106
|
+
onMouseOver={onHover}
|
|
107
|
+
activeIndex={activeIndex}
|
|
108
|
+
activeShape={RenderActiveLabel}
|
|
109
|
+
onClick={onClick}
|
|
110
|
+
>
|
|
111
|
+
{data.map((entry, index) => {
|
|
112
|
+
let fill = theme[index % theme.length];
|
|
113
|
+
fill = entry.x.toLowerCase() === 'missing' ? CHART_MISSING_FILL : fill;
|
|
114
|
+
return <Cell key={index} fill={fill} />;
|
|
115
|
+
})}
|
|
116
|
+
</Pie>
|
|
117
|
+
<Tooltip
|
|
118
|
+
content={<CustomTooltip totalCount={sum} />}
|
|
119
|
+
isAnimationActive={false}
|
|
120
|
+
allowEscapeViewBox={{ x: true, y: true }}
|
|
121
|
+
/>
|
|
122
|
+
</PieChart>
|
|
123
|
+
</div>
|
|
124
|
+
</>
|
|
117
125
|
);
|
|
118
126
|
};
|
|
119
127
|
|
|
120
128
|
const toNumber = (val: number | string | undefined, defaultValue?: number): number => {
|
|
121
|
-
if (val && typeof val ===
|
|
129
|
+
if (val && typeof val === 'string') {
|
|
122
130
|
return Number(val);
|
|
123
|
-
} else if (val && typeof val ===
|
|
131
|
+
} else if (val && typeof val === 'number') {
|
|
124
132
|
return val;
|
|
125
133
|
}
|
|
126
134
|
return defaultValue || 0;
|
|
@@ -230,7 +238,7 @@ const CustomTooltip = ({
|
|
|
230
238
|
const value = payload ? payload[0].value : 0;
|
|
231
239
|
const percentage = totalCount ? Math.round((value / totalCount) * 100) : 0;
|
|
232
240
|
|
|
233
|
-
return (
|
|
241
|
+
return name !== 'other' ? (
|
|
234
242
|
<div style={TOOL_TIP_STYLE}>
|
|
235
243
|
<p style={LABEL_STYLE}>{name}</p>
|
|
236
244
|
<p style={COUNT_STYLE}>
|
|
@@ -239,6 +247,8 @@ const CustomTooltip = ({
|
|
|
239
247
|
%)
|
|
240
248
|
</p>
|
|
241
249
|
</div>
|
|
250
|
+
) : (
|
|
251
|
+
<div>No data</div>
|
|
242
252
|
);
|
|
243
253
|
};
|
|
244
254
|
|
package/src/index.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { default as BarChart } from './Charts/BentoBarChart';
|
|
2
2
|
export { default as PieChart } from './Charts/BentoPie';
|
|
3
3
|
|
|
4
|
-
export { default as ChartConfigProvider } from './ChartConfigProvider';
|
|
4
|
+
export { default as ChartConfigProvider } from './ChartConfigProvider';
|
|
5
|
+
export * from './types/chartTypes';
|
package/src/types/chartTypes.ts
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
import { PieProps, BarProps } from 'recharts';
|
|
2
|
+
|
|
3
|
+
export type ChartDataType = ChartDataItem[];
|
|
2
4
|
|
|
3
5
|
export interface ChartDataItem {
|
|
4
6
|
x: string;
|
|
5
7
|
y: number;
|
|
6
8
|
}
|
|
7
9
|
|
|
8
|
-
export type TooltipPayload = TooltipPayloadItem[]
|
|
10
|
+
export type TooltipPayload = TooltipPayloadItem[];
|
|
9
11
|
|
|
10
12
|
interface TooltipPayloadItem {
|
|
11
13
|
name: string;
|
|
@@ -61,10 +63,13 @@ interface BaseChartProps {
|
|
|
61
63
|
export interface PieChartProps extends BaseChartProps {
|
|
62
64
|
colorTheme?: keyof ChartTheme['pie'];
|
|
63
65
|
sort?: boolean;
|
|
66
|
+
onClick?: PieProps['onClick'];
|
|
67
|
+
chartThreshold?: number;
|
|
64
68
|
}
|
|
65
69
|
|
|
66
70
|
export interface BarChartProps extends BaseChartProps {
|
|
67
71
|
colorTheme?: keyof ChartTheme['bar'];
|
|
68
72
|
title?: string;
|
|
69
73
|
units: string;
|
|
74
|
+
onClick?: BarProps['onClick'];
|
|
70
75
|
}
|