cx 24.6.4 → 24.6.6
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/dist/charts.js +27 -29
- package/dist/data.js +26 -29
- package/dist/manifest.js +808 -802
- package/dist/svg.js +59 -56
- package/dist/ui.js +51 -52
- package/dist/util.js +56 -10
- package/dist/widgets.js +74 -74
- package/package.json +1 -1
- package/src/charts/Legend.js +151 -151
- package/src/charts/Marker.d.ts +96 -96
- package/src/charts/Marker.js +299 -299
- package/src/charts/axis/Axis.d.ts +96 -96
- package/src/charts/axis/NumericAxis.js +347 -347
- package/src/charts/axis/Stack.js +55 -55
- package/src/charts/axis/TimeAxis.js +7 -6
- package/src/data/Binding.spec.js +69 -69
- package/src/data/StringTemplate.spec.js +105 -105
- package/src/data/getAccessor.spec.js +11 -11
- package/src/ui/Controller.d.ts +182 -182
- package/src/ui/FocusManager.js +171 -171
- package/src/ui/Format.js +3 -3
- package/src/ui/Instance.d.ts +72 -72
- package/src/ui/index.d.ts +42 -42
- package/src/util/Format.js +6 -5
- package/src/util/date/index.d.ts +10 -9
- package/src/util/date/index.js +10 -9
- package/src/util/date/parseDateInvariant.d.ts +3 -0
- package/src/util/date/parseDateInvariant.js +20 -0
- package/src/widgets/drag-drop/DropZone.js +214 -214
- package/src/widgets/form/Calendar.js +7 -6
- package/src/widgets/form/ColorField.js +3 -3
- package/src/widgets/form/DateTimeField.js +9 -6
- package/src/widgets/form/DateTimePicker.js +9 -8
- package/src/widgets/form/MonthField.js +9 -9
- package/src/widgets/form/MonthPicker.js +17 -16
- package/src/widgets/form/NumberField.js +1 -1
- package/src/widgets/form/TextField.js +290 -289
- package/src/widgets/form/UploadButton.d.ts +34 -34
- package/src/widgets/grid/variables.scss +88 -88
- package/src/widgets/overlay/Dropdown.js +612 -612
package/dist/widgets.js
CHANGED
|
@@ -107,6 +107,7 @@ import {
|
|
|
107
107
|
monthStart,
|
|
108
108
|
zeroTime,
|
|
109
109
|
sameDate,
|
|
110
|
+
parseDateInvariant,
|
|
110
111
|
dateDiff,
|
|
111
112
|
upperBoundCheck,
|
|
112
113
|
lowerBoundCheck,
|
|
@@ -141,45 +142,41 @@ import { HtmlElement as HtmlElement$1 } from "cx/widgets";
|
|
|
141
142
|
import { parseStyle as parseStyle$1 } from "cx/src/util/parseStyle";
|
|
142
143
|
|
|
143
144
|
function _extends() {
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
var
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
target[key] = source[key];
|
|
152
|
-
}
|
|
145
|
+
return (
|
|
146
|
+
(_extends = Object.assign
|
|
147
|
+
? Object.assign.bind()
|
|
148
|
+
: function (n) {
|
|
149
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
150
|
+
var t = arguments[e];
|
|
151
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
153
152
|
}
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
}
|
|
159
|
-
function _inheritsLoose(subClass, superClass) {
|
|
160
|
-
subClass.prototype = Object.create(superClass.prototype);
|
|
161
|
-
subClass.prototype.constructor = subClass;
|
|
162
|
-
_setPrototypeOf(subClass, superClass);
|
|
153
|
+
return n;
|
|
154
|
+
}),
|
|
155
|
+
_extends.apply(null, arguments)
|
|
156
|
+
);
|
|
163
157
|
}
|
|
164
|
-
function
|
|
165
|
-
|
|
166
|
-
? Object.setPrototypeOf.bind()
|
|
167
|
-
: function _setPrototypeOf(o, p) {
|
|
168
|
-
o.__proto__ = p;
|
|
169
|
-
return o;
|
|
170
|
-
};
|
|
171
|
-
return _setPrototypeOf(o, p);
|
|
158
|
+
function _inheritsLoose(t, o) {
|
|
159
|
+
(t.prototype = Object.create(o.prototype)), (t.prototype.constructor = t), _setPrototypeOf(t, o);
|
|
172
160
|
}
|
|
173
|
-
function _objectWithoutPropertiesLoose(
|
|
174
|
-
if (
|
|
175
|
-
var
|
|
176
|
-
for (var
|
|
177
|
-
if (
|
|
178
|
-
if (
|
|
179
|
-
|
|
161
|
+
function _objectWithoutPropertiesLoose(r, e) {
|
|
162
|
+
if (null == r) return {};
|
|
163
|
+
var t = {};
|
|
164
|
+
for (var n in r)
|
|
165
|
+
if ({}.hasOwnProperty.call(r, n)) {
|
|
166
|
+
if (e.includes(n)) continue;
|
|
167
|
+
t[n] = r[n];
|
|
180
168
|
}
|
|
181
|
-
|
|
182
|
-
|
|
169
|
+
return t;
|
|
170
|
+
}
|
|
171
|
+
function _setPrototypeOf(t, e) {
|
|
172
|
+
return (
|
|
173
|
+
(_setPrototypeOf = Object.setPrototypeOf
|
|
174
|
+
? Object.setPrototypeOf.bind()
|
|
175
|
+
: function (t, e) {
|
|
176
|
+
return (t.__proto__ = e), t;
|
|
177
|
+
}),
|
|
178
|
+
_setPrototypeOf(t, e)
|
|
179
|
+
);
|
|
183
180
|
}
|
|
184
181
|
|
|
185
182
|
var impl$1 = false;
|
|
@@ -2267,16 +2264,16 @@ function captureMouseOrTouch2(e, _ref2) {
|
|
|
2267
2264
|
e.preventDefault();
|
|
2268
2265
|
});
|
|
2269
2266
|
};
|
|
2270
|
-
var
|
|
2267
|
+
var _end = function end(e) {
|
|
2271
2268
|
batchUpdates(function () {
|
|
2272
2269
|
el.removeEventListener("touchmove", move);
|
|
2273
|
-
el.removeEventListener("touchend",
|
|
2270
|
+
el.removeEventListener("touchend", _end);
|
|
2274
2271
|
if (onMouseUp) onMouseUp(e);
|
|
2275
2272
|
e.preventDefault();
|
|
2276
2273
|
});
|
|
2277
2274
|
};
|
|
2278
2275
|
el.addEventListener("touchmove", move);
|
|
2279
|
-
el.addEventListener("touchend",
|
|
2276
|
+
el.addEventListener("touchend", _end);
|
|
2280
2277
|
e.stopPropagation();
|
|
2281
2278
|
} else
|
|
2282
2279
|
captureMouse2(e, {
|
|
@@ -2717,7 +2714,7 @@ function notifyDragMove(e, captureData) {
|
|
|
2717
2714
|
}
|
|
2718
2715
|
if (scrollY || scrollX) {
|
|
2719
2716
|
if (!scrollTimer) {
|
|
2720
|
-
var
|
|
2717
|
+
var _cb = function cb() {
|
|
2721
2718
|
if (scrollY) {
|
|
2722
2719
|
var current = vscrollParent.scrollTop;
|
|
2723
2720
|
var next = Math.min(
|
|
@@ -2734,9 +2731,9 @@ function notifyDragMove(e, captureData) {
|
|
|
2734
2731
|
); //60 FPS
|
|
2735
2732
|
hscrollParent.scrollLeft = _next;
|
|
2736
2733
|
}
|
|
2737
|
-
scrollTimer = requestAnimationFrame(
|
|
2734
|
+
scrollTimer = requestAnimationFrame(_cb);
|
|
2738
2735
|
};
|
|
2739
|
-
scrollTimer = requestAnimationFrame(
|
|
2736
|
+
scrollTimer = requestAnimationFrame(_cb);
|
|
2740
2737
|
}
|
|
2741
2738
|
} else {
|
|
2742
2739
|
clearScrollTimer();
|
|
@@ -7115,7 +7112,8 @@ var Input$2 = /*#__PURE__*/ (function (_VDOM$Component) {
|
|
|
7115
7112
|
autoFocus(this.input, this);
|
|
7116
7113
|
};
|
|
7117
7114
|
_proto2.componentWillUnmount = function componentWillUnmount() {
|
|
7118
|
-
if (this.input == getActiveElement()
|
|
7115
|
+
if (this.input == getActiveElement() && this.input.value != this.props.data.value)
|
|
7116
|
+
this.onChange(this.input.value, "blur");
|
|
7119
7117
|
tooltipParentWillUnmount$1(this.props.instance);
|
|
7120
7118
|
};
|
|
7121
7119
|
_proto2.onKeyDown = function onKeyDown(e) {
|
|
@@ -7994,14 +7992,14 @@ var Calendar = /*#__PURE__*/ (function (_Field) {
|
|
|
7994
7992
|
disabled: data.disabled,
|
|
7995
7993
|
};
|
|
7996
7994
|
if (data.value) {
|
|
7997
|
-
var d =
|
|
7995
|
+
var d = parseDateInvariant(data.value);
|
|
7998
7996
|
if (!isNaN(d.getTime())) {
|
|
7999
7997
|
data.date = zeroTime(d);
|
|
8000
7998
|
}
|
|
8001
7999
|
}
|
|
8002
|
-
if (data.refDate) data.refDate = zeroTime(
|
|
8003
|
-
if (data.maxValue) data.maxValue = zeroTime(
|
|
8004
|
-
if (data.minValue) data.minValue = zeroTime(
|
|
8000
|
+
if (data.refDate) data.refDate = zeroTime(parseDateInvariant(data.refDate));
|
|
8001
|
+
if (data.maxValue) data.maxValue = zeroTime(parseDateInvariant(data.maxValue));
|
|
8002
|
+
if (data.minValue) data.minValue = zeroTime(parseDateInvariant(data.minValue));
|
|
8005
8003
|
_Field.prototype.prepareData.apply(this, arguments);
|
|
8006
8004
|
};
|
|
8007
8005
|
_proto.validate = function validate(context, instance) {
|
|
@@ -8026,7 +8024,7 @@ var Calendar = /*#__PURE__*/ (function (_Field) {
|
|
|
8026
8024
|
if (widget.disabledDaysOfWeek.includes(data.date.getDay())) data.error = this.disabledDaysOfWeekErrorText;
|
|
8027
8025
|
}
|
|
8028
8026
|
if (data.dayData) {
|
|
8029
|
-
var date =
|
|
8027
|
+
var date = parseDateInvariant(data.value);
|
|
8030
8028
|
var info = data.dayData[date.toDateString()];
|
|
8031
8029
|
if (info && info.disabled) data.error = this.disabledDaysOfWeekErrorText;
|
|
8032
8030
|
}
|
|
@@ -8054,7 +8052,7 @@ var Calendar = /*#__PURE__*/ (function (_Field) {
|
|
|
8054
8052
|
if (!validationCheck$1(date, data)) return;
|
|
8055
8053
|
if (this.onBeforeSelect && instance.invoke("onBeforeSelect", e, instance, date) === false) return;
|
|
8056
8054
|
if (widget.partial) {
|
|
8057
|
-
var mixed =
|
|
8055
|
+
var mixed = parseDateInvariant(data.value);
|
|
8058
8056
|
if (data.value && !isNaN(mixed)) {
|
|
8059
8057
|
mixed.setFullYear(date.getFullYear());
|
|
8060
8058
|
mixed.setMonth(date.getMonth());
|
|
@@ -10124,7 +10122,7 @@ var Input$1 = /*#__PURE__*/ (function (_VDOM$Component) {
|
|
|
10124
10122
|
autoFocus(this.input, this);
|
|
10125
10123
|
};
|
|
10126
10124
|
_proto2.componentWillUnmount = function componentWillUnmount() {
|
|
10127
|
-
if (this.input == getActiveElement()) {
|
|
10125
|
+
if (this.input == getActiveElement() && this.input.value != this.props.data.formatted) {
|
|
10128
10126
|
this.onChange(
|
|
10129
10127
|
{
|
|
10130
10128
|
target: {
|
|
@@ -10706,14 +10704,14 @@ var MonthPicker = /*#__PURE__*/ (function (_Field) {
|
|
|
10706
10704
|
data.stateMods = {
|
|
10707
10705
|
disabled: data.disabled,
|
|
10708
10706
|
};
|
|
10709
|
-
if (!this.range && data.value) data.date = monthStart(
|
|
10707
|
+
if (!this.range && data.value) data.date = monthStart(parseDateInvariant(data.value));
|
|
10710
10708
|
if (this.range) {
|
|
10711
|
-
if (data.from) data.from = monthStart(
|
|
10712
|
-
if (data.to) data.to = monthStart(
|
|
10709
|
+
if (data.from) data.from = monthStart(parseDateInvariant(data.from));
|
|
10710
|
+
if (data.to) data.to = monthStart(parseDateInvariant(data.to));
|
|
10713
10711
|
}
|
|
10714
|
-
if (data.refDate) data.refDate = monthStart(
|
|
10715
|
-
if (data.maxValue) data.maxValue = monthStart(
|
|
10716
|
-
if (data.minValue) data.minValue = monthStart(
|
|
10712
|
+
if (data.refDate) data.refDate = monthStart(parseDateInvariant(data.refDate));
|
|
10713
|
+
if (data.maxValue) data.maxValue = monthStart(parseDateInvariant(data.maxValue));
|
|
10714
|
+
if (data.minValue) data.minValue = monthStart(parseDateInvariant(data.minValue));
|
|
10717
10715
|
_Field.prototype.prepareData.apply(this, arguments);
|
|
10718
10716
|
};
|
|
10719
10717
|
_proto.validate = function validate(context, instance) {
|
|
@@ -11990,20 +11988,20 @@ var MonthField = /*#__PURE__*/ (function (_Field) {
|
|
|
11990
11988
|
month: "short",
|
|
11991
11989
|
};
|
|
11992
11990
|
if (!this.range && data.value) {
|
|
11993
|
-
data.date =
|
|
11991
|
+
data.date = parseDateInvariant(data.value);
|
|
11994
11992
|
data.formatted = this.culture.format(data.date, formatOptions);
|
|
11995
11993
|
} else if (this.range && data.from && data.to) {
|
|
11996
|
-
data.from =
|
|
11997
|
-
data.to =
|
|
11994
|
+
data.from = parseDateInvariant(data.from);
|
|
11995
|
+
data.to = parseDateInvariant(data.to);
|
|
11998
11996
|
data.to.setDate(data.to.getDate() - 1);
|
|
11999
11997
|
var fromStr = this.culture.format(data.from, formatOptions);
|
|
12000
11998
|
var toStr = this.culture.format(data.to, formatOptions);
|
|
12001
11999
|
if (fromStr != toStr) data.formatted = fromStr + " - " + toStr;
|
|
12002
12000
|
else data.formatted = fromStr;
|
|
12003
12001
|
}
|
|
12004
|
-
if (data.refDate) data.refDate = monthStart(
|
|
12005
|
-
if (data.maxValue) data.maxValue = monthStart(
|
|
12006
|
-
if (data.minValue) data.minValue = monthStart(
|
|
12002
|
+
if (data.refDate) data.refDate = monthStart(parseDateInvariant(data.refDate));
|
|
12003
|
+
if (data.maxValue) data.maxValue = monthStart(parseDateInvariant(data.maxValue));
|
|
12004
|
+
if (data.minValue) data.minValue = monthStart(parseDateInvariant(data.minValue));
|
|
12007
12005
|
instance.lastDropdown = context.lastDropdown;
|
|
12008
12006
|
};
|
|
12009
12007
|
_proto.validateRequired = function validateRequired(context, instance) {
|
|
@@ -12394,7 +12392,7 @@ var MonthInput = /*#__PURE__*/ (function (_VDOM$Component) {
|
|
|
12394
12392
|
autoFocus(this.input, this);
|
|
12395
12393
|
};
|
|
12396
12394
|
_proto2.componentWillUnmount = function componentWillUnmount() {
|
|
12397
|
-
if (this.input == getActiveElement()) {
|
|
12395
|
+
if (this.input == getActiveElement() && this.input.value != this.props.data.formatted) {
|
|
12398
12396
|
this.onChange(this.input.value, "blur");
|
|
12399
12397
|
}
|
|
12400
12398
|
tooltipParentWillUnmount$1(this.props.instance);
|
|
@@ -12779,7 +12777,7 @@ var ColorInput = /*#__PURE__*/ (function (_VDOM$Component) {
|
|
|
12779
12777
|
if (this.props.instance.widget.autoFocus && !isTouchDevice()) this.input.focus();
|
|
12780
12778
|
};
|
|
12781
12779
|
_proto2.componentWillUnmount = function componentWillUnmount() {
|
|
12782
|
-
if (this.input == getActiveElement()) {
|
|
12780
|
+
if (this.input == getActiveElement() && this.input.value != this.props.data.value) {
|
|
12783
12781
|
this.onChange(this.input.value, "blur");
|
|
12784
12782
|
}
|
|
12785
12783
|
tooltipParentWillUnmount$1(this.props.instance);
|
|
@@ -13868,7 +13866,7 @@ var WheelComponent = /*#__PURE__*/ (function (_VDOM$Component) {
|
|
|
13868
13866
|
_proto2.scrollTo = function scrollTo() {
|
|
13869
13867
|
var _this4 = this;
|
|
13870
13868
|
var size = this.props.size;
|
|
13871
|
-
var
|
|
13869
|
+
var _callback = function callback() {
|
|
13872
13870
|
if (!_this4.scrolling) return;
|
|
13873
13871
|
var x = (_this4.index * _this4.state.wheelHeight) / size;
|
|
13874
13872
|
var delta = Math.round(x - _this4.scrollEl.scrollTop);
|
|
@@ -13880,11 +13878,11 @@ var WheelComponent = /*#__PURE__*/ (function (_VDOM$Component) {
|
|
|
13880
13878
|
delta = Math.abs(delta) / 10;
|
|
13881
13879
|
if (delta < 1) delta = 1;
|
|
13882
13880
|
_this4.scrollEl.scrollTop += sign * delta;
|
|
13883
|
-
requestAnimationFrame(
|
|
13881
|
+
requestAnimationFrame(_callback);
|
|
13884
13882
|
};
|
|
13885
13883
|
if (!this.scrolling) {
|
|
13886
13884
|
this.scrolling = true;
|
|
13887
|
-
requestAnimationFrame(
|
|
13885
|
+
requestAnimationFrame(_callback);
|
|
13888
13886
|
}
|
|
13889
13887
|
};
|
|
13890
13888
|
return WheelComponent;
|
|
@@ -13932,7 +13930,7 @@ var DateTimePickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
|
|
|
13932
13930
|
function DateTimePickerComponent(props) {
|
|
13933
13931
|
var _this;
|
|
13934
13932
|
_this = _VDOM$Component.call(this, props) || this;
|
|
13935
|
-
var date = props.data.value ?
|
|
13933
|
+
var date = props.data.value ? parseDateInvariant(props.data.value) : new Date();
|
|
13936
13934
|
if (isNaN(date.getTime())) date = new Date();
|
|
13937
13935
|
_this.state = {
|
|
13938
13936
|
date: date,
|
|
@@ -13959,7 +13957,7 @@ var DateTimePickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
|
|
|
13959
13957
|
_inheritsLoose(DateTimePickerComponent, _VDOM$Component);
|
|
13960
13958
|
var _proto2 = DateTimePickerComponent.prototype;
|
|
13961
13959
|
_proto2.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(props) {
|
|
13962
|
-
var date = props.data.value ?
|
|
13960
|
+
var date = props.data.value ? parseDateInvariant(props.data.value) : new Date();
|
|
13963
13961
|
if (isNaN(date.getTime())) date = new Date();
|
|
13964
13962
|
this.setState({
|
|
13965
13963
|
date: date,
|
|
@@ -14483,7 +14481,9 @@ var DateTimeField = /*#__PURE__*/ (function (_Field) {
|
|
|
14483
14481
|
_proto.prepareData = function prepareData(context, instance) {
|
|
14484
14482
|
var data = instance.data;
|
|
14485
14483
|
if (data.value) {
|
|
14486
|
-
var date =
|
|
14484
|
+
var date = parseDateInvariant(data.value);
|
|
14485
|
+
// let date = new Date(data.value);
|
|
14486
|
+
|
|
14487
14487
|
if (isNaN(date.getTime())) data.formatted = String(data.value);
|
|
14488
14488
|
else {
|
|
14489
14489
|
// handle utc edge cases
|
|
@@ -14492,9 +14492,9 @@ var DateTimeField = /*#__PURE__*/ (function (_Field) {
|
|
|
14492
14492
|
}
|
|
14493
14493
|
data.date = date;
|
|
14494
14494
|
} else data.formatted = "";
|
|
14495
|
-
if (data.refDate) data.refDate = zeroTime(
|
|
14496
|
-
if (data.maxValue) data.maxValue =
|
|
14497
|
-
if (data.minValue) data.minValue =
|
|
14495
|
+
if (data.refDate) data.refDate = zeroTime(parseDateInvariant(data.refDate));
|
|
14496
|
+
if (data.maxValue) data.maxValue = parseDateInvariant(data.maxValue);
|
|
14497
|
+
if (data.minValue) data.minValue = parseDateInvariant(data.minValue);
|
|
14498
14498
|
if (this.segment == "date") {
|
|
14499
14499
|
if (data.minValue) data.minValue = zeroTime(data.minValue);
|
|
14500
14500
|
if (data.maxValue) data.maxValue = zeroTime(data.maxValue);
|
|
@@ -14926,7 +14926,7 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
|
|
|
14926
14926
|
autoFocus(this.input, this);
|
|
14927
14927
|
};
|
|
14928
14928
|
_proto2.componentWillUnmount = function componentWillUnmount() {
|
|
14929
|
-
if (this.input == getActiveElement()) {
|
|
14929
|
+
if (this.input == getActiveElement() && this.input.value != this.props.data.formatted) {
|
|
14930
14930
|
this.onChange(this.input.value, "blur");
|
|
14931
14931
|
}
|
|
14932
14932
|
tooltipParentWillUnmount$1(this.props.instance);
|
|
@@ -14954,7 +14954,7 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
|
|
|
14954
14954
|
inputError: isNaN(date) && widget.inputErrorText,
|
|
14955
14955
|
});
|
|
14956
14956
|
if (!isNaN(date)) {
|
|
14957
|
-
var mixed =
|
|
14957
|
+
var mixed = parseDateInvariant(baseValue);
|
|
14958
14958
|
if (date && baseValue && !isNaN(mixed) && widget.partial) {
|
|
14959
14959
|
switch (widget.segment) {
|
|
14960
14960
|
case "date":
|
package/package.json
CHANGED
package/src/charts/Legend.js
CHANGED
|
@@ -1,151 +1,151 @@
|
|
|
1
|
-
import { Widget, VDOM } from "../ui/Widget";
|
|
2
|
-
import { HtmlElement } from "../widgets/HtmlElement";
|
|
3
|
-
import { PureContainer } from "../ui/PureContainer";
|
|
4
|
-
import { getShape } from "./shapes";
|
|
5
|
-
import { isUndefined } from "../util/isUndefined";
|
|
6
|
-
import { isArray } from "../util/isArray";
|
|
7
|
-
import { withHoverSync } from "../ui/HoverSync";
|
|
8
|
-
|
|
9
|
-
export class Legend extends HtmlElement {
|
|
10
|
-
prepareData(context, instance) {
|
|
11
|
-
let { data } = instance;
|
|
12
|
-
data.stateMods = Object.assign(data.stateMods || {}, {
|
|
13
|
-
vertical: this.vertical,
|
|
14
|
-
});
|
|
15
|
-
super.prepareData(context, instance);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
declareData() {
|
|
19
|
-
super.declareData(...arguments, {
|
|
20
|
-
shape: undefined,
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
isValidHtmlAttribute(attrName) {
|
|
25
|
-
switch (attrName) {
|
|
26
|
-
case "shapeSize":
|
|
27
|
-
case "svgSize":
|
|
28
|
-
case "shape":
|
|
29
|
-
return false;
|
|
30
|
-
|
|
31
|
-
default:
|
|
32
|
-
return super.isValidHtmlAttribute(attrName);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
explore(context, instance) {
|
|
37
|
-
if (!context.legends) context.legends = {};
|
|
38
|
-
|
|
39
|
-
instance.legends = context.legends;
|
|
40
|
-
|
|
41
|
-
context.addLegendEntry = (legendName, entry) => {
|
|
42
|
-
if (!legendName) return;
|
|
43
|
-
|
|
44
|
-
//case when all legends are scoped and new entry is added outside the scope
|
|
45
|
-
if (!context.legends) return;
|
|
46
|
-
|
|
47
|
-
let legend = context.legends[legendName];
|
|
48
|
-
if (!legend)
|
|
49
|
-
legend = context.legends[legendName] = {
|
|
50
|
-
entries: [],
|
|
51
|
-
names: {},
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
if (!legend.names[entry.name]) {
|
|
55
|
-
legend.entries.push(entry);
|
|
56
|
-
legend.names[entry.name] = entry;
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
super.explore(context, instance);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
renderChildren(context, instance) {
|
|
64
|
-
const CSS = this.CSS;
|
|
65
|
-
|
|
66
|
-
let entries = instance.legends[this.name] && instance.legends[this.name].entries,
|
|
67
|
-
list;
|
|
68
|
-
|
|
69
|
-
if (isArray(entries) && entries.length > 0) {
|
|
70
|
-
list = (
|
|
71
|
-
<div key="wrap" className={CSS.element(this.baseClass, "wrap")}>
|
|
72
|
-
{entries.map((e, i) =>
|
|
73
|
-
withHoverSync(i, e.hoverSync, e.hoverChannel, e.hoverId, ({ onMouseMove, onMouseLeave, hover }) => (
|
|
74
|
-
<div
|
|
75
|
-
key={i}
|
|
76
|
-
className={CSS.element(this.baseClass, "entry", {
|
|
77
|
-
"color-root": true,
|
|
78
|
-
hover,
|
|
79
|
-
disabled: e.disabled,
|
|
80
|
-
selected: e.selected,
|
|
81
|
-
})}
|
|
82
|
-
onClick={e.onClick}
|
|
83
|
-
onMouseMove={onMouseMove}
|
|
84
|
-
onMouseLeave={onMouseLeave}
|
|
85
|
-
>
|
|
86
|
-
{this.renderShape(e, instance.data.shape)}
|
|
87
|
-
{e.name}
|
|
88
|
-
</div>
|
|
89
|
-
)),
|
|
90
|
-
)}
|
|
91
|
-
</div>
|
|
92
|
-
);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
return [list, super.renderChildren(context, instance)];
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
renderShape(entry, legendEntriesShape) {
|
|
99
|
-
const className = this.CSS.element(this.baseClass, "shape", {
|
|
100
|
-
[`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
|
|
101
|
-
});
|
|
102
|
-
const shape = getShape(legendEntriesShape || entry.shape || "square");
|
|
103
|
-
|
|
104
|
-
return (
|
|
105
|
-
<svg
|
|
106
|
-
className={this.CSS.element(this.baseClass, "svg")}
|
|
107
|
-
style={{
|
|
108
|
-
width: `${this.svgSize}px`,
|
|
109
|
-
height: `${this.svgSize}px`,
|
|
110
|
-
marginTop: `${-this.svgSize / 2}px`,
|
|
111
|
-
}}
|
|
112
|
-
>
|
|
113
|
-
{shape(this.svgSize / 2, this.svgSize / 2, entry.shapeSize || this.shapeSize, {
|
|
114
|
-
style: entry.style,
|
|
115
|
-
className: className,
|
|
116
|
-
})}
|
|
117
|
-
</svg>
|
|
118
|
-
);
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
Legend.prototype.name = "legend";
|
|
123
|
-
Legend.prototype.baseClass = "legend";
|
|
124
|
-
Legend.prototype.vertical = false;
|
|
125
|
-
Legend.prototype.memoize = false;
|
|
126
|
-
Legend.prototype.shapeSize = 18;
|
|
127
|
-
Legend.prototype.shape = null;
|
|
128
|
-
Legend.prototype.svgSize = 20;
|
|
129
|
-
|
|
130
|
-
Widget.alias("legend", Legend);
|
|
131
|
-
|
|
132
|
-
Legend.Scope = class extends PureContainer {
|
|
133
|
-
explore(context, instance) {
|
|
134
|
-
context.push("legends", (instance.legends = {}));
|
|
135
|
-
super.explore(context, instance);
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
exploreCleanup(context, instance) {
|
|
139
|
-
context.pop("legends");
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
prepare(context, instance) {
|
|
143
|
-
context.push("legends", instance.legends);
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
prepareCleanup(context, instance) {
|
|
147
|
-
context.pop("legends");
|
|
148
|
-
}
|
|
149
|
-
};
|
|
150
|
-
|
|
151
|
-
export const LegendScope = Legend.Scope;
|
|
1
|
+
import { Widget, VDOM } from "../ui/Widget";
|
|
2
|
+
import { HtmlElement } from "../widgets/HtmlElement";
|
|
3
|
+
import { PureContainer } from "../ui/PureContainer";
|
|
4
|
+
import { getShape } from "./shapes";
|
|
5
|
+
import { isUndefined } from "../util/isUndefined";
|
|
6
|
+
import { isArray } from "../util/isArray";
|
|
7
|
+
import { withHoverSync } from "../ui/HoverSync";
|
|
8
|
+
|
|
9
|
+
export class Legend extends HtmlElement {
|
|
10
|
+
prepareData(context, instance) {
|
|
11
|
+
let { data } = instance;
|
|
12
|
+
data.stateMods = Object.assign(data.stateMods || {}, {
|
|
13
|
+
vertical: this.vertical,
|
|
14
|
+
});
|
|
15
|
+
super.prepareData(context, instance);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
declareData() {
|
|
19
|
+
super.declareData(...arguments, {
|
|
20
|
+
shape: undefined,
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
isValidHtmlAttribute(attrName) {
|
|
25
|
+
switch (attrName) {
|
|
26
|
+
case "shapeSize":
|
|
27
|
+
case "svgSize":
|
|
28
|
+
case "shape":
|
|
29
|
+
return false;
|
|
30
|
+
|
|
31
|
+
default:
|
|
32
|
+
return super.isValidHtmlAttribute(attrName);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
explore(context, instance) {
|
|
37
|
+
if (!context.legends) context.legends = {};
|
|
38
|
+
|
|
39
|
+
instance.legends = context.legends;
|
|
40
|
+
|
|
41
|
+
context.addLegendEntry = (legendName, entry) => {
|
|
42
|
+
if (!legendName) return;
|
|
43
|
+
|
|
44
|
+
//case when all legends are scoped and new entry is added outside the scope
|
|
45
|
+
if (!context.legends) return;
|
|
46
|
+
|
|
47
|
+
let legend = context.legends[legendName];
|
|
48
|
+
if (!legend)
|
|
49
|
+
legend = context.legends[legendName] = {
|
|
50
|
+
entries: [],
|
|
51
|
+
names: {},
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
if (!legend.names[entry.name]) {
|
|
55
|
+
legend.entries.push(entry);
|
|
56
|
+
legend.names[entry.name] = entry;
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
super.explore(context, instance);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
renderChildren(context, instance) {
|
|
64
|
+
const CSS = this.CSS;
|
|
65
|
+
|
|
66
|
+
let entries = instance.legends[this.name] && instance.legends[this.name].entries,
|
|
67
|
+
list;
|
|
68
|
+
|
|
69
|
+
if (isArray(entries) && entries.length > 0) {
|
|
70
|
+
list = (
|
|
71
|
+
<div key="wrap" className={CSS.element(this.baseClass, "wrap")}>
|
|
72
|
+
{entries.map((e, i) =>
|
|
73
|
+
withHoverSync(i, e.hoverSync, e.hoverChannel, e.hoverId, ({ onMouseMove, onMouseLeave, hover }) => (
|
|
74
|
+
<div
|
|
75
|
+
key={i}
|
|
76
|
+
className={CSS.element(this.baseClass, "entry", {
|
|
77
|
+
"color-root": true,
|
|
78
|
+
hover,
|
|
79
|
+
disabled: e.disabled,
|
|
80
|
+
selected: e.selected,
|
|
81
|
+
})}
|
|
82
|
+
onClick={e.onClick}
|
|
83
|
+
onMouseMove={onMouseMove}
|
|
84
|
+
onMouseLeave={onMouseLeave}
|
|
85
|
+
>
|
|
86
|
+
{this.renderShape(e, instance.data.shape)}
|
|
87
|
+
{e.name}
|
|
88
|
+
</div>
|
|
89
|
+
)),
|
|
90
|
+
)}
|
|
91
|
+
</div>
|
|
92
|
+
);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
return [list, super.renderChildren(context, instance)];
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
renderShape(entry, legendEntriesShape) {
|
|
99
|
+
const className = this.CSS.element(this.baseClass, "shape", {
|
|
100
|
+
[`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
|
|
101
|
+
});
|
|
102
|
+
const shape = getShape(legendEntriesShape || entry.shape || "square");
|
|
103
|
+
|
|
104
|
+
return (
|
|
105
|
+
<svg
|
|
106
|
+
className={this.CSS.element(this.baseClass, "svg")}
|
|
107
|
+
style={{
|
|
108
|
+
width: `${this.svgSize}px`,
|
|
109
|
+
height: `${this.svgSize}px`,
|
|
110
|
+
marginTop: `${-this.svgSize / 2}px`,
|
|
111
|
+
}}
|
|
112
|
+
>
|
|
113
|
+
{shape(this.svgSize / 2, this.svgSize / 2, entry.shapeSize || this.shapeSize, {
|
|
114
|
+
style: entry.style,
|
|
115
|
+
className: className,
|
|
116
|
+
})}
|
|
117
|
+
</svg>
|
|
118
|
+
);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
Legend.prototype.name = "legend";
|
|
123
|
+
Legend.prototype.baseClass = "legend";
|
|
124
|
+
Legend.prototype.vertical = false;
|
|
125
|
+
Legend.prototype.memoize = false;
|
|
126
|
+
Legend.prototype.shapeSize = 18;
|
|
127
|
+
Legend.prototype.shape = null;
|
|
128
|
+
Legend.prototype.svgSize = 20;
|
|
129
|
+
|
|
130
|
+
Widget.alias("legend", Legend);
|
|
131
|
+
|
|
132
|
+
Legend.Scope = class extends PureContainer {
|
|
133
|
+
explore(context, instance) {
|
|
134
|
+
context.push("legends", (instance.legends = {}));
|
|
135
|
+
super.explore(context, instance);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
exploreCleanup(context, instance) {
|
|
139
|
+
context.pop("legends");
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
prepare(context, instance) {
|
|
143
|
+
context.push("legends", instance.legends);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
prepareCleanup(context, instance) {
|
|
147
|
+
context.pop("legends");
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
export const LegendScope = Legend.Scope;
|