@semcore/d3-chart 3.18.1 → 3.18.2
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/CHANGELOG.md +7 -1
- package/README.md +1 -1
- package/lib/cjs/Area.js +9 -9
- package/lib/cjs/Axis.js +14 -14
- package/lib/cjs/Bar.js +8 -8
- package/lib/cjs/Bubble.js +10 -10
- package/lib/cjs/Donut.js +7 -7
- package/lib/cjs/Dots.js +10 -10
- package/lib/cjs/HorizontalBar.js +8 -8
- package/lib/cjs/Hover.js +3 -3
- package/lib/cjs/Line.js +13 -11
- package/lib/cjs/Line.js.map +1 -1
- package/lib/cjs/Plot.js +3 -3
- package/lib/cjs/Radar.js +17 -17
- package/lib/cjs/RadialTree.js +10 -10
- package/lib/cjs/ReferenceLine.js +9 -9
- package/lib/cjs/ScatterPlot.js +8 -8
- package/lib/cjs/ScatterPlot.js.map +1 -1
- package/lib/cjs/Tooltip.js +8 -8
- package/lib/cjs/Venn.js +7 -7
- package/lib/cjs/a11y/PlotA11yModule.js +2 -2
- package/lib/cjs/a11y/PlotA11yView.js +2 -2
- package/lib/cjs/component/Chart/AbstractChart.js +420 -0
- package/lib/cjs/component/Chart/AbstractChart.js.map +1 -0
- package/lib/cjs/component/Chart/AbstractChart.type.js +2 -0
- package/lib/cjs/component/Chart/AbstractChart.type.js.map +1 -0
- package/lib/cjs/component/Chart/AreaChart.js +160 -0
- package/lib/cjs/component/Chart/AreaChart.js.map +1 -0
- package/lib/cjs/component/Chart/AreaChart.type.js +2 -0
- package/lib/cjs/component/Chart/AreaChart.type.js.map +1 -0
- package/lib/cjs/component/Chart/BarChart.js +253 -0
- package/lib/cjs/component/Chart/BarChart.js.map +1 -0
- package/lib/cjs/component/Chart/BarChart.type.js +2 -0
- package/lib/cjs/component/Chart/BarChart.type.js.map +1 -0
- package/lib/cjs/component/Chart/BubbleChart.js +145 -0
- package/lib/cjs/component/Chart/BubbleChart.js.map +1 -0
- package/lib/cjs/component/Chart/BubbleChart.type.js +2 -0
- package/lib/cjs/component/Chart/BubbleChart.type.js.map +1 -0
- package/lib/cjs/component/Chart/DonutChart.js +117 -0
- package/lib/cjs/component/Chart/DonutChart.js.map +1 -0
- package/lib/cjs/component/Chart/DonutChart.type.js +2 -0
- package/lib/cjs/component/Chart/DonutChart.type.js.map +1 -0
- package/lib/cjs/component/Chart/HistogramChart.js +189 -0
- package/lib/cjs/component/Chart/HistogramChart.js.map +1 -0
- package/lib/cjs/component/Chart/HistogramChart.type.js +2 -0
- package/lib/cjs/component/Chart/HistogramChart.type.js.map +1 -0
- package/lib/cjs/component/Chart/LineChart.js +147 -0
- package/lib/cjs/component/Chart/LineChart.js.map +1 -0
- package/lib/cjs/component/Chart/LineChart.type.js +2 -0
- package/lib/cjs/component/Chart/LineChart.type.js.map +1 -0
- package/lib/cjs/component/Chart/RadarChart.js +121 -0
- package/lib/cjs/component/Chart/RadarChart.js.map +1 -0
- package/lib/cjs/component/Chart/RadarChart.type.js +2 -0
- package/lib/cjs/component/Chart/RadarChart.type.js.map +1 -0
- package/lib/cjs/component/Chart/ScatterPlotChart.js +159 -0
- package/lib/cjs/component/Chart/ScatterPlotChart.js.map +1 -0
- package/lib/cjs/component/Chart/ScatterPlotChart.type.js +2 -0
- package/lib/cjs/component/Chart/ScatterPlotChart.type.js.map +1 -0
- package/lib/cjs/component/Chart/VennChart.js +144 -0
- package/lib/cjs/component/Chart/VennChart.js.map +1 -0
- package/lib/cjs/component/Chart/VennChart.type.js +2 -0
- package/lib/cjs/component/Chart/VennChart.type.js.map +1 -0
- package/lib/cjs/component/Chart/index.js +28 -0
- package/lib/cjs/component/Chart/index.js.map +1 -0
- package/lib/cjs/component/ChartLegend/BaseLegend.type.js.map +1 -1
- package/lib/cjs/component/ChartLegend/LegendFlex/LegendFlex.js +4 -4
- package/lib/cjs/component/ChartLegend/LegendItem/LegendItem.js +20 -17
- package/lib/cjs/component/ChartLegend/LegendItem/LegendItem.js.map +1 -1
- package/lib/cjs/component/ChartLegend/LegendTable/LegendTable.js +6 -7
- package/lib/cjs/component/ChartLegend/LegendTable/LegendTable.js.map +1 -1
- package/lib/cjs/component/ChartLegend/LegendTable/legend-table.shadow.css +5 -2
- package/lib/cjs/index.js +7 -0
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/donut.shadow.css +3 -0
- package/lib/cjs/types/Line.d.js.map +1 -1
- package/lib/cjs/types/index.d.js +130 -1
- package/lib/cjs/types/index.d.js.map +1 -1
- package/lib/es6/Area.js +9 -9
- package/lib/es6/Axis.js +14 -14
- package/lib/es6/Bar.js +8 -8
- package/lib/es6/Bubble.js +10 -10
- package/lib/es6/Donut.js +7 -7
- package/lib/es6/Dots.js +10 -10
- package/lib/es6/HorizontalBar.js +8 -8
- package/lib/es6/Hover.js +3 -3
- package/lib/es6/Line.js +13 -11
- package/lib/es6/Line.js.map +1 -1
- package/lib/es6/Plot.js +3 -3
- package/lib/es6/Radar.js +17 -17
- package/lib/es6/RadialTree.js +10 -10
- package/lib/es6/ReferenceLine.js +9 -9
- package/lib/es6/ScatterPlot.js +8 -8
- package/lib/es6/ScatterPlot.js.map +1 -1
- package/lib/es6/Tooltip.js +8 -8
- package/lib/es6/Venn.js +7 -7
- package/lib/es6/a11y/PlotA11yModule.js +2 -2
- package/lib/es6/a11y/PlotA11yView.js +2 -2
- package/lib/es6/component/Chart/AbstractChart.js +412 -0
- package/lib/es6/component/Chart/AbstractChart.js.map +1 -0
- package/lib/es6/component/Chart/AbstractChart.type.js +2 -0
- package/lib/es6/component/Chart/AbstractChart.type.js.map +1 -0
- package/lib/es6/component/Chart/AreaChart.js +152 -0
- package/lib/es6/component/Chart/AreaChart.js.map +1 -0
- package/lib/es6/component/Chart/AreaChart.type.js +2 -0
- package/lib/es6/component/Chart/AreaChart.type.js.map +1 -0
- package/lib/es6/component/Chart/BarChart.js +245 -0
- package/lib/es6/component/Chart/BarChart.js.map +1 -0
- package/lib/es6/component/Chart/BarChart.type.js +2 -0
- package/lib/es6/component/Chart/BarChart.type.js.map +1 -0
- package/lib/es6/component/Chart/BubbleChart.js +137 -0
- package/lib/es6/component/Chart/BubbleChart.js.map +1 -0
- package/lib/es6/component/Chart/BubbleChart.type.js +2 -0
- package/lib/es6/component/Chart/BubbleChart.type.js.map +1 -0
- package/lib/es6/component/Chart/DonutChart.js +109 -0
- package/lib/es6/component/Chart/DonutChart.js.map +1 -0
- package/lib/es6/component/Chart/DonutChart.type.js +2 -0
- package/lib/es6/component/Chart/DonutChart.type.js.map +1 -0
- package/lib/es6/component/Chart/HistogramChart.js +181 -0
- package/lib/es6/component/Chart/HistogramChart.js.map +1 -0
- package/lib/es6/component/Chart/HistogramChart.type.js +2 -0
- package/lib/es6/component/Chart/HistogramChart.type.js.map +1 -0
- package/lib/es6/component/Chart/LineChart.js +139 -0
- package/lib/es6/component/Chart/LineChart.js.map +1 -0
- package/lib/es6/component/Chart/LineChart.type.js +2 -0
- package/lib/es6/component/Chart/LineChart.type.js.map +1 -0
- package/lib/es6/component/Chart/RadarChart.js +113 -0
- package/lib/es6/component/Chart/RadarChart.js.map +1 -0
- package/lib/es6/component/Chart/RadarChart.type.js +2 -0
- package/lib/es6/component/Chart/RadarChart.type.js.map +1 -0
- package/lib/es6/component/Chart/ScatterPlotChart.js +151 -0
- package/lib/es6/component/Chart/ScatterPlotChart.js.map +1 -0
- package/lib/es6/component/Chart/ScatterPlotChart.type.js +2 -0
- package/lib/es6/component/Chart/ScatterPlotChart.type.js.map +1 -0
- package/lib/es6/component/Chart/VennChart.js +136 -0
- package/lib/es6/component/Chart/VennChart.js.map +1 -0
- package/lib/es6/component/Chart/VennChart.type.js +2 -0
- package/lib/es6/component/Chart/VennChart.type.js.map +1 -0
- package/lib/es6/component/Chart/index.js +21 -0
- package/lib/es6/component/Chart/index.js.map +1 -0
- package/lib/es6/component/ChartLegend/BaseLegend.type.js.map +1 -1
- package/lib/es6/component/ChartLegend/LegendFlex/LegendFlex.js +4 -4
- package/lib/es6/component/ChartLegend/LegendItem/LegendItem.js +20 -17
- package/lib/es6/component/ChartLegend/LegendItem/LegendItem.js.map +1 -1
- package/lib/es6/component/ChartLegend/LegendTable/LegendTable.js +6 -7
- package/lib/es6/component/ChartLegend/LegendTable/LegendTable.js.map +1 -1
- package/lib/es6/component/ChartLegend/LegendTable/legend-table.shadow.css +5 -2
- package/lib/es6/index.js +1 -0
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/donut.shadow.css +3 -0
- package/lib/es6/types/Line.d.js.map +1 -1
- package/lib/es6/types/index.d.js +12 -0
- package/lib/es6/types/index.d.js.map +1 -1
- package/lib/types/Line.d.ts +7 -2
- package/lib/types/component/Chart/AbstractChart.d.ts +50 -0
- package/lib/types/component/Chart/AbstractChart.type.d.ts +161 -0
- package/lib/types/component/Chart/AreaChart.d.ts +2 -0
- package/lib/types/component/Chart/AreaChart.type.d.ts +16 -0
- package/lib/types/component/Chart/BarChart.d.ts +2 -0
- package/lib/types/component/Chart/BarChart.type.d.ts +19 -0
- package/lib/types/component/Chart/BubbleChart.d.ts +2 -0
- package/lib/types/component/Chart/BubbleChart.type.d.ts +17 -0
- package/lib/types/component/Chart/DonutChart.d.ts +2 -0
- package/lib/types/component/Chart/DonutChart.type.d.ts +15 -0
- package/lib/types/component/Chart/HistogramChart.d.ts +2 -0
- package/lib/types/component/Chart/HistogramChart.type.d.ts +11 -0
- package/lib/types/component/Chart/LineChart.d.ts +2 -0
- package/lib/types/component/Chart/LineChart.type.d.ts +24 -0
- package/lib/types/component/Chart/RadarChart.d.ts +2 -0
- package/lib/types/component/Chart/RadarChart.type.d.ts +14 -0
- package/lib/types/component/Chart/ScatterPlotChart.d.ts +2 -0
- package/lib/types/component/Chart/ScatterPlotChart.type.d.ts +13 -0
- package/lib/types/component/Chart/VennChart.d.ts +2 -0
- package/lib/types/component/Chart/VennChart.type.d.ts +11 -0
- package/lib/types/component/Chart/index.d.ts +12 -0
- package/lib/types/component/ChartLegend/BaseLegend.type.d.ts +2 -2
- package/lib/types/index.d.ts +13 -0
- package/package.json +2 -2
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
3
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
4
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
5
|
+
import _get from "@babel/runtime/helpers/get";
|
|
6
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
7
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
8
|
+
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
9
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
10
|
+
import React from 'react';
|
|
11
|
+
import createComponent from '@semcore/core';
|
|
12
|
+
import { scaleBand, scaleLinear, scaleTime } from 'd3-scale';
|
|
13
|
+
// @ts-ignore
|
|
14
|
+
import { Bar, minMax, HoverRect, StackBar } from '../..';
|
|
15
|
+
import { AbstractChart } from './AbstractChart';
|
|
16
|
+
import { Box, Flex } from '@semcore/flex-box';
|
|
17
|
+
import { Text } from '@semcore/typography';
|
|
18
|
+
var HistogramChartComponent = /*#__PURE__*/function (_AbstractChart) {
|
|
19
|
+
_inherits(HistogramChartComponent, _AbstractChart);
|
|
20
|
+
var _super = _createSuper(HistogramChartComponent);
|
|
21
|
+
function HistogramChartComponent() {
|
|
22
|
+
_classCallCheck(this, HistogramChartComponent);
|
|
23
|
+
return _super.apply(this, arguments);
|
|
24
|
+
}
|
|
25
|
+
_createClass(HistogramChartComponent, [{
|
|
26
|
+
key: "xScale",
|
|
27
|
+
get: function get() {
|
|
28
|
+
var _this$asProps = this.asProps,
|
|
29
|
+
xScale = _this$asProps.xScale,
|
|
30
|
+
_this$asProps$marginY = _this$asProps.marginY,
|
|
31
|
+
marginY = _this$asProps$marginY === void 0 ? 30 : _this$asProps$marginY,
|
|
32
|
+
_this$asProps$marginX = _this$asProps.marginX,
|
|
33
|
+
marginX = _this$asProps$marginX === void 0 ? 30 : _this$asProps$marginX,
|
|
34
|
+
plotWidth = _this$asProps.plotWidth,
|
|
35
|
+
plotHeight = _this$asProps.plotHeight,
|
|
36
|
+
invertAxis = _this$asProps.invertAxis,
|
|
37
|
+
data = _this$asProps.data,
|
|
38
|
+
groupKey = _this$asProps.groupKey;
|
|
39
|
+
if (xScale) {
|
|
40
|
+
return xScale;
|
|
41
|
+
}
|
|
42
|
+
var testItem = data[0][groupKey];
|
|
43
|
+
var range = invertAxis ? [plotHeight - marginX, this.plotPadding] : [marginY, plotWidth - this.plotPadding];
|
|
44
|
+
if (testItem instanceof Date && !Number.isNaN(testItem.getMilliseconds())) {
|
|
45
|
+
var _domain = minMax(data, groupKey);
|
|
46
|
+
return scaleTime(_domain, range);
|
|
47
|
+
}
|
|
48
|
+
var domain = data.map(function (item) {
|
|
49
|
+
return item[groupKey];
|
|
50
|
+
});
|
|
51
|
+
return scaleBand(domain, range).paddingInner(0.05).paddingOuter(0.2);
|
|
52
|
+
}
|
|
53
|
+
}, {
|
|
54
|
+
key: "yScale",
|
|
55
|
+
get: function get() {
|
|
56
|
+
var _this$asProps2 = this.asProps,
|
|
57
|
+
yScale = _this$asProps2.yScale,
|
|
58
|
+
_this$asProps2$margin = _this$asProps2.marginY,
|
|
59
|
+
marginY = _this$asProps2$margin === void 0 ? 30 : _this$asProps2$margin,
|
|
60
|
+
_this$asProps2$margin2 = _this$asProps2.marginX,
|
|
61
|
+
marginX = _this$asProps2$margin2 === void 0 ? 30 : _this$asProps2$margin2,
|
|
62
|
+
plotHeight = _this$asProps2.plotHeight,
|
|
63
|
+
plotWidth = _this$asProps2.plotWidth,
|
|
64
|
+
invertAxis = _this$asProps2.invertAxis,
|
|
65
|
+
data = _this$asProps2.data;
|
|
66
|
+
var max;
|
|
67
|
+
if (this.isStack) {
|
|
68
|
+
max = data.reduce(function (max, item) {
|
|
69
|
+
var barSum = Object.values(item).reduce(function (sum, val) {
|
|
70
|
+
if (val instanceof Date && !Number.isNaN(val.getMilliseconds())) {
|
|
71
|
+
return sum + val.getMilliseconds();
|
|
72
|
+
}
|
|
73
|
+
return sum + val;
|
|
74
|
+
}, 0);
|
|
75
|
+
if (barSum > max) {
|
|
76
|
+
max = barSum;
|
|
77
|
+
}
|
|
78
|
+
return max;
|
|
79
|
+
}, 0);
|
|
80
|
+
} else {
|
|
81
|
+
var flatValues = _get(_getPrototypeOf(HistogramChartComponent.prototype), "flatValues", this);
|
|
82
|
+
max = Math.max.apply(Math, _toConsumableArray(flatValues));
|
|
83
|
+
}
|
|
84
|
+
return yScale !== null && yScale !== void 0 ? yScale : scaleLinear().range(invertAxis ? [marginY, plotWidth - this.plotPadding] : [plotHeight - marginX, this.plotPadding]).domain([0, max]);
|
|
85
|
+
}
|
|
86
|
+
}, {
|
|
87
|
+
key: "isStack",
|
|
88
|
+
get: function get() {
|
|
89
|
+
var dataDefinitions = this.state.dataDefinitions;
|
|
90
|
+
return dataDefinitions.length > 1;
|
|
91
|
+
}
|
|
92
|
+
}, {
|
|
93
|
+
key: "renderChart",
|
|
94
|
+
value: function renderChart() {
|
|
95
|
+
var _this$asProps3 = this.asProps,
|
|
96
|
+
groupKey = _this$asProps3.groupKey,
|
|
97
|
+
invertAxis = _this$asProps3.invertAxis;
|
|
98
|
+
var _this$state = this.state,
|
|
99
|
+
dataDefinitions = _this$state.dataDefinitions,
|
|
100
|
+
highlightedLine = _this$state.highlightedLine;
|
|
101
|
+
if (this.isStack) {
|
|
102
|
+
return /*#__PURE__*/React.createElement(StackBar, {
|
|
103
|
+
x: invertAxis ? undefined : groupKey,
|
|
104
|
+
y: invertAxis ? groupKey : undefined
|
|
105
|
+
}, dataDefinitions.map(function (item, index) {
|
|
106
|
+
var BarComponent = invertAxis ? StackBar.HorizontalBar : StackBar.Bar;
|
|
107
|
+
var commonBarComponentProps = {
|
|
108
|
+
color: item.color,
|
|
109
|
+
transparent: highlightedLine !== -1 && highlightedLine !== index
|
|
110
|
+
};
|
|
111
|
+
if (invertAxis) {
|
|
112
|
+
commonBarComponentProps.x = item.id;
|
|
113
|
+
} else {
|
|
114
|
+
commonBarComponentProps.y = item.id;
|
|
115
|
+
}
|
|
116
|
+
return item.checked && /*#__PURE__*/React.createElement(BarComponent, _extends({
|
|
117
|
+
key: item.id
|
|
118
|
+
}, commonBarComponentProps));
|
|
119
|
+
}));
|
|
120
|
+
}
|
|
121
|
+
var item = dataDefinitions[0];
|
|
122
|
+
return /*#__PURE__*/React.createElement(Bar, {
|
|
123
|
+
x: invertAxis ? item.id : groupKey,
|
|
124
|
+
y: invertAxis ? groupKey : item.id,
|
|
125
|
+
key: item.id,
|
|
126
|
+
color: item.color
|
|
127
|
+
});
|
|
128
|
+
}
|
|
129
|
+
}, {
|
|
130
|
+
key: "renderTooltip",
|
|
131
|
+
value: function renderTooltip() {
|
|
132
|
+
var _this = this;
|
|
133
|
+
var _this$asProps4 = this.asProps,
|
|
134
|
+
data = _this$asProps4.data,
|
|
135
|
+
groupKey = _this$asProps4.groupKey,
|
|
136
|
+
showTotalInTooltip = _this$asProps4.showTotalInTooltip,
|
|
137
|
+
showTooltip = _this$asProps4.showTooltip,
|
|
138
|
+
invertAxis = _this$asProps4.invertAxis;
|
|
139
|
+
var dataDefinitions = this.state.dataDefinitions;
|
|
140
|
+
if (!showTooltip) {
|
|
141
|
+
return null;
|
|
142
|
+
}
|
|
143
|
+
return /*#__PURE__*/React.createElement(HoverRect.Tooltip, {
|
|
144
|
+
x: invertAxis ? undefined : groupKey,
|
|
145
|
+
y: invertAxis ? groupKey : undefined,
|
|
146
|
+
wMin: 100
|
|
147
|
+
}, function (_ref) {
|
|
148
|
+
var _dataItem$groupKey;
|
|
149
|
+
var xIndex = _ref.xIndex,
|
|
150
|
+
yIndex = _ref.yIndex;
|
|
151
|
+
var index = invertAxis ? yIndex : xIndex;
|
|
152
|
+
var dataItem = data[index];
|
|
153
|
+
var total = _this.totalValue(dataItem);
|
|
154
|
+
return {
|
|
155
|
+
children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HoverRect.Tooltip.Title, null, (_dataItem$groupKey = dataItem[groupKey]) === null || _dataItem$groupKey === void 0 ? void 0 : _dataItem$groupKey.toString()), dataDefinitions.map(function (item) {
|
|
156
|
+
return item.checked && /*#__PURE__*/React.createElement(Flex, {
|
|
157
|
+
justifyContent: "space-between",
|
|
158
|
+
key: item.id
|
|
159
|
+
}, /*#__PURE__*/React.createElement(HoverRect.Tooltip.Dot, {
|
|
160
|
+
mr: 4,
|
|
161
|
+
color: item.color
|
|
162
|
+
}, item.label), /*#__PURE__*/React.createElement(Text, {
|
|
163
|
+
bold: true
|
|
164
|
+
}, _this.tooltipValueFormatter(dataItem[item.id])));
|
|
165
|
+
}), showTotalInTooltip === true && /*#__PURE__*/React.createElement(Flex, {
|
|
166
|
+
mt: 2,
|
|
167
|
+
justifyContent: "space-between"
|
|
168
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
169
|
+
mr: 4
|
|
170
|
+
}, "Total"), /*#__PURE__*/React.createElement(Text, {
|
|
171
|
+
bold: true
|
|
172
|
+
}, total)))
|
|
173
|
+
};
|
|
174
|
+
});
|
|
175
|
+
}
|
|
176
|
+
}]);
|
|
177
|
+
return HistogramChartComponent;
|
|
178
|
+
}(AbstractChart);
|
|
179
|
+
_defineProperty(HistogramChartComponent, "displayName", 'Chart.Histogram');
|
|
180
|
+
export var HistogramChart = createComponent(HistogramChartComponent);
|
|
181
|
+
//# sourceMappingURL=HistogramChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HistogramChart.js","names":["React","createComponent","scaleBand","scaleLinear","scaleTime","Bar","minMax","HoverRect","StackBar","AbstractChart","Box","Flex","Text","HistogramChartComponent","_AbstractChart","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","get","_this$asProps","asProps","xScale","_this$asProps$marginY","marginY","_this$asProps$marginX","marginX","plotWidth","plotHeight","invertAxis","data","groupKey","testItem","range","plotPadding","Date","Number","isNaN","getMilliseconds","domain","map","item","paddingInner","paddingOuter","_this$asProps2","yScale","_this$asProps2$margin","_this$asProps2$margin2","max","isStack","reduce","barSum","Object","values","sum","val","flatValues","_get","_getPrototypeOf","prototype","Math","_toConsumableArray","dataDefinitions","state","length","value","renderChart","_this$asProps3","_this$state","highlightedLine","createElement","x","undefined","y","index","BarComponent","HorizontalBar","commonBarComponentProps","color","transparent","id","checked","_extends","renderTooltip","_this","_this$asProps4","showTotalInTooltip","showTooltip","Tooltip","wMin","_ref","_dataItem$groupKey","xIndex","yIndex","dataItem","total","totalValue","children","Fragment","Title","toString","justifyContent","Dot","mr","label","bold","tooltipValueFormatter","mt","_defineProperty","HistogramChart"],"sources":["../../../../src/component/Chart/HistogramChart.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent from '@semcore/core';\nimport { scaleBand, scaleLinear, ScaleLinear, scaleTime } from 'd3-scale';\n// @ts-ignore\nimport { Bar, minMax, HoverRect, StackBar, BarProps } from '../..';\nimport { AbstractChart } from './AbstractChart';\nimport { HistogramChartData, HistogramChartProps, HistogramChartType } from './HistogramChart.type';\nimport { Box, Flex } from '@semcore/flex-box';\nimport { Text } from '@semcore/typography';\n\nclass HistogramChartComponent extends AbstractChart<HistogramChartData, HistogramChartProps> {\n static displayName = 'Chart.Histogram';\n\n get xScale() {\n const {\n xScale,\n marginY = 30,\n marginX = 30,\n plotWidth,\n plotHeight,\n invertAxis,\n data,\n groupKey,\n } = this.asProps;\n\n if (xScale) {\n return xScale;\n }\n\n const testItem = data[0][groupKey];\n const range = invertAxis\n ? [plotHeight - marginX, this.plotPadding]\n : [marginY, plotWidth - this.plotPadding];\n\n if (testItem instanceof Date && !Number.isNaN(testItem.getMilliseconds())) {\n const domain = minMax(data, groupKey);\n\n return scaleTime(domain, range);\n }\n\n const domain = data.map((item) => item[groupKey]);\n\n return scaleBand(domain, range).paddingInner(0.05).paddingOuter(0.2);\n }\n\n get yScale(): ScaleLinear<any, any> {\n const {\n yScale,\n marginY = 30,\n marginX = 30,\n plotHeight,\n plotWidth,\n invertAxis,\n data,\n } = this.asProps;\n\n let max: number;\n\n if (this.isStack) {\n max = data.reduce((max, item) => {\n const barSum = Object.values(item).reduce<number>((sum, val) => {\n if (val instanceof Date && !Number.isNaN(val.getMilliseconds())) {\n return sum + val.getMilliseconds();\n }\n\n return sum + (val as number);\n }, 0);\n\n if (barSum > max) {\n max = barSum;\n }\n\n return max;\n }, 0);\n } else {\n const flatValues = super.flatValues;\n\n max = Math.max(...flatValues);\n }\n\n return (\n yScale ??\n scaleLinear()\n .range(\n invertAxis\n ? [marginY, plotWidth - this.plotPadding]\n : [plotHeight - marginX, this.plotPadding],\n )\n .domain([0, max])\n );\n }\n\n get isStack(): boolean {\n const { dataDefinitions } = this.state;\n\n return dataDefinitions.length > 1;\n }\n\n renderChart() {\n const { groupKey, invertAxis } = this.asProps;\n const { dataDefinitions, highlightedLine } = this.state;\n\n if (this.isStack) {\n return (\n <StackBar x={invertAxis ? undefined : groupKey} y={invertAxis ? groupKey : undefined}>\n {dataDefinitions.map((item, index) => {\n const BarComponent = invertAxis ? StackBar.HorizontalBar : StackBar.Bar;\n\n const commonBarComponentProps: BarProps = {\n color: item.color,\n transparent: highlightedLine !== -1 && highlightedLine !== index,\n };\n\n if (invertAxis) {\n commonBarComponentProps.x = item.id;\n } else {\n commonBarComponentProps.y = item.id;\n }\n\n return item.checked && <BarComponent key={item.id} {...commonBarComponentProps} />;\n })}\n </StackBar>\n );\n }\n\n const item = dataDefinitions[0];\n\n return (\n <Bar\n x={invertAxis ? item.id : groupKey}\n y={invertAxis ? groupKey : item.id}\n key={item.id}\n color={item.color}\n />\n );\n }\n\n renderTooltip(): React.ReactNode {\n const { data, groupKey, showTotalInTooltip, showTooltip, invertAxis } = this.asProps;\n const { dataDefinitions } = this.state;\n\n if (!showTooltip) {\n return null;\n }\n\n return (\n <HoverRect.Tooltip\n x={invertAxis ? undefined : groupKey}\n y={invertAxis ? groupKey : undefined}\n wMin={100}\n >\n {({ xIndex, yIndex }: any) => {\n const index = invertAxis ? yIndex : xIndex;\n const dataItem = data[index];\n const total = this.totalValue(dataItem);\n\n return {\n children: (\n <>\n <HoverRect.Tooltip.Title>{dataItem[groupKey]?.toString()}</HoverRect.Tooltip.Title>\n\n {dataDefinitions.map((item) => {\n return (\n item.checked && (\n <Flex justifyContent='space-between' key={item.id}>\n <HoverRect.Tooltip.Dot mr={4} color={item.color}>\n {item.label}\n </HoverRect.Tooltip.Dot>\n <Text bold>{this.tooltipValueFormatter(dataItem[item.id])}</Text>\n </Flex>\n )\n );\n })}\n\n {showTotalInTooltip === true && (\n <Flex mt={2} justifyContent='space-between'>\n <Box mr={4}>Total</Box>\n <Text bold>{total}</Text>\n </Flex>\n )}\n </>\n ),\n };\n }}\n </HoverRect.Tooltip>\n );\n }\n}\n\nexport const HistogramChart: HistogramChartType = createComponent(HistogramChartComponent);\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HistogramChart.type.js","names":[],"sources":["../../../../src/component/Chart/HistogramChart.type.ts"],"sourcesContent":["import { Intergalactic } from '@semcore/core';\nimport { Flex } from '@semcore/flex-box';\nimport { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale';\nimport { BaseChartProps } from './AbstractChart.type';\n\nexport type HistogramChartData = Array<Record<string, number | Date>>;\n\nexport type HistogramChartProps = BaseChartProps<HistogramChartData> & {\n groupKey: string;\n xScale?: ScaleBand<any> | ScaleTime<any, any>;\n yScale?: ScaleLinear<any, any>;\n};\n\nexport type HistogramChartType = Intergalactic.Component<typeof Flex, HistogramChartProps>;\n"],"mappings":""}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
+
import _get from "@babel/runtime/helpers/get";
|
|
5
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
6
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
7
|
+
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
8
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
9
|
+
import React from 'react';
|
|
10
|
+
import createComponent from '@semcore/core';
|
|
11
|
+
import { scaleLinear, scaleTime } from 'd3-scale';
|
|
12
|
+
// @ts-ignore
|
|
13
|
+
import { Line, minMax, HoverLine } from '../..';
|
|
14
|
+
import { AbstractChart } from './AbstractChart';
|
|
15
|
+
import { Box, Flex } from '@semcore/flex-box';
|
|
16
|
+
import { Text } from '@semcore/typography';
|
|
17
|
+
var LineChartComponent = /*#__PURE__*/function (_AbstractChart) {
|
|
18
|
+
_inherits(LineChartComponent, _AbstractChart);
|
|
19
|
+
var _super = _createSuper(LineChartComponent);
|
|
20
|
+
function LineChartComponent() {
|
|
21
|
+
_classCallCheck(this, LineChartComponent);
|
|
22
|
+
return _super.apply(this, arguments);
|
|
23
|
+
}
|
|
24
|
+
_createClass(LineChartComponent, [{
|
|
25
|
+
key: "xScale",
|
|
26
|
+
get: function get() {
|
|
27
|
+
var _this$asProps = this.asProps,
|
|
28
|
+
xScale = _this$asProps.xScale,
|
|
29
|
+
_this$asProps$marginY = _this$asProps.marginY,
|
|
30
|
+
marginY = _this$asProps$marginY === void 0 ? 30 : _this$asProps$marginY,
|
|
31
|
+
plotWidth = _this$asProps.plotWidth,
|
|
32
|
+
data = _this$asProps.data,
|
|
33
|
+
groupKey = _this$asProps.groupKey;
|
|
34
|
+
if (xScale) {
|
|
35
|
+
return xScale;
|
|
36
|
+
}
|
|
37
|
+
var testItem = data[0][groupKey];
|
|
38
|
+
var range = [marginY, plotWidth - this.plotPadding];
|
|
39
|
+
var domain = minMax(data, groupKey);
|
|
40
|
+
if (testItem instanceof Date && !Number.isNaN(testItem.getMilliseconds())) {
|
|
41
|
+
return scaleTime(domain, range);
|
|
42
|
+
}
|
|
43
|
+
return scaleLinear(domain, range);
|
|
44
|
+
}
|
|
45
|
+
}, {
|
|
46
|
+
key: "yScale",
|
|
47
|
+
get: function get() {
|
|
48
|
+
var _this$asProps2 = this.asProps,
|
|
49
|
+
yScale = _this$asProps2.yScale,
|
|
50
|
+
_this$asProps2$margin = _this$asProps2.marginX,
|
|
51
|
+
marginX = _this$asProps2$margin === void 0 ? 30 : _this$asProps2$margin,
|
|
52
|
+
plotHeight = _this$asProps2.plotHeight;
|
|
53
|
+
if (yScale) {
|
|
54
|
+
return yScale;
|
|
55
|
+
}
|
|
56
|
+
var flatValues = _get(_getPrototypeOf(LineChartComponent.prototype), "flatValues", this);
|
|
57
|
+
var max = Math.max.apply(Math, _toConsumableArray(flatValues));
|
|
58
|
+
var min = Math.min.apply(Math, _toConsumableArray(flatValues));
|
|
59
|
+
return scaleLinear().range([plotHeight - marginX, this.plotPadding]).domain([min, max]);
|
|
60
|
+
}
|
|
61
|
+
}, {
|
|
62
|
+
key: "renderChart",
|
|
63
|
+
value: function renderChart() {
|
|
64
|
+
var _this$asProps3 = this.asProps,
|
|
65
|
+
groupKey = _this$asProps3.groupKey,
|
|
66
|
+
curve = _this$asProps3.curve,
|
|
67
|
+
showDots = _this$asProps3.showDots,
|
|
68
|
+
area = _this$asProps3.area,
|
|
69
|
+
areaCurve = _this$asProps3.areaCurve;
|
|
70
|
+
var _this$state = this.state,
|
|
71
|
+
dataDefinitions = _this$state.dataDefinitions,
|
|
72
|
+
highlightedLine = _this$state.highlightedLine;
|
|
73
|
+
return dataDefinitions.map(function (item, index) {
|
|
74
|
+
return item.checked && /*#__PURE__*/React.createElement(Line, {
|
|
75
|
+
x: groupKey.toString(),
|
|
76
|
+
y: item.id,
|
|
77
|
+
key: item.id,
|
|
78
|
+
color: item.color,
|
|
79
|
+
transparent: highlightedLine !== -1 && highlightedLine !== index,
|
|
80
|
+
curve: curve
|
|
81
|
+
}, showDots && /*#__PURE__*/React.createElement(Line.Dots, {
|
|
82
|
+
display: true
|
|
83
|
+
}), (area === null || area === void 0 ? void 0 : area[item.id]) && /*#__PURE__*/React.createElement(Line.Area, {
|
|
84
|
+
area: area[item.id],
|
|
85
|
+
y0: 'y0',
|
|
86
|
+
y1: 'y1',
|
|
87
|
+
curve: areaCurve
|
|
88
|
+
}));
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
}, {
|
|
92
|
+
key: "renderTooltip",
|
|
93
|
+
value: function renderTooltip() {
|
|
94
|
+
var _this = this;
|
|
95
|
+
var _this$asProps4 = this.asProps,
|
|
96
|
+
data = _this$asProps4.data,
|
|
97
|
+
groupKey = _this$asProps4.groupKey,
|
|
98
|
+
showTotalInTooltip = _this$asProps4.showTotalInTooltip,
|
|
99
|
+
showTooltip = _this$asProps4.showTooltip;
|
|
100
|
+
var dataDefinitions = this.state.dataDefinitions;
|
|
101
|
+
if (!showTooltip) {
|
|
102
|
+
return null;
|
|
103
|
+
}
|
|
104
|
+
return /*#__PURE__*/React.createElement(HoverLine.Tooltip, {
|
|
105
|
+
x: groupKey,
|
|
106
|
+
wMin: 100
|
|
107
|
+
}, function (_ref) {
|
|
108
|
+
var _dataItem$groupKey;
|
|
109
|
+
var xIndex = _ref.xIndex;
|
|
110
|
+
var dataItem = data[xIndex];
|
|
111
|
+
var total = _this.totalValue(dataItem);
|
|
112
|
+
return {
|
|
113
|
+
children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HoverLine.Tooltip.Title, null, (_dataItem$groupKey = dataItem[groupKey]) === null || _dataItem$groupKey === void 0 ? void 0 : _dataItem$groupKey.toString()), dataDefinitions.map(function (item) {
|
|
114
|
+
return item.checked && /*#__PURE__*/React.createElement(Flex, {
|
|
115
|
+
justifyContent: "space-between",
|
|
116
|
+
key: item.id
|
|
117
|
+
}, /*#__PURE__*/React.createElement(HoverLine.Tooltip.Dot, {
|
|
118
|
+
mr: 4,
|
|
119
|
+
color: item.color
|
|
120
|
+
}, item.label), /*#__PURE__*/React.createElement(Text, {
|
|
121
|
+
bold: true
|
|
122
|
+
}, _this.tooltipValueFormatter(dataItem[item.id])));
|
|
123
|
+
}), showTotalInTooltip === true && /*#__PURE__*/React.createElement(Flex, {
|
|
124
|
+
mt: 2,
|
|
125
|
+
justifyContent: "space-between"
|
|
126
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
127
|
+
mr: 4
|
|
128
|
+
}, "Total"), /*#__PURE__*/React.createElement(Text, {
|
|
129
|
+
bold: true
|
|
130
|
+
}, total)))
|
|
131
|
+
};
|
|
132
|
+
});
|
|
133
|
+
}
|
|
134
|
+
}]);
|
|
135
|
+
return LineChartComponent;
|
|
136
|
+
}(AbstractChart);
|
|
137
|
+
_defineProperty(LineChartComponent, "displayName", 'Chart.Line');
|
|
138
|
+
export var LineChart = createComponent(LineChartComponent);
|
|
139
|
+
//# sourceMappingURL=LineChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LineChart.js","names":["React","createComponent","scaleLinear","scaleTime","Line","minMax","HoverLine","AbstractChart","Box","Flex","Text","LineChartComponent","_AbstractChart","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","get","_this$asProps","asProps","xScale","_this$asProps$marginY","marginY","plotWidth","data","groupKey","testItem","range","plotPadding","domain","Date","Number","isNaN","getMilliseconds","_this$asProps2","yScale","_this$asProps2$margin","marginX","plotHeight","flatValues","_get","_getPrototypeOf","prototype","max","Math","_toConsumableArray","min","value","renderChart","_this$asProps3","curve","showDots","area","areaCurve","_this$state","state","dataDefinitions","highlightedLine","map","item","index","checked","createElement","x","toString","y","id","color","transparent","Dots","display","Area","y0","y1","renderTooltip","_this","_this$asProps4","showTotalInTooltip","showTooltip","Tooltip","wMin","_ref","_dataItem$groupKey","xIndex","dataItem","total","totalValue","children","Fragment","Title","justifyContent","Dot","mr","label","bold","tooltipValueFormatter","mt","_defineProperty","LineChart"],"sources":["../../../../src/component/Chart/LineChart.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent from '@semcore/core';\nimport { LineChartData, LineChartProps, LineChartType } from './LineChart.type';\nimport { ScaleLinear, scaleLinear, scaleTime } from 'd3-scale';\n// @ts-ignore\nimport { Line, minMax, HoverLine } from '../..';\nimport { AbstractChart } from './AbstractChart';\nimport { Box, Flex } from '@semcore/flex-box';\nimport { Text } from '@semcore/typography';\n\nclass LineChartComponent extends AbstractChart<LineChartData, LineChartProps> {\n static displayName = 'Chart.Line';\n\n protected get xScale() {\n const { xScale, marginY = 30, plotWidth, data, groupKey } = this.asProps;\n\n if (xScale) {\n return xScale;\n }\n\n const testItem = data[0][groupKey];\n const range = [marginY, plotWidth - this.plotPadding];\n const domain = minMax(data, groupKey);\n\n if (testItem instanceof Date && !Number.isNaN(testItem.getMilliseconds())) {\n return scaleTime(domain, range);\n }\n\n return scaleLinear(domain, range);\n }\n\n protected get yScale(): ScaleLinear<any, any> {\n const { yScale, marginX = 30, plotHeight } = this.asProps;\n\n if (yScale) {\n return yScale;\n }\n\n const flatValues = super.flatValues;\n\n const max = Math.max(...flatValues);\n const min = Math.min(...flatValues);\n\n return scaleLinear()\n .range([plotHeight - marginX, this.plotPadding])\n .domain([min, max]);\n }\n\n protected renderChart() {\n const { groupKey, curve, showDots, area, areaCurve } = this.asProps;\n const { dataDefinitions, highlightedLine } = this.state;\n\n return dataDefinitions.map((item, index) => {\n return (\n item.checked && (\n <Line\n x={groupKey.toString()}\n y={item.id}\n key={item.id}\n color={item.color}\n transparent={highlightedLine !== -1 && highlightedLine !== index}\n curve={curve}\n >\n {showDots && <Line.Dots display />}\n {area?.[item.id] && (\n <Line.Area area={area[item.id]} y0={'y0'} y1={'y1'} curve={areaCurve} />\n )}\n </Line>\n )\n );\n });\n }\n\n protected renderTooltip() {\n const { data, groupKey, showTotalInTooltip, showTooltip } = this.asProps;\n const { dataDefinitions } = this.state;\n\n if (!showTooltip) {\n return null;\n }\n\n return (\n <HoverLine.Tooltip x={groupKey} wMin={100}>\n {({ xIndex }: any) => {\n const dataItem = data[xIndex];\n const total = this.totalValue(dataItem);\n\n return {\n children: (\n <>\n <HoverLine.Tooltip.Title>{dataItem[groupKey]?.toString()}</HoverLine.Tooltip.Title>\n\n {dataDefinitions.map((item) => {\n return (\n item.checked && (\n <Flex justifyContent='space-between' key={item.id}>\n <HoverLine.Tooltip.Dot mr={4} color={item.color}>\n {item.label}\n </HoverLine.Tooltip.Dot>\n <Text bold>{this.tooltipValueFormatter(dataItem[item.id])}</Text>\n </Flex>\n )\n );\n })}\n\n {showTotalInTooltip === true && (\n <Flex mt={2} justifyContent='space-between'>\n <Box mr={4}>Total</Box>\n <Text bold>{total}</Text>\n </Flex>\n )}\n </>\n ),\n };\n }}\n </HoverLine.Tooltip>\n );\n }\n}\n\nexport const LineChart: LineChartType = createComponent(LineChartComponent);\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LineChart.type.js","names":[],"sources":["../../../../src/component/Chart/LineChart.type.ts"],"sourcesContent":["import { Intergalactic } from '@semcore/core';\nimport { Flex } from '@semcore/flex-box';\nimport { interpolateValue } from '../../utils';\nimport { ScaleLinear, ScaleTime } from 'd3-scale';\nimport { CurveFactory } from 'd3-shape';\nimport { BaseChartProps } from './AbstractChart.type';\nimport { LegendItemKey } from '../ChartLegend/LegendItem/LegendItem.type';\n\ntype AreaItem = {\n x: number;\n y0: number;\n y1: number;\n};\n\nexport type LineChartData = Array<Record<string, string | number | typeof interpolateValue | Date>>;\n\nexport type LineChartProps = BaseChartProps<LineChartData> & {\n groupKey: string;\n area?: Record<LegendItemKey, AreaItem[]>;\n xScale?: ScaleLinear<any, any> | ScaleTime<any, any>;\n yScale?: ScaleLinear<any, any>;\n showDots?: boolean;\n curve?: CurveFactory;\n areaCurve?: CurveFactory;\n};\n\nexport type LineChartType = Intergalactic.Component<typeof Flex, LineChartProps>;\n"],"mappings":""}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
+
import _get from "@babel/runtime/helpers/get";
|
|
5
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
6
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
7
|
+
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
8
|
+
import React from 'react';
|
|
9
|
+
import createComponent from '@semcore/core';
|
|
10
|
+
import { scaleLinear } from 'd3-scale';
|
|
11
|
+
import { AbstractChart } from './AbstractChart';
|
|
12
|
+
// @ts-ignore
|
|
13
|
+
import { Radar } from '../..';
|
|
14
|
+
var RadarChartComponent = /*#__PURE__*/function (_AbstractChart) {
|
|
15
|
+
_inherits(RadarChartComponent, _AbstractChart);
|
|
16
|
+
var _super = _createSuper(RadarChartComponent);
|
|
17
|
+
function RadarChartComponent() {
|
|
18
|
+
_classCallCheck(this, RadarChartComponent);
|
|
19
|
+
return _super.apply(this, arguments);
|
|
20
|
+
}
|
|
21
|
+
_createClass(RadarChartComponent, [{
|
|
22
|
+
key: "renderChart",
|
|
23
|
+
value: function renderChart() {
|
|
24
|
+
var _this$asProps = this.asProps,
|
|
25
|
+
groupKey = _this$asProps.groupKey,
|
|
26
|
+
showDots = _this$asProps.showDots,
|
|
27
|
+
circle = _this$asProps.circle;
|
|
28
|
+
var _this$state = this.state,
|
|
29
|
+
dataDefinitions = _this$state.dataDefinitions,
|
|
30
|
+
highlightedLine = _this$state.highlightedLine;
|
|
31
|
+
return /*#__PURE__*/React.createElement(Radar, {
|
|
32
|
+
scale: this.xScale,
|
|
33
|
+
type: circle ? 'circle' : undefined
|
|
34
|
+
}, /*#__PURE__*/React.createElement(Radar.Axis, {
|
|
35
|
+
dataKey: groupKey
|
|
36
|
+
}, /*#__PURE__*/React.createElement(Radar.Axis.Ticks, null), /*#__PURE__*/React.createElement(Radar.Axis.Labels, null)), dataDefinitions.map(function (item) {
|
|
37
|
+
return item.checked && /*#__PURE__*/React.createElement(Radar.Polygon, {
|
|
38
|
+
dataKey: item.id,
|
|
39
|
+
key: item.id,
|
|
40
|
+
color: item.color
|
|
41
|
+
}, /*#__PURE__*/React.createElement(Radar.Polygon.Line, null), showDots && /*#__PURE__*/React.createElement(Radar.Polygon.Dots, null));
|
|
42
|
+
}), this.renderRadarTooltip());
|
|
43
|
+
}
|
|
44
|
+
}, {
|
|
45
|
+
key: "renderRadarTooltip",
|
|
46
|
+
value: function renderRadarTooltip() {
|
|
47
|
+
var _this = this;
|
|
48
|
+
var _this$asProps2 = this.asProps,
|
|
49
|
+
data = _this$asProps2.data,
|
|
50
|
+
groupKey = _this$asProps2.groupKey,
|
|
51
|
+
showTooltip = _this$asProps2.showTooltip;
|
|
52
|
+
var dataDefinitions = this.state.dataDefinitions;
|
|
53
|
+
if (!showTooltip) {
|
|
54
|
+
return null;
|
|
55
|
+
}
|
|
56
|
+
return /*#__PURE__*/React.createElement(Radar.Tooltip, {
|
|
57
|
+
wMin: 100
|
|
58
|
+
}, function (_ref) {
|
|
59
|
+
var _data$groupKey;
|
|
60
|
+
var index = _ref.index;
|
|
61
|
+
return {
|
|
62
|
+
children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Radar.Tooltip.Title, null, (_data$groupKey = data[groupKey]) === null || _data$groupKey === void 0 ? void 0 : _data$groupKey[index]), dataDefinitions.map(function (item) {
|
|
63
|
+
var _data$item$id;
|
|
64
|
+
var value = (_data$item$id = data[item.id]) === null || _data$item$id === void 0 ? void 0 : _data$item$id[index];
|
|
65
|
+
return item.checked && /*#__PURE__*/React.createElement(Radar.Tooltip.Dot, {
|
|
66
|
+
color: item.color,
|
|
67
|
+
key: item.id
|
|
68
|
+
}, _this.tooltipValueFormatter(value));
|
|
69
|
+
}))
|
|
70
|
+
};
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// By default, tooltip will render in Plot component.
|
|
75
|
+
// In RadarChart, we need to render it in Radar component, so we use renderRadarTooltip method
|
|
76
|
+
}, {
|
|
77
|
+
key: "renderTooltip",
|
|
78
|
+
value: function renderTooltip() {
|
|
79
|
+
return null;
|
|
80
|
+
}
|
|
81
|
+
}, {
|
|
82
|
+
key: "dataKeys",
|
|
83
|
+
get: function get() {
|
|
84
|
+
var _this$props = this.props,
|
|
85
|
+
data = _this$props.data,
|
|
86
|
+
groupKey = _this$props.groupKey;
|
|
87
|
+
var legendKeys = Object.keys(data).filter(function (key) {
|
|
88
|
+
return key !== groupKey;
|
|
89
|
+
});
|
|
90
|
+
return legendKeys;
|
|
91
|
+
}
|
|
92
|
+
}, {
|
|
93
|
+
key: "xScale",
|
|
94
|
+
get: function get() {
|
|
95
|
+
var _this$asProps$scale;
|
|
96
|
+
return (_this$asProps$scale = this.asProps.scale) !== null && _this$asProps$scale !== void 0 ? _this$asProps$scale : scaleLinear().domain(this.domain);
|
|
97
|
+
}
|
|
98
|
+
}, {
|
|
99
|
+
key: "yScale",
|
|
100
|
+
get: function get() {
|
|
101
|
+
var _this$asProps$scale2;
|
|
102
|
+
return (_this$asProps$scale2 = this.asProps.scale) !== null && _this$asProps$scale2 !== void 0 ? _this$asProps$scale2 : scaleLinear().domain(this.domain);
|
|
103
|
+
}
|
|
104
|
+
}, {
|
|
105
|
+
key: "domain",
|
|
106
|
+
get: function get() {
|
|
107
|
+
return [Math.min.apply(Math, _toConsumableArray(_get(_getPrototypeOf(RadarChartComponent.prototype), "flatValues", this))), Math.max.apply(Math, _toConsumableArray(_get(_getPrototypeOf(RadarChartComponent.prototype), "flatValues", this)))];
|
|
108
|
+
}
|
|
109
|
+
}]);
|
|
110
|
+
return RadarChartComponent;
|
|
111
|
+
}(AbstractChart);
|
|
112
|
+
export var RadarChart = createComponent(RadarChartComponent);
|
|
113
|
+
//# sourceMappingURL=RadarChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadarChart.js","names":["React","createComponent","scaleLinear","AbstractChart","Radar","RadarChartComponent","_AbstractChart","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","value","renderChart","_this$asProps","asProps","groupKey","showDots","circle","_this$state","state","dataDefinitions","highlightedLine","createElement","scale","xScale","type","undefined","Axis","dataKey","Ticks","Labels","map","item","checked","Polygon","id","color","Line","Dots","renderRadarTooltip","_this","_this$asProps2","data","showTooltip","Tooltip","wMin","_ref","_data$groupKey","index","children","Fragment","Title","_data$item$id","Dot","tooltipValueFormatter","renderTooltip","get","_this$props","props","legendKeys","Object","keys","filter","_this$asProps$scale","domain","_this$asProps$scale2","Math","min","_toConsumableArray","_get","_getPrototypeOf","prototype","max","RadarChart"],"sources":["../../../../src/component/Chart/RadarChart.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent from '@semcore/core';\nimport { scaleLinear, ScaleLinear } from 'd3-scale';\nimport { AbstractChart } from './AbstractChart';\nimport { RadarChartData, RadarChartProps, RadarChartType } from './RadarChart.type';\n// @ts-ignore\nimport { Radar } from '../..';\n\nclass RadarChartComponent extends AbstractChart<RadarChartData, RadarChartProps> {\n protected renderChart(): React.ReactNode {\n const { groupKey, showDots, circle } = this.asProps;\n const { dataDefinitions, highlightedLine } = this.state;\n\n return (\n <Radar scale={this.xScale} type={circle ? 'circle' : undefined}>\n <Radar.Axis dataKey={groupKey}>\n <Radar.Axis.Ticks />\n <Radar.Axis.Labels />\n </Radar.Axis>\n\n {dataDefinitions.map((item) => {\n return (\n item.checked && (\n <Radar.Polygon dataKey={item.id} key={item.id} color={item.color}>\n <Radar.Polygon.Line />\n {showDots && <Radar.Polygon.Dots />}\n </Radar.Polygon>\n )\n );\n })}\n {this.renderRadarTooltip()}\n </Radar>\n );\n }\n\n protected renderRadarTooltip(): React.ReactNode {\n const { data, groupKey, showTooltip } = this.asProps;\n const { dataDefinitions } = this.state;\n\n if (!showTooltip) {\n return null;\n }\n\n return (\n <Radar.Tooltip wMin={100}>\n {({ index }: any) => {\n return {\n children: (\n <>\n <Radar.Tooltip.Title>{data[groupKey]?.[index]}</Radar.Tooltip.Title>\n\n {dataDefinitions.map((item) => {\n const value = data[item.id]?.[index];\n\n return (\n item.checked && (\n <Radar.Tooltip.Dot color={item.color} key={item.id}>\n {this.tooltipValueFormatter(value)}\n </Radar.Tooltip.Dot>\n )\n );\n })}\n </>\n ),\n };\n }}\n </Radar.Tooltip>\n );\n }\n\n // By default, tooltip will render in Plot component.\n // In RadarChart, we need to render it in Radar component, so we use renderRadarTooltip method\n protected renderTooltip(): React.ReactNode {\n return null;\n }\n\n protected get dataKeys(): string[] {\n const { data, groupKey } = this.props;\n\n const legendKeys: string[] = Object.keys(data).filter((key) => key !== groupKey);\n\n return legendKeys;\n }\n\n protected get xScale(): ScaleLinear<any, any> {\n return this.asProps.scale ?? scaleLinear().domain(this.domain);\n }\n\n protected get yScale(): ScaleLinear<any, any> {\n return this.asProps.scale ?? scaleLinear().domain(this.domain);\n }\n\n private get domain(): [number, number] {\n return [Math.min(...super.flatValues), Math.max(...super.flatValues)];\n }\n}\n\nexport const RadarChart: RadarChartType = createComponent(RadarChartComponent);\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadarChart.type.js","names":[],"sources":["../../../../src/component/Chart/RadarChart.type.ts"],"sourcesContent":["import { Intergalactic } from '@semcore/core';\nimport { Flex } from '@semcore/flex-box';\nimport { ScaleLinear } from 'd3-scale';\nimport { BaseChartProps } from './AbstractChart.type';\n\nexport type RadarChartData = Record<string, string[] | number[]>;\n\nexport type RadarChartProps = BaseChartProps<RadarChartData> & {\n groupKey: string;\n scale?: ScaleLinear<any, any>;\n xScale?: never;\n yScale?: never;\n showDots?: boolean;\n circle?: boolean;\n};\n\nexport type RadarChartType = Intergalactic.Component<typeof Flex, RadarChartProps>;\n"],"mappings":""}
|