@semcore/d3-chart 1.5.6 → 1.6.3
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 +22 -0
- package/lib/cjs/Area.js +6 -6
- package/lib/cjs/Axis.js +12 -12
- package/lib/cjs/Bar.js +5 -5
- package/lib/cjs/Bubble.js +276 -0
- package/lib/cjs/Bubble.js.map +1 -0
- package/lib/cjs/Donut.js +5 -5
- package/lib/cjs/Dots.js +5 -5
- package/lib/cjs/GroupBar.js +6 -6
- package/lib/cjs/HorizontalBar.js +5 -5
- package/lib/cjs/Hover.js +3 -3
- package/lib/cjs/Line.js +5 -5
- package/lib/cjs/ScatterPlot.js +224 -0
- package/lib/cjs/ScatterPlot.js.map +1 -0
- package/lib/cjs/StackBar.js +6 -6
- package/lib/cjs/StackedArea.js +7 -7
- package/lib/cjs/Tooltip.js +14 -10
- package/lib/cjs/Tooltip.js.map +1 -1
- package/lib/cjs/Venn.js +4 -4
- package/lib/cjs/index.js +16 -0
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/bubble.shadow.css +45 -0
- package/lib/cjs/style/scatterplot.shadow.css +27 -0
- package/lib/cjs/style/tooltip.shadow.css +2 -2
- package/lib/es6/Area.js +6 -6
- package/lib/es6/Axis.js +12 -12
- package/lib/es6/Bar.js +5 -5
- package/lib/es6/Bubble.js +259 -0
- package/lib/es6/Bubble.js.map +1 -0
- package/lib/es6/Donut.js +5 -5
- package/lib/es6/Dots.js +5 -5
- package/lib/es6/GroupBar.js +6 -6
- package/lib/es6/HorizontalBar.js +5 -5
- package/lib/es6/Hover.js +3 -3
- package/lib/es6/Line.js +5 -5
- package/lib/es6/ScatterPlot.js +209 -0
- package/lib/es6/ScatterPlot.js.map +1 -0
- package/lib/es6/StackBar.js +6 -6
- package/lib/es6/StackedArea.js +7 -7
- package/lib/es6/Tooltip.js +14 -10
- package/lib/es6/Tooltip.js.map +1 -1
- package/lib/es6/Venn.js +4 -4
- package/lib/es6/index.js +2 -0
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/bubble.shadow.css +45 -0
- package/lib/es6/style/scatterplot.shadow.css +27 -0
- package/lib/es6/style/tooltip.shadow.css +2 -2
- package/lib/types/Bubble.d.ts +27 -0
- package/lib/types/ScatterPlot.d.ts +27 -0
- package/lib/types/index.d.ts +6 -0
- package/package.json +1 -1
- package/src/Bubble.js +189 -0
- package/src/ScatterPlot.js +130 -0
- package/src/Tooltip.js +8 -2
- package/src/index.js +2 -0
- package/src/style/bubble.shadow.css +45 -0
- package/src/style/scatterplot.shadow.css +27 -0
- package/src/style/tooltip.shadow.css +2 -2
- package/src/types/Bubble.d.ts +27 -0
- package/src/types/ScatterPlot.d.ts +27 -0
- package/src/types/index.d.ts +6 -0
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
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 _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
6
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
7
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
8
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
9
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
10
|
+
import { sstyled as _sstyled } from "@semcore/core";
|
|
11
|
+
|
|
12
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
13
|
+
|
|
14
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
15
|
+
|
|
16
|
+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
17
|
+
|
|
18
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
19
|
+
|
|
20
|
+
import React from 'react';
|
|
21
|
+
import { Component, sstyled } from '@semcore/core';
|
|
22
|
+
import canUseDOM from '@semcore/utils/lib/canUseDOM';
|
|
23
|
+
import { CONSTANT } from './utils';
|
|
24
|
+
import createElement from './createElement';
|
|
25
|
+
import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
|
|
26
|
+
import { transition } from 'd3-transition';
|
|
27
|
+
|
|
28
|
+
/*__reshadow-styles__:"./style/bubble.shadow.css"*/
|
|
29
|
+
var style = (
|
|
30
|
+
/*__reshadow_css_start__*/
|
|
31
|
+
_sstyled.insert(
|
|
32
|
+
/*__inner_css_start__*/
|
|
33
|
+
".___SBubble_z23ud_gg_{fill:#2bb3ff;stroke:#fff;stroke-width:2px;transition-property:cx,cy;transition-duration:var(--duration_1pe3cbw);transition-timing-function:ease-in-out;opacity:.5}.___SBubble_z23ud_gg_:hover{opacity:.8}.___SBubble_z23ud_gg_.__color_z23ud_gg_{fill:var(--color_1pe3cbw)}.___SCenter_z23ud_gg_{text-anchor:middle;font-size:11px;stroke:#2bb3ff}.___SCenter_z23ud_gg_.__color_z23ud_gg_{stroke:var(--color_1pe3cbw)}.___SLabel_z23ud_gg_{fill:#2bb3ff}.___SLabel_z23ud_gg_._position_right_z23ud_gg_{text-anchor:end}.___SLabel_z23ud_gg_._position_left_z23ud_gg_{text-anchor:start}.___SLabel_z23ud_gg_.__color_z23ud_gg_{fill:var(--color_1pe3cbw)}"
|
|
34
|
+
/*__inner_css_end__*/
|
|
35
|
+
, "1pe3cbw_gg_")
|
|
36
|
+
/*__reshadow_css_end__*/
|
|
37
|
+
, {
|
|
38
|
+
"__SBubble": "___SBubble_z23ud_gg_",
|
|
39
|
+
"--duration": "--duration_1pe3cbw",
|
|
40
|
+
"_color": "__color_z23ud_gg_",
|
|
41
|
+
"--color": "--color_1pe3cbw",
|
|
42
|
+
"__SCenter": "___SCenter_z23ud_gg_",
|
|
43
|
+
"__SLabel": "___SLabel_z23ud_gg_",
|
|
44
|
+
"_position_right": "_position_right_z23ud_gg_",
|
|
45
|
+
"_position_left": "_position_left_z23ud_gg_"
|
|
46
|
+
});
|
|
47
|
+
import ClipPath from './ClipPath';
|
|
48
|
+
import { scaleSqrt } from 'd3-scale';
|
|
49
|
+
|
|
50
|
+
var memoize = function memoize(func) {
|
|
51
|
+
var results = {};
|
|
52
|
+
return function (argsKey) {
|
|
53
|
+
if (!results[argsKey]) {
|
|
54
|
+
results[argsKey] = func(argsKey);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
return results[argsKey];
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
var measureText = memoize(function (text) {
|
|
62
|
+
var span = document.createElement('span');
|
|
63
|
+
span.append(document.createTextNode(text));
|
|
64
|
+
span.style.display = 'inline-block';
|
|
65
|
+
document.body.append(span);
|
|
66
|
+
var textLength = span.offsetWidth;
|
|
67
|
+
span.remove();
|
|
68
|
+
return textLength;
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
var BubbleRoot = /*#__PURE__*/function (_Component) {
|
|
72
|
+
_inherits(BubbleRoot, _Component);
|
|
73
|
+
|
|
74
|
+
var _super = _createSuper(BubbleRoot);
|
|
75
|
+
|
|
76
|
+
function BubbleRoot() {
|
|
77
|
+
var _this;
|
|
78
|
+
|
|
79
|
+
_classCallCheck(this, BubbleRoot);
|
|
80
|
+
|
|
81
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
82
|
+
args[_key] = arguments[_key];
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
86
|
+
|
|
87
|
+
_defineProperty(_assertThisInitialized(_this), "virtualElement", canUseDOM() ? document.createElement('div') : {});
|
|
88
|
+
|
|
89
|
+
_defineProperty(_assertThisInitialized(_this), "bindHandlerTooltip", function (visible, props) {
|
|
90
|
+
return function (_ref2) {
|
|
91
|
+
var x = _ref2.clientX,
|
|
92
|
+
y = _ref2.clientY;
|
|
93
|
+
var eventEmitter = _this.asProps.eventEmitter;
|
|
94
|
+
_this.virtualElement.getBoundingClientRect = _this.generateGetBoundingClientRect(x, y);
|
|
95
|
+
_this.virtualElement[CONSTANT.VIRTUAL_ELEMENT] = true;
|
|
96
|
+
eventEmitter.emit('onTooltipVisible', visible, props, _this.virtualElement);
|
|
97
|
+
};
|
|
98
|
+
});
|
|
99
|
+
|
|
100
|
+
return _this;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
_createClass(BubbleRoot, [{
|
|
104
|
+
key: "generateGetBoundingClientRect",
|
|
105
|
+
value: function generateGetBoundingClientRect() {
|
|
106
|
+
var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
107
|
+
var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
108
|
+
return function () {
|
|
109
|
+
return {
|
|
110
|
+
width: 0,
|
|
111
|
+
height: 0,
|
|
112
|
+
top: y,
|
|
113
|
+
right: x,
|
|
114
|
+
bottom: y,
|
|
115
|
+
left: x
|
|
116
|
+
};
|
|
117
|
+
};
|
|
118
|
+
}
|
|
119
|
+
}, {
|
|
120
|
+
key: "animationCircle",
|
|
121
|
+
value: function animationCircle() {
|
|
122
|
+
var _this$asProps = this.asProps,
|
|
123
|
+
duration = _this$asProps.duration,
|
|
124
|
+
uid = _this$asProps.uid,
|
|
125
|
+
data = _this$asProps.data,
|
|
126
|
+
value = _this$asProps.value;
|
|
127
|
+
var z = scaleSqrt().domain([0, Math.max.apply(Math, _toConsumableArray(data.map(function (el) {
|
|
128
|
+
return el[value];
|
|
129
|
+
})))]).range([5.5, 50.5]);
|
|
130
|
+
var selectRect = transition().selection().selectAll("[id^=".concat(uid).concat(uid, "]")).attr('r', 0);
|
|
131
|
+
var selectRectNode = selectRect.node();
|
|
132
|
+
|
|
133
|
+
if (duration > 0 && selectRectNode) {
|
|
134
|
+
selectRect.transition().duration(duration).attr('r', function (_, ind) {
|
|
135
|
+
return z(data[ind][value]);
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}, {
|
|
140
|
+
key: "componentDidUpdate",
|
|
141
|
+
value: function componentDidUpdate() {
|
|
142
|
+
this.animationCircle();
|
|
143
|
+
}
|
|
144
|
+
}, {
|
|
145
|
+
key: "componentDidMount",
|
|
146
|
+
value: function componentDidMount() {
|
|
147
|
+
this.animationCircle();
|
|
148
|
+
}
|
|
149
|
+
}, {
|
|
150
|
+
key: "renderCircle",
|
|
151
|
+
value: function renderCircle(d, i) {
|
|
152
|
+
var _ref, _d$color;
|
|
153
|
+
|
|
154
|
+
var _this$asProps2 = this.asProps,
|
|
155
|
+
color = _this$asProps2.color,
|
|
156
|
+
scale = _this$asProps2.scale,
|
|
157
|
+
x = _this$asProps2.x,
|
|
158
|
+
y = _this$asProps2.y,
|
|
159
|
+
offset = _this$asProps2.offset,
|
|
160
|
+
styles = _this$asProps2.styles,
|
|
161
|
+
uid = _this$asProps2.uid,
|
|
162
|
+
duration = _this$asProps2.duration,
|
|
163
|
+
value = _this$asProps2.value,
|
|
164
|
+
label = _this$asProps2.label,
|
|
165
|
+
markedCross = _this$asProps2.markedCross,
|
|
166
|
+
size = _this$asProps2.size,
|
|
167
|
+
data = _this$asProps2.data;
|
|
168
|
+
|
|
169
|
+
var _scale = _slicedToArray(scale, 2),
|
|
170
|
+
xScale = _scale[0],
|
|
171
|
+
yScale = _scale[1];
|
|
172
|
+
|
|
173
|
+
var SBubble = this.Element;
|
|
174
|
+
var SCenter = 'text';
|
|
175
|
+
var SLabel = 'text';
|
|
176
|
+
var z = scaleSqrt().domain([0, Math.max.apply(Math, _toConsumableArray(data.map(function (el) {
|
|
177
|
+
return el[value];
|
|
178
|
+
})))]).range([5.5, 50.5]);
|
|
179
|
+
var margin = Math.min(xScale.range()[0], xScale.range()[1]);
|
|
180
|
+
var labelPosition = size[0] - 2 * margin - (xScale(d[x]) + offset[0] + z(d[value])) < measureText(d[label]) ? 'right' : 'left';
|
|
181
|
+
var labelDistance = {
|
|
182
|
+
right: xScale(d[x]) + offset[0] - z(d[value]),
|
|
183
|
+
left: xScale(d[x]) + offset[0] + z(d[value])
|
|
184
|
+
}[labelPosition];
|
|
185
|
+
return _ref = sstyled(styles), /*#__PURE__*/React.createElement("g", _ref.cn("g", {
|
|
186
|
+
"key": "circle(#".concat(i, ")"),
|
|
187
|
+
"onMouseMove": this.bindHandlerTooltip(true, _objectSpread(_objectSpread({}, this.props), {}, {
|
|
188
|
+
xIndex: i
|
|
189
|
+
})),
|
|
190
|
+
"onMouseLeave": this.bindHandlerTooltip(false, _objectSpread(_objectSpread({}, this.props), {}, {
|
|
191
|
+
xIndex: i
|
|
192
|
+
}))
|
|
193
|
+
}), markedCross && /*#__PURE__*/React.createElement(SCenter, _ref.cn("SCenter", {
|
|
194
|
+
"x": xScale(d[x]) + offset[0],
|
|
195
|
+
"y": yScale(d[y]) + offset[1],
|
|
196
|
+
"dy": ".3em",
|
|
197
|
+
"clipPath": "url(#".concat(uid, ")"),
|
|
198
|
+
"color": (_d$color = d[color]) !== null && _d$color !== void 0 ? _d$color : color
|
|
199
|
+
}), "+"), /*#__PURE__*/React.createElement(SBubble, _ref.cn("SBubble", {
|
|
200
|
+
"id": "".concat(uid).concat(uid),
|
|
201
|
+
"render": "circle",
|
|
202
|
+
"clipPath": "url(#".concat(uid, ")"),
|
|
203
|
+
"cx": xScale(d[x]) + offset[0],
|
|
204
|
+
"cy": yScale(d[y]) + offset[1],
|
|
205
|
+
"color": d[color],
|
|
206
|
+
"r": z(d[value]),
|
|
207
|
+
"use:duration": "".concat(duration, "ms")
|
|
208
|
+
})), d[label] && /*#__PURE__*/React.createElement(SLabel, _ref.cn("SLabel", {
|
|
209
|
+
"x": labelDistance,
|
|
210
|
+
"y": yScale(d[y]) + offset[1],
|
|
211
|
+
"dy": ".3em",
|
|
212
|
+
"clipPath": "url(#".concat(uid, ")"),
|
|
213
|
+
"position": labelPosition,
|
|
214
|
+
"color": d[color]
|
|
215
|
+
}), d[label]));
|
|
216
|
+
}
|
|
217
|
+
}, {
|
|
218
|
+
key: "render",
|
|
219
|
+
value: function render() {
|
|
220
|
+
var _this$asProps3 = this.asProps,
|
|
221
|
+
data = _this$asProps3.data,
|
|
222
|
+
uid = _this$asProps3.uid,
|
|
223
|
+
size = _this$asProps3.size,
|
|
224
|
+
scale = _this$asProps3.scale;
|
|
225
|
+
|
|
226
|
+
var _scale2 = _slicedToArray(scale, 2),
|
|
227
|
+
xScale = _scale2[0],
|
|
228
|
+
yScale = _scale2[1];
|
|
229
|
+
|
|
230
|
+
var marginX = Math.min(xScale.range()[0], xScale.range()[1]);
|
|
231
|
+
var marginY = Math.min(yScale.range()[0], yScale.range()[1]);
|
|
232
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, data.map(this.renderCircle.bind(this)), data.map(this.animationCircle.bind(this)), /*#__PURE__*/React.createElement(ClipPath, {
|
|
233
|
+
id: uid,
|
|
234
|
+
x: marginX,
|
|
235
|
+
y: marginY,
|
|
236
|
+
width: "".concat(size[0] - 2 * marginX, "px"),
|
|
237
|
+
height: "".concat(size[1] - 2 * marginY, "px")
|
|
238
|
+
}));
|
|
239
|
+
}
|
|
240
|
+
}]);
|
|
241
|
+
|
|
242
|
+
return BubbleRoot;
|
|
243
|
+
}(Component);
|
|
244
|
+
|
|
245
|
+
_defineProperty(BubbleRoot, "displayName", 'Bubble');
|
|
246
|
+
|
|
247
|
+
_defineProperty(BubbleRoot, "style", style);
|
|
248
|
+
|
|
249
|
+
_defineProperty(BubbleRoot, "enhance", [uniqueIDEnhancement()]);
|
|
250
|
+
|
|
251
|
+
_defineProperty(BubbleRoot, "defaultProps", {
|
|
252
|
+
offset: [0, 0],
|
|
253
|
+
duration: 500,
|
|
254
|
+
markedCross: true
|
|
255
|
+
});
|
|
256
|
+
|
|
257
|
+
var Bubble = createElement(BubbleRoot);
|
|
258
|
+
export default Bubble;
|
|
259
|
+
//# sourceMappingURL=Bubble.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Bubble.js"],"names":["React","Component","sstyled","canUseDOM","CONSTANT","createElement","uniqueIDEnhancement","transition","ClipPath","scaleSqrt","memoize","func","results","argsKey","measureText","text","span","document","append","createTextNode","style","display","body","textLength","offsetWidth","remove","BubbleRoot","visible","props","x","clientX","y","clientY","eventEmitter","asProps","virtualElement","getBoundingClientRect","generateGetBoundingClientRect","VIRTUAL_ELEMENT","emit","width","height","top","right","bottom","left","duration","uid","data","value","z","domain","Math","max","map","el","range","selectRect","selection","selectAll","attr","selectRectNode","node","_","ind","animationCircle","d","i","color","scale","offset","styles","label","markedCross","size","xScale","yScale","SBubble","Element","SCenter","SLabel","margin","min","labelPosition","labelDistance","bindHandlerTooltip","xIndex","marginX","marginY","renderCircle","bind","Bubble"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Component, sstyled } from '@semcore/core';\nimport canUseDOM from '@semcore/utils/lib/canUseDOM';\nimport { CONSTANT } from './utils';\nimport createElement from './createElement';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\nimport { transition } from 'd3-transition';\nimport style from './style/bubble.shadow.css';\nimport ClipPath from './ClipPath';\nimport { scaleSqrt } from 'd3-scale';\n\nconst memoize = (func) => {\n const results = {};\n return (argsKey) => {\n if (!results[argsKey]) {\n results[argsKey] = func(argsKey);\n }\n return results[argsKey];\n };\n};\n\nconst measureText = memoize((text) => {\n let span = document.createElement('span');\n span.append(document.createTextNode(text));\n span.style.display = 'inline-block';\n document.body.append(span);\n const textLength = span.offsetWidth;\n span.remove();\n return textLength;\n});\n\nclass BubbleRoot extends Component {\n static displayName = 'Bubble';\n static style = style;\n static enhance = [uniqueIDEnhancement()];\n\n static defaultProps = {\n offset: [0, 0],\n duration: 500,\n markedCross: true,\n };\n\n virtualElement = canUseDOM() ? document.createElement('div') : {};\n\n generateGetBoundingClientRect(x = 0, y = 0) {\n return () => ({ width: 0, height: 0, top: y, right: x, bottom: y, left: x });\n }\n\n bindHandlerTooltip = (visible, props) => ({ clientX: x, clientY: y }) => {\n const { eventEmitter } = this.asProps;\n this.virtualElement.getBoundingClientRect = this.generateGetBoundingClientRect(x, y);\n this.virtualElement[CONSTANT.VIRTUAL_ELEMENT] = true;\n eventEmitter.emit('onTooltipVisible', visible, props, this.virtualElement);\n };\n\n animationCircle() {\n const { duration, uid, data, value } = this.asProps;\n const z = scaleSqrt()\n .domain([0, Math.max(...data.map((el) => el[value]))])\n .range([5.5, 50.5]);\n\n const selectRect = transition()\n .selection()\n .selectAll(`[id^=${uid}${uid}]`)\n .attr('r', 0);\n\n const selectRectNode = selectRect.node();\n if (duration > 0 && selectRectNode) {\n selectRect\n .transition()\n .duration(duration)\n .attr('r', function(_, ind) {\n return z(data[ind][value]);\n });\n }\n }\n\n componentDidUpdate() {\n this.animationCircle();\n }\n\n componentDidMount() {\n this.animationCircle();\n }\n\n renderCircle(d, i) {\n const {\n color,\n scale,\n x,\n y,\n offset,\n styles,\n uid,\n duration,\n value,\n label,\n markedCross,\n size,\n data,\n } = this.asProps;\n const [xScale, yScale] = scale;\n\n const SBubble = this.Element;\n const SCenter = 'text';\n const SLabel = 'text';\n const z = scaleSqrt()\n .domain([0, Math.max(...data.map((el) => el[value]))])\n .range([5.5, 50.5]);\n\n const margin = Math.min(xScale.range()[0], xScale.range()[1]);\n\n const labelPosition =\n size[0] - 2 * margin - (xScale(d[x]) + offset[0] + z(d[value])) < measureText(d[label])\n ? 'right'\n : 'left';\n const labelDistance = {\n right: xScale(d[x]) + offset[0] - z(d[value]),\n left: xScale(d[x]) + offset[0] + z(d[value]),\n }[labelPosition];\n\n return sstyled(styles)(\n <g\n key={`circle(#${i})`}\n onMouseMove={this.bindHandlerTooltip(true, { ...this.props, xIndex: i })}\n onMouseLeave={this.bindHandlerTooltip(false, { ...this.props, xIndex: i })}\n >\n {markedCross && (\n <SCenter\n x={xScale(d[x]) + offset[0]}\n y={yScale(d[y]) + offset[1]}\n dy=\".3em\"\n clipPath={`url(#${uid})`}\n color={d[color] ?? color}\n >\n +\n </SCenter>\n )}\n <SBubble\n id={`${uid}${uid}`}\n render=\"circle\"\n clipPath={`url(#${uid})`}\n cx={xScale(d[x]) + offset[0]}\n cy={yScale(d[y]) + offset[1]}\n color={d[color]}\n r={z(d[value])}\n use:duration={`${duration}ms`}\n />\n {d[label] && (\n <SLabel\n x={labelDistance}\n y={yScale(d[y]) + offset[1]}\n dy=\".3em\"\n clipPath={`url(#${uid})`}\n position={labelPosition}\n color={d[color]}\n >\n {d[label]}\n </SLabel>\n )}\n </g>,\n );\n }\n\n render() {\n const { data, uid, size, scale } = this.asProps;\n const [xScale, yScale] = scale;\n const marginX = Math.min(xScale.range()[0], xScale.range()[1]);\n const marginY = Math.min(yScale.range()[0], yScale.range()[1]);\n\n return (\n <>\n {data.map(this.renderCircle.bind(this))}\n {data.map(this.animationCircle.bind(this))}\n <ClipPath\n id={uid}\n x={marginX}\n y={marginY}\n width={`${size[0] - 2 * marginX}px`}\n height={`${size[1] - 2 * marginY}px`}\n />\n </>\n );\n }\n}\n\nconst Bubble = createElement(BubbleRoot);\n\nexport default Bubble;\n"],"file":"Bubble.js"}
|
package/lib/es6/Donut.js
CHANGED
|
@@ -28,16 +28,16 @@ var style = (
|
|
|
28
28
|
/*__reshadow_css_start__*/
|
|
29
29
|
_sstyled.insert(
|
|
30
30
|
/*__inner_css_start__*/
|
|
31
|
-
".
|
|
31
|
+
".___SPie_1ftfa_gg_{stroke:#fff;fill:#50aef4}.___SPie_1ftfa_gg_.__color_1ftfa_gg_{fill:var(--color_40fbm0)}.___SEmptyData_1ftfa_gg_{fill:#e4ecf1}.___SEmptyData_1ftfa_gg_.__color_1ftfa_gg_{fill:var(--color_40fbm0)}.___SLabel_1ftfa_gg_{text-anchor:middle;vertical-anchor:middle}"
|
|
32
32
|
/*__inner_css_end__*/
|
|
33
33
|
, "40fbm0_gg_")
|
|
34
34
|
/*__reshadow_css_end__*/
|
|
35
35
|
, {
|
|
36
|
-
"__SPie": "
|
|
37
|
-
"_color": "
|
|
36
|
+
"__SPie": "___SPie_1ftfa_gg_",
|
|
37
|
+
"_color": "__color_1ftfa_gg_",
|
|
38
38
|
"--color": "--color_40fbm0",
|
|
39
|
-
"__SEmptyData": "
|
|
40
|
-
"__SLabel": "
|
|
39
|
+
"__SEmptyData": "___SEmptyData_1ftfa_gg_",
|
|
40
|
+
"__SLabel": "___SLabel_1ftfa_gg_"
|
|
41
41
|
});
|
|
42
42
|
var DEFAULT_INSTANCE = Symbol('DEFAULT_INSTANCE');
|
|
43
43
|
|
package/lib/es6/Dots.js
CHANGED
|
@@ -14,17 +14,17 @@ var style = (
|
|
|
14
14
|
/*__reshadow_css_start__*/
|
|
15
15
|
_sstyled.insert(
|
|
16
16
|
/*__inner_css_start__*/
|
|
17
|
-
".
|
|
17
|
+
".___SDot_37a7m_gg_{stroke-width:2px;stroke:#fff;r:6px;fill:#50aef4;transition-property:cx,cy;transition-duration:var(--duration_1mcd7jn);transition-timing-function:ease-in-out}.___SDot_37a7m_gg_.__color_37a7m_gg_{fill:var(--color_1mcd7jn)}.___SDot_37a7m_gg_.__hide_37a7m_gg_{display:none}.___SDot_37a7m_gg_.__active_37a7m_gg_{r:8px}"
|
|
18
18
|
/*__inner_css_end__*/
|
|
19
19
|
, "1mcd7jn_gg_")
|
|
20
20
|
/*__reshadow_css_end__*/
|
|
21
21
|
, {
|
|
22
|
-
"__SDot": "
|
|
22
|
+
"__SDot": "___SDot_37a7m_gg_",
|
|
23
23
|
"--duration": "--duration_1mcd7jn",
|
|
24
|
-
"_color": "
|
|
24
|
+
"_color": "__color_37a7m_gg_",
|
|
25
25
|
"--color": "--color_1mcd7jn",
|
|
26
|
-
"_hide": "
|
|
27
|
-
"_active": "
|
|
26
|
+
"_hide": "__hide_37a7m_gg_",
|
|
27
|
+
"_active": "__active_37a7m_gg_"
|
|
28
28
|
});
|
|
29
29
|
|
|
30
30
|
function Dots(props) {
|
package/lib/es6/GroupBar.js
CHANGED
|
@@ -22,15 +22,15 @@ var _ref = (
|
|
|
22
22
|
/*__reshadow_css_start__*/
|
|
23
23
|
__css__(
|
|
24
24
|
/*__inner_css_start__*/
|
|
25
|
-
".
|
|
25
|
+
".___SBar_rdx7y_gg_{fill:#50aef4;transition-property:height,width,y;transition-duration:var(--duration);transition-timing-function:ease-in-out}.___SBar_rdx7y_gg_.__color_rdx7y_gg_{fill:var(--color)}.___SBar_rdx7y_gg_.__hide_rdx7y_gg_{display:none}.___SBackground_rdx7y_gg_{fill:#e4ecf1}"
|
|
26
26
|
/*__inner_css_end__*/
|
|
27
|
-
, "
|
|
27
|
+
, "v04fue_gg_")
|
|
28
28
|
/*__reshadow_css_end__*/
|
|
29
29
|
, {
|
|
30
|
-
"__SBar": "
|
|
31
|
-
"_color": "
|
|
32
|
-
"_hide": "
|
|
33
|
-
"__SBackground": "
|
|
30
|
+
"__SBar": "___SBar_rdx7y_gg_",
|
|
31
|
+
"_color": "__color_rdx7y_gg_",
|
|
32
|
+
"_hide": "__hide_rdx7y_gg_",
|
|
33
|
+
"__SBackground": "___SBackground_rdx7y_gg_"
|
|
34
34
|
}),
|
|
35
35
|
style = _extends({}, _ref);
|
|
36
36
|
|
package/lib/es6/HorizontalBar.js
CHANGED
|
@@ -23,17 +23,17 @@ var style = (
|
|
|
23
23
|
/*__reshadow_css_start__*/
|
|
24
24
|
_sstyled.insert(
|
|
25
25
|
/*__inner_css_start__*/
|
|
26
|
-
".
|
|
26
|
+
".___SBar_1ezg1_gg_{fill:#50aef4;transition-property:height,width,y;transition-duration:var(--duration_6qtpvs);transition-timing-function:ease-in-out}.___SBar_1ezg1_gg_.__color_1ezg1_gg_{fill:var(--color_6qtpvs)}.___SBar_1ezg1_gg_.__hide_1ezg1_gg_{display:none}.___SBackground_1ezg1_gg_{fill:#e4ecf1}"
|
|
27
27
|
/*__inner_css_end__*/
|
|
28
28
|
, "6qtpvs_gg_")
|
|
29
29
|
/*__reshadow_css_end__*/
|
|
30
30
|
, {
|
|
31
|
-
"__SBar": "
|
|
31
|
+
"__SBar": "___SBar_1ezg1_gg_",
|
|
32
32
|
"--duration": "--duration_6qtpvs",
|
|
33
|
-
"_color": "
|
|
33
|
+
"_color": "__color_1ezg1_gg_",
|
|
34
34
|
"--color": "--color_6qtpvs",
|
|
35
|
-
"_hide": "
|
|
36
|
-
"__SBackground": "
|
|
35
|
+
"_hide": "__hide_1ezg1_gg_",
|
|
36
|
+
"__SBackground": "___SBackground_1ezg1_gg_"
|
|
37
37
|
});
|
|
38
38
|
|
|
39
39
|
var HorizontalBarRoot = /*#__PURE__*/function (_Component) {
|
package/lib/es6/Hover.js
CHANGED
|
@@ -24,13 +24,13 @@ var style = (
|
|
|
24
24
|
/*__reshadow_css_start__*/
|
|
25
25
|
_sstyled.insert(
|
|
26
26
|
/*__inner_css_start__*/
|
|
27
|
-
".
|
|
27
|
+
".___SHoverLine_8imgf_gg_{stroke:#a6b0b3}.___SHoverRect_8imgf_gg_{fill:rgba(152,170,175,.3)}"
|
|
28
28
|
/*__inner_css_end__*/
|
|
29
29
|
, "1tjsi7e_gg_")
|
|
30
30
|
/*__reshadow_css_end__*/
|
|
31
31
|
, {
|
|
32
|
-
"__SHoverLine": "
|
|
33
|
-
"__SHoverRect": "
|
|
32
|
+
"__SHoverLine": "___SHoverLine_8imgf_gg_",
|
|
33
|
+
"__SHoverRect": "___SHoverRect_8imgf_gg_"
|
|
34
34
|
});
|
|
35
35
|
|
|
36
36
|
var Hover = /*#__PURE__*/function (_Component) {
|
package/lib/es6/Line.js
CHANGED
|
@@ -25,17 +25,17 @@ var style = (
|
|
|
25
25
|
/*__reshadow_css_start__*/
|
|
26
26
|
_sstyled.insert(
|
|
27
27
|
/*__inner_css_start__*/
|
|
28
|
-
".
|
|
28
|
+
".___SLine_1rshh_gg_{fill:transparent;stroke-width:3;stroke:#50aef4;transition-property:d;transition-duration:var(--duration_1lu5daw);transition-timing-function:ease-in-out}.___SLine_1rshh_gg_.__color_1rshh_gg_{stroke:var(--color_1lu5daw)}.___SLine_1rshh_gg_.__hide_1rshh_gg_{display:none}.___SNull_1rshh_gg_{fill:transparent;stroke:#98aaaf;stroke-dasharray:4}.___SNull_1rshh_gg_.__hide_1rshh_gg_{display:none}"
|
|
29
29
|
/*__inner_css_end__*/
|
|
30
30
|
, "1lu5daw_gg_")
|
|
31
31
|
/*__reshadow_css_end__*/
|
|
32
32
|
, {
|
|
33
|
-
"__SLine": "
|
|
33
|
+
"__SLine": "___SLine_1rshh_gg_",
|
|
34
34
|
"--duration": "--duration_1lu5daw",
|
|
35
|
-
"_color": "
|
|
35
|
+
"_color": "__color_1rshh_gg_",
|
|
36
36
|
"--color": "--color_1lu5daw",
|
|
37
|
-
"_hide": "
|
|
38
|
-
"__SNull": "
|
|
37
|
+
"_hide": "__hide_1rshh_gg_",
|
|
38
|
+
"__SNull": "___SNull_1rshh_gg_"
|
|
39
39
|
});
|
|
40
40
|
|
|
41
41
|
var LineRoot = /*#__PURE__*/function (_Component) {
|
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
+
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
5
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
6
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
7
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
8
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
9
|
+
import { sstyled as _sstyled } from "@semcore/core";
|
|
10
|
+
|
|
11
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
12
|
+
|
|
13
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
14
|
+
|
|
15
|
+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
16
|
+
|
|
17
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
18
|
+
|
|
19
|
+
import React from 'react';
|
|
20
|
+
import { Component, sstyled } from '@semcore/core';
|
|
21
|
+
import canUseDOM from '@semcore/utils/lib/canUseDOM';
|
|
22
|
+
import { CONSTANT } from './utils';
|
|
23
|
+
import createElement from './createElement';
|
|
24
|
+
import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
|
|
25
|
+
import { transition } from 'd3-transition';
|
|
26
|
+
|
|
27
|
+
/*__reshadow-styles__:"./style/scatterplot.shadow.css"*/
|
|
28
|
+
var style = (
|
|
29
|
+
/*__reshadow_css_start__*/
|
|
30
|
+
_sstyled.insert(
|
|
31
|
+
/*__inner_css_start__*/
|
|
32
|
+
".___SScatterPlot_1caak_gg_{fill:#2bb3ff;transition-property:cx,cy;transition-duration:var(--duration_hiipjg);transition-timing-function:ease-in-out;opacity:.5}.___SScatterPlot_1caak_gg_:hover{opacity:.8}.___SScatterPlot_1caak_gg_.__color_1caak_gg_{fill:var(--color_hiipjg)}.___SValue_1caak_gg_{text-anchor:middle;font-size:10px;stroke:#008ff8}.___SValue_1caak_gg_.__color_1caak_gg_{stroke:var(--color_hiipjg)}"
|
|
33
|
+
/*__inner_css_end__*/
|
|
34
|
+
, "hiipjg_gg_")
|
|
35
|
+
/*__reshadow_css_end__*/
|
|
36
|
+
, {
|
|
37
|
+
"__SScatterPlot": "___SScatterPlot_1caak_gg_",
|
|
38
|
+
"--duration": "--duration_hiipjg",
|
|
39
|
+
"_color": "__color_1caak_gg_",
|
|
40
|
+
"--color": "--color_hiipjg",
|
|
41
|
+
"__SValue": "___SValue_1caak_gg_"
|
|
42
|
+
});
|
|
43
|
+
import ClipPath from './ClipPath';
|
|
44
|
+
|
|
45
|
+
var ScatterPlotRoot = /*#__PURE__*/function (_Component) {
|
|
46
|
+
_inherits(ScatterPlotRoot, _Component);
|
|
47
|
+
|
|
48
|
+
var _super = _createSuper(ScatterPlotRoot);
|
|
49
|
+
|
|
50
|
+
function ScatterPlotRoot() {
|
|
51
|
+
var _this;
|
|
52
|
+
|
|
53
|
+
_classCallCheck(this, ScatterPlotRoot);
|
|
54
|
+
|
|
55
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
56
|
+
args[_key] = arguments[_key];
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
60
|
+
|
|
61
|
+
_defineProperty(_assertThisInitialized(_this), "virtualElement", canUseDOM() ? document.createElement('div') : {});
|
|
62
|
+
|
|
63
|
+
_defineProperty(_assertThisInitialized(_this), "bindHandlerTooltip", function (visible, props) {
|
|
64
|
+
return function (_ref2) {
|
|
65
|
+
var x = _ref2.clientX,
|
|
66
|
+
y = _ref2.clientY;
|
|
67
|
+
var eventEmitter = _this.asProps.eventEmitter;
|
|
68
|
+
_this.virtualElement.getBoundingClientRect = _this.generateGetBoundingClientRect(x, y);
|
|
69
|
+
_this.virtualElement[CONSTANT.VIRTUAL_ELEMENT] = true;
|
|
70
|
+
eventEmitter.emit('onTooltipVisible', visible, props, _this.virtualElement);
|
|
71
|
+
};
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
return _this;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
_createClass(ScatterPlotRoot, [{
|
|
78
|
+
key: "generateGetBoundingClientRect",
|
|
79
|
+
value: function generateGetBoundingClientRect() {
|
|
80
|
+
var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
81
|
+
var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
82
|
+
return function () {
|
|
83
|
+
return {
|
|
84
|
+
width: 0,
|
|
85
|
+
height: 0,
|
|
86
|
+
top: y,
|
|
87
|
+
right: x,
|
|
88
|
+
bottom: y,
|
|
89
|
+
left: x
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
}, {
|
|
94
|
+
key: "animationCircle",
|
|
95
|
+
value: function animationCircle() {
|
|
96
|
+
var _this$asProps = this.asProps,
|
|
97
|
+
duration = _this$asProps.duration,
|
|
98
|
+
uid = _this$asProps.uid,
|
|
99
|
+
r = _this$asProps.r,
|
|
100
|
+
value = _this$asProps.value;
|
|
101
|
+
var radius = r ? r : value ? 12 : 5.5;
|
|
102
|
+
var selectRect = transition().selection().selectAll("[id^=".concat(uid, "]")).attr('r', 0);
|
|
103
|
+
var selectRectNode = selectRect.node();
|
|
104
|
+
|
|
105
|
+
if (duration > 0 && selectRectNode) {
|
|
106
|
+
selectRect.transition().duration(duration).attr('r', radius);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}, {
|
|
110
|
+
key: "componentDidUpdate",
|
|
111
|
+
value: function componentDidUpdate() {
|
|
112
|
+
this.animationCircle();
|
|
113
|
+
}
|
|
114
|
+
}, {
|
|
115
|
+
key: "componentDidMount",
|
|
116
|
+
value: function componentDidMount() {
|
|
117
|
+
this.animationCircle();
|
|
118
|
+
}
|
|
119
|
+
}, {
|
|
120
|
+
key: "renderCircle",
|
|
121
|
+
value: function renderCircle(d, i) {
|
|
122
|
+
var _ref;
|
|
123
|
+
|
|
124
|
+
var _this$asProps2 = this.asProps,
|
|
125
|
+
color = _this$asProps2.color,
|
|
126
|
+
scale = _this$asProps2.scale,
|
|
127
|
+
x = _this$asProps2.x,
|
|
128
|
+
y = _this$asProps2.y,
|
|
129
|
+
r = _this$asProps2.r,
|
|
130
|
+
offset = _this$asProps2.offset,
|
|
131
|
+
styles = _this$asProps2.styles,
|
|
132
|
+
uid = _this$asProps2.uid,
|
|
133
|
+
duration = _this$asProps2.duration,
|
|
134
|
+
value = _this$asProps2.value,
|
|
135
|
+
valueColor = _this$asProps2.valueColor;
|
|
136
|
+
|
|
137
|
+
var _scale = _slicedToArray(scale, 2),
|
|
138
|
+
xScale = _scale[0],
|
|
139
|
+
yScale = _scale[1];
|
|
140
|
+
|
|
141
|
+
var SScatterPlot = this.Element;
|
|
142
|
+
var SValue = 'text';
|
|
143
|
+
return _ref = sstyled(styles), /*#__PURE__*/React.createElement("g", _ref.cn("g", {
|
|
144
|
+
"key": "circle(#".concat(i, ")"),
|
|
145
|
+
"onMouseMove": this.bindHandlerTooltip(true, _objectSpread(_objectSpread({}, this.props), {}, {
|
|
146
|
+
xIndex: i
|
|
147
|
+
})),
|
|
148
|
+
"onMouseLeave": this.bindHandlerTooltip(false, _objectSpread(_objectSpread({}, this.props), {}, {
|
|
149
|
+
xIndex: i
|
|
150
|
+
}))
|
|
151
|
+
}), /*#__PURE__*/React.createElement(SScatterPlot, _ref.cn("SScatterPlot", {
|
|
152
|
+
"id": "".concat(uid).concat(i),
|
|
153
|
+
"render": "circle",
|
|
154
|
+
"clipPath": "url(#".concat(uid, ")"),
|
|
155
|
+
"cx": xScale(d[x]) + offset[0],
|
|
156
|
+
"cy": yScale(d[y]) + offset[1],
|
|
157
|
+
"color": color,
|
|
158
|
+
"r": r,
|
|
159
|
+
"use:duration": "".concat(duration, "ms")
|
|
160
|
+
})), d[value] && /*#__PURE__*/React.createElement(SValue, _ref.cn("SValue", {
|
|
161
|
+
"x": xScale(d[x]) + offset[0],
|
|
162
|
+
"y": yScale(d[y]) + offset[1],
|
|
163
|
+
"dy": ".3em",
|
|
164
|
+
"clipPath": "url(#".concat(uid, ")"),
|
|
165
|
+
"color": valueColor
|
|
166
|
+
}), d[value]));
|
|
167
|
+
}
|
|
168
|
+
}, {
|
|
169
|
+
key: "render",
|
|
170
|
+
value: function render() {
|
|
171
|
+
var _this$asProps3 = this.asProps,
|
|
172
|
+
data = _this$asProps3.data,
|
|
173
|
+
uid = _this$asProps3.uid,
|
|
174
|
+
size = _this$asProps3.size,
|
|
175
|
+
scale = _this$asProps3.scale;
|
|
176
|
+
|
|
177
|
+
var _scale2 = _slicedToArray(scale, 2),
|
|
178
|
+
xScale = _scale2[0],
|
|
179
|
+
yScale = _scale2[1];
|
|
180
|
+
|
|
181
|
+
var marginX = Math.min(xScale.range()[0], xScale.range()[1]);
|
|
182
|
+
var marginY = Math.min(yScale.range()[0], yScale.range()[1]);
|
|
183
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, data.map(this.renderCircle.bind(this)), /*#__PURE__*/React.createElement(ClipPath, {
|
|
184
|
+
id: uid,
|
|
185
|
+
x: marginX,
|
|
186
|
+
y: marginY,
|
|
187
|
+
width: "".concat(size[0] - 2 * marginX, "px"),
|
|
188
|
+
height: "".concat(size[1] - 2 * marginY, "px")
|
|
189
|
+
}));
|
|
190
|
+
}
|
|
191
|
+
}]);
|
|
192
|
+
|
|
193
|
+
return ScatterPlotRoot;
|
|
194
|
+
}(Component);
|
|
195
|
+
|
|
196
|
+
_defineProperty(ScatterPlotRoot, "displayName", 'ScatterPlot');
|
|
197
|
+
|
|
198
|
+
_defineProperty(ScatterPlotRoot, "style", style);
|
|
199
|
+
|
|
200
|
+
_defineProperty(ScatterPlotRoot, "enhance", [uniqueIDEnhancement()]);
|
|
201
|
+
|
|
202
|
+
_defineProperty(ScatterPlotRoot, "defaultProps", {
|
|
203
|
+
offset: [0, 0],
|
|
204
|
+
duration: 500
|
|
205
|
+
});
|
|
206
|
+
|
|
207
|
+
var ScatterPlot = createElement(ScatterPlotRoot);
|
|
208
|
+
export default ScatterPlot;
|
|
209
|
+
//# sourceMappingURL=ScatterPlot.js.map
|