@perses-dev/components 0.51.0-rc.0 → 0.51.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (146) hide show
  1. package/README.md +1 -8
  2. package/dist/EChart/EChart.d.ts.map +1 -1
  3. package/dist/EChart/EChart.js +13 -4
  4. package/dist/EChart/EChart.js.map +1 -1
  5. package/dist/TimeSeriesTooltip/index.d.ts +0 -1
  6. package/dist/TimeSeriesTooltip/index.d.ts.map +1 -1
  7. package/dist/TimeSeriesTooltip/index.js +0 -1
  8. package/dist/TimeSeriesTooltip/index.js.map +1 -1
  9. package/dist/cjs/EChart/EChart.js +11 -2
  10. package/dist/cjs/TimeSeriesTooltip/index.js +0 -1
  11. package/dist/cjs/context/ChartsProvider.js +3 -1
  12. package/dist/cjs/index.js +0 -7
  13. package/dist/cjs/test-utils/theme.js +1 -0
  14. package/dist/cjs/utils/axis.js +3 -18
  15. package/dist/cjs/utils/format.js +0 -21
  16. package/dist/context/ChartsProvider.d.ts +2 -0
  17. package/dist/context/ChartsProvider.d.ts.map +1 -1
  18. package/dist/context/ChartsProvider.js +3 -1
  19. package/dist/context/ChartsProvider.js.map +1 -1
  20. package/dist/index.d.ts +0 -7
  21. package/dist/index.d.ts.map +1 -1
  22. package/dist/index.js +0 -7
  23. package/dist/index.js.map +1 -1
  24. package/dist/model/graph.d.ts +0 -1
  25. package/dist/model/graph.d.ts.map +1 -1
  26. package/dist/model/graph.js.map +1 -1
  27. package/dist/test-utils/theme.d.ts.map +1 -1
  28. package/dist/test-utils/theme.js +1 -0
  29. package/dist/test-utils/theme.js.map +1 -1
  30. package/dist/utils/axis.d.ts +0 -4
  31. package/dist/utils/axis.d.ts.map +1 -1
  32. package/dist/utils/axis.js +0 -9
  33. package/dist/utils/axis.js.map +1 -1
  34. package/dist/utils/chart-actions.d.ts +0 -2
  35. package/dist/utils/chart-actions.d.ts.map +1 -1
  36. package/dist/utils/chart-actions.js.map +1 -1
  37. package/dist/utils/format.d.ts +0 -1
  38. package/dist/utils/format.d.ts.map +1 -1
  39. package/dist/utils/format.js +0 -20
  40. package/dist/utils/format.js.map +1 -1
  41. package/package.json +4 -9
  42. package/dist/BarChart/BarChart.d.ts +0 -16
  43. package/dist/BarChart/BarChart.d.ts.map +0 -1
  44. package/dist/BarChart/BarChart.js +0 -134
  45. package/dist/BarChart/BarChart.js.map +0 -1
  46. package/dist/BarChart/index.d.ts +0 -2
  47. package/dist/BarChart/index.d.ts.map +0 -1
  48. package/dist/BarChart/index.js +0 -15
  49. package/dist/BarChart/index.js.map +0 -1
  50. package/dist/GaugeChart/GaugeChart.d.ts +0 -23
  51. package/dist/GaugeChart/GaugeChart.d.ts.map +0 -1
  52. package/dist/GaugeChart/GaugeChart.js +0 -214
  53. package/dist/GaugeChart/GaugeChart.js.map +0 -1
  54. package/dist/GaugeChart/index.d.ts +0 -2
  55. package/dist/GaugeChart/index.d.ts.map +0 -1
  56. package/dist/GaugeChart/index.js +0 -15
  57. package/dist/GaugeChart/index.js.map +0 -1
  58. package/dist/LineChart/LineChart.d.ts +0 -22
  59. package/dist/LineChart/LineChart.d.ts.map +0 -1
  60. package/dist/LineChart/LineChart.js +0 -266
  61. package/dist/LineChart/LineChart.js.map +0 -1
  62. package/dist/LineChart/index.d.ts +0 -2
  63. package/dist/LineChart/index.d.ts.map +0 -1
  64. package/dist/LineChart/index.js +0 -15
  65. package/dist/LineChart/index.js.map +0 -1
  66. package/dist/PieChart/PieChart.d.ts +0 -14
  67. package/dist/PieChart/PieChart.d.ts.map +0 -1
  68. package/dist/PieChart/PieChart.js +0 -92
  69. package/dist/PieChart/PieChart.js.map +0 -1
  70. package/dist/PieChart/index.d.ts +0 -2
  71. package/dist/PieChart/index.d.ts.map +0 -1
  72. package/dist/PieChart/index.js +0 -15
  73. package/dist/PieChart/index.js.map +0 -1
  74. package/dist/StatChart/StatChart.d.ts +0 -21
  75. package/dist/StatChart/StatChart.d.ts.map +0 -1
  76. package/dist/StatChart/StatChart.js +0 -189
  77. package/dist/StatChart/StatChart.js.map +0 -1
  78. package/dist/StatChart/calculateFontSize.d.ts +0 -16
  79. package/dist/StatChart/calculateFontSize.d.ts.map +0 -1
  80. package/dist/StatChart/calculateFontSize.js +0 -49
  81. package/dist/StatChart/calculateFontSize.js.map +0 -1
  82. package/dist/StatChart/index.d.ts +0 -2
  83. package/dist/StatChart/index.d.ts.map +0 -1
  84. package/dist/StatChart/index.js +0 -15
  85. package/dist/StatChart/index.js.map +0 -1
  86. package/dist/StatChart/utils/formatStatChartValue.d.ts +0 -3
  87. package/dist/StatChart/utils/formatStatChartValue.d.ts.map +0 -1
  88. package/dist/StatChart/utils/formatStatChartValue.js +0 -26
  89. package/dist/StatChart/utils/formatStatChartValue.js.map +0 -1
  90. package/dist/StatusHistoryChart/StatusHistoryChart.d.ts +0 -27
  91. package/dist/StatusHistoryChart/StatusHistoryChart.d.ts.map +0 -1
  92. package/dist/StatusHistoryChart/StatusHistoryChart.js +0 -132
  93. package/dist/StatusHistoryChart/StatusHistoryChart.js.map +0 -1
  94. package/dist/StatusHistoryChart/StatusHistoryTooltip.d.ts +0 -13
  95. package/dist/StatusHistoryChart/StatusHistoryTooltip.d.ts.map +0 -1
  96. package/dist/StatusHistoryChart/StatusHistoryTooltip.js +0 -47
  97. package/dist/StatusHistoryChart/StatusHistoryTooltip.js.map +0 -1
  98. package/dist/StatusHistoryChart/get-formatted-axis-label.d.ts +0 -2
  99. package/dist/StatusHistoryChart/get-formatted-axis-label.d.ts.map +0 -1
  100. package/dist/StatusHistoryChart/get-formatted-axis-label.js +0 -41
  101. package/dist/StatusHistoryChart/get-formatted-axis-label.js.map +0 -1
  102. package/dist/StatusHistoryChart/index.d.ts +0 -3
  103. package/dist/StatusHistoryChart/index.d.ts.map +0 -1
  104. package/dist/StatusHistoryChart/index.js +0 -16
  105. package/dist/StatusHistoryChart/index.js.map +0 -1
  106. package/dist/StatusHistoryChart/utils/get-color.d.ts +0 -6
  107. package/dist/StatusHistoryChart/utils/get-color.d.ts.map +0 -1
  108. package/dist/StatusHistoryChart/utils/get-color.js +0 -100
  109. package/dist/StatusHistoryChart/utils/get-color.js.map +0 -1
  110. package/dist/StatusHistoryChart/utils/get-tooltip-position.d.ts +0 -3
  111. package/dist/StatusHistoryChart/utils/get-tooltip-position.d.ts.map +0 -1
  112. package/dist/StatusHistoryChart/utils/get-tooltip-position.js +0 -27
  113. package/dist/StatusHistoryChart/utils/get-tooltip-position.js.map +0 -1
  114. package/dist/TimeChart/TimeChart.d.ts +0 -24
  115. package/dist/TimeChart/TimeChart.d.ts.map +0 -1
  116. package/dist/TimeChart/TimeChart.js +0 -394
  117. package/dist/TimeChart/TimeChart.js.map +0 -1
  118. package/dist/TimeChart/index.d.ts +0 -2
  119. package/dist/TimeChart/index.d.ts.map +0 -1
  120. package/dist/TimeChart/index.js +0 -15
  121. package/dist/TimeChart/index.js.map +0 -1
  122. package/dist/TimeSeriesTooltip/LineChartTooltip.d.ts +0 -21
  123. package/dist/TimeSeriesTooltip/LineChartTooltip.d.ts.map +0 -1
  124. package/dist/TimeSeriesTooltip/LineChartTooltip.js +0 -101
  125. package/dist/TimeSeriesTooltip/LineChartTooltip.js.map +0 -1
  126. package/dist/cjs/BarChart/BarChart.js +0 -142
  127. package/dist/cjs/BarChart/index.js +0 -30
  128. package/dist/cjs/GaugeChart/GaugeChart.js +0 -227
  129. package/dist/cjs/GaugeChart/index.js +0 -30
  130. package/dist/cjs/LineChart/LineChart.js +0 -274
  131. package/dist/cjs/LineChart/index.js +0 -30
  132. package/dist/cjs/PieChart/PieChart.js +0 -100
  133. package/dist/cjs/PieChart/index.js +0 -30
  134. package/dist/cjs/StatChart/StatChart.js +0 -202
  135. package/dist/cjs/StatChart/calculateFontSize.js +0 -55
  136. package/dist/cjs/StatChart/index.js +0 -30
  137. package/dist/cjs/StatChart/utils/formatStatChartValue.js +0 -34
  138. package/dist/cjs/StatusHistoryChart/StatusHistoryChart.js +0 -140
  139. package/dist/cjs/StatusHistoryChart/StatusHistoryTooltip.js +0 -55
  140. package/dist/cjs/StatusHistoryChart/get-formatted-axis-label.js +0 -48
  141. package/dist/cjs/StatusHistoryChart/index.js +0 -31
  142. package/dist/cjs/StatusHistoryChart/utils/get-color.js +0 -125
  143. package/dist/cjs/StatusHistoryChart/utils/get-tooltip-position.js +0 -35
  144. package/dist/cjs/TimeChart/TimeChart.js +0 -407
  145. package/dist/cjs/TimeChart/index.js +0 -30
  146. package/dist/cjs/TimeSeriesTooltip/LineChartTooltip.js +0 -114
