cx 26.3.9 → 26.4.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.
Files changed (591) hide show
  1. package/.mocharc.json +5 -5
  2. package/LICENSE-THIRD-PARTY.md +91 -91
  3. package/LICENSE.md +7 -7
  4. package/README.md +46 -46
  5. package/build/widgets/form/Test.d.ts +4 -0
  6. package/build/widgets/form/Test.d.ts.map +1 -0
  7. package/build/widgets/form/Test.js +5 -0
  8. package/build/widgets/nav/Menu.d.ts +1 -0
  9. package/build/widgets/nav/Menu.d.ts.map +1 -1
  10. package/build/widgets/nav/Menu.js +3 -0
  11. package/build/widgets/nav/MenuItem.js +1 -1
  12. package/build.js +133 -133
  13. package/dist/charts.css +10 -0
  14. package/dist/manifest.js +904 -904
  15. package/dist/widgets.css +19 -11
  16. package/dist/widgets.js +4 -1
  17. package/package.json +100 -100
  18. package/src/charts/Bar.scss +32 -32
  19. package/src/charts/Bar.ts +114 -114
  20. package/src/charts/BarGraph.tsx +145 -145
  21. package/src/charts/BubbleGraph.scss +35 -35
  22. package/src/charts/BubbleGraph.tsx +165 -165
  23. package/src/charts/Chart.ts +110 -110
  24. package/src/charts/ColorMap.ts +150 -150
  25. package/src/charts/Column.scss +32 -32
  26. package/src/charts/Column.ts +124 -124
  27. package/src/charts/ColumnBarBase.tsx +309 -309
  28. package/src/charts/ColumnBarGraphBase.tsx +229 -229
  29. package/src/charts/ColumnGraph.scss +32 -32
  30. package/src/charts/ColumnGraph.tsx +153 -153
  31. package/src/charts/Grid.ts +5 -5
  32. package/src/charts/Gridlines.scss +27 -27
  33. package/src/charts/Gridlines.tsx +88 -88
  34. package/src/charts/Legend.tsx +314 -314
  35. package/src/charts/LegendEntry.tsx +197 -197
  36. package/src/charts/LineGraph.tsx +455 -455
  37. package/src/charts/Marker.scss +46 -46
  38. package/src/charts/Marker.tsx +538 -538
  39. package/src/charts/MarkerLine.scss +23 -23
  40. package/src/charts/MarkerLine.tsx +233 -233
  41. package/src/charts/MouseTracker.tsx +115 -115
  42. package/src/charts/Pie.ts +8 -8
  43. package/src/charts/PieChart.scss +32 -32
  44. package/src/charts/PieChart.tsx +843 -843
  45. package/src/charts/PieLabel.tsx +124 -124
  46. package/src/charts/PieLabelsContainer.ts +68 -68
  47. package/src/charts/Range.scss +23 -23
  48. package/src/charts/Range.tsx +318 -318
  49. package/src/charts/RangeMarker.scss +17 -17
  50. package/src/charts/RangeMarker.tsx +250 -250
  51. package/src/charts/ScatterGraph.scss +27 -27
  52. package/src/charts/ScatterGraph.tsx +245 -245
  53. package/src/charts/Swimlane.scss +19 -16
  54. package/src/charts/Swimlane.tsx +195 -195
  55. package/src/charts/Swimlanes.scss +19 -16
  56. package/src/charts/Swimlanes.tsx +179 -179
  57. package/src/charts/axis/Axis.scss +24 -24
  58. package/src/charts/axis/Axis.tsx +444 -444
  59. package/src/charts/axis/CategoryAxis.scss +37 -37
  60. package/src/charts/axis/CategoryAxis.tsx +313 -313
  61. package/src/charts/axis/NumericAxis.scss +38 -38
  62. package/src/charts/axis/NumericAxis.tsx +437 -437
  63. package/src/charts/axis/Stack.ts +61 -61
  64. package/src/charts/axis/TimeAxis.scss +37 -37
  65. package/src/charts/axis/TimeAxis.tsx +834 -834
  66. package/src/charts/axis/index.scss +4 -4
  67. package/src/charts/axis/index.ts +3 -3
  68. package/src/charts/axis/variables.scss +5 -5
  69. package/src/charts/helpers/MinMaxFinder.ts +66 -66
  70. package/src/charts/helpers/PointReducer.ts +135 -135
  71. package/src/charts/helpers/index.ts +4 -4
  72. package/src/charts/index.scss +21 -19
  73. package/src/charts/index.ts +34 -34
  74. package/src/charts/palette.scss +77 -77
  75. package/src/charts/palette.variables.scss +23 -23
  76. package/src/charts/shapes.tsx +86 -86
  77. package/src/charts/variables.scss +53 -53
  78. package/src/core.d.ts +182 -182
  79. package/src/data/AggregateFunction.ts +171 -171
  80. package/src/data/ArrayElementView.spec.ts +88 -88
  81. package/src/data/ArrayElementView.ts +91 -91
  82. package/src/data/ArrayRef.ts +34 -34
  83. package/src/data/AugmentedViewBase.ts +88 -88
  84. package/src/data/Binding.spec.ts +69 -69
  85. package/src/data/Binding.ts +107 -107
  86. package/src/data/ExposedRecordView.ts +95 -95
  87. package/src/data/ExposedValueView.ts +89 -89
  88. package/src/data/Expression.spec.ts +229 -229
  89. package/src/data/Expression.ts +233 -233
  90. package/src/data/Grouper.spec.ts +57 -57
  91. package/src/data/Grouper.ts +158 -158
  92. package/src/data/NestedDataView.ts +43 -43
  93. package/src/data/ReadOnlyDataView.ts +39 -39
  94. package/src/data/Ref.spec.ts +79 -79
  95. package/src/data/Ref.ts +104 -104
  96. package/src/data/Selector.ts +10 -10
  97. package/src/data/Store.spec.ts +22 -22
  98. package/src/data/Store.ts +52 -52
  99. package/src/data/StoreProxy.ts +19 -19
  100. package/src/data/StoreRef.spec.ts +24 -24
  101. package/src/data/StoreRef.ts +66 -66
  102. package/src/data/StringTemplate.spec.ts +132 -132
  103. package/src/data/StringTemplate.ts +93 -93
  104. package/src/data/StructuredSelector.spec.ts +113 -113
  105. package/src/data/StructuredSelector.ts +146 -146
  106. package/src/data/SubscribableView.ts +63 -63
  107. package/src/data/View.spec.ts +60 -60
  108. package/src/data/View.ts +346 -346
  109. package/src/data/ZoomIntoPropertyView.spec.ts +64 -64
  110. package/src/data/ZoomIntoPropertyView.ts +45 -45
  111. package/src/data/comparer.spec.ts +60 -60
  112. package/src/data/comparer.ts +78 -78
  113. package/src/data/computable.spec.ts +87 -87
  114. package/src/data/computable.ts +69 -69
  115. package/src/data/createAccessorModelProxy.spec.tsx +157 -157
  116. package/src/data/createStructuredSelector.spec.ts +45 -45
  117. package/src/data/createStructuredSelector.ts +62 -62
  118. package/src/data/defaultCompare.ts +14 -14
  119. package/src/data/diff/diffArrays.ts +49 -49
  120. package/src/data/diff/diffs.spec.ts +49 -49
  121. package/src/data/diff/index.ts +1 -1
  122. package/src/data/enableFatArrowExpansion.ts +6 -6
  123. package/src/data/getAccessor.spec.ts +11 -11
  124. package/src/data/getAccessor.ts +74 -74
  125. package/src/data/getSelector.spec.ts +43 -43
  126. package/src/data/getSelector.ts +66 -66
  127. package/src/data/index.ts +30 -30
  128. package/src/data/isSelector.ts +26 -26
  129. package/src/data/ops/append.spec.ts +28 -28
  130. package/src/data/ops/append.ts +5 -5
  131. package/src/data/ops/filter.spec.ts +35 -35
  132. package/src/data/ops/filter.ts +9 -9
  133. package/src/data/ops/findTreeNode.spec.ts +23 -23
  134. package/src/data/ops/findTreeNode.ts +33 -33
  135. package/src/data/ops/findTreePath.ts +28 -28
  136. package/src/data/ops/index.ts +11 -11
  137. package/src/data/ops/insertElement.ts +3 -3
  138. package/src/data/ops/merge.spec.ts +27 -27
  139. package/src/data/ops/merge.ts +13 -13
  140. package/src/data/ops/moveElement.ts +21 -21
  141. package/src/data/ops/removeTreeNodes.spec.ts +37 -37
  142. package/src/data/ops/removeTreeNodes.ts +28 -28
  143. package/src/data/ops/updateArray.spec.ts +69 -69
  144. package/src/data/ops/updateArray.ts +31 -31
  145. package/src/data/ops/updateTree.spec.ts +54 -54
  146. package/src/data/ops/updateTree.ts +49 -49
  147. package/src/data/test-types.ts +7 -7
  148. package/src/hooks/createLocalStorageRef.ts +21 -21
  149. package/src/hooks/index.ts +8 -8
  150. package/src/hooks/invokeCallback.spec.tsx +59 -59
  151. package/src/hooks/invokeCallback.ts +8 -8
  152. package/src/hooks/resolveCallback.spec.tsx +71 -71
  153. package/src/hooks/resolveCallback.ts +16 -16
  154. package/src/hooks/store.spec.tsx +67 -67
  155. package/src/hooks/store.ts +46 -46
  156. package/src/hooks/useEffect.ts +14 -14
  157. package/src/hooks/useInterval.ts +8 -8
  158. package/src/hooks/useState.ts +20 -20
  159. package/src/hooks/useTrigger.spec.tsx +105 -105
  160. package/src/hooks/useTrigger.ts +26 -26
  161. package/src/index.scss +5 -5
  162. package/src/index.ts +7 -7
  163. package/src/jsx-dev-runtime.ts +4 -4
  164. package/src/jsx-runtime.spec.tsx +508 -508
  165. package/src/jsx-runtime.ts +88 -88
  166. package/src/locale/de-de.ts +76 -76
  167. package/src/locale/en-us.ts +75 -75
  168. package/src/locale/es-es.ts +76 -76
  169. package/src/locale/fr-fr.ts +76 -76
  170. package/src/locale/nl-nl.ts +76 -76
  171. package/src/locale/pt-pt.ts +76 -76
  172. package/src/locale/sr-latn-ba.ts +76 -76
  173. package/src/maps.scss +5 -5
  174. package/src/svg/BoundedObject.ts +101 -101
  175. package/src/svg/ClipRect.tsx +29 -29
  176. package/src/svg/Ellipse.tsx +76 -76
  177. package/src/svg/Line.tsx +73 -73
  178. package/src/svg/NonOverlappingRect.ts +26 -26
  179. package/src/svg/NonOverlappingRectGroup.ts +49 -49
  180. package/src/svg/Rectangle.tsx +98 -98
  181. package/src/svg/Svg.scss +28 -28
  182. package/src/svg/Svg.tsx +241 -241
  183. package/src/svg/Text.scss +19 -19
  184. package/src/svg/Text.tsx +190 -190
  185. package/src/svg/TextualBoundedObject.ts +35 -35
  186. package/src/svg/index.scss +10 -10
  187. package/src/svg/index.ts +17 -17
  188. package/src/svg/util/Rect.ts +105 -105
  189. package/src/ui/CSS.ts +87 -87
  190. package/src/ui/CSSHelper.ts +17 -17
  191. package/src/ui/Container.spec.ts +87 -87
  192. package/src/ui/Container.tsx +220 -220
  193. package/src/ui/ContentResolver.spec.tsx +585 -585
  194. package/src/ui/ContentResolver.ts +132 -132
  195. package/src/ui/Controller.spec.tsx +604 -604
  196. package/src/ui/Controller.ts +207 -207
  197. package/src/ui/Culture.ts +159 -159
  198. package/src/ui/Cx.spec.tsx +210 -210
  199. package/src/ui/Cx.tsx +386 -386
  200. package/src/ui/DataProxy.spec.tsx +337 -337
  201. package/src/ui/DataProxy.ts +55 -55
  202. package/src/ui/DetachedScope.tsx +159 -159
  203. package/src/ui/FocusManager.ts +171 -171
  204. package/src/ui/Format.ts +108 -108
  205. package/src/ui/HoverSync.tsx +221 -221
  206. package/src/ui/Instance.ts +963 -963
  207. package/src/ui/IsolatedScope.spec.tsx +62 -62
  208. package/src/ui/IsolatedScope.ts +52 -52
  209. package/src/ui/Localization.ts +70 -70
  210. package/src/ui/Prop.ts +141 -141
  211. package/src/ui/PureContainer.spec.tsx +232 -232
  212. package/src/ui/PureContainer.tsx +19 -19
  213. package/src/ui/RenderingContext.ts +99 -99
  214. package/src/ui/Repeater.spec.tsx +181 -143
  215. package/src/ui/Repeater.ts +194 -194
  216. package/src/ui/Rescope.spec.tsx +199 -199
  217. package/src/ui/Rescope.ts +50 -50
  218. package/src/ui/ResizeManager.ts +30 -30
  219. package/src/ui/Restate.spec.tsx +422 -422
  220. package/src/ui/Restate.tsx +217 -217
  221. package/src/ui/StaticText.ts +11 -11
  222. package/src/ui/StructuredInstanceDataAccessor.ts +32 -32
  223. package/src/ui/Text.ts +52 -52
  224. package/src/ui/VDOM.ts +1 -1
  225. package/src/ui/Widget.spec.tsx +53 -53
  226. package/src/ui/Widget.tsx +359 -359
  227. package/src/ui/ZIndexManager.ts +11 -11
  228. package/src/ui/adapter/ArrayAdapter.spec.ts +55 -55
  229. package/src/ui/adapter/ArrayAdapter.ts +229 -229
  230. package/src/ui/adapter/DataAdapter.ts +52 -52
  231. package/src/ui/adapter/GroupAdapter.spec.ts +42 -42
  232. package/src/ui/adapter/GroupAdapter.ts +244 -244
  233. package/src/ui/adapter/TreeAdapter.spec.ts +76 -76
  234. package/src/ui/adapter/TreeAdapter.ts +245 -245
  235. package/src/ui/adapter/index.ts +4 -4
  236. package/src/ui/app/History.ts +147 -147
  237. package/src/ui/app/Url.spec.ts +50 -50
  238. package/src/ui/app/Url.ts +102 -102
  239. package/src/ui/app/index.ts +5 -5
  240. package/src/ui/app/startAppLoop.tsx +82 -82
  241. package/src/ui/app/startHotAppLoop.ts +41 -41
  242. package/src/ui/batchUpdates.ts +72 -72
  243. package/src/ui/bind.ts +10 -10
  244. package/src/ui/createFunctionalComponent.spec.tsx +605 -605
  245. package/src/ui/createFunctionalComponent.ts +96 -96
  246. package/src/ui/expr.ts +47 -47
  247. package/src/ui/exprHelpers.spec.ts +412 -412
  248. package/src/ui/exprHelpers.ts +96 -96
  249. package/src/ui/flattenProps.ts +21 -21
  250. package/src/ui/index.scss +2 -2
  251. package/src/ui/index.ts +51 -51
  252. package/src/ui/keyboardShortcuts.ts +50 -50
  253. package/src/ui/layout/Content.ts +30 -30
  254. package/src/ui/layout/ContentPlaceholder.spec.tsx +599 -599
  255. package/src/ui/layout/ContentPlaceholder.ts +133 -133
  256. package/src/ui/layout/FirstVisibleChildLayout.spec.tsx +207 -207
  257. package/src/ui/layout/FirstVisibleChildLayout.ts +60 -60
  258. package/src/ui/layout/LabelsLeftLayout.scss +45 -45
  259. package/src/ui/layout/LabelsLeftLayout.tsx +76 -76
  260. package/src/ui/layout/LabelsTopLayout.scss +73 -63
  261. package/src/ui/layout/LabelsTopLayout.tsx +156 -156
  262. package/src/ui/layout/UseParentLayout.ts +8 -8
  263. package/src/ui/layout/exploreChildren.ts +38 -38
  264. package/src/ui/layout/index.scss +2 -2
  265. package/src/ui/layout/index.ts +10 -10
  266. package/src/ui/layout/variables.scss +2 -2
  267. package/src/ui/selection/KeySelection.ts +153 -153
  268. package/src/ui/selection/PropertySelection.ts +87 -87
  269. package/src/ui/selection/Selection.ts +128 -128
  270. package/src/ui/selection/index.ts +3 -3
  271. package/src/ui/tpl.spec.ts +69 -69
  272. package/src/ui/tpl.ts +17 -17
  273. package/src/ui/variables.scss +1 -1
  274. package/src/util/Component.spec.ts +494 -494
  275. package/src/util/Component.ts +352 -352
  276. package/src/util/Console.ts +13 -13
  277. package/src/util/DOM.ts +88 -88
  278. package/src/util/Debug.ts +71 -71
  279. package/src/util/Format.spec.ts +69 -69
  280. package/src/util/Format.ts +267 -267
  281. package/src/util/GlobalCacheIdentifier.ts +11 -11
  282. package/src/util/KeyCode.ts +21 -21
  283. package/src/util/SubscriberList.ts +86 -86
  284. package/src/util/Timing.ts +58 -58
  285. package/src/util/TraversalStack.spec.ts +53 -53
  286. package/src/util/TraversalStack.ts +47 -47
  287. package/src/util/addEventListenerWithOptions.ts +41 -41
  288. package/src/util/browserSupportsPassiveEventHandlers.ts +20 -20
  289. package/src/util/calculateNaturalElementHeight.ts +22 -22
  290. package/src/util/call-once.scss +6 -6
  291. package/src/util/capitalize.ts +4 -4
  292. package/src/util/coalesce.ts +6 -6
  293. package/src/util/color/hslToRgb.ts +34 -34
  294. package/src/util/color/index.ts +4 -4
  295. package/src/util/color/parseColor.ts +173 -173
  296. package/src/util/color/rgbToHex.ts +14 -14
  297. package/src/util/color/rgbToHsl.ts +35 -35
  298. package/src/util/date/dateDiff.ts +9 -9
  299. package/src/util/date/diff.ts +13 -13
  300. package/src/util/date/encodeDate.ts +8 -8
  301. package/src/util/date/encodeDateWithTimezoneOffset.ts +18 -18
  302. package/src/util/date/index.ts +11 -11
  303. package/src/util/date/lowerBoundCheck.ts +13 -13
  304. package/src/util/date/maxDate.ts +14 -14
  305. package/src/util/date/minDate.ts +14 -14
  306. package/src/util/date/monthStart.ts +8 -8
  307. package/src/util/date/parseDateInvariant.ts +20 -20
  308. package/src/util/date/sameDate.ts +11 -11
  309. package/src/util/date/upperBoundCheck.spec.ts +30 -30
  310. package/src/util/date/upperBoundCheck.ts +13 -13
  311. package/src/util/date/zeroTime.ts +9 -9
  312. package/src/util/debounce.ts +26 -26
  313. package/src/util/dummyCallback.ts +1 -1
  314. package/src/util/escapeSpecialRegexCharacters.ts +8 -8
  315. package/src/util/eventCallbacks.ts +12 -12
  316. package/src/util/expandFatArrows.ts +118 -118
  317. package/src/util/findScrollableParent.ts +15 -15
  318. package/src/util/getActiveElement.ts +4 -4
  319. package/src/util/getParentFrameBoundingClientRect.ts +13 -13
  320. package/src/util/getScrollerBoundingClientRect.ts +12 -12
  321. package/src/util/getSearchQueryPredicate.spec.ts +40 -40
  322. package/src/util/getSearchQueryPredicate.ts +58 -58
  323. package/src/util/getTopLevelBoundingClientRect.ts +7 -7
  324. package/src/util/getVendorPrefix.ts +38 -38
  325. package/src/util/hasKey.ts +18 -18
  326. package/src/util/index.scss +13 -13
  327. package/src/util/index.ts +55 -55
  328. package/src/util/innerTextTrim.ts +10 -10
  329. package/src/util/isArray.ts +3 -3
  330. package/src/util/isDataRecord.ts +5 -5
  331. package/src/util/isDefined.ts +3 -3
  332. package/src/util/isDigit.ts +8 -8
  333. package/src/util/isFunction.ts +3 -3
  334. package/src/util/isNonEmptyArray.ts +3 -3
  335. package/src/util/isNumber.ts +3 -3
  336. package/src/util/isObject.ts +3 -3
  337. package/src/util/isPromise.ts +6 -6
  338. package/src/util/isString.ts +3 -3
  339. package/src/util/isTextInputElement.ts +2 -2
  340. package/src/util/isTouchDevice.ts +7 -7
  341. package/src/util/isTouchEvent.ts +64 -64
  342. package/src/util/isUndefined.ts +3 -3
  343. package/src/util/isValidIdentifierName.spec.ts +33 -33
  344. package/src/util/isValidIdentifierName.ts +5 -5
  345. package/src/util/maps.scss +1 -1
  346. package/src/util/onIdleCallback.ts +10 -10
  347. package/src/util/parseStyle.ts +29 -29
  348. package/src/util/quote.ts +6 -6
  349. package/src/util/reverseSlice.ts +9 -9
  350. package/src/util/routeAppend.spec.ts +19 -19
  351. package/src/util/routeAppend.ts +15 -15
  352. package/src/util/scrollElementIntoView.ts +40 -40
  353. package/src/util/scss/add-rules.scss +40 -40
  354. package/src/util/scss/besm.scss +15 -15
  355. package/src/util/scss/calc.scss +137 -137
  356. package/src/util/scss/call-once.scss +12 -12
  357. package/src/util/scss/clockwise.scss +49 -49
  358. package/src/util/scss/colors.scss +9 -9
  359. package/src/util/scss/deep-get.scss +11 -11
  360. package/src/util/scss/deep-merge.scss +21 -21
  361. package/src/util/scss/defaults.scss +24 -24
  362. package/src/util/scss/divide.scss +3 -3
  363. package/src/util/scss/elements.scss +78 -78
  364. package/src/util/scss/global.scss +15 -15
  365. package/src/util/scss/index.scss +1 -1
  366. package/src/util/scss/maps.scss +2 -2
  367. package/src/util/scss/pad-size.scss +9 -9
  368. package/src/util/scss/padding.scss +6 -6
  369. package/src/util/scss/screen-size.scss +5 -5
  370. package/src/util/scss/variables.scss +6 -6
  371. package/src/util/shallowEquals.ts +43 -43
  372. package/src/util/test/createTestRenderer.tsx +19 -19
  373. package/src/util/throttle.ts +21 -21
  374. package/src/util/validatedDebounce.ts +23 -23
  375. package/src/util/variables.scss +1 -1
  376. package/src/variables.scss +5 -5
  377. package/src/widgets/AccessorBindings.spec.tsx +90 -90
  378. package/src/widgets/Button.scss +143 -143
  379. package/src/widgets/Button.tsx +181 -181
  380. package/src/widgets/Button.variables.scss +21 -21
  381. package/src/widgets/CxCredit.scss +41 -41
  382. package/src/widgets/CxCredit.tsx +46 -46
  383. package/src/widgets/DocumentTitle.ts +95 -95
  384. package/src/widgets/FlexBox.scss +153 -153
  385. package/src/widgets/FlexBox.tsx +168 -168
  386. package/src/widgets/Heading.scss +46 -46
  387. package/src/widgets/Heading.ts +42 -42
  388. package/src/widgets/HighlightedSearchText.scss +27 -27
  389. package/src/widgets/HighlightedSearchText.tsx +54 -54
  390. package/src/widgets/HtmlElement.spec.helpers.tsx +108 -108
  391. package/src/widgets/HtmlElement.spec.tsx +117 -117
  392. package/src/widgets/HtmlElement.tsx +468 -468
  393. package/src/widgets/Icon.scss +28 -28
  394. package/src/widgets/Icon.ts +64 -64
  395. package/src/widgets/List.scss +100 -100
  396. package/src/widgets/List.tsx +792 -792
  397. package/src/widgets/ProgressBar.scss +64 -64
  398. package/src/widgets/ProgressBar.tsx +66 -66
  399. package/src/widgets/ReactElementWrapper.spec.tsx +452 -452
  400. package/src/widgets/ReactElementWrapper.tsx +108 -108
  401. package/src/widgets/Resizer.scss +46 -46
  402. package/src/widgets/Resizer.tsx +200 -200
  403. package/src/widgets/Sandbox.ts +104 -104
  404. package/src/widgets/Section.scss +53 -53
  405. package/src/widgets/Section.tsx +187 -187
  406. package/src/widgets/animations.scss +13 -13
  407. package/src/widgets/autoFocus.ts +9 -9
  408. package/src/widgets/box.scss +47 -47
  409. package/src/widgets/cx.ts +63 -63
  410. package/src/widgets/drag-drop/DragClone.scss +44 -44
  411. package/src/widgets/drag-drop/DragHandle.scss +25 -25
  412. package/src/widgets/drag-drop/DragHandle.tsx +47 -47
  413. package/src/widgets/drag-drop/DragSource.scss +33 -33
  414. package/src/widgets/drag-drop/DragSource.tsx +237 -237
  415. package/src/widgets/drag-drop/DropZone.scss +83 -83
  416. package/src/widgets/drag-drop/DropZone.tsx +353 -353
  417. package/src/widgets/drag-drop/index.scss +4 -4
  418. package/src/widgets/drag-drop/index.ts +4 -4
  419. package/src/widgets/drag-drop/maps.scss +7 -7
  420. package/src/widgets/drag-drop/ops.tsx +422 -422
  421. package/src/widgets/drag-drop/variables.scss +17 -17
  422. package/src/widgets/enableAllInternalDependencies.ts +11 -11
  423. package/src/widgets/form/Calendar.maps.scss +54 -54
  424. package/src/widgets/form/Calendar.scss +237 -237
  425. package/src/widgets/form/Calendar.variables.scss +21 -21
  426. package/src/widgets/form/Checkbox.maps.scss +34 -34
  427. package/src/widgets/form/Checkbox.scss +140 -140
  428. package/src/widgets/form/Checkbox.tsx +340 -340
  429. package/src/widgets/form/Checkbox.variables.scss +8 -8
  430. package/src/widgets/form/ColorField.scss +112 -112
  431. package/src/widgets/form/ColorField.tsx +551 -551
  432. package/src/widgets/form/ColorPicker.maps.scss +21 -21
  433. package/src/widgets/form/ColorPicker.scss +302 -302
  434. package/src/widgets/form/ColorPicker.tsx +606 -606
  435. package/src/widgets/form/ColorPicker.variables.scss +9 -9
  436. package/src/widgets/form/DateField.ts +21 -21
  437. package/src/widgets/form/DateTimeField.scss +111 -111
  438. package/src/widgets/form/DateTimeField.tsx +814 -814
  439. package/src/widgets/form/DateTimePicker.scss +57 -57
  440. package/src/widgets/form/DateTimePicker.tsx +429 -429
  441. package/src/widgets/form/Field.maps.scss +122 -122
  442. package/src/widgets/form/Field.scss +200 -200
  443. package/src/widgets/form/Field.tsx +715 -715
  444. package/src/widgets/form/Field.variables.scss +46 -46
  445. package/src/widgets/form/FieldGroup.ts +10 -10
  446. package/src/widgets/form/FieldIcon.ts +61 -61
  447. package/src/widgets/form/HelpText.scss +27 -27
  448. package/src/widgets/form/HelpText.ts +15 -15
  449. package/src/widgets/form/Label.scss +45 -45
  450. package/src/widgets/form/Label.tsx +117 -117
  451. package/src/widgets/form/LabeledContainer.ts +77 -77
  452. package/src/widgets/form/LookupField.maps.scss +26 -26
  453. package/src/widgets/form/LookupField.spec.tsx +93 -93
  454. package/src/widgets/form/LookupField.tsx +1689 -1689
  455. package/src/widgets/form/MonthField.scss +113 -113
  456. package/src/widgets/form/MonthField.tsx +748 -748
  457. package/src/widgets/form/MonthPicker.maps.scss +50 -50
  458. package/src/widgets/form/MonthPicker.scss +134 -134
  459. package/src/widgets/form/MonthPicker.tsx +1061 -1061
  460. package/src/widgets/form/MonthPicker.variables.scss +24 -24
  461. package/src/widgets/form/NumberField.scss +72 -72
  462. package/src/widgets/form/NumberField.tsx +653 -653
  463. package/src/widgets/form/Radio.maps.scss +36 -36
  464. package/src/widgets/form/Radio.scss +133 -133
  465. package/src/widgets/form/Radio.tsx +249 -249
  466. package/src/widgets/form/Radio.variables.scss +7 -7
  467. package/src/widgets/form/Select.scss +104 -104
  468. package/src/widgets/form/Select.tsx +327 -327
  469. package/src/widgets/form/Slider.scss +130 -130
  470. package/src/widgets/form/Slider.tsx +473 -473
  471. package/src/widgets/form/Switch.scss +152 -152
  472. package/src/widgets/form/Switch.tsx +176 -176
  473. package/src/widgets/form/TextArea.scss +58 -58
  474. package/src/widgets/form/TextArea.tsx +229 -229
  475. package/src/widgets/form/TextField.scss +66 -66
  476. package/src/widgets/form/TextField.tsx +453 -453
  477. package/src/widgets/form/TimeField.ts +10 -10
  478. package/src/widgets/form/TimeList.tsx +105 -105
  479. package/src/widgets/form/UploadButton.scss +57 -57
  480. package/src/widgets/form/UploadButton.tsx +387 -387
  481. package/src/widgets/form/ValidationError.scss +27 -27
  482. package/src/widgets/form/ValidationError.tsx +81 -81
  483. package/src/widgets/form/ValidationGroup.spec.tsx +147 -147
  484. package/src/widgets/form/ValidationGroup.ts +141 -141
  485. package/src/widgets/form/Validator.ts +60 -60
  486. package/src/widgets/form/Wheel.scss +164 -164
  487. package/src/widgets/form/Wheel.tsx +309 -309
  488. package/src/widgets/form/index.scss +22 -22
  489. package/src/widgets/form/index.ts +28 -28
  490. package/src/widgets/form/maps.scss +81 -81
  491. package/src/widgets/form/variables.scss +3 -0
  492. package/src/widgets/grid/Grid.spec.ts +42 -42
  493. package/src/widgets/grid/Grid.tsx +4269 -4269
  494. package/src/widgets/grid/GridCell.ts +143 -143
  495. package/src/widgets/grid/GridCellEditor.tsx +58 -58
  496. package/src/widgets/grid/GridRow.ts +302 -302
  497. package/src/widgets/grid/GridRowLine.ts +49 -49
  498. package/src/widgets/grid/Pagination.scss +124 -124
  499. package/src/widgets/grid/Pagination.tsx +134 -134
  500. package/src/widgets/grid/TreeNode.scss +107 -107
  501. package/src/widgets/grid/TreeNode.tsx +165 -165
  502. package/src/widgets/grid/createGridCellEditor.tsx +18 -18
  503. package/src/widgets/grid/index.scss +3 -3
  504. package/src/widgets/grid/index.ts +16 -16
  505. package/src/widgets/grid/maps.scss +110 -110
  506. package/src/widgets/icons/arrow-down.svg +3 -3
  507. package/src/widgets/icons/arrow-right.svg +2 -2
  508. package/src/widgets/icons/base.svg +104 -104
  509. package/src/widgets/icons/calendar-old.svg +169 -169
  510. package/src/widgets/icons/calendar.svg +187 -187
  511. package/src/widgets/icons/calendar.tsx +22 -22
  512. package/src/widgets/icons/check.tsx +14 -14
  513. package/src/widgets/icons/clear.svg +74 -74
  514. package/src/widgets/icons/clear.tsx +16 -16
  515. package/src/widgets/icons/close.svg +74 -74
  516. package/src/widgets/icons/close.tsx +20 -20
  517. package/src/widgets/icons/cx.tsx +39 -39
  518. package/src/widgets/icons/drop-down.tsx +16 -16
  519. package/src/widgets/icons/dropdown-arrow.svg +61 -61
  520. package/src/widgets/icons/file.svg +4 -4
  521. package/src/widgets/icons/file.tsx +14 -14
  522. package/src/widgets/icons/folder-open.svg +5 -5
  523. package/src/widgets/icons/folder-open.tsx +16 -16
  524. package/src/widgets/icons/folder.svg +58 -58
  525. package/src/widgets/icons/folder.tsx +13 -13
  526. package/src/widgets/icons/forward.svg +67 -67
  527. package/src/widgets/icons/forward.tsx +26 -26
  528. package/src/widgets/icons/index.ts +14 -14
  529. package/src/widgets/icons/loading.svg +4 -4
  530. package/src/widgets/icons/loading.tsx +28 -28
  531. package/src/widgets/icons/menu.tsx +18 -18
  532. package/src/widgets/icons/pixel-picker.tsx +18 -18
  533. package/src/widgets/icons/registry.ts +56 -56
  534. package/src/widgets/icons/search.svg +107 -107
  535. package/src/widgets/icons/search.tsx +14 -14
  536. package/src/widgets/icons/sort-asc.svg +3 -3
  537. package/src/widgets/icons/sort-asc.tsx +15 -15
  538. package/src/widgets/icons/square.tsx +22 -22
  539. package/src/widgets/index.d.ts +55 -55
  540. package/src/widgets/index.scss +16 -16
  541. package/src/widgets/lists.scss +42 -42
  542. package/src/widgets/maps.scss +139 -139
  543. package/src/widgets/nav/Link.scss +33 -33
  544. package/src/widgets/nav/Link.ts +11 -11
  545. package/src/widgets/nav/LinkButton.ts +176 -176
  546. package/src/widgets/nav/Menu.scss +82 -82
  547. package/src/widgets/nav/Menu.tsx +497 -492
  548. package/src/widgets/nav/Menu.variables.scss +13 -13
  549. package/src/widgets/nav/MenuItem.scss +150 -145
  550. package/src/widgets/nav/MenuItem.tsx +525 -525
  551. package/src/widgets/nav/MenuSpacer.ts +18 -18
  552. package/src/widgets/nav/RedirectRoute.ts +49 -49
  553. package/src/widgets/nav/Route.spec.tsx +24 -24
  554. package/src/widgets/nav/Route.ts +142 -142
  555. package/src/widgets/nav/Scroller.scss +157 -157
  556. package/src/widgets/nav/Scroller.tsx +252 -252
  557. package/src/widgets/nav/Submenu.ts +6 -6
  558. package/src/widgets/nav/Tab.maps.scss +78 -78
  559. package/src/widgets/nav/Tab.scss +88 -88
  560. package/src/widgets/nav/Tab.variables.scss +15 -15
  561. package/src/widgets/nav/cover.scss +24 -24
  562. package/src/widgets/nav/index.scss +6 -6
  563. package/src/widgets/nav/index.ts +10 -10
  564. package/src/widgets/nav/maps.scss +32 -32
  565. package/src/widgets/nav/variables.scss +19 -19
  566. package/src/widgets/overlay/ContextMenu.ts +45 -45
  567. package/src/widgets/overlay/Dropdown.scss +217 -217
  568. package/src/widgets/overlay/Dropdown.tsx +937 -937
  569. package/src/widgets/overlay/FlyweightTooltipTracker.ts +91 -91
  570. package/src/widgets/overlay/MsgBox.tsx +155 -155
  571. package/src/widgets/overlay/Overlay.scss +88 -88
  572. package/src/widgets/overlay/Toast.scss +172 -172
  573. package/src/widgets/overlay/Toast.ts +121 -121
  574. package/src/widgets/overlay/Tooltip.scss +108 -108
  575. package/src/widgets/overlay/Tooltip.tsx +460 -460
  576. package/src/widgets/overlay/Window.maps.scss +51 -51
  577. package/src/widgets/overlay/Window.scss +129 -129
  578. package/src/widgets/overlay/Window.variables.scss +21 -21
  579. package/src/widgets/overlay/alerts.ts +46 -46
  580. package/src/widgets/overlay/captureMouse.scss +13 -13
  581. package/src/widgets/overlay/captureMouse.ts +195 -195
  582. package/src/widgets/overlay/createHotPromiseWindowFactory.ts +71 -71
  583. package/src/widgets/overlay/index.d.ts +11 -11
  584. package/src/widgets/overlay/index.scss +6 -6
  585. package/src/widgets/overlay/index.ts +11 -11
  586. package/src/widgets/overlay/maps.scss +44 -44
  587. package/src/widgets/overlay/tooltip-ops.ts +173 -173
  588. package/src/widgets/overlay/variables.scss +53 -53
  589. package/tsconfig.compile.json +4 -4
  590. package/tsconfig.json +35 -35
  591. package/tsconfig.mocha.json +14 -14
