@pie-lib/charting 6.1.0-next.4 → 6.1.0-next.5
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/lib/actions-button.js +145 -0
- package/lib/actions-button.js.map +1 -0
- package/lib/axes.js +586 -0
- package/lib/axes.js.map +1 -0
- package/lib/bars/bar.js +58 -0
- package/lib/bars/bar.js.map +1 -0
- package/lib/bars/common/bars.js +277 -0
- package/lib/bars/common/bars.js.map +1 -0
- package/lib/bars/common/correct-check-icon.js +54 -0
- package/lib/bars/common/correct-check-icon.js.map +1 -0
- package/lib/bars/histogram.js +59 -0
- package/lib/bars/histogram.js.map +1 -0
- package/lib/chart-setup.js +382 -0
- package/lib/chart-setup.js.map +1 -0
- package/lib/chart-type.js +80 -0
- package/lib/chart-type.js.map +1 -0
- package/lib/chart-types.js +22 -0
- package/lib/chart-types.js.map +1 -0
- package/lib/chart.js +384 -0
- package/lib/chart.js.map +1 -0
- package/lib/common/correctness-indicators.js +156 -0
- package/lib/common/correctness-indicators.js.map +1 -0
- package/lib/common/drag-handle.js +160 -0
- package/lib/common/drag-handle.js.map +1 -0
- package/lib/common/drag-icon.js +52 -0
- package/lib/common/drag-icon.js.map +1 -0
- package/lib/common/styles.js +22 -0
- package/lib/common/styles.js.map +1 -0
- package/lib/grid.js +101 -0
- package/lib/grid.js.map +1 -0
- package/lib/index.js +42 -0
- package/lib/index.js.map +1 -0
- package/lib/key-legend.js +87 -0
- package/lib/key-legend.js.map +1 -0
- package/lib/line/common/drag-handle.js +146 -0
- package/lib/line/common/drag-handle.js.map +1 -0
- package/lib/line/common/line.js +214 -0
- package/lib/line/common/line.js.map +1 -0
- package/lib/line/line-cross.js +214 -0
- package/lib/line/line-cross.js.map +1 -0
- package/lib/line/line-dot.js +158 -0
- package/lib/line/line-dot.js.map +1 -0
- package/lib/mark-label.js +236 -0
- package/lib/mark-label.js.map +1 -0
- package/lib/plot/common/plot.js +349 -0
- package/lib/plot/common/plot.js.map +1 -0
- package/lib/plot/dot.js +110 -0
- package/lib/plot/dot.js.map +1 -0
- package/lib/plot/line.js +140 -0
- package/lib/plot/line.js.map +1 -0
- package/lib/tool-menu.js +106 -0
- package/lib/tool-menu.js.map +1 -0
- package/lib/utils.js +189 -0
- package/lib/utils.js.map +1 -0
- package/package.json +7 -7
|
@@ -0,0 +1,349 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = exports.RawPlot = exports.Plot = void 0;
|
|
9
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
12
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
13
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
14
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
|
+
var _react = _interopRequireDefault(require("react"));
|
|
16
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
17
|
+
var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
|
|
18
|
+
var _styles = require("@mui/material/styles");
|
|
19
|
+
var _group = require("@visx/group");
|
|
20
|
+
var _debug = _interopRequireDefault(require("debug"));
|
|
21
|
+
var _plot = require("@pie-lib/plot");
|
|
22
|
+
var _dragHandle = _interopRequireWildcard(require("../../common/drag-handle"));
|
|
23
|
+
var _renderUi = require("@pie-lib/render-ui");
|
|
24
|
+
var _utils = require("../../utils");
|
|
25
|
+
var _styles2 = require("../../common/styles");
|
|
26
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
27
|
+
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
|
|
28
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
29
|
+
var log = (0, _debug["default"])('pie-lib:chart:bars');
|
|
30
|
+
var ICON_SIZE = 16; // 10px icon + 2px padding on all sides + 1px border
|
|
31
|
+
var RawPlot = exports.RawPlot = /*#__PURE__*/function (_React$Component) {
|
|
32
|
+
function RawPlot(props) {
|
|
33
|
+
var _this;
|
|
34
|
+
(0, _classCallCheck2["default"])(this, RawPlot);
|
|
35
|
+
_this = _callSuper(this, RawPlot, [props]);
|
|
36
|
+
(0, _defineProperty2["default"])(_this, "handleMouseEnter", function () {
|
|
37
|
+
_this.setState({
|
|
38
|
+
isHovered: true
|
|
39
|
+
});
|
|
40
|
+
});
|
|
41
|
+
(0, _defineProperty2["default"])(_this, "handleMouseLeave", function () {
|
|
42
|
+
_this.setState({
|
|
43
|
+
isHovered: false
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
(0, _defineProperty2["default"])(_this, "setDragValue", function (dragValue) {
|
|
47
|
+
return _this.setState({
|
|
48
|
+
dragValue: dragValue
|
|
49
|
+
});
|
|
50
|
+
});
|
|
51
|
+
(0, _defineProperty2["default"])(_this, "dragStop", function () {
|
|
52
|
+
var _this$props = _this.props,
|
|
53
|
+
label = _this$props.label,
|
|
54
|
+
onChangeCategory = _this$props.onChangeCategory;
|
|
55
|
+
var dragValue = _this.state.dragValue;
|
|
56
|
+
log('[dragStop]', dragValue);
|
|
57
|
+
if (dragValue !== undefined) {
|
|
58
|
+
onChangeCategory({
|
|
59
|
+
label: label,
|
|
60
|
+
value: dragValue
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
_this.setDragValue(undefined);
|
|
64
|
+
});
|
|
65
|
+
(0, _defineProperty2["default"])(_this, "dragValue", function (existing, next) {
|
|
66
|
+
log('[dragValue] next:', next);
|
|
67
|
+
_this.setDragValue(next);
|
|
68
|
+
});
|
|
69
|
+
(0, _defineProperty2["default"])(_this, "renderCorrectnessIcon", function (barX, barWidth, correctVal, correctness, scale, pointHeight, pointDiameter) {
|
|
70
|
+
var iconY;
|
|
71
|
+
if (correctVal === 0) {
|
|
72
|
+
// if correct value is 0, position icon on the horizontal axis
|
|
73
|
+
iconY = scale.y(0) - ICON_SIZE / 2;
|
|
74
|
+
} else {
|
|
75
|
+
var shapeIndex = correctVal - 1; // the index of the shape representing the correct value
|
|
76
|
+
var shapeCenterY = scale.y(shapeIndex) - (pointHeight - pointDiameter) / 2 - pointDiameter / 2;
|
|
77
|
+
iconY = shapeCenterY - ICON_SIZE / 2; // center the icon
|
|
78
|
+
}
|
|
79
|
+
return /*#__PURE__*/_react["default"].createElement("foreignObject", {
|
|
80
|
+
x: barX + barWidth / 2 - ICON_SIZE / 2,
|
|
81
|
+
y: iconY,
|
|
82
|
+
width: ICON_SIZE,
|
|
83
|
+
height: ICON_SIZE
|
|
84
|
+
}, /*#__PURE__*/_react["default"].createElement(_Check["default"], {
|
|
85
|
+
className: "correctnessIcon correctIcon smallIcon",
|
|
86
|
+
title: correctness.label
|
|
87
|
+
}));
|
|
88
|
+
});
|
|
89
|
+
_this.state = {
|
|
90
|
+
dragValue: undefined,
|
|
91
|
+
isHovered: false
|
|
92
|
+
};
|
|
93
|
+
return _this;
|
|
94
|
+
}
|
|
95
|
+
(0, _inherits2["default"])(RawPlot, _React$Component);
|
|
96
|
+
return (0, _createClass2["default"])(RawPlot, [{
|
|
97
|
+
key: "render",
|
|
98
|
+
value: function render() {
|
|
99
|
+
var _this2 = this;
|
|
100
|
+
var _this$props2 = this.props,
|
|
101
|
+
graphProps = _this$props2.graphProps,
|
|
102
|
+
value = _this$props2.value,
|
|
103
|
+
label = _this$props2.label,
|
|
104
|
+
xBand = _this$props2.xBand,
|
|
105
|
+
index = _this$props2.index,
|
|
106
|
+
CustomBarElement = _this$props2.CustomBarElement,
|
|
107
|
+
interactive = _this$props2.interactive,
|
|
108
|
+
correctness = _this$props2.correctness,
|
|
109
|
+
defineChart = _this$props2.defineChart,
|
|
110
|
+
correctData = _this$props2.correctData,
|
|
111
|
+
className = _this$props2.className;
|
|
112
|
+
var scale = graphProps.scale,
|
|
113
|
+
range = graphProps.range,
|
|
114
|
+
size = graphProps.size;
|
|
115
|
+
var _ref = range || {},
|
|
116
|
+
max = _ref.max;
|
|
117
|
+
var _this$state = this.state,
|
|
118
|
+
dragValue = _this$state.dragValue,
|
|
119
|
+
isHovered = _this$state.isHovered;
|
|
120
|
+
var v = Number.isFinite(dragValue) ? dragValue : value;
|
|
121
|
+
var barWidth = xBand.bandwidth();
|
|
122
|
+
var barHeight = scale.y(range.max - v);
|
|
123
|
+
var barX = xBand((0, _utils.bandKey)({
|
|
124
|
+
label: label
|
|
125
|
+
}, index));
|
|
126
|
+
log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);
|
|
127
|
+
var values = [];
|
|
128
|
+
for (var i = 0; i < v; i++) {
|
|
129
|
+
values.push(i);
|
|
130
|
+
}
|
|
131
|
+
var pointHeight = size.height / max;
|
|
132
|
+
var pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;
|
|
133
|
+
var Component = interactive ? _dragHandle["default"] : _dragHandle.DragHandle;
|
|
134
|
+
var allowRolloverEvent = interactive && !correctness;
|
|
135
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("g", {
|
|
136
|
+
className: className,
|
|
137
|
+
onMouseEnter: this.handleMouseEnter,
|
|
138
|
+
onMouseLeave: this.handleMouseLeave,
|
|
139
|
+
onTouchStart: this.handleMouseEnter,
|
|
140
|
+
onTouchEnd: this.handleMouseLeave
|
|
141
|
+
}, isHovered && allowRolloverEvent && /*#__PURE__*/_react["default"].createElement("rect", {
|
|
142
|
+
x: barX,
|
|
143
|
+
y: scale.y(v),
|
|
144
|
+
width: barWidth,
|
|
145
|
+
height: values !== null && values !== void 0 && values.length ? pointHeight * values.length : 0,
|
|
146
|
+
stroke: _renderUi.color.defaults.BORDER_GRAY,
|
|
147
|
+
strokeWidth: '4px',
|
|
148
|
+
fill: 'transparent'
|
|
149
|
+
}), values.map(function (index) {
|
|
150
|
+
return CustomBarElement({
|
|
151
|
+
index: index,
|
|
152
|
+
pointDiameter: pointDiameter,
|
|
153
|
+
barX: barX,
|
|
154
|
+
barWidth: barWidth,
|
|
155
|
+
pointHeight: pointHeight,
|
|
156
|
+
label: label,
|
|
157
|
+
value: value,
|
|
158
|
+
scale: scale
|
|
159
|
+
});
|
|
160
|
+
}), correctness && correctness.value === 'incorrect' && function () {
|
|
161
|
+
var correctVal = parseFloat(correctData[index] && correctData[index].value);
|
|
162
|
+
if (isNaN(correctVal)) return null;
|
|
163
|
+
var selectedVal = v;
|
|
164
|
+
|
|
165
|
+
// special case: if correct value is 0, only show the icon on the axis
|
|
166
|
+
if (correctVal === 0) {
|
|
167
|
+
return _this2.renderCorrectnessIcon(barX, barWidth, correctVal, correctness, scale, pointHeight, pointDiameter);
|
|
168
|
+
}
|
|
169
|
+
if (selectedVal > correctVal) {
|
|
170
|
+
// selected is higher than correct: overlay the correct last segment
|
|
171
|
+
var overlayValues = [];
|
|
172
|
+
for (var _i = 0; _i < correctVal; _i++) {
|
|
173
|
+
overlayValues.push(_i);
|
|
174
|
+
}
|
|
175
|
+
var lastIndexOfOverlay = overlayValues.length - 1;
|
|
176
|
+
var lastOverlayValue = overlayValues[lastIndexOfOverlay];
|
|
177
|
+
var _barX = xBand((0, _utils.bandKey)({
|
|
178
|
+
label: label
|
|
179
|
+
}, index));
|
|
180
|
+
var _barWidth = xBand.bandwidth();
|
|
181
|
+
var _pointHeight = size.height / max;
|
|
182
|
+
var _pointDiameter = (_pointHeight > _barWidth ? _barWidth : _pointHeight) * 0.8;
|
|
183
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(CustomBarElement, {
|
|
184
|
+
index: lastOverlayValue,
|
|
185
|
+
pointDiameter: _pointDiameter + 10 // increase point diameter for dotted line
|
|
186
|
+
,
|
|
187
|
+
barX: _barX,
|
|
188
|
+
barWidth: _barWidth,
|
|
189
|
+
pointHeight: _pointHeight,
|
|
190
|
+
label: label,
|
|
191
|
+
value: value,
|
|
192
|
+
scale: scale,
|
|
193
|
+
dottedOverline: true
|
|
194
|
+
}), _this2.renderCorrectnessIcon(_barX, _barWidth, correctVal, correctness, scale, _pointHeight, _pointDiameter));
|
|
195
|
+
}
|
|
196
|
+
// selected is lower than correct, render missing segment below the correct bar
|
|
197
|
+
var valuesToRender = [];
|
|
198
|
+
for (var _i2 = selectedVal; _i2 < correctVal; _i2++) {
|
|
199
|
+
valuesToRender.push(_i2);
|
|
200
|
+
}
|
|
201
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, valuesToRender.map(function (idx) {
|
|
202
|
+
return CustomBarElement({
|
|
203
|
+
index: idx,
|
|
204
|
+
pointDiameter: pointDiameter,
|
|
205
|
+
barX: barX,
|
|
206
|
+
barWidth: barWidth,
|
|
207
|
+
pointHeight: pointHeight,
|
|
208
|
+
label: label,
|
|
209
|
+
value: value,
|
|
210
|
+
scale: scale,
|
|
211
|
+
dottedOverline: true
|
|
212
|
+
});
|
|
213
|
+
}), _this2.renderCorrectnessIcon(barX, barWidth, correctVal, correctness, scale, pointHeight, pointDiameter));
|
|
214
|
+
}(), /*#__PURE__*/_react["default"].createElement(Component, {
|
|
215
|
+
x: barX,
|
|
216
|
+
y: v,
|
|
217
|
+
interactive: interactive,
|
|
218
|
+
width: barWidth,
|
|
219
|
+
onDrag: function onDrag(v) {
|
|
220
|
+
return _this2.dragValue(value, v);
|
|
221
|
+
},
|
|
222
|
+
onDragStop: this.dragStop,
|
|
223
|
+
graphProps: graphProps,
|
|
224
|
+
correctness: correctness,
|
|
225
|
+
isHovered: isHovered,
|
|
226
|
+
defineChart: defineChart,
|
|
227
|
+
color: _renderUi.color.primaryDark(),
|
|
228
|
+
isPlot: true
|
|
229
|
+
})));
|
|
230
|
+
}
|
|
231
|
+
}]);
|
|
232
|
+
}(_react["default"].Component);
|
|
233
|
+
(0, _defineProperty2["default"])(RawPlot, "propTypes", {
|
|
234
|
+
onChangeCategory: _propTypes["default"].func,
|
|
235
|
+
value: _propTypes["default"].number,
|
|
236
|
+
label: _propTypes["default"].string,
|
|
237
|
+
xBand: _propTypes["default"].func,
|
|
238
|
+
index: _propTypes["default"].number.isRequired,
|
|
239
|
+
graphProps: _plot.types.GraphPropsType.isRequired,
|
|
240
|
+
CustomBarElement: _propTypes["default"].func,
|
|
241
|
+
interactive: _propTypes["default"].bool,
|
|
242
|
+
correctness: _propTypes["default"].shape({
|
|
243
|
+
value: _propTypes["default"].string,
|
|
244
|
+
label: _propTypes["default"].string
|
|
245
|
+
}),
|
|
246
|
+
defineChart: _propTypes["default"].bool,
|
|
247
|
+
correctData: _propTypes["default"].arrayOf(_propTypes["default"].shape({
|
|
248
|
+
value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
249
|
+
label: _propTypes["default"].string
|
|
250
|
+
})),
|
|
251
|
+
className: _propTypes["default"].string
|
|
252
|
+
});
|
|
253
|
+
var Bar = (0, _styles.styled)(RawPlot)(function (_ref2) {
|
|
254
|
+
var theme = _ref2.theme;
|
|
255
|
+
return {
|
|
256
|
+
'& .dot': {
|
|
257
|
+
fill: _renderUi.color.visualElementsColors.PLOT_FILL_COLOR,
|
|
258
|
+
'&.correct': (0, _styles2.correct)('stroke'),
|
|
259
|
+
'&.incorrect': (0, _styles2.incorrect)('stroke')
|
|
260
|
+
},
|
|
261
|
+
'& .dotColor': {
|
|
262
|
+
fill: _renderUi.color.visualElementsColors.PLOT_FILL_COLOR,
|
|
263
|
+
'&.correct': (0, _styles2.correct)('fill'),
|
|
264
|
+
'&.incorrect': (0, _styles2.incorrect)('fill')
|
|
265
|
+
},
|
|
266
|
+
'& .line': {
|
|
267
|
+
stroke: _renderUi.color.visualElementsColors.PLOT_FILL_COLOR,
|
|
268
|
+
'&.correct': (0, _styles2.correct)('stroke'),
|
|
269
|
+
'&.incorrect': (0, _styles2.incorrect)('stroke')
|
|
270
|
+
},
|
|
271
|
+
'& .correctIcon': {
|
|
272
|
+
backgroundColor: _renderUi.color.correct()
|
|
273
|
+
},
|
|
274
|
+
'& .incorrectIcon': {
|
|
275
|
+
backgroundColor: _renderUi.color.incorrectWithIcon()
|
|
276
|
+
},
|
|
277
|
+
'& .correctnessIcon': {
|
|
278
|
+
borderRadius: theme.spacing(2),
|
|
279
|
+
color: _renderUi.color.defaults.WHITE,
|
|
280
|
+
fontSize: '16px',
|
|
281
|
+
width: '16px',
|
|
282
|
+
height: '16px',
|
|
283
|
+
padding: '2px',
|
|
284
|
+
border: "1px solid ".concat(_renderUi.color.defaults.WHITE),
|
|
285
|
+
stroke: 'initial',
|
|
286
|
+
boxSizing: 'unset',
|
|
287
|
+
// to override the default border-box in IBX
|
|
288
|
+
display: 'block'
|
|
289
|
+
},
|
|
290
|
+
'& .smallIcon': {
|
|
291
|
+
fontSize: '10px',
|
|
292
|
+
width: '10px',
|
|
293
|
+
height: '10px'
|
|
294
|
+
}
|
|
295
|
+
};
|
|
296
|
+
});
|
|
297
|
+
var Plot = exports.Plot = /*#__PURE__*/function (_React$Component2) {
|
|
298
|
+
function Plot() {
|
|
299
|
+
(0, _classCallCheck2["default"])(this, Plot);
|
|
300
|
+
return _callSuper(this, Plot, arguments);
|
|
301
|
+
}
|
|
302
|
+
(0, _inherits2["default"])(Plot, _React$Component2);
|
|
303
|
+
return (0, _createClass2["default"])(Plot, [{
|
|
304
|
+
key: "render",
|
|
305
|
+
value: function render() {
|
|
306
|
+
var _this$props3 = this.props,
|
|
307
|
+
data = _this$props3.data,
|
|
308
|
+
graphProps = _this$props3.graphProps,
|
|
309
|
+
xBand = _this$props3.xBand,
|
|
310
|
+
CustomBarElement = _this$props3.CustomBarElement,
|
|
311
|
+
_onChangeCategory = _this$props3.onChangeCategory,
|
|
312
|
+
defineChart = _this$props3.defineChart,
|
|
313
|
+
correctData = _this$props3.correctData;
|
|
314
|
+
return /*#__PURE__*/_react["default"].createElement(_group.Group, null, (data || []).map(function (d, index) {
|
|
315
|
+
return /*#__PURE__*/_react["default"].createElement(Bar, {
|
|
316
|
+
value: d.value,
|
|
317
|
+
label: d.label,
|
|
318
|
+
interactive: defineChart || d.interactive,
|
|
319
|
+
defineChart: defineChart,
|
|
320
|
+
xBand: xBand,
|
|
321
|
+
index: index,
|
|
322
|
+
key: "bar-".concat(d.label, "-").concat(d.value, "-").concat(index),
|
|
323
|
+
onChangeCategory: function onChangeCategory(category) {
|
|
324
|
+
return _onChangeCategory(index, category);
|
|
325
|
+
},
|
|
326
|
+
graphProps: graphProps,
|
|
327
|
+
CustomBarElement: CustomBarElement,
|
|
328
|
+
correctness: d.correctness,
|
|
329
|
+
correctData: correctData
|
|
330
|
+
});
|
|
331
|
+
}));
|
|
332
|
+
}
|
|
333
|
+
}]);
|
|
334
|
+
}(_react["default"].Component);
|
|
335
|
+
(0, _defineProperty2["default"])(Plot, "propTypes", {
|
|
336
|
+
data: _propTypes["default"].array,
|
|
337
|
+
onChangeCategory: _propTypes["default"].func,
|
|
338
|
+
xBand: _propTypes["default"].func,
|
|
339
|
+
graphProps: _plot.types.GraphPropsType.isRequired,
|
|
340
|
+
defineChart: _propTypes["default"].bool,
|
|
341
|
+
CustomBarElement: _propTypes["default"].func,
|
|
342
|
+
correctData: _propTypes["default"].arrayOf(_propTypes["default"].shape({
|
|
343
|
+
value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
344
|
+
label: _propTypes["default"].string
|
|
345
|
+
})),
|
|
346
|
+
className: _propTypes["default"].string
|
|
347
|
+
});
|
|
348
|
+
var _default = exports["default"] = Plot;
|
|
349
|
+
//# sourceMappingURL=plot.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"plot.js","names":["_react","_interopRequireDefault","require","_propTypes","_Check","_styles","_group","_debug","_plot","_dragHandle","_interopRequireWildcard","_renderUi","_utils","_styles2","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_callSuper","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","log","debug","ICON_SIZE","RawPlot","exports","_React$Component","props","_this","_classCallCheck2","_defineProperty2","setState","isHovered","dragValue","_this$props","label","onChangeCategory","state","undefined","value","setDragValue","existing","next","barX","barWidth","correctVal","correctness","scale","pointHeight","pointDiameter","iconY","y","shapeIndex","shapeCenterY","createElement","x","width","height","className","title","_inherits2","_createClass2","key","render","_this2","_this$props2","graphProps","xBand","index","CustomBarElement","interactive","defineChart","correctData","range","size","_ref","max","_this$state","v","Number","isFinite","bandwidth","barHeight","bandKey","values","push","Component","DraggableHandle","DragHandle","allowRolloverEvent","Fragment","onMouseEnter","handleMouseEnter","onMouseLeave","handleMouseLeave","onTouchStart","onTouchEnd","length","stroke","color","defaults","BORDER_GRAY","strokeWidth","fill","map","parseFloat","isNaN","selectedVal","renderCorrectnessIcon","overlayValues","lastIndexOfOverlay","lastOverlayValue","dottedOverline","valuesToRender","idx","onDrag","onDragStop","dragStop","primaryDark","isPlot","React","PropTypes","func","number","string","isRequired","types","GraphPropsType","bool","shape","arrayOf","oneOfType","Bar","styled","_ref2","theme","visualElementsColors","PLOT_FILL_COLOR","correct","incorrect","backgroundColor","incorrectWithIcon","borderRadius","spacing","WHITE","fontSize","padding","border","concat","boxSizing","display","Plot","_React$Component2","arguments","_this$props3","data","Group","d","category","array","_default"],"sources":["../../../src/plot/common/plot.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Check from '@mui/icons-material/Check';\nimport { styled } from '@mui/material/styles';\nimport { Group } from '@visx/group';\nimport debug from 'debug';\n\nimport { types } from '@pie-lib/plot';\nimport DraggableHandle, { DragHandle } from '../../common/drag-handle';\nimport { color } from '@pie-lib/render-ui';\nimport { bandKey } from '../../utils';\nimport { correct, incorrect } from '../../common/styles';\n\nconst log = debug('pie-lib:chart:bars');\nconst ICON_SIZE = 16; // 10px icon + 2px padding on all sides + 1px border\n\nexport class RawPlot extends React.Component {\n static propTypes = {\n onChangeCategory: PropTypes.func,\n value: PropTypes.number,\n label: PropTypes.string,\n xBand: PropTypes.func,\n index: PropTypes.number.isRequired,\n graphProps: types.GraphPropsType.isRequired,\n CustomBarElement: PropTypes.func,\n interactive: PropTypes.bool,\n correctness: PropTypes.shape({\n value: PropTypes.string,\n label: PropTypes.string,\n }),\n defineChart: PropTypes.bool,\n correctData: PropTypes.arrayOf(PropTypes.shape({\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n label: PropTypes.string,\n })),\n className: PropTypes.string,\n };\n\n constructor(props) {\n super(props);\n this.state = {\n dragValue: undefined,\n isHovered: false,\n };\n }\n\n handleMouseEnter = () => {\n this.setState({ isHovered: true });\n };\n\n handleMouseLeave = () => {\n this.setState({ isHovered: false });\n };\n\n setDragValue = (dragValue) => this.setState({ dragValue });\n\n dragStop = () => {\n const { label, onChangeCategory } = this.props;\n const { dragValue } = this.state;\n log('[dragStop]', dragValue);\n\n if (dragValue !== undefined) {\n onChangeCategory({ label, value: dragValue });\n }\n\n this.setDragValue(undefined);\n };\n\n dragValue = (existing, next) => {\n log('[dragValue] next:', next);\n\n this.setDragValue(next);\n };\n\n renderCorrectnessIcon = (barX, barWidth, correctVal, correctness, scale, pointHeight, pointDiameter) => {\n let iconY;\n\n if (correctVal === 0) {\n // if correct value is 0, position icon on the horizontal axis\n iconY = scale.y(0) - ICON_SIZE / 2;\n } else {\n const shapeIndex = correctVal - 1; // the index of the shape representing the correct value\n const shapeCenterY = scale.y(shapeIndex) - (pointHeight - pointDiameter) / 2 - pointDiameter / 2;\n iconY = shapeCenterY - ICON_SIZE / 2; // center the icon\n }\n\n return (\n <foreignObject x={barX + barWidth / 2 - ICON_SIZE / 2} y={iconY} width={ICON_SIZE} height={ICON_SIZE}>\n <Check\n className=\"correctnessIcon correctIcon smallIcon\"\n title={correctness.label}\n />\n </foreignObject>\n );\n };\n\n render() {\n const {\n graphProps,\n value,\n label,\n xBand,\n index,\n CustomBarElement,\n interactive,\n correctness,\n defineChart,\n correctData,\n className\n } = this.props;\n\n const { scale, range, size } = graphProps;\n const { max } = range || {};\n const { dragValue, isHovered } = this.state;\n\n const v = Number.isFinite(dragValue) ? dragValue : value;\n const barWidth = xBand.bandwidth();\n const barHeight = scale.y(range.max - v);\n const barX = xBand(bandKey({ label }, index));\n\n log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);\n\n const values = [];\n\n for (let i = 0; i < v; i++) {\n values.push(i);\n }\n\n const pointHeight = size.height / max;\n const pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;\n const Component = interactive ? DraggableHandle : DragHandle;\n const allowRolloverEvent = interactive && !correctness;\n\n return (\n <React.Fragment>\n <g\n className={className}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onTouchStart={this.handleMouseEnter}\n onTouchEnd={this.handleMouseLeave}\n >\n {isHovered && allowRolloverEvent && (\n <rect\n x={barX}\n y={scale.y(v)}\n width={barWidth}\n height={values?.length ? pointHeight * values.length : 0}\n stroke={color.defaults.BORDER_GRAY}\n strokeWidth={'4px'}\n fill={'transparent'}\n />\n )}\n {values.map((index) =>\n CustomBarElement({\n index,\n pointDiameter,\n barX,\n barWidth,\n pointHeight,\n label,\n value,\n scale,\n }),\n )}\n {correctness &&\n correctness.value === 'incorrect' &&\n (() => {\n const correctVal = parseFloat(correctData[index] && correctData[index].value);\n if (isNaN(correctVal)) return null;\n const selectedVal = v;\n\n // special case: if correct value is 0, only show the icon on the axis\n if (correctVal === 0) {\n return this.renderCorrectnessIcon(\n barX,\n barWidth,\n correctVal,\n correctness,\n scale,\n pointHeight,\n pointDiameter,\n );\n }\n\n if (selectedVal > correctVal) {\n // selected is higher than correct: overlay the correct last segment\n const overlayValues = [];\n for (let i = 0; i < correctVal; i++) {\n overlayValues.push(i);\n }\n const lastIndexOfOverlay = overlayValues.length - 1;\n const lastOverlayValue = overlayValues[lastIndexOfOverlay];\n const barX = xBand(bandKey({ label }, index));\n const barWidth = xBand.bandwidth();\n const pointHeight = size.height / max;\n const pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;\n return (\n <>\n <CustomBarElement\n index={lastOverlayValue}\n pointDiameter={pointDiameter + 10} // increase point diameter for dotted line\n barX={barX}\n barWidth={barWidth}\n pointHeight={pointHeight}\n label={label}\n value={value}\n scale={scale}\n dottedOverline={true}\n />\n {this.renderCorrectnessIcon(\n barX,\n barWidth,\n correctVal,\n correctness,\n scale,\n pointHeight,\n pointDiameter,\n )}\n </>\n );\n }\n // selected is lower than correct, render missing segment below the correct bar\n const valuesToRender = [];\n for (let i = selectedVal; i < correctVal; i++) {\n valuesToRender.push(i);\n }\n return (\n <>\n {valuesToRender.map((idx) =>\n CustomBarElement({\n index: idx,\n pointDiameter,\n barX,\n barWidth,\n pointHeight,\n label,\n value,\n scale,\n dottedOverline: true,\n }),\n )}\n {this.renderCorrectnessIcon(\n barX,\n barWidth,\n correctVal,\n correctness,\n scale,\n pointHeight,\n pointDiameter,\n )}\n </>\n );\n })()}\n <Component\n x={barX}\n y={v}\n interactive={interactive}\n width={barWidth}\n onDrag={(v) => this.dragValue(value, v)}\n onDragStop={this.dragStop}\n graphProps={graphProps}\n correctness={correctness}\n isHovered={isHovered}\n defineChart={defineChart}\n color={color.primaryDark()}\n isPlot\n />\n </g>\n </React.Fragment>\n );\n }\n}\n\nconst Bar = styled(RawPlot)(({ theme }) => ({\n '& .dot': {\n fill: color.visualElementsColors.PLOT_FILL_COLOR,\n '&.correct': correct('stroke'),\n '&.incorrect': incorrect('stroke'),\n },\n '& .dotColor': {\n fill: color.visualElementsColors.PLOT_FILL_COLOR,\n '&.correct': correct('fill'),\n '&.incorrect': incorrect('fill'),\n },\n '& .line': {\n stroke: color.visualElementsColors.PLOT_FILL_COLOR,\n '&.correct': correct('stroke'),\n '&.incorrect': incorrect('stroke'),\n },\n '& .correctIcon': {\n backgroundColor: color.correct(),\n },\n '& .incorrectIcon': {\n backgroundColor: color.incorrectWithIcon(),\n },\n '& .correctnessIcon': {\n borderRadius: theme.spacing(2),\n color: color.defaults.WHITE,\n fontSize: '16px',\n width: '16px',\n height: '16px',\n padding: '2px',\n border: `1px solid ${color.defaults.WHITE}`,\n stroke: 'initial',\n boxSizing: 'unset', // to override the default border-box in IBX\n display: 'block',\n },\n '& .smallIcon': {\n fontSize: '10px',\n width: '10px',\n height: '10px',\n },\n}));\n\nexport class Plot extends React.Component {\n static propTypes = {\n data: PropTypes.array,\n onChangeCategory: PropTypes.func,\n xBand: PropTypes.func,\n graphProps: types.GraphPropsType.isRequired,\n defineChart: PropTypes.bool,\n CustomBarElement: PropTypes.func,\n correctData: PropTypes.arrayOf(PropTypes.shape({\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n label: PropTypes.string,\n })),\n className: PropTypes.string,\n };\n\n render() {\n const { data, graphProps, xBand, CustomBarElement, onChangeCategory, defineChart, correctData } = this.props;\n\n return (\n <Group>\n {(data || []).map((d, index) => (\n <Bar\n value={d.value}\n label={d.label}\n interactive={defineChart || d.interactive}\n defineChart={defineChart}\n xBand={xBand}\n index={index}\n key={`bar-${d.label}-${d.value}-${index}`}\n onChangeCategory={(category) => onChangeCategory(index, category)}\n graphProps={graphProps}\n CustomBarElement={CustomBarElement}\n correctness={d.correctness}\n correctData={correctData}\n />\n ))}\n </Group>\n );\n }\n}\n\nexport default Plot;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/plot/dot.js
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = exports.DotPlot = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
12
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
13
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
14
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
|
+
var _react = _interopRequireDefault(require("react"));
|
|
16
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
17
|
+
var _shape = require("@visx/shape");
|
|
18
|
+
var _plot = require("@pie-lib/plot");
|
|
19
|
+
var _utils = require("../utils");
|
|
20
|
+
var _plot2 = _interopRequireDefault(require("./common/plot"));
|
|
21
|
+
var _renderUi = require("@pie-lib/render-ui");
|
|
22
|
+
var _styles = require("@mui/material/styles");
|
|
23
|
+
var _styles2 = require("../common/styles");
|
|
24
|
+
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
|
|
25
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
26
|
+
var StyledCircle = (0, _styles.styled)(_shape.Circle)(function () {
|
|
27
|
+
return {
|
|
28
|
+
fill: _renderUi.color.visualElementsColors.PLOT_FILL_COLOR,
|
|
29
|
+
'&.correct': (0, _styles2.correct)('stroke'),
|
|
30
|
+
'&.incorrect': (0, _styles2.incorrect)('stroke')
|
|
31
|
+
};
|
|
32
|
+
});
|
|
33
|
+
var CustomBarElement = function CustomBarElement(props) {
|
|
34
|
+
var index = props.index,
|
|
35
|
+
pointDiameter = props.pointDiameter,
|
|
36
|
+
barX = props.barX,
|
|
37
|
+
barWidth = props.barWidth,
|
|
38
|
+
pointHeight = props.pointHeight,
|
|
39
|
+
label = props.label,
|
|
40
|
+
value = props.value,
|
|
41
|
+
scale = props.scale,
|
|
42
|
+
dottedOverline = props.dottedOverline;
|
|
43
|
+
var r = pointDiameter / 2;
|
|
44
|
+
var cx = barX + (barWidth - pointDiameter) / 2 + r;
|
|
45
|
+
var cy = scale.y(index) - (pointHeight - pointDiameter) / 2 - r;
|
|
46
|
+
var EXTRA_PADDING = 2;
|
|
47
|
+
return dottedOverline ? /*#__PURE__*/_react["default"].createElement(_shape.Circle, {
|
|
48
|
+
key: "point-".concat(label, "-").concat(value, "-").concat(index),
|
|
49
|
+
cx: cx,
|
|
50
|
+
cy: cy,
|
|
51
|
+
r: r + EXTRA_PADDING,
|
|
52
|
+
strokeDasharray: "4,4",
|
|
53
|
+
stroke: _renderUi.color.defaults.BORDER_GRAY,
|
|
54
|
+
fill: "none"
|
|
55
|
+
}) : /*#__PURE__*/_react["default"].createElement(StyledCircle, {
|
|
56
|
+
key: "point-".concat(label, "-").concat(value, "-").concat(index),
|
|
57
|
+
cx: cx,
|
|
58
|
+
cy: cy,
|
|
59
|
+
r: r
|
|
60
|
+
});
|
|
61
|
+
};
|
|
62
|
+
CustomBarElement.propTypes = {
|
|
63
|
+
index: _propTypes["default"].number,
|
|
64
|
+
pointDiameter: _propTypes["default"].number,
|
|
65
|
+
barX: _propTypes["default"].number,
|
|
66
|
+
barWidth: _propTypes["default"].number,
|
|
67
|
+
pointHeight: _propTypes["default"].number,
|
|
68
|
+
value: _propTypes["default"].number,
|
|
69
|
+
label: _propTypes["default"].string,
|
|
70
|
+
scale: _propTypes["default"].object,
|
|
71
|
+
dottedOverline: _propTypes["default"].bool
|
|
72
|
+
};
|
|
73
|
+
var DotPlot = exports.DotPlot = /*#__PURE__*/function (_React$Component) {
|
|
74
|
+
function DotPlot() {
|
|
75
|
+
(0, _classCallCheck2["default"])(this, DotPlot);
|
|
76
|
+
return _callSuper(this, DotPlot, arguments);
|
|
77
|
+
}
|
|
78
|
+
(0, _inherits2["default"])(DotPlot, _React$Component);
|
|
79
|
+
return (0, _createClass2["default"])(DotPlot, [{
|
|
80
|
+
key: "render",
|
|
81
|
+
value: function render() {
|
|
82
|
+
var props = this.props;
|
|
83
|
+
var data = props.data,
|
|
84
|
+
graphProps = props.graphProps;
|
|
85
|
+
var _ref = graphProps || {},
|
|
86
|
+
_ref$scale = _ref.scale,
|
|
87
|
+
scale = _ref$scale === void 0 ? {} : _ref$scale,
|
|
88
|
+
_ref$size = _ref.size,
|
|
89
|
+
size = _ref$size === void 0 ? {} : _ref$size;
|
|
90
|
+
var xBand = (0, _utils.dataToXBand)(scale.x, data, size.width, 'dotPlot');
|
|
91
|
+
return /*#__PURE__*/_react["default"].createElement(_plot2["default"], (0, _extends2["default"])({}, props, {
|
|
92
|
+
xBand: xBand,
|
|
93
|
+
CustomBarElement: CustomBarElement
|
|
94
|
+
}));
|
|
95
|
+
}
|
|
96
|
+
}]);
|
|
97
|
+
}(_react["default"].Component);
|
|
98
|
+
(0, _defineProperty2["default"])(DotPlot, "propTypes", {
|
|
99
|
+
data: _propTypes["default"].array,
|
|
100
|
+
onChange: _propTypes["default"].func,
|
|
101
|
+
graphProps: _plot.types.GraphPropsType.isRequired
|
|
102
|
+
});
|
|
103
|
+
var _default = exports["default"] = function _default() {
|
|
104
|
+
return {
|
|
105
|
+
type: 'dotPlot',
|
|
106
|
+
Component: DotPlot,
|
|
107
|
+
name: 'Dot Plot'
|
|
108
|
+
};
|
|
109
|
+
};
|
|
110
|
+
//# sourceMappingURL=dot.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dot.js","names":["_react","_interopRequireDefault","require","_propTypes","_shape","_plot","_utils","_plot2","_renderUi","_styles","_styles2","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","StyledCircle","styled","Circle","fill","color","visualElementsColors","PLOT_FILL_COLOR","correct","incorrect","CustomBarElement","props","index","pointDiameter","barX","barWidth","pointHeight","label","value","scale","dottedOverline","r","cx","cy","y","EXTRA_PADDING","createElement","key","concat","strokeDasharray","stroke","defaults","BORDER_GRAY","propTypes","PropTypes","number","string","object","bool","DotPlot","exports","_React$Component","_classCallCheck2","arguments","_inherits2","_createClass2","render","data","graphProps","_ref","_ref$scale","_ref$size","size","xBand","dataToXBand","x","width","_extends2","React","Component","_defineProperty2","array","onChange","func","types","GraphPropsType","isRequired","_default","type","name"],"sources":["../../src/plot/dot.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle } from '@visx/shape';\n\nimport { types } from '@pie-lib/plot';\nimport { dataToXBand } from '../utils';\nimport Plot from './common/plot';\nimport { color } from '@pie-lib/render-ui';\nimport { styled } from '@mui/material/styles';\nimport { correct, incorrect } from '../common/styles';\n\nconst StyledCircle = styled(Circle)(() => ({\n fill: color.visualElementsColors.PLOT_FILL_COLOR,\n '&.correct': correct('stroke'),\n '&.incorrect': incorrect('stroke'),\n}));\n\nconst CustomBarElement = (props) => {\n const { index, pointDiameter, barX, barWidth, pointHeight, label, value, scale, dottedOverline } = props;\n\n const r = pointDiameter / 2;\n const cx = barX + (barWidth - pointDiameter) / 2 + r;\n const cy = scale.y(index) - (pointHeight - pointDiameter) / 2 - r;\n const EXTRA_PADDING = 2;\n\n return dottedOverline ? (\n <Circle\n key={`point-${label}-${value}-${index}`}\n cx={cx}\n cy={cy}\n r={r + EXTRA_PADDING}\n strokeDasharray=\"4,4\"\n stroke={color.defaults.BORDER_GRAY}\n fill=\"none\"\n />\n ) : (\n <StyledCircle key={`point-${label}-${value}-${index}`} cx={cx} cy={cy} r={r} />\n );\n};\n\nCustomBarElement.propTypes = {\n index: PropTypes.number,\n pointDiameter: PropTypes.number,\n barX: PropTypes.number,\n barWidth: PropTypes.number,\n pointHeight: PropTypes.number,\n value: PropTypes.number,\n label: PropTypes.string,\n scale: PropTypes.object,\n dottedOverline: PropTypes.bool,\n};\n\nexport class DotPlot extends React.Component {\n static propTypes = {\n data: PropTypes.array,\n onChange: PropTypes.func,\n graphProps: types.GraphPropsType.isRequired,\n };\n\n render() {\n const props = this.props;\n const { data, graphProps } = props;\n const { scale = {}, size = {} } = graphProps || {};\n const xBand = dataToXBand(scale.x, data, size.width, 'dotPlot');\n\n return <Plot {...props} xBand={xBand} CustomBarElement={CustomBarElement} />;\n }\n}\n\nexport default () => ({\n type: 'dotPlot',\n Component: DotPlot,\n name: 'Dot Plot',\n});\n"],"mappings":"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","ignoreList":[]}
|