@perses-dev/components 0.0.0-snapshot-panel-extra-content-3-17f9c42 → 0.0.0-snapshot-scatterplot-fix-imports-95e1b59

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 (505) hide show
  1. package/dist/BarChart/BarChart.d.ts +3 -4
  2. package/dist/BarChart/BarChart.d.ts.map +1 -1
  3. package/dist/BarChart/BarChart.js +17 -11
  4. package/dist/BarChart/BarChart.js.map +1 -1
  5. package/dist/BarChart/index.js.map +1 -1
  6. package/dist/ColorPicker/ColorPicker.d.ts +1 -2
  7. package/dist/ColorPicker/ColorPicker.d.ts.map +1 -1
  8. package/dist/ColorPicker/ColorPicker.js +1 -1
  9. package/dist/ColorPicker/ColorPicker.js.map +1 -1
  10. package/dist/ColorPicker/index.js.map +1 -1
  11. package/dist/ContentWithLegend/ContentWithLegend.d.ts +1 -2
  12. package/dist/ContentWithLegend/ContentWithLegend.d.ts.map +1 -1
  13. package/dist/ContentWithLegend/ContentWithLegend.js +2 -2
  14. package/dist/ContentWithLegend/ContentWithLegend.js.map +1 -1
  15. package/dist/ContentWithLegend/index.js.map +1 -1
  16. package/dist/ContentWithLegend/model/content-with-legend-model.d.ts +3 -3
  17. package/dist/ContentWithLegend/model/content-with-legend-model.d.ts.map +1 -1
  18. package/dist/ContentWithLegend/model/content-with-legend-model.js +21 -21
  19. package/dist/ContentWithLegend/model/content-with-legend-model.js.map +1 -1
  20. package/dist/DateTimeRangePicker/AbsoluteTimePicker.d.ts +1 -2
  21. package/dist/DateTimeRangePicker/AbsoluteTimePicker.d.ts.map +1 -1
  22. package/dist/DateTimeRangePicker/AbsoluteTimePicker.js +8 -24
  23. package/dist/DateTimeRangePicker/AbsoluteTimePicker.js.map +1 -1
  24. package/dist/DateTimeRangePicker/DateTimeRangePicker.d.ts +1 -2
  25. package/dist/DateTimeRangePicker/DateTimeRangePicker.d.ts.map +1 -1
  26. package/dist/DateTimeRangePicker/DateTimeRangePicker.js +1 -1
  27. package/dist/DateTimeRangePicker/DateTimeRangePicker.js.map +1 -1
  28. package/dist/DateTimeRangePicker/TimeRangeSelector.d.ts +1 -2
  29. package/dist/DateTimeRangePicker/TimeRangeSelector.d.ts.map +1 -1
  30. package/dist/DateTimeRangePicker/TimeRangeSelector.js +2 -2
  31. package/dist/DateTimeRangePicker/TimeRangeSelector.js.map +1 -1
  32. package/dist/DateTimeRangePicker/index.js.map +1 -1
  33. package/dist/DateTimeRangePicker/utils.js.map +1 -1
  34. package/dist/Dialog/Dialog.d.ts +6 -6
  35. package/dist/Dialog/Dialog.d.ts.map +1 -1
  36. package/dist/Dialog/Dialog.js +5 -5
  37. package/dist/Dialog/Dialog.js.map +1 -1
  38. package/dist/Dialog/DiscardChangesConfirmationDialog.d.ts +1 -2
  39. package/dist/Dialog/DiscardChangesConfirmationDialog.d.ts.map +1 -1
  40. package/dist/Dialog/DiscardChangesConfirmationDialog.js +1 -1
  41. package/dist/Dialog/DiscardChangesConfirmationDialog.js.map +1 -1
  42. package/dist/Dialog/index.js.map +1 -1
  43. package/dist/Drawer/Drawer.d.ts +1 -2
  44. package/dist/Drawer/Drawer.d.ts.map +1 -1
  45. package/dist/Drawer/Drawer.js +4 -3
  46. package/dist/Drawer/Drawer.js.map +1 -1
  47. package/dist/Drawer/index.js.map +1 -1
  48. package/dist/EChart/EChart.d.ts +7 -7
  49. package/dist/EChart/EChart.d.ts.map +1 -1
  50. package/dist/EChart/EChart.js +3 -3
  51. package/dist/EChart/EChart.js.map +1 -1
  52. package/dist/EChart/index.js.map +1 -1
  53. package/dist/ErrorAlert.d.ts +1 -2
  54. package/dist/ErrorAlert.d.ts.map +1 -1
  55. package/dist/ErrorAlert.js +1 -1
  56. package/dist/ErrorAlert.js.map +1 -1
  57. package/dist/ErrorBoundary.js.map +1 -1
  58. package/dist/FontSizeSelector/FontSizeSelector.d.ts +2 -3
  59. package/dist/FontSizeSelector/FontSizeSelector.d.ts.map +1 -1
  60. package/dist/FontSizeSelector/FontSizeSelector.js +2 -2
  61. package/dist/FontSizeSelector/FontSizeSelector.js.map +1 -1
  62. package/dist/FontSizeSelector/index.js.map +1 -1
  63. package/dist/FormatControls/FormatControls.d.ts +8 -0
  64. package/dist/FormatControls/FormatControls.d.ts.map +1 -0
  65. package/dist/{UnitSelector/UnitSelector.js → FormatControls/FormatControls.js} +26 -26
  66. package/dist/FormatControls/FormatControls.js.map +1 -0
  67. package/dist/FormatControls/index.d.ts +2 -0
  68. package/dist/FormatControls/index.d.ts.map +1 -0
  69. package/dist/{UnitSelector → FormatControls}/index.js +1 -1
  70. package/dist/FormatControls/index.js.map +1 -0
  71. package/dist/GaugeChart/GaugeChart.d.ts +6 -7
  72. package/dist/GaugeChart/GaugeChart.d.ts.map +1 -1
  73. package/dist/GaugeChart/GaugeChart.js +12 -12
  74. package/dist/GaugeChart/GaugeChart.js.map +1 -1
  75. package/dist/GaugeChart/index.js.map +1 -1
  76. package/dist/InfoTooltip/InfoTooltip.d.ts +2 -2
  77. package/dist/InfoTooltip/InfoTooltip.d.ts.map +1 -1
  78. package/dist/InfoTooltip/InfoTooltip.js +4 -4
  79. package/dist/InfoTooltip/InfoTooltip.js.map +1 -1
  80. package/dist/InfoTooltip/index.js.map +1 -1
  81. package/dist/JSONEditor.d.ts +4 -4
  82. package/dist/JSONEditor.d.ts.map +1 -1
  83. package/dist/JSONEditor.js +9 -8
  84. package/dist/JSONEditor.js.map +1 -1
  85. package/dist/Legend/CompactLegend.d.ts +1 -2
  86. package/dist/Legend/CompactLegend.d.ts.map +1 -1
  87. package/dist/Legend/CompactLegend.js +1 -1
  88. package/dist/Legend/CompactLegend.js.map +1 -1
  89. package/dist/Legend/Legend.d.ts +1 -2
  90. package/dist/Legend/Legend.d.ts.map +1 -1
  91. package/dist/Legend/Legend.js +4 -4
  92. package/dist/Legend/Legend.js.map +1 -1
  93. package/dist/Legend/LegendColorBadge.js +1 -1
  94. package/dist/Legend/LegendColorBadge.js.map +1 -1
  95. package/dist/Legend/ListLegend.d.ts +1 -2
  96. package/dist/Legend/ListLegend.d.ts.map +1 -1
  97. package/dist/Legend/ListLegend.js +1 -1
  98. package/dist/Legend/ListLegend.js.map +1 -1
  99. package/dist/Legend/ListLegendItem.d.ts +2 -2
  100. package/dist/Legend/ListLegendItem.d.ts.map +1 -1
  101. package/dist/Legend/ListLegendItem.js +7 -11
  102. package/dist/Legend/ListLegendItem.js.map +1 -1
  103. package/dist/Legend/TableLegend.d.ts +1 -2
  104. package/dist/Legend/TableLegend.d.ts.map +1 -1
  105. package/dist/Legend/TableLegend.js +2 -2
  106. package/dist/Legend/TableLegend.js.map +1 -1
  107. package/dist/Legend/index.js.map +1 -1
  108. package/dist/Legend/legend-model.d.ts +2 -2
  109. package/dist/Legend/legend-model.d.ts.map +1 -1
  110. package/dist/Legend/legend-model.js.map +1 -1
  111. package/dist/LineChart/LineChart.d.ts +2 -2
  112. package/dist/LineChart/LineChart.d.ts.map +1 -1
  113. package/dist/LineChart/LineChart.js +22 -24
  114. package/dist/LineChart/LineChart.js.map +1 -1
  115. package/dist/LineChart/index.js.map +1 -1
  116. package/dist/ModeSelector/ModeSelector.d.ts +2 -3
  117. package/dist/ModeSelector/ModeSelector.d.ts.map +1 -1
  118. package/dist/ModeSelector/ModeSelector.js +2 -2
  119. package/dist/ModeSelector/ModeSelector.js.map +1 -1
  120. package/dist/ModeSelector/index.js.map +1 -1
  121. package/dist/OptionsEditorLayout/OptionsEditorColumn.d.ts +2 -2
  122. package/dist/OptionsEditorLayout/OptionsEditorColumn.d.ts.map +1 -1
  123. package/dist/OptionsEditorLayout/OptionsEditorColumn.js +1 -1
  124. package/dist/OptionsEditorLayout/OptionsEditorColumn.js.map +1 -1
  125. package/dist/OptionsEditorLayout/OptionsEditorControl.d.ts +2 -3
  126. package/dist/OptionsEditorLayout/OptionsEditorControl.d.ts.map +1 -1
  127. package/dist/OptionsEditorLayout/OptionsEditorControl.js +1 -1
  128. package/dist/OptionsEditorLayout/OptionsEditorControl.js.map +1 -1
  129. package/dist/OptionsEditorLayout/OptionsEditorGrid.d.ts +2 -2
  130. package/dist/OptionsEditorLayout/OptionsEditorGrid.d.ts.map +1 -1
  131. package/dist/OptionsEditorLayout/OptionsEditorGrid.js +1 -1
  132. package/dist/OptionsEditorLayout/OptionsEditorGrid.js.map +1 -1
  133. package/dist/OptionsEditorLayout/OptionsEditorGroup.d.ts +2 -2
  134. package/dist/OptionsEditorLayout/OptionsEditorGroup.d.ts.map +1 -1
  135. package/dist/OptionsEditorLayout/OptionsEditorGroup.js +1 -1
  136. package/dist/OptionsEditorLayout/OptionsEditorGroup.js.map +1 -1
  137. package/dist/OptionsEditorLayout/index.js.map +1 -1
  138. package/dist/RefreshIntervalPicker/RefreshIntervalPicker.d.ts +1 -2
  139. package/dist/RefreshIntervalPicker/RefreshIntervalPicker.d.ts.map +1 -1
  140. package/dist/RefreshIntervalPicker/RefreshIntervalPicker.js +23 -7
  141. package/dist/RefreshIntervalPicker/RefreshIntervalPicker.js.map +1 -1
  142. package/dist/RefreshIntervalPicker/index.js.map +1 -1
  143. package/dist/SettingsAutocomplete/SettingsAutocomplete.d.ts +1 -1
  144. package/dist/SettingsAutocomplete/SettingsAutocomplete.d.ts.map +1 -1
  145. package/dist/SettingsAutocomplete/SettingsAutocomplete.js +4 -4
  146. package/dist/SettingsAutocomplete/SettingsAutocomplete.js.map +1 -1
  147. package/dist/SettingsAutocomplete/index.js.map +1 -1
  148. package/dist/SortSelector/SortSelector.d.ts +2 -3
  149. package/dist/SortSelector/SortSelector.d.ts.map +1 -1
  150. package/dist/SortSelector/SortSelector.js +2 -2
  151. package/dist/SortSelector/SortSelector.js.map +1 -1
  152. package/dist/SortSelector/index.js.map +1 -1
  153. package/dist/StatChart/StatChart.d.ts +3 -4
  154. package/dist/StatChart/StatChart.d.ts.map +1 -1
  155. package/dist/StatChart/StatChart.js +10 -10
  156. package/dist/StatChart/StatChart.js.map +1 -1
  157. package/dist/StatChart/calculateFontSize.js +8 -8
  158. package/dist/StatChart/calculateFontSize.js.map +1 -1
  159. package/dist/StatChart/index.js.map +1 -1
  160. package/dist/Table/InnerTable.d.ts +2 -2
  161. package/dist/Table/InnerTable.d.ts.map +1 -1
  162. package/dist/Table/InnerTable.js +2 -2
  163. package/dist/Table/InnerTable.js.map +1 -1
  164. package/dist/Table/Table.d.ts +1 -2
  165. package/dist/Table/Table.d.ts.map +1 -1
  166. package/dist/Table/Table.js +3 -3
  167. package/dist/Table/Table.js.map +1 -1
  168. package/dist/Table/TableBody.d.ts +2 -2
  169. package/dist/Table/TableBody.d.ts.map +1 -1
  170. package/dist/Table/TableBody.js.map +1 -1
  171. package/dist/Table/TableCell.d.ts +1 -1
  172. package/dist/Table/TableCell.d.ts.map +1 -1
  173. package/dist/Table/TableCell.js +4 -4
  174. package/dist/Table/TableCell.js.map +1 -1
  175. package/dist/Table/TableCheckbox.d.ts +1 -2
  176. package/dist/Table/TableCheckbox.d.ts.map +1 -1
  177. package/dist/Table/TableCheckbox.js +1 -1
  178. package/dist/Table/TableCheckbox.js.map +1 -1
  179. package/dist/Table/TableHead.d.ts +2 -2
  180. package/dist/Table/TableHead.d.ts.map +1 -1
  181. package/dist/Table/TableHead.js.map +1 -1
  182. package/dist/Table/TableHeaderCell.d.ts +1 -2
  183. package/dist/Table/TableHeaderCell.d.ts.map +1 -1
  184. package/dist/Table/TableHeaderCell.js +1 -1
  185. package/dist/Table/TableHeaderCell.js.map +1 -1
  186. package/dist/Table/TableRow.d.ts +1 -1
  187. package/dist/Table/TableRow.d.ts.map +1 -1
  188. package/dist/Table/TableRow.js.map +1 -1
  189. package/dist/Table/VirtualizedTable.d.ts +2 -2
  190. package/dist/Table/VirtualizedTable.d.ts.map +1 -1
  191. package/dist/Table/VirtualizedTable.js +8 -8
  192. package/dist/Table/VirtualizedTable.js.map +1 -1
  193. package/dist/Table/VirtualizedTableContainer.d.ts +2 -2
  194. package/dist/Table/VirtualizedTableContainer.d.ts.map +1 -1
  195. package/dist/Table/VirtualizedTableContainer.js.map +1 -1
  196. package/dist/Table/hooks/useTableKeyboardNav.d.ts +1 -1
  197. package/dist/Table/hooks/useTableKeyboardNav.d.ts.map +1 -1
  198. package/dist/Table/hooks/useTableKeyboardNav.js +1 -1
  199. package/dist/Table/hooks/useTableKeyboardNav.js.map +1 -1
  200. package/dist/Table/hooks/useVirtualizedTableKeyboardNav.js +21 -21
  201. package/dist/Table/hooks/useVirtualizedTableKeyboardNav.js.map +1 -1
  202. package/dist/Table/index.js.map +1 -1
  203. package/dist/Table/model/table-model.d.ts +6 -6
  204. package/dist/Table/model/table-model.d.ts.map +1 -1
  205. package/dist/Table/model/table-model.js +11 -11
  206. package/dist/Table/model/table-model.js.map +1 -1
  207. package/dist/ThresholdsEditor/ThresholdColorPicker.d.ts +1 -2
  208. package/dist/ThresholdsEditor/ThresholdColorPicker.d.ts.map +1 -1
  209. package/dist/ThresholdsEditor/ThresholdColorPicker.js +4 -4
  210. package/dist/ThresholdsEditor/ThresholdColorPicker.js.map +1 -1
  211. package/dist/ThresholdsEditor/ThresholdInput.d.ts +1 -1
  212. package/dist/ThresholdsEditor/ThresholdInput.d.ts.map +1 -1
  213. package/dist/ThresholdsEditor/ThresholdInput.js +2 -2
  214. package/dist/ThresholdsEditor/ThresholdInput.js.map +1 -1
  215. package/dist/ThresholdsEditor/ThresholdsEditor.d.ts +1 -2
  216. package/dist/ThresholdsEditor/ThresholdsEditor.d.ts.map +1 -1
  217. package/dist/ThresholdsEditor/ThresholdsEditor.js +23 -21
  218. package/dist/ThresholdsEditor/ThresholdsEditor.js.map +1 -1
  219. package/dist/ThresholdsEditor/index.js.map +1 -1
  220. package/dist/TimeChart/TimeChart.d.ts +3 -3
  221. package/dist/TimeChart/TimeChart.d.ts.map +1 -1
  222. package/dist/TimeChart/TimeChart.js +110 -67
  223. package/dist/TimeChart/TimeChart.js.map +1 -1
  224. package/dist/TimeChart/index.js.map +1 -1
  225. package/dist/TimeSeriesTooltip/LineChartTooltip.d.ts +2 -2
  226. package/dist/TimeSeriesTooltip/LineChartTooltip.d.ts.map +1 -1
  227. package/dist/TimeSeriesTooltip/LineChartTooltip.js +11 -10
  228. package/dist/TimeSeriesTooltip/LineChartTooltip.js.map +1 -1
  229. package/dist/TimeSeriesTooltip/SeriesInfo.d.ts +1 -2
  230. package/dist/TimeSeriesTooltip/SeriesInfo.d.ts.map +1 -1
  231. package/dist/TimeSeriesTooltip/SeriesInfo.js +3 -3
  232. package/dist/TimeSeriesTooltip/SeriesInfo.js.map +1 -1
  233. package/dist/TimeSeriesTooltip/SeriesLabelsStack.d.ts +1 -2
  234. package/dist/TimeSeriesTooltip/SeriesLabelsStack.d.ts.map +1 -1
  235. package/dist/TimeSeriesTooltip/SeriesLabelsStack.js +1 -1
  236. package/dist/TimeSeriesTooltip/SeriesLabelsStack.js.map +1 -1
  237. package/dist/TimeSeriesTooltip/SeriesMarker.d.ts +1 -2
  238. package/dist/TimeSeriesTooltip/SeriesMarker.d.ts.map +1 -1
  239. package/dist/TimeSeriesTooltip/SeriesMarker.js +1 -1
  240. package/dist/TimeSeriesTooltip/SeriesMarker.js.map +1 -1
  241. package/dist/TimeSeriesTooltip/TimeChartTooltip.d.ts +2 -2
  242. package/dist/TimeSeriesTooltip/TimeChartTooltip.d.ts.map +1 -1
  243. package/dist/TimeSeriesTooltip/TimeChartTooltip.js +6 -6
  244. package/dist/TimeSeriesTooltip/TimeChartTooltip.js.map +1 -1
  245. package/dist/TimeSeriesTooltip/TooltipContent.d.ts +1 -2
  246. package/dist/TimeSeriesTooltip/TooltipContent.d.ts.map +1 -1
  247. package/dist/TimeSeriesTooltip/TooltipContent.js +2 -2
  248. package/dist/TimeSeriesTooltip/TooltipContent.js.map +1 -1
  249. package/dist/TimeSeriesTooltip/TooltipHeader.js +7 -7
  250. package/dist/TimeSeriesTooltip/TooltipHeader.js.map +1 -1
  251. package/dist/TimeSeriesTooltip/index.js.map +1 -1
  252. package/dist/TimeSeriesTooltip/nearby-series.d.ts +8 -8
  253. package/dist/TimeSeriesTooltip/nearby-series.d.ts.map +1 -1
  254. package/dist/TimeSeriesTooltip/nearby-series.js +44 -45
  255. package/dist/TimeSeriesTooltip/nearby-series.js.map +1 -1
  256. package/dist/TimeSeriesTooltip/tooltip-model.d.ts +13 -26
  257. package/dist/TimeSeriesTooltip/tooltip-model.d.ts.map +1 -1
  258. package/dist/TimeSeriesTooltip/tooltip-model.js +5 -11
  259. package/dist/TimeSeriesTooltip/tooltip-model.js.map +1 -1
  260. package/dist/TimeSeriesTooltip/utils.d.ts +1 -1
  261. package/dist/TimeSeriesTooltip/utils.d.ts.map +1 -1
  262. package/dist/TimeSeriesTooltip/utils.js +5 -4
  263. package/dist/TimeSeriesTooltip/utils.js.map +1 -1
  264. package/dist/ToolbarIconButton/ToolbarIconButton.d.ts +6 -0
  265. package/dist/ToolbarIconButton/ToolbarIconButton.d.ts.map +1 -0
  266. package/dist/ToolbarIconButton/ToolbarIconButton.js +32 -0
  267. package/dist/ToolbarIconButton/ToolbarIconButton.js.map +1 -0
  268. package/dist/ToolbarIconButton/index.d.ts +2 -0
  269. package/dist/ToolbarIconButton/index.d.ts.map +1 -0
  270. package/dist/ToolbarIconButton/index.js +15 -0
  271. package/dist/ToolbarIconButton/index.js.map +1 -0
  272. package/dist/YAxisLabel.d.ts +1 -2
  273. package/dist/YAxisLabel.d.ts.map +1 -1
  274. package/dist/YAxisLabel.js +1 -1
  275. package/dist/YAxisLabel.js.map +1 -1
  276. package/dist/cjs/BarChart/BarChart.js +25 -17
  277. package/dist/cjs/BarChart/index.js +10 -8
  278. package/dist/cjs/ColorPicker/ColorPicker.js +19 -15
  279. package/dist/cjs/ColorPicker/index.js +10 -8
  280. package/dist/cjs/ContentWithLegend/ContentWithLegend.js +13 -11
  281. package/dist/cjs/ContentWithLegend/index.js +10 -8
  282. package/dist/cjs/ContentWithLegend/model/content-with-legend-model.js +29 -25
  283. package/dist/cjs/DateTimeRangePicker/AbsoluteTimePicker.js +30 -44
  284. package/dist/cjs/DateTimeRangePicker/DateTimeRangePicker.js +13 -11
  285. package/dist/cjs/DateTimeRangePicker/TimeRangeSelector.js +14 -12
  286. package/dist/cjs/DateTimeRangePicker/index.js +12 -10
  287. package/dist/cjs/DateTimeRangePicker/utils.js +9 -5
  288. package/dist/cjs/Dialog/Dialog.js +16 -14
  289. package/dist/cjs/Dialog/DiscardChangesConfirmationDialog.js +12 -10
  290. package/dist/cjs/Dialog/index.js +11 -9
  291. package/dist/cjs/Drawer/Drawer.js +8 -5
  292. package/dist/cjs/Drawer/index.js +10 -8
  293. package/dist/cjs/EChart/EChart.js +16 -12
  294. package/dist/cjs/EChart/index.js +10 -8
  295. package/dist/cjs/ErrorAlert.js +6 -4
  296. package/dist/cjs/ErrorBoundary.js +4 -2
  297. package/dist/cjs/FontSizeSelector/FontSizeSelector.js +10 -8
  298. package/dist/cjs/FontSizeSelector/index.js +10 -8
  299. package/dist/cjs/{UnitSelector/UnitSelector.js → FormatControls/FormatControls.js} +38 -36
  300. package/dist/cjs/{UnitSelector → FormatControls}/index.js +10 -8
  301. package/dist/cjs/GaugeChart/GaugeChart.js +22 -18
  302. package/dist/cjs/GaugeChart/index.js +10 -8
  303. package/dist/cjs/InfoTooltip/InfoTooltip.js +16 -14
  304. package/dist/cjs/InfoTooltip/index.js +10 -8
  305. package/dist/cjs/JSONEditor.js +19 -16
  306. package/dist/cjs/Legend/CompactLegend.js +10 -8
  307. package/dist/cjs/Legend/Legend.js +16 -14
  308. package/dist/cjs/Legend/LegendColorBadge.js +8 -6
  309. package/dist/cjs/Legend/ListLegend.js +11 -9
  310. package/dist/cjs/Legend/ListLegendItem.js +20 -20
  311. package/dist/cjs/Legend/TableLegend.js +8 -6
  312. package/dist/cjs/Legend/index.js +11 -9
  313. package/dist/cjs/Legend/legend-model.js +3 -1
  314. package/dist/cjs/LineChart/LineChart.js +31 -31
  315. package/dist/cjs/LineChart/index.js +10 -8
  316. package/dist/cjs/ModeSelector/ModeSelector.js +10 -8
  317. package/dist/cjs/ModeSelector/index.js +10 -8
  318. package/dist/cjs/OptionsEditorLayout/OptionsEditorColumn.js +7 -5
  319. package/dist/cjs/OptionsEditorLayout/OptionsEditorControl.js +17 -15
  320. package/dist/cjs/OptionsEditorLayout/OptionsEditorGrid.js +6 -4
  321. package/dist/cjs/OptionsEditorLayout/OptionsEditorGroup.js +12 -10
  322. package/dist/cjs/OptionsEditorLayout/index.js +13 -11
  323. package/dist/cjs/RefreshIntervalPicker/RefreshIntervalPicker.js +28 -10
  324. package/dist/cjs/RefreshIntervalPicker/index.js +10 -8
  325. package/dist/cjs/SettingsAutocomplete/SettingsAutocomplete.js +13 -11
  326. package/dist/cjs/SettingsAutocomplete/index.js +10 -8
  327. package/dist/cjs/SortSelector/SortSelector.js +10 -8
  328. package/dist/cjs/SortSelector/index.js +10 -8
  329. package/dist/cjs/StatChart/StatChart.js +22 -20
  330. package/dist/cjs/StatChart/calculateFontSize.js +11 -9
  331. package/dist/cjs/StatChart/index.js +10 -8
  332. package/dist/cjs/Table/InnerTable.js +7 -5
  333. package/dist/cjs/Table/Table.js +18 -16
  334. package/dist/cjs/Table/TableBody.js +5 -3
  335. package/dist/cjs/Table/TableCell.js +12 -10
  336. package/dist/cjs/Table/TableCheckbox.js +6 -4
  337. package/dist/cjs/Table/TableHead.js +5 -3
  338. package/dist/cjs/Table/TableHeaderCell.js +9 -7
  339. package/dist/cjs/Table/TableRow.js +5 -3
  340. package/dist/cjs/Table/VirtualizedTable.js +34 -32
  341. package/dist/cjs/Table/VirtualizedTableContainer.js +5 -3
  342. package/dist/cjs/Table/hooks/useTableKeyboardNav.js +4 -2
  343. package/dist/cjs/Table/hooks/useVirtualizedTableKeyboardNav.js +24 -22
  344. package/dist/cjs/Table/index.js +14 -10
  345. package/dist/cjs/Table/model/table-model.js +17 -13
  346. package/dist/cjs/ThresholdsEditor/ThresholdColorPicker.js +17 -15
  347. package/dist/cjs/ThresholdsEditor/ThresholdInput.js +15 -13
  348. package/dist/cjs/ThresholdsEditor/ThresholdsEditor.js +50 -44
  349. package/dist/cjs/ThresholdsEditor/index.js +10 -8
  350. package/dist/cjs/TimeChart/TimeChart.js +123 -78
  351. package/dist/cjs/TimeChart/index.js +10 -8
  352. package/dist/cjs/TimeSeriesTooltip/LineChartTooltip.js +31 -28
  353. package/dist/cjs/TimeSeriesTooltip/SeriesInfo.js +18 -16
  354. package/dist/cjs/TimeSeriesTooltip/SeriesLabelsStack.js +16 -14
  355. package/dist/cjs/TimeSeriesTooltip/SeriesMarker.js +6 -4
  356. package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js +23 -21
  357. package/dist/cjs/TimeSeriesTooltip/TooltipContent.js +9 -7
  358. package/dist/cjs/TimeSeriesTooltip/TooltipHeader.js +35 -33
  359. package/dist/cjs/TimeSeriesTooltip/index.js +19 -17
  360. package/dist/cjs/TimeSeriesTooltip/nearby-series.js +70 -53
  361. package/dist/cjs/TimeSeriesTooltip/tooltip-model.js +56 -28
  362. package/dist/cjs/TimeSeriesTooltip/utils.js +19 -14
  363. package/dist/cjs/ToolbarIconButton/ToolbarIconButton.js +40 -0
  364. package/dist/cjs/ToolbarIconButton/index.js +30 -0
  365. package/dist/cjs/YAxisLabel.js +7 -5
  366. package/dist/cjs/context/{ChartsThemeProvider.js → ChartsProvider.js} +41 -12
  367. package/dist/cjs/context/SnackbarProvider.js +7 -3
  368. package/dist/cjs/context/TimeZoneProvider.js +17 -9
  369. package/dist/cjs/context/index.js +32 -0
  370. package/dist/cjs/index.js +42 -41
  371. package/dist/cjs/model/graph.js +9 -3
  372. package/dist/cjs/model/index.js +12 -10
  373. package/dist/cjs/test/index.js +10 -8
  374. package/dist/cjs/test/render.js +7 -5
  375. package/dist/cjs/test-utils/index.js +10 -8
  376. package/dist/cjs/test-utils/theme.js +38 -19
  377. package/dist/cjs/theme/component-overrides/alert.js +7 -5
  378. package/dist/cjs/theme/component-overrides/paper.js +4 -2
  379. package/dist/cjs/theme/index.js +10 -8
  380. package/dist/cjs/theme/palette/background.js +6 -2
  381. package/dist/cjs/theme/palette/colors/blue.js +3 -1
  382. package/dist/cjs/theme/palette/colors/common.js +6 -2
  383. package/dist/cjs/theme/palette/colors/green.js +3 -1
  384. package/dist/cjs/theme/palette/colors/grey.js +3 -1
  385. package/dist/cjs/theme/palette/colors/index.js +17 -15
  386. package/dist/cjs/theme/palette/colors/orange.js +3 -1
  387. package/dist/cjs/theme/palette/colors/purple.js +3 -1
  388. package/dist/cjs/theme/palette/colors/red.js +3 -1
  389. package/dist/cjs/theme/palette/error.js +3 -1
  390. package/dist/cjs/theme/palette/grey.js +3 -1
  391. package/dist/cjs/theme/palette/index.js +10 -8
  392. package/dist/cjs/theme/palette/palette-options.js +3 -1
  393. package/dist/cjs/theme/palette/primary.js +3 -1
  394. package/dist/cjs/theme/palette/secondary.js +3 -1
  395. package/dist/cjs/theme/palette/success.js +3 -1
  396. package/dist/cjs/theme/palette/text.js +3 -1
  397. package/dist/cjs/theme/palette/warning.js +3 -1
  398. package/dist/cjs/theme/theme.js +6 -4
  399. package/dist/cjs/theme/typography.js +3 -1
  400. package/dist/cjs/utils/axis.js +11 -7
  401. package/dist/cjs/utils/chart-actions.js +68 -12
  402. package/dist/cjs/utils/combine-sx.js +3 -1
  403. package/dist/cjs/utils/component-ids.js +3 -1
  404. package/dist/cjs/utils/format.js +16 -8
  405. package/dist/cjs/utils/index.js +15 -13
  406. package/dist/cjs/utils/mathjs.js +4 -2
  407. package/dist/cjs/utils/theme-gen.js +16 -18
  408. package/dist/context/ChartsProvider.d.ts +19 -0
  409. package/dist/context/ChartsProvider.d.ts.map +1 -0
  410. package/dist/context/{ChartsThemeProvider.js → ChartsProvider.js} +24 -6
  411. package/dist/context/ChartsProvider.js.map +1 -0
  412. package/dist/context/SnackbarProvider.d.ts +2 -2
  413. package/dist/context/SnackbarProvider.d.ts.map +1 -1
  414. package/dist/context/SnackbarProvider.js +1 -1
  415. package/dist/context/SnackbarProvider.js.map +1 -1
  416. package/dist/context/TimeZoneProvider.d.ts +1 -1
  417. package/dist/context/TimeZoneProvider.d.ts.map +1 -1
  418. package/dist/context/TimeZoneProvider.js +1 -1
  419. package/dist/context/TimeZoneProvider.js.map +1 -1
  420. package/dist/context/index.d.ts +4 -0
  421. package/dist/context/index.d.ts.map +1 -0
  422. package/dist/context/index.js +17 -0
  423. package/dist/context/index.js.map +1 -0
  424. package/dist/index.d.ts +3 -4
  425. package/dist/index.d.ts.map +1 -1
  426. package/dist/index.js +3 -4
  427. package/dist/index.js.map +1 -1
  428. package/dist/model/graph.d.ts +8 -8
  429. package/dist/model/graph.d.ts.map +1 -1
  430. package/dist/model/graph.js.map +1 -1
  431. package/dist/model/index.js.map +1 -1
  432. package/dist/model/theme.d.ts +1 -1
  433. package/dist/model/theme.d.ts.map +1 -1
  434. package/dist/model/theme.js.map +1 -1
  435. package/dist/model/timeOption.js.map +1 -1
  436. package/dist/test/index.js.map +1 -1
  437. package/dist/test/render.js.map +1 -1
  438. package/dist/test/setup-tests.js.map +1 -1
  439. package/dist/test-utils/index.js.map +1 -1
  440. package/dist/test-utils/theme.d.ts +2 -0
  441. package/dist/test-utils/theme.d.ts.map +1 -1
  442. package/dist/test-utils/theme.js +25 -16
  443. package/dist/test-utils/theme.js.map +1 -1
  444. package/dist/theme/component-overrides/alert.js +4 -4
  445. package/dist/theme/component-overrides/alert.js.map +1 -1
  446. package/dist/theme/component-overrides/paper.js +1 -1
  447. package/dist/theme/component-overrides/paper.js.map +1 -1
  448. package/dist/theme/index.d.ts +1 -0
  449. package/dist/theme/index.d.ts.map +1 -1
  450. package/dist/theme/index.js.map +1 -1
  451. package/dist/theme/palette/background.d.ts.map +1 -1
  452. package/dist/theme/palette/background.js +3 -1
  453. package/dist/theme/palette/background.js.map +1 -1
  454. package/dist/theme/palette/colors/blue.js.map +1 -1
  455. package/dist/theme/palette/colors/common.js.map +1 -1
  456. package/dist/theme/palette/colors/green.js.map +1 -1
  457. package/dist/theme/palette/colors/grey.js.map +1 -1
  458. package/dist/theme/palette/colors/index.js.map +1 -1
  459. package/dist/theme/palette/colors/orange.js.map +1 -1
  460. package/dist/theme/palette/colors/purple.js.map +1 -1
  461. package/dist/theme/palette/colors/red.js.map +1 -1
  462. package/dist/theme/palette/colors/types.d.ts +1 -1
  463. package/dist/theme/palette/colors/types.d.ts.map +1 -1
  464. package/dist/theme/palette/colors/types.js.map +1 -1
  465. package/dist/theme/palette/error.js.map +1 -1
  466. package/dist/theme/palette/grey.js.map +1 -1
  467. package/dist/theme/palette/index.js.map +1 -1
  468. package/dist/theme/palette/palette-options.js.map +1 -1
  469. package/dist/theme/palette/primary.js.map +1 -1
  470. package/dist/theme/palette/secondary.js.map +1 -1
  471. package/dist/theme/palette/success.js.map +1 -1
  472. package/dist/theme/palette/text.js.map +1 -1
  473. package/dist/theme/palette/warning.js.map +1 -1
  474. package/dist/theme/theme.js +1 -1
  475. package/dist/theme/theme.js.map +1 -1
  476. package/dist/theme/types/ThemeExtension.d.js.map +1 -1
  477. package/dist/theme/typography.js.map +1 -1
  478. package/dist/utils/axis.d.ts +4 -4
  479. package/dist/utils/axis.d.ts.map +1 -1
  480. package/dist/utils/axis.js +4 -4
  481. package/dist/utils/axis.js.map +1 -1
  482. package/dist/utils/chart-actions.d.ts +6 -2
  483. package/dist/utils/chart-actions.d.ts.map +1 -1
  484. package/dist/utils/chart-actions.js +51 -7
  485. package/dist/utils/chart-actions.js.map +1 -1
  486. package/dist/utils/combine-sx.js.map +1 -1
  487. package/dist/utils/component-ids.js.map +1 -1
  488. package/dist/utils/format.js.map +1 -1
  489. package/dist/utils/index.js.map +1 -1
  490. package/dist/utils/mathjs.js +1 -1
  491. package/dist/utils/mathjs.js.map +1 -1
  492. package/dist/utils/theme-gen.d.ts +3 -8
  493. package/dist/utils/theme-gen.d.ts.map +1 -1
  494. package/dist/utils/theme-gen.js +11 -15
  495. package/dist/utils/theme-gen.js.map +1 -1
  496. package/package.json +8 -7
  497. package/dist/UnitSelector/UnitSelector.d.ts +0 -9
  498. package/dist/UnitSelector/UnitSelector.d.ts.map +0 -1
  499. package/dist/UnitSelector/UnitSelector.js.map +0 -1
  500. package/dist/UnitSelector/index.d.ts +0 -2
  501. package/dist/UnitSelector/index.d.ts.map +0 -1
  502. package/dist/UnitSelector/index.js.map +0 -1
  503. package/dist/context/ChartsThemeProvider.d.ts +0 -10
  504. package/dist/context/ChartsThemeProvider.d.ts.map +0 -1
  505. package/dist/context/ChartsThemeProvider.js.map +0 -1
@@ -11,9 +11,10 @@
11
11
  // See the License for the specific language governing permissions and
12
12
  // limitations under the License.
13
13
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
14
- import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
14
+ import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
15
15
  import { Box } from '@mui/material';
16
16
  import merge from 'lodash/merge';
17
+ import isEqual from 'lodash/isEqual';
17
18
  import { utcToZonedTime } from 'date-fns-tz';
18
19
  import { getCommonTimeScale } from '@perses-dev/core';
19
20
  import { use } from 'echarts/core';
@@ -21,9 +22,9 @@ import { LineChart as EChartsLineChart, BarChart as EChartsBarChart } from 'echa
21
22
  import { GridComponent, DatasetComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, TitleComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
22
23
  import { CanvasRenderer } from 'echarts/renderers';
23
24
  import { EChart } from '../EChart';
24
- import { DEFAULT_PINNED_CROSSHAIR, PINNED_CROSSHAIR_SERIES_NAME } from '../model/graph';
25
- import { useChartsTheme } from '../context/ChartsThemeProvider';
26
- import { clearHighlightedSeries, enableDataZoom, getFormattedAxisLabel, getPointInGrid, getYAxes, restoreChart } from '../utils';
25
+ import { DEFAULT_PINNED_CROSSHAIR } from '../model';
26
+ import { useChartsContext } from '../context/ChartsProvider';
27
+ import { clearHighlightedSeries, enableDataZoom, getClosestTimestamp, getFormattedAxisLabel, getPointInGrid, getFormattedAxis, restoreChart } from '../utils';
27
28
  import { TimeChartTooltip, DEFAULT_TOOLTIP_CONFIG } from '../TimeSeriesTooltip';
28
29
  import { useTimeZone } from '../context/TimeZoneProvider';
29
30
  use([
@@ -40,17 +41,17 @@ use([
40
41
  TooltipComponent,
41
42
  CanvasRenderer
42
43
  ]);
43
- export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height , data , seriesMapping , timeScale: timeScaleProp , yAxis , unit , grid , isStackedBar =false , tooltipConfig =DEFAULT_TOOLTIP_CONFIG , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride , }, ref) {
44
- var ref1;
45
- const chartsTheme = useChartsTheme();
44
+ export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height, data, seriesMapping, timeScale: timeScaleProp, yAxis, format, grid, isStackedBar = false, tooltipConfig = DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
45
+ var _option_tooltip;
46
+ const { chartsTheme, enablePinning, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } = useChartsContext();
47
+ const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;
46
48
  const chartRef = useRef();
47
49
  const [showTooltip, setShowTooltip] = useState(true);
48
50
  const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState(null);
51
+ const [pinnedCrosshair, setPinnedCrosshair] = useState(null);
49
52
  const [isDragging, setIsDragging] = useState(false);
50
53
  const [startX, setStartX] = useState(0);
51
- const { timeZone } = useTimeZone();
52
- var ref2;
53
- const totalSeries = (ref2 = data === null || data === void 0 ? void 0 : data.length) !== null && ref2 !== void 0 ? ref2 : 0;
54
+ const { timeZone } = useTimeZone();
54
55
  let timeScale;
55
56
  if (timeScaleProp === undefined) {
56
57
  const commonTimeScale = getCommonTimeScale(data);
@@ -75,7 +76,7 @@ export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height ,
75
76
  }
76
77
  useImperativeHandle(ref, ()=>{
77
78
  return {
78
- highlightSeries ({ name }) {
79
+ highlightSeries ({ name }) {
79
80
  if (!chartRef.current) {
80
81
  // when chart undef, do not highlight series when hovering over legend
81
82
  return;
@@ -90,12 +91,10 @@ export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height ,
90
91
  // when chart undef, do not clear highlight series
91
92
  return;
92
93
  }
93
- clearHighlightedSeries(chartRef.current, totalSeries);
94
+ clearHighlightedSeries(chartRef.current);
94
95
  }
95
96
  };
96
- }, [
97
- totalSeries
98
- ]);
97
+ }, []);
99
98
  const handleEvents = useMemo(()=>{
100
99
  return {
101
100
  datazoom: (params)=>{
@@ -126,7 +125,7 @@ export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height ,
126
125
  onDataZoom,
127
126
  setTooltipPinnedCoords
128
127
  ]);
129
- const { noDataOption } = chartsTheme;
128
+ const { noDataOption } = chartsTheme;
130
129
  const option = useMemo(()=>{
131
130
  // The "chart" `noDataVariant` is only used when the `timeSeries` is an
132
131
  // empty array because a `null` value will throw an error.
@@ -154,23 +153,27 @@ export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height ,
154
153
  ]
155
154
  });
156
155
  });
157
- var _rangeMs;
156
+ const updatedSeriesMapping = enablePinning && pinnedCrosshair !== null ? [
157
+ ...seriesMapping,
158
+ pinnedCrosshair
159
+ ] : seriesMapping;
160
+ var _timeScale_rangeMs;
158
161
  const option = {
159
162
  dataset: dataset,
160
- series: seriesMapping,
163
+ series: updatedSeriesMapping,
161
164
  xAxis: {
162
165
  type: 'time',
163
166
  min: isLocalTimeZone ? timeScale.startMs : utcToZonedTime(timeScale.startMs, timeZone),
164
167
  max: isLocalTimeZone ? timeScale.endMs : utcToZonedTime(timeScale.endMs, timeZone),
165
168
  axisLabel: {
166
169
  hideOverlap: true,
167
- formatter: getFormattedAxisLabel((_rangeMs = timeScale.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : 0)
170
+ formatter: getFormattedAxisLabel((_timeScale_rangeMs = timeScale.rangeMs) !== null && _timeScale_rangeMs !== void 0 ? _timeScale_rangeMs : 0)
168
171
  },
169
172
  axisPointer: {
170
173
  snap: false
171
174
  }
172
175
  },
173
- yAxis: getYAxes(yAxis, unit),
176
+ yAxis: getFormattedAxis(yAxis, format),
174
177
  animation: false,
175
178
  tooltip: {
176
179
  show: true,
@@ -202,77 +205,116 @@ export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height ,
202
205
  return __experimentalEChartsOptionsOverride(option);
203
206
  }
204
207
  return option;
205
- // tooltipPinnedCoords is needed in dep array so crosshair stays beside pinned tooltip onClick
206
- // eslint-disable-next-line react-hooks/exhaustive-deps
207
208
  }, [
208
209
  data,
209
210
  seriesMapping,
210
211
  timeScale,
211
212
  yAxis,
212
- unit,
213
+ format,
213
214
  grid,
214
215
  noDataOption,
215
216
  __experimentalEChartsOptionsOverride,
216
217
  noDataVariant,
217
218
  timeZone,
218
- tooltipPinnedCoords,
219
- isStackedBar
219
+ isStackedBar,
220
+ enablePinning,
221
+ pinnedCrosshair
222
+ ]);
223
+ // Update adjacent charts so tooltip is unpinned when current chart is clicked.
224
+ useEffect(()=>{
225
+ // Only allow pinning one tooltip at a time, subsequent tooltip click unpins previous.
226
+ // Multiple tooltips can only be pinned if Ctrl or Cmd key is pressed while clicking.
227
+ const multipleTooltipsPinned = tooltipPinnedCoords !== null && lastTooltipPinnedCoords !== null;
228
+ if (multipleTooltipsPinned) {
229
+ if (!isEqual(lastTooltipPinnedCoords, tooltipPinnedCoords)) {
230
+ setTooltipPinnedCoords(null);
231
+ if (tooltipPinnedCoords !== null && pinnedCrosshair !== null) {
232
+ setPinnedCrosshair(null);
233
+ }
234
+ }
235
+ }
236
+ // tooltipPinnedCoords CANNOT be in dep array or tooltip pinning breaks in the current chart's onClick
237
+ // eslint-disable-next-line react-hooks/exhaustive-deps
238
+ }, [
239
+ lastTooltipPinnedCoords,
240
+ seriesMapping
220
241
  ]);
221
242
  return /*#__PURE__*/ _jsxs(Box, {
222
243
  sx: {
223
244
  height
224
245
  },
246
+ // onContextMenu={(e) => {
247
+ // // TODO: confirm tooltip pinning works correctly on Windows, should e.preventDefault() be added here
248
+ // e.preventDefault(); // Prevent the default behaviour when right clicked
249
+ // }}
225
250
  onClick: (e)=>{
226
- var ref;
251
+ // Allows user to opt-in to multi tooltip pinning when Ctrl or Cmd key held down
252
+ const isControlKeyPressed = e.ctrlKey || e.metaKey;
253
+ if (isControlKeyPressed) {
254
+ e.preventDefault();
255
+ }
227
256
  // Determine where on chart canvas to plot pinned crosshair as markLine.
228
257
  const pointInGrid = getPointInGrid(e.nativeEvent.offsetX, e.nativeEvent.offsetY, chartRef.current);
229
258
  if (pointInGrid === null) {
230
259
  return;
231
260
  }
232
- // Clear previously set pinned crosshair
233
- const isCrosshairPinned = ((ref = seriesMapping[seriesMapping.length - 1]) === null || ref === void 0 ? void 0 : ref.name) === PINNED_CROSSHAIR_SERIES_NAME;
234
- if (tooltipPinnedCoords !== null && isCrosshairPinned) {
235
- seriesMapping.pop();
236
- } else if (seriesMapping.length !== data.length + 1) {
237
- // Only add pinned crosshair line series when there is not one already in seriesMapping.
238
- const pinnedCrosshair = merge(DEFAULT_PINNED_CROSSHAIR, {
239
- markLine: {
240
- data: [
241
- {
242
- xAxis: pointInGrid[0]
243
- }
244
- ]
245
- }
246
- });
247
- seriesMapping.push(pinnedCrosshair);
248
- }
249
261
  // Pin and unpin when clicking on chart canvas but not tooltip text.
250
- if (tooltipConfig.enablePinning && e.target instanceof HTMLCanvasElement) {
262
+ if (isPinningEnabled && e.target instanceof HTMLCanvasElement) {
263
+ // Pin tooltip and update shared charts context to remember these coordinates.
264
+ const pinnedPos = {
265
+ page: {
266
+ x: e.pageX,
267
+ y: e.pageY
268
+ },
269
+ client: {
270
+ x: e.clientX,
271
+ y: e.clientY
272
+ },
273
+ plotCanvas: {
274
+ x: e.nativeEvent.offsetX,
275
+ y: e.nativeEvent.offsetY
276
+ },
277
+ target: e.target
278
+ };
251
279
  setTooltipPinnedCoords((current)=>{
252
280
  if (current === null) {
253
- return {
254
- page: {
255
- x: e.pageX,
256
- y: e.pageY
257
- },
258
- client: {
259
- x: e.clientX,
260
- y: e.clientY
261
- },
262
- plotCanvas: {
263
- x: e.nativeEvent.offsetX,
264
- y: e.nativeEvent.offsetY
265
- },
266
- target: e.target
267
- };
281
+ return pinnedPos;
282
+ } else {
283
+ setPinnedCrosshair(null);
284
+ return null;
285
+ }
286
+ });
287
+ setPinnedCrosshair((current)=>{
288
+ // Only add pinned crosshair line series when there is not one already in seriesMapping.
289
+ if (current === null) {
290
+ var _data_;
291
+ const cursorX = pointInGrid[0];
292
+ // Only need to loop through first dataset source since getCommonTimeScale ensures xAxis timestamps are consistent
293
+ const firstTimeSeriesValues = (_data_ = data[0]) === null || _data_ === void 0 ? void 0 : _data_.values;
294
+ const closestTimestamp = getClosestTimestamp(firstTimeSeriesValues, cursorX);
295
+ // Crosshair snaps to nearest timestamp since cursor may be slightly to left or right
296
+ const pinnedCrosshair = merge({}, DEFAULT_PINNED_CROSSHAIR, {
297
+ markLine: {
298
+ data: [
299
+ {
300
+ xAxis: closestTimestamp
301
+ }
302
+ ]
303
+ }
304
+ });
305
+ return pinnedCrosshair;
268
306
  } else {
307
+ // Clear previously set pinned crosshair
269
308
  return null;
270
309
  }
271
310
  });
311
+ if (!isControlKeyPressed) {
312
+ setLastTooltipPinnedCoords(pinnedPos);
313
+ }
272
314
  }
273
315
  },
274
316
  onMouseDown: (e)=>{
275
- const { clientX } = e;
317
+ const { clientX } = e;
276
318
  setIsDragging(true);
277
319
  setStartX(clientX);
278
320
  },
@@ -281,7 +323,7 @@ export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height ,
281
323
  if (!(e.target instanceof HTMLCanvasElement)) {
282
324
  return;
283
325
  }
284
- const { clientX } = e;
326
+ const { clientX } = e;
285
327
  if (isDragging) {
286
328
  const deltaX = clientX - startX;
287
329
  if (deltaX > 0) {
@@ -300,7 +342,7 @@ export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height ,
300
342
  setShowTooltip(false);
301
343
  }
302
344
  if (chartRef.current !== undefined) {
303
- clearHighlightedSeries(chartRef.current, totalSeries);
345
+ clearHighlightedSeries(chartRef.current);
304
346
  }
305
347
  },
306
348
  onMouseEnter: ()=>{
@@ -321,19 +363,20 @@ export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height ,
321
363
  }
322
364
  },
323
365
  children: [
324
- showTooltip === true && ((ref1 = option.tooltip) === null || ref1 === void 0 ? void 0 : ref1.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ _jsx(TimeChartTooltip, {
366
+ showTooltip === true && ((_option_tooltip = option.tooltip) === null || _option_tooltip === void 0 ? void 0 : _option_tooltip.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ _jsx(TimeChartTooltip, {
325
367
  containerId: chartsTheme.tooltipPortalContainerId,
326
368
  chartRef: chartRef,
327
369
  data: data,
328
370
  seriesMapping: seriesMapping,
329
371
  wrapLabels: tooltipConfig.wrapLabels,
330
- enablePinning: tooltipConfig.enablePinning,
372
+ enablePinning: isPinningEnabled,
331
373
  pinnedPos: tooltipPinnedCoords,
332
- unit: unit,
374
+ format: format,
333
375
  onUnpinClick: ()=>{
376
+ // Unpins tooltip when clicking Pin icon in TooltipHeader.
334
377
  setTooltipPinnedCoords(null);
335
- // Clear previously set pinned crosshair
336
- seriesMapping.pop();
378
+ // Clear previously set pinned crosshair.
379
+ setPinnedCrosshair(null);
337
380
  }
338
381
  }),
339
382
  /*#__PURE__*/ _jsx(EChart, {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/TimeChart/TimeChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { forwardRef, MouseEvent, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport merge from 'lodash/merge';\nimport { DatasetOption } from 'echarts/types/dist/shared';\nimport { utcToZonedTime } from 'date-fns-tz';\nimport { getCommonTimeScale, TimeScale, UnitOptions, TimeSeries } from '@perses-dev/core';\nimport type {\n EChartsCoreOption,\n GridComponentOption,\n LineSeriesOption,\n YAXisComponentOption,\n TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart, BarChart as EChartsBarChart } from 'echarts/charts';\nimport {\n GridComponent,\n DatasetComponent,\n DataZoomComponent,\n MarkAreaComponent,\n MarkLineComponent,\n MarkPointComponent,\n TitleComponent,\n ToolboxComponent,\n TooltipComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport {\n ChartInstanceFocusOpts,\n ChartInstance,\n TimeChartSeriesMapping,\n DEFAULT_PINNED_CROSSHAIR,\n PINNED_CROSSHAIR_SERIES_NAME,\n} from '../model/graph';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport {\n clearHighlightedSeries,\n enableDataZoom,\n getFormattedAxisLabel,\n getPointInGrid,\n getYAxes,\n restoreChart,\n ZoomEventData,\n} from '../utils';\nimport { CursorCoordinates, TimeChartTooltip, TooltipConfig, DEFAULT_TOOLTIP_CONFIG } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\n\nuse([\n EChartsLineChart,\n EChartsBarChart,\n GridComponent,\n DatasetComponent,\n DataZoomComponent,\n MarkAreaComponent,\n MarkLineComponent,\n MarkPointComponent,\n TitleComponent,\n ToolboxComponent,\n TooltipComponent,\n CanvasRenderer,\n]);\n\nexport interface TimeChartProps {\n height: number;\n data: TimeSeries[];\n seriesMapping: TimeChartSeriesMapping;\n timeScale?: TimeScale;\n yAxis?: YAXisComponentOption;\n unit?: UnitOptions;\n grid?: GridComponentOption;\n tooltipConfig?: TooltipConfig;\n noDataVariant?: 'chart' | 'message';\n syncGroup?: string;\n isStackedBar?: boolean;\n onDataZoom?: (e: ZoomEventData) => void;\n onDoubleClick?: (e: MouseEvent) => void;\n __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport const TimeChart = forwardRef<ChartInstance, TimeChartProps>(function TimeChart(\n {\n height,\n data,\n seriesMapping,\n timeScale: timeScaleProp,\n yAxis,\n unit,\n grid,\n isStackedBar = false,\n tooltipConfig = DEFAULT_TOOLTIP_CONFIG,\n noDataVariant = 'message',\n syncGroup,\n onDataZoom,\n onDoubleClick,\n __experimentalEChartsOptionsOverride,\n },\n ref\n) {\n const chartsTheme = useChartsTheme();\n const chartRef = useRef<EChartsInstance>();\n const [showTooltip, setShowTooltip] = useState<boolean>(true);\n const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n const [isDragging, setIsDragging] = useState(false);\n const [startX, setStartX] = useState(0);\n const { timeZone } = useTimeZone();\n const totalSeries = data?.length ?? 0;\n\n let timeScale: TimeScale;\n if (timeScaleProp === undefined) {\n const commonTimeScale = getCommonTimeScale(data);\n if (commonTimeScale === undefined) {\n // set default to past 5 years\n const today = new Date();\n const pastDate = new Date(today);\n pastDate.setFullYear(today.getFullYear() - 5);\n const todayMs = today.getTime();\n const pastDateMs = pastDate.getTime();\n timeScale = { startMs: pastDateMs, endMs: todayMs, stepMs: 1, rangeMs: todayMs - pastDateMs };\n } else {\n timeScale = commonTimeScale;\n }\n } else {\n timeScale = timeScaleProp;\n }\n\n useImperativeHandle(\n ref,\n () => {\n return {\n highlightSeries({ name }: ChartInstanceFocusOpts) {\n if (!chartRef.current) {\n // when chart undef, do not highlight series when hovering over legend\n return;\n }\n\n chartRef.current.dispatchAction({ type: 'highlight', seriesId: name });\n },\n clearHighlightedSeries: () => {\n if (!chartRef.current) {\n // when chart undef, do not clear highlight series\n return;\n }\n clearHighlightedSeries(chartRef.current, totalSeries);\n },\n };\n },\n [totalSeries]\n );\n\n const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n return {\n datazoom: (params) => {\n if (onDataZoom === undefined) {\n setTimeout(() => {\n // workaround so unpin happens after click event\n setTooltipPinnedCoords(null);\n }, 10);\n }\n if (onDataZoom === undefined || params.batch[0] === undefined) return;\n const xAxisStartValue = params.batch[0].startValue;\n const xAxisEndValue = params.batch[0].endValue;\n if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n const zoomEvent: ZoomEventData = {\n start: xAxisStartValue,\n end: xAxisEndValue,\n };\n onDataZoom(zoomEvent);\n }\n },\n finished: () => {\n if (chartRef.current !== undefined) {\n enableDataZoom(chartRef.current);\n }\n },\n };\n }, [onDataZoom, setTooltipPinnedCoords]);\n\n const { noDataOption } = chartsTheme;\n\n const option: EChartsCoreOption = useMemo(() => {\n // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n // empty array because a `null` value will throw an error.\n if (data === null || (data.length === 0 && noDataVariant === 'message')) return noDataOption;\n\n // Utilizes ECharts dataset so raw data is separate from series option style properties\n // https://apache.github.io/echarts-handbook/en/concepts/dataset/\n const dataset: DatasetOption[] = [];\n const isLocalTimeZone = timeZone === 'local';\n data.map((d, index) => {\n const values = d.values.map(([timestamp, value]) => {\n const val: string | number = value === null ? '-' : value; // echarts use '-' to represent null data\n return [isLocalTimeZone ? timestamp : utcToZonedTime(timestamp, timeZone), val];\n });\n dataset.push({ id: index, source: [...values], dimensions: ['time', 'value'] });\n });\n\n const option: EChartsCoreOption = {\n dataset: dataset,\n series: seriesMapping,\n xAxis: {\n type: 'time',\n min: isLocalTimeZone ? timeScale.startMs : utcToZonedTime(timeScale.startMs, timeZone),\n max: isLocalTimeZone ? timeScale.endMs : utcToZonedTime(timeScale.endMs, timeZone),\n axisLabel: {\n hideOverlap: true,\n formatter: getFormattedAxisLabel(timeScale.rangeMs ?? 0),\n },\n axisPointer: {\n snap: false, // important so shared crosshair does not lag\n },\n },\n yAxis: getYAxes(yAxis, unit),\n animation: false,\n tooltip: {\n show: true,\n // ECharts tooltip content hidden by default since we use custom tooltip instead.\n // Stacked bar uses ECharts tooltip so subgroup data shows correctly.\n showContent: isStackedBar,\n trigger: isStackedBar ? 'item' : 'axis',\n appendToBody: true,\n },\n // https://echarts.apache.org/en/option.html#axisPointer\n axisPointer: {\n type: 'line',\n z: 0, // ensure point symbol shows on top of dashed line\n triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n triggerTooltip: false,\n snap: false, // xAxis.axisPointer.snap takes priority\n },\n toolbox: {\n feature: {\n dataZoom: {\n icon: null, // https://stackoverflow.com/a/67684076/17575201\n yAxisIndex: 'none',\n },\n },\n },\n grid,\n };\n\n if (__experimentalEChartsOptionsOverride) {\n return __experimentalEChartsOptionsOverride(option);\n }\n\n return option;\n // tooltipPinnedCoords is needed in dep array so crosshair stays beside pinned tooltip onClick\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n data,\n seriesMapping,\n timeScale,\n yAxis,\n unit,\n grid,\n noDataOption,\n __experimentalEChartsOptionsOverride,\n noDataVariant,\n timeZone,\n tooltipPinnedCoords,\n isStackedBar,\n ]);\n\n return (\n <Box\n sx={{ height }}\n onClick={(e) => {\n // Determine where on chart canvas to plot pinned crosshair as markLine.\n const pointInGrid = getPointInGrid(e.nativeEvent.offsetX, e.nativeEvent.offsetY, chartRef.current);\n if (pointInGrid === null) {\n return;\n }\n\n // Clear previously set pinned crosshair\n const isCrosshairPinned = seriesMapping[seriesMapping.length - 1]?.name === PINNED_CROSSHAIR_SERIES_NAME;\n if (tooltipPinnedCoords !== null && isCrosshairPinned) {\n seriesMapping.pop();\n } else if (seriesMapping.length !== data.length + 1) {\n // Only add pinned crosshair line series when there is not one already in seriesMapping.\n const pinnedCrosshair = merge(DEFAULT_PINNED_CROSSHAIR, {\n markLine: {\n data: [\n {\n xAxis: pointInGrid[0],\n },\n ],\n },\n });\n seriesMapping.push(pinnedCrosshair);\n }\n\n // Pin and unpin when clicking on chart canvas but not tooltip text.\n if (tooltipConfig.enablePinning && e.target instanceof HTMLCanvasElement) {\n setTooltipPinnedCoords((current) => {\n if (current === null) {\n return {\n page: {\n x: e.pageX,\n y: e.pageY,\n },\n client: {\n x: e.clientX,\n y: e.clientY,\n },\n plotCanvas: {\n x: e.nativeEvent.offsetX,\n y: e.nativeEvent.offsetY,\n },\n target: e.target,\n };\n } else {\n return null;\n }\n });\n }\n }}\n onMouseDown={(e) => {\n const { clientX } = e;\n setIsDragging(true);\n setStartX(clientX);\n }}\n onMouseMove={(e) => {\n // Allow clicking inside tooltip to copy labels.\n if (!(e.target instanceof HTMLCanvasElement)) {\n return;\n }\n const { clientX } = e;\n if (isDragging) {\n const deltaX = clientX - startX;\n if (deltaX > 0) {\n // Hide tooltip when user drags to zoom.\n setShowTooltip(false);\n }\n }\n }}\n onMouseUp={() => {\n setIsDragging(false);\n setStartX(0);\n setShowTooltip(true);\n }}\n onMouseLeave={() => {\n if (tooltipPinnedCoords === null) {\n setShowTooltip(false);\n }\n if (chartRef.current !== undefined) {\n clearHighlightedSeries(chartRef.current, totalSeries);\n }\n }}\n onMouseEnter={() => {\n setShowTooltip(true);\n if (chartRef.current !== undefined) {\n enableDataZoom(chartRef.current);\n }\n }}\n onDoubleClick={(e) => {\n setTooltipPinnedCoords(null);\n // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n if (onDoubleClick === undefined) {\n if (chartRef.current !== undefined) {\n restoreChart(chartRef.current);\n }\n } else {\n onDoubleClick(e);\n }\n }}\n >\n {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n {showTooltip === true &&\n (option.tooltip as TooltipComponentOption)?.showContent === false &&\n tooltipConfig.hidden !== true && (\n <TimeChartTooltip\n containerId={chartsTheme.tooltipPortalContainerId}\n chartRef={chartRef}\n data={data}\n seriesMapping={seriesMapping}\n wrapLabels={tooltipConfig.wrapLabels}\n enablePinning={tooltipConfig.enablePinning}\n pinnedPos={tooltipPinnedCoords}\n unit={unit}\n onUnpinClick={() => {\n setTooltipPinnedCoords(null);\n // Clear previously set pinned crosshair\n seriesMapping.pop();\n }}\n />\n )}\n <EChart\n sx={{\n width: '100%',\n height: '100%',\n }}\n option={option}\n theme={chartsTheme.echartsTheme}\n onEvents={handleEvents}\n _instance={chartRef}\n syncGroup={syncGroup}\n />\n </Box>\n );\n});\n"],"names":["forwardRef","useImperativeHandle","useMemo","useRef","useState","Box","merge","utcToZonedTime","getCommonTimeScale","use","LineChart","EChartsLineChart","BarChart","EChartsBarChart","GridComponent","DatasetComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","CanvasRenderer","EChart","DEFAULT_PINNED_CROSSHAIR","PINNED_CROSSHAIR_SERIES_NAME","useChartsTheme","clearHighlightedSeries","enableDataZoom","getFormattedAxisLabel","getPointInGrid","getYAxes","restoreChart","TimeChartTooltip","DEFAULT_TOOLTIP_CONFIG","useTimeZone","TimeChart","height","data","seriesMapping","timeScale","timeScaleProp","yAxis","unit","grid","isStackedBar","tooltipConfig","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","option","chartsTheme","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","isDragging","setIsDragging","startX","setStartX","timeZone","totalSeries","length","undefined","commonTimeScale","today","Date","pastDate","setFullYear","getFullYear","todayMs","getTime","pastDateMs","startMs","endMs","stepMs","rangeMs","highlightSeries","name","current","dispatchAction","type","seriesId","handleEvents","datazoom","params","setTimeout","batch","xAxisStartValue","startValue","xAxisEndValue","endValue","zoomEvent","start","end","finished","noDataOption","dataset","isLocalTimeZone","map","d","index","values","timestamp","value","val","push","id","source","dimensions","series","xAxis","min","max","axisLabel","hideOverlap","formatter","axisPointer","snap","animation","tooltip","show","showContent","trigger","appendToBody","z","triggerEmphasis","triggerTooltip","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","e","pointInGrid","nativeEvent","offsetX","offsetY","isCrosshairPinned","pop","pinnedCrosshair","markLine","enablePinning","target","HTMLCanvasElement","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","containerId","tooltipPortalContainerId","wrapLabels","pinnedPos","onUnpinClick","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}
1
+ {"version":3,"sources":["../../src/TimeChart/TimeChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { forwardRef, MouseEvent, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport merge from 'lodash/merge';\nimport isEqual from 'lodash/isEqual';\nimport { DatasetOption } from 'echarts/types/dist/shared';\nimport { utcToZonedTime } from 'date-fns-tz';\nimport { getCommonTimeScale, TimeScale, FormatOptions, TimeSeries } from '@perses-dev/core';\nimport type {\n EChartsCoreOption,\n GridComponentOption,\n LineSeriesOption,\n YAXisComponentOption,\n TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart, BarChart as EChartsBarChart } from 'echarts/charts';\nimport {\n GridComponent,\n DatasetComponent,\n DataZoomComponent,\n MarkAreaComponent,\n MarkLineComponent,\n MarkPointComponent,\n TitleComponent,\n ToolboxComponent,\n TooltipComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { ChartInstanceFocusOpts, ChartInstance, TimeChartSeriesMapping, DEFAULT_PINNED_CROSSHAIR } from '../model';\nimport { useChartsContext } from '../context/ChartsProvider';\nimport {\n clearHighlightedSeries,\n enableDataZoom,\n getClosestTimestamp,\n getFormattedAxisLabel,\n getPointInGrid,\n getFormattedAxis,\n restoreChart,\n ZoomEventData,\n} from '../utils';\nimport { CursorCoordinates, TimeChartTooltip, TooltipConfig, DEFAULT_TOOLTIP_CONFIG } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\n\nuse([\n EChartsLineChart,\n EChartsBarChart,\n GridComponent,\n DatasetComponent,\n DataZoomComponent,\n MarkAreaComponent,\n MarkLineComponent,\n MarkPointComponent,\n TitleComponent,\n ToolboxComponent,\n TooltipComponent,\n CanvasRenderer,\n]);\n\nexport interface TimeChartProps {\n height: number;\n data: TimeSeries[];\n seriesMapping: TimeChartSeriesMapping;\n timeScale?: TimeScale;\n yAxis?: YAXisComponentOption;\n format?: FormatOptions;\n grid?: GridComponentOption;\n tooltipConfig?: TooltipConfig;\n noDataVariant?: 'chart' | 'message';\n syncGroup?: string;\n isStackedBar?: boolean;\n onDataZoom?: (e: ZoomEventData) => void;\n onDoubleClick?: (e: MouseEvent) => void;\n __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport const TimeChart = forwardRef<ChartInstance, TimeChartProps>(function TimeChart(\n {\n height,\n data,\n seriesMapping,\n timeScale: timeScaleProp,\n yAxis,\n format,\n grid,\n isStackedBar = false,\n tooltipConfig = DEFAULT_TOOLTIP_CONFIG,\n noDataVariant = 'message',\n syncGroup,\n onDataZoom,\n onDoubleClick,\n __experimentalEChartsOptionsOverride,\n },\n ref\n) {\n const { chartsTheme, enablePinning, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } = useChartsContext();\n const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;\n const chartRef = useRef<EChartsInstance>();\n const [showTooltip, setShowTooltip] = useState<boolean>(true);\n const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n const [pinnedCrosshair, setPinnedCrosshair] = useState<LineSeriesOption | null>(null);\n const [isDragging, setIsDragging] = useState(false);\n const [startX, setStartX] = useState(0);\n const { timeZone } = useTimeZone();\n let timeScale: TimeScale;\n if (timeScaleProp === undefined) {\n const commonTimeScale = getCommonTimeScale(data);\n if (commonTimeScale === undefined) {\n // set default to past 5 years\n const today = new Date();\n const pastDate = new Date(today);\n pastDate.setFullYear(today.getFullYear() - 5);\n const todayMs = today.getTime();\n const pastDateMs = pastDate.getTime();\n timeScale = { startMs: pastDateMs, endMs: todayMs, stepMs: 1, rangeMs: todayMs - pastDateMs };\n } else {\n timeScale = commonTimeScale;\n }\n } else {\n timeScale = timeScaleProp;\n }\n\n useImperativeHandle(\n ref,\n () => {\n return {\n highlightSeries({ name }: ChartInstanceFocusOpts) {\n if (!chartRef.current) {\n // when chart undef, do not highlight series when hovering over legend\n return;\n }\n\n chartRef.current.dispatchAction({ type: 'highlight', seriesId: name });\n },\n clearHighlightedSeries: () => {\n if (!chartRef.current) {\n // when chart undef, do not clear highlight series\n return;\n }\n clearHighlightedSeries(chartRef.current);\n },\n };\n },\n []\n );\n\n const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n return {\n datazoom: (params) => {\n if (onDataZoom === undefined) {\n setTimeout(() => {\n // workaround so unpin happens after click event\n setTooltipPinnedCoords(null);\n }, 10);\n }\n if (onDataZoom === undefined || params.batch[0] === undefined) return;\n const xAxisStartValue = params.batch[0].startValue;\n const xAxisEndValue = params.batch[0].endValue;\n if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n const zoomEvent: ZoomEventData = {\n start: xAxisStartValue,\n end: xAxisEndValue,\n };\n onDataZoom(zoomEvent);\n }\n },\n finished: () => {\n if (chartRef.current !== undefined) {\n enableDataZoom(chartRef.current);\n }\n },\n };\n }, [onDataZoom, setTooltipPinnedCoords]);\n\n const { noDataOption } = chartsTheme;\n\n const option: EChartsCoreOption = useMemo(() => {\n // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n // empty array because a `null` value will throw an error.\n if (data === null || (data.length === 0 && noDataVariant === 'message')) return noDataOption;\n\n // Utilizes ECharts dataset so raw data is separate from series option style properties\n // https://apache.github.io/echarts-handbook/en/concepts/dataset/\n const dataset: DatasetOption[] = [];\n const isLocalTimeZone = timeZone === 'local';\n data.map((d, index) => {\n const values = d.values.map(([timestamp, value]) => {\n const val: string | number = value === null ? '-' : value; // echarts use '-' to represent null data\n return [isLocalTimeZone ? timestamp : utcToZonedTime(timestamp, timeZone), val];\n });\n dataset.push({ id: index, source: [...values], dimensions: ['time', 'value'] });\n });\n\n const updatedSeriesMapping =\n enablePinning && pinnedCrosshair !== null ? [...seriesMapping, pinnedCrosshair] : seriesMapping;\n\n const option: EChartsCoreOption = {\n dataset: dataset,\n series: updatedSeriesMapping,\n xAxis: {\n type: 'time',\n min: isLocalTimeZone ? timeScale.startMs : utcToZonedTime(timeScale.startMs, timeZone),\n max: isLocalTimeZone ? timeScale.endMs : utcToZonedTime(timeScale.endMs, timeZone),\n axisLabel: {\n hideOverlap: true,\n formatter: getFormattedAxisLabel(timeScale.rangeMs ?? 0),\n },\n axisPointer: {\n snap: false, // important so shared crosshair does not lag\n },\n },\n yAxis: getFormattedAxis(yAxis, format),\n animation: false,\n tooltip: {\n show: true,\n // ECharts tooltip content hidden by default since we use custom tooltip instead.\n // Stacked bar uses ECharts tooltip so subgroup data shows correctly.\n showContent: isStackedBar,\n trigger: isStackedBar ? 'item' : 'axis',\n appendToBody: true,\n },\n // https://echarts.apache.org/en/option.html#axisPointer\n axisPointer: {\n type: 'line',\n z: 0, // ensure point symbol shows on top of dashed line\n triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n triggerTooltip: false,\n snap: false, // xAxis.axisPointer.snap takes priority\n },\n toolbox: {\n feature: {\n dataZoom: {\n icon: null, // https://stackoverflow.com/a/67684076/17575201\n yAxisIndex: 'none',\n },\n },\n },\n grid,\n };\n\n if (__experimentalEChartsOptionsOverride) {\n return __experimentalEChartsOptionsOverride(option);\n }\n\n return option;\n }, [\n data,\n seriesMapping,\n timeScale,\n yAxis,\n format,\n grid,\n noDataOption,\n __experimentalEChartsOptionsOverride,\n noDataVariant,\n timeZone,\n isStackedBar,\n enablePinning,\n pinnedCrosshair,\n ]);\n\n // Update adjacent charts so tooltip is unpinned when current chart is clicked.\n useEffect(() => {\n // Only allow pinning one tooltip at a time, subsequent tooltip click unpins previous.\n // Multiple tooltips can only be pinned if Ctrl or Cmd key is pressed while clicking.\n const multipleTooltipsPinned = tooltipPinnedCoords !== null && lastTooltipPinnedCoords !== null;\n if (multipleTooltipsPinned) {\n if (!isEqual(lastTooltipPinnedCoords, tooltipPinnedCoords)) {\n setTooltipPinnedCoords(null);\n if (tooltipPinnedCoords !== null && pinnedCrosshair !== null) {\n setPinnedCrosshair(null);\n }\n }\n }\n // tooltipPinnedCoords CANNOT be in dep array or tooltip pinning breaks in the current chart's onClick\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [lastTooltipPinnedCoords, seriesMapping]);\n\n return (\n <Box\n sx={{ height }}\n // onContextMenu={(e) => {\n // // TODO: confirm tooltip pinning works correctly on Windows, should e.preventDefault() be added here\n // e.preventDefault(); // Prevent the default behaviour when right clicked\n // }}\n onClick={(e) => {\n // Allows user to opt-in to multi tooltip pinning when Ctrl or Cmd key held down\n const isControlKeyPressed = e.ctrlKey || e.metaKey;\n if (isControlKeyPressed) {\n e.preventDefault();\n }\n\n // Determine where on chart canvas to plot pinned crosshair as markLine.\n const pointInGrid = getPointInGrid(e.nativeEvent.offsetX, e.nativeEvent.offsetY, chartRef.current);\n if (pointInGrid === null) {\n return;\n }\n\n // Pin and unpin when clicking on chart canvas but not tooltip text.\n if (isPinningEnabled && e.target instanceof HTMLCanvasElement) {\n // Pin tooltip and update shared charts context to remember these coordinates.\n const pinnedPos: CursorCoordinates = {\n page: {\n x: e.pageX,\n y: e.pageY,\n },\n client: {\n x: e.clientX,\n y: e.clientY,\n },\n plotCanvas: {\n x: e.nativeEvent.offsetX,\n y: e.nativeEvent.offsetY,\n },\n target: e.target,\n };\n\n setTooltipPinnedCoords((current) => {\n if (current === null) {\n return pinnedPos;\n } else {\n setPinnedCrosshair(null);\n return null;\n }\n });\n\n setPinnedCrosshair((current) => {\n // Only add pinned crosshair line series when there is not one already in seriesMapping.\n if (current === null) {\n const cursorX = pointInGrid[0];\n\n // Only need to loop through first dataset source since getCommonTimeScale ensures xAxis timestamps are consistent\n const firstTimeSeriesValues = data[0]?.values;\n const closestTimestamp = getClosestTimestamp(firstTimeSeriesValues, cursorX);\n\n // Crosshair snaps to nearest timestamp since cursor may be slightly to left or right\n const pinnedCrosshair = merge({}, DEFAULT_PINNED_CROSSHAIR, {\n markLine: {\n data: [\n {\n xAxis: closestTimestamp,\n },\n ],\n },\n } as LineSeriesOption);\n return pinnedCrosshair;\n } else {\n // Clear previously set pinned crosshair\n return null;\n }\n });\n\n if (!isControlKeyPressed) {\n setLastTooltipPinnedCoords(pinnedPos);\n }\n }\n }}\n onMouseDown={(e) => {\n const { clientX } = e;\n setIsDragging(true);\n setStartX(clientX);\n }}\n onMouseMove={(e) => {\n // Allow clicking inside tooltip to copy labels.\n if (!(e.target instanceof HTMLCanvasElement)) {\n return;\n }\n const { clientX } = e;\n if (isDragging) {\n const deltaX = clientX - startX;\n if (deltaX > 0) {\n // Hide tooltip when user drags to zoom.\n setShowTooltip(false);\n }\n }\n }}\n onMouseUp={() => {\n setIsDragging(false);\n setStartX(0);\n setShowTooltip(true);\n }}\n onMouseLeave={() => {\n if (tooltipPinnedCoords === null) {\n setShowTooltip(false);\n }\n if (chartRef.current !== undefined) {\n clearHighlightedSeries(chartRef.current);\n }\n }}\n onMouseEnter={() => {\n setShowTooltip(true);\n if (chartRef.current !== undefined) {\n enableDataZoom(chartRef.current);\n }\n }}\n onDoubleClick={(e) => {\n setTooltipPinnedCoords(null);\n // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n if (onDoubleClick === undefined) {\n if (chartRef.current !== undefined) {\n restoreChart(chartRef.current);\n }\n } else {\n onDoubleClick(e);\n }\n }}\n >\n {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n {showTooltip === true &&\n (option.tooltip as TooltipComponentOption)?.showContent === false &&\n tooltipConfig.hidden !== true && (\n <TimeChartTooltip\n containerId={chartsTheme.tooltipPortalContainerId}\n chartRef={chartRef}\n data={data}\n seriesMapping={seriesMapping}\n wrapLabels={tooltipConfig.wrapLabels}\n enablePinning={isPinningEnabled}\n pinnedPos={tooltipPinnedCoords}\n format={format}\n onUnpinClick={() => {\n // Unpins tooltip when clicking Pin icon in TooltipHeader.\n setTooltipPinnedCoords(null);\n // Clear previously set pinned crosshair.\n setPinnedCrosshair(null);\n }}\n />\n )}\n <EChart\n sx={{\n width: '100%',\n height: '100%',\n }}\n option={option}\n theme={chartsTheme.echartsTheme}\n onEvents={handleEvents}\n _instance={chartRef}\n syncGroup={syncGroup}\n />\n </Box>\n );\n});\n"],"names":["forwardRef","useEffect","useImperativeHandle","useMemo","useRef","useState","Box","merge","isEqual","utcToZonedTime","getCommonTimeScale","use","LineChart","EChartsLineChart","BarChart","EChartsBarChart","GridComponent","DatasetComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","CanvasRenderer","EChart","DEFAULT_PINNED_CROSSHAIR","useChartsContext","clearHighlightedSeries","enableDataZoom","getClosestTimestamp","getFormattedAxisLabel","getPointInGrid","getFormattedAxis","restoreChart","TimeChartTooltip","DEFAULT_TOOLTIP_CONFIG","useTimeZone","TimeChart","height","data","seriesMapping","timeScale","timeScaleProp","yAxis","format","grid","isStackedBar","tooltipConfig","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","option","chartsTheme","enablePinning","lastTooltipPinnedCoords","setLastTooltipPinnedCoords","isPinningEnabled","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","pinnedCrosshair","setPinnedCrosshair","isDragging","setIsDragging","startX","setStartX","timeZone","undefined","commonTimeScale","today","Date","pastDate","setFullYear","getFullYear","todayMs","getTime","pastDateMs","startMs","endMs","stepMs","rangeMs","highlightSeries","name","current","dispatchAction","type","seriesId","handleEvents","datazoom","params","setTimeout","batch","xAxisStartValue","startValue","xAxisEndValue","endValue","zoomEvent","start","end","finished","noDataOption","length","dataset","isLocalTimeZone","map","d","index","values","timestamp","value","val","push","id","source","dimensions","updatedSeriesMapping","series","xAxis","min","max","axisLabel","hideOverlap","formatter","axisPointer","snap","animation","tooltip","show","showContent","trigger","appendToBody","z","triggerEmphasis","triggerTooltip","toolbox","feature","dataZoom","icon","yAxisIndex","multipleTooltipsPinned","sx","onClick","e","isControlKeyPressed","ctrlKey","metaKey","preventDefault","pointInGrid","nativeEvent","offsetX","offsetY","target","HTMLCanvasElement","pinnedPos","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","cursorX","firstTimeSeriesValues","closestTimestamp","markLine","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","containerId","tooltipPortalContainerId","wrapLabels","onUnpinClick","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/TimeChart/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './TimeChart';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,aAAa,CAAC"}
1
+ {"version":3,"sources":["../../src/TimeChart/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './TimeChart';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,cAAc"}
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { UnitOptions } from '@perses-dev/core';
2
+ import { FormatOptions } from '@perses-dev/core';
3
3
  import { ECharts as EChartsInstance } from 'echarts/core';
4
4
  import { EChartsDataFormat } from '../model';
5
5
  import { CursorCoordinates } from './tooltip-model';
@@ -8,7 +8,7 @@ export interface TimeSeriesTooltipProps {
8
8
  chartData: EChartsDataFormat;
9
9
  enablePinning?: boolean;
10
10
  wrapLabels?: boolean;
11
- unit?: UnitOptions;
11
+ format?: FormatOptions;
12
12
  onUnpinClick?: () => void;
13
13
  pinnedPos: CursorCoordinates | null;
14
14
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"LineChartTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/LineChartTooltip.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAI7C,OAAO,EACL,iBAAiB,EAOlB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,8DA4F3B,CAAC"}
1
+ {"version":3,"file":"LineChartTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/LineChartTooltip.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAI7C,OAAO,EACL,iBAAiB,EAOlB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,8DA6F3B,CAAC"}
@@ -19,25 +19,25 @@ import { TooltipHeader } from './TooltipHeader';
19
19
  import { legacyGetNearbySeriesData } from './nearby-series';
20
20
  import { FALLBACK_CHART_WIDTH, TOOLTIP_BG_COLOR_FALLBACK, TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, TOOLTIP_MIN_WIDTH, useMousePosition } from './tooltip-model';
21
21
  import { assembleTransform } from './utils';
22
- export const LineChartTooltip = /*#__PURE__*/ memo(function LineChartTooltip({ chartRef , chartData , enablePinning =true , wrapLabels , unit , onUnpinClick , pinnedPos , containerId }) {
22
+ export const LineChartTooltip = /*#__PURE__*/ memo(function LineChartTooltip({ chartRef, chartData, enablePinning = true, wrapLabels, format, onUnpinClick, pinnedPos, containerId }) {
23
23
  const [showAllSeries, setShowAllSeries] = useState(false);
24
24
  const mousePos = useMousePosition();
25
- const { height , width , ref: tooltipRef } = useResizeObserver();
26
- const transform = useRef('');
25
+ const { height, width, ref: tooltipRef } = useResizeObserver();
26
+ const transform = useRef();
27
27
  const isTooltipPinned = pinnedPos !== null && enablePinning;
28
28
  if (mousePos === null || mousePos.target === null) return null;
29
29
  // Ensure user is hovering over a chart before checking for nearby series.
30
30
  if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
31
31
  const chart = chartRef.current;
32
- var ref;
33
- const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
32
+ var _chart_getWidth;
33
+ const chartWidth = (_chart_getWidth = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && _chart_getWidth !== void 0 ? _chart_getWidth : FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
34
34
  // Get series nearby the cursor and pass into tooltip content children.
35
35
  const nearbySeries = legacyGetNearbySeriesData({
36
36
  mousePos,
37
37
  chartData,
38
38
  pinnedPos,
39
39
  chart,
40
- unit,
40
+ format,
41
41
  showAllSeries
42
42
  });
43
43
  if (nearbySeries.length === 0) {
@@ -50,13 +50,13 @@ export const LineChartTooltip = /*#__PURE__*/ memo(function LineChartTooltip({ c
50
50
  if (!isTooltipPinned) {
51
51
  transform.current = assembleTransform(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0, containerElement);
52
52
  }
53
- var ref1;
54
53
  return /*#__PURE__*/ _jsx(Portal, {
55
54
  container: containerElement,
56
55
  children: /*#__PURE__*/ _jsx(Box, {
57
56
  ref: tooltipRef,
58
57
  sx: (theme)=>{
59
- var ref;
58
+ var _theme_palette_designSystem;
59
+ var _theme_palette_designSystem_grey_;
60
60
  return {
61
61
  minWidth: TOOLTIP_MIN_WIDTH,
62
62
  maxWidth: TOOLTIP_MAX_WIDTH,
@@ -65,7 +65,7 @@ export const LineChartTooltip = /*#__PURE__*/ memo(function LineChartTooltip({ c
65
65
  position: 'absolute',
66
66
  top: 0,
67
67
  left: 0,
68
- backgroundColor: (ref1 = (ref = theme.palette.designSystem) === null || ref === void 0 ? void 0 : ref.grey[800]) !== null && ref1 !== void 0 ? ref1 : TOOLTIP_BG_COLOR_FALLBACK,
68
+ backgroundColor: (_theme_palette_designSystem_grey_ = (_theme_palette_designSystem = theme.palette.designSystem) === null || _theme_palette_designSystem === void 0 ? void 0 : _theme_palette_designSystem.grey[800]) !== null && _theme_palette_designSystem_grey_ !== void 0 ? _theme_palette_designSystem_grey_ : TOOLTIP_BG_COLOR_FALLBACK,
69
69
  borderRadius: '6px',
70
70
  color: '#fff',
71
71
  fontSize: '11px',
@@ -81,7 +81,8 @@ export const LineChartTooltip = /*#__PURE__*/ memo(function LineChartTooltip({ c
81
81
  };
82
82
  },
83
83
  style: {
84
- transform: transform.current
84
+ transform: transform.current,
85
+ display: transform.current ? 'block' : 'none'
85
86
  },
86
87
  children: /*#__PURE__*/ _jsxs(Stack, {
87
88
  spacing: 0.5,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/TimeSeriesTooltip/LineChartTooltip.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Portal, Stack } from '@mui/material';\nimport { UnitOptions } from '@perses-dev/core';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { memo, useRef, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { EChartsDataFormat } from '../model';\nimport { TooltipContent } from './TooltipContent';\nimport { TooltipHeader } from './TooltipHeader';\nimport { legacyGetNearbySeriesData } from './nearby-series';\nimport {\n CursorCoordinates,\n FALLBACK_CHART_WIDTH,\n TOOLTIP_BG_COLOR_FALLBACK,\n TOOLTIP_MAX_HEIGHT,\n TOOLTIP_MAX_WIDTH,\n TOOLTIP_MIN_WIDTH,\n useMousePosition,\n} from './tooltip-model';\nimport { assembleTransform } from './utils';\n\nexport interface TimeSeriesTooltipProps {\n chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n chartData: EChartsDataFormat;\n enablePinning?: boolean;\n wrapLabels?: boolean;\n unit?: UnitOptions;\n onUnpinClick?: () => void;\n pinnedPos: CursorCoordinates | null;\n /**\n * The id of the container that will have the chart tooltip appended to it.\n * By default, the chart tooltip is attached to document.body.\n */\n containerId?: string;\n}\n\nexport const LineChartTooltip = memo(function LineChartTooltip({\n chartRef,\n chartData,\n enablePinning = true,\n wrapLabels,\n unit,\n onUnpinClick,\n pinnedPos,\n containerId,\n}: TimeSeriesTooltipProps) {\n const [showAllSeries, setShowAllSeries] = useState(false);\n const mousePos = useMousePosition();\n const { height, width, ref: tooltipRef } = useResizeObserver();\n const transform = useRef('');\n\n const isTooltipPinned = pinnedPos !== null && enablePinning;\n\n if (mousePos === null || mousePos.target === null) return null;\n\n // Ensure user is hovering over a chart before checking for nearby series.\n if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n const chart = chartRef.current;\n const chartWidth = chart?.getWidth() ?? FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.\n\n // Get series nearby the cursor and pass into tooltip content children.\n const nearbySeries = legacyGetNearbySeriesData({\n mousePos,\n chartData,\n pinnedPos,\n chart,\n unit,\n showAllSeries,\n });\n if (nearbySeries.length === 0) {\n return null;\n }\n\n const totalSeries = chartData.timeSeries.length;\n\n const containerElement = containerId ? document.querySelector(containerId) : undefined;\n // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off\n const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n if (!isTooltipPinned) {\n transform.current = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0, containerElement);\n }\n\n return (\n <Portal container={containerElement}>\n <Box\n ref={tooltipRef}\n sx={(theme) => ({\n minWidth: TOOLTIP_MIN_WIDTH,\n maxWidth: TOOLTIP_MAX_WIDTH,\n maxHeight: maxHeight ?? TOOLTIP_MAX_HEIGHT,\n padding: 0,\n position: 'absolute',\n top: 0,\n left: 0,\n backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n borderRadius: '6px',\n color: '#fff',\n fontSize: '11px',\n visibility: 'visible',\n opacity: 1,\n transition: 'all 0.1s ease-out',\n // Ensure pinned tooltip shows behind edit panel drawer and sticky header\n zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,\n overflow: 'hidden',\n '&:hover': {\n overflowY: 'auto',\n },\n })}\n style={{\n transform: transform.current,\n }}\n >\n <Stack spacing={0.5}>\n <TooltipHeader\n nearbySeries={nearbySeries}\n totalSeries={totalSeries}\n enablePinning={enablePinning}\n isTooltipPinned={isTooltipPinned}\n showAllSeries={showAllSeries}\n onShowAllClick={(checked) => setShowAllSeries(checked)}\n onUnpinClick={onUnpinClick}\n />\n <TooltipContent series={nearbySeries} wrapLabels={wrapLabels} />\n </Stack>\n </Box>\n </Portal>\n );\n});\n"],"names":["Box","Portal","Stack","memo","useRef","useState","useResizeObserver","TooltipContent","TooltipHeader","legacyGetNearbySeriesData","FALLBACK_CHART_WIDTH","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","TOOLTIP_MIN_WIDTH","useMousePosition","assembleTransform","LineChartTooltip","chartRef","chartData","enablePinning","wrapLabels","unit","onUnpinClick","pinnedPos","containerId","showAllSeries","setShowAllSeries","mousePos","height","width","ref","tooltipRef","transform","isTooltipPinned","target","tagName","chart","current","chartWidth","getWidth","nearbySeries","length","totalSeries","timeSeries","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","theme","container","sx","minWidth","maxWidth","padding","position","top","left","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","spacing","onShowAllClick","checked","series"],"mappings":"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"}
1
+ {"version":3,"sources":["../../src/TimeSeriesTooltip/LineChartTooltip.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Portal, Stack } from '@mui/material';\nimport { FormatOptions } from '@perses-dev/core';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { memo, useRef, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { EChartsDataFormat } from '../model';\nimport { TooltipContent } from './TooltipContent';\nimport { TooltipHeader } from './TooltipHeader';\nimport { legacyGetNearbySeriesData } from './nearby-series';\nimport {\n CursorCoordinates,\n FALLBACK_CHART_WIDTH,\n TOOLTIP_BG_COLOR_FALLBACK,\n TOOLTIP_MAX_HEIGHT,\n TOOLTIP_MAX_WIDTH,\n TOOLTIP_MIN_WIDTH,\n useMousePosition,\n} from './tooltip-model';\nimport { assembleTransform } from './utils';\n\nexport interface TimeSeriesTooltipProps {\n chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n chartData: EChartsDataFormat;\n enablePinning?: boolean;\n wrapLabels?: boolean;\n format?: FormatOptions;\n onUnpinClick?: () => void;\n pinnedPos: CursorCoordinates | null;\n /**\n * The id of the container that will have the chart tooltip appended to it.\n * By default, the chart tooltip is attached to document.body.\n */\n containerId?: string;\n}\n\nexport const LineChartTooltip = memo(function LineChartTooltip({\n chartRef,\n chartData,\n enablePinning = true,\n wrapLabels,\n format,\n onUnpinClick,\n pinnedPos,\n containerId,\n}: TimeSeriesTooltipProps) {\n const [showAllSeries, setShowAllSeries] = useState(false);\n const mousePos = useMousePosition();\n const { height, width, ref: tooltipRef } = useResizeObserver();\n const transform = useRef<string | undefined>();\n\n const isTooltipPinned = pinnedPos !== null && enablePinning;\n\n if (mousePos === null || mousePos.target === null) return null;\n\n // Ensure user is hovering over a chart before checking for nearby series.\n if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n const chart = chartRef.current;\n const chartWidth = chart?.getWidth() ?? FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.\n\n // Get series nearby the cursor and pass into tooltip content children.\n const nearbySeries = legacyGetNearbySeriesData({\n mousePos,\n chartData,\n pinnedPos,\n chart,\n format,\n showAllSeries,\n });\n if (nearbySeries.length === 0) {\n return null;\n }\n\n const totalSeries = chartData.timeSeries.length;\n\n const containerElement = containerId ? document.querySelector(containerId) : undefined;\n // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off\n const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n if (!isTooltipPinned) {\n transform.current = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0, containerElement);\n }\n\n return (\n <Portal container={containerElement}>\n <Box\n ref={tooltipRef}\n sx={(theme) => ({\n minWidth: TOOLTIP_MIN_WIDTH,\n maxWidth: TOOLTIP_MAX_WIDTH,\n maxHeight: maxHeight ?? TOOLTIP_MAX_HEIGHT,\n padding: 0,\n position: 'absolute',\n top: 0,\n left: 0,\n backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n borderRadius: '6px',\n color: '#fff',\n fontSize: '11px',\n visibility: 'visible',\n opacity: 1,\n transition: 'all 0.1s ease-out',\n // Ensure pinned tooltip shows behind edit panel drawer and sticky header\n zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,\n overflow: 'hidden',\n '&:hover': {\n overflowY: 'auto',\n },\n })}\n style={{\n transform: transform.current,\n display: transform.current ? 'block' : 'none',\n }}\n >\n <Stack spacing={0.5}>\n <TooltipHeader\n nearbySeries={nearbySeries}\n totalSeries={totalSeries}\n enablePinning={enablePinning}\n isTooltipPinned={isTooltipPinned}\n showAllSeries={showAllSeries}\n onShowAllClick={(checked) => setShowAllSeries(checked)}\n onUnpinClick={onUnpinClick}\n />\n <TooltipContent series={nearbySeries} wrapLabels={wrapLabels} />\n </Stack>\n </Box>\n </Portal>\n );\n});\n"],"names":["Box","Portal","Stack","memo","useRef","useState","useResizeObserver","TooltipContent","TooltipHeader","legacyGetNearbySeriesData","FALLBACK_CHART_WIDTH","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","TOOLTIP_MIN_WIDTH","useMousePosition","assembleTransform","LineChartTooltip","chartRef","chartData","enablePinning","wrapLabels","format","onUnpinClick","pinnedPos","containerId","showAllSeries","setShowAllSeries","mousePos","height","width","ref","tooltipRef","transform","isTooltipPinned","target","tagName","chart","current","chartWidth","getWidth","nearbySeries","length","totalSeries","timeSeries","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","container","sx","theme","minWidth","maxWidth","padding","position","top","left","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","display","spacing","onShowAllClick","checked","series"],"mappings":"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"}
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  export interface SeriesInfoProps {
3
2
  seriesName: string;
4
3
  y: number;
@@ -8,5 +7,5 @@ export interface SeriesInfoProps {
8
7
  emphasizeText?: boolean;
9
8
  wrapLabels?: boolean;
10
9
  }
11
- export declare function SeriesInfo(props: SeriesInfoProps): JSX.Element;
10
+ export declare function SeriesInfo(props: SeriesInfoProps): import("react/jsx-runtime").JSX.Element;
12
11
  //# sourceMappingURL=SeriesInfo.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"SeriesInfo.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesInfo.tsx"],"names":[],"mappings":";AAkBA,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA0EhD"}
1
+ {"version":3,"file":"SeriesInfo.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesInfo.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CA0EhD"}