@@ -1,132 +0,0 @@
1
- // Copyright 2024 The Perses Authors
2
- // Licensed under the Apache License, Version 2.0 (the "License");
3
- // you may not use this file except in compliance with the License.
4
- // You may obtain a copy of the License at
5
- //
6
- // http://www.apache.org/licenses/LICENSE-2.0
7
- //
8
- // Unless required by applicable law or agreed to in writing, software
9
- // distributed under the License is distributed on an "AS IS" BASIS,
10
- // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11
- // See the License for the specific language governing permissions and
12
- // limitations under the License.
13
- import { jsx as _jsx } from "react/jsx-runtime";
14
- import { Box, useTheme } from '@mui/material';
15
- import { HeatmapChart as EChartsHeatmapChart } from 'echarts/charts';
16
- import { GridComponent, DatasetComponent, TitleComponent, TooltipComponent, VisualMapComponent } from 'echarts/components';
17
- import { use } from 'echarts/core';
18
- import { CanvasRenderer } from 'echarts/renderers';
19
- import { useChartsTheme } from '../context/ChartsProvider';
20
- import { useTimeZone } from '../context/TimeZoneProvider';
21
- import { EChart } from '../EChart';
22
- import { getFormattedStatusHistoryAxisLabel } from './get-formatted-axis-label';
23
- import { generateTooltipHTML } from './StatusHistoryTooltip';
24
- use([
25
- EChartsHeatmapChart,
26
- VisualMapComponent,
27
- GridComponent,
28
- DatasetComponent,
29
- TitleComponent,
30
- TooltipComponent,
31
- CanvasRenderer
32
- ]);
33
- export const StatusHistoryChart = (props)=>{
34
- const { height, data, xAxisCategories, yAxisCategories, timeScale, colors } = props;
35
- const { timeZone } = useTimeZone();
36
- const chartsTheme = useChartsTheme();
37
- const theme = useTheme();
38
- const option = {
39
- tooltip: {
40
- appendToBody: true,
41
- formatter: (params)=>{
42
- return generateTooltipHTML({
43
- data: params.data.value,
44
- label: params.data.label,
45
- marker: params.marker,
46
- xAxisCategories,
47
- yAxisCategories,
48
- theme
49
- });
50
- }
51
- },
52
- grid: {
53
- top: '5%',
54
- bottom: '5%'
55
- },
56
- xAxis: {
57
- type: 'category',
58
- data: xAxisCategories,
59
- axisLine: {
60
- show: false
61
- },
62
- splitArea: {
63
- show: false
64
- },
65
- axisLabel: {
66
- hideOverlap: true,
67
- formatter: getFormattedStatusHistoryAxisLabel(timeScale?.rangeMs ?? 0, timeZone)
68
- }
69
- },
70
- yAxis: {
71
- type: 'category',
72
- data: yAxisCategories,
73
- axisLine: {
74
- show: false
75
- },
76
- splitArea: {
77
- show: false,
78
- interval: 0
79
- },
80
- splitLine: {
81
- show: false
82
- },
83
- axisLabel: {
84
- interval: 0
85
- }
86
- },
87
- visualMap: {
88
- show: false,
89
- type: 'piecewise',
90
- pieces: colors
91
- },
92
- series: [
93
- {
94
- name: 'Status history',
95
- type: 'heatmap',
96
- coordinateSystem: 'cartesian2d',
97
- data: data,
98
- label: {
99
- show: false
100
- },
101
- itemStyle: {
102
- borderWidth: 1,
103
- borderType: 'solid',
104
- borderColor: '#ffffff'
105
- },
106
- emphasis: {
107
- itemStyle: {
108
- opacity: 0.5
109
- }
110
- }
111
- }
112
- ]
113
- };
114
- return /*#__PURE__*/ _jsx(Box, {
115
- style: {
116
- height: height
117
- },
118
- sx: {
119
- overflow: 'auto'
120
- },
121
- children: /*#__PURE__*/ _jsx(EChart, {
122
- sx: {
123
- width: '100%',
124
- height: height
125
- },
126
- option: option,
127
- theme: chartsTheme.echartsTheme
128
- })
129
- });
130
- };
131
-
132
- //# sourceMappingURL=StatusHistoryChart.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/StatusHistoryChart/StatusHistoryChart.tsx"],"sourcesContent":["// Copyright 2024 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, useTheme } from '@mui/material';\nimport { HeatmapChart as EChartsHeatmapChart } from 'echarts/charts';\nimport {\n GridComponent,\n DatasetComponent,\n TitleComponent,\n TooltipComponent,\n VisualMapComponent,\n LegendComponentOption,\n} from 'echarts/components';\nimport { use } from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { TimeScale } from '@perses-dev/core';\nimport { EChartsCoreOption } from 'echarts';\nimport { FC } from 'react';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { EChart } from '../EChart';\nimport { getFormattedStatusHistoryAxisLabel } from './get-formatted-axis-label';\nimport { generateTooltipHTML } from './StatusHistoryTooltip';\n\nuse([\n EChartsHeatmapChart,\n VisualMapComponent,\n GridComponent,\n DatasetComponent,\n TitleComponent,\n TooltipComponent,\n CanvasRenderer,\n]);\n\nexport type StatusHistoryData = [number, number, number | undefined];\n\nexport interface StatusHistoryDataItem {\n value: StatusHistoryData;\n label?: string;\n itemStyle?: {\n color?: string;\n borderColor?: string;\n borderWidth?: number;\n };\n}\n\nexport interface StatusHistoryChartProps {\n height: number;\n data: StatusHistoryDataItem[];\n xAxisCategories: number[];\n yAxisCategories: string[];\n legend?: LegendComponentOption;\n timeScale?: TimeScale;\n colors?: Array<{ value: number | string; color: string }>;\n}\n\nexport const StatusHistoryChart: FC<StatusHistoryChartProps> = (props) => {\n const { height, data, xAxisCategories, yAxisCategories, timeScale, colors } = props;\n const { timeZone } = useTimeZone();\n const chartsTheme = useChartsTheme();\n const theme = useTheme();\n\n const option: EChartsCoreOption = {\n tooltip: {\n appendToBody: true,\n formatter: (params: { data: StatusHistoryDataItem; marker: string }) => {\n return generateTooltipHTML({\n data: params.data.value,\n label: params.data.label,\n marker: params.marker,\n xAxisCategories,\n yAxisCategories,\n theme,\n });\n },\n },\n grid: {\n top: '5%',\n bottom: '5%',\n },\n xAxis: {\n type: 'category',\n data: xAxisCategories,\n axisLine: {\n show: false,\n },\n splitArea: {\n show: false,\n },\n axisLabel: {\n hideOverlap: true,\n formatter: getFormattedStatusHistoryAxisLabel(timeScale?.rangeMs ?? 0, timeZone),\n },\n },\n yAxis: {\n type: 'category',\n data: yAxisCategories,\n axisLine: {\n show: false,\n },\n splitArea: {\n show: false,\n interval: 0,\n },\n splitLine: {\n show: false,\n },\n axisLabel: {\n interval: 0,\n },\n },\n visualMap: {\n show: false,\n type: 'piecewise',\n pieces: colors,\n },\n series: [\n {\n name: 'Status history',\n type: 'heatmap',\n coordinateSystem: 'cartesian2d',\n data: data,\n label: {\n show: false,\n },\n itemStyle: {\n borderWidth: 1,\n borderType: 'solid',\n borderColor: '#ffffff',\n },\n emphasis: {\n itemStyle: {\n opacity: 0.5,\n },\n },\n },\n ],\n };\n\n return (\n <Box style={{ height: height }} sx={{ overflow: 'auto' }}>\n <EChart\n sx={{\n width: '100%',\n height: height,\n }}\n option={option}\n theme={chartsTheme.echartsTheme}\n />\n </Box>\n );\n};\n"],"names":["Box","useTheme","HeatmapChart","EChartsHeatmapChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","VisualMapComponent","use","CanvasRenderer","useChartsTheme","useTimeZone","EChart","getFormattedStatusHistoryAxisLabel","generateTooltipHTML","StatusHistoryChart","props","height","data","xAxisCategories","yAxisCategories","timeScale","colors","timeZone","chartsTheme","theme","option","tooltip","appendToBody","formatter","params","value","label","marker","grid","top","bottom","xAxis","type","axisLine","show","splitArea","axisLabel","hideOverlap","rangeMs","yAxis","interval","splitLine","visualMap","pieces","series","name","coordinateSystem","itemStyle","borderWidth","borderType","borderColor","emphasis","opacity","style","sx","overflow","width","echartsTheme"],"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,SAASA,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAC9C,SAASC,gBAAgBC,mBAAmB,QAAQ,iBAAiB;AACrE,SACEC,aAAa,EACbC,gBAAgB,EAChBC,cAAc,EACdC,gBAAgB,EAChBC,kBAAkB,QAEb,qBAAqB;AAC5B,SAASC,GAAG,QAAQ,eAAe;AACnC,SAASC,cAAc,QAAQ,oBAAoB;AAInD,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,WAAW,QAAQ,8BAA8B;AAC1D,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,kCAAkC,QAAQ,6BAA6B;AAChF,SAASC,mBAAmB,QAAQ,yBAAyB;AAE7DN,IAAI;IACFN;IACAK;IACAJ;IACAC;IACAC;IACAC;IACAG;CACD;AAwBD,OAAO,MAAMM,qBAAkD,CAACC;IAC9D,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAEC,eAAe,EAAEC,eAAe,EAAEC,SAAS,EAAEC,MAAM,EAAE,GAAGN;IAC9E,MAAM,EAAEO,QAAQ,EAAE,GAAGZ;IACrB,MAAMa,cAAcd;IACpB,MAAMe,QAAQzB;IAEd,MAAM0B,SAA4B;QAChCC,SAAS;YACPC,cAAc;YACdC,WAAW,CAACC;gBACV,OAAOhB,oBAAoB;oBACzBI,MAAMY,OAAOZ,IAAI,CAACa,KAAK;oBACvBC,OAAOF,OAAOZ,IAAI,CAACc,KAAK;oBACxBC,QAAQH,OAAOG,MAAM;oBACrBd;oBACAC;oBACAK;gBACF;YACF;QACF;QACAS,MAAM;YACJC,KAAK;YACLC,QAAQ;QACV;QACAC,OAAO;YACLC,MAAM;YACNpB,MAAMC;YACNoB,UAAU;gBACRC,MAAM;YACR;YACAC,WAAW;gBACTD,MAAM;YACR;YACAE,WAAW;gBACTC,aAAa;gBACbd,WAAWhB,mCAAmCQ,WAAWuB,WAAW,GAAGrB;YACzE;QACF;QACAsB,OAAO;YACLP,MAAM;YACNpB,MAAME;YACNmB,UAAU;gBACRC,MAAM;YACR;YACAC,WAAW;gBACTD,MAAM;gBACNM,UAAU;YACZ;YACAC,WAAW;gBACTP,MAAM;YACR;YACAE,WAAW;gBACTI,UAAU;YACZ;QACF;QACAE,WAAW;YACTR,MAAM;YACNF,MAAM;YACNW,QAAQ3B;QACV;QACA4B,QAAQ;YACN;gBACEC,MAAM;gBACNb,MAAM;gBACNc,kBAAkB;gBAClBlC,MAAMA;gBACNc,OAAO;oBACLQ,MAAM;gBACR;gBACAa,WAAW;oBACTC,aAAa;oBACbC,YAAY;oBACZC,aAAa;gBACf;gBACAC,UAAU;oBACRJ,WAAW;wBACTK,SAAS;oBACX;gBACF;YACF;SACD;IACH;IAEA,qBACE,KAAC3D;QAAI4D,OAAO;YAAE1C,QAAQA;QAAO;QAAG2C,IAAI;YAAEC,UAAU;QAAO;kBACrD,cAAA,KAACjD;YACCgD,IAAI;gBACFE,OAAO;gBACP7C,QAAQA;YACV;YACAS,QAAQA;YACRD,OAAOD,YAAYuC,YAAY;;;AAIvC,EAAE"}
@@ -1,13 +0,0 @@
1
- import { Theme } from '@mui/material';
2
- import { StatusHistoryData } from './StatusHistoryChart';
3
- interface CustomTooltipProps {
4
- data: StatusHistoryData;
5
- label?: string;
6
- marker: string;
7
- xAxisCategories: number[];
8
- yAxisCategories: string[];
9
- theme: Theme;
10
- }
11
- export declare function generateTooltipHTML({ data, label, marker, xAxisCategories, yAxisCategories, theme, }: CustomTooltipProps): string;
12
- export {};
13
- //# sourceMappingURL=StatusHistoryTooltip.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"StatusHistoryTooltip.d.ts","sourceRoot":"","sources":["../../src/StatusHistoryChart/StatusHistoryTooltip.ts"],"names":[],"mappings":"AAaA,OAAO,EAAO,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,UAAU,kBAAkB;IAC1B,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC;CACd;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,MAAM,EACN,eAAe,EACf,eAAe,EACf,KAAK,GACN,EAAE,kBAAkB,GAAG,MAAM,CAmC7B"}
@@ -1,47 +0,0 @@
1
- // Copyright 2024 The Perses Authors
2
- // Licensed under the Apache License, Version 2.0 (the "License");
3
- // you may not use this file except in compliance with the License.
4
- // You may obtain a copy of the License at
5
- //
6
- // http://www.apache.org/licenses/LICENSE-2.0
7
- //
8
- // Unless required by applicable law or agreed to in writing, software
9
- // distributed under the License is distributed on an "AS IS" BASIS,
10
- // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11
- // See the License for the specific language governing permissions and
12
- // limitations under the License.
13
- import { css } from '@mui/material';
14
- import { getDateAndTime } from '../utils';
15
- export function generateTooltipHTML({ data, label, marker, xAxisCategories, yAxisCategories, theme }) {
16
- const [x, y] = data;
17
- const xAxisLabel = xAxisCategories[x];
18
- const { formattedDate, formattedTime } = getDateAndTime(xAxisLabel);
19
- const tooltipHeader = css`
20
- border-bottom: 1px solid ${theme.palette.grey[500]};
21
- padding-bottom: 8px;
22
- `;
23
- const tooltipContentStyles = css`
24
- display: flex;
25
- justify-content: space-between;
26
- padding-top: 8px;
27
- `;
28
- const labelStyles = css`
29
- margin-right: 16px;
30
- `;
31
- return `
32
- <div>
33
- <div style="${tooltipHeader.styles}">${formattedDate} ${formattedTime}</div>
34
- <div style="${tooltipContentStyles.styles}">
35
- <div style="${labelStyles.styles}">
36
- ${marker}
37
- <strong>${yAxisCategories[y]}</strong>
38
- </div>
39
- <div>
40
- ${label}
41
- </div>
42
- </div>
43
- </div>
44
- `;
45
- }
46
-
47
- //# sourceMappingURL=StatusHistoryTooltip.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/StatusHistoryChart/StatusHistoryTooltip.ts"],"sourcesContent":["// Copyright 2024 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 { css, Theme } from '@mui/material';\nimport { getDateAndTime } from '../utils';\nimport { StatusHistoryData } from './StatusHistoryChart';\n\ninterface CustomTooltipProps {\n data: StatusHistoryData;\n label?: string;\n marker: string;\n xAxisCategories: number[];\n yAxisCategories: string[];\n theme: Theme;\n}\n\nexport function generateTooltipHTML({\n data,\n label,\n marker,\n xAxisCategories,\n yAxisCategories,\n theme,\n}: CustomTooltipProps): string {\n const [x, y] = data;\n const xAxisLabel = xAxisCategories[x];\n\n const { formattedDate, formattedTime } = getDateAndTime(xAxisLabel);\n\n const tooltipHeader = css`\n border-bottom: 1px solid ${theme.palette.grey[500]};\n padding-bottom: 8px;\n `;\n\n const tooltipContentStyles = css`\n display: flex;\n justify-content: space-between;\n padding-top: 8px;\n `;\n\n const labelStyles = css`\n margin-right: 16px;\n `;\n\n return `\n <div>\n <div style=\"${tooltipHeader.styles}\">${formattedDate} ${formattedTime}</div>\n <div style=\"${tooltipContentStyles.styles}\">\n <div style=\"${labelStyles.styles}\">\n ${marker}\n <strong>${yAxisCategories[y]}</strong>\n </div>\n <div>\n ${label}\n </div>\n </div>\n </div>\n `;\n}\n"],"names":["css","getDateAndTime","generateTooltipHTML","data","label","marker","xAxisCategories","yAxisCategories","theme","x","y","xAxisLabel","formattedDate","formattedTime","tooltipHeader","palette","grey","tooltipContentStyles","labelStyles","styles"],"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,SAASA,GAAG,QAAe,gBAAgB;AAC3C,SAASC,cAAc,QAAQ,WAAW;AAY1C,OAAO,SAASC,oBAAoB,EAClCC,IAAI,EACJC,KAAK,EACLC,MAAM,EACNC,eAAe,EACfC,eAAe,EACfC,KAAK,EACc;IACnB,MAAM,CAACC,GAAGC,EAAE,GAAGP;IACf,MAAMQ,aAAaL,eAAe,CAACG,EAAE;IAErC,MAAM,EAAEG,aAAa,EAAEC,aAAa,EAAE,GAAGZ,eAAeU;IAExD,MAAMG,gBAAgBd,GAAG,CAAC;6BACC,EAAEQ,MAAMO,OAAO,CAACC,IAAI,CAAC,IAAI,CAAC;;EAErD,CAAC;IAED,MAAMC,uBAAuBjB,GAAG,CAAC;;;;EAIjC,CAAC;IAED,MAAMkB,cAAclB,GAAG,CAAC;;EAExB,CAAC;IAED,OAAO,CAAC;;kBAEQ,EAAEc,cAAcK,MAAM,CAAC,EAAE,EAAEP,cAAc,CAAC,EAAEC,cAAc;kBAC1D,EAAEI,qBAAqBE,MAAM,CAAC;oBAC5B,EAAED,YAAYC,MAAM,CAAC;UAC/B,EAAEd,OAAO;kBACD,EAAEE,eAAe,CAACG,EAAE,CAAC;;;UAG7B,EAAEN,MAAM;;;;EAIhB,CAAC;AACH"}
@@ -1,2 +0,0 @@
1
- export declare function getFormattedStatusHistoryAxisLabel(rangeMs: number, timezone: string): (value: number) => string;
2
- //# sourceMappingURL=get-formatted-axis-label.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"get-formatted-axis-label.d.ts","sourceRoot":"","sources":["../../src/StatusHistoryChart/get-formatted-axis-label.ts"],"names":[],"mappings":"AAgBA,wBAAgB,kCAAkC,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAC1D,MAAM,KAAG,MAAM,CA6BxC"}
@@ -1,41 +0,0 @@
1
- // Copyright 2024 The Perses Authors
2
- // Licensed under the Apache License, Version 2.0 (the "License");
3
- // you may not use this file except in compliance with the License.
4
- // You may obtain a copy of the License at
5
- //
6
- // http://www.apache.org/licenses/LICENSE-2.0
7
- //
8
- // Unless required by applicable law or agreed to in writing, software
9
- // distributed under the License is distributed on an "AS IS" BASIS,
10
- // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11
- // See the License for the specific language governing permissions and
12
- // limitations under the License.
13
- import { formatWithTimeZone } from '../utils';
14
- // https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter
15
- export function getFormattedStatusHistoryAxisLabel(rangeMs, timezone) {
16
- return function(value) {
17
- const dayMs = 86400000;
18
- const monthMs = 2629440000;
19
- const yearMs = 31536000000;
20
- const timeStamp = new Date(Number(value));
21
- // more than 5 years
22
- if (rangeMs > yearMs * 5) {
23
- return formatWithTimeZone(timeStamp, 'yyy', timezone);
24
- }
25
- // more than 2 years
26
- if (rangeMs > yearMs * 2) {
27
- return formatWithTimeZone(timeStamp, 'MMM yyy', timezone);
28
- }
29
- // between 5 days to 6 months
30
- if (rangeMs > dayMs * 10 && rangeMs < monthMs * 6) {
31
- return formatWithTimeZone(timeStamp, 'dd.MM', timezone); // 12-01
32
- }
33
- // between 2 and 10 days
34
- if (rangeMs > dayMs * 2 && rangeMs <= dayMs * 10) {
35
- return formatWithTimeZone(timeStamp, 'dd.MM HH:mm', timezone); // 12-01; // 12-01 12:30
36
- }
37
- return formatWithTimeZone(timeStamp, 'HH:mm', timezone);
38
- };
39
- }
40
-
41
- //# sourceMappingURL=get-formatted-axis-label.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/StatusHistoryChart/get-formatted-axis-label.ts"],"sourcesContent":["// Copyright 2024 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 { formatWithTimeZone } from '../utils';\n\n// https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter\nexport function getFormattedStatusHistoryAxisLabel(rangeMs: number, timezone: string) {\n return function (value: number): string {\n const dayMs = 86400000;\n const monthMs = 2629440000;\n const yearMs = 31536000000;\n\n const timeStamp = new Date(Number(value));\n\n // more than 5 years\n if (rangeMs > yearMs * 5) {\n return formatWithTimeZone(timeStamp, 'yyy', timezone);\n }\n\n // more than 2 years\n if (rangeMs > yearMs * 2) {\n return formatWithTimeZone(timeStamp, 'MMM yyy', timezone);\n }\n\n // between 5 days to 6 months\n if (rangeMs > dayMs * 10 && rangeMs < monthMs * 6) {\n return formatWithTimeZone(timeStamp, 'dd.MM', timezone); // 12-01\n }\n\n // between 2 and 10 days\n if (rangeMs > dayMs * 2 && rangeMs <= dayMs * 10) {\n return formatWithTimeZone(timeStamp, 'dd.MM HH:mm', timezone); // 12-01; // 12-01 12:30\n }\n\n return formatWithTimeZone(timeStamp, 'HH:mm', timezone);\n };\n}\n"],"names":["formatWithTimeZone","getFormattedStatusHistoryAxisLabel","rangeMs","timezone","value","dayMs","monthMs","yearMs","timeStamp","Date","Number"],"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,SAASA,kBAAkB,QAAQ,WAAW;AAE9C,sEAAsE;AACtE,OAAO,SAASC,mCAAmCC,OAAe,EAAEC,QAAgB;IAClF,OAAO,SAAUC,KAAa;QAC5B,MAAMC,QAAQ;QACd,MAAMC,UAAU;QAChB,MAAMC,SAAS;QAEf,MAAMC,YAAY,IAAIC,KAAKC,OAAON;QAElC,oBAAoB;QACpB,IAAIF,UAAUK,SAAS,GAAG;YACxB,OAAOP,mBAAmBQ,WAAW,OAAOL;QAC9C;QAEA,oBAAoB;QACpB,IAAID,UAAUK,SAAS,GAAG;YACxB,OAAOP,mBAAmBQ,WAAW,WAAWL;QAClD;QAEA,6BAA6B;QAC7B,IAAID,UAAUG,QAAQ,MAAMH,UAAUI,UAAU,GAAG;YACjD,OAAON,mBAAmBQ,WAAW,SAASL,WAAW,QAAQ;QACnE;QAEA,wBAAwB;QACxB,IAAID,UAAUG,QAAQ,KAAKH,WAAWG,QAAQ,IAAI;YAChD,OAAOL,mBAAmBQ,WAAW,eAAeL,WAAW,wBAAwB;QACzF;QAEA,OAAOH,mBAAmBQ,WAAW,SAASL;IAChD;AACF"}
@@ -1,3 +0,0 @@
1
- export * from './StatusHistoryChart';
2
- export * from './utils/get-color';
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/StatusHistoryChart/index.ts"],"names":[],"mappings":"AAaA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC"}
@@ -1,16 +0,0 @@
1
- // Copyright 2023 The Perses Authors
2
- // Licensed under the Apache License, Version 2.0 (the "License");
3
- // you may not use this file except in compliance with the License.
4
- // You may obtain a copy of the License at
5
- //
6
- // http://www.apache.org/licenses/LICENSE-2.0
7
- //
8
- // Unless required by applicable law or agreed to in writing, software
9
- // distributed under the License is distributed on an "AS IS" BASIS,
10
- // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11
- // See the License for the specific language governing permissions and
12
- // limitations under the License.
13
- export * from './StatusHistoryChart';
14
- export * from './utils/get-color';
15
-
16
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/StatusHistoryChart/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 './StatusHistoryChart';\nexport * from './utils/get-color';\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,uBAAuB;AACrC,cAAc,oBAAoB"}
@@ -1,6 +0,0 @@
1
- export declare const FALLBACK_COLOR = "#1f77b4";
2
- export declare function getColorForValue(value: number | string, baseColor: string): string;
3
- export declare function getColorsForValues(uniqueValues: Array<number | string>, themeColors: string[]): string[];
4
- export declare function hexToHSL(hex: string): [number, number, number];
5
- export declare function hslToHex(h: number, s: number, l: number): string;
6
- //# sourceMappingURL=get-color.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"get-color.d.ts","sourceRoot":"","sources":["../../../src/StatusHistoryChart/utils/get-color.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,cAAc,YAAY,CAAC;AAExC,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CA2ClF;AAED,wBAAgB,kBAAkB,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAaxG;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CA8B9D;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAWhE"}
@@ -1,100 +0,0 @@
1
- // Copyright 2024 The Perses Authors
2
- // Licensed under the Apache License, Version 2.0 (the "License");
3
- // you may not use this file except in compliance with the License.
4
- // You may obtain a copy of the License at
5
- //
6
- // http://www.apache.org/licenses/LICENSE-2.0
7
- //
8
- // Unless required by applicable law or agreed to in writing, software
9
- // distributed under the License is distributed on an "AS IS" BASIS,
10
- // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11
- // See the License for the specific language governing permissions and
12
- // limitations under the License.
13
- export const FALLBACK_COLOR = '#1f77b4';
14
- export function getColorForValue(value, baseColor) {
15
- // Validate base color
16
- if (!baseColor.match(/^#[0-9A-Fa-f]{6}$/)) {
17
- baseColor = FALLBACK_COLOR;
18
- }
19
- try {
20
- const [baseH, baseS, baseL] = hexToHSL(baseColor);
21
- // Ensure numeric values are valid
22
- if (isNaN(baseH) || isNaN(baseS) || isNaN(baseL)) {
23
- throw new Error('Invalid HSL values');
24
- }
25
- // Create deterministic hash
26
- const hash = String(value).split('').reduce((acc, char)=>acc + char.charCodeAt(0), 0);
27
- const hueStep = 60;
28
- const lightnessVariation = 15;
29
- const hueOffset = hash % 6 * hueStep; // 6 segments of 60° each
30
- const newH = (baseH + hueOffset) % 360;
31
- const newL = baseL + (hash % 2 ? lightnessVariation : -lightnessVariation);
32
- // Keep saturation high for better distinction
33
- const newS = Math.min(baseS + 10, 90);
34
- const color = hslToHex(Math.abs(newH), Math.min(Math.max(newS, 50), 90), Math.min(Math.max(newL, 30), 70) // Keep lightness 30-70%
35
- );
36
- // Validate generated color
37
- if (!color.match(/^#[0-9A-Fa-f]{6}$/)) {
38
- throw new Error('Invalid generated color');
39
- }
40
- return color;
41
- } catch (_) {
42
- return FALLBACK_COLOR;
43
- }
44
- }
45
- export function getColorsForValues(uniqueValues, themeColors) {
46
- // If we have enough theme colors, use them
47
- if (themeColors.length >= uniqueValues.length) {
48
- return themeColors.slice(0, uniqueValues.length);
49
- }
50
- // Use theme colors first, then generate additional ones
51
- return uniqueValues.map((value, index)=>{
52
- if (index < themeColors.length) {
53
- return themeColors[index] || FALLBACK_COLOR;
54
- }
55
- return getColorForValue(value, themeColors[0] || FALLBACK_COLOR);
56
- });
57
- }
58
- export function hexToHSL(hex) {
59
- const r = parseInt(hex.slice(1, 3), 16) / 255;
60
- const g = parseInt(hex.slice(3, 5), 16) / 255;
61
- const b = parseInt(hex.slice(5, 7), 16) / 255;
62
- const max = Math.max(r, g, b);
63
- const min = Math.min(r, g, b);
64
- let h = 0;
65
- let s = 0;
66
- const l = (max + min) / 2;
67
- if (max !== min) {
68
- const d = max - min;
69
- s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
70
- switch(max){
71
- case r:
72
- h = (g - b) / d + (g < b ? 6 : 0);
73
- break;
74
- case g:
75
- h = (b - r) / d + 2;
76
- break;
77
- case b:
78
- h = (r - g) / d + 4;
79
- break;
80
- }
81
- h /= 6;
82
- }
83
- return [
84
- h * 360,
85
- s * 100,
86
- l * 100
87
- ];
88
- }
89
- export function hslToHex(h, s, l) {
90
- l /= 100;
91
- const a = s * Math.min(l, 1 - l) / 100;
92
- const f = (n)=>{
93
- const k = (n + h / 30) % 12;
94
- const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
95
- return Math.round(255 * color).toString(16).padStart(2, '0');
96
- };
97
- return `#${f(0)}${f(8)}${f(4)}`;
98
- }
99
-
100
- //# sourceMappingURL=get-color.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/StatusHistoryChart/utils/get-color.ts"],"sourcesContent":["// Copyright 2024 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 const FALLBACK_COLOR = '#1f77b4';\n\nexport function getColorForValue(value: number | string, baseColor: string): string {\n // Validate base color\n if (!baseColor.match(/^#[0-9A-Fa-f]{6}$/)) {\n baseColor = FALLBACK_COLOR;\n }\n\n try {\n const [baseH, baseS, baseL] = hexToHSL(baseColor);\n\n // Ensure numeric values are valid\n if (isNaN(baseH) || isNaN(baseS) || isNaN(baseL)) {\n throw new Error('Invalid HSL values');\n }\n\n // Create deterministic hash\n const hash = String(value)\n .split('')\n .reduce((acc, char) => acc + char.charCodeAt(0), 0);\n\n const hueStep = 60;\n const lightnessVariation = 15;\n\n const hueOffset = (hash % 6) * hueStep; // 6 segments of 60° each\n const newH = (baseH + hueOffset) % 360;\n const newL = baseL + (hash % 2 ? lightnessVariation : -lightnessVariation);\n\n // Keep saturation high for better distinction\n const newS = Math.min(baseS + 10, 90);\n const color = hslToHex(\n Math.abs(newH),\n Math.min(Math.max(newS, 50), 90), // Keep saturation 50-90%\n Math.min(Math.max(newL, 30), 70) // Keep lightness 30-70%\n );\n\n // Validate generated color\n if (!color.match(/^#[0-9A-Fa-f]{6}$/)) {\n throw new Error('Invalid generated color');\n }\n\n return color;\n } catch (_) {\n return FALLBACK_COLOR;\n }\n}\n\nexport function getColorsForValues(uniqueValues: Array<number | string>, themeColors: string[]): string[] {\n // If we have enough theme colors, use them\n if (themeColors.length >= uniqueValues.length) {\n return themeColors.slice(0, uniqueValues.length);\n }\n\n // Use theme colors first, then generate additional ones\n return uniqueValues.map((value, index) => {\n if (index < themeColors.length) {\n return themeColors[index] || FALLBACK_COLOR;\n }\n return getColorForValue(value, themeColors[0] || FALLBACK_COLOR);\n });\n}\n\nexport function hexToHSL(hex: string): [number, number, number] {\n const r = parseInt(hex.slice(1, 3), 16) / 255;\n const g = parseInt(hex.slice(3, 5), 16) / 255;\n const b = parseInt(hex.slice(5, 7), 16) / 255;\n\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n let h = 0;\n let s = 0;\n const l = (max + min) / 2;\n\n if (max !== min) {\n const d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / d + 2;\n break;\n case b:\n h = (r - g) / d + 4;\n break;\n }\n h /= 6;\n }\n\n return [h * 360, s * 100, l * 100];\n}\n\nexport function hslToHex(h: number, s: number, l: number): string {\n l /= 100;\n const a = (s * Math.min(l, 1 - l)) / 100;\n const f = (n: number): string => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color)\n .toString(16)\n .padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n}\n"],"names":["FALLBACK_COLOR","getColorForValue","value","baseColor","match","baseH","baseS","baseL","hexToHSL","isNaN","Error","hash","String","split","reduce","acc","char","charCodeAt","hueStep","lightnessVariation","hueOffset","newH","newL","newS","Math","min","color","hslToHex","abs","max","_","getColorsForValues","uniqueValues","themeColors","length","slice","map","index","hex","r","parseInt","g","b","h","s","l","d","a","f","n","k","round","toString","padStart"],"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,OAAO,MAAMA,iBAAiB,UAAU;AAExC,OAAO,SAASC,iBAAiBC,KAAsB,EAAEC,SAAiB;IACxE,sBAAsB;IACtB,IAAI,CAACA,UAAUC,KAAK,CAAC,sBAAsB;QACzCD,YAAYH;IACd;IAEA,IAAI;QACF,MAAM,CAACK,OAAOC,OAAOC,MAAM,GAAGC,SAASL;QAEvC,kCAAkC;QAClC,IAAIM,MAAMJ,UAAUI,MAAMH,UAAUG,MAAMF,QAAQ;YAChD,MAAM,IAAIG,MAAM;QAClB;QAEA,4BAA4B;QAC5B,MAAMC,OAAOC,OAAOV,OACjBW,KAAK,CAAC,IACNC,MAAM,CAAC,CAACC,KAAKC,OAASD,MAAMC,KAAKC,UAAU,CAAC,IAAI;QAEnD,MAAMC,UAAU;QAChB,MAAMC,qBAAqB;QAE3B,MAAMC,YAAY,AAACT,OAAO,IAAKO,SAAS,yBAAyB;QACjE,MAAMG,OAAO,AAAChB,CAAAA,QAAQe,SAAQ,IAAK;QACnC,MAAME,OAAOf,QAASI,CAAAA,OAAO,IAAIQ,qBAAqB,CAACA,kBAAiB;QAExE,8CAA8C;QAC9C,MAAMI,OAAOC,KAAKC,GAAG,CAACnB,QAAQ,IAAI;QAClC,MAAMoB,QAAQC,SACZH,KAAKI,GAAG,CAACP,OACTG,KAAKC,GAAG,CAACD,KAAKK,GAAG,CAACN,MAAM,KAAK,KAC7BC,KAAKC,GAAG,CAACD,KAAKK,GAAG,CAACP,MAAM,KAAK,IAAI,wBAAwB;;QAG3D,2BAA2B;QAC3B,IAAI,CAACI,MAAMtB,KAAK,CAAC,sBAAsB;YACrC,MAAM,IAAIM,MAAM;QAClB;QAEA,OAAOgB;IACT,EAAE,OAAOI,GAAG;QACV,OAAO9B;IACT;AACF;AAEA,OAAO,SAAS+B,mBAAmBC,YAAoC,EAAEC,WAAqB;IAC5F,2CAA2C;IAC3C,IAAIA,YAAYC,MAAM,IAAIF,aAAaE,MAAM,EAAE;QAC7C,OAAOD,YAAYE,KAAK,CAAC,GAAGH,aAAaE,MAAM;IACjD;IAEA,wDAAwD;IACxD,OAAOF,aAAaI,GAAG,CAAC,CAAClC,OAAOmC;QAC9B,IAAIA,QAAQJ,YAAYC,MAAM,EAAE;YAC9B,OAAOD,WAAW,CAACI,MAAM,IAAIrC;QAC/B;QACA,OAAOC,iBAAiBC,OAAO+B,WAAW,CAAC,EAAE,IAAIjC;IACnD;AACF;AAEA,OAAO,SAASQ,SAAS8B,GAAW;IAClC,MAAMC,IAAIC,SAASF,IAAIH,KAAK,CAAC,GAAG,IAAI,MAAM;IAC1C,MAAMM,IAAID,SAASF,IAAIH,KAAK,CAAC,GAAG,IAAI,MAAM;IAC1C,MAAMO,IAAIF,SAASF,IAAIH,KAAK,CAAC,GAAG,IAAI,MAAM;IAE1C,MAAMN,MAAML,KAAKK,GAAG,CAACU,GAAGE,GAAGC;IAC3B,MAAMjB,MAAMD,KAAKC,GAAG,CAACc,GAAGE,GAAGC;IAC3B,IAAIC,IAAI;IACR,IAAIC,IAAI;IACR,MAAMC,IAAI,AAAChB,CAAAA,MAAMJ,GAAE,IAAK;IAExB,IAAII,QAAQJ,KAAK;QACf,MAAMqB,IAAIjB,MAAMJ;QAChBmB,IAAIC,IAAI,MAAMC,IAAK,CAAA,IAAIjB,MAAMJ,GAAE,IAAKqB,IAAKjB,CAAAA,MAAMJ,GAAE;QAEjD,OAAQI;YACN,KAAKU;gBACHI,IAAI,AAACF,CAAAA,IAAIC,CAAAA,IAAKI,IAAKL,CAAAA,IAAIC,IAAI,IAAI,CAAA;gBAC/B;YACF,KAAKD;gBACHE,IAAI,AAACD,CAAAA,IAAIH,CAAAA,IAAKO,IAAI;gBAClB;YACF,KAAKJ;gBACHC,IAAI,AAACJ,CAAAA,IAAIE,CAAAA,IAAKK,IAAI;gBAClB;QACJ;QACAH,KAAK;IACP;IAEA,OAAO;QAACA,IAAI;QAAKC,IAAI;QAAKC,IAAI;KAAI;AACpC;AAEA,OAAO,SAASlB,SAASgB,CAAS,EAAEC,CAAS,EAAEC,CAAS;IACtDA,KAAK;IACL,MAAME,IAAI,AAACH,IAAIpB,KAAKC,GAAG,CAACoB,GAAG,IAAIA,KAAM;IACrC,MAAMG,IAAI,CAACC;QACT,MAAMC,IAAI,AAACD,CAAAA,IAAIN,IAAI,EAAC,IAAK;QACzB,MAAMjB,QAAQmB,IAAIE,IAAIvB,KAAKK,GAAG,CAACL,KAAKC,GAAG,CAACyB,IAAI,GAAG,IAAIA,GAAG,IAAI,CAAC;QAC3D,OAAO1B,KAAK2B,KAAK,CAAC,MAAMzB,OACrB0B,QAAQ,CAAC,IACTC,QAAQ,CAAC,GAAG;IACjB;IACA,OAAO,CAAC,CAAC,EAAEL,EAAE,KAAKA,EAAE,KAAKA,EAAE,IAAI;AACjC"}
@@ -1,3 +0,0 @@
1
- import { TooltipComponentOption } from 'echarts';
2
- export declare const getTooltipPosition: TooltipComponentOption['position'];
3
- //# sourceMappingURL=get-tooltip-position.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"get-tooltip-position.d.ts","sourceRoot":"","sources":["../../../src/StatusHistoryChart/utils/get-tooltip-position.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEjD,eAAO,MAAM,kBAAkB,EAAE,sBAAsB,CAAC,UAAU,CAYjE,CAAC"}
@@ -1,27 +0,0 @@
1
- // Copyright 2024 The Perses Authors
2
- // Licensed under the Apache License, Version 2.0 (the "License");
3
- // you may not use this file except in compliance with the License.
4
- // You may obtain a copy of the License at
5
- //
6
- // http://www.apache.org/licenses/LICENSE-2.0
7
- //
8
- // Unless required by applicable law or agreed to in writing, software
9
- // distributed under the License is distributed on an "AS IS" BASIS,
10
- // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11
- // See the License for the specific language governing permissions and
12
- // limitations under the License.
13
- export const getTooltipPosition = (...data)=>{
14
- const point = data[0];
15
- const size = data[4];
16
- // calculate the position to avoid overflow
17
- const [x, y] = point;
18
- const { contentSize, viewSize } = size;
19
- const posX = x + contentSize[0] > viewSize[0] ? x - contentSize[0] : x;
20
- const posY = y + contentSize[1] > viewSize[1] ? y - contentSize[1] : y;
21
- return [
22
- posX,
23
- posY
24
- ];
25
- };
26
-
27
- //# sourceMappingURL=get-tooltip-position.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/StatusHistoryChart/utils/get-tooltip-position.ts"],"sourcesContent":["// Copyright 2024 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 { TooltipComponentOption } from 'echarts';\n\nexport const getTooltipPosition: TooltipComponentOption['position'] = (...data) => {\n const point = data[0];\n const size = data[4];\n\n // calculate the position to avoid overflow\n const [x, y] = point;\n const { contentSize, viewSize } = size;\n\n const posX = x + contentSize[0] > viewSize[0] ? x - contentSize[0] : x;\n const posY = y + contentSize[1] > viewSize[1] ? y - contentSize[1] : y;\n\n return [posX, posY];\n};\n"],"names":["getTooltipPosition","data","point","size","x","y","contentSize","viewSize","posX","posY"],"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;AAIjC,OAAO,MAAMA,qBAAyD,CAAC,GAAGC;IACxE,MAAMC,QAAQD,IAAI,CAAC,EAAE;IACrB,MAAME,OAAOF,IAAI,CAAC,EAAE;IAEpB,2CAA2C;IAC3C,MAAM,CAACG,GAAGC,EAAE,GAAGH;IACf,MAAM,EAAEI,WAAW,EAAEC,QAAQ,EAAE,GAAGJ;IAElC,MAAMK,OAAOJ,IAAIE,WAAW,CAAC,EAAE,GAAGC,QAAQ,CAAC,EAAE,GAAGH,IAAIE,WAAW,CAAC,EAAE,GAAGF;IACrE,MAAMK,OAAOJ,IAAIC,WAAW,CAAC,EAAE,GAAGC,QAAQ,CAAC,EAAE,GAAGF,IAAIC,WAAW,CAAC,EAAE,GAAGD;IAErE,OAAO;QAACG;QAAMC;KAAK;AACrB,EAAE"}
@@ -1,24 +0,0 @@
1
- import { MouseEvent } from 'react';
2
- import { TimeScale, FormatOptions, TimeSeries } from '@perses-dev/core';
3
- import type { EChartsCoreOption, GridComponentOption, YAXisComponentOption } from 'echarts';
4
- import { ChartInstance, TimeChartSeriesMapping } from '../model';
5
- import { ZoomEventData } from '../utils';
6
- import { TooltipConfig } from '../TimeSeriesTooltip';
7
- export interface TimeChartProps {
8
- height: number;
9
- data: TimeSeries[];
10
- seriesMapping: TimeChartSeriesMapping;
11
- timeScale?: TimeScale;
12
- yAxis?: YAXisComponentOption;
13
- format?: FormatOptions;
14
- grid?: GridComponentOption;
15
- tooltipConfig?: TooltipConfig;
16
- noDataVariant?: 'chart' | 'message';
17
- syncGroup?: string;
18
- isStackedBar?: boolean;
19
- onDataZoom?: (e: ZoomEventData) => void;
20
- onDoubleClick?: (e: MouseEvent) => void;
21
- __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;
22
- }
23
- export declare const TimeChart: import("react").ForwardRefExoticComponent<TimeChartProps & import("react").RefAttributes<ChartInstance>>;
24
- //# sourceMappingURL=TimeChart.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TimeChart.d.ts","sourceRoot":"","sources":["../../src/TimeChart/TimeChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,UAAU,EAA6D,MAAM,OAAO,CAAC;AAM1G,OAAO,EAAsB,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC5F,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAA0B,aAAa,EAAE,sBAAsB,EAA4B,MAAM,UAAU,CAAC;AAEnH,OAAO,EAQL,aAAa,EACd,MAAM,UAAU,CAAC;AAClB,OAAO,EAAuC,aAAa,EAA0B,MAAM,sBAAsB,CAAC;AAkBlH,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,SAAS,0GAyWpB,CAAC"}