bento-charts 2.0.0 → 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/README.md +22 -0
- 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 +22 -16
- 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 +10 -2
- package/packs/.gitignore +2 -0
- package/src/ChartConfigProvider.tsx +17 -22
- package/src/Charts/BentoBarChart.tsx +8 -2
- package/src/Charts/BentoPie.tsx +51 -39
- package/src/index.ts +2 -1
- package/src/types/chartTypes.ts +7 -2
package/README.md
CHANGED
|
@@ -115,3 +115,25 @@ Example:
|
|
|
115
115
|
```bash
|
|
116
116
|
git commit -m "ci(semantic-release): add commitlint and husky as dev tools to write valid commits"
|
|
117
117
|
```
|
|
118
|
+
|
|
119
|
+
## Local development
|
|
120
|
+
For local development in a React/Recharts app that uses bento-charts, you can follow these steps for your setup:
|
|
121
|
+
|
|
122
|
+
1. `build` and `pack` bento-charts
|
|
123
|
+
```bash
|
|
124
|
+
# Builds package and creates a pack file in the "./packs" dir
|
|
125
|
+
npm run buildpack
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
2. In the project using bento-charts, modify the bento-charts dependency in package.json so that the version number is now the absolute path to the pack file.
|
|
129
|
+
```diff
|
|
130
|
+
- "bento-charts": "2.0.0",
|
|
131
|
+
+ "bento-charts": "file:~/bento-charts/packs/bento-charts-2.0.0.tgz",
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
3. Install the dependencies in the project
|
|
135
|
+
```bash
|
|
136
|
+
npm install
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
**Note: you will need to repeat steps 1 and 3 everytime you want the changes to be applied to the app using bento-charts**
|
|
@@ -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,36 +52,42 @@ 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
|
}
|
|
88
|
+
else if (val && typeof val === 'number') {
|
|
89
|
+
return val;
|
|
90
|
+
}
|
|
85
91
|
return defaultValue || 0;
|
|
86
92
|
};
|
|
87
93
|
var RenderLabel = function (params) {
|
|
@@ -127,7 +133,7 @@ var CustomTooltip = function (_a) {
|
|
|
127
133
|
var name = payload ? payload[0].name : '';
|
|
128
134
|
var value = payload ? payload[0].value : 0;
|
|
129
135
|
var percentage = totalCount ? Math.round((value / totalCount) * 100) : 0;
|
|
130
|
-
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" }));
|
|
131
137
|
};
|
|
132
138
|
export default BentoPie;
|
|
133
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,13 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bento-charts",
|
|
3
|
-
"version": "2.
|
|
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",
|
|
7
7
|
"scripts": {
|
|
8
8
|
"build": "npx tsc",
|
|
9
9
|
"prepublishOnly": "npm run build",
|
|
10
|
-
"lint": "npx eslint src/**"
|
|
10
|
+
"lint": "npx eslint src/**",
|
|
11
|
+
"buildpack": "npx tsc && npm pack --pack-destination ./packs"
|
|
11
12
|
},
|
|
12
13
|
"release": {
|
|
13
14
|
"branches": [
|
|
@@ -56,5 +57,12 @@
|
|
|
56
57
|
"semantic-release": "^20.1.3",
|
|
57
58
|
"ts-loader": "^9.4.2",
|
|
58
59
|
"typescript": "^4.9.5"
|
|
60
|
+
},
|
|
61
|
+
"prettier": {
|
|
62
|
+
"trailingComma": "es5",
|
|
63
|
+
"tabWidth": 2,
|
|
64
|
+
"semi": true,
|
|
65
|
+
"singleQuote": true,
|
|
66
|
+
"printWidth": 120
|
|
59
67
|
}
|
|
60
68
|
}
|
package/packs/.gitignore
ADDED
|
@@ -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,43 +88,48 @@ 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);
|
|
131
|
+
} else if (val && typeof val === 'number') {
|
|
132
|
+
return val;
|
|
123
133
|
}
|
|
124
134
|
return defaultValue || 0;
|
|
125
135
|
};
|
|
@@ -228,7 +238,7 @@ const CustomTooltip = ({
|
|
|
228
238
|
const value = payload ? payload[0].value : 0;
|
|
229
239
|
const percentage = totalCount ? Math.round((value / totalCount) * 100) : 0;
|
|
230
240
|
|
|
231
|
-
return (
|
|
241
|
+
return name !== 'other' ? (
|
|
232
242
|
<div style={TOOL_TIP_STYLE}>
|
|
233
243
|
<p style={LABEL_STYLE}>{name}</p>
|
|
234
244
|
<p style={COUNT_STYLE}>
|
|
@@ -237,6 +247,8 @@ const CustomTooltip = ({
|
|
|
237
247
|
%)
|
|
238
248
|
</p>
|
|
239
249
|
</div>
|
|
250
|
+
) : (
|
|
251
|
+
<div>No data</div>
|
|
240
252
|
);
|
|
241
253
|
};
|
|
242
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
|
}
|