@pie-lib/graphing 2.7.0 → 2.9.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 +30 -0
- package/lib/axis/arrow.js +15 -25
- package/lib/axis/arrow.js.map +1 -1
- package/lib/axis/axes.js +41 -73
- package/lib/axis/axes.js.map +1 -1
- package/lib/axis/index.js +1 -1
- package/lib/bg.js +20 -31
- package/lib/bg.js.map +1 -1
- package/lib/container/index.js +27 -41
- package/lib/container/index.js.map +1 -1
- package/lib/container/reducer.js +2 -2
- package/lib/container/reducer.js.map +1 -1
- package/lib/coordinates-label.js +5 -5
- package/lib/coordinates-label.js.map +1 -1
- package/lib/graph-with-controls.js +53 -38
- package/lib/graph-with-controls.js.map +1 -1
- package/lib/graph.js +68 -75
- package/lib/graph.js.map +1 -1
- package/lib/grid-setup.js +6 -6
- package/lib/grid-setup.js.map +1 -1
- package/lib/grid.js +28 -46
- package/lib/grid.js.map +1 -1
- package/lib/index.js +3 -3
- package/lib/index.js.map +1 -1
- package/lib/labels.js +107 -57
- package/lib/labels.js.map +1 -1
- package/lib/mark-label.js +10 -20
- package/lib/mark-label.js.map +1 -1
- package/lib/toggle-bar.js +177 -45
- package/lib/toggle-bar.js.map +1 -1
- package/lib/tool-menu.js +49 -32
- package/lib/tool-menu.js.map +1 -1
- package/lib/tools/circle/bg-circle.js +27 -38
- package/lib/tools/circle/bg-circle.js.map +1 -1
- package/lib/tools/circle/component.js +36 -54
- package/lib/tools/circle/component.js.map +1 -1
- package/lib/tools/circle/index.js +5 -5
- package/lib/tools/circle/index.js.map +1 -1
- package/lib/tools/line/component.js +11 -25
- package/lib/tools/line/component.js.map +1 -1
- package/lib/tools/line/index.js +2 -2
- package/lib/tools/line/index.js.map +1 -1
- package/lib/tools/parabola/component.js +2 -2
- package/lib/tools/parabola/component.js.map +1 -1
- package/lib/tools/parabola/index.js +5 -5
- package/lib/tools/parabola/index.js.map +1 -1
- package/lib/tools/point/component.js +30 -47
- package/lib/tools/point/component.js.map +1 -1
- package/lib/tools/point/index.js +5 -5
- package/lib/tools/point/index.js.map +1 -1
- package/lib/tools/polygon/component.js +59 -107
- package/lib/tools/polygon/component.js.map +1 -1
- package/lib/tools/polygon/index.js +9 -19
- package/lib/tools/polygon/index.js.map +1 -1
- package/lib/tools/polygon/line.js +28 -41
- package/lib/tools/polygon/line.js.map +1 -1
- package/lib/tools/polygon/polygon.js +28 -42
- package/lib/tools/polygon/polygon.js.map +1 -1
- package/lib/tools/ray/component.js +11 -25
- package/lib/tools/ray/component.js.map +1 -1
- package/lib/tools/ray/index.js +2 -2
- package/lib/tools/ray/index.js.map +1 -1
- package/lib/tools/segment/component.js +8 -11
- package/lib/tools/segment/component.js.map +1 -1
- package/lib/tools/segment/index.js +2 -2
- package/lib/tools/segment/index.js.map +1 -1
- package/lib/tools/shared/arrow-head.js +2 -2
- package/lib/tools/shared/arrow-head.js.map +1 -1
- package/lib/tools/shared/line/index.js +43 -66
- package/lib/tools/shared/line/index.js.map +1 -1
- package/lib/tools/shared/line/line-path.js +29 -42
- package/lib/tools/shared/line/line-path.js.map +1 -1
- package/lib/tools/shared/line/with-root-edge.js +12 -14
- package/lib/tools/shared/line/with-root-edge.js.map +1 -1
- package/lib/tools/shared/point/arrow-point.js +24 -39
- package/lib/tools/shared/point/arrow-point.js.map +1 -1
- package/lib/tools/shared/point/arrow.js +23 -37
- package/lib/tools/shared/point/arrow.js.map +1 -1
- package/lib/tools/shared/point/base-point.js +24 -38
- package/lib/tools/shared/point/base-point.js.map +1 -1
- package/lib/tools/shared/point/index.js +6 -6
- package/lib/tools/shared/point/index.js.map +1 -1
- package/lib/tools/shared/styles.js +7 -5
- package/lib/tools/shared/styles.js.map +1 -1
- package/lib/tools/shared/types.js +2 -2
- package/lib/tools/shared/types.js.map +1 -1
- package/lib/tools/sine/component.js +2 -2
- package/lib/tools/sine/component.js.map +1 -1
- package/lib/tools/sine/index.js +5 -5
- package/lib/tools/sine/index.js.map +1 -1
- package/lib/tools/vector/component.js +8 -11
- package/lib/tools/vector/component.js.map +1 -1
- package/lib/tools/vector/index.js +2 -2
- package/lib/tools/vector/index.js.map +1 -1
- package/lib/undo-redo.js +19 -31
- package/lib/undo-redo.js.map +1 -1
- package/lib/use-debounce.js +5 -13
- package/lib/use-debounce.js.map +1 -1
- package/lib/utils.js +2 -2
- package/lib/utils.js.map +1 -1
- package/package.json +5 -4
- package/src/graph-with-controls.jsx +26 -0
- package/src/graph.jsx +32 -4
- package/src/labels.jsx +85 -21
- package/src/toggle-bar.jsx +143 -13
- package/src/tool-menu.jsx +15 -0
package/lib/labels.js
CHANGED
|
@@ -1,45 +1,47 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.getTransform = exports["default"] = exports.Labels = exports.LabelType = void 0;
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
15
15
|
|
|
16
|
-
var
|
|
16
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
19
|
+
|
|
20
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
19
21
|
|
|
20
|
-
|
|
22
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
21
23
|
|
|
22
|
-
|
|
24
|
+
var _react = _interopRequireDefault(require("react"));
|
|
23
25
|
|
|
24
|
-
|
|
26
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
25
27
|
|
|
26
|
-
|
|
28
|
+
var _styles = require("@material-ui/core/styles");
|
|
27
29
|
|
|
28
|
-
|
|
30
|
+
var _plot = require("@pie-lib/plot");
|
|
29
31
|
|
|
30
|
-
|
|
32
|
+
var _renderUi = require("@pie-lib/render-ui");
|
|
31
33
|
|
|
32
|
-
|
|
34
|
+
var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
|
|
33
35
|
|
|
34
|
-
|
|
36
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
35
37
|
|
|
36
|
-
function
|
|
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; }
|
|
37
39
|
|
|
38
|
-
function
|
|
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; }
|
|
39
41
|
|
|
40
|
-
function
|
|
42
|
+
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); }; }
|
|
41
43
|
|
|
42
|
-
function
|
|
44
|
+
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; } }
|
|
43
45
|
|
|
44
46
|
var rotations = {
|
|
45
47
|
left: -90,
|
|
@@ -75,38 +77,41 @@ exports.getTransform = getTransform;
|
|
|
75
77
|
var getY = function getY(side, height) {
|
|
76
78
|
switch (side) {
|
|
77
79
|
case 'left':
|
|
78
|
-
return -height;
|
|
80
|
+
return -height + 6;
|
|
79
81
|
|
|
80
82
|
case 'top':
|
|
81
|
-
return -height +
|
|
83
|
+
return -height + 6;
|
|
82
84
|
|
|
83
85
|
case 'right':
|
|
84
|
-
return -height
|
|
86
|
+
return -height;
|
|
85
87
|
|
|
86
88
|
default:
|
|
87
|
-
return
|
|
89
|
+
return -height - 15;
|
|
88
90
|
}
|
|
89
91
|
};
|
|
90
92
|
|
|
91
93
|
var RawLabel = /*#__PURE__*/function (_React$Component) {
|
|
92
|
-
|
|
94
|
+
(0, _inherits2["default"])(RawLabel, _React$Component);
|
|
93
95
|
|
|
94
96
|
var _super = _createSuper(RawLabel);
|
|
95
97
|
|
|
96
98
|
function RawLabel() {
|
|
97
|
-
|
|
98
|
-
|
|
99
|
+
(0, _classCallCheck2["default"])(this, RawLabel);
|
|
99
100
|
return _super.apply(this, arguments);
|
|
100
101
|
}
|
|
101
102
|
|
|
102
|
-
|
|
103
|
+
(0, _createClass2["default"])(RawLabel, [{
|
|
103
104
|
key: "render",
|
|
104
105
|
value: function render() {
|
|
106
|
+
var _cn;
|
|
107
|
+
|
|
105
108
|
var _this$props = this.props,
|
|
109
|
+
disabledLabel = _this$props.disabledLabel,
|
|
106
110
|
text = _this$props.text,
|
|
107
111
|
side = _this$props.side,
|
|
108
112
|
graphProps = _this$props.graphProps,
|
|
109
|
-
classes = _this$props.classes
|
|
113
|
+
classes = _this$props.classes,
|
|
114
|
+
onChange = _this$props.onChange;
|
|
110
115
|
var size = graphProps.size,
|
|
111
116
|
domain = graphProps.domain,
|
|
112
117
|
range = graphProps.range;
|
|
@@ -116,42 +121,54 @@ var RawLabel = /*#__PURE__*/function (_React$Component) {
|
|
|
116
121
|
var width = side === 'left' || side === 'right' ? totalHeight : totalWidth;
|
|
117
122
|
var height = 36;
|
|
118
123
|
var y = getY(side, height);
|
|
124
|
+
var activePlugins = ['bold', 'italic', 'underline', 'strikethrough' // 'languageCharacters'
|
|
125
|
+
];
|
|
119
126
|
return /*#__PURE__*/_react["default"].createElement("foreignObject", {
|
|
120
127
|
x: -(width / 2),
|
|
121
128
|
y: y,
|
|
122
129
|
width: width,
|
|
123
|
-
height: height,
|
|
130
|
+
height: height * 2,
|
|
124
131
|
transform: transform,
|
|
125
132
|
textAnchor: "middle"
|
|
126
133
|
}, /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
|
|
127
134
|
"false": true
|
|
128
|
-
}, /*#__PURE__*/_react["default"].createElement("
|
|
129
|
-
|
|
130
|
-
|
|
135
|
+
}, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
|
|
136
|
+
className: (0, _classnames["default"])((_cn = {}, (0, _defineProperty2["default"])(_cn, classes.bottomLabel, side === 'bottom'), (0, _defineProperty2["default"])(_cn, classes.disabledAxisLabel, disabledLabel), _cn), classes.axisLabel),
|
|
137
|
+
markup: text || '',
|
|
138
|
+
onChange: onChange,
|
|
139
|
+
placeholder: !disabledLabel && "Click here to add a ".concat(side, " label"),
|
|
140
|
+
toolbarOpts: {
|
|
141
|
+
position: side === 'bottom' ? 'top' : 'bottom',
|
|
142
|
+
noBorder: true
|
|
131
143
|
},
|
|
132
|
-
|
|
144
|
+
activePlugins: activePlugins
|
|
133
145
|
})));
|
|
134
146
|
}
|
|
135
147
|
}]);
|
|
136
|
-
|
|
137
148
|
return RawLabel;
|
|
138
149
|
}(_react["default"].Component);
|
|
139
150
|
|
|
140
|
-
|
|
151
|
+
(0, _defineProperty2["default"])(RawLabel, "propTypes", {
|
|
141
152
|
text: _propTypes["default"].string,
|
|
142
153
|
side: _propTypes["default"].string,
|
|
143
154
|
classes: _propTypes["default"].object,
|
|
155
|
+
disabledLabel: _propTypes["default"].bool,
|
|
144
156
|
graphProps: _plot.types.GraphPropsType.isRequired
|
|
145
157
|
});
|
|
146
|
-
|
|
147
158
|
var Label = (0, _styles.withStyles)(function (theme) {
|
|
148
159
|
return {
|
|
149
160
|
label: {
|
|
150
161
|
fill: _renderUi.color.secondary()
|
|
151
162
|
},
|
|
152
163
|
axisLabel: {
|
|
153
|
-
fontSize: theme.typography.fontSize,
|
|
164
|
+
fontSize: theme.typography.fontSize - 2,
|
|
154
165
|
textAlign: 'center'
|
|
166
|
+
},
|
|
167
|
+
disabledAxisLabel: {
|
|
168
|
+
pointerEvents: 'none'
|
|
169
|
+
},
|
|
170
|
+
bottomLabel: {
|
|
171
|
+
marginTop: '44px'
|
|
155
172
|
}
|
|
156
173
|
};
|
|
157
174
|
})(RawLabel);
|
|
@@ -164,60 +181,93 @@ var LabelType = {
|
|
|
164
181
|
exports.LabelType = LabelType;
|
|
165
182
|
|
|
166
183
|
var Labels = /*#__PURE__*/function (_React$Component2) {
|
|
167
|
-
|
|
184
|
+
(0, _inherits2["default"])(Labels, _React$Component2);
|
|
168
185
|
|
|
169
186
|
var _super2 = _createSuper(Labels);
|
|
170
187
|
|
|
171
188
|
function Labels() {
|
|
172
|
-
|
|
189
|
+
var _this;
|
|
190
|
+
|
|
191
|
+
(0, _classCallCheck2["default"])(this, Labels);
|
|
192
|
+
|
|
193
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
194
|
+
args[_key] = arguments[_key];
|
|
195
|
+
}
|
|
173
196
|
|
|
174
|
-
|
|
197
|
+
_this = _super2.call.apply(_super2, [this].concat(args));
|
|
198
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChangeLabel", function (newValue, side) {
|
|
199
|
+
var _this$props2 = _this.props,
|
|
200
|
+
value = _this$props2.value,
|
|
201
|
+
onChange = _this$props2.onChange;
|
|
202
|
+
|
|
203
|
+
var labels = _objectSpread(_objectSpread({}, value), {}, (0, _defineProperty2["default"])({}, side, newValue));
|
|
204
|
+
|
|
205
|
+
onChange(labels);
|
|
206
|
+
});
|
|
207
|
+
return _this;
|
|
175
208
|
}
|
|
176
209
|
|
|
177
|
-
|
|
210
|
+
(0, _createClass2["default"])(Labels, [{
|
|
178
211
|
key: "render",
|
|
179
212
|
value: function render() {
|
|
180
|
-
var
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
213
|
+
var _this2 = this;
|
|
214
|
+
|
|
215
|
+
var _this$props3 = this.props,
|
|
216
|
+
disabledLabels = _this$props3.disabledLabels,
|
|
217
|
+
_this$props3$value = _this$props3.value,
|
|
218
|
+
value = _this$props3$value === void 0 ? {} : _this$props3$value,
|
|
219
|
+
graphProps = _this$props3.graphProps;
|
|
220
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Label, {
|
|
184
221
|
key: "left",
|
|
185
222
|
side: "left",
|
|
186
223
|
text: value.left,
|
|
187
|
-
|
|
188
|
-
|
|
224
|
+
disabledLabel: disabledLabels,
|
|
225
|
+
graphProps: graphProps,
|
|
226
|
+
onChange: function onChange(value) {
|
|
227
|
+
return _this2.onChangeLabel(value, 'left');
|
|
228
|
+
}
|
|
229
|
+
}), /*#__PURE__*/_react["default"].createElement(Label, {
|
|
189
230
|
key: "top",
|
|
190
231
|
side: "top",
|
|
191
232
|
text: value.top,
|
|
192
|
-
|
|
193
|
-
|
|
233
|
+
disabledLabel: disabledLabels,
|
|
234
|
+
graphProps: graphProps,
|
|
235
|
+
onChange: function onChange(value) {
|
|
236
|
+
return _this2.onChangeLabel(value, 'top');
|
|
237
|
+
}
|
|
238
|
+
}), /*#__PURE__*/_react["default"].createElement(Label, {
|
|
194
239
|
key: "bottom",
|
|
195
240
|
side: "bottom",
|
|
196
241
|
text: value.bottom,
|
|
197
|
-
|
|
198
|
-
|
|
242
|
+
disabledLabel: disabledLabels,
|
|
243
|
+
graphProps: graphProps,
|
|
244
|
+
onChange: function onChange(value) {
|
|
245
|
+
return _this2.onChangeLabel(value, 'bottom');
|
|
246
|
+
}
|
|
247
|
+
}), /*#__PURE__*/_react["default"].createElement(Label, {
|
|
199
248
|
key: "right",
|
|
200
249
|
side: "right",
|
|
201
250
|
text: value.right,
|
|
202
|
-
|
|
251
|
+
disabledLabel: disabledLabels,
|
|
252
|
+
graphProps: graphProps,
|
|
253
|
+
onChange: function onChange(value) {
|
|
254
|
+
return _this2.onChangeLabel(value, 'right');
|
|
255
|
+
}
|
|
203
256
|
}));
|
|
204
257
|
}
|
|
205
258
|
}]);
|
|
206
|
-
|
|
207
259
|
return Labels;
|
|
208
260
|
}(_react["default"].Component);
|
|
209
261
|
|
|
210
262
|
exports.Labels = Labels;
|
|
211
|
-
|
|
212
|
-
_defineProperty(Labels, "propTypes", {
|
|
263
|
+
(0, _defineProperty2["default"])(Labels, "propTypes", {
|
|
213
264
|
classes: _propTypes["default"].object,
|
|
214
265
|
className: _propTypes["default"].string,
|
|
266
|
+
disabledLabels: _propTypes["default"].bool,
|
|
215
267
|
value: _propTypes["default"].shape(LabelType),
|
|
216
268
|
graphProps: _propTypes["default"].object
|
|
217
269
|
});
|
|
218
|
-
|
|
219
|
-
_defineProperty(Labels, "defaultProps", {});
|
|
220
|
-
|
|
270
|
+
(0, _defineProperty2["default"])(Labels, "defaultProps", {});
|
|
221
271
|
var _default = Labels;
|
|
222
272
|
exports["default"] = _default;
|
|
223
273
|
//# sourceMappingURL=labels.js.map
|
package/lib/labels.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/labels.jsx"],"names":["rotations","left","top","bottom","right","getTransform","side","width","height","t","x","y","rotate","getY","RawLabel","props","text","graphProps","classes","size","domain","range","totalHeight","padding","totalWidth","transform","__html","axisLabel","React","Component","PropTypes","string","object","types","GraphPropsType","isRequired","Label","theme","label","fill","color","secondary","fontSize","typography","textAlign","LabelType","Labels","value","className","shape"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { types } from '@pie-lib/plot';\nimport { color, Readable } from '@pie-lib/render-ui';\n\nconst rotations = {\n left: -90,\n top: 0,\n bottom: 0,\n right: 90\n};\n\nexport const getTransform = (side, width, height) => {\n const t = (x, y, rotate) => `translate(${x}, ${y}), rotate(${rotate})`;\n\n if (side === 'left') {\n return t(-20, height / 2, rotations[side]);\n }\n if (side === 'right') {\n return t(width + 30, height / 2, rotations[side]);\n }\n if (side === 'top') {\n return t(width / 2, -20, rotations[side]);\n }\n if (side === 'bottom') {\n return t(width / 2, height + 30, rotations[side]);\n }\n};\n\nconst getY = (side, height) => {\n switch (side) {\n case 'left':\n return -height;\n case 'top':\n return -height + 10;\n case 'right':\n return -height + 10;\n default:\n return 0;\n }\n};\n\nclass RawLabel extends React.Component {\n static propTypes = {\n text: PropTypes.string,\n side: PropTypes.string,\n classes: PropTypes.object,\n graphProps: types.GraphPropsType.isRequired\n };\n\n render() {\n const { text, side, graphProps, classes } = this.props;\n const { size, domain, range } = graphProps;\n const totalHeight = (size.height || 500) + (range.padding || 0) * 2;\n const totalWidth = (size.width || 500) + (domain.padding || 0) * 2;\n\n const transform = getTransform(side, totalWidth, totalHeight);\n const width = side === 'left' || side === 'right' ? totalHeight : totalWidth;\n const height = 36;\n const y = getY(side, height);\n\n return (\n <foreignObject\n x={-(width / 2)}\n y={y}\n width={width}\n height={height}\n transform={transform}\n textAnchor=\"middle\"\n >\n <Readable false>\n <div dangerouslySetInnerHTML={{ __html: text }} className={classes.axisLabel} />\n </Readable>\n </foreignObject>\n );\n }\n}\n\nconst Label = withStyles(theme => ({\n label: {\n fill: color.secondary()\n },\n axisLabel: {\n fontSize: theme.typography.fontSize,\n textAlign: 'center'\n }\n}))(RawLabel);\n\nexport const LabelType = {\n left: PropTypes.string,\n top: PropTypes.string,\n bottom: PropTypes.string,\n right: PropTypes.string\n};\n\nexport class Labels extends React.Component {\n static propTypes = {\n classes: PropTypes.object,\n className: PropTypes.string,\n value: PropTypes.shape(LabelType),\n graphProps: PropTypes.object\n };\n\n static defaultProps = {};\n\n render() {\n const { value, graphProps } = this.props;\n\n return (\n <React.Fragment>\n {value && value.left && (\n <Label key=\"left\" side=\"left\" text={value.left} graphProps={graphProps} />\n )}\n {value && value.top && (\n <Label key=\"top\" side=\"top\" text={value.top} graphProps={graphProps} />\n )}\n {value && value.bottom && (\n <Label key=\"bottom\" side=\"bottom\" text={value.bottom} graphProps={graphProps} />\n )}\n {value && value.right && (\n <Label key=\"right\" side=\"right\" text={value.right} graphProps={graphProps} />\n )}\n </React.Fragment>\n );\n }\n}\n\nexport default Labels;\n"],"file":"labels.js"}
|
|
1
|
+
{"version":3,"sources":["../src/labels.jsx"],"names":["rotations","left","top","bottom","right","getTransform","side","width","height","t","x","y","rotate","getY","RawLabel","props","disabledLabel","text","graphProps","classes","onChange","size","domain","range","totalHeight","padding","totalWidth","transform","activePlugins","bottomLabel","disabledAxisLabel","axisLabel","position","noBorder","React","Component","PropTypes","string","object","bool","types","GraphPropsType","isRequired","Label","theme","label","fill","color","secondary","fontSize","typography","textAlign","pointerEvents","marginTop","LabelType","Labels","newValue","value","labels","disabledLabels","onChangeLabel","className","shape"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { types } from '@pie-lib/plot';\nimport { color, Readable } from '@pie-lib/render-ui';\nimport EditableHtml from '@pie-lib/editable-html';\nimport cn from 'classnames';\n\nconst rotations = {\n left: -90,\n top: 0,\n bottom: 0,\n right: 90\n};\n\nexport const getTransform = (side, width, height) => {\n const t = (x, y, rotate) => `translate(${x}, ${y}), rotate(${rotate})`;\n\n if (side === 'left') {\n return t(-20, height / 2, rotations[side]);\n }\n if (side === 'right') {\n return t(width + 30, height / 2, rotations[side]);\n }\n if (side === 'top') {\n return t(width / 2, -20, rotations[side]);\n }\n if (side === 'bottom') {\n return t(width / 2, height + 30, rotations[side]);\n }\n};\n\nconst getY = (side, height) => {\n switch (side) {\n case 'left':\n return -height + 6;\n case 'top':\n return -height + 6;\n case 'right':\n return -height;\n default:\n return -height - 15;\n }\n};\n\nclass RawLabel extends React.Component {\n static propTypes = {\n text: PropTypes.string,\n side: PropTypes.string,\n classes: PropTypes.object,\n disabledLabel: PropTypes.bool,\n graphProps: types.GraphPropsType.isRequired\n };\n\n render() {\n const { disabledLabel, text, side, graphProps, classes, onChange } = this.props;\n const { size, domain, range } = graphProps;\n const totalHeight = (size.height || 500) + (range.padding || 0) * 2;\n const totalWidth = (size.width || 500) + (domain.padding || 0) * 2;\n\n const transform = getTransform(side, totalWidth, totalHeight);\n const width = side === 'left' || side === 'right' ? totalHeight : totalWidth;\n const height = 36;\n const y = getY(side, height);\n\n const activePlugins = [\n 'bold',\n 'italic',\n 'underline',\n 'strikethrough'\n // 'languageCharacters'\n ];\n\n return (\n <foreignObject\n x={-(width / 2)}\n y={y}\n width={width}\n height={height * 2}\n transform={transform}\n textAnchor=\"middle\"\n >\n <Readable false>\n <EditableHtml\n className={cn(\n {\n [classes.bottomLabel]: side === 'bottom',\n [classes.disabledAxisLabel]: disabledLabel\n },\n classes.axisLabel\n )}\n markup={text || ''}\n onChange={onChange}\n placeholder={!disabledLabel && `Click here to add a ${side} label`}\n toolbarOpts={{\n position: side === 'bottom' ? 'top' : 'bottom',\n noBorder: true\n }}\n activePlugins={activePlugins}\n />\n </Readable>\n </foreignObject>\n );\n }\n}\n\nconst Label = withStyles(theme => ({\n label: {\n fill: color.secondary()\n },\n axisLabel: {\n fontSize: theme.typography.fontSize - 2,\n textAlign: 'center'\n },\n disabledAxisLabel: {\n pointerEvents: 'none'\n },\n bottomLabel: {\n marginTop: '44px'\n }\n}))(RawLabel);\n\nexport const LabelType = {\n left: PropTypes.string,\n top: PropTypes.string,\n bottom: PropTypes.string,\n right: PropTypes.string\n};\n\nexport class Labels extends React.Component {\n static propTypes = {\n classes: PropTypes.object,\n className: PropTypes.string,\n disabledLabels: PropTypes.bool,\n value: PropTypes.shape(LabelType),\n graphProps: PropTypes.object\n };\n\n static defaultProps = {};\n\n onChangeLabel = (newValue, side) => {\n const { value, onChange } = this.props;\n const labels = {\n ...value,\n [side]: newValue\n };\n\n onChange(labels);\n };\n\n render() {\n const { disabledLabels, value = {}, graphProps } = this.props;\n\n return (\n <React.Fragment>\n <Label\n key=\"left\"\n side=\"left\"\n text={value.left}\n disabledLabel={disabledLabels}\n graphProps={graphProps}\n onChange={value => this.onChangeLabel(value, 'left')}\n />\n <Label\n key=\"top\"\n side=\"top\"\n text={value.top}\n disabledLabel={disabledLabels}\n graphProps={graphProps}\n onChange={value => this.onChangeLabel(value, 'top')}\n />\n <Label\n key=\"bottom\"\n side=\"bottom\"\n text={value.bottom}\n disabledLabel={disabledLabels}\n graphProps={graphProps}\n onChange={value => this.onChangeLabel(value, 'bottom')}\n />\n <Label\n key=\"right\"\n side=\"right\"\n text={value.right}\n disabledLabel={disabledLabels}\n graphProps={graphProps}\n onChange={value => this.onChangeLabel(value, 'right')}\n />\n </React.Fragment>\n );\n }\n}\n\nexport default Labels;\n"],"file":"labels.js"}
|
package/lib/mark-label.js
CHANGED
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
6
|
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
|
6
8
|
value: true
|
|
7
9
|
});
|
|
8
10
|
exports.position = exports["default"] = exports.coordinates = exports.MarkLabel = void 0;
|
|
9
11
|
|
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
+
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
+
|
|
10
16
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
17
|
|
|
12
18
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
@@ -23,29 +29,13 @@ var _useDebounce = require("./use-debounce");
|
|
|
23
29
|
|
|
24
30
|
var _renderUi = require("@pie-lib/render-ui");
|
|
25
31
|
|
|
26
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
27
|
-
|
|
28
32
|
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); }
|
|
29
33
|
|
|
30
34
|
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; }
|
|
31
35
|
|
|
32
36
|
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; }
|
|
33
37
|
|
|
34
|
-
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) {
|
|
35
|
-
|
|
36
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
37
|
-
|
|
38
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
39
|
-
|
|
40
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
41
|
-
|
|
42
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
43
|
-
|
|
44
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
45
|
-
|
|
46
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
47
|
-
|
|
48
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
38
|
+
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
39
|
|
|
50
40
|
var styles = function styles(theme) {
|
|
51
41
|
return {
|
|
@@ -135,7 +125,7 @@ exports.coordinates = coordinates;
|
|
|
135
125
|
|
|
136
126
|
var MarkLabel = function MarkLabel(props) {
|
|
137
127
|
var _useState = (0, _react.useState)(null),
|
|
138
|
-
_useState2 =
|
|
128
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
139
129
|
input = _useState2[0],
|
|
140
130
|
setInput = _useState2[1];
|
|
141
131
|
|
|
@@ -150,7 +140,7 @@ var MarkLabel = function MarkLabel(props) {
|
|
|
150
140
|
externalInputRef = props.inputRef;
|
|
151
141
|
|
|
152
142
|
var _useState3 = (0, _react.useState)(mark.label),
|
|
153
|
-
_useState4 =
|
|
143
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
154
144
|
label = _useState4[0],
|
|
155
145
|
setLabel = _useState4[1];
|
|
156
146
|
|
package/lib/mark-label.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/mark-label.jsx"],"names":["styles","theme","input","padding","spacing","unit","fontFamily","typography","fontSize","border","color","secondary","borderRadius","primaryDark","disabled","background","disabledMark","position","graphProps","mark","rect","width","height","scale","domain","range","shift","rightEdge","x","bottomEdge","y","h","max","v","min","coordinates","left","top","MarkLabel","props","setInput","_ref","node","classes","externalInputRef","inputRef","label","setLabel","onChange","e","target","value","debouncedLabel","getBoundingClientRect","pos","leftTop","style","pointerEvents","disabledInput","r","propTypes","PropTypes","bool","func","types","GraphPropsType","object"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/mark-label.jsx"],"names":["styles","theme","input","padding","spacing","unit","fontFamily","typography","fontSize","border","color","secondary","borderRadius","primaryDark","disabled","background","disabledMark","position","graphProps","mark","rect","width","height","scale","domain","range","shift","rightEdge","x","bottomEdge","y","h","max","v","min","coordinates","left","top","MarkLabel","props","setInput","_ref","node","classes","externalInputRef","inputRef","label","setLabel","onChange","e","target","value","debouncedLabel","getBoundingClientRect","pos","leftTop","style","pointerEvents","disabledInput","r","propTypes","PropTypes","bool","func","types","GraphPropsType","object"],"mappings":"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","sourcesContent":["import React, { useState, useCallback, useEffect } from 'react';\nimport cn 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 { useDebounce } from './use-debounce';\nimport { color } from '@pie-lib/render-ui';\n\nconst styles = theme => ({\n input: {\n float: 'right',\n padding: theme.spacing.unit * 0.5,\n fontFamily: theme.typography.fontFamily,\n fontSize: theme.typography.fontSize,\n border: `solid 1px ${color.secondary()}`,\n borderRadius: '3px',\n color: color.primaryDark()\n },\n disabled: {\n border: `solid 1px ${color.primaryDark()}`,\n background: color.background()\n },\n disabledMark: {\n border: `solid 1px ${color.disabled()}`,\n background: color.background(),\n color: color.disabled()\n }\n});\n\nexport const position = (graphProps, mark, rect) => {\n rect = rect || { width: 0, height: 0 };\n const { scale, domain, range } = graphProps;\n const shift = 10;\n\n const rightEdge = scale.x(mark.x) + rect.width + shift;\n const bottomEdge = scale.y(mark.y) + rect.height + shift;\n\n const h = rightEdge >= scale.x(domain.max) ? 'left' : 'right';\n const v = bottomEdge >= scale.y(range.min) ? 'top' : 'bottom';\n return `${v}-${h}`;\n};\n\nexport const coordinates = (graphProps, mark, rect, position) => {\n const { scale } = graphProps;\n const shift = 10;\n rect = rect || { width: 0, height: 0 };\n\n switch (position) {\n case 'bottom-right': {\n return { left: scale.x(mark.x) + shift, top: scale.y(mark.y) + shift };\n }\n case 'bottom-left': {\n return { left: scale.x(mark.x) - shift - rect.width, top: scale.y(mark.y) + shift };\n }\n case 'top-left': {\n return {\n left: scale.x(mark.x) - shift - rect.width,\n top: scale.y(mark.y) - shift - rect.height\n };\n }\n case 'top-right': {\n return {\n left: scale.x(mark.x) + shift,\n top: scale.y(mark.y) - shift - rect.height\n };\n }\n }\n};\n\nexport const MarkLabel = props => {\n const [input, setInput] = useState(null);\n const _ref = useCallback(node => setInput(node));\n\n const { mark, graphProps, classes, disabled, inputRef: externalInputRef } = props;\n const [label, setLabel] = useState(mark.label);\n\n const onChange = e => setLabel(e.target.value);\n\n const debouncedLabel = useDebounce(label, 200);\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 // pick up the change to debouncedLabel and save it\n useEffect(() => {\n if (typeof debouncedLabel === 'string' && debouncedLabel !== mark.label) {\n props.onChange(debouncedLabel);\n }\n }, [debouncedLabel]);\n\n const rect = input ? input.getBoundingClientRect() : { width: 0, height: 0 };\n const pos = position(graphProps, mark, rect);\n const leftTop = coordinates(graphProps, mark, rect, pos);\n\n const style = {\n position: 'absolute',\n pointerEvents: 'auto',\n ...leftTop\n };\n\n const disabledInput = disabled || mark.disabled;\n\n return (\n <AutosizeInput\n inputRef={r => {\n _ref(r);\n externalInputRef(r);\n }}\n disabled={disabledInput}\n inputClassName={cn(classes.input, disabled && classes.disabled, mark.disabled && classes.disabledMark)}\n value={label}\n style={style}\n onChange={onChange}\n />\n );\n};\n\nMarkLabel.propTypes = {\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n graphProps: types.GraphPropsType,\n classes: PropTypes.object,\n inputRef: PropTypes.func,\n mark: PropTypes.object\n};\n\nexport default withStyles(styles)(MarkLabel);\n"],"file":"mark-label.js"}
|