cx 24.10.2 → 24.10.4

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 (70) hide show
  1. package/dist/charts.js +24 -27
  2. package/dist/data.js +26 -29
  3. package/dist/manifest.js +434 -434
  4. package/dist/svg.js +59 -56
  5. package/dist/ui.js +51 -52
  6. package/dist/widgets.css +8 -8
  7. package/dist/widgets.js +40 -44
  8. package/package.json +32 -32
  9. package/src/charts/PieChart.js +2 -2
  10. package/src/charts/PieLabel.js +71 -71
  11. package/src/charts/axis/Axis.js +260 -260
  12. package/src/charts/axis/NumericAxis.js +347 -347
  13. package/src/charts/axis/Stack.js +55 -55
  14. package/src/charts/axis/TimeAxis.js +510 -510
  15. package/src/charts/helpers/PointReducer.js +43 -43
  16. package/src/charts/helpers/SnapPointFinder.js +69 -69
  17. package/src/data/Binding.spec.js +69 -69
  18. package/src/data/Expression.js +221 -221
  19. package/src/data/Expression.spec.js +184 -184
  20. package/src/data/StringTemplate.spec.js +105 -105
  21. package/src/data/getAccessor.spec.js +11 -11
  22. package/src/index.scss +6 -6
  23. package/src/svg/Text.d.ts +40 -40
  24. package/src/ui/Culture.d.ts +55 -55
  25. package/src/ui/Culture.js +139 -139
  26. package/src/ui/FocusManager.js +171 -171
  27. package/src/ui/Instance.d.ts +72 -72
  28. package/src/ui/VDOM.d.ts +12 -12
  29. package/src/ui/app/startAppLoop.js +58 -58
  30. package/src/ui/index.d.ts +42 -42
  31. package/src/ui/layout/LabelsTopLayout.js +134 -134
  32. package/src/util/Console.d.ts +4 -4
  33. package/src/util/index.d.ts +51 -51
  34. package/src/util/index.js +54 -54
  35. package/src/util/isValidIdentifierName.d.ts +1 -1
  36. package/src/util/isValidIdentifierName.js +5 -5
  37. package/src/util/isValidIdentifierName.spec.js +33 -33
  38. package/src/util/scss/add-rules.scss +38 -38
  39. package/src/widgets/CxCredit.scss +37 -37
  40. package/src/widgets/HighlightedSearchText.js +36 -36
  41. package/src/widgets/HighlightedSearchText.scss +18 -18
  42. package/src/widgets/List.scss +91 -91
  43. package/src/widgets/drag-drop/DropZone.js +214 -214
  44. package/src/widgets/form/Calendar.scss +196 -196
  45. package/src/widgets/form/ColorField.js +397 -397
  46. package/src/widgets/form/ColorPicker.scss +283 -283
  47. package/src/widgets/form/DateTimeField.js +573 -573
  48. package/src/widgets/form/LookupField.d.ts +179 -179
  49. package/src/widgets/form/MonthField.js +516 -516
  50. package/src/widgets/form/MonthPicker.scss +118 -118
  51. package/src/widgets/form/NumberField.js +459 -459
  52. package/src/widgets/form/NumberField.scss +61 -61
  53. package/src/widgets/form/Select.scss +99 -99
  54. package/src/widgets/form/Slider.scss +118 -118
  55. package/src/widgets/form/Switch.scss +140 -140
  56. package/src/widgets/form/TextArea.scss +43 -43
  57. package/src/widgets/form/TextField.js +290 -290
  58. package/src/widgets/form/TextField.scss +55 -55
  59. package/src/widgets/form/UploadButton.d.ts +34 -34
  60. package/src/widgets/form/variables.scss +353 -353
  61. package/src/widgets/grid/Grid.scss +2 -2
  62. package/src/widgets/grid/TreeNode.scss +88 -88
  63. package/src/widgets/nav/Menu.scss +74 -74
  64. package/src/widgets/overlay/Dropdown.js +612 -612
  65. package/src/widgets/overlay/FlyweightTooltipTracker.js +39 -39
  66. package/src/widgets/overlay/Tooltip.js +300 -300
  67. package/src/widgets/overlay/Window.js +196 -196
  68. package/src/widgets/overlay/captureMouse.js +124 -124
  69. package/src/widgets/overlay/variables.scss +83 -83
  70. package/src/widgets/variables.scss +144 -144
@@ -1,510 +1,510 @@
1
- import { Axis } from "./Axis";
2
- import { VDOM } from "../../ui/Widget";
3
- import { Stack } from "./Stack";
4
- import { Format } from "../../ui/Format";
5
- import { isNumber } from "../../util/isNumber";
6
- import { zeroTime } from "../../util/date/zeroTime";
7
-
8
- Format.registerFactory("yearOrMonth", (format) => {
9
- let year = Format.parse("datetime;yyyy");
10
- let month = Format.parse("datetime;MMM");
11
- return function (date) {
12
- let d = new Date(date);
13
- if (d.getMonth() == 0) return year(d);
14
- else return month(d);
15
- };
16
- });
17
-
18
- Format.registerFactory("monthOrDay", (format) => {
19
- let month = Format.parse("datetime;MMM");
20
- let day = Format.parse("datetime;dd");
21
- return function (date) {
22
- let d = new Date(date);
23
- if (d.getDate() == 1) return month(d);
24
- else return day(d);
25
- };
26
- });
27
-
28
- export class TimeAxis extends Axis {
29
- init() {
30
- if (this.labelAnchor == "auto") this.labelAnchor = this.vertical ? (this.secondary ? "start" : "end") : "start";
31
-
32
- if (this.labelDx == "auto") this.labelDx = this.vertical ? 0 : "5px";
33
-
34
- if (this.deadZone) {
35
- this.lowerDeadZone = this.deadZone;
36
- this.upperDeadZone = this.deadZone;
37
- }
38
-
39
- super.init();
40
- }
41
-
42
- declareData() {
43
- super.declareData(...arguments, {
44
- anchors: undefined,
45
- min: undefined,
46
- max: undefined,
47
- inverted: undefined,
48
- lowerDeadZone: undefined,
49
- upperDeadZone: undefined,
50
- });
51
- }
52
-
53
- initInstance(context, instance) {
54
- instance.calculator = new TimeScale();
55
- }
56
-
57
- explore(context, instance) {
58
- super.explore(context, instance);
59
- let { min, max, normalized, inverted, lowerDeadZone, upperDeadZone } = instance.data;
60
- instance.calculator.reset(
61
- min,
62
- max,
63
- this.snapToTicks,
64
- this.tickDivisions,
65
- this.minTickDistance,
66
- this.minLabelDistance,
67
- normalized,
68
- inverted,
69
- this.minTickUnit,
70
- lowerDeadZone,
71
- upperDeadZone,
72
- this.decode
73
- );
74
- }
75
-
76
- render(context, instance, key) {
77
- let { data, cached, calculator } = instance;
78
-
79
- cached.axis = calculator.hash();
80
-
81
- if (!data.bounds.valid()) return null;
82
-
83
- let format = this.format || calculator.getFormat();
84
- let formatter = Format.parse(format);
85
-
86
- return (
87
- <g key={key} className={data.classNames} style={data.style}>
88
- {this.renderTicksAndLabels(context, instance, formatter)}
89
- </g>
90
- );
91
- }
92
- }
93
-
94
- Axis.alias("time", TimeAxis);
95
-
96
- TimeAxis.prototype.baseClass = "timeaxis";
97
- TimeAxis.prototype.tickDivisions = {
98
- second: [[1, 5, 15, 30]],
99
- minute: [[1, 5, 15, 30]],
100
- hour: [
101
- [1, 2, 4, 8],
102
- [1, 3, 6, 12],
103
- ],
104
- day: [[1]],
105
- week: [[1]],
106
- month: [[1, 3, 6]],
107
- year: [
108
- [1, 2, 10],
109
- [1, 5, 10],
110
- [5, 10, 50],
111
- [10, 50, 100],
112
- ],
113
- };
114
-
115
- TimeAxis.prototype.snapToTicks = 0;
116
- TimeAxis.prototype.tickSize = 15;
117
- TimeAxis.prototype.minLabelDistance = 60;
118
- TimeAxis.prototype.minTickDistance = 60;
119
- TimeAxis.prototype.minTickUnit = "second";
120
-
121
- function monthNumber(date) {
122
- return date.getFullYear() * 12 + date.getMonth() + (date.getDate() - 1) / 31;
123
- }
124
-
125
- function yearNumber(date) {
126
- return monthNumber(date) / 12;
127
- }
128
-
129
- const miliSeconds = {
130
- second: 1000,
131
- minute: 60 * 1000,
132
- hour: 3600 * 1000,
133
- day: 3600 * 24 * 1000,
134
- week: 3600 * 24 * 7 * 1000,
135
- month: 3600 * 24 * 30 * 1000,
136
- year: 3600 * 24 * 365 * 1000,
137
- };
138
-
139
- class TimeScale {
140
- reset(
141
- min,
142
- max,
143
- snapToTicks,
144
- tickDivisions,
145
- minTickDistance,
146
- minLabelDistance,
147
- normalized,
148
- inverted,
149
- minTickUnit,
150
- lowerDeadZone,
151
- upperDeadZone,
152
- decode
153
- ) {
154
- this.dateCache = {};
155
- this.min = min != null ? this.decodeValue(min) : null;
156
- this.max = max != null ? this.decodeValue(max) : null;
157
- this.snapToTicks = snapToTicks;
158
- this.tickDivisions = tickDivisions;
159
- this.minLabelDistance = minLabelDistance;
160
- this.minTickDistance = minTickDistance;
161
- this.tickSizes = [];
162
- this.normalized = normalized;
163
- this.minTickUnit = minTickUnit;
164
- this.inverted = inverted;
165
- this.lowerDeadZone = lowerDeadZone || 0;
166
- this.upperDeadZone = upperDeadZone || 0;
167
- delete this.minValue;
168
- delete this.maxValue;
169
- delete this.minValuePadded;
170
- delete this.maxValuePadded;
171
- this.stacks = {};
172
- this.decode = decode;
173
- }
174
-
175
- decodeValue(date) {
176
- if (date instanceof Date) return date.getTime();
177
-
178
- switch (typeof date) {
179
- case "string":
180
- let v = this.dateCache[date];
181
- if (!v) {
182
- if (this.decode) date = this.decode(date);
183
- v = this.dateCache[date] = Date.parse(date);
184
- }
185
- return v;
186
-
187
- case "number":
188
- return date;
189
- }
190
- }
191
-
192
- encodeValue(v) {
193
- return new Date(v).toISOString();
194
- }
195
-
196
- getFormat() {
197
- switch (this.tickMeasure) {
198
- case "year":
199
- return "datetime;yyyy";
200
-
201
- case "month":
202
- if (new Date(this.scale.min).getFullYear() != new Date(this.scale.max).getFullYear()) return "yearOrMonth";
203
- return "datetime;yyyy MMM";
204
-
205
- case "week":
206
- return "datetime;MMMdd";
207
-
208
- case "day":
209
- if (
210
- new Date(this.scale.min).getFullYear() != new Date(this.scale.max).getFullYear() ||
211
- new Date(this.scale.min).getMonth() != new Date(this.scale.max).getMonth()
212
- )
213
- return "monthOrDay";
214
-
215
- return "datetime;yyyy MMM dd";
216
-
217
- case "hour":
218
- return "datetime;HH mm n";
219
-
220
- case "minute":
221
- return "datetime;HH mm n";
222
-
223
- case "second":
224
- return "datetime;mm ss";
225
-
226
- default:
227
- return "datetime;yyyy MMM dd HH mm ss n";
228
- }
229
- }
230
-
231
- map(v, offset = 0) {
232
- return this.origin + (this.decodeValue(v) + offset - this.scale.min + this.scale.minPadding) * this.scale.factor;
233
- }
234
-
235
- constrainValue(v) {
236
- return Math.max(this.scale.min, Math.min(this.scale.max, v));
237
- }
238
-
239
- trackValue(v, offset = 0, constrain = false) {
240
- let value = (v - this.origin) / this.scale.factor - offset + this.scale.min - this.scale.minPadding;
241
- if (constrain) value = this.constrainValue(value);
242
- return value;
243
- }
244
-
245
- hash() {
246
- let r = {
247
- origin: this.origin,
248
- factor: this.scale.factor,
249
- min: this.scale.min,
250
- max: this.scale.max,
251
- minPadding: this.scale.minPadding,
252
- maxPadding: this.scale.maxPadding,
253
- };
254
- r.stacks = Object.keys(this.stacks)
255
- .map((s) => this.stacks[s].info.join(","))
256
- .join(":");
257
- return r;
258
- }
259
-
260
- isSame(x) {
261
- let hash = this.hash();
262
- let same = x && !Object.keys(hash).some((k) => x[k] !== hash[k]);
263
- this.shouldUpdate = !same;
264
- return same;
265
- }
266
-
267
- measure(a, b) {
268
- this.a = a;
269
- this.b = b;
270
-
271
- for (let s in this.stacks) {
272
- let info = this.stacks[s].measure(this.normalized);
273
- let [min, max, invalid] = info;
274
- if (this.minValue == null || min < this.minValue) this.minValue = min;
275
- if (this.max == null || max > this.maxValue) this.maxValue = max;
276
- this.stacks[s].info = info;
277
- }
278
-
279
- if (this.min == null) {
280
- if (this.minValue != null) this.min = this.minValue;
281
- else this.min = 0;
282
- }
283
-
284
- if (this.max == null) {
285
- if (this.maxValue != null) this.max = this.maxValue;
286
- else this.max = this.normalized ? 1 : 100;
287
- }
288
-
289
- this.origin = this.inverted ? this.b : this.a;
290
-
291
- this.scale = this.getScale();
292
-
293
- this.calculateTicks();
294
- }
295
-
296
- getTimezoneOffset(date) {
297
- return date.getTimezoneOffset() * 60 * 1000;
298
- }
299
-
300
- getScale(tickSizes, measure) {
301
- let { min, max, upperDeadZone, lowerDeadZone } = this;
302
-
303
- let smin = min;
304
- let smax = max;
305
-
306
- if (isNumber(this.snapToTicks) && measure && tickSizes && 0 <= this.snapToTicks && tickSizes.length > 0) {
307
- let tickSize = tickSizes[Math.min(tickSizes.length - 1, this.snapToTicks)];
308
-
309
- let minDate = new Date(min);
310
- let maxDate = new Date(max);
311
-
312
- switch (measure) {
313
- case "second":
314
- case "minute":
315
- case "hours":
316
- case "day":
317
- default:
318
- let minOffset = this.getTimezoneOffset(minDate);
319
- let maxOffset = this.getTimezoneOffset(maxDate);
320
- let mondayOffset = 4 * miliSeconds.day; //new Date(0).getDay() => 4
321
- smin = Math.floor((smin - minOffset - mondayOffset) / tickSize) * tickSize + minOffset + mondayOffset;
322
- smax = Math.ceil((smax - maxOffset - mondayOffset) / tickSize) * tickSize + maxOffset + mondayOffset;
323
- break;
324
-
325
- case "month":
326
- tickSize /= miliSeconds.month;
327
- let minMonth = monthNumber(minDate);
328
- let maxMonth = monthNumber(maxDate);
329
- minMonth = Math.floor(minMonth / tickSize) * tickSize;
330
- maxMonth = Math.ceil(maxMonth / tickSize) * tickSize;
331
- smin = new Date(Math.floor(minMonth / 12), minMonth % 12, 1).getTime();
332
- smax = new Date(Math.floor(maxMonth / 12), maxMonth % 12, 1).getTime();
333
- break;
334
-
335
- case "year":
336
- tickSize /= miliSeconds.year;
337
- let minYear = yearNumber(minDate);
338
- let maxYear = yearNumber(maxDate);
339
- minYear = Math.floor(minYear / tickSize) * tickSize;
340
- maxYear = Math.ceil(maxYear / tickSize) * tickSize;
341
- smin = new Date(minYear, 0, 1).getTime();
342
- smax = new Date(maxYear, 0, 1).getTime();
343
- break;
344
- }
345
- } else {
346
- if (this.minValue == min) smin = this.minValuePadded;
347
- if (this.maxValue == max) smax = this.maxValuePadded;
348
- }
349
-
350
- //padding should be activated only if using min/max obtained from the data
351
- let minPadding = this.minValue === min ? Math.max(0, smin - this.minValuePadded) : 0;
352
- let maxPadding = this.maxValue === max ? Math.max(0, this.maxValuePadded - smax) : 0;
353
-
354
- let factor = smin < smax ? Math.abs(this.b - this.a) / (smax - smin + minPadding + maxPadding) : 0;
355
- if (factor > 0 && (upperDeadZone > 0 || lowerDeadZone > 0)) {
356
- smin -= lowerDeadZone / factor;
357
- smax += upperDeadZone / factor;
358
- minPadding = this.minValuePadded != null ? Math.max(0, smin - this.minValuePadded) : 0;
359
- maxPadding = this.maxValuePadded != null ? Math.max(0, this.maxValuePadded - smax) : 0;
360
- factor = smin < smax ? Math.abs(this.b - this.a) / (smax - smin + minPadding + maxPadding) : 0;
361
- }
362
-
363
- let sign = this.b > this.a ? 1 : -1;
364
-
365
- return {
366
- factor: sign * (this.inverted ? -factor : factor),
367
- min: smin,
368
- max: smax,
369
- minPadding,
370
- maxPadding,
371
- };
372
- }
373
-
374
- acknowledge(value, width = 0, offset = 0) {
375
- value = this.decodeValue(value);
376
- if (this.minValue == null || value + offset - width / 2 < this.minValuePadded) {
377
- this.minValue = value;
378
- this.minValuePadded = value + offset - width / 2;
379
- }
380
- if (this.maxValue == null || value + offset + width / 2 > this.maxValuePadded) {
381
- this.maxValue = value;
382
- this.maxValuePadded = value + offset + width / 2;
383
- }
384
- }
385
-
386
- getStack(name) {
387
- let s = this.stacks[name];
388
- if (!s) s = this.stacks[name] = new Stack();
389
- return s;
390
- }
391
-
392
- stacknowledge(name, ordinal, value) {
393
- return this.getStack(name).acknowledge(ordinal, value);
394
- }
395
-
396
- stack(name, ordinal, value) {
397
- let v = this.getStack(name).stack(ordinal, value);
398
- return v != null ? this.map(v) : null;
399
- }
400
-
401
- findTickSize(minPxDist) {
402
- return this.tickSizes.find((a) => a * Math.abs(this.scale.factor) >= minPxDist);
403
- }
404
-
405
- getTickSizes() {
406
- return this.tickSizes;
407
- }
408
-
409
- calculateTicks() {
410
- let minReached = false;
411
-
412
- for (let unit in miliSeconds) {
413
- if (!minReached) {
414
- if (unit == this.minTickUnit) minReached = true;
415
- else continue;
416
- }
417
-
418
- let unitSize = miliSeconds[unit];
419
- let divisions = this.tickDivisions[unit];
420
-
421
- if (this.tickSizes.length > 0) {
422
- //add ticks from higher levels
423
- this.tickSizes.push(...divisions[0].map((s) => s * unitSize));
424
- continue;
425
- }
426
-
427
- let bestLabelDistance = Infinity;
428
- let bestTicks = [];
429
- let bestScale = this.scale;
430
-
431
- this.tickMeasure = unit;
432
-
433
- for (let i = 0; i < divisions.length; i++) {
434
- let divs = divisions[i];
435
- let tickSizes = divs.map((s) => s * unitSize);
436
- let scale = this.getScale(tickSizes, unit);
437
- tickSizes.forEach((size, level) => {
438
- let tickDistance = size * Math.abs(scale.factor);
439
- if (tickDistance >= this.minTickDistance && tickDistance < bestLabelDistance) {
440
- bestScale = scale;
441
- bestTicks = tickSizes;
442
- bestLabelDistance = tickDistance;
443
- }
444
- });
445
- }
446
- this.scale = bestScale;
447
- this.tickSizes = bestTicks.filter((ts) => ts * Math.abs(bestScale.factor) >= this.minTickDistance);
448
- }
449
- }
450
-
451
- getTicks(tickSizes) {
452
- return tickSizes.map((size) => {
453
- let result = [],
454
- start,
455
- end,
456
- minDate,
457
- maxDate;
458
- if (this.tickMeasure == "year") {
459
- size /= miliSeconds.year;
460
- minDate = new Date(this.scale.min - this.scale.minPadding);
461
- maxDate = new Date(this.scale.max + this.scale.maxPadding);
462
- start = Math.ceil(yearNumber(minDate) / size) * size;
463
- end = Math.floor(yearNumber(maxDate) / size) * size;
464
- for (let i = start; i <= end; i += size) result.push(new Date(i, 0, 1).getTime());
465
- } else if (this.tickMeasure == "month") {
466
- size /= miliSeconds.month;
467
- minDate = new Date(this.scale.min - this.scale.minPadding);
468
- maxDate = new Date(this.scale.max + this.scale.maxPadding);
469
- start = Math.ceil(monthNumber(minDate) / size) * size;
470
- end = Math.floor(monthNumber(maxDate) / size) * size;
471
- for (let i = start; i <= end; i += size) result.push(new Date(Math.floor(i / 12), i % 12, 1).getTime());
472
- } else if (this.tickMeasure == "day" || this.tickMeasure == "week") {
473
- let multiplier = this.tickMeasure == "week" ? 7 : 1;
474
- size /= miliSeconds.day;
475
- minDate = new Date(this.scale.min - this.scale.minPadding);
476
- maxDate = new Date(this.scale.max + this.scale.maxPadding);
477
- let date = zeroTime(minDate);
478
- if (this.tickMeasure == "week") {
479
- //start on monday
480
- while (date.getDay() != 1) {
481
- date.setDate(date.getDate() + 1);
482
- }
483
- }
484
- while (date.getTime() <= maxDate.getTime()) {
485
- result.push(date);
486
- date = new Date(date);
487
- date.setDate(date.getDate() + multiplier);
488
- }
489
- } else {
490
- let minOffset = this.getTimezoneOffset(new Date(this.scale.min - this.scale.minPadding));
491
- let mondayOffset = 4 * miliSeconds.day;
492
- let date =
493
- Math.ceil((this.scale.min - this.scale.minPadding - minOffset - mondayOffset) / size) * size +
494
- minOffset +
495
- mondayOffset;
496
- while (date <= this.scale.max + this.scale.maxPadding) {
497
- result.push(date);
498
- date += size;
499
- }
500
- }
501
- return result;
502
- });
503
- }
504
-
505
- mapGridlines() {
506
- if (this.tickSizes.length == 0) return [];
507
-
508
- return this.getTicks([this.tickSizes[0]])[0].map((x) => this.map(x));
509
- }
510
- }
1
+ import { Axis } from "./Axis";
2
+ import { VDOM } from "../../ui/Widget";
3
+ import { Stack } from "./Stack";
4
+ import { Format } from "../../ui/Format";
5
+ import { isNumber } from "../../util/isNumber";
6
+ import { zeroTime } from "../../util/date/zeroTime";
7
+
8
+ Format.registerFactory("yearOrMonth", (format) => {
9
+ let year = Format.parse("datetime;yyyy");
10
+ let month = Format.parse("datetime;MMM");
11
+ return function (date) {
12
+ let d = new Date(date);
13
+ if (d.getMonth() == 0) return year(d);
14
+ else return month(d);
15
+ };
16
+ });
17
+
18
+ Format.registerFactory("monthOrDay", (format) => {
19
+ let month = Format.parse("datetime;MMM");
20
+ let day = Format.parse("datetime;dd");
21
+ return function (date) {
22
+ let d = new Date(date);
23
+ if (d.getDate() == 1) return month(d);
24
+ else return day(d);
25
+ };
26
+ });
27
+
28
+ export class TimeAxis extends Axis {
29
+ init() {
30
+ if (this.labelAnchor == "auto") this.labelAnchor = this.vertical ? (this.secondary ? "start" : "end") : "start";
31
+
32
+ if (this.labelDx == "auto") this.labelDx = this.vertical ? 0 : "5px";
33
+
34
+ if (this.deadZone) {
35
+ this.lowerDeadZone = this.deadZone;
36
+ this.upperDeadZone = this.deadZone;
37
+ }
38
+
39
+ super.init();
40
+ }
41
+
42
+ declareData() {
43
+ super.declareData(...arguments, {
44
+ anchors: undefined,
45
+ min: undefined,
46
+ max: undefined,
47
+ inverted: undefined,
48
+ lowerDeadZone: undefined,
49
+ upperDeadZone: undefined,
50
+ });
51
+ }
52
+
53
+ initInstance(context, instance) {
54
+ instance.calculator = new TimeScale();
55
+ }
56
+
57
+ explore(context, instance) {
58
+ super.explore(context, instance);
59
+ let { min, max, normalized, inverted, lowerDeadZone, upperDeadZone } = instance.data;
60
+ instance.calculator.reset(
61
+ min,
62
+ max,
63
+ this.snapToTicks,
64
+ this.tickDivisions,
65
+ this.minTickDistance,
66
+ this.minLabelDistance,
67
+ normalized,
68
+ inverted,
69
+ this.minTickUnit,
70
+ lowerDeadZone,
71
+ upperDeadZone,
72
+ this.decode
73
+ );
74
+ }
75
+
76
+ render(context, instance, key) {
77
+ let { data, cached, calculator } = instance;
78
+
79
+ cached.axis = calculator.hash();
80
+
81
+ if (!data.bounds.valid()) return null;
82
+
83
+ let format = this.format || calculator.getFormat();
84
+ let formatter = Format.parse(format);
85
+
86
+ return (
87
+ <g key={key} className={data.classNames} style={data.style}>
88
+ {this.renderTicksAndLabels(context, instance, formatter)}
89
+ </g>
90
+ );
91
+ }
92
+ }
93
+
94
+ Axis.alias("time", TimeAxis);
95
+
96
+ TimeAxis.prototype.baseClass = "timeaxis";
97
+ TimeAxis.prototype.tickDivisions = {
98
+ second: [[1, 5, 15, 30]],
99
+ minute: [[1, 5, 15, 30]],
100
+ hour: [
101
+ [1, 2, 4, 8],
102
+ [1, 3, 6, 12],
103
+ ],
104
+ day: [[1]],
105
+ week: [[1]],
106
+ month: [[1, 3, 6]],
107
+ year: [
108
+ [1, 2, 10],
109
+ [1, 5, 10],
110
+ [5, 10, 50],
111
+ [10, 50, 100],
112
+ ],
113
+ };
114
+
115
+ TimeAxis.prototype.snapToTicks = 0;
116
+ TimeAxis.prototype.tickSize = 15;
117
+ TimeAxis.prototype.minLabelDistance = 60;
118
+ TimeAxis.prototype.minTickDistance = 60;
119
+ TimeAxis.prototype.minTickUnit = "second";
120
+
121
+ function monthNumber(date) {
122
+ return date.getFullYear() * 12 + date.getMonth() + (date.getDate() - 1) / 31;
123
+ }
124
+
125
+ function yearNumber(date) {
126
+ return monthNumber(date) / 12;
127
+ }
128
+
129
+ const miliSeconds = {
130
+ second: 1000,
131
+ minute: 60 * 1000,
132
+ hour: 3600 * 1000,
133
+ day: 3600 * 24 * 1000,
134
+ week: 3600 * 24 * 7 * 1000,
135
+ month: 3600 * 24 * 30 * 1000,
136
+ year: 3600 * 24 * 365 * 1000,
137
+ };
138
+
139
+ class TimeScale {
140
+ reset(
141
+ min,
142
+ max,
143
+ snapToTicks,
144
+ tickDivisions,
145
+ minTickDistance,
146
+ minLabelDistance,
147
+ normalized,
148
+ inverted,
149
+ minTickUnit,
150
+ lowerDeadZone,
151
+ upperDeadZone,
152
+ decode
153
+ ) {
154
+ this.dateCache = {};
155
+ this.min = min != null ? this.decodeValue(min) : null;
156
+ this.max = max != null ? this.decodeValue(max) : null;
157
+ this.snapToTicks = snapToTicks;
158
+ this.tickDivisions = tickDivisions;
159
+ this.minLabelDistance = minLabelDistance;
160
+ this.minTickDistance = minTickDistance;
161
+ this.tickSizes = [];
162
+ this.normalized = normalized;
163
+ this.minTickUnit = minTickUnit;
164
+ this.inverted = inverted;
165
+ this.lowerDeadZone = lowerDeadZone || 0;
166
+ this.upperDeadZone = upperDeadZone || 0;
167
+ delete this.minValue;
168
+ delete this.maxValue;
169
+ delete this.minValuePadded;
170
+ delete this.maxValuePadded;
171
+ this.stacks = {};
172
+ this.decode = decode;
173
+ }
174
+
175
+ decodeValue(date) {
176
+ if (date instanceof Date) return date.getTime();
177
+
178
+ switch (typeof date) {
179
+ case "string":
180
+ let v = this.dateCache[date];
181
+ if (!v) {
182
+ if (this.decode) date = this.decode(date);
183
+ v = this.dateCache[date] = Date.parse(date);
184
+ }
185
+ return v;
186
+
187
+ case "number":
188
+ return date;
189
+ }
190
+ }
191
+
192
+ encodeValue(v) {
193
+ return new Date(v).toISOString();
194
+ }
195
+
196
+ getFormat() {
197
+ switch (this.tickMeasure) {
198
+ case "year":
199
+ return "datetime;yyyy";
200
+
201
+ case "month":
202
+ if (new Date(this.scale.min).getFullYear() != new Date(this.scale.max).getFullYear()) return "yearOrMonth";
203
+ return "datetime;yyyy MMM";
204
+
205
+ case "week":
206
+ return "datetime;MMMdd";
207
+
208
+ case "day":
209
+ if (
210
+ new Date(this.scale.min).getFullYear() != new Date(this.scale.max).getFullYear() ||
211
+ new Date(this.scale.min).getMonth() != new Date(this.scale.max).getMonth()
212
+ )
213
+ return "monthOrDay";
214
+
215
+ return "datetime;yyyy MMM dd";
216
+
217
+ case "hour":
218
+ return "datetime;HH mm n";
219
+
220
+ case "minute":
221
+ return "datetime;HH mm n";
222
+
223
+ case "second":
224
+ return "datetime;mm ss";
225
+
226
+ default:
227
+ return "datetime;yyyy MMM dd HH mm ss n";
228
+ }
229
+ }
230
+
231
+ map(v, offset = 0) {
232
+ return this.origin + (this.decodeValue(v) + offset - this.scale.min + this.scale.minPadding) * this.scale.factor;
233
+ }
234
+
235
+ constrainValue(v) {
236
+ return Math.max(this.scale.min, Math.min(this.scale.max, v));
237
+ }
238
+
239
+ trackValue(v, offset = 0, constrain = false) {
240
+ let value = (v - this.origin) / this.scale.factor - offset + this.scale.min - this.scale.minPadding;
241
+ if (constrain) value = this.constrainValue(value);
242
+ return value;
243
+ }
244
+
245
+ hash() {
246
+ let r = {
247
+ origin: this.origin,
248
+ factor: this.scale.factor,
249
+ min: this.scale.min,
250
+ max: this.scale.max,
251
+ minPadding: this.scale.minPadding,
252
+ maxPadding: this.scale.maxPadding,
253
+ };
254
+ r.stacks = Object.keys(this.stacks)
255
+ .map((s) => this.stacks[s].info.join(","))
256
+ .join(":");
257
+ return r;
258
+ }
259
+
260
+ isSame(x) {
261
+ let hash = this.hash();
262
+ let same = x && !Object.keys(hash).some((k) => x[k] !== hash[k]);
263
+ this.shouldUpdate = !same;
264
+ return same;
265
+ }
266
+
267
+ measure(a, b) {
268
+ this.a = a;
269
+ this.b = b;
270
+
271
+ for (let s in this.stacks) {
272
+ let info = this.stacks[s].measure(this.normalized);
273
+ let [min, max, invalid] = info;
274
+ if (this.minValue == null || min < this.minValue) this.minValue = min;
275
+ if (this.max == null || max > this.maxValue) this.maxValue = max;
276
+ this.stacks[s].info = info;
277
+ }
278
+
279
+ if (this.min == null) {
280
+ if (this.minValue != null) this.min = this.minValue;
281
+ else this.min = 0;
282
+ }
283
+
284
+ if (this.max == null) {
285
+ if (this.maxValue != null) this.max = this.maxValue;
286
+ else this.max = this.normalized ? 1 : 100;
287
+ }
288
+
289
+ this.origin = this.inverted ? this.b : this.a;
290
+
291
+ this.scale = this.getScale();
292
+
293
+ this.calculateTicks();
294
+ }
295
+
296
+ getTimezoneOffset(date) {
297
+ return date.getTimezoneOffset() * 60 * 1000;
298
+ }
299
+
300
+ getScale(tickSizes, measure) {
301
+ let { min, max, upperDeadZone, lowerDeadZone } = this;
302
+
303
+ let smin = min;
304
+ let smax = max;
305
+
306
+ if (isNumber(this.snapToTicks) && measure && tickSizes && 0 <= this.snapToTicks && tickSizes.length > 0) {
307
+ let tickSize = tickSizes[Math.min(tickSizes.length - 1, this.snapToTicks)];
308
+
309
+ let minDate = new Date(min);
310
+ let maxDate = new Date(max);
311
+
312
+ switch (measure) {
313
+ case "second":
314
+ case "minute":
315
+ case "hours":
316
+ case "day":
317
+ default:
318
+ let minOffset = this.getTimezoneOffset(minDate);
319
+ let maxOffset = this.getTimezoneOffset(maxDate);
320
+ let mondayOffset = 4 * miliSeconds.day; //new Date(0).getDay() => 4
321
+ smin = Math.floor((smin - minOffset - mondayOffset) / tickSize) * tickSize + minOffset + mondayOffset;
322
+ smax = Math.ceil((smax - maxOffset - mondayOffset) / tickSize) * tickSize + maxOffset + mondayOffset;
323
+ break;
324
+
325
+ case "month":
326
+ tickSize /= miliSeconds.month;
327
+ let minMonth = monthNumber(minDate);
328
+ let maxMonth = monthNumber(maxDate);
329
+ minMonth = Math.floor(minMonth / tickSize) * tickSize;
330
+ maxMonth = Math.ceil(maxMonth / tickSize) * tickSize;
331
+ smin = new Date(Math.floor(minMonth / 12), minMonth % 12, 1).getTime();
332
+ smax = new Date(Math.floor(maxMonth / 12), maxMonth % 12, 1).getTime();
333
+ break;
334
+
335
+ case "year":
336
+ tickSize /= miliSeconds.year;
337
+ let minYear = yearNumber(minDate);
338
+ let maxYear = yearNumber(maxDate);
339
+ minYear = Math.floor(minYear / tickSize) * tickSize;
340
+ maxYear = Math.ceil(maxYear / tickSize) * tickSize;
341
+ smin = new Date(minYear, 0, 1).getTime();
342
+ smax = new Date(maxYear, 0, 1).getTime();
343
+ break;
344
+ }
345
+ } else {
346
+ if (this.minValue == min) smin = this.minValuePadded;
347
+ if (this.maxValue == max) smax = this.maxValuePadded;
348
+ }
349
+
350
+ //padding should be activated only if using min/max obtained from the data
351
+ let minPadding = this.minValue === min ? Math.max(0, smin - this.minValuePadded) : 0;
352
+ let maxPadding = this.maxValue === max ? Math.max(0, this.maxValuePadded - smax) : 0;
353
+
354
+ let factor = smin < smax ? Math.abs(this.b - this.a) / (smax - smin + minPadding + maxPadding) : 0;
355
+ if (factor > 0 && (upperDeadZone > 0 || lowerDeadZone > 0)) {
356
+ smin -= lowerDeadZone / factor;
357
+ smax += upperDeadZone / factor;
358
+ minPadding = this.minValuePadded != null ? Math.max(0, smin - this.minValuePadded) : 0;
359
+ maxPadding = this.maxValuePadded != null ? Math.max(0, this.maxValuePadded - smax) : 0;
360
+ factor = smin < smax ? Math.abs(this.b - this.a) / (smax - smin + minPadding + maxPadding) : 0;
361
+ }
362
+
363
+ let sign = this.b > this.a ? 1 : -1;
364
+
365
+ return {
366
+ factor: sign * (this.inverted ? -factor : factor),
367
+ min: smin,
368
+ max: smax,
369
+ minPadding,
370
+ maxPadding,
371
+ };
372
+ }
373
+
374
+ acknowledge(value, width = 0, offset = 0) {
375
+ value = this.decodeValue(value);
376
+ if (this.minValue == null || value + offset - width / 2 < this.minValuePadded) {
377
+ this.minValue = value;
378
+ this.minValuePadded = value + offset - width / 2;
379
+ }
380
+ if (this.maxValue == null || value + offset + width / 2 > this.maxValuePadded) {
381
+ this.maxValue = value;
382
+ this.maxValuePadded = value + offset + width / 2;
383
+ }
384
+ }
385
+
386
+ getStack(name) {
387
+ let s = this.stacks[name];
388
+ if (!s) s = this.stacks[name] = new Stack();
389
+ return s;
390
+ }
391
+
392
+ stacknowledge(name, ordinal, value) {
393
+ return this.getStack(name).acknowledge(ordinal, value);
394
+ }
395
+
396
+ stack(name, ordinal, value) {
397
+ let v = this.getStack(name).stack(ordinal, value);
398
+ return v != null ? this.map(v) : null;
399
+ }
400
+
401
+ findTickSize(minPxDist) {
402
+ return this.tickSizes.find((a) => a * Math.abs(this.scale.factor) >= minPxDist);
403
+ }
404
+
405
+ getTickSizes() {
406
+ return this.tickSizes;
407
+ }
408
+
409
+ calculateTicks() {
410
+ let minReached = false;
411
+
412
+ for (let unit in miliSeconds) {
413
+ if (!minReached) {
414
+ if (unit == this.minTickUnit) minReached = true;
415
+ else continue;
416
+ }
417
+
418
+ let unitSize = miliSeconds[unit];
419
+ let divisions = this.tickDivisions[unit];
420
+
421
+ if (this.tickSizes.length > 0) {
422
+ //add ticks from higher levels
423
+ this.tickSizes.push(...divisions[0].map((s) => s * unitSize));
424
+ continue;
425
+ }
426
+
427
+ let bestLabelDistance = Infinity;
428
+ let bestTicks = [];
429
+ let bestScale = this.scale;
430
+
431
+ this.tickMeasure = unit;
432
+
433
+ for (let i = 0; i < divisions.length; i++) {
434
+ let divs = divisions[i];
435
+ let tickSizes = divs.map((s) => s * unitSize);
436
+ let scale = this.getScale(tickSizes, unit);
437
+ tickSizes.forEach((size, level) => {
438
+ let tickDistance = size * Math.abs(scale.factor);
439
+ if (tickDistance >= this.minTickDistance && tickDistance < bestLabelDistance) {
440
+ bestScale = scale;
441
+ bestTicks = tickSizes;
442
+ bestLabelDistance = tickDistance;
443
+ }
444
+ });
445
+ }
446
+ this.scale = bestScale;
447
+ this.tickSizes = bestTicks.filter((ts) => ts * Math.abs(bestScale.factor) >= this.minTickDistance);
448
+ }
449
+ }
450
+
451
+ getTicks(tickSizes) {
452
+ return tickSizes.map((size) => {
453
+ let result = [],
454
+ start,
455
+ end,
456
+ minDate,
457
+ maxDate;
458
+ if (this.tickMeasure == "year") {
459
+ size /= miliSeconds.year;
460
+ minDate = new Date(this.scale.min - this.scale.minPadding);
461
+ maxDate = new Date(this.scale.max + this.scale.maxPadding);
462
+ start = Math.ceil(yearNumber(minDate) / size) * size;
463
+ end = Math.floor(yearNumber(maxDate) / size) * size;
464
+ for (let i = start; i <= end; i += size) result.push(new Date(i, 0, 1).getTime());
465
+ } else if (this.tickMeasure == "month") {
466
+ size /= miliSeconds.month;
467
+ minDate = new Date(this.scale.min - this.scale.minPadding);
468
+ maxDate = new Date(this.scale.max + this.scale.maxPadding);
469
+ start = Math.ceil(monthNumber(minDate) / size) * size;
470
+ end = Math.floor(monthNumber(maxDate) / size) * size;
471
+ for (let i = start; i <= end; i += size) result.push(new Date(Math.floor(i / 12), i % 12, 1).getTime());
472
+ } else if (this.tickMeasure == "day" || this.tickMeasure == "week") {
473
+ let multiplier = this.tickMeasure == "week" ? 7 : 1;
474
+ size /= miliSeconds.day;
475
+ minDate = new Date(this.scale.min - this.scale.minPadding);
476
+ maxDate = new Date(this.scale.max + this.scale.maxPadding);
477
+ let date = zeroTime(minDate);
478
+ if (this.tickMeasure == "week") {
479
+ //start on monday
480
+ while (date.getDay() != 1) {
481
+ date.setDate(date.getDate() + 1);
482
+ }
483
+ }
484
+ while (date.getTime() <= maxDate.getTime()) {
485
+ result.push(date);
486
+ date = new Date(date);
487
+ date.setDate(date.getDate() + multiplier);
488
+ }
489
+ } else {
490
+ let minOffset = this.getTimezoneOffset(new Date(this.scale.min - this.scale.minPadding));
491
+ let mondayOffset = 4 * miliSeconds.day;
492
+ let date =
493
+ Math.ceil((this.scale.min - this.scale.minPadding - minOffset - mondayOffset) / size) * size +
494
+ minOffset +
495
+ mondayOffset;
496
+ while (date <= this.scale.max + this.scale.maxPadding) {
497
+ result.push(date);
498
+ date += size;
499
+ }
500
+ }
501
+ return result;
502
+ });
503
+ }
504
+
505
+ mapGridlines() {
506
+ if (this.tickSizes.length == 0) return [];
507
+
508
+ return this.getTicks([this.tickSizes[0]])[0].map((x) => this.map(x));
509
+ }
510
+ }