@@ -1,834 +1,834 @@
1
- /** @jsxImportSource react */
2
-
3
- import { Axis, AxisConfig, AxisInstance } from "./Axis";
4
- import { VDOM } from "../../ui/Widget";
5
- import { Stack } from "./Stack";
6
- import { Format } from "../../ui/Format";
7
- import { isNumber } from "../../util/isNumber";
8
- import { zeroTime } from "../../util/date/zeroTime";
9
- import { Console } from "../../util/Console";
10
- import { parseDateInvariant } from "../../util";
11
- import { RenderingContext } from "../../ui/RenderingContext";
12
- import { NumberProp, Prop, StringProp } from "../../ui/Prop";
13
-
14
- export interface TimeAxisConfig extends AxisConfig {
15
- /** Minimum value. */
16
- min?: Prop<number | string | Date | null>;
17
-
18
- /** Maximum value. */
19
- max?: Prop<number | string | Date | null>;
20
-
21
- /** Base CSS class to be applied to the element. Defaults to `timeaxis`. */
22
- baseClass?: string;
23
-
24
- /** A number ranged between `0-2`. `0` means that the range is aligned with the lowest ticks. Default value is `1`, which means that the range is aligned with medium ticks. Use value `2` to align with major ticks. */
25
- snapToTicks?: 0 | 1 | 2 | false;
26
-
27
- tickDivisions?: Record<string, number[][]>;
28
- minTickUnit?: string;
29
-
30
- /** Set to true to apply precise label distances from minLabelDistanceFormatOverride based on the resolved label format. */
31
- useLabelDistanceFormatOverrides?: boolean;
32
-
33
- /** Mapping of formats to label distances, i.e. { "datetime;YYYYMM": 80 } */
34
- minLabelDistanceFormatOverride?: Record<string, number>;
35
- minLabelDistanceFormatOverrideDefaults?: Record<string, number>;
36
-
37
- /** Axis labels format string override. */
38
- format?: StringProp;
39
-
40
- /** Custom date decoder function. */
41
- decode?: (date: string) => string;
42
-
43
- /** Size of a zone reserved for labels for both lower and upper end of the axis. */
44
- deadZone?: number;
45
-
46
- /** Size of a zone reserved for labels near the lower end of the axis. */
47
- lowerDeadZone?: number;
48
-
49
- /** Size of a zone reserved for labels near the upper (higher) end of the axis. */
50
- upperDeadZone?: number;
51
- }
52
-
53
- Format.registerFactory("yearOrMonth", (format: string) => {
54
- let year = Format.parse("datetime;yyyy");
55
- let month = Format.parse("datetime;MMM");
56
- return function (date: any): string {
57
- let d = parseDateInvariant(date);
58
- if (d.getMonth() == 0) return year(d);
59
- else return month(d);
60
- };
61
- });
62
-
63
- Format.registerFactory("monthOrDay", (format: string) => {
64
- let month = Format.parse("datetime;MMM");
65
- let day = Format.parse("datetime;dd");
66
- return function (date: any): string {
67
- let d = parseDateInvariant(date);
68
- if (d.getDate() == 1) return month(d);
69
- else return day(d);
70
- };
71
- });
72
-
73
- export class TimeAxis extends Axis {
74
- declare deadZone: number;
75
- declare lowerDeadZone: number;
76
- declare upperDeadZone: number;
77
- declare snapToTicks: number | false;
78
- declare tickDivisions: Record<string, number[][]>;
79
- declare minTickUnit: string;
80
- declare useLabelDistanceFormatOverrides: boolean;
81
- declare minLabelDistanceFormatOverride: Record<string, number>;
82
- declare minLabelDistanceFormatOverrideDefaults: Record<string, number>;
83
- declare format: string;
84
- declare decode: TimeAxisConfig["decode"];
85
-
86
- constructor(config: TimeAxisConfig) {
87
- super(config);
88
- }
89
-
90
- init(): void {
91
- if (this.labelAnchor == "auto")
92
- this.labelAnchor = this.vertical
93
- ? this.secondary
94
- ? "start"
95
- : "end"
96
- : "start";
97
-
98
- if (this.labelDx == "auto") this.labelDx = this.vertical ? 0 : "5px";
99
-
100
- if (this.deadZone) {
101
- this.lowerDeadZone = this.deadZone;
102
- this.upperDeadZone = this.deadZone;
103
- }
104
-
105
- this.minLabelDistanceFormatOverride = {
106
- ...this.minLabelDistanceFormatOverrideDefaults,
107
- ...this.minLabelDistanceFormatOverride,
108
- };
109
-
110
- super.init();
111
- }
112
-
113
- declareData(...args: any[]): void {
114
- super.declareData(
115
- {
116
- anchors: undefined,
117
- min: undefined,
118
- max: undefined,
119
- inverted: undefined,
120
- lowerDeadZone: undefined,
121
- upperDeadZone: undefined,
122
- },
123
- ...args,
124
- );
125
- }
126
-
127
- initInstance(context: RenderingContext, instance: AxisInstance): void {
128
- instance.calculator = new TimeScale();
129
- }
130
-
131
- explore(context: RenderingContext, instance: AxisInstance): void {
132
- super.explore(context, instance);
133
- let { min, max, normalized, inverted, lowerDeadZone, upperDeadZone } =
134
- instance.data;
135
- instance.calculator.reset(
136
- min,
137
- max,
138
- this.snapToTicks,
139
- this.tickDivisions,
140
- Math.max(1, this.minTickDistance),
141
- Math.max(1, this.minLabelDistance),
142
- normalized,
143
- inverted,
144
- this.minTickUnit,
145
- lowerDeadZone,
146
- upperDeadZone,
147
- this.decode,
148
- this.useLabelDistanceFormatOverrides
149
- ? this.minLabelDistanceFormatOverride
150
- : {},
151
- this.format,
152
- );
153
- }
154
-
155
- render(
156
- context: RenderingContext,
157
- instance: AxisInstance,
158
- key: string,
159
- ): React.ReactNode {
160
- let { data, cached, calculator } = instance;
161
-
162
- cached.axis = calculator.hash();
163
-
164
- if (!data.bounds.valid()) return null;
165
-
166
- let format = calculator.resolvedFormat;
167
- let minLabelDistance = calculator.resolvedMinLabelDistance;
168
- let formatter = Format.parse(format);
169
-
170
- return (
171
- <g key={key} className={data.classNames} style={data.style}>
172
- {this.renderTicksAndLabels(
173
- context,
174
- instance,
175
- formatter,
176
- minLabelDistance,
177
- )}
178
- </g>
179
- );
180
- }
181
- }
182
-
183
- Axis.alias("time", TimeAxis);
184
-
185
- TimeAxis.prototype.baseClass = "timeaxis";
186
- TimeAxis.prototype.tickDivisions = {
187
- second: [[1, 5, 15, 30]],
188
- minute: [[1, 5, 15, 30]],
189
- hour: [
190
- [1, 2, 4, 8],
191
- [1, 3, 6, 12],
192
- ],
193
- day: [[1]],
194
- week: [[1]],
195
- month: [[1, 3, 6]],
196
- year: [
197
- [1, 2, 10],
198
- [1, 5, 10],
199
- [5, 10, 50],
200
- [10, 50, 100],
201
- ],
202
- };
203
-
204
- const TimeFormats = {
205
- fullDateAndTime: "datetime;yyyy MMM dd HH mm ss n",
206
- shortMonthDate: "datetime;yyyy MMM dd",
207
- };
208
-
209
- TimeAxis.prototype.snapToTicks = 0;
210
- TimeAxis.prototype.tickSize = 15;
211
- TimeAxis.prototype.minLabelDistance = 60;
212
- TimeAxis.prototype.minTickDistance = 60;
213
- TimeAxis.prototype.minTickUnit = "second";
214
- TimeAxis.prototype.useLabelDistanceFormatOverrides = false;
215
- TimeAxis.prototype.minLabelDistanceFormatOverrideDefaults = {
216
- [TimeFormats.fullDateAndTime]: 150,
217
- [TimeFormats.shortMonthDate]: 90,
218
- };
219
-
220
- function monthNumber(date: Date): number {
221
- return date.getFullYear() * 12 + date.getMonth() + (date.getDate() - 1) / 31;
222
- }
223
-
224
- function yearNumber(date: Date): number {
225
- return monthNumber(date) / 12;
226
- }
227
-
228
- const milliSeconds: Record<string, number> = {
229
- second: 1000,
230
- minute: 60 * 1000,
231
- hour: 3600 * 1000,
232
- day: 3600 * 24 * 1000,
233
- week: 3600 * 24 * 7 * 1000,
234
- month: 3600 * 24 * 30 * 1000,
235
- year: 3600 * 24 * 365 * 1000,
236
- };
237
-
238
- interface TickSize {
239
- size: number;
240
- measure: string;
241
- noLabels?: boolean;
242
- }
243
-
244
- interface TimeScaleRange {
245
- factor: number;
246
- min: number;
247
- max: number;
248
- minPadding: number;
249
- maxPadding: number;
250
- }
251
-
252
- class TimeScale {
253
- dateCache: Record<string, number>;
254
- min: number | null;
255
- max: number | null;
256
- snapToTicks: number | false;
257
- tickDivisions: Record<string, number[][]>;
258
- minLabelDistance: number;
259
- minTickDistance: number;
260
- tickSizes: TickSize[];
261
- normalized: boolean;
262
- minTickUnit: string;
263
- inverted: boolean;
264
- lowerDeadZone: number;
265
- upperDeadZone: number;
266
- minValue?: number;
267
- maxValue?: number;
268
- minValuePadded?: number;
269
- maxValuePadded?: number;
270
- stacks: Record<string, Stack>;
271
- decode?: (date: string) => string;
272
- minLabelDistanceFormatOverride: Record<string, number>;
273
- format: string;
274
- origin: number;
275
- scale: TimeScaleRange;
276
- a: number;
277
- b: number;
278
- tickMeasure: string;
279
- resolvedFormat: string | null;
280
- resolvedMinLabelDistance: number;
281
- shouldUpdate: boolean;
282
-
283
- reset(
284
- min: any,
285
- max: any,
286
- snapToTicks: number | false,
287
- tickDivisions: Record<string, number[][]>,
288
- minTickDistance: number,
289
- minLabelDistance: number,
290
- normalized: boolean,
291
- inverted: boolean,
292
- minTickUnit: string,
293
- lowerDeadZone: number,
294
- upperDeadZone: number,
295
- decode: ((date: string) => string) | undefined,
296
- minLabelDistanceFormatOverride: Record<string, number>,
297
- format: string,
298
- ): void {
299
- this.dateCache = {};
300
- this.min = min != null ? this.decodeValue(min) : null;
301
- this.max = max != null ? this.decodeValue(max) : null;
302
- this.snapToTicks = snapToTicks;
303
- this.tickDivisions = tickDivisions;
304
- this.minLabelDistance = minLabelDistance;
305
- this.minTickDistance = minTickDistance;
306
- this.tickSizes = [];
307
- this.normalized = normalized;
308
- this.minTickUnit = minTickUnit;
309
- this.inverted = inverted;
310
- this.lowerDeadZone = lowerDeadZone || 0;
311
- this.upperDeadZone = upperDeadZone || 0;
312
- this.minValue = undefined;
313
- this.maxValue = undefined;
314
- this.minValuePadded = undefined;
315
- this.maxValuePadded = undefined;
316
- this.stacks = {};
317
- this.decode = decode;
318
- this.minLabelDistanceFormatOverride = minLabelDistanceFormatOverride;
319
- this.format = format;
320
- }
321
-
322
- decodeValue(date: any): number {
323
- if (date instanceof Date) return date.getTime();
324
-
325
- switch (typeof date) {
326
- case "string":
327
- let v = this.dateCache[date];
328
- if (!v) {
329
- if (this.decode) date = this.decode(date);
330
- v = this.dateCache[date] = parseDateInvariant(date).getTime();
331
- }
332
- return v;
333
-
334
- case "number":
335
- return parseDateInvariant(date).getTime();
336
- }
337
- return 0;
338
- }
339
-
340
- encodeValue(v: number): string {
341
- return new Date(v).toISOString();
342
- }
343
-
344
- getFormat(unit: string, scale: TimeScaleRange): string {
345
- switch (unit) {
346
- case "year":
347
- return "datetime;yyyy";
348
-
349
- case "month":
350
- if (
351
- new Date(scale.min).getFullYear() != new Date(scale.max).getFullYear()
352
- )
353
- return "yearOrMonth";
354
- return "datetime;yyyy MMM";
355
-
356
- case "week":
357
- return "datetime;MMMdd";
358
-
359
- case "day":
360
- if (
361
- new Date(scale.min).getFullYear() !=
362
- new Date(scale.max).getFullYear() ||
363
- new Date(scale.min).getMonth() != new Date(scale.max).getMonth()
364
- )
365
- return "monthOrDay";
366
-
367
- return TimeFormats.shortMonthDate;
368
-
369
- case "hour":
370
- return "datetime;HH mm n";
371
-
372
- case "minute":
373
- return "datetime;HH mm n";
374
-
375
- case "second":
376
- return "datetime;mm ss";
377
-
378
- default:
379
- return TimeFormats.fullDateAndTime;
380
- }
381
- }
382
-
383
- map(v: any, offset: number = 0): number {
384
- return (
385
- this.origin +
386
- (this.decodeValue(v) + offset - this.scale.min + this.scale.minPadding) *
387
- this.scale.factor
388
- );
389
- }
390
-
391
- constrainValue(v: number): number {
392
- return Math.max(this.scale.min, Math.min(this.scale.max, v));
393
- }
394
-
395
- trackValue(
396
- v: number,
397
- offset: number = 0,
398
- constrain: boolean = false,
399
- ): number {
400
- let value =
401
- (v - this.origin) / this.scale.factor -
402
- offset +
403
- this.scale.min -
404
- this.scale.minPadding;
405
- if (constrain) value = this.constrainValue(value);
406
- return value;
407
- }
408
-
409
- hash(): Record<string, any> {
410
- let r: any = {
411
- origin: this.origin,
412
- factor: this.scale.factor,
413
- min: this.scale.min,
414
- max: this.scale.max,
415
- minPadding: this.scale.minPadding,
416
- maxPadding: this.scale.maxPadding,
417
- };
418
- r.stacks = Object.keys(this.stacks)
419
- .map((s) => this.stacks[s].info?.join(","))
420
- .join(":");
421
- return r;
422
- }
423
-
424
- isSame(x: any): boolean {
425
- let hash = this.hash();
426
- let same = x && !Object.keys(hash).some((k) => x[k] !== hash[k]);
427
- this.shouldUpdate = !same;
428
- return same;
429
- }
430
-
431
- measure(a: number, b: number): void {
432
- this.a = a;
433
- this.b = b;
434
-
435
- for (let s in this.stacks) {
436
- let info = this.stacks[s].measure(this.normalized);
437
- let [min, max] = info;
438
- if (this.minValue == null || min < this.minValue) this.minValue = min;
439
- if (this.max == null || max > this.maxValue!) this.maxValue = max;
440
- this.stacks[s].info = info;
441
- }
442
-
443
- if (this.min == null) {
444
- if (this.minValue != null) this.min = this.minValue;
445
- else this.min = 0;
446
- }
447
-
448
- if (this.max == null) {
449
- if (this.maxValue != null) this.max = this.maxValue;
450
- else this.max = this.normalized ? 1 : 100;
451
- }
452
-
453
- this.origin = this.inverted ? this.b : this.a;
454
-
455
- this.calculateTicks();
456
- if (this.scale == null) {
457
- this.scale = this.getScale();
458
- }
459
- }
460
-
461
- getTimezoneOffset(date: Date): number {
462
- return date.getTimezoneOffset() * 60 * 1000;
463
- }
464
-
465
- getScale(
466
- tickSize?: number | null,
467
- measure?: string,
468
- minRange: number = 1000,
469
- ): TimeScaleRange {
470
- let { min, max, upperDeadZone, lowerDeadZone } = this;
471
-
472
- let smin: number = min!;
473
- let smax: number = max!;
474
-
475
- if (tickSize) {
476
- let minDate = new Date(min!);
477
- let maxDate = new Date(max!);
478
-
479
- switch (measure) {
480
- case "second":
481
- case "minute":
482
- case "hour":
483
- case "day":
484
- default:
485
- let minOffset = this.getTimezoneOffset(minDate);
486
- let maxOffset = this.getTimezoneOffset(maxDate);
487
- let mondayOffset = 4 * milliSeconds.day; //new Date(0).getDay() => 4
488
- smin =
489
- Math.floor((smin - minOffset - mondayOffset) / tickSize) *
490
- tickSize +
491
- minOffset +
492
- mondayOffset;
493
- smax =
494
- Math.ceil((smax - maxOffset - mondayOffset) / tickSize) * tickSize +
495
- maxOffset +
496
- mondayOffset;
497
- break;
498
-
499
- case "month":
500
- tickSize /= milliSeconds.month;
501
- let minMonth = monthNumber(minDate);
502
- let maxMonth = monthNumber(maxDate);
503
- minMonth = Math.floor(minMonth / tickSize) * tickSize;
504
- maxMonth = Math.ceil(maxMonth / tickSize) * tickSize;
505
- smin = new Date(
506
- Math.floor(minMonth / 12),
507
- minMonth % 12,
508
- 1,
509
- ).getTime();
510
- smax = new Date(
511
- Math.floor(maxMonth / 12),
512
- maxMonth % 12,
513
- 1,
514
- ).getTime();
515
- break;
516
-
517
- case "year":
518
- tickSize /= milliSeconds.year;
519
- let minYear = yearNumber(minDate);
520
- let maxYear = yearNumber(maxDate);
521
- minYear = Math.floor(minYear / tickSize) * tickSize;
522
- maxYear = Math.ceil(maxYear / tickSize) * tickSize;
523
- smin = new Date(minYear, 0, 1).getTime();
524
- smax = new Date(maxYear, 0, 1).getTime();
525
- break;
526
- }
527
- } else {
528
- if (this.minValue == min) smin = this.minValuePadded!;
529
- if (this.maxValue == max) smax = this.maxValuePadded!;
530
- }
531
-
532
- if (smax - smin < minRange) {
533
- let delta = (minRange - (smax - smin)) / 2;
534
- smin -= delta;
535
- smax += delta;
536
- }
537
-
538
- //padding should be activated only if using min/max obtained from the data
539
- let minPadding =
540
- this.minValue === min ? Math.max(0, smin - this.minValuePadded!) : 0;
541
- let maxPadding =
542
- this.maxValue === max ? Math.max(0, this.maxValuePadded! - smax) : 0;
543
-
544
- let factor =
545
- smin < smax
546
- ? Math.abs(this.b - this.a) / (smax - smin + minPadding + maxPadding)
547
- : 0;
548
- if (factor > 0 && (upperDeadZone > 0 || lowerDeadZone > 0)) {
549
- smin -= lowerDeadZone / factor;
550
- smax += upperDeadZone / factor;
551
- minPadding =
552
- this.minValuePadded != null
553
- ? Math.max(0, smin - this.minValuePadded)
554
- : 0;
555
- maxPadding =
556
- this.maxValuePadded != null
557
- ? Math.max(0, this.maxValuePadded - smax)
558
- : 0;
559
- factor =
560
- smin < smax
561
- ? Math.abs(this.b - this.a) / (smax - smin + minPadding + maxPadding)
562
- : 0;
563
- }
564
-
565
- let sign = this.b > this.a ? 1 : -1;
566
-
567
- return {
568
- factor: sign * (this.inverted ? -factor : factor),
569
- min: smin,
570
- max: smax,
571
- minPadding,
572
- maxPadding,
573
- };
574
- }
575
-
576
- acknowledge(value: any, width: number = 0, offset: number = 0): void {
577
- value = this.decodeValue(value);
578
- if (
579
- this.minValue == null ||
580
- value + offset - width / 2 < this.minValuePadded!
581
- ) {
582
- this.minValue = value;
583
- this.minValuePadded = value + offset - width / 2;
584
- }
585
- if (
586
- this.maxValue == null ||
587
- value + offset + width / 2 > this.maxValuePadded!
588
- ) {
589
- this.maxValue = value;
590
- this.maxValuePadded = value + offset + width / 2;
591
- }
592
- }
593
-
594
- getStack(name: string): Stack {
595
- let s = this.stacks[name];
596
- if (!s) s = this.stacks[name] = new Stack();
597
- return s;
598
- }
599
-
600
- stacknowledge(name: string, ordinal: string, value: number | null): void {
601
- return this.getStack(name).acknowledge(ordinal, value);
602
- }
603
-
604
- stack(name: string, ordinal: string, value: number | null): number | null {
605
- let v = this.getStack(name).stack(ordinal, value);
606
- return v != null ? this.map(v) : null;
607
- }
608
-
609
- findTickSize(minPxDist: number): TickSize | undefined {
610
- return this.tickSizes.find(
611
- ({ size, noLabels }) =>
612
- !noLabels && size * Math.abs(this.scale.factor) >= minPxDist,
613
- );
614
- }
615
-
616
- getTickSizes(): TickSize[] {
617
- return this.tickSizes;
618
- }
619
-
620
- calculateTicks(): void {
621
- let minReached = false;
622
-
623
- let minRange = 1000;
624
-
625
- for (let unit in milliSeconds) {
626
- if (!minReached) {
627
- if (unit == this.minTickUnit) minReached = true;
628
- else continue;
629
- }
630
-
631
- let unitSize = milliSeconds[unit];
632
- let divisions = this.tickDivisions[unit];
633
-
634
- if (this.tickSizes.length > 0) {
635
- //add ticks from higher levels
636
- this.tickSizes.push(
637
- ...divisions[0].map((s) => ({ size: s * unitSize, measure: unit })),
638
- );
639
- break;
640
- }
641
-
642
- let bestLabelDistance = Infinity;
643
- let bestMinLabelDistance = this.minLabelDistance;
644
- let bestTicks: number[] = [];
645
- let bestScale: TimeScaleRange | null = null;
646
- let bestFormat: string | null = null;
647
-
648
- this.tickMeasure = unit;
649
-
650
- for (let i = 0; i < divisions.length; i++) {
651
- let divs = divisions[i];
652
- for (let d = 0; d < divs.length; d++) {
653
- //if (useSnapToTicks && d < Math.min(divs.length - 1, this.snapToTicks)) continue;
654
- let tickSize = divs[d] * unitSize;
655
- let scale = this.getScale(null, unit, tickSize);
656
- let format = this.format ?? this.getFormat(unit, scale);
657
- let minLabelDistance =
658
- this.minLabelDistanceFormatOverride[format] ??
659
- this.minLabelDistance;
660
- let labelDistance = tickSize * Math.abs(scale.factor);
661
- if (
662
- labelDistance >= minLabelDistance &&
663
- labelDistance < bestLabelDistance
664
- ) {
665
- bestScale = scale;
666
- bestTicks = divs.map((s) => s * unitSize);
667
- bestLabelDistance = labelDistance;
668
- bestFormat = format;
669
- bestMinLabelDistance = minLabelDistance;
670
- minRange = tickSize;
671
- }
672
- }
673
- }
674
-
675
- this.scale = bestScale!;
676
- this.tickSizes = bestTicks
677
- .filter(
678
- (ts) => ts * Math.abs(bestScale!.factor) >= this.minTickDistance,
679
- )
680
- .map((size) => ({ size, measure: this.tickMeasure }));
681
- this.resolvedFormat = bestFormat;
682
- this.resolvedMinLabelDistance = bestMinLabelDistance;
683
- }
684
-
685
- let lowerTickUnit: string | null = null;
686
- switch (this.tickMeasure) {
687
- case "year":
688
- lowerTickUnit = "month";
689
- break;
690
- case "month":
691
- lowerTickUnit = "day";
692
- break;
693
- case "week":
694
- lowerTickUnit = "day";
695
- break;
696
- case "day":
697
- lowerTickUnit = "hour";
698
- break;
699
- case "hour":
700
- lowerTickUnit = "minute";
701
- break;
702
- case "minute":
703
- lowerTickUnit = "second";
704
- break;
705
- }
706
-
707
- if (
708
- lowerTickUnit &&
709
- this.minTickUnit &&
710
- milliSeconds[lowerTickUnit] < milliSeconds[this.minTickUnit]
711
- )
712
- lowerTickUnit =
713
- this.minTickUnit == this.tickMeasure ? null : this.minTickUnit;
714
-
715
- if (lowerTickUnit != null && this.scale) {
716
- let bestMinorTickSize = Infinity;
717
- let divisions = this.tickDivisions[lowerTickUnit];
718
- let unitSize = milliSeconds[lowerTickUnit];
719
- for (let i = 0; i < divisions.length; i++) {
720
- let divs = divisions[i];
721
- for (let d = 0; d < divs.length; d++) {
722
- let tickSize = divs[d] * unitSize;
723
- if (
724
- tickSize * Math.abs(this.scale.factor) >= this.minTickDistance &&
725
- tickSize < bestMinorTickSize
726
- ) {
727
- bestMinorTickSize = tickSize;
728
- }
729
- }
730
- }
731
- if (bestMinorTickSize != Infinity) {
732
- this.tickSizes.unshift({
733
- size: bestMinorTickSize,
734
- measure: lowerTickUnit,
735
- noLabels: true,
736
- });
737
- if (this.tickSizes.length > 1) {
738
- let labelStep = this.tickSizes[1].size;
739
- let lowerScale = this.getScale(null, lowerTickUnit, minRange);
740
- if (lowerScale.max - lowerScale.min >= labelStep)
741
- this.scale = lowerScale;
742
- }
743
- }
744
- }
745
-
746
- if (
747
- isNumber(this.snapToTicks) &&
748
- this.snapToTicks >= 0 &&
749
- this.tickSizes.length > 0
750
- ) {
751
- let tickSize =
752
- this.tickSizes[Math.min(this.tickSizes.length - 1, this.snapToTicks)];
753
- this.scale = this.getScale(tickSize.size, tickSize.measure, minRange);
754
- }
755
- }
756
-
757
- getTicks(tickSizes: TickSize[]): (number | Date)[][] {
758
- return tickSizes.map(({ size, measure }) => {
759
- let result: (number | Date)[] = [],
760
- start: number,
761
- end: number,
762
- minDate: Date,
763
- maxDate: Date;
764
- if (measure == "year") {
765
- size /= milliSeconds.year;
766
- minDate = new Date(this.scale.min - this.scale.minPadding);
767
- maxDate = new Date(this.scale.max + this.scale.maxPadding);
768
- start = Math.ceil(yearNumber(minDate) / size) * size;
769
- end = Math.floor(yearNumber(maxDate) / size) * size;
770
- for (let i = start; i <= end; i += size)
771
- result.push(new Date(i, 0, 1).getTime());
772
- } else if (measure == "month") {
773
- size /= milliSeconds.month;
774
- minDate = new Date(this.scale.min - this.scale.minPadding);
775
- maxDate = new Date(this.scale.max + this.scale.maxPadding);
776
- start = Math.ceil(monthNumber(minDate) / size) * size;
777
- end = Math.floor(monthNumber(maxDate) / size) * size;
778
- for (let i = start; i <= end; i += size)
779
- result.push(new Date(Math.floor(i / 12), i % 12, 1).getTime());
780
- } else if (measure == "day" || measure == "week") {
781
- let multiplier = measure == "week" ? 7 : 1;
782
- size /= milliSeconds.day;
783
- minDate = new Date(this.scale.min - this.scale.minPadding);
784
- maxDate = new Date(this.scale.max + this.scale.maxPadding);
785
- let date = zeroTime(minDate);
786
- while (date.getTime() < minDate.getTime())
787
- date.setDate(date.getDate() + 1);
788
- if (measure == "week") {
789
- //start on monday
790
- while (date.getDay() != 1) {
791
- date.setDate(date.getDate() + 1);
792
- }
793
- }
794
- while (date.getTime() <= maxDate.getTime()) {
795
- result.push(date);
796
- date = new Date(date);
797
- date.setDate(date.getDate() + multiplier);
798
- }
799
- } else {
800
- let minOffset = this.getTimezoneOffset(
801
- new Date(this.scale.min - this.scale.minPadding),
802
- );
803
- let mondayOffset = 4 * milliSeconds.day;
804
- let date =
805
- Math.ceil(
806
- (this.scale.min -
807
- this.scale.minPadding -
808
- minOffset -
809
- mondayOffset) /
810
- size,
811
- ) *
812
- size +
813
- minOffset +
814
- mondayOffset;
815
- while (date <= this.scale.max + this.scale.maxPadding) {
816
- result.push(date);
817
- date += size;
818
- }
819
- }
820
- return result;
821
- });
822
- }
823
-
824
- mapGridlines(): number[] {
825
- if (this.tickSizes.length == 0) return [];
826
- return this.getTicks([this.tickSizes[0]])[0].map((x) => this.map(x));
827
- }
828
-
829
- book(): void {
830
- Console.warn(
831
- "TimeAxis does not support the autoSize flag for column and bar graphs.",
832
- );
833
- }
834
- }
1
+ /** @jsxImportSource react */
2
+
3
+ import { Axis, AxisConfig, AxisInstance } from "./Axis";
4
+ import { VDOM } from "../../ui/Widget";
5
+ import { Stack } from "./Stack";
6
+ import { Format } from "../../ui/Format";
7
+ import { isNumber } from "../../util/isNumber";
8
+ import { zeroTime } from "../../util/date/zeroTime";
9
+ import { Console } from "../../util/Console";
10
+ import { parseDateInvariant } from "../../util";
11
+ import { RenderingContext } from "../../ui/RenderingContext";
12
+ import { NumberProp, Prop, StringProp } from "../../ui/Prop";
13
+
14
+ export interface TimeAxisConfig extends AxisConfig {
15
+ /** Minimum value. */
16
+ min?: Prop<number | string | Date | null>;
17
+
18
+ /** Maximum value. */
19
+ max?: Prop<number | string | Date | null>;
20
+
21
+ /** Base CSS class to be applied to the element. Defaults to `timeaxis`. */
22
+ baseClass?: string;
23
+
24
+ /** A number ranged between `0-2`. `0` means that the range is aligned with the lowest ticks. Default value is `1`, which means that the range is aligned with medium ticks. Use value `2` to align with major ticks. */
25
+ snapToTicks?: 0 | 1 | 2 | false;
26
+
27
+ tickDivisions?: Record<string, number[][]>;
28
+ minTickUnit?: string;
29
+
30
+ /** Set to true to apply precise label distances from minLabelDistanceFormatOverride based on the resolved label format. */
31
+ useLabelDistanceFormatOverrides?: boolean;
32
+
33
+ /** Mapping of formats to label distances, i.e. { "datetime;YYYYMM": 80 } */
34
+ minLabelDistanceFormatOverride?: Record<string, number>;
35
+ minLabelDistanceFormatOverrideDefaults?: Record<string, number>;
36
+
37
+ /** Axis labels format string override. */
38
+ format?: StringProp;
39
+
40
+ /** Custom date decoder function. */
41
+ decode?: (date: string) => string;
42
+
43
+ /** Size of a zone reserved for labels for both lower and upper end of the axis. */
44
+ deadZone?: number;
45
+
46
+ /** Size of a zone reserved for labels near the lower end of the axis. */
47
+ lowerDeadZone?: number;
48
+
49
+ /** Size of a zone reserved for labels near the upper (higher) end of the axis. */
50
+ upperDeadZone?: number;
51
+ }
52
+
53
+ Format.registerFactory("yearOrMonth", (format: string) => {
54
+ let year = Format.parse("datetime;yyyy");
55
+ let month = Format.parse("datetime;MMM");
56
+ return function (date: any): string {
57
+ let d = parseDateInvariant(date);
58
+ if (d.getMonth() == 0) return year(d);
59
+ else return month(d);
60
+ };
61
+ });
62
+
63
+ Format.registerFactory("monthOrDay", (format: string) => {
64
+ let month = Format.parse("datetime;MMM");
65
+ let day = Format.parse("datetime;dd");
66
+ return function (date: any): string {
67
+ let d = parseDateInvariant(date);
68
+ if (d.getDate() == 1) return month(d);
69
+ else return day(d);
70
+ };
71
+ });
72
+
73
+ export class TimeAxis extends Axis {
74
+ declare deadZone: number;
75
+ declare lowerDeadZone: number;
76
+ declare upperDeadZone: number;
77
+ declare snapToTicks: number | false;
78
+ declare tickDivisions: Record<string, number[][]>;
79
+ declare minTickUnit: string;
80
+ declare useLabelDistanceFormatOverrides: boolean;
81
+ declare minLabelDistanceFormatOverride: Record<string, number>;
82
+ declare minLabelDistanceFormatOverrideDefaults: Record<string, number>;
83
+ declare format: string;
84
+ declare decode: TimeAxisConfig["decode"];
85
+
86
+ constructor(config: TimeAxisConfig) {
87
+ super(config);
88
+ }
89
+
90
+ init(): void {
91
+ if (this.labelAnchor == "auto")
92
+ this.labelAnchor = this.vertical
93
+ ? this.secondary
94
+ ? "start"
95
+ : "end"
96
+ : "start";
97
+
98
+ if (this.labelDx == "auto") this.labelDx = this.vertical ? 0 : "5px";
99
+
100
+ if (this.deadZone) {
101
+ this.lowerDeadZone = this.deadZone;
102
+ this.upperDeadZone = this.deadZone;
103
+ }
104
+
105
+ this.minLabelDistanceFormatOverride = {
106
+ ...this.minLabelDistanceFormatOverrideDefaults,
107
+ ...this.minLabelDistanceFormatOverride,
108
+ };
109
+
110
+ super.init();
111
+ }
112
+
113
+ declareData(...args: any[]): void {
114
+ super.declareData(
115
+ {
116
+ anchors: undefined,
117
+ min: undefined,
118
+ max: undefined,
119
+ inverted: undefined,
120
+ lowerDeadZone: undefined,
121
+ upperDeadZone: undefined,
122
+ },
123
+ ...args,
124
+ );
125
+ }
126
+
127
+ initInstance(context: RenderingContext, instance: AxisInstance): void {
128
+ instance.calculator = new TimeScale();
129
+ }
130
+
131
+ explore(context: RenderingContext, instance: AxisInstance): void {
132
+ super.explore(context, instance);
133
+ let { min, max, normalized, inverted, lowerDeadZone, upperDeadZone } =
134
+ instance.data;
135
+ instance.calculator.reset(
136
+ min,
137
+ max,
138
+ this.snapToTicks,
139
+ this.tickDivisions,
140
+ Math.max(1, this.minTickDistance),
141
+ Math.max(1, this.minLabelDistance),
142
+ normalized,
143
+ inverted,
144
+ this.minTickUnit,
145
+ lowerDeadZone,
146
+ upperDeadZone,
147
+ this.decode,
148
+ this.useLabelDistanceFormatOverrides
149
+ ? this.minLabelDistanceFormatOverride
150
+ : {},
151
+ this.format,
152
+ );
153
+ }
154
+
155
+ render(
156
+ context: RenderingContext,
157
+ instance: AxisInstance,
158
+ key: string,
159
+ ): React.ReactNode {
160
+ let { data, cached, calculator } = instance;
161
+
162
+ cached.axis = calculator.hash();
163
+
164
+ if (!data.bounds.valid()) return null;
165
+
166
+ let format = calculator.resolvedFormat;
167
+ let minLabelDistance = calculator.resolvedMinLabelDistance;
168
+ let formatter = Format.parse(format);
169
+
170
+ return (
171
+ <g key={key} className={data.classNames} style={data.style}>
172
+ {this.renderTicksAndLabels(
173
+ context,
174
+ instance,
175
+ formatter,
176
+ minLabelDistance,
177
+ )}
178
+ </g>
179
+ );
180
+ }
181
+ }
182
+
183
+ Axis.alias("time", TimeAxis);
184
+
185
+ TimeAxis.prototype.baseClass = "timeaxis";
186
+ TimeAxis.prototype.tickDivisions = {
187
+ second: [[1, 5, 15, 30]],
188
+ minute: [[1, 5, 15, 30]],
189
+ hour: [
190
+ [1, 2, 4, 8],
191
+ [1, 3, 6, 12],
192
+ ],
193
+ day: [[1]],
194
+ week: [[1]],
195
+ month: [[1, 3, 6]],
196
+ year: [
197
+ [1, 2, 10],
198
+ [1, 5, 10],
199
+ [5, 10, 50],
200
+ [10, 50, 100],
201
+ ],
202
+ };
203
+
204
+ const TimeFormats = {
205
+ fullDateAndTime: "datetime;yyyy MMM dd HH mm ss n",
206
+ shortMonthDate: "datetime;yyyy MMM dd",
207
+ };
208
+
209
+ TimeAxis.prototype.snapToTicks = 0;
210
+ TimeAxis.prototype.tickSize = 15;
211
+ TimeAxis.prototype.minLabelDistance = 60;
212
+ TimeAxis.prototype.minTickDistance = 60;
213
+ TimeAxis.prototype.minTickUnit = "second";
214
+ TimeAxis.prototype.useLabelDistanceFormatOverrides = false;
215
+ TimeAxis.prototype.minLabelDistanceFormatOverrideDefaults = {
216
+ [TimeFormats.fullDateAndTime]: 150,
217
+ [TimeFormats.shortMonthDate]: 90,
218
+ };
219
+
220
+ function monthNumber(date: Date): number {
221
+ return date.getFullYear() * 12 + date.getMonth() + (date.getDate() - 1) / 31;
222
+ }
223
+
224
+ function yearNumber(date: Date): number {
225
+ return monthNumber(date) / 12;
226
+ }
227
+
228
+ const milliSeconds: Record<string, number> = {
229
+ second: 1000,
230
+ minute: 60 * 1000,
231
+ hour: 3600 * 1000,
232
+ day: 3600 * 24 * 1000,
233
+ week: 3600 * 24 * 7 * 1000,
234
+ month: 3600 * 24 * 30 * 1000,
235
+ year: 3600 * 24 * 365 * 1000,
236
+ };
237
+
238
+ interface TickSize {
239
+ size: number;
240
+ measure: string;
241
+ noLabels?: boolean;
242
+ }
243
+
244
+ interface TimeScaleRange {
245
+ factor: number;
246
+ min: number;
247
+ max: number;
248
+ minPadding: number;
249
+ maxPadding: number;
250
+ }
251
+
252
+ class TimeScale {
253
+ dateCache: Record<string, number>;
254
+ min: number | null;
255
+ max: number | null;
256
+ snapToTicks: number | false;
257
+ tickDivisions: Record<string, number[][]>;
258
+ minLabelDistance: number;
259
+ minTickDistance: number;
260
+ tickSizes: TickSize[];
261
+ normalized: boolean;
262
+ minTickUnit: string;
263
+ inverted: boolean;
264
+ lowerDeadZone: number;
265
+ upperDeadZone: number;
266
+ minValue?: number;
267
+ maxValue?: number;
268
+ minValuePadded?: number;
269
+ maxValuePadded?: number;
270
+ stacks: Record<string, Stack>;
271
+ decode?: (date: string) => string;
272
+ minLabelDistanceFormatOverride: Record<string, number>;
273
+ format: string;
274
+ origin: number;
275
+ scale: TimeScaleRange;
276
+ a: number;
277
+ b: number;
278
+ tickMeasure: string;
279
+ resolvedFormat: string | null;
280
+ resolvedMinLabelDistance: number;
281
+ shouldUpdate: boolean;
282
+
283
+ reset(
284
+ min: any,
285
+ max: any,
286
+ snapToTicks: number | false,
287
+ tickDivisions: Record<string, number[][]>,
288
+ minTickDistance: number,
289
+ minLabelDistance: number,
290
+ normalized: boolean,
291
+ inverted: boolean,
292
+ minTickUnit: string,
293
+ lowerDeadZone: number,
294
+ upperDeadZone: number,
295
+ decode: ((date: string) => string) | undefined,
296
+ minLabelDistanceFormatOverride: Record<string, number>,
297
+ format: string,
298
+ ): void {
299
+ this.dateCache = {};
300
+ this.min = min != null ? this.decodeValue(min) : null;
301
+ this.max = max != null ? this.decodeValue(max) : null;
302
+ this.snapToTicks = snapToTicks;
303
+ this.tickDivisions = tickDivisions;
304
+ this.minLabelDistance = minLabelDistance;
305
+ this.minTickDistance = minTickDistance;
306
+ this.tickSizes = [];
307
+ this.normalized = normalized;
308
+ this.minTickUnit = minTickUnit;
309
+ this.inverted = inverted;
310
+ this.lowerDeadZone = lowerDeadZone || 0;
311
+ this.upperDeadZone = upperDeadZone || 0;
312
+ this.minValue = undefined;
313
+ this.maxValue = undefined;
314
+ this.minValuePadded = undefined;
315
+ this.maxValuePadded = undefined;
316
+ this.stacks = {};
317
+ this.decode = decode;
318
+ this.minLabelDistanceFormatOverride = minLabelDistanceFormatOverride;
319
+ this.format = format;
320
+ }
321
+
322
+ decodeValue(date: any): number {
323
+ if (date instanceof Date) return date.getTime();
324
+
325
+ switch (typeof date) {
326
+ case "string":
327
+ let v = this.dateCache[date];
328
+ if (!v) {
329
+ if (this.decode) date = this.decode(date);
330
+ v = this.dateCache[date] = parseDateInvariant(date).getTime();
331
+ }
332
+ return v;
333
+
334
+ case "number":
335
+ return parseDateInvariant(date).getTime();
336
+ }
337
+ return 0;
338
+ }
339
+
340
+ encodeValue(v: number): string {
341
+ return new Date(v).toISOString();
342
+ }
343
+
344
+ getFormat(unit: string, scale: TimeScaleRange): string {
345
+ switch (unit) {
346
+ case "year":
347
+ return "datetime;yyyy";
348
+
349
+ case "month":
350
+ if (
351
+ new Date(scale.min).getFullYear() != new Date(scale.max).getFullYear()
352
+ )
353
+ return "yearOrMonth";
354
+ return "datetime;yyyy MMM";
355
+
356
+ case "week":
357
+ return "datetime;MMMdd";
358
+
359
+ case "day":
360
+ if (
361
+ new Date(scale.min).getFullYear() !=
362
+ new Date(scale.max).getFullYear() ||
363
+ new Date(scale.min).getMonth() != new Date(scale.max).getMonth()
364
+ )
365
+ return "monthOrDay";
366
+
367
+ return TimeFormats.shortMonthDate;
368
+
369
+ case "hour":
370
+ return "datetime;HH mm n";
371
+
372
+ case "minute":
373
+ return "datetime;HH mm n";
374
+
375
+ case "second":
376
+ return "datetime;mm ss";
377
+
378
+ default:
379
+ return TimeFormats.fullDateAndTime;
380
+ }
381
+ }
382
+
383
+ map(v: any, offset: number = 0): number {
384
+ return (
385
+ this.origin +
386
+ (this.decodeValue(v) + offset - this.scale.min + this.scale.minPadding) *
387
+ this.scale.factor
388
+ );
389
+ }
390
+
391
+ constrainValue(v: number): number {
392
+ return Math.max(this.scale.min, Math.min(this.scale.max, v));
393
+ }
394
+
395
+ trackValue(
396
+ v: number,
397
+ offset: number = 0,
398
+ constrain: boolean = false,
399
+ ): number {
400
+ let value =
401
+ (v - this.origin) / this.scale.factor -
402
+ offset +
403
+ this.scale.min -
404
+ this.scale.minPadding;
405
+ if (constrain) value = this.constrainValue(value);
406
+ return value;
407
+ }
408
+
409
+ hash(): Record<string, any> {
410
+ let r: any = {
411
+ origin: this.origin,
412
+ factor: this.scale.factor,
413
+ min: this.scale.min,
414
+ max: this.scale.max,
415
+ minPadding: this.scale.minPadding,
416
+ maxPadding: this.scale.maxPadding,
417
+ };
418
+ r.stacks = Object.keys(this.stacks)
419
+ .map((s) => this.stacks[s].info?.join(","))
420
+ .join(":");
421
+ return r;
422
+ }
423
+
424
+ isSame(x: any): boolean {
425
+ let hash = this.hash();
426
+ let same = x && !Object.keys(hash).some((k) => x[k] !== hash[k]);
427
+ this.shouldUpdate = !same;
428
+ return same;
429
+ }
430
+
431
+ measure(a: number, b: number): void {
432
+ this.a = a;
433
+ this.b = b;
434
+
435
+ for (let s in this.stacks) {
436
+ let info = this.stacks[s].measure(this.normalized);
437
+ let [min, max] = info;
438
+ if (this.minValue == null || min < this.minValue) this.minValue = min;
439
+ if (this.max == null || max > this.maxValue!) this.maxValue = max;
440
+ this.stacks[s].info = info;
441
+ }
442
+
443
+ if (this.min == null) {
444
+ if (this.minValue != null) this.min = this.minValue;
445
+ else this.min = 0;
446
+ }
447
+
448
+ if (this.max == null) {
449
+ if (this.maxValue != null) this.max = this.maxValue;
450
+ else this.max = this.normalized ? 1 : 100;
451
+ }
452
+
453
+ this.origin = this.inverted ? this.b : this.a;
454
+
455
+ this.calculateTicks();
456
+ if (this.scale == null) {
457
+ this.scale = this.getScale();
458
+ }
459
+ }
460
+
461
+ getTimezoneOffset(date: Date): number {
462
+ return date.getTimezoneOffset() * 60 * 1000;
463
+ }
464
+
465
+ getScale(
466
+ tickSize?: number | null,
467
+ measure?: string,
468
+ minRange: number = 1000,
469
+ ): TimeScaleRange {
470
+ let { min, max, upperDeadZone, lowerDeadZone } = this;
471
+
472
+ let smin: number = min!;
473
+ let smax: number = max!;
474
+
475
+ if (tickSize) {
476
+ let minDate = new Date(min!);
477
+ let maxDate = new Date(max!);
478
+
479
+ switch (measure) {
480
+ case "second":
481
+ case "minute":
482
+ case "hour":
483
+ case "day":
484
+ default:
485
+ let minOffset = this.getTimezoneOffset(minDate);
486
+ let maxOffset = this.getTimezoneOffset(maxDate);
487
+ let mondayOffset = 4 * milliSeconds.day; //new Date(0).getDay() => 4
488
+ smin =
489
+ Math.floor((smin - minOffset - mondayOffset) / tickSize) *
490
+ tickSize +
491
+ minOffset +
492
+ mondayOffset;
493
+ smax =
494
+ Math.ceil((smax - maxOffset - mondayOffset) / tickSize) * tickSize +
495
+ maxOffset +
496
+ mondayOffset;
497
+ break;
498
+
499
+ case "month":
500
+ tickSize /= milliSeconds.month;
501
+ let minMonth = monthNumber(minDate);
502
+ let maxMonth = monthNumber(maxDate);
503
+ minMonth = Math.floor(minMonth / tickSize) * tickSize;
504
+ maxMonth = Math.ceil(maxMonth / tickSize) * tickSize;
505
+ smin = new Date(
506
+ Math.floor(minMonth / 12),
507
+ minMonth % 12,
508
+ 1,
509
+ ).getTime();
510
+ smax = new Date(
511
+ Math.floor(maxMonth / 12),
512
+ maxMonth % 12,
513
+ 1,
514
+ ).getTime();
515
+ break;
516
+
517
+ case "year":
518
+ tickSize /= milliSeconds.year;
519
+ let minYear = yearNumber(minDate);
520
+ let maxYear = yearNumber(maxDate);
521
+ minYear = Math.floor(minYear / tickSize) * tickSize;
522
+ maxYear = Math.ceil(maxYear / tickSize) * tickSize;
523
+ smin = new Date(minYear, 0, 1).getTime();
524
+ smax = new Date(maxYear, 0, 1).getTime();
525
+ break;
526
+ }
527
+ } else {
528
+ if (this.minValue == min) smin = this.minValuePadded!;
529
+ if (this.maxValue == max) smax = this.maxValuePadded!;
530
+ }
531
+
532
+ if (smax - smin < minRange) {
533
+ let delta = (minRange - (smax - smin)) / 2;
534
+ smin -= delta;
535
+ smax += delta;
536
+ }
537
+
538
+ //padding should be activated only if using min/max obtained from the data
539
+ let minPadding =
540
+ this.minValue === min ? Math.max(0, smin - this.minValuePadded!) : 0;
541
+ let maxPadding =
542
+ this.maxValue === max ? Math.max(0, this.maxValuePadded! - smax) : 0;
543
+
544
+ let factor =
545
+ smin < smax
546
+ ? Math.abs(this.b - this.a) / (smax - smin + minPadding + maxPadding)
547
+ : 0;
548
+ if (factor > 0 && (upperDeadZone > 0 || lowerDeadZone > 0)) {
549
+ smin -= lowerDeadZone / factor;
550
+ smax += upperDeadZone / factor;
551
+ minPadding =
552
+ this.minValuePadded != null
553
+ ? Math.max(0, smin - this.minValuePadded)
554
+ : 0;
555
+ maxPadding =
556
+ this.maxValuePadded != null
557
+ ? Math.max(0, this.maxValuePadded - smax)
558
+ : 0;
559
+ factor =
560
+ smin < smax
561
+ ? Math.abs(this.b - this.a) / (smax - smin + minPadding + maxPadding)
562
+ : 0;
563
+ }
564
+
565
+ let sign = this.b > this.a ? 1 : -1;
566
+
567
+ return {
568
+ factor: sign * (this.inverted ? -factor : factor),
569
+ min: smin,
570
+ max: smax,
571
+ minPadding,
572
+ maxPadding,
573
+ };
574
+ }
575
+
576
+ acknowledge(value: any, width: number = 0, offset: number = 0): void {
577
+ value = this.decodeValue(value);
578
+ if (
579
+ this.minValue == null ||
580
+ value + offset - width / 2 < this.minValuePadded!
581
+ ) {
582
+ this.minValue = value;
583
+ this.minValuePadded = value + offset - width / 2;
584
+ }
585
+ if (
586
+ this.maxValue == null ||
587
+ value + offset + width / 2 > this.maxValuePadded!
588
+ ) {
589
+ this.maxValue = value;
590
+ this.maxValuePadded = value + offset + width / 2;
591
+ }
592
+ }
593
+
594
+ getStack(name: string): Stack {
595
+ let s = this.stacks[name];
596
+ if (!s) s = this.stacks[name] = new Stack();
597
+ return s;
598
+ }
599
+
600
+ stacknowledge(name: string, ordinal: string, value: number | null): void {
601
+ return this.getStack(name).acknowledge(ordinal, value);
602
+ }
603
+
604
+ stack(name: string, ordinal: string, value: number | null): number | null {
605
+ let v = this.getStack(name).stack(ordinal, value);
606
+ return v != null ? this.map(v) : null;
607
+ }
608
+
609
+ findTickSize(minPxDist: number): TickSize | undefined {
610
+ return this.tickSizes.find(
611
+ ({ size, noLabels }) =>
612
+ !noLabels && size * Math.abs(this.scale.factor) >= minPxDist,
613
+ );
614
+ }
615
+
616
+ getTickSizes(): TickSize[] {
617
+ return this.tickSizes;
618
+ }
619
+
620
+ calculateTicks(): void {
621
+ let minReached = false;
622
+
623
+ let minRange = 1000;
624
+
625
+ for (let unit in milliSeconds) {
626
+ if (!minReached) {
627
+ if (unit == this.minTickUnit) minReached = true;
628
+ else continue;
629
+ }
630
+
631
+ let unitSize = milliSeconds[unit];
632
+ let divisions = this.tickDivisions[unit];
633
+
634
+ if (this.tickSizes.length > 0) {
635
+ //add ticks from higher levels
636
+ this.tickSizes.push(
637
+ ...divisions[0].map((s) => ({ size: s * unitSize, measure: unit })),
638
+ );
639
+ break;
640
+ }
641
+
642
+ let bestLabelDistance = Infinity;
643
+ let bestMinLabelDistance = this.minLabelDistance;
644
+ let bestTicks: number[] = [];
645
+ let bestScale: TimeScaleRange | null = null;
646
+ let bestFormat: string | null = null;
647
+
648
+ this.tickMeasure = unit;
649
+
650
+ for (let i = 0; i < divisions.length; i++) {
651
+ let divs = divisions[i];
652
+ for (let d = 0; d < divs.length; d++) {
653
+ //if (useSnapToTicks && d < Math.min(divs.length - 1, this.snapToTicks)) continue;
654
+ let tickSize = divs[d] * unitSize;
655
+ let scale = this.getScale(null, unit, tickSize);
656
+ let format = this.format ?? this.getFormat(unit, scale);
657
+ let minLabelDistance =
658
+ this.minLabelDistanceFormatOverride[format] ??
659
+ this.minLabelDistance;
660
+ let labelDistance = tickSize * Math.abs(scale.factor);
661
+ if (
662
+ labelDistance >= minLabelDistance &&
663
+ labelDistance < bestLabelDistance
664
+ ) {
665
+ bestScale = scale;
666
+ bestTicks = divs.map((s) => s * unitSize);
667
+ bestLabelDistance = labelDistance;
668
+ bestFormat = format;
669
+ bestMinLabelDistance = minLabelDistance;
670
+ minRange = tickSize;
671
+ }
672
+ }
673
+ }
674
+
675
+ this.scale = bestScale!;
676
+ this.tickSizes = bestTicks
677
+ .filter(
678
+ (ts) => ts * Math.abs(bestScale!.factor) >= this.minTickDistance,
679
+ )
680
+ .map((size) => ({ size, measure: this.tickMeasure }));
681
+ this.resolvedFormat = bestFormat;
682
+ this.resolvedMinLabelDistance = bestMinLabelDistance;
683
+ }
684
+
685
+ let lowerTickUnit: string | null = null;
686
+ switch (this.tickMeasure) {
687
+ case "year":
688
+ lowerTickUnit = "month";
689
+ break;
690
+ case "month":
691
+ lowerTickUnit = "day";
692
+ break;
693
+ case "week":
694
+ lowerTickUnit = "day";
695
+ break;
696
+ case "day":
697
+ lowerTickUnit = "hour";
698
+ break;
699
+ case "hour":
700
+ lowerTickUnit = "minute";
701
+ break;
702
+ case "minute":
703
+ lowerTickUnit = "second";
704
+ break;
705
+ }
706
+
707
+ if (
708
+ lowerTickUnit &&
709
+ this.minTickUnit &&
710
+ milliSeconds[lowerTickUnit] < milliSeconds[this.minTickUnit]
711
+ )
712
+ lowerTickUnit =
713
+ this.minTickUnit == this.tickMeasure ? null : this.minTickUnit;
714
+
715
+ if (lowerTickUnit != null && this.scale) {
716
+ let bestMinorTickSize = Infinity;
717
+ let divisions = this.tickDivisions[lowerTickUnit];
718
+ let unitSize = milliSeconds[lowerTickUnit];
719
+ for (let i = 0; i < divisions.length; i++) {
720
+ let divs = divisions[i];
721
+ for (let d = 0; d < divs.length; d++) {
722
+ let tickSize = divs[d] * unitSize;
723
+ if (
724
+ tickSize * Math.abs(this.scale.factor) >= this.minTickDistance &&
725
+ tickSize < bestMinorTickSize
726
+ ) {
727
+ bestMinorTickSize = tickSize;
728
+ }
729
+ }
730
+ }
731
+ if (bestMinorTickSize != Infinity) {
732
+ this.tickSizes.unshift({
733
+ size: bestMinorTickSize,
734
+ measure: lowerTickUnit,
735
+ noLabels: true,
736
+ });
737
+ if (this.tickSizes.length > 1) {
738
+ let labelStep = this.tickSizes[1].size;
739
+ let lowerScale = this.getScale(null, lowerTickUnit, minRange);
740
+ if (lowerScale.max - lowerScale.min >= labelStep)
741
+ this.scale = lowerScale;
742
+ }
743
+ }
744
+ }
745
+
746
+ if (
747
+ isNumber(this.snapToTicks) &&
748
+ this.snapToTicks >= 0 &&
749
+ this.tickSizes.length > 0
750
+ ) {
751
+ let tickSize =
752
+ this.tickSizes[Math.min(this.tickSizes.length - 1, this.snapToTicks)];
753
+ this.scale = this.getScale(tickSize.size, tickSize.measure, minRange);
754
+ }
755
+ }
756
+
757
+ getTicks(tickSizes: TickSize[]): (number | Date)[][] {
758
+ return tickSizes.map(({ size, measure }) => {
759
+ let result: (number | Date)[] = [],
760
+ start: number,
761
+ end: number,
762
+ minDate: Date,
763
+ maxDate: Date;
764
+ if (measure == "year") {
765
+ size /= milliSeconds.year;
766
+ minDate = new Date(this.scale.min - this.scale.minPadding);
767
+ maxDate = new Date(this.scale.max + this.scale.maxPadding);
768
+ start = Math.ceil(yearNumber(minDate) / size) * size;
769
+ end = Math.floor(yearNumber(maxDate) / size) * size;
770
+ for (let i = start; i <= end; i += size)
771
+ result.push(new Date(i, 0, 1).getTime());
772
+ } else if (measure == "month") {
773
+ size /= milliSeconds.month;
774
+ minDate = new Date(this.scale.min - this.scale.minPadding);
775
+ maxDate = new Date(this.scale.max + this.scale.maxPadding);
776
+ start = Math.ceil(monthNumber(minDate) / size) * size;
777
+ end = Math.floor(monthNumber(maxDate) / size) * size;
778
+ for (let i = start; i <= end; i += size)
779
+ result.push(new Date(Math.floor(i / 12), i % 12, 1).getTime());
780
+ } else if (measure == "day" || measure == "week") {
781
+ let multiplier = measure == "week" ? 7 : 1;
782
+ size /= milliSeconds.day;
783
+ minDate = new Date(this.scale.min - this.scale.minPadding);
784
+ maxDate = new Date(this.scale.max + this.scale.maxPadding);
785
+ let date = zeroTime(minDate);
786
+ while (date.getTime() < minDate.getTime())
787
+ date.setDate(date.getDate() + 1);
788
+ if (measure == "week") {
789
+ //start on monday
790
+ while (date.getDay() != 1) {
791
+ date.setDate(date.getDate() + 1);
792
+ }
793
+ }
794
+ while (date.getTime() <= maxDate.getTime()) {
795
+ result.push(date);
796
+ date = new Date(date);
797
+ date.setDate(date.getDate() + multiplier);
798
+ }
799
+ } else {
800
+ let minOffset = this.getTimezoneOffset(
801
+ new Date(this.scale.min - this.scale.minPadding),
802
+ );
803
+ let mondayOffset = 4 * milliSeconds.day;
804
+ let date =
805
+ Math.ceil(
806
+ (this.scale.min -
807
+ this.scale.minPadding -
808
+ minOffset -
809
+ mondayOffset) /
810
+ size,
811
+ ) *
812
+ size +
813
+ minOffset +
814
+ mondayOffset;
815
+ while (date <= this.scale.max + this.scale.maxPadding) {
816
+ result.push(date);
817
+ date += size;
818
+ }
819
+ }
820
+ return result;
821
+ });
822
+ }
823
+
824
+ mapGridlines(): number[] {
825
+ if (this.tickSizes.length == 0) return [];
826
+ return this.getTicks([this.tickSizes[0]])[0].map((x) => this.map(x));
827
+ }
828
+
829
+ book(): void {
830
+ Console.warn(
831
+ "TimeAxis does not support the autoSize flag for column and bar graphs.",
832
+ );
833
+ }
834
+ }