@pie-lib/charting 5.18.0 → 5.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -52
- package/package.json +5 -4
- package/src/actions-button.jsx +2 -2
- package/src/axes.jsx +1 -1
- package/src/bars/common/bars.jsx +1 -1
- package/src/chart-setup.jsx +1 -1
- package/src/common/drag-handle.jsx +1 -1
- package/src/common/styles.js +1 -1
- package/src/grid.jsx +1 -1
- package/src/key-legend.jsx +1 -1
- package/src/line/common/drag-handle.jsx +1 -1
- package/src/line/common/line.jsx +1 -1
- package/src/line/line-cross.js +1 -1
- package/src/line/line-dot.js +1 -1
- package/src/mark-label.jsx +1 -1
- package/src/plot/common/plot.jsx +1 -1
- package/src/tool-menu.jsx +1 -1
- package/lib/actions-button.js +0 -174
- package/lib/actions-button.js.map +0 -1
- package/lib/axes.js +0 -614
- package/lib/axes.js.map +0 -1
- package/lib/bars/bar.js +0 -86
- package/lib/bars/bar.js.map +0 -1
- package/lib/bars/common/bars.js +0 -299
- package/lib/bars/common/bars.js.map +0 -1
- package/lib/bars/histogram.js +0 -87
- package/lib/bars/histogram.js.map +0 -1
- package/lib/chart-setup.js +0 -458
- package/lib/chart-setup.js.map +0 -1
- package/lib/chart-type.js +0 -71
- package/lib/chart-type.js.map +0 -1
- package/lib/chart-types.js +0 -31
- package/lib/chart-types.js.map +0 -1
- package/lib/chart.js +0 -447
- package/lib/chart.js.map +0 -1
- package/lib/common/drag-handle.js +0 -175
- package/lib/common/drag-handle.js.map +0 -1
- package/lib/common/drag-icon.js +0 -52
- package/lib/common/drag-icon.js.map +0 -1
- package/lib/common/styles.js +0 -40
- package/lib/common/styles.js.map +0 -1
- package/lib/grid.js +0 -141
- package/lib/grid.js.map +0 -1
- package/lib/index.js +0 -48
- package/lib/index.js.map +0 -1
- package/lib/key-legend.js +0 -111
- package/lib/key-legend.js.map +0 -1
- package/lib/line/common/drag-handle.js +0 -151
- package/lib/line/common/drag-handle.js.map +0 -1
- package/lib/line/common/line.js +0 -257
- package/lib/line/common/line.js.map +0 -1
- package/lib/line/line-cross.js +0 -203
- package/lib/line/line-cross.js.map +0 -1
- package/lib/line/line-dot.js +0 -156
- package/lib/line/line-dot.js.map +0 -1
- package/lib/mark-label.js +0 -260
- package/lib/mark-label.js.map +0 -1
- package/lib/plot/common/plot.js +0 -281
- package/lib/plot/common/plot.js.map +0 -1
- package/lib/plot/dot.js +0 -123
- package/lib/plot/dot.js.map +0 -1
- package/lib/plot/line.js +0 -152
- package/lib/plot/line.js.map +0 -1
- package/lib/shared/index.js +0 -136
- package/lib/tool-menu.js +0 -142
- package/lib/tool-menu.js.map +0 -1
- package/lib/utils.js +0 -244
- package/lib/utils.js.map +0 -1
package/lib/line/line-dot.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/line/line-dot.js"],"names":["DraggableComponent","scale","x","y","className","classes","r","correctness","interactive","rest","React","useState","isHovered","setIsHovered","allowRolloverEvent","transparentHandle","handle","value","color","defaults","BORDER_GRAY","propTypes","PropTypes","object","number","string","shape","label","LineDot","props","data","graphProps","size","xBand","width","Component","array","onChange","func","types","GraphPropsType","isRequired","type","name"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { color } from '../../../render-ui/src/index';\nimport { dataToXBand } from '../utils';\nimport RawLine from './common/line';\nimport classNames from 'classnames';\n\nconst DraggableComponent = ({ scale, x, y, className, classes, r, correctness, interactive, ...rest }) => {\n const [isHovered, setIsHovered] = React.useState(false);\n const allowRolloverEvent = !correctness && interactive;\n\n return (\n <g onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>\n <circle\n cx={scale.x(x)}\n cy={scale.y(y)}\n r={r * 3}\n className={classNames(classes.transparentHandle, className)}\n pointerEvents={correctness ? 'none' : ''}\n {...rest}\n />\n <circle\n cx={scale.x(x)}\n cy={scale.y(y)}\n r={r}\n className={classNames(className, classes.handle, correctness && correctness.value)}\n {...rest}\n />\n {isHovered && allowRolloverEvent && (\n <rect\n x={scale.x(x) - r * 2}\n y={scale.y(y) - r * 2}\n width={r * 4}\n height={r * 4}\n stroke={color.defaults.BORDER_GRAY}\n strokeWidth=\"1\"\n fill=\"none\"\n />\n )}\n </g>\n );\n};\n\nDraggableComponent.propTypes = {\n scale: PropTypes.object,\n x: PropTypes.number,\n y: PropTypes.number,\n r: PropTypes.number,\n className: PropTypes.string,\n classes: PropTypes.object,\n correctness: PropTypes.shape({\n value: PropTypes.string,\n label: PropTypes.string,\n }),\n};\n\nexport class LineDot 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, 'lineDot');\n\n return <RawLine {...props} xBand={xBand} CustomDraggableComponent={DraggableComponent} />;\n }\n}\n\nexport default () => ({\n type: 'lineDot',\n Component: LineDot,\n name: 'Line Dot',\n});\n"],"file":"line-dot.js"}
|
package/lib/mark-label.js
DELETED
|
@@ -1,260 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
|
-
Object.defineProperty(exports, "__esModule", {
|
|
8
|
-
value: true
|
|
9
|
-
});
|
|
10
|
-
exports["default"] = exports.MarkLabel = void 0;
|
|
11
|
-
|
|
12
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
-
|
|
14
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
|
-
|
|
16
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
-
|
|
18
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
19
|
-
|
|
20
|
-
var _styles = require("@material-ui/core/styles");
|
|
21
|
-
|
|
22
|
-
var _reactInputAutosize = _interopRequireDefault(require("react-input-autosize"));
|
|
23
|
-
|
|
24
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
25
|
-
|
|
26
|
-
var _plot = require("@pie-lib/plot");
|
|
27
|
-
|
|
28
|
-
var _styles2 = require("./common/styles");
|
|
29
|
-
|
|
30
|
-
var _index = require("./shared/index");
|
|
31
|
-
|
|
32
|
-
var _mathRendering = require("@pie-lib/math-rendering");
|
|
33
|
-
|
|
34
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
35
|
-
|
|
36
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
37
|
-
|
|
38
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
39
|
-
|
|
40
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
41
|
-
|
|
42
|
-
var styles = function styles(theme) {
|
|
43
|
-
return {
|
|
44
|
-
input: {
|
|
45
|
-
"float": 'right',
|
|
46
|
-
fontFamily: theme.typography.fontFamily,
|
|
47
|
-
fontSize: theme.typography.fontSize,
|
|
48
|
-
border: 'none',
|
|
49
|
-
'&.correct': (0, _styles2.correct)('color'),
|
|
50
|
-
'&.incorrect': (0, _styles2.incorrect)('color'),
|
|
51
|
-
'&.disabled': {
|
|
52
|
-
backgroundColor: 'transparent !important'
|
|
53
|
-
},
|
|
54
|
-
'&.error': {
|
|
55
|
-
border: "2px solid ".concat(theme.palette.error.main)
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
|
-
mathInput: {
|
|
59
|
-
pointerEvents: 'auto',
|
|
60
|
-
textAlign: 'center',
|
|
61
|
-
fontSize: theme.typography.fontSize + 2,
|
|
62
|
-
fontFamily: theme.typography.fontFamily,
|
|
63
|
-
color: _index.color.primaryDark(),
|
|
64
|
-
paddingTop: theme.typography.fontSize / 2
|
|
65
|
-
},
|
|
66
|
-
disabled: _objectSpread(_objectSpread({}, (0, _styles2.disabled)('color')), {}, {
|
|
67
|
-
backgroundColor: 'transparent !important'
|
|
68
|
-
}),
|
|
69
|
-
error: {
|
|
70
|
-
border: "2px solid ".concat(theme.palette.error.main)
|
|
71
|
-
},
|
|
72
|
-
correct: _objectSpread({}, (0, _styles2.correct)('color')),
|
|
73
|
-
incorrect: _objectSpread({}, (0, _styles2.incorrect)('color'))
|
|
74
|
-
};
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
function isFractionFormat(label) {
|
|
78
|
-
var trimmedLabel = (label === null || label === void 0 ? void 0 : label.trim()) || '';
|
|
79
|
-
var fracRegex = new RegExp(/^[1-9]*[0-9]*\s?[1-9][0-9]*\/[1-9][0-9]*$/);
|
|
80
|
-
return fracRegex.test(trimmedLabel);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
function getLabelMathFormat(label) {
|
|
84
|
-
var trimmedLabel = (label === null || label === void 0 ? void 0 : label.trim()) || '';
|
|
85
|
-
var fraction;
|
|
86
|
-
var mixedNr = '';
|
|
87
|
-
var improperFraction = trimmedLabel.split(' ');
|
|
88
|
-
|
|
89
|
-
if (improperFraction[1] && improperFraction[1].includes('/')) {
|
|
90
|
-
fraction = improperFraction[1].split('/') || '';
|
|
91
|
-
} else {
|
|
92
|
-
fraction = (trimmedLabel === null || trimmedLabel === void 0 ? void 0 : trimmedLabel.split('/')) || '';
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
var formattedLLabel;
|
|
96
|
-
|
|
97
|
-
if (isFractionFormat(label)) {
|
|
98
|
-
if (improperFraction[0] && improperFraction[1]) {
|
|
99
|
-
mixedNr = improperFraction[0];
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
formattedLLabel = "\\(".concat(mixedNr, "\\frac{").concat(fraction[0], "}{").concat(fraction[1], "}\\)");
|
|
103
|
-
return formattedLLabel;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
return undefined;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
var MarkLabel = function MarkLabel(props) {
|
|
110
|
-
var _classNames;
|
|
111
|
-
|
|
112
|
-
// eslint-disable-next-line no-unused-vars
|
|
113
|
-
var _useState = (0, _react.useState)(null),
|
|
114
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
115
|
-
input = _useState2[0],
|
|
116
|
-
setInput = _useState2[1];
|
|
117
|
-
|
|
118
|
-
var _ref = (0, _react.useCallback)(function (node) {
|
|
119
|
-
return setInput(node);
|
|
120
|
-
}, null);
|
|
121
|
-
|
|
122
|
-
var mark = props.mark,
|
|
123
|
-
classes = props.classes,
|
|
124
|
-
disabled = props.disabled,
|
|
125
|
-
externalInputRef = props.inputRef,
|
|
126
|
-
barWidth = props.barWidth,
|
|
127
|
-
rotate = props.rotate,
|
|
128
|
-
correctness = props.correctness,
|
|
129
|
-
autoFocus = props.autoFocus,
|
|
130
|
-
error = props.error,
|
|
131
|
-
isHiddenLabel = props.isHiddenLabel,
|
|
132
|
-
limitCharacters = props.limitCharacters;
|
|
133
|
-
|
|
134
|
-
var _useState3 = (0, _react.useState)(mark.label),
|
|
135
|
-
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
136
|
-
label = _useState4[0],
|
|
137
|
-
setLabel = _useState4[1];
|
|
138
|
-
|
|
139
|
-
var _useState5 = (0, _react.useState)(getLabelMathFormat(mark.label)),
|
|
140
|
-
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
|
141
|
-
mathLabel = _useState6[0],
|
|
142
|
-
setMathLabel = _useState6[1];
|
|
143
|
-
|
|
144
|
-
var _useState7 = (0, _react.useState)(false),
|
|
145
|
-
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
|
|
146
|
-
isEditing = _useState8[0],
|
|
147
|
-
setIsEditing = _useState8[1];
|
|
148
|
-
|
|
149
|
-
var root = (0, _react.useRef)(null);
|
|
150
|
-
|
|
151
|
-
var onChange = function onChange(e) {
|
|
152
|
-
if (limitCharacters && e.target.value && e.target.value.length > 20) {
|
|
153
|
-
return;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
setLabel(e.target.value);
|
|
157
|
-
};
|
|
158
|
-
|
|
159
|
-
var isMathRendering = function isMathRendering() {
|
|
160
|
-
return isEditing === false && mathLabel !== undefined;
|
|
161
|
-
};
|
|
162
|
-
|
|
163
|
-
var onChangeProp = function onChangeProp(e) {
|
|
164
|
-
setMathLabel(getLabelMathFormat(mark.label));
|
|
165
|
-
setIsEditing(false);
|
|
166
|
-
props.onChange(e.target.value);
|
|
167
|
-
};
|
|
168
|
-
|
|
169
|
-
var extraStyle = {};
|
|
170
|
-
|
|
171
|
-
if (rotate) {
|
|
172
|
-
extraStyle = {
|
|
173
|
-
width: 'unset',
|
|
174
|
-
textAlign: 'left'
|
|
175
|
-
};
|
|
176
|
-
} // useState only sets the value once, to synch props to state need useEffect
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
(0, _react.useEffect)(function () {
|
|
180
|
-
setLabel(mark.label);
|
|
181
|
-
}, [mark.label]);
|
|
182
|
-
(0, _react.useEffect)(function () {
|
|
183
|
-
(0, _mathRendering.renderMath)(root);
|
|
184
|
-
}, []);
|
|
185
|
-
return isMathRendering() ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
186
|
-
ref: function ref(r) {
|
|
187
|
-
root = r;
|
|
188
|
-
externalInputRef(r);
|
|
189
|
-
},
|
|
190
|
-
dangerouslySetInnerHTML: {
|
|
191
|
-
__html: getLabelMathFormat(label)
|
|
192
|
-
},
|
|
193
|
-
className: (0, _classnames["default"])(classes.mathInput, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.disabled, disabled), (0, _defineProperty2["default"])(_classNames, classes.error, error), (0, _defineProperty2["default"])(_classNames, classes.correct, mark.editable && (correctness === null || correctness === void 0 ? void 0 : correctness.label) === 'correct'), (0, _defineProperty2["default"])(_classNames, classes.incorrect, mark.editable && (correctness === null || correctness === void 0 ? void 0 : correctness.label) === 'incorrect'), _classNames)),
|
|
194
|
-
onClick: function onClick() {
|
|
195
|
-
return setIsEditing(true);
|
|
196
|
-
},
|
|
197
|
-
style: {
|
|
198
|
-
minWidth: barWidth,
|
|
199
|
-
position: 'fixed',
|
|
200
|
-
transformOrigin: 'left',
|
|
201
|
-
transform: "rotate(".concat(rotate, "deg)"),
|
|
202
|
-
visibility: isHiddenLabel ? 'hidden' : 'unset'
|
|
203
|
-
}
|
|
204
|
-
}) : /*#__PURE__*/_react["default"].createElement(_reactInputAutosize["default"], {
|
|
205
|
-
inputRef: function inputRef(r) {
|
|
206
|
-
_ref(r);
|
|
207
|
-
|
|
208
|
-
externalInputRef(r);
|
|
209
|
-
},
|
|
210
|
-
autoFocus: isEditing || autoFocus,
|
|
211
|
-
disabled: disabled,
|
|
212
|
-
inputClassName: (0, _classnames["default"])(classes.input, correctness && mark.editable ? correctness.label : null, disabled && 'disabled', error && 'error'),
|
|
213
|
-
inputStyle: _objectSpread({
|
|
214
|
-
minWidth: barWidth,
|
|
215
|
-
textAlign: 'center',
|
|
216
|
-
background: 'transparent',
|
|
217
|
-
boxSizing: 'border-box',
|
|
218
|
-
paddingLeft: 0,
|
|
219
|
-
paddingRight: 0
|
|
220
|
-
}, extraStyle),
|
|
221
|
-
value: label,
|
|
222
|
-
style: {
|
|
223
|
-
position: 'fixed',
|
|
224
|
-
pointerEvents: 'auto',
|
|
225
|
-
top: 0,
|
|
226
|
-
left: 0,
|
|
227
|
-
minWidth: barWidth,
|
|
228
|
-
transformOrigin: 'left',
|
|
229
|
-
transform: "rotate(".concat(rotate, "deg)"),
|
|
230
|
-
visibility: isHiddenLabel ? 'hidden' : 'unset'
|
|
231
|
-
},
|
|
232
|
-
onChange: onChange,
|
|
233
|
-
onBlur: onChangeProp
|
|
234
|
-
});
|
|
235
|
-
};
|
|
236
|
-
|
|
237
|
-
exports.MarkLabel = MarkLabel;
|
|
238
|
-
MarkLabel.propTypes = {
|
|
239
|
-
autoFocus: _propTypes["default"].bool,
|
|
240
|
-
disabled: _propTypes["default"].bool,
|
|
241
|
-
error: _propTypes["default"].any,
|
|
242
|
-
onChange: _propTypes["default"].func,
|
|
243
|
-
graphProps: _plot.types.GraphPropsType,
|
|
244
|
-
classes: _propTypes["default"].object,
|
|
245
|
-
inputRef: _propTypes["default"].func,
|
|
246
|
-
mark: _propTypes["default"].object,
|
|
247
|
-
barWidth: _propTypes["default"].number,
|
|
248
|
-
rotate: _propTypes["default"].number,
|
|
249
|
-
correctness: _propTypes["default"].shape({
|
|
250
|
-
value: _propTypes["default"].string,
|
|
251
|
-
label: _propTypes["default"].string
|
|
252
|
-
}),
|
|
253
|
-
isHiddenLabel: _propTypes["default"].bool,
|
|
254
|
-
limitCharacters: _propTypes["default"].bool
|
|
255
|
-
};
|
|
256
|
-
|
|
257
|
-
var _default = (0, _styles.withStyles)(styles)(MarkLabel);
|
|
258
|
-
|
|
259
|
-
exports["default"] = _default;
|
|
260
|
-
//# sourceMappingURL=mark-label.js.map
|
package/lib/mark-label.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/mark-label.jsx"],"names":["styles","theme","input","fontFamily","typography","fontSize","border","backgroundColor","palette","error","main","mathInput","pointerEvents","textAlign","color","primaryDark","paddingTop","disabled","correct","incorrect","isFractionFormat","label","trimmedLabel","trim","fracRegex","RegExp","test","getLabelMathFormat","fraction","mixedNr","improperFraction","split","includes","formattedLLabel","undefined","MarkLabel","props","setInput","_ref","node","mark","classes","externalInputRef","inputRef","barWidth","rotate","correctness","autoFocus","isHiddenLabel","limitCharacters","setLabel","mathLabel","setMathLabel","isEditing","setIsEditing","root","onChange","e","target","value","length","isMathRendering","onChangeProp","extraStyle","width","r","__html","editable","minWidth","position","transformOrigin","transform","visibility","background","boxSizing","paddingLeft","paddingRight","top","left","propTypes","PropTypes","bool","any","func","graphProps","types","GraphPropsType","object","number","shape","string"],"mappings":"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","sourcesContent":["import React, { useState, useCallback, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport AutosizeInput from 'react-input-autosize';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { correct, incorrect, disabled } from './common/styles';\nimport { color } from '../../render-ui/src/index';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nconst styles = (theme) => ({\n input: {\n float: 'right',\n fontFamily: theme.typography.fontFamily,\n fontSize: theme.typography.fontSize,\n border: 'none',\n '&.correct': correct('color'),\n '&.incorrect': incorrect('color'),\n '&.disabled': {\n backgroundColor: 'transparent !important',\n },\n '&.error': { border: `2px solid ${theme.palette.error.main}` },\n },\n mathInput: {\n pointerEvents: 'auto',\n textAlign: 'center',\n fontSize: theme.typography.fontSize + 2,\n fontFamily: theme.typography.fontFamily,\n color: color.primaryDark(),\n paddingTop: theme.typography.fontSize / 2,\n },\n disabled: {\n ...disabled('color'),\n backgroundColor: 'transparent !important',\n },\n error: {\n border: `2px solid ${theme.palette.error.main}`,\n },\n correct: {\n ...correct('color'),\n },\n incorrect: {\n ...incorrect('color'),\n },\n});\n\nfunction isFractionFormat(label) {\n const trimmedLabel = label?.trim() || '';\n const fracRegex = new RegExp(/^[1-9]*[0-9]*\\s?[1-9][0-9]*\\/[1-9][0-9]*$/);\n return fracRegex.test(trimmedLabel);\n}\n\nfunction getLabelMathFormat(label) {\n const trimmedLabel = label?.trim() || '';\n let fraction;\n let mixedNr = '';\n let improperFraction = trimmedLabel.split(' ');\n if (improperFraction[1] && improperFraction[1].includes('/')) {\n fraction = improperFraction[1].split('/') || '';\n } else {\n fraction = trimmedLabel?.split('/') || '';\n }\n\n let formattedLLabel;\n if (isFractionFormat(label)) {\n if (improperFraction[0] && improperFraction[1]) {\n mixedNr = improperFraction[0];\n }\n formattedLLabel = `\\\\(${mixedNr}\\\\frac{${fraction[0]}}{${fraction[1]}}\\\\)`;\n return formattedLLabel;\n }\n return undefined;\n}\n\nexport const MarkLabel = (props) => {\n // eslint-disable-next-line no-unused-vars\n const [input, setInput] = useState(null);\n const _ref = useCallback((node) => setInput(node), null);\n\n const {\n mark,\n classes,\n disabled,\n inputRef: externalInputRef,\n barWidth,\n rotate,\n correctness,\n autoFocus,\n error,\n isHiddenLabel,\n limitCharacters,\n } = props;\n\n const [label, setLabel] = useState(mark.label);\n const [mathLabel, setMathLabel] = useState(getLabelMathFormat(mark.label));\n const [isEditing, setIsEditing] = useState(false);\n let root = useRef(null);\n\n const onChange = (e) => {\n if (limitCharacters && e.target.value && e.target.value.length > 20) {\n return;\n }\n\n setLabel(e.target.value);\n };\n\n const isMathRendering = () => {\n return isEditing === false && mathLabel !== undefined;\n };\n\n const onChangeProp = (e) => {\n setMathLabel(getLabelMathFormat(mark.label));\n setIsEditing(false);\n props.onChange(e.target.value);\n };\n let extraStyle = {};\n\n if (rotate) {\n extraStyle = {\n width: 'unset',\n textAlign: 'left',\n };\n }\n\n // useState only sets the value once, to synch props to state need useEffect\n useEffect(() => {\n setLabel(mark.label);\n }, [mark.label]);\n\n useEffect(() => {\n renderMath(root);\n }, []);\n\n return isMathRendering() ? (\n <div\n ref={(r) => {\n root = r;\n externalInputRef(r);\n }}\n dangerouslySetInnerHTML={{ __html: getLabelMathFormat(label) }}\n className={classNames(classes.mathInput, {\n [classes.disabled]: disabled,\n [classes.error]: error,\n [classes.correct]: mark.editable && correctness?.label === 'correct',\n [classes.incorrect]: mark.editable && correctness?.label === 'incorrect',\n })}\n onClick={() => setIsEditing(true)}\n style={{\n minWidth: barWidth,\n position: 'fixed',\n transformOrigin: 'left',\n transform: `rotate(${rotate}deg)`,\n visibility: isHiddenLabel ? 'hidden' : 'unset',\n }}\n ></div>\n ) : (\n <AutosizeInput\n inputRef={(r) => {\n _ref(r);\n externalInputRef(r);\n }}\n autoFocus={isEditing || autoFocus}\n disabled={disabled}\n inputClassName={classNames(\n classes.input,\n correctness && mark.editable ? correctness.label : null,\n disabled && 'disabled',\n error && 'error',\n )}\n inputStyle={{\n minWidth: barWidth,\n textAlign: 'center',\n background: 'transparent',\n boxSizing: 'border-box',\n paddingLeft: 0,\n paddingRight: 0,\n ...extraStyle,\n }}\n value={label}\n style={{\n position: 'fixed',\n pointerEvents: 'auto',\n top: 0,\n left: 0,\n minWidth: barWidth,\n transformOrigin: 'left',\n transform: `rotate(${rotate}deg)`,\n visibility: isHiddenLabel ? 'hidden' : 'unset',\n }}\n onChange={onChange}\n onBlur={onChangeProp}\n />\n );\n};\n\nMarkLabel.propTypes = {\n autoFocus: PropTypes.bool,\n disabled: PropTypes.bool,\n error: PropTypes.any,\n onChange: PropTypes.func,\n graphProps: types.GraphPropsType,\n classes: PropTypes.object,\n inputRef: PropTypes.func,\n mark: PropTypes.object,\n barWidth: PropTypes.number,\n rotate: PropTypes.number,\n correctness: PropTypes.shape({\n value: PropTypes.string,\n label: PropTypes.string,\n }),\n isHiddenLabel: PropTypes.bool,\n limitCharacters: PropTypes.bool,\n};\n\nexport default withStyles(styles)(MarkLabel);\n"],"file":"mark-label.js"}
|
package/lib/plot/common/plot.js
DELETED
|
@@ -1,281 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
|
-
Object.defineProperty(exports, "__esModule", {
|
|
8
|
-
value: true
|
|
9
|
-
});
|
|
10
|
-
exports["default"] = exports.RawPlot = exports.Plot = void 0;
|
|
11
|
-
|
|
12
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
13
|
-
|
|
14
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
15
|
-
|
|
16
|
-
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
17
|
-
|
|
18
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
19
|
-
|
|
20
|
-
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
21
|
-
|
|
22
|
-
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
23
|
-
|
|
24
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
25
|
-
|
|
26
|
-
var _react = _interopRequireDefault(require("react"));
|
|
27
|
-
|
|
28
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
29
|
-
|
|
30
|
-
var _plot = require("@pie-lib/plot");
|
|
31
|
-
|
|
32
|
-
var _group = require("@vx/group");
|
|
33
|
-
|
|
34
|
-
var _index = require("@material-ui/core/styles/index");
|
|
35
|
-
|
|
36
|
-
var _dragHandle = _interopRequireWildcard(require("../../common/drag-handle"));
|
|
37
|
-
|
|
38
|
-
var _debug = _interopRequireDefault(require("debug"));
|
|
39
|
-
|
|
40
|
-
var _index2 = require("./../../shared/index");
|
|
41
|
-
|
|
42
|
-
var _utils = require("../../utils");
|
|
43
|
-
|
|
44
|
-
var _styles = require("../../common/styles");
|
|
45
|
-
|
|
46
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
47
|
-
|
|
48
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
49
|
-
|
|
50
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
|
|
51
|
-
|
|
52
|
-
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; } }
|
|
53
|
-
|
|
54
|
-
var log = (0, _debug["default"])('pie-lib:chart:bars');
|
|
55
|
-
|
|
56
|
-
var RawPlot = /*#__PURE__*/function (_React$Component) {
|
|
57
|
-
(0, _inherits2["default"])(RawPlot, _React$Component);
|
|
58
|
-
|
|
59
|
-
var _super = _createSuper(RawPlot);
|
|
60
|
-
|
|
61
|
-
function RawPlot(props) {
|
|
62
|
-
var _this;
|
|
63
|
-
|
|
64
|
-
(0, _classCallCheck2["default"])(this, RawPlot);
|
|
65
|
-
_this = _super.call(this, props);
|
|
66
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseEnter", function () {
|
|
67
|
-
_this.setState({
|
|
68
|
-
isHovered: true
|
|
69
|
-
});
|
|
70
|
-
});
|
|
71
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseLeave", function () {
|
|
72
|
-
_this.setState({
|
|
73
|
-
isHovered: false
|
|
74
|
-
});
|
|
75
|
-
});
|
|
76
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setDragValue", function (dragValue) {
|
|
77
|
-
return _this.setState({
|
|
78
|
-
dragValue: dragValue
|
|
79
|
-
});
|
|
80
|
-
});
|
|
81
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dragStop", function () {
|
|
82
|
-
var _this$props = _this.props,
|
|
83
|
-
label = _this$props.label,
|
|
84
|
-
onChangeCategory = _this$props.onChangeCategory;
|
|
85
|
-
var dragValue = _this.state.dragValue;
|
|
86
|
-
log('[dragStop]', dragValue);
|
|
87
|
-
|
|
88
|
-
if (dragValue !== undefined) {
|
|
89
|
-
onChangeCategory({
|
|
90
|
-
label: label,
|
|
91
|
-
value: dragValue
|
|
92
|
-
});
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
_this.setDragValue(undefined);
|
|
96
|
-
});
|
|
97
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dragValue", function (existing, next) {
|
|
98
|
-
log('[dragValue] next:', next);
|
|
99
|
-
|
|
100
|
-
_this.setDragValue(next);
|
|
101
|
-
});
|
|
102
|
-
_this.state = {
|
|
103
|
-
dragValue: undefined,
|
|
104
|
-
isHovered: false
|
|
105
|
-
};
|
|
106
|
-
return _this;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
(0, _createClass2["default"])(RawPlot, [{
|
|
110
|
-
key: "render",
|
|
111
|
-
value: function render() {
|
|
112
|
-
var _this2 = this;
|
|
113
|
-
|
|
114
|
-
var _this$props2 = this.props,
|
|
115
|
-
graphProps = _this$props2.graphProps,
|
|
116
|
-
value = _this$props2.value,
|
|
117
|
-
label = _this$props2.label,
|
|
118
|
-
classes = _this$props2.classes,
|
|
119
|
-
xBand = _this$props2.xBand,
|
|
120
|
-
index = _this$props2.index,
|
|
121
|
-
CustomBarElement = _this$props2.CustomBarElement,
|
|
122
|
-
interactive = _this$props2.interactive,
|
|
123
|
-
correctness = _this$props2.correctness,
|
|
124
|
-
defineChart = _this$props2.defineChart;
|
|
125
|
-
var scale = graphProps.scale,
|
|
126
|
-
range = graphProps.range,
|
|
127
|
-
size = graphProps.size;
|
|
128
|
-
|
|
129
|
-
var _ref = range || {},
|
|
130
|
-
max = _ref.max;
|
|
131
|
-
|
|
132
|
-
var _this$state = this.state,
|
|
133
|
-
dragValue = _this$state.dragValue,
|
|
134
|
-
isHovered = _this$state.isHovered;
|
|
135
|
-
var v = Number.isFinite(dragValue) ? dragValue : value;
|
|
136
|
-
var barWidth = xBand.bandwidth();
|
|
137
|
-
var barHeight = scale.y(range.max - v);
|
|
138
|
-
var barX = xBand((0, _utils.bandKey)({
|
|
139
|
-
label: label
|
|
140
|
-
}, index));
|
|
141
|
-
log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);
|
|
142
|
-
var values = [];
|
|
143
|
-
|
|
144
|
-
for (var i = 0; i < v; i++) {
|
|
145
|
-
values.push(i);
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
var pointHeight = size.height / max;
|
|
149
|
-
var pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;
|
|
150
|
-
var Component = interactive ? _dragHandle["default"] : _dragHandle.DragHandle;
|
|
151
|
-
var allowRolloverEvent = interactive && !correctness;
|
|
152
|
-
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("g", {
|
|
153
|
-
onMouseEnter: this.handleMouseEnter,
|
|
154
|
-
onMouseLeave: this.handleMouseLeave,
|
|
155
|
-
onTouchStart: this.handleMouseEnter,
|
|
156
|
-
onTouchEnd: this.handleMouseLeave
|
|
157
|
-
}, isHovered && allowRolloverEvent && /*#__PURE__*/_react["default"].createElement("rect", {
|
|
158
|
-
x: barX,
|
|
159
|
-
y: scale.y(v),
|
|
160
|
-
width: barWidth,
|
|
161
|
-
height: values !== null && values !== void 0 && values.length ? pointHeight * values.length : 0,
|
|
162
|
-
stroke: _index2.color.defaults.BORDER_GRAY,
|
|
163
|
-
strokeWidth: '4px',
|
|
164
|
-
fill: 'transparent'
|
|
165
|
-
}), values.map(function (index) {
|
|
166
|
-
return CustomBarElement({
|
|
167
|
-
index: index,
|
|
168
|
-
pointDiameter: pointDiameter,
|
|
169
|
-
barX: barX,
|
|
170
|
-
barWidth: barWidth,
|
|
171
|
-
pointHeight: pointHeight,
|
|
172
|
-
label: label,
|
|
173
|
-
value: value,
|
|
174
|
-
classes: classes,
|
|
175
|
-
scale: scale
|
|
176
|
-
});
|
|
177
|
-
}), /*#__PURE__*/_react["default"].createElement(Component, {
|
|
178
|
-
x: barX,
|
|
179
|
-
y: v,
|
|
180
|
-
interactive: interactive,
|
|
181
|
-
width: barWidth,
|
|
182
|
-
onDrag: function onDrag(v) {
|
|
183
|
-
return _this2.dragValue(value, v);
|
|
184
|
-
},
|
|
185
|
-
onDragStop: this.dragStop,
|
|
186
|
-
graphProps: graphProps,
|
|
187
|
-
correctness: correctness,
|
|
188
|
-
isHovered: isHovered,
|
|
189
|
-
defineChart: defineChart,
|
|
190
|
-
color: _index2.color.primaryDark()
|
|
191
|
-
})));
|
|
192
|
-
}
|
|
193
|
-
}]);
|
|
194
|
-
return RawPlot;
|
|
195
|
-
}(_react["default"].Component);
|
|
196
|
-
|
|
197
|
-
exports.RawPlot = RawPlot;
|
|
198
|
-
(0, _defineProperty2["default"])(RawPlot, "propTypes", {
|
|
199
|
-
onChangeCategory: _propTypes["default"].func,
|
|
200
|
-
value: _propTypes["default"].number,
|
|
201
|
-
classes: _propTypes["default"].object,
|
|
202
|
-
label: _propTypes["default"].string,
|
|
203
|
-
xBand: _propTypes["default"].func,
|
|
204
|
-
index: _propTypes["default"].number.isRequired,
|
|
205
|
-
graphProps: _plot.types.GraphPropsType.isRequired,
|
|
206
|
-
CustomBarElement: _propTypes["default"].func,
|
|
207
|
-
interactive: _propTypes["default"].bool,
|
|
208
|
-
correctness: _propTypes["default"].shape({
|
|
209
|
-
value: _propTypes["default"].string,
|
|
210
|
-
label: _propTypes["default"].string
|
|
211
|
-
})
|
|
212
|
-
});
|
|
213
|
-
var Bar = (0, _index.withStyles)(function () {
|
|
214
|
-
return {
|
|
215
|
-
dot: {
|
|
216
|
-
fill: _index2.color.visualElementsColors.PLOT_FILL_COLOR,
|
|
217
|
-
'&.correct': (0, _styles.correct)('stroke'),
|
|
218
|
-
'&.incorrect': (0, _styles.incorrect)('stroke')
|
|
219
|
-
},
|
|
220
|
-
line: {
|
|
221
|
-
stroke: _index2.color.visualElementsColors.PLOT_FILL_COLOR,
|
|
222
|
-
'&.correct': (0, _styles.correct)('stroke'),
|
|
223
|
-
'&.incorrect': (0, _styles.incorrect)('stroke')
|
|
224
|
-
}
|
|
225
|
-
};
|
|
226
|
-
})(RawPlot);
|
|
227
|
-
|
|
228
|
-
var Plot = /*#__PURE__*/function (_React$Component2) {
|
|
229
|
-
(0, _inherits2["default"])(Plot, _React$Component2);
|
|
230
|
-
|
|
231
|
-
var _super2 = _createSuper(Plot);
|
|
232
|
-
|
|
233
|
-
function Plot() {
|
|
234
|
-
(0, _classCallCheck2["default"])(this, Plot);
|
|
235
|
-
return _super2.apply(this, arguments);
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
(0, _createClass2["default"])(Plot, [{
|
|
239
|
-
key: "render",
|
|
240
|
-
value: function render() {
|
|
241
|
-
var _this$props3 = this.props,
|
|
242
|
-
data = _this$props3.data,
|
|
243
|
-
graphProps = _this$props3.graphProps,
|
|
244
|
-
xBand = _this$props3.xBand,
|
|
245
|
-
CustomBarElement = _this$props3.CustomBarElement,
|
|
246
|
-
_onChangeCategory = _this$props3.onChangeCategory,
|
|
247
|
-
defineChart = _this$props3.defineChart;
|
|
248
|
-
return /*#__PURE__*/_react["default"].createElement(_group.Group, null, (data || []).map(function (d, index) {
|
|
249
|
-
return /*#__PURE__*/_react["default"].createElement(Bar, {
|
|
250
|
-
value: d.value,
|
|
251
|
-
label: d.label,
|
|
252
|
-
interactive: defineChart || d.interactive,
|
|
253
|
-
defineChart: defineChart,
|
|
254
|
-
xBand: xBand,
|
|
255
|
-
index: index,
|
|
256
|
-
key: "bar-".concat(d.label, "-").concat(d.value, "-").concat(index),
|
|
257
|
-
onChangeCategory: function onChangeCategory(category) {
|
|
258
|
-
return _onChangeCategory(index, category);
|
|
259
|
-
},
|
|
260
|
-
graphProps: graphProps,
|
|
261
|
-
CustomBarElement: CustomBarElement,
|
|
262
|
-
correctness: d.correctness
|
|
263
|
-
});
|
|
264
|
-
}));
|
|
265
|
-
}
|
|
266
|
-
}]);
|
|
267
|
-
return Plot;
|
|
268
|
-
}(_react["default"].Component);
|
|
269
|
-
|
|
270
|
-
exports.Plot = Plot;
|
|
271
|
-
(0, _defineProperty2["default"])(Plot, "propTypes", {
|
|
272
|
-
data: _propTypes["default"].array,
|
|
273
|
-
onChangeCategory: _propTypes["default"].func,
|
|
274
|
-
xBand: _propTypes["default"].func,
|
|
275
|
-
graphProps: _plot.types.GraphPropsType.isRequired,
|
|
276
|
-
defineChart: _propTypes["default"].bool,
|
|
277
|
-
CustomBarElement: _propTypes["default"].func
|
|
278
|
-
});
|
|
279
|
-
var _default = Plot;
|
|
280
|
-
exports["default"] = _default;
|
|
281
|
-
//# sourceMappingURL=plot.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/plot/common/plot.jsx"],"names":["log","RawPlot","props","setState","isHovered","dragValue","label","onChangeCategory","state","undefined","value","setDragValue","existing","next","graphProps","classes","xBand","index","CustomBarElement","interactive","correctness","defineChart","scale","range","size","max","v","Number","isFinite","barWidth","bandwidth","barHeight","y","barX","values","i","push","pointHeight","height","pointDiameter","Component","DraggableHandle","DragHandle","allowRolloverEvent","handleMouseEnter","handleMouseLeave","length","color","defaults","BORDER_GRAY","map","dragStop","primaryDark","React","PropTypes","func","number","object","string","isRequired","types","GraphPropsType","bool","shape","Bar","dot","fill","visualElementsColors","PLOT_FILL_COLOR","line","stroke","Plot","data","d","category","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { Group } from '@vx/group';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport DraggableHandle, { DragHandle } from '../../common/drag-handle';\nimport debug from 'debug';\nimport { color } from '../../../../render-ui/src/index';\nimport { bandKey } from '../../utils';\nimport { correct, incorrect } from '../../common/styles';\n\nconst log = debug('pie-lib:chart:bars');\n\nexport class RawPlot extends React.Component {\n static propTypes = {\n onChangeCategory: PropTypes.func,\n value: PropTypes.number,\n classes: PropTypes.object,\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 };\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 render() {\n const {\n graphProps,\n value,\n label,\n classes,\n xBand,\n index,\n CustomBarElement,\n interactive,\n correctness,\n defineChart,\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 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 classes,\n scale,\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 />\n </g>\n </React.Fragment>\n );\n }\n}\n\nconst Bar = withStyles(() => ({\n dot: {\n fill: color.visualElementsColors.PLOT_FILL_COLOR,\n '&.correct': correct('stroke'),\n '&.incorrect': incorrect('stroke'),\n },\n line: {\n stroke: color.visualElementsColors.PLOT_FILL_COLOR,\n '&.correct': correct('stroke'),\n '&.incorrect': incorrect('stroke'),\n },\n}))(RawPlot);\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 };\n\n render() {\n const { data, graphProps, xBand, CustomBarElement, onChangeCategory, defineChart } = 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 />\n ))}\n </Group>\n );\n }\n}\n\nexport default Plot;\n"],"file":"plot.js"}
|