cx 24.6.4 → 24.6.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/charts.js +27 -29
- package/dist/data.js +26 -29
- package/dist/manifest.js +802 -796
- package/dist/svg.js +59 -56
- package/dist/ui.js +51 -52
- package/dist/util.js +56 -10
- package/dist/widgets.js +68 -69
- 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/DateTimeField.js +8 -5
- package/src/widgets/form/DateTimePicker.js +9 -8
- package/src/widgets/form/MonthField.js +8 -8
- package/src/widgets/form/MonthPicker.js +17 -16
- package/src/widgets/form/TextField.js +289 -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();
|
|
@@ -7994,14 +7991,14 @@ var Calendar = /*#__PURE__*/ (function (_Field) {
|
|
|
7994
7991
|
disabled: data.disabled,
|
|
7995
7992
|
};
|
|
7996
7993
|
if (data.value) {
|
|
7997
|
-
var d =
|
|
7994
|
+
var d = parseDateInvariant(data.value);
|
|
7998
7995
|
if (!isNaN(d.getTime())) {
|
|
7999
7996
|
data.date = zeroTime(d);
|
|
8000
7997
|
}
|
|
8001
7998
|
}
|
|
8002
|
-
if (data.refDate) data.refDate = zeroTime(
|
|
8003
|
-
if (data.maxValue) data.maxValue = zeroTime(
|
|
8004
|
-
if (data.minValue) data.minValue = zeroTime(
|
|
7999
|
+
if (data.refDate) data.refDate = zeroTime(parseDateInvariant(data.refDate));
|
|
8000
|
+
if (data.maxValue) data.maxValue = zeroTime(parseDateInvariant(data.maxValue));
|
|
8001
|
+
if (data.minValue) data.minValue = zeroTime(parseDateInvariant(data.minValue));
|
|
8005
8002
|
_Field.prototype.prepareData.apply(this, arguments);
|
|
8006
8003
|
};
|
|
8007
8004
|
_proto.validate = function validate(context, instance) {
|
|
@@ -8026,7 +8023,7 @@ var Calendar = /*#__PURE__*/ (function (_Field) {
|
|
|
8026
8023
|
if (widget.disabledDaysOfWeek.includes(data.date.getDay())) data.error = this.disabledDaysOfWeekErrorText;
|
|
8027
8024
|
}
|
|
8028
8025
|
if (data.dayData) {
|
|
8029
|
-
var date =
|
|
8026
|
+
var date = parseDateInvariant(data.value);
|
|
8030
8027
|
var info = data.dayData[date.toDateString()];
|
|
8031
8028
|
if (info && info.disabled) data.error = this.disabledDaysOfWeekErrorText;
|
|
8032
8029
|
}
|
|
@@ -8054,7 +8051,7 @@ var Calendar = /*#__PURE__*/ (function (_Field) {
|
|
|
8054
8051
|
if (!validationCheck$1(date, data)) return;
|
|
8055
8052
|
if (this.onBeforeSelect && instance.invoke("onBeforeSelect", e, instance, date) === false) return;
|
|
8056
8053
|
if (widget.partial) {
|
|
8057
|
-
var mixed =
|
|
8054
|
+
var mixed = parseDateInvariant(data.value);
|
|
8058
8055
|
if (data.value && !isNaN(mixed)) {
|
|
8059
8056
|
mixed.setFullYear(date.getFullYear());
|
|
8060
8057
|
mixed.setMonth(date.getMonth());
|
|
@@ -10706,14 +10703,14 @@ var MonthPicker = /*#__PURE__*/ (function (_Field) {
|
|
|
10706
10703
|
data.stateMods = {
|
|
10707
10704
|
disabled: data.disabled,
|
|
10708
10705
|
};
|
|
10709
|
-
if (!this.range && data.value) data.date = monthStart(
|
|
10706
|
+
if (!this.range && data.value) data.date = monthStart(parseDateInvariant(data.value));
|
|
10710
10707
|
if (this.range) {
|
|
10711
|
-
if (data.from) data.from = monthStart(
|
|
10712
|
-
if (data.to) data.to = monthStart(
|
|
10708
|
+
if (data.from) data.from = monthStart(parseDateInvariant(data.from));
|
|
10709
|
+
if (data.to) data.to = monthStart(parseDateInvariant(data.to));
|
|
10713
10710
|
}
|
|
10714
|
-
if (data.refDate) data.refDate = monthStart(
|
|
10715
|
-
if (data.maxValue) data.maxValue = monthStart(
|
|
10716
|
-
if (data.minValue) data.minValue = monthStart(
|
|
10711
|
+
if (data.refDate) data.refDate = monthStart(parseDateInvariant(data.refDate));
|
|
10712
|
+
if (data.maxValue) data.maxValue = monthStart(parseDateInvariant(data.maxValue));
|
|
10713
|
+
if (data.minValue) data.minValue = monthStart(parseDateInvariant(data.minValue));
|
|
10717
10714
|
_Field.prototype.prepareData.apply(this, arguments);
|
|
10718
10715
|
};
|
|
10719
10716
|
_proto.validate = function validate(context, instance) {
|
|
@@ -11990,20 +11987,20 @@ var MonthField = /*#__PURE__*/ (function (_Field) {
|
|
|
11990
11987
|
month: "short",
|
|
11991
11988
|
};
|
|
11992
11989
|
if (!this.range && data.value) {
|
|
11993
|
-
data.date =
|
|
11990
|
+
data.date = parseDateInvariant(data.value);
|
|
11994
11991
|
data.formatted = this.culture.format(data.date, formatOptions);
|
|
11995
11992
|
} else if (this.range && data.from && data.to) {
|
|
11996
|
-
data.from =
|
|
11997
|
-
data.to =
|
|
11993
|
+
data.from = parseDateInvariant(data.from);
|
|
11994
|
+
data.to = parseDateInvariant(data.to);
|
|
11998
11995
|
data.to.setDate(data.to.getDate() - 1);
|
|
11999
11996
|
var fromStr = this.culture.format(data.from, formatOptions);
|
|
12000
11997
|
var toStr = this.culture.format(data.to, formatOptions);
|
|
12001
11998
|
if (fromStr != toStr) data.formatted = fromStr + " - " + toStr;
|
|
12002
11999
|
else data.formatted = fromStr;
|
|
12003
12000
|
}
|
|
12004
|
-
if (data.refDate) data.refDate = monthStart(
|
|
12005
|
-
if (data.maxValue) data.maxValue = monthStart(
|
|
12006
|
-
if (data.minValue) data.minValue = monthStart(
|
|
12001
|
+
if (data.refDate) data.refDate = monthStart(parseDateInvariant(data.refDate));
|
|
12002
|
+
if (data.maxValue) data.maxValue = monthStart(parseDateInvariant(data.maxValue));
|
|
12003
|
+
if (data.minValue) data.minValue = monthStart(parseDateInvariant(data.minValue));
|
|
12007
12004
|
instance.lastDropdown = context.lastDropdown;
|
|
12008
12005
|
};
|
|
12009
12006
|
_proto.validateRequired = function validateRequired(context, instance) {
|
|
@@ -13868,7 +13865,7 @@ var WheelComponent = /*#__PURE__*/ (function (_VDOM$Component) {
|
|
|
13868
13865
|
_proto2.scrollTo = function scrollTo() {
|
|
13869
13866
|
var _this4 = this;
|
|
13870
13867
|
var size = this.props.size;
|
|
13871
|
-
var
|
|
13868
|
+
var _callback = function callback() {
|
|
13872
13869
|
if (!_this4.scrolling) return;
|
|
13873
13870
|
var x = (_this4.index * _this4.state.wheelHeight) / size;
|
|
13874
13871
|
var delta = Math.round(x - _this4.scrollEl.scrollTop);
|
|
@@ -13880,11 +13877,11 @@ var WheelComponent = /*#__PURE__*/ (function (_VDOM$Component) {
|
|
|
13880
13877
|
delta = Math.abs(delta) / 10;
|
|
13881
13878
|
if (delta < 1) delta = 1;
|
|
13882
13879
|
_this4.scrollEl.scrollTop += sign * delta;
|
|
13883
|
-
requestAnimationFrame(
|
|
13880
|
+
requestAnimationFrame(_callback);
|
|
13884
13881
|
};
|
|
13885
13882
|
if (!this.scrolling) {
|
|
13886
13883
|
this.scrolling = true;
|
|
13887
|
-
requestAnimationFrame(
|
|
13884
|
+
requestAnimationFrame(_callback);
|
|
13888
13885
|
}
|
|
13889
13886
|
};
|
|
13890
13887
|
return WheelComponent;
|
|
@@ -13932,7 +13929,7 @@ var DateTimePickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
|
|
|
13932
13929
|
function DateTimePickerComponent(props) {
|
|
13933
13930
|
var _this;
|
|
13934
13931
|
_this = _VDOM$Component.call(this, props) || this;
|
|
13935
|
-
var date = props.data.value ?
|
|
13932
|
+
var date = props.data.value ? parseDateInvariant(props.data.value) : new Date();
|
|
13936
13933
|
if (isNaN(date.getTime())) date = new Date();
|
|
13937
13934
|
_this.state = {
|
|
13938
13935
|
date: date,
|
|
@@ -13959,7 +13956,7 @@ var DateTimePickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
|
|
|
13959
13956
|
_inheritsLoose(DateTimePickerComponent, _VDOM$Component);
|
|
13960
13957
|
var _proto2 = DateTimePickerComponent.prototype;
|
|
13961
13958
|
_proto2.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(props) {
|
|
13962
|
-
var date = props.data.value ?
|
|
13959
|
+
var date = props.data.value ? parseDateInvariant(props.data.value) : new Date();
|
|
13963
13960
|
if (isNaN(date.getTime())) date = new Date();
|
|
13964
13961
|
this.setState({
|
|
13965
13962
|
date: date,
|
|
@@ -14483,7 +14480,9 @@ var DateTimeField = /*#__PURE__*/ (function (_Field) {
|
|
|
14483
14480
|
_proto.prepareData = function prepareData(context, instance) {
|
|
14484
14481
|
var data = instance.data;
|
|
14485
14482
|
if (data.value) {
|
|
14486
|
-
var date =
|
|
14483
|
+
var date = parseDateInvariant(data.value);
|
|
14484
|
+
// let date = new Date(data.value);
|
|
14485
|
+
|
|
14487
14486
|
if (isNaN(date.getTime())) data.formatted = String(data.value);
|
|
14488
14487
|
else {
|
|
14489
14488
|
// handle utc edge cases
|
|
@@ -14492,9 +14491,9 @@ var DateTimeField = /*#__PURE__*/ (function (_Field) {
|
|
|
14492
14491
|
}
|
|
14493
14492
|
data.date = date;
|
|
14494
14493
|
} else data.formatted = "";
|
|
14495
|
-
if (data.refDate) data.refDate = zeroTime(
|
|
14496
|
-
if (data.maxValue) data.maxValue =
|
|
14497
|
-
if (data.minValue) data.minValue =
|
|
14494
|
+
if (data.refDate) data.refDate = zeroTime(parseDateInvariant(data.refDate));
|
|
14495
|
+
if (data.maxValue) data.maxValue = parseDateInvariant(data.maxValue);
|
|
14496
|
+
if (data.minValue) data.minValue = parseDateInvariant(data.minValue);
|
|
14498
14497
|
if (this.segment == "date") {
|
|
14499
14498
|
if (data.minValue) data.minValue = zeroTime(data.minValue);
|
|
14500
14499
|
if (data.maxValue) data.maxValue = zeroTime(data.maxValue);
|
|
@@ -14954,7 +14953,7 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
|
|
|
14954
14953
|
inputError: isNaN(date) && widget.inputErrorText,
|
|
14955
14954
|
});
|
|
14956
14955
|
if (!isNaN(date)) {
|
|
14957
|
-
var mixed =
|
|
14956
|
+
var mixed = parseDateInvariant(baseValue);
|
|
14958
14957
|
if (date && baseValue && !isNaN(mixed) && widget.partial) {
|
|
14959
14958
|
switch (widget.segment) {
|
|
14960
14959
|
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;
|