@alfalab/core-components-chart 3.1.4 → 3.1.6
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/Component.js +39 -41
- package/components/CustomizedLabel.js +5 -7
- package/components/Dot/index.css +8 -8
- package/components/Dot/index.js +9 -11
- package/components/Legends/index.css +8 -8
- package/components/Legends/index.js +13 -15
- package/components/LinearGradient.js +3 -5
- package/components/RectBar.js +5 -7
- package/components/Tick/index.css +4 -4
- package/components/Tick/index.js +7 -9
- package/components/TooltipContent/index.css +7 -7
- package/components/TooltipContent/index.js +12 -14
- package/cssm/Component.js +41 -43
- package/cssm/components/CustomizedLabel.js +5 -7
- package/cssm/components/Dot/index.js +10 -12
- package/cssm/components/Legends/index.js +13 -15
- package/cssm/components/LinearGradient.js +3 -5
- package/cssm/components/RectBar.js +5 -7
- package/cssm/components/Tick/index.js +7 -9
- package/cssm/components/TooltipContent/index.js +12 -14
- package/cssm/hooks/usePathBar/index.js +0 -2
- package/cssm/hooks/usePathBar/utils/getRadius.js +0 -2
- package/cssm/hooks/useSettings/index.js +1 -3
- package/cssm/hooks/useSettings/utils/setComposedChartsMargin.js +0 -2
- package/cssm/hooks/useSettings/utils/setDatas.js +4 -6
- package/cssm/hooks/useSettings/utils/setGradientCharts.js +2 -4
- package/cssm/hooks/useSettings/utils/setLegendMargin.js +0 -2
- package/cssm/hooks/useSettings/utils/sortByIndex.js +0 -2
- package/cssm/icons/Circle.js +4 -6
- package/cssm/icons/CircleLine.js +5 -7
- package/cssm/icons/FilledCircle.js +8 -10
- package/cssm/icons/Point.js +5 -7
- package/cssm/icons/StrokeCircle.js +4 -6
- package/cssm/index.js +9 -11
- package/cssm/{tslib.es6-0de342ae.d.ts → tslib.es6-19b064c1.d.ts} +0 -0
- package/cssm/{tslib.es6-0de342ae.js → tslib.es6-19b064c1.js} +0 -0
- package/cssm/types/utils/index.d.ts +1 -0
- package/esm/Component.js +23 -23
- package/esm/components/CustomizedLabel.js +1 -1
- package/esm/components/Dot/index.css +8 -8
- package/esm/components/Dot/index.js +3 -3
- package/esm/components/Legends/index.css +8 -8
- package/esm/components/Legends/index.js +4 -4
- package/esm/components/LinearGradient.js +1 -1
- package/esm/components/RectBar.js +2 -2
- package/esm/components/Tick/index.css +4 -4
- package/esm/components/Tick/index.js +2 -2
- package/esm/components/TooltipContent/index.css +7 -7
- package/esm/components/TooltipContent/index.js +2 -2
- package/esm/hooks/useSettings/index.js +1 -1
- package/esm/hooks/useSettings/utils/setDatas.js +4 -4
- package/esm/hooks/useSettings/utils/setGradientCharts.js +2 -2
- package/esm/index.css +5 -5
- package/esm/index.js +7 -7
- package/esm/{tslib.es6-98750278.d.ts → tslib.es6-44e6acd2.d.ts} +0 -0
- package/esm/{tslib.es6-98750278.js → tslib.es6-44e6acd2.js} +0 -0
- package/esm/types/utils/index.d.ts +1 -0
- package/hooks/usePathBar/index.js +0 -2
- package/hooks/usePathBar/utils/getRadius.js +0 -2
- package/hooks/useSettings/index.js +1 -3
- package/hooks/useSettings/utils/setComposedChartsMargin.js +0 -2
- package/hooks/useSettings/utils/setDatas.js +4 -6
- package/hooks/useSettings/utils/setGradientCharts.js +2 -4
- package/hooks/useSettings/utils/setLegendMargin.js +0 -2
- package/hooks/useSettings/utils/sortByIndex.js +0 -2
- package/icons/Circle.js +4 -6
- package/icons/CircleLine.js +5 -7
- package/icons/FilledCircle.js +8 -10
- package/icons/Point.js +5 -7
- package/icons/StrokeCircle.js +4 -6
- package/index.css +5 -5
- package/index.js +7 -9
- package/modern/Component.js +10 -10
- package/modern/components/CustomizedLabel.js +1 -1
- package/modern/components/Dot/index.css +8 -8
- package/modern/components/Dot/index.js +1 -1
- package/modern/components/Legends/index.css +8 -8
- package/modern/components/Legends/index.js +1 -1
- package/modern/components/RectBar.js +1 -1
- package/modern/components/Tick/index.css +4 -4
- package/modern/components/Tick/index.js +1 -1
- package/modern/components/TooltipContent/index.css +7 -7
- package/modern/components/TooltipContent/index.js +1 -1
- package/modern/index.css +5 -5
- package/modern/index.js +6 -6
- package/modern/types/utils/index.d.ts +1 -0
- package/package.json +2 -2
- package/{tslib.es6-27fe16ea.d.ts → tslib.es6-0a16d1e2.d.ts} +0 -0
- package/{tslib.es6-27fe16ea.js → tslib.es6-0a16d1e2.js} +0 -0
- package/types/utils/index.d.ts +1 -0
package/Component.js
CHANGED
|
@@ -1,44 +1,42 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var tslib_es6 = require('./tslib.es6-27fe16ea.js');
|
|
3
|
+
var tslib_es6 = require('./tslib.es6-0a16d1e2.js');
|
|
6
4
|
var React = require('react');
|
|
7
5
|
var cn = require('classnames');
|
|
8
6
|
var recharts = require('recharts');
|
|
9
|
-
require('./hooks/usePathBar/utils/getRadius.js');
|
|
10
|
-
require('./hooks/usePathBar/index.js');
|
|
11
7
|
var components_CustomizedLabel = require('./components/CustomizedLabel.js');
|
|
12
|
-
require('./icons/Point.js');
|
|
13
8
|
var components_Dot_index = require('./components/Dot/index.js');
|
|
14
|
-
require('@alfalab/core-components-typography');
|
|
15
|
-
require('./icons/Circle.js');
|
|
16
|
-
require('./icons/CircleLine.js');
|
|
17
|
-
require('./icons/FilledCircle.js');
|
|
18
|
-
require('./icons/StrokeCircle.js');
|
|
19
9
|
var components_Legends_index = require('./components/Legends/index.js');
|
|
20
10
|
var components_LinearGradient = require('./components/LinearGradient.js');
|
|
21
11
|
var components_RectBar = require('./components/RectBar.js');
|
|
22
12
|
var components_Tick_index = require('./components/Tick/index.js');
|
|
23
13
|
var components_TooltipContent_index = require('./components/TooltipContent/index.js');
|
|
14
|
+
var hooks_useSettings_index = require('./hooks/useSettings/index.js');
|
|
15
|
+
require('./hooks/usePathBar/index.js');
|
|
16
|
+
require('./hooks/usePathBar/utils/getRadius.js');
|
|
17
|
+
require('./icons/Point.js');
|
|
18
|
+
require('@alfalab/core-components-typography');
|
|
19
|
+
require('./icons/Circle.js');
|
|
20
|
+
require('./icons/CircleLine.js');
|
|
21
|
+
require('./icons/FilledCircle.js');
|
|
22
|
+
require('./icons/StrokeCircle.js');
|
|
24
23
|
require('./hooks/useSettings/utils/setComposedChartsMargin.js');
|
|
25
24
|
require('./hooks/useSettings/utils/setDatas.js');
|
|
26
25
|
require('./hooks/useSettings/utils/setGradientCharts.js');
|
|
27
26
|
require('./hooks/useSettings/utils/setLegendMargin.js');
|
|
28
27
|
require('./hooks/useSettings/utils/sortByIndex.js');
|
|
29
|
-
var hooks_useSettings_index = require('./hooks/useSettings/index.js');
|
|
30
28
|
|
|
31
|
-
function
|
|
29
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
32
30
|
|
|
33
|
-
var React__default = /*#__PURE__*/
|
|
34
|
-
var cn__default = /*#__PURE__*/
|
|
31
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
32
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
35
33
|
|
|
36
34
|
var CustomizedHOC = function (Component, options) {
|
|
37
|
-
var NewComponent = function (props) { return React__default
|
|
35
|
+
var NewComponent = function (props) { return React__default.default.createElement(Component, tslib_es6.__assign({}, props, options)); };
|
|
38
36
|
return NewComponent;
|
|
39
37
|
};
|
|
40
38
|
|
|
41
|
-
var styles = {"coreChart":"
|
|
39
|
+
var styles = {"coreChart":"chart__coreChart_12np2","bar":"chart__bar_12np2","unfocused":"chart__unfocused_12np2"};
|
|
42
40
|
require('./index.css')
|
|
43
41
|
|
|
44
42
|
var Chart = function (props) {
|
|
@@ -61,18 +59,18 @@ var Chart = function (props) {
|
|
|
61
59
|
if (chart !== 'gradient' || !gradient)
|
|
62
60
|
return null;
|
|
63
61
|
var gid = gradient.gid, points = gradient.points;
|
|
64
|
-
return (React__default
|
|
62
|
+
return (React__default.default.createElement(components_LinearGradient.LinearGradient, { key: "".concat(state.id, "-").concat(gid), id: state.id, gid: gid, points: points }));
|
|
65
63
|
});
|
|
66
64
|
}, [state]);
|
|
67
65
|
var toggleChart = React.useCallback(function (item) {
|
|
68
66
|
var chart = item.chart, dataKey = item.properties.dataKey;
|
|
69
67
|
var withGrad = chart === 'area';
|
|
70
68
|
var changed = false;
|
|
71
|
-
if (charts[""
|
|
69
|
+
if (charts["".concat(dataKey)] && filterCount > 1) {
|
|
72
70
|
changed = true;
|
|
73
71
|
setFilterCount(function (prev) { return prev - 1; });
|
|
74
72
|
}
|
|
75
|
-
if (!charts[""
|
|
73
|
+
if (!charts["".concat(dataKey)]) {
|
|
76
74
|
changed = true;
|
|
77
75
|
setFilterCount(function (prev) { return prev + 1; });
|
|
78
76
|
}
|
|
@@ -80,9 +78,9 @@ var Chart = function (props) {
|
|
|
80
78
|
return;
|
|
81
79
|
setCharts(function (prev) {
|
|
82
80
|
var newState = tslib_es6.__assign({}, prev);
|
|
83
|
-
newState[""
|
|
81
|
+
newState["".concat(dataKey)] = !newState["".concat(dataKey)];
|
|
84
82
|
if (withGrad)
|
|
85
|
-
newState[dataKey
|
|
83
|
+
newState["".concat(dataKey, "-gradient")] = !newState["".concat(dataKey, "-gradient")];
|
|
86
84
|
return newState;
|
|
87
85
|
});
|
|
88
86
|
}, [charts, filterCount, setCharts, setFilterCount]);
|
|
@@ -101,14 +99,14 @@ var Chart = function (props) {
|
|
|
101
99
|
var translate = ((_a = state === null || state === void 0 ? void 0 : state.xAxis) === null || _a === void 0 ? void 0 : _a.tickMargin) && ((_b = state === null || state === void 0 ? void 0 : state.legend) === null || _b === void 0 ? void 0 : _b.verticalAlign) !== 'top'
|
|
102
100
|
? state.xAxis.tickMargin + (((_c = state === null || state === void 0 ? void 0 : state.brush) === null || _c === void 0 ? void 0 : _c.brushMargin) || 0)
|
|
103
101
|
: 0;
|
|
104
|
-
return (React__default
|
|
105
|
-
transform: "translateY("
|
|
102
|
+
return (React__default.default.createElement(recharts.Legend, tslib_es6.__assign({}, (state.legend || null), { content: React__default.default.createElement(components_Legends_index.Legends, { legend: state.legend, series: state.series, id: state.id, toggleChart: toggleChart, ref: legendRef, charts: charts }), wrapperStyle: {
|
|
103
|
+
transform: "translateY(".concat(translate, "px)"),
|
|
106
104
|
} })));
|
|
107
105
|
}, [state, charts, toggleChart, legendRef]);
|
|
108
106
|
var renderCartesianGrid = React.useMemo(function () {
|
|
109
107
|
if (!(state === null || state === void 0 ? void 0 : state.cartesianGrid))
|
|
110
108
|
return null;
|
|
111
|
-
return React__default
|
|
109
|
+
return React__default.default.createElement(recharts.CartesianGrid, tslib_es6.__assign({}, state.cartesianGrid));
|
|
112
110
|
}, [state]);
|
|
113
111
|
var renderXAxis = React.useMemo(function () {
|
|
114
112
|
var _a;
|
|
@@ -124,7 +122,7 @@ var Chart = function (props) {
|
|
|
124
122
|
else {
|
|
125
123
|
tick = true;
|
|
126
124
|
}
|
|
127
|
-
return React__default
|
|
125
|
+
return React__default.default.createElement(recharts.XAxis, tslib_es6.__assign({}, state.xAxis, { tick: tick }));
|
|
128
126
|
}, [state]);
|
|
129
127
|
var renderYAxis = React.useMemo(function () {
|
|
130
128
|
var _a;
|
|
@@ -140,38 +138,38 @@ var Chart = function (props) {
|
|
|
140
138
|
else {
|
|
141
139
|
tick = true;
|
|
142
140
|
}
|
|
143
|
-
return React__default
|
|
141
|
+
return React__default.default.createElement(recharts.YAxis, tslib_es6.__assign({}, state.yAxis, { tick: tick }));
|
|
144
142
|
}, [state]);
|
|
145
143
|
var renderBrush = React.useMemo(function () {
|
|
146
144
|
if (!(state === null || state === void 0 ? void 0 : state.brush))
|
|
147
145
|
return null;
|
|
148
|
-
return React__default
|
|
146
|
+
return React__default.default.createElement(recharts.Brush, tslib_es6.__assign({ y: typeof yBrush === 'number' ? yBrush : 0 }, state.brush));
|
|
149
147
|
}, [state, yBrush]);
|
|
150
148
|
var renderTooltip = React.useMemo(function () {
|
|
151
149
|
if (!(state === null || state === void 0 ? void 0 : state.tooltip))
|
|
152
150
|
return null;
|
|
153
|
-
return (React__default
|
|
151
|
+
return (React__default.default.createElement(recharts.Tooltip, tslib_es6.__assign({ ref: tooltipRef }, state.tooltip, { content: CustomizedHOC(components_TooltipContent_index.TooltipContent, { series: state.series, tooltipArrowSide: tooltipArrowSide }) })));
|
|
154
152
|
}, [state, tooltipArrowSide]);
|
|
155
153
|
var renderChartsItems = React.useMemo(function () {
|
|
156
154
|
if (!state || !charts)
|
|
157
155
|
return null;
|
|
158
156
|
return state.series.map(function (item) {
|
|
159
157
|
var chart = item.chart, properties = item.properties, radius = item.radius, labelList = item.labelList;
|
|
160
|
-
var show = charts[""
|
|
158
|
+
var show = charts["".concat(properties.dataKey)];
|
|
161
159
|
switch (chart) {
|
|
162
160
|
case 'bar':
|
|
163
|
-
return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default
|
|
164
|
-
labelList && (React__default
|
|
161
|
+
return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default.default.createElement(recharts.Bar, tslib_es6.__assign({ key: "".concat(state.id, "-").concat(properties.dataKey) }, properties, { shape: React__default.default.createElement(components_RectBar.RectBar, { radius: radius }) }),
|
|
162
|
+
labelList && (React__default.default.createElement(recharts.LabelList, tslib_es6.__assign({ dataKey: properties.dataKey.toString() }, labelList, { content: React__default.default.createElement(components_CustomizedLabel.CustomizedLabel, { radius: radius }) }))),
|
|
165
163
|
data.map(function (_, index) {
|
|
166
|
-
var key = state.id
|
|
167
|
-
return (React__default
|
|
164
|
+
var key = "".concat(state.id, "-").concat(properties.dataKey, "-").concat(index);
|
|
165
|
+
return (React__default.default.createElement(recharts.Cell, { key: key, className: cn__default.default(styles.bar, typeof activeDotsState.active === 'number' &&
|
|
168
166
|
activeDotsState.active !== index
|
|
169
167
|
? styles.unfocused
|
|
170
168
|
: '') }));
|
|
171
169
|
}))) : null;
|
|
172
170
|
case 'area':
|
|
173
171
|
case 'line':
|
|
174
|
-
return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default
|
|
172
|
+
return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default.default.createElement(recharts.Line, tslib_es6.__assign({ key: "".concat(state.id, "-").concat(properties.dataKey) }, properties, { dot: properties.dot && properties.dotSettings
|
|
175
173
|
? CustomizedHOC(components_Dot_index.Dot, {
|
|
176
174
|
activeDot: activeDotsState.active,
|
|
177
175
|
dotSettings: properties.dotSettings,
|
|
@@ -181,8 +179,8 @@ var Chart = function (props) {
|
|
|
181
179
|
})
|
|
182
180
|
: false, activeDot: false }))) : null;
|
|
183
181
|
case 'gradient':
|
|
184
|
-
return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default
|
|
185
|
-
? "url(#"
|
|
182
|
+
return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default.default.createElement(recharts.Area, tslib_es6.__assign({}, item.properties, { key: "".concat(state.id, "-").concat(item.properties.dataKey), dataKey: "".concat(item.properties.dataKey), stroke: 'transparent', fill: item.gradient.gid
|
|
183
|
+
? "url(#".concat(state.id, "-").concat(item.gradient.gid, ")")
|
|
186
184
|
: item.properties.fill, dot: false, activeDot: false }))) : null;
|
|
187
185
|
default:
|
|
188
186
|
return null;
|
|
@@ -263,10 +261,10 @@ var Chart = function (props) {
|
|
|
263
261
|
};
|
|
264
262
|
if (!data || !charts || !state)
|
|
265
263
|
return null;
|
|
266
|
-
return (React__default
|
|
267
|
-
React__default
|
|
268
|
-
React__default
|
|
269
|
-
React__default
|
|
264
|
+
return (React__default.default.createElement("div", { className: styles.coreChart, ref: svgRef, id: (state === null || state === void 0 ? void 0 : state.id) || '', style: { width: '100%', height: '100%' } },
|
|
265
|
+
React__default.default.createElement(recharts.ResponsiveContainer, { debounce: ((_a = state === null || state === void 0 ? void 0 : state.responsiveContainer) === null || _a === void 0 ? void 0 : _a.debounce) ? state.responsiveContainer.debounce : 0, width: '100%' },
|
|
266
|
+
React__default.default.createElement(recharts.ComposedChart, tslib_es6.__assign({}, state === null || state === void 0 ? void 0 : state.composeChart, { onMouseMove: mouseMove, onMouseLeave: mouseLeave, data: data }),
|
|
267
|
+
React__default.default.createElement("defs", null, renderGradient),
|
|
270
268
|
state.cartesianGrid && renderCartesianGrid,
|
|
271
269
|
state.xAxis && renderXAxis,
|
|
272
270
|
state.yAxis && renderYAxis,
|
|
@@ -1,20 +1,18 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
|
-
require('../hooks/usePathBar/utils/getRadius.js');
|
|
7
4
|
var hooks_usePathBar_index = require('../hooks/usePathBar/index.js');
|
|
5
|
+
require('../hooks/usePathBar/utils/getRadius.js');
|
|
8
6
|
|
|
9
|
-
function
|
|
7
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
10
8
|
|
|
11
|
-
var React__default = /*#__PURE__*/
|
|
9
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
12
10
|
|
|
13
11
|
var CustomizedLabel = function (_a) {
|
|
14
12
|
var x = _a.x, y = _a.y, value = _a.value, offset = _a.offset, radius = _a.radius, height = _a.height, width = _a.width, formatter = _a.formatter;
|
|
15
13
|
var initHeight = hooks_usePathBar_index.usePathBar({ radius: radius, height: height })[0];
|
|
16
|
-
return (React__default
|
|
17
|
-
React__default
|
|
14
|
+
return (React__default.default.createElement("text", { x: x + width / 2, y: y + height - (initHeight + offset), width: width, height: initHeight, textAnchor: 'middle' },
|
|
15
|
+
React__default.default.createElement("tspan", { x: x + width / 2 }, formatter ? formatter(value) : value)));
|
|
18
16
|
};
|
|
19
17
|
|
|
20
18
|
exports.CustomizedLabel = CustomizedLabel;
|
package/components/Dot/index.css
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
/* hash:
|
|
2
|
-
.
|
|
1
|
+
/* hash: 6blwv */
|
|
2
|
+
.chart__dotUnfocused_1ysgs {
|
|
3
3
|
opacity: 0.3;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.
|
|
7
|
-
.
|
|
8
|
-
.
|
|
6
|
+
.chart__dot_1ysgs,
|
|
7
|
+
.chart__dotItem_1ysgs,
|
|
8
|
+
.chart__dotWrap_1ysgs {
|
|
9
9
|
transition: all 0.2s ease;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
.
|
|
13
|
-
animation:
|
|
12
|
+
.chart__dot_1ysgs {
|
|
13
|
+
animation: chart__showDot_1ysgs 0.5s ease;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
@keyframes
|
|
16
|
+
@keyframes chart__showDot_1ysgs {
|
|
17
17
|
from {
|
|
18
18
|
opacity: 0;
|
|
19
19
|
}
|
package/components/Dot/index.js
CHANGED
|
@@ -1,20 +1,18 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var cn = require('classnames');
|
|
7
5
|
var icons_Point = require('../../icons/Point.js');
|
|
8
6
|
|
|
9
|
-
function
|
|
7
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
10
8
|
|
|
11
|
-
var React__default = /*#__PURE__*/
|
|
12
|
-
var cn__default = /*#__PURE__*/
|
|
9
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
10
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
13
11
|
|
|
14
|
-
var styles = {"dotUnfocused":"
|
|
12
|
+
var styles = {"dotUnfocused":"chart__dotUnfocused_1ysgs","dot":"chart__dot_1ysgs","dotItem":"chart__dotItem_1ysgs","dotWrap":"chart__dotWrap_1ysgs","showDot":"chart__showDot_1ysgs"};
|
|
15
13
|
require('./index.css')
|
|
16
14
|
|
|
17
|
-
var Dot = React__default
|
|
15
|
+
var Dot = React__default.default.forwardRef(function (_a, ref) {
|
|
18
16
|
var cx = _a.cx, cy = _a.cy, index = _a.index, activeDot = _a.activeDot, dataKey = _a.dataKey, dotSettings = _a.dotSettings, value = _a.value, stroke = _a.stroke;
|
|
19
17
|
var _b = React.useState(0), windowWidth = _b[0], setWindowWidth = _b[1];
|
|
20
18
|
var _c = React.useState(0), height = _c[0], setHeight = _c[1];
|
|
@@ -44,12 +42,12 @@ var Dot = React__default['default'].forwardRef(function (_a, ref) {
|
|
|
44
42
|
}, [activeDot, index, option]);
|
|
45
43
|
if (!value)
|
|
46
44
|
return null;
|
|
47
|
-
return (React__default
|
|
48
|
-
React__default
|
|
49
|
-
React__default
|
|
45
|
+
return (React__default.default.createElement("g", { ref: ref, className: cn__default.default(styles.dot), transform: "translate(".concat(cx - width / 2, ", ").concat(cy - height / 2, ")") },
|
|
46
|
+
React__default.default.createElement("g", { className: cn__default.default(styles.dotWrap), transform: "scale(".concat(activeDot === index ? (option === null || option === void 0 ? void 0 : option.scale) || 0 : (option === null || option === void 0 ? void 0 : option.initScale) || 0, ")") },
|
|
47
|
+
React__default.default.createElement("svg", { className: cn__default.default(styles.dotItem, activeDot === index ? styles.dotActive : '', typeof activeDot === 'number' && activeDot !== index
|
|
50
48
|
? styles.dotUnfocused
|
|
51
49
|
: ''), "data-id": index, "data-name": dataKey, width: (option === null || option === void 0 ? void 0 : option.width) || 0, height: (option === null || option === void 0 ? void 0 : option.height) || 0 },
|
|
52
|
-
React__default
|
|
50
|
+
React__default.default.createElement(icons_Point.PointIcon, { fill: stroke })))));
|
|
53
51
|
});
|
|
54
52
|
|
|
55
53
|
exports.Dot = Dot;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: li1ih */
|
|
2
2
|
:root {
|
|
3
3
|
|
|
4
4
|
/* Hard */
|
|
@@ -10,31 +10,31 @@
|
|
|
10
10
|
:root {
|
|
11
11
|
--gap-2xl: 32px;
|
|
12
12
|
}
|
|
13
|
-
.
|
|
13
|
+
.chart__legendContent_vxgym {
|
|
14
14
|
display: flex;
|
|
15
15
|
align-items: center;
|
|
16
16
|
flex-wrap: wrap;
|
|
17
17
|
}
|
|
18
|
-
.
|
|
18
|
+
.chart__legendWrap_vxgym {
|
|
19
19
|
width: 100%;
|
|
20
20
|
margin: 0;
|
|
21
21
|
padding: 0;
|
|
22
22
|
}
|
|
23
|
-
.
|
|
23
|
+
.chart__legendItem_vxgym {
|
|
24
24
|
margin-right: var(--gap-2xl);
|
|
25
25
|
cursor: pointer;
|
|
26
26
|
display: inline-block;
|
|
27
27
|
}
|
|
28
|
-
.
|
|
28
|
+
.chart__legendItem_vxgym:last-child {
|
|
29
29
|
margin-right: 0;
|
|
30
30
|
}
|
|
31
|
-
.
|
|
31
|
+
.chart__legendUnactive_vxgym {
|
|
32
32
|
opacity: 0.3;
|
|
33
33
|
}
|
|
34
|
-
.
|
|
34
|
+
.chart__legendIcon_vxgym {
|
|
35
35
|
margin-right: 13px;
|
|
36
36
|
display: flex;
|
|
37
37
|
}
|
|
38
|
-
.
|
|
38
|
+
.chart__legendValue_vxgym {
|
|
39
39
|
text-transform: capitalize;
|
|
40
40
|
}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var cn = require('classnames');
|
|
7
5
|
var coreComponentsTypography = require('@alfalab/core-components-typography');
|
|
@@ -10,12 +8,12 @@ var icons_CircleLine = require('../../icons/CircleLine.js');
|
|
|
10
8
|
var icons_FilledCircle = require('../../icons/FilledCircle.js');
|
|
11
9
|
var icons_StrokeCircle = require('../../icons/StrokeCircle.js');
|
|
12
10
|
|
|
13
|
-
function
|
|
11
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
14
12
|
|
|
15
|
-
var React__default = /*#__PURE__*/
|
|
16
|
-
var cn__default = /*#__PURE__*/
|
|
13
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
14
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
17
15
|
|
|
18
|
-
var styles = {"legendContent":"
|
|
16
|
+
var styles = {"legendContent":"chart__legendContent_vxgym","legendWrap":"chart__legendWrap_vxgym","legendItem":"chart__legendItem_vxgym","legendUnactive":"chart__legendUnactive_vxgym","legendIcon":"chart__legendIcon_vxgym","legendValue":"chart__legendValue_vxgym"};
|
|
19
17
|
require('./index.css')
|
|
20
18
|
|
|
21
19
|
var icons = {
|
|
@@ -24,25 +22,25 @@ var icons = {
|
|
|
24
22
|
strokeCircle: icons_StrokeCircle.StrokeCircleIcon,
|
|
25
23
|
circle: icons_Circle.CircleIcon,
|
|
26
24
|
};
|
|
27
|
-
var Legends = React__default
|
|
25
|
+
var Legends = React__default.default.forwardRef(function (_a, ref) {
|
|
28
26
|
var legend = _a.legend, series = _a.series, id = _a.id, charts = _a.charts, toggleChart = _a.toggleChart;
|
|
29
27
|
var style = {
|
|
30
28
|
textAlign: legend.align || 'center',
|
|
31
|
-
transform: "translateY("
|
|
32
|
-
(legend.verticalAlign === 'top' ? -1 : 1)
|
|
29
|
+
transform: "translateY(".concat(((legend === null || legend === void 0 ? void 0 : legend.marginTop) ? legend.marginTop : 0) *
|
|
30
|
+
(legend.verticalAlign === 'top' ? -1 : 1), "px)"),
|
|
33
31
|
};
|
|
34
|
-
return (React__default
|
|
32
|
+
return (React__default.default.createElement("ul", { ref: ref, className: cn__default.default(styles.legendWrap), style: style }, series.map(function (item) {
|
|
35
33
|
var _a, _b;
|
|
36
34
|
if (item.hideLegend || item.hide)
|
|
37
35
|
return null;
|
|
38
36
|
var Icon = icons[item.icon] || icons_Circle.CircleIcon;
|
|
39
|
-
return (React__default
|
|
40
|
-
React__default
|
|
41
|
-
Icon ? (React__default
|
|
42
|
-
React__default
|
|
37
|
+
return (React__default.default.createElement("li", { role: 'presentation', key: "".concat(id, "-").concat(item.properties.dataKey), className: cn__default.default(styles.legendItem, charts["".concat(item.properties.dataKey)] ? '' : styles.legendUnactive), onClick: function () { return toggleChart(item); } },
|
|
38
|
+
React__default.default.createElement("div", { className: cn__default.default(styles.legendContent) },
|
|
39
|
+
Icon ? (React__default.default.createElement("i", { className: cn__default.default(styles.legendIcon) },
|
|
40
|
+
React__default.default.createElement(Icon, { fill: ((_a = item.properties) === null || _a === void 0 ? void 0 : _a.fill) ||
|
|
43
41
|
((_b = item.properties) === null || _b === void 0 ? void 0 : _b.stroke) ||
|
|
44
42
|
'', height: legend.iconHeight || 16 }))) : null,
|
|
45
|
-
React__default
|
|
43
|
+
React__default.default.createElement(coreComponentsTypography.Typography.Text, { view: 'primary-medium', tag: 'span', className: cn__default.default(styles.legendValue) }, item.properties.name))));
|
|
46
44
|
})));
|
|
47
45
|
});
|
|
48
46
|
|
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
|
|
7
|
-
function
|
|
5
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
8
6
|
|
|
9
|
-
var React__default = /*#__PURE__*/
|
|
7
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
10
8
|
|
|
11
9
|
var LinearGradient = function (_a) {
|
|
12
10
|
var id = _a.id, gid = _a.gid, points = _a.points;
|
|
13
|
-
return (React__default
|
|
11
|
+
return (React__default.default.createElement("linearGradient", { key: "".concat(id, "-").concat(gid), id: "".concat(id, "-").concat(gid), x1: '0', y1: '0', x2: '0', y2: '1' }, points.map(function (point, index) { return (React__default.default.createElement("stop", { key: "".concat(id).concat(gid, "-").concat(index.toString()), offset: "".concat(point.offset, "%"), stopColor: point.stopColor, stopOpacity: point.stopOpacity })); })));
|
|
14
12
|
};
|
|
15
13
|
|
|
16
14
|
exports.LinearGradient = LinearGradient;
|
package/components/RectBar.js
CHANGED
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
|
-
require('../hooks/usePathBar/utils/getRadius.js');
|
|
7
4
|
var hooks_usePathBar_index = require('../hooks/usePathBar/index.js');
|
|
5
|
+
require('../hooks/usePathBar/utils/getRadius.js');
|
|
8
6
|
|
|
9
|
-
function
|
|
7
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
10
8
|
|
|
11
|
-
var React__default = /*#__PURE__*/
|
|
9
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
12
10
|
|
|
13
11
|
// eslint-disable-next-line complexity
|
|
14
12
|
var getPath = function (x, width, height, initHeight, topRadius, bottomRadius, initY) {
|
|
15
|
-
return "\n M"
|
|
13
|
+
return "\n M".concat(x + ((height !== 0 && bottomRadius) || 0), " ").concat(initY + initHeight || 0, "\n Q").concat(x, " ").concat(initY + initHeight, " ").concat(x, " ").concat(initY + initHeight - ((height !== 0 && bottomRadius) || 0), "\n L").concat(x, " ").concat(initY + ((height !== 0 && topRadius) || 0), "\n Q").concat(x, " ").concat(initY, " ").concat(x + ((height !== 0 && topRadius) || 0), " ").concat(initY, "\n L").concat(x + width - ((height !== 0 && topRadius) || 0), " ").concat(initY, "\n Q").concat(x + width, " ").concat(initY, " ").concat(x + width, " ").concat(initY + (topRadius || 0), "\n L").concat(x + width, " ").concat(initY + initHeight - ((height !== 0 && bottomRadius) || 0), "\n Q").concat(x + width, " ").concat(initY + initHeight, " ").concat(x + width - ((height !== 0 && bottomRadius) || 0), " ").concat(initY + initHeight, "\n Z\n ");
|
|
16
14
|
};
|
|
17
15
|
var RectBar = function (_a) {
|
|
18
16
|
var fill = _a.fill, x = _a.x, y = _a.y, width = _a.width, height = _a.height, radius = _a.radius, background = _a.background;
|
|
@@ -22,7 +20,7 @@ var RectBar = function (_a) {
|
|
|
22
20
|
background: background,
|
|
23
21
|
y: y,
|
|
24
22
|
}), initHeight = _b[0], topRadius = _b[1], bottomRadius = _b[2], initY = _b[3];
|
|
25
|
-
return React.useMemo(function () { return (React__default
|
|
23
|
+
return React.useMemo(function () { return (React__default.default.createElement("path", { d: getPath(x, width, height, initHeight, topRadius, bottomRadius, initY), stroke: 'none', fill: fill })); }, [x, width, height, initHeight, topRadius, bottomRadius, initY, fill]);
|
|
26
24
|
};
|
|
27
25
|
|
|
28
26
|
exports.RectBar = RectBar;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: iolvt */
|
|
2
2
|
:root {
|
|
3
3
|
--color-dark-bg-primary: #0b1f35;
|
|
4
4
|
--color-light-text-primary: #0b1f35;
|
|
@@ -11,17 +11,17 @@
|
|
|
11
11
|
|
|
12
12
|
/* Hard up */
|
|
13
13
|
}
|
|
14
|
-
.
|
|
14
|
+
.chart__tickText_gmual {
|
|
15
15
|
fill: var(--color-light-text-primary);
|
|
16
16
|
font-size: 16px;
|
|
17
17
|
line-height: 24px;
|
|
18
18
|
font-weight: 400;
|
|
19
19
|
}
|
|
20
|
-
.
|
|
20
|
+
.chart__circle_gmual {
|
|
21
21
|
opacity: 0.3;
|
|
22
22
|
fill: var(--color-dark-bg-primary);
|
|
23
23
|
}
|
|
24
|
-
.
|
|
24
|
+
.chart__circle_gmual {
|
|
25
25
|
opacity: 0.3;
|
|
26
26
|
fill: var(--color-dark-bg-primary);
|
|
27
27
|
}
|
package/components/Tick/index.js
CHANGED
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var cn = require('classnames');
|
|
7
5
|
|
|
8
|
-
function
|
|
6
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
9
7
|
|
|
10
|
-
var React__default = /*#__PURE__*/
|
|
11
|
-
var cn__default = /*#__PURE__*/
|
|
8
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
9
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
12
10
|
|
|
13
|
-
var styles = {"tickText":"
|
|
11
|
+
var styles = {"tickText":"chart__tickText_gmual","circle":"chart__circle_gmual"};
|
|
14
12
|
require('./index.css')
|
|
15
13
|
|
|
16
14
|
var Tick = function (_a) {
|
|
@@ -20,9 +18,9 @@ var Tick = function (_a) {
|
|
|
20
18
|
(xAxis.tickMargin > 0 ? xAxis.tickMargin - radius / 2 : xAxis.tickMargin === 0)
|
|
21
19
|
? (radius / 2) * -1
|
|
22
20
|
: null;
|
|
23
|
-
return (React__default
|
|
24
|
-
React__default
|
|
25
|
-
React__default
|
|
21
|
+
return (React__default.default.createElement("g", { className: cn__default.default(styles.tick), opacity: '1', textAnchor: 'middle', transform: "translate(".concat(payload.coordinate, ", ").concat(y - (typeof marginTick === 'number' ? marginTick : 0) - radius * 2, ")") },
|
|
22
|
+
React__default.default.createElement("text", { className: cn__default.default(styles.tickText), y: '30' }, tickFormatter ? tickFormatter(payload.value) : payload.value),
|
|
23
|
+
React__default.default.createElement("circle", { r: radius, className: cn__default.default(styles.circle) })));
|
|
26
24
|
};
|
|
27
25
|
|
|
28
26
|
exports.Tick = Tick;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: ion8l */
|
|
2
2
|
:root {
|
|
3
3
|
--color-light-bg-primary: #fff;
|
|
4
4
|
--color-light-border-primary: #dbdee1;
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
:root {
|
|
20
20
|
--border-radius-m: 8px;
|
|
21
21
|
}
|
|
22
|
-
.
|
|
22
|
+
.chart__tooltip_59a0x {
|
|
23
23
|
background-color: var(--color-light-bg-primary);
|
|
24
24
|
border: 1px solid var(--color-light-border-primary);
|
|
25
25
|
box-shadow: var(--shadow-l);
|
|
@@ -28,17 +28,17 @@
|
|
|
28
28
|
pointer-events: none;
|
|
29
29
|
position: relative;
|
|
30
30
|
}
|
|
31
|
-
.
|
|
31
|
+
.chart__tooltipList_59a0x {
|
|
32
32
|
position: relative;
|
|
33
33
|
z-index: 5;
|
|
34
34
|
list-style-type: none;
|
|
35
35
|
padding: 0;
|
|
36
36
|
margin: 0;
|
|
37
37
|
}
|
|
38
|
-
.
|
|
38
|
+
.chart__tooltipItem_59a0x {
|
|
39
39
|
margin-bottom: 10px;
|
|
40
40
|
}
|
|
41
|
-
.
|
|
41
|
+
.chart__tooltipArrow_59a0x {
|
|
42
42
|
position: absolute;
|
|
43
43
|
left: 0;
|
|
44
44
|
top: 50%;
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
border: 1px solid var(--color-light-border-primary);
|
|
49
49
|
background-color: var(--color-light-bg-primary);
|
|
50
50
|
}
|
|
51
|
-
.
|
|
51
|
+
.chart__tooltipArrow_59a0x:before {
|
|
52
52
|
content: '';
|
|
53
53
|
position: absolute;
|
|
54
54
|
left: -2px;
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
border-width: 0 24px 24px 0;
|
|
60
60
|
border-color: transparent var(--color-light-bg-primary) transparent transparent;
|
|
61
61
|
}
|
|
62
|
-
.
|
|
62
|
+
.chart__tooltipArrowRight_59a0x {
|
|
63
63
|
left: 100%;
|
|
64
64
|
transform: translate(-50%, -50%) scale(-1, 1) rotate(45deg);
|
|
65
65
|
}
|