@pie-lib/charting 5.16.0-beta.1 → 5.16.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/package.json +6 -6
  3. package/lib/axes.js +0 -643
  4. package/lib/axes.js.map +0 -1
  5. package/lib/bars/bar.js +0 -86
  6. package/lib/bars/bar.js.map +0 -1
  7. package/lib/bars/common/bars.js +0 -301
  8. package/lib/bars/common/bars.js.map +0 -1
  9. package/lib/bars/histogram.js +0 -87
  10. package/lib/bars/histogram.js.map +0 -1
  11. package/lib/chart-setup.js +0 -458
  12. package/lib/chart-setup.js.map +0 -1
  13. package/lib/chart-type.js +0 -71
  14. package/lib/chart-type.js.map +0 -1
  15. package/lib/chart-types.js +0 -31
  16. package/lib/chart-types.js.map +0 -1
  17. package/lib/chart.js +0 -438
  18. package/lib/chart.js.map +0 -1
  19. package/lib/common/drag-handle.js +0 -175
  20. package/lib/common/drag-handle.js.map +0 -1
  21. package/lib/common/drag-icon.js +0 -52
  22. package/lib/common/drag-icon.js.map +0 -1
  23. package/lib/common/styles.js +0 -40
  24. package/lib/common/styles.js.map +0 -1
  25. package/lib/grid.js +0 -104
  26. package/lib/grid.js.map +0 -1
  27. package/lib/index.js +0 -40
  28. package/lib/index.js.map +0 -1
  29. package/lib/line/common/drag-handle.js +0 -157
  30. package/lib/line/common/drag-handle.js.map +0 -1
  31. package/lib/line/common/line.js +0 -261
  32. package/lib/line/common/line.js.map +0 -1
  33. package/lib/line/line-cross.js +0 -168
  34. package/lib/line/line-cross.js.map +0 -1
  35. package/lib/line/line-dot.js +0 -131
  36. package/lib/line/line-dot.js.map +0 -1
  37. package/lib/mark-label.js +0 -255
  38. package/lib/mark-label.js.map +0 -1
  39. package/lib/plot/common/plot.js +0 -280
  40. package/lib/plot/common/plot.js.map +0 -1
  41. package/lib/plot/dot.js +0 -123
  42. package/lib/plot/dot.js.map +0 -1
  43. package/lib/plot/line.js +0 -152
  44. package/lib/plot/line.js.map +0 -1
  45. package/lib/tool-menu.js +0 -142
  46. package/lib/tool-menu.js.map +0 -1
  47. package/lib/utils.js +0 -244
  48. package/lib/utils.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [5.16.0-beta.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.0-beta.2) (2025-07-20)
7
+
8
+ **Note:** Version bump only for package @pie-lib/charting
9
+
10
+
11
+
12
+
13
+
14
+ # [5.16.0-beta.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.0-beta.1) (2025-07-20)
15
+
16
+ **Note:** Version bump only for package @pie-lib/charting
17
+
18
+
19
+
20
+
21
+
6
22
  # [5.16.0-beta.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.0-beta.1) (2025-07-20)
7
23
 
8
24
  **Note:** Version bump only for package @pie-lib/charting
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "5.16.0-beta.1",
6
+ "version": "5.16.0-beta.2",
7
7
  "description": "charting",
8
8
  "keywords": [
9
9
  "react",
@@ -22,11 +22,11 @@
22
22
  "@material-ui/icons": "^3.0.2",
23
23
  "@pie-framework/mathml-to-latex": "1.4.4",
24
24
  "@pie-framework/mathquill": "1.1.4",
25
- "@pie-lib/config-ui": "latest",
26
- "@pie-lib/math-rendering": "latest",
27
- "@pie-lib/plot": "latest",
28
- "@pie-lib/render-ui": "latest",
29
- "@pie-lib/translator": "latest",
25
+ "@pie-lib/config-ui": "beta",
26
+ "@pie-lib/math-rendering": "beta",
27
+ "@pie-lib/plot": "beta",
28
+ "@pie-lib/render-ui": "beta",
29
+ "@pie-lib/translator": "beta",
30
30
  "@vx/axis": "^0.0.183",
31
31
  "@vx/event": "^0.0.182",
32
32
  "@vx/grid": "^0.0.183",
package/lib/axes.js DELETED
@@ -1,643 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = exports.TickComponent = exports.RawChartAxes = void 0;
9
-
10
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
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 _styles = require("@material-ui/core/styles");
31
-
32
- var _plot = require("@pie-lib/plot");
33
-
34
- var _renderUi = require("@pie-lib/render-ui");
35
-
36
- var _configUi = require("@pie-lib/config-ui");
37
-
38
- var _axis = require("@vx/axis");
39
-
40
- var _utils = require("./utils");
41
-
42
- var _markLabel = _interopRequireDefault(require("./mark-label"));
43
-
44
- var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
45
-
46
- 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; }
47
-
48
- 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; }
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 TickComponent = /*#__PURE__*/function (_React$Component) {
55
- (0, _inherits2["default"])(TickComponent, _React$Component);
56
-
57
- var _super = _createSuper(TickComponent);
58
-
59
- function TickComponent(props) {
60
- var _this;
61
-
62
- (0, _classCallCheck2["default"])(this, TickComponent);
63
- _this = _super.call(this, props);
64
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleAlertDialog", function (open, callback) {
65
- return _this.setState({
66
- dialog: {
67
- open: open
68
- }
69
- }, callback);
70
- });
71
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeCategory", function (index, newLabel) {
72
- var _this$props = _this.props,
73
- categories = _this$props.categories,
74
- onChangeCategory = _this$props.onChangeCategory;
75
- var category = categories[index];
76
- onChangeCategory(index, _objectSpread(_objectSpread({}, category), {}, {
77
- label: newLabel
78
- }));
79
- });
80
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deleteCategory", function (index) {
81
- var _this$props2 = _this.props,
82
- categories = _this$props2.categories,
83
- onChange = _this$props2.onChange;
84
-
85
- if (index >= 0 && categories[index]) {
86
- onChange([].concat((0, _toConsumableArray2["default"])(categories.slice(0, index)), (0, _toConsumableArray2["default"])(categories.slice(index + 1))));
87
- }
88
- });
89
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeInteractive", function (index, value) {
90
- var _this$props3 = _this.props,
91
- categories = _this$props3.categories,
92
- onChangeCategory = _this$props3.onChangeCategory;
93
- var category = categories[index];
94
-
95
- if (!value) {
96
- _this.setState({
97
- dialog: {
98
- open: true,
99
- title: 'Warning',
100
- text: 'This will remove the correct answer value that has been defined for this category.',
101
- onConfirm: function onConfirm() {
102
- return _this.handleAlertDialog(false, onChangeCategory(index, _objectSpread(_objectSpread({}, category), {}, {
103
- interactive: !category.interactive
104
- })));
105
- },
106
- onClose: function onClose() {
107
- return _this.handleAlertDialog(false);
108
- }
109
- }
110
- });
111
- } else {
112
- onChangeCategory(index, _objectSpread(_objectSpread({}, category), {}, {
113
- interactive: !category.interactive
114
- }));
115
- }
116
- });
117
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeEditable", function (index, value) {
118
- var _this$props4 = _this.props,
119
- categories = _this$props4.categories,
120
- onChangeCategory = _this$props4.onChangeCategory;
121
- var category = categories[index];
122
-
123
- if (!value) {
124
- _this.setState({
125
- dialog: {
126
- open: true,
127
- title: 'Warning',
128
- text: 'This will remove the correct answer category name that has been defined for this category.',
129
- onConfirm: function onConfirm() {
130
- return _this.handleAlertDialog(false, onChangeCategory(index, _objectSpread(_objectSpread({}, category), {}, {
131
- editable: !category.editable || false
132
- })));
133
- },
134
- onClose: function onClose() {
135
- return _this.handleAlertDialog(false);
136
- }
137
- }
138
- });
139
- } else {
140
- onChangeCategory(index, _objectSpread(_objectSpread({}, category), {}, {
141
- editable: !category.editable || false
142
- }));
143
- }
144
- });
145
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "splitText", function (text, maxChar) {
146
- var chunks = [];
147
-
148
- while ((text || '').length > 0) {
149
- var indexToSplit = void 0;
150
-
151
- if (text.length > maxChar) {
152
- indexToSplit = text.lastIndexOf(' ', maxChar);
153
-
154
- if (indexToSplit === -1) {
155
- indexToSplit = maxChar;
156
- }
157
- } else {
158
- indexToSplit = text.length;
159
- }
160
-
161
- chunks.push(text.substring(0, indexToSplit));
162
- text = text.substring(indexToSplit).trim();
163
- }
164
-
165
- return chunks;
166
- });
167
- _this.state = {
168
- dialog: {
169
- open: false
170
- }
171
- };
172
- return _this;
173
- }
174
-
175
- (0, _createClass2["default"])(TickComponent, [{
176
- key: "componentDidUpdate",
177
- value: function componentDidUpdate(prevProps) {
178
- if (this.props.autoFocus && !prevProps.autoFocus) {
179
- this.props.onAutoFocusUsed();
180
- }
181
- }
182
- }, {
183
- key: "render",
184
- value: function render() {
185
- var _this2 = this;
186
-
187
- var _this$props5 = this.props,
188
- classes = _this$props5.classes,
189
- categories = _this$props5.categories,
190
- xBand = _this$props5.xBand,
191
- bandWidth = _this$props5.bandWidth,
192
- barWidth = _this$props5.barWidth,
193
- rotate = _this$props5.rotate,
194
- top = _this$props5.top,
195
- graphProps = _this$props5.graphProps,
196
- defineChart = _this$props5.defineChart,
197
- chartingOptions = _this$props5.chartingOptions,
198
- x = _this$props5.x,
199
- y = _this$props5.y,
200
- formattedValue = _this$props5.formattedValue,
201
- changeInteractiveEnabled = _this$props5.changeInteractiveEnabled,
202
- changeEditableEnabled = _this$props5.changeEditableEnabled,
203
- error = _this$props5.error,
204
- autoFocus = _this$props5.autoFocus,
205
- hiddenLabelRef = _this$props5.hiddenLabelRef;
206
-
207
- if (!formattedValue) {
208
- return null;
209
- }
210
-
211
- var dialog = this.state.dialog;
212
-
213
- var _ref = chartingOptions || {},
214
- changeEditable = _ref.changeEditable,
215
- changeInteractive = _ref.changeInteractive;
216
-
217
- var index = parseInt(formattedValue.split('-')[0], 10);
218
- var category = categories[index];
219
-
220
- var _ref2 = category || {},
221
- deletable = _ref2.deletable,
222
- editable = _ref2.editable,
223
- interactive = _ref2.interactive,
224
- label = _ref2.label,
225
- correctness = _ref2.correctness;
226
-
227
- var barX = xBand((0, _utils.bandKey)({
228
- label: label
229
- }, index));
230
- var longestCategory = (categories || []).reduce(function (a, b) {
231
- var lengthA = a && a.label ? a.label.length : 0;
232
- var lengthB = b && b.label ? b.label.length : 0;
233
- return lengthA > lengthB ? a : b;
234
- });
235
- var distinctMessages = error ? (0, _toConsumableArray2["default"])(new Set(Object.values(error))).join(' ') : '';
236
- return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("foreignObject", {
237
- x: bandWidth ? barX : x - barWidth / 2,
238
- y: 6,
239
- width: barWidth,
240
- height: 4,
241
- style: {
242
- pointerEvents: 'none',
243
- overflow: 'visible'
244
- }
245
- }, index === 0 && /*#__PURE__*/_react["default"].createElement(_markLabel["default"], {
246
- isHiddenLabel: true,
247
- inputRef: hiddenLabelRef,
248
- disabled: true,
249
- mark: longestCategory,
250
- graphProps: graphProps,
251
- barWidth: barWidth
252
- }), /*#__PURE__*/_react["default"].createElement(_markLabel["default"], {
253
- autoFocus: defineChart && autoFocus,
254
- inputRef: function inputRef(r) {
255
- return _this2.input = r;
256
- },
257
- disabled: !defineChart && !editable,
258
- mark: category,
259
- graphProps: graphProps,
260
- onChange: function onChange(newLabel) {
261
- return _this2.changeCategory(index, newLabel);
262
- },
263
- barWidth: barWidth,
264
- rotate: rotate,
265
- correctness: correctness,
266
- error: error && error[index]
267
- })), error && index === 0 && /*#__PURE__*/_react["default"].createElement("text", {
268
- className: classes.error,
269
- y: y + 23,
270
- height: 6,
271
- textAnchor: "start"
272
- }, distinctMessages), deletable && !correctness && /*#__PURE__*/_react["default"].createElement("line", {
273
- x1: x,
274
- y1: 0,
275
- x2: x,
276
- y2: y + 4 + top,
277
- className: classes.dottedLine,
278
- strokeDasharray: "4 2"
279
- }), deletable && !correctness && /*#__PURE__*/_react["default"].createElement("svg", {
280
- xmlns: "http://www.w3.org/2000/svg",
281
- x: x - 8,
282
- y: y + 60 + top,
283
- width: 16,
284
- height: 16,
285
- viewBox: "0 0 512 512",
286
- onClick: function onClick() {
287
- return _this2.deleteCategory(index);
288
- }
289
- }, /*#__PURE__*/_react["default"].createElement("path", {
290
- d: "M128 405.429C128 428.846 147.198 448 170.667 448h170.667C364.802 448 384 428.846 384 405.429V160H128v245.429zM416 96h-80l-26.785-32H202.786L176 96H96v32h320V96z"
291
- })), defineChart && index === 0 && /*#__PURE__*/_react["default"].createElement("svg", {
292
- x: -55,
293
- style: {
294
- overflow: 'visible'
295
- }
296
- }, changeInteractiveEnabled && /*#__PURE__*/_react["default"].createElement("text", {
297
- y: y + 90 + top,
298
- width: barWidth,
299
- height: 4,
300
- style: {
301
- position: 'absolute',
302
- pointerEvents: 'none',
303
- wordBreak: 'break-word',
304
- maxWidth: barWidth,
305
- display: 'inline-block'
306
- }
307
- }, this.splitText(changeInteractive === null || changeInteractive === void 0 ? void 0 : changeInteractive.authoringLabel, 20).map(function (word, index) {
308
- return /*#__PURE__*/_react["default"].createElement("tspan", {
309
- key: index,
310
- x: "0",
311
- dy: "".concat(index > 0 ? '1.2em' : '.6em')
312
- }, word);
313
- })), changeEditableEnabled && /*#__PURE__*/_react["default"].createElement("text", {
314
- y: y + 145 + top,
315
- width: barWidth,
316
- height: 4,
317
- style: {
318
- position: 'absolute',
319
- pointerEvents: 'none',
320
- wordBreak: 'break-word',
321
- maxWidth: barWidth,
322
- display: 'inline-block'
323
- }
324
- }, this.splitText(changeEditable === null || changeEditable === void 0 ? void 0 : changeEditable.authoringLabel, 20).map(function (word, index) {
325
- return /*#__PURE__*/_react["default"].createElement("tspan", {
326
- key: index,
327
- x: "0",
328
- dy: "".concat(index > 0 ? '1.2em' : '.6em')
329
- }, word);
330
- }))), defineChart && changeInteractiveEnabled && /*#__PURE__*/_react["default"].createElement("foreignObject", {
331
- x: x - 24,
332
- y: y + 80 + top,
333
- width: barWidth,
334
- height: 4,
335
- style: {
336
- pointerEvents: 'visible',
337
- overflow: 'visible'
338
- }
339
- }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
340
- className: classes.customColor,
341
- style: {
342
- position: 'fixed'
343
- },
344
- checked: interactive,
345
- onChange: function onChange(e) {
346
- return _this2.changeInteractive(index, e.target.checked);
347
- }
348
- })), defineChart && changeEditableEnabled && /*#__PURE__*/_react["default"].createElement("foreignObject", {
349
- x: x - 24,
350
- y: y + 130 + top,
351
- width: barWidth,
352
- height: 4,
353
- style: {
354
- pointerEvents: 'visible',
355
- overflow: 'visible'
356
- }
357
- }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
358
- className: classes.customColor,
359
- style: {
360
- position: 'fixed'
361
- },
362
- checked: editable,
363
- onChange: function onChange(e) {
364
- return _this2.changeEditable(index, e.target.checked);
365
- }
366
- })), /*#__PURE__*/_react["default"].createElement("foreignObject", {
367
- x: x - 24,
368
- y: y + 100 + top,
369
- width: barWidth,
370
- height: 4,
371
- style: {
372
- pointerEvents: 'visible',
373
- overflow: 'visible'
374
- }
375
- }, /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
376
- open: dialog.open,
377
- title: dialog.title,
378
- text: dialog.text,
379
- onClose: dialog.onClose,
380
- onConfirm: dialog.onConfirm
381
- })));
382
- }
383
- }]);
384
- return TickComponent;
385
- }(_react["default"].Component);
386
-
387
- exports.TickComponent = TickComponent;
388
- (0, _defineProperty2["default"])(TickComponent, "propTypes", {
389
- defineChart: _propTypes["default"].bool,
390
- error: _propTypes["default"].any
391
- });
392
- TickComponent.propTypes = {
393
- categories: _propTypes["default"].array,
394
- xBand: _propTypes["default"].func,
395
- bandWidth: _propTypes["default"].number,
396
- barWidth: _propTypes["default"].number,
397
- rotate: _propTypes["default"].number,
398
- top: _propTypes["default"].number,
399
- x: _propTypes["default"].number,
400
- y: _propTypes["default"].number,
401
- graphProps: _propTypes["default"].object,
402
- formattedValue: _propTypes["default"].string,
403
- onChangeCategory: _propTypes["default"].func,
404
- onChange: _propTypes["default"].func,
405
- classes: _propTypes["default"].object,
406
- error: _propTypes["default"].object,
407
- defineChart: _propTypes["default"].bool,
408
- chartingOptions: _propTypes["default"].object,
409
- changeInteractiveEnabled: _propTypes["default"].bool,
410
- changeEditableEnabled: _propTypes["default"].bool,
411
- autoFocus: _propTypes["default"].bool,
412
- onAutoFocusUsed: _propTypes["default"].func
413
- };
414
-
415
- var RawChartAxes = /*#__PURE__*/function (_React$Component2) {
416
- (0, _inherits2["default"])(RawChartAxes, _React$Component2);
417
-
418
- var _super2 = _createSuper(RawChartAxes);
419
-
420
- function RawChartAxes() {
421
- var _this3;
422
-
423
- (0, _classCallCheck2["default"])(this, RawChartAxes);
424
-
425
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
426
- args[_key] = arguments[_key];
427
- }
428
-
429
- _this3 = _super2.call.apply(_super2, [this].concat(args));
430
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this3), "state", {
431
- height: 0,
432
- width: 0
433
- });
434
- return _this3;
435
- }
436
-
437
- (0, _createClass2["default"])(RawChartAxes, [{
438
- key: "componentDidMount",
439
- value: function componentDidMount() {
440
- if (this.hiddenLabelRef) {
441
- var boundingClientRect = this.hiddenLabelRef.getBoundingClientRect();
442
- this.setState({
443
- height: Math.floor(boundingClientRect.height),
444
- width: Math.floor(boundingClientRect.width)
445
- });
446
- }
447
- }
448
- }, {
449
- key: "componentDidUpdate",
450
- value: function componentDidUpdate(prevProps, prevState, snapshot) {
451
- if (this.hiddenLabelRef) {
452
- var width = Math.floor(this.hiddenLabelRef.getBoundingClientRect().width);
453
-
454
- if (width !== this.state.width) {
455
- this.setState({
456
- width: width
457
- });
458
- }
459
- }
460
- }
461
- }, {
462
- key: "render",
463
- value: function render() {
464
- var _this4 = this;
465
-
466
- var _this$props6 = this.props,
467
- classes = _this$props6.classes,
468
- graphProps = _this$props6.graphProps,
469
- xBand = _this$props6.xBand,
470
- leftAxis = _this$props6.leftAxis,
471
- onChange = _this$props6.onChange,
472
- onChangeCategory = _this$props6.onChangeCategory,
473
- _this$props6$categori = _this$props6.categories,
474
- categories = _this$props6$categori === void 0 ? [] : _this$props6$categori,
475
- top = _this$props6.top,
476
- defineChart = _this$props6.defineChart,
477
- chartingOptions = _this$props6.chartingOptions,
478
- changeInteractiveEnabled = _this$props6.changeInteractiveEnabled,
479
- changeEditableEnabled = _this$props6.changeEditableEnabled,
480
- theme = _this$props6.theme,
481
- autoFocus = _this$props6.autoFocus,
482
- onAutoFocusUsed = _this$props6.onAutoFocusUsed,
483
- error = _this$props6.error;
484
- var axis = classes.axis,
485
- axisLine = classes.axisLine,
486
- tick = classes.tick;
487
-
488
- var _ref3 = graphProps || {},
489
- _ref3$scale = _ref3.scale,
490
- scale = _ref3$scale === void 0 ? {} : _ref3$scale,
491
- _ref3$range = _ref3.range,
492
- range = _ref3$range === void 0 ? {} : _ref3$range,
493
- _ref3$domain = _ref3.domain,
494
- domain = _ref3$domain === void 0 ? {} : _ref3$domain,
495
- _ref3$size = _ref3.size,
496
- size = _ref3$size === void 0 ? {} : _ref3$size;
497
-
498
- var _this$state = this.state,
499
- height = _this$state.height,
500
- width = _this$state.width;
501
- var bottomScale = xBand && typeof xBand.rangeRound === 'function' && xBand.rangeRound([0, size.width]);
502
- var bandWidth = xBand && typeof xBand.bandwidth === 'function' && xBand.bandwidth(); // for chartType "line", bandWidth will be 0, so we have to calculate it
503
-
504
- var barWidth = bandWidth || scale.x && scale.x(domain.max) / categories.length;
505
- var rowTickValues = (0, _utils.getTickValues)(_objectSpread(_objectSpread({}, range), {}, {
506
- step: range.labelStep
507
- }));
508
- var fontSize = theme && theme.typography ? theme.typography.fontSize : 14; // this mostly applies for labels that are not editable
509
-
510
- var rotateBecauseOfHeight = (0, _utils.getRotateAngle)(fontSize, height); // this applies for labels that are editable
511
-
512
- var rotateBecauseOfWidth = width > barWidth ? 25 : 0;
513
-
514
- var getTickLabelProps = function getTickLabelProps(value) {
515
- return {
516
- dy: 4,
517
- dx: -10 - (value.toLocaleString().length || 1) * 5
518
- };
519
- };
520
-
521
- var getTickComponent = function getTickComponent(props) {
522
- var properties = {
523
- hiddenLabelRef: function hiddenLabelRef(ref) {
524
- _this4.hiddenLabelRef = ref;
525
- },
526
- classes: classes,
527
- categories: categories,
528
- xBand: xBand,
529
- bandWidth: bandWidth,
530
- barWidth: barWidth,
531
- rotate: rotateBecauseOfHeight || rotateBecauseOfWidth,
532
- top: top,
533
- defineChart: defineChart,
534
- chartingOptions: chartingOptions,
535
- autoFocus: autoFocus,
536
- onAutoFocusUsed: onAutoFocusUsed,
537
- error: error,
538
- onChangeCategory: onChangeCategory,
539
- changeInteractiveEnabled: changeInteractiveEnabled,
540
- changeEditableEnabled: changeEditableEnabled,
541
- onChange: onChange,
542
- graphProps: graphProps,
543
- x: props.x,
544
- y: props.y,
545
- formattedValue: props.formattedValue
546
- };
547
- return /*#__PURE__*/_react["default"].createElement(TickComponent, properties);
548
- };
549
-
550
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, leftAxis && /*#__PURE__*/_react["default"].createElement(_axis.AxisLeft, {
551
- scale: scale.y,
552
- className: axis,
553
- axisLineClassName: axisLine,
554
- tickLength: 10,
555
- tickClassName: tick,
556
- tickFormat: function tickFormat(value) {
557
- return value;
558
- },
559
- tickValues: rowTickValues,
560
- tickLabelProps: getTickLabelProps
561
- }), /*#__PURE__*/_react["default"].createElement(_axis.AxisBottom, {
562
- axisLineClassName: axisLine,
563
- tickClassName: tick,
564
- scale: bottomScale,
565
- labelProps: {
566
- y: 60 + top
567
- },
568
- top: scale.y && scale.y(range.min),
569
- textLabelProps: function textLabelProps() {
570
- return {
571
- textAnchor: 'middle'
572
- };
573
- },
574
- tickFormat: function tickFormat(count) {
575
- return count;
576
- },
577
- tickComponent: getTickComponent,
578
- autoFocus: autoFocus,
579
- onAutoFocusUsed: onAutoFocusUsed
580
- }));
581
- }
582
- }]);
583
- return RawChartAxes;
584
- }(_react["default"].Component);
585
-
586
- exports.RawChartAxes = RawChartAxes;
587
- (0, _defineProperty2["default"])(RawChartAxes, "propTypes", {
588
- bottomScale: _propTypes["default"].func,
589
- classes: _propTypes["default"].object.isRequired,
590
- categories: _propTypes["default"].array,
591
- defineChart: _propTypes["default"].bool,
592
- error: _propTypes["default"].any,
593
- graphProps: _plot.types.GraphPropsType.isRequired,
594
- xBand: _propTypes["default"].func,
595
- leftAxis: _propTypes["default"].bool,
596
- onChange: _propTypes["default"].func,
597
- onChangeCategory: _propTypes["default"].func,
598
- top: _propTypes["default"].number,
599
- theme: _propTypes["default"].object,
600
- chartingOptions: _propTypes["default"].object,
601
- changeInteractiveEnabled: _propTypes["default"].bool,
602
- changeEditableEnabled: _propTypes["default"].bool,
603
- autoFocus: _propTypes["default"].bool,
604
- onAutoFocusUsed: _propTypes["default"].func
605
- });
606
- var ChartAxes = (0, _styles.withStyles)(function (theme) {
607
- return {
608
- axis: {
609
- stroke: _renderUi.color.primaryDark(),
610
- strokeWidth: 2
611
- },
612
- axisLine: {
613
- stroke: _renderUi.color.primaryDark(),
614
- strokeWidth: 2
615
- },
616
- tick: {
617
- '& > line': {
618
- stroke: _renderUi.color.primaryDark(),
619
- strokeWidth: 2
620
- },
621
- fill: _renderUi.color.primaryDark(),
622
- fontFamily: theme.typography.body1.fontFamily,
623
- fontSize: theme.typography.fontSize,
624
- textAnchor: 'middle'
625
- },
626
- dottedLine: {
627
- stroke: _renderUi.color.primaryLight(),
628
- opacity: 0.2
629
- },
630
- error: {
631
- fontSize: theme.typography.fontSize - 2,
632
- fill: theme.palette.error.main
633
- },
634
- customColor: {
635
- color: "".concat(_renderUi.color.tertiary(), " !important")
636
- }
637
- };
638
- }, {
639
- withTheme: true
640
- })(RawChartAxes);
641
- var _default = ChartAxes;
642
- exports["default"] = _default;
643
- //# sourceMappingURL=axes.js.map