@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.
- package/README.md +1 -8
- package/dist/EChart/EChart.d.ts.map +1 -1
- package/dist/EChart/EChart.js +13 -4
- package/dist/EChart/EChart.js.map +1 -1
- package/dist/TimeSeriesTooltip/index.d.ts +0 -1
- package/dist/TimeSeriesTooltip/index.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/index.js +0 -1
- package/dist/TimeSeriesTooltip/index.js.map +1 -1
- package/dist/cjs/EChart/EChart.js +11 -2
- package/dist/cjs/TimeSeriesTooltip/index.js +0 -1
- package/dist/cjs/context/ChartsProvider.js +3 -1
- package/dist/cjs/index.js +0 -7
- package/dist/cjs/test-utils/theme.js +1 -0
- package/dist/cjs/utils/axis.js +3 -18
- package/dist/cjs/utils/format.js +0 -21
- package/dist/context/ChartsProvider.d.ts +2 -0
- package/dist/context/ChartsProvider.d.ts.map +1 -1
- package/dist/context/ChartsProvider.js +3 -1
- package/dist/context/ChartsProvider.js.map +1 -1
- package/dist/index.d.ts +0 -7
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -7
- package/dist/index.js.map +1 -1
- package/dist/model/graph.d.ts +0 -1
- package/dist/model/graph.d.ts.map +1 -1
- package/dist/model/graph.js.map +1 -1
- package/dist/test-utils/theme.d.ts.map +1 -1
- package/dist/test-utils/theme.js +1 -0
- package/dist/test-utils/theme.js.map +1 -1
- package/dist/utils/axis.d.ts +0 -4
- package/dist/utils/axis.d.ts.map +1 -1
- package/dist/utils/axis.js +0 -9
- package/dist/utils/axis.js.map +1 -1
- package/dist/utils/chart-actions.d.ts +0 -2
- package/dist/utils/chart-actions.d.ts.map +1 -1
- package/dist/utils/chart-actions.js.map +1 -1
- package/dist/utils/format.d.ts +0 -1
- package/dist/utils/format.d.ts.map +1 -1
- package/dist/utils/format.js +0 -20
- package/dist/utils/format.js.map +1 -1
- package/package.json +4 -9
- package/dist/BarChart/BarChart.d.ts +0 -16
- package/dist/BarChart/BarChart.d.ts.map +0 -1
- package/dist/BarChart/BarChart.js +0 -134
- package/dist/BarChart/BarChart.js.map +0 -1
- package/dist/BarChart/index.d.ts +0 -2
- package/dist/BarChart/index.d.ts.map +0 -1
- package/dist/BarChart/index.js +0 -15
- package/dist/BarChart/index.js.map +0 -1
- package/dist/GaugeChart/GaugeChart.d.ts +0 -23
- package/dist/GaugeChart/GaugeChart.d.ts.map +0 -1
- package/dist/GaugeChart/GaugeChart.js +0 -214
- package/dist/GaugeChart/GaugeChart.js.map +0 -1
- package/dist/GaugeChart/index.d.ts +0 -2
- package/dist/GaugeChart/index.d.ts.map +0 -1
- package/dist/GaugeChart/index.js +0 -15
- package/dist/GaugeChart/index.js.map +0 -1
- package/dist/LineChart/LineChart.d.ts +0 -22
- package/dist/LineChart/LineChart.d.ts.map +0 -1
- package/dist/LineChart/LineChart.js +0 -266
- package/dist/LineChart/LineChart.js.map +0 -1
- package/dist/LineChart/index.d.ts +0 -2
- package/dist/LineChart/index.d.ts.map +0 -1
- package/dist/LineChart/index.js +0 -15
- package/dist/LineChart/index.js.map +0 -1
- package/dist/PieChart/PieChart.d.ts +0 -14
- package/dist/PieChart/PieChart.d.ts.map +0 -1
- package/dist/PieChart/PieChart.js +0 -92
- package/dist/PieChart/PieChart.js.map +0 -1
- package/dist/PieChart/index.d.ts +0 -2
- package/dist/PieChart/index.d.ts.map +0 -1
- package/dist/PieChart/index.js +0 -15
- package/dist/PieChart/index.js.map +0 -1
- package/dist/StatChart/StatChart.d.ts +0 -21
- package/dist/StatChart/StatChart.d.ts.map +0 -1
- package/dist/StatChart/StatChart.js +0 -189
- package/dist/StatChart/StatChart.js.map +0 -1
- package/dist/StatChart/calculateFontSize.d.ts +0 -16
- package/dist/StatChart/calculateFontSize.d.ts.map +0 -1
- package/dist/StatChart/calculateFontSize.js +0 -49
- package/dist/StatChart/calculateFontSize.js.map +0 -1
- package/dist/StatChart/index.d.ts +0 -2
- package/dist/StatChart/index.d.ts.map +0 -1
- package/dist/StatChart/index.js +0 -15
- package/dist/StatChart/index.js.map +0 -1
- package/dist/StatChart/utils/formatStatChartValue.d.ts +0 -3
- package/dist/StatChart/utils/formatStatChartValue.d.ts.map +0 -1
- package/dist/StatChart/utils/formatStatChartValue.js +0 -26
- package/dist/StatChart/utils/formatStatChartValue.js.map +0 -1
- package/dist/StatusHistoryChart/StatusHistoryChart.d.ts +0 -27
- package/dist/StatusHistoryChart/StatusHistoryChart.d.ts.map +0 -1
- package/dist/StatusHistoryChart/StatusHistoryChart.js +0 -132
- package/dist/StatusHistoryChart/StatusHistoryChart.js.map +0 -1
- package/dist/StatusHistoryChart/StatusHistoryTooltip.d.ts +0 -13
- package/dist/StatusHistoryChart/StatusHistoryTooltip.d.ts.map +0 -1
- package/dist/StatusHistoryChart/StatusHistoryTooltip.js +0 -47
- package/dist/StatusHistoryChart/StatusHistoryTooltip.js.map +0 -1
- package/dist/StatusHistoryChart/get-formatted-axis-label.d.ts +0 -2
- package/dist/StatusHistoryChart/get-formatted-axis-label.d.ts.map +0 -1
- package/dist/StatusHistoryChart/get-formatted-axis-label.js +0 -41
- package/dist/StatusHistoryChart/get-formatted-axis-label.js.map +0 -1
- package/dist/StatusHistoryChart/index.d.ts +0 -3
- package/dist/StatusHistoryChart/index.d.ts.map +0 -1
- package/dist/StatusHistoryChart/index.js +0 -16
- package/dist/StatusHistoryChart/index.js.map +0 -1
- package/dist/StatusHistoryChart/utils/get-color.d.ts +0 -6
- package/dist/StatusHistoryChart/utils/get-color.d.ts.map +0 -1
- package/dist/StatusHistoryChart/utils/get-color.js +0 -100
- package/dist/StatusHistoryChart/utils/get-color.js.map +0 -1
- package/dist/StatusHistoryChart/utils/get-tooltip-position.d.ts +0 -3
- package/dist/StatusHistoryChart/utils/get-tooltip-position.d.ts.map +0 -1
- package/dist/StatusHistoryChart/utils/get-tooltip-position.js +0 -27
- package/dist/StatusHistoryChart/utils/get-tooltip-position.js.map +0 -1
- package/dist/TimeChart/TimeChart.d.ts +0 -24
- package/dist/TimeChart/TimeChart.d.ts.map +0 -1
- package/dist/TimeChart/TimeChart.js +0 -394
- package/dist/TimeChart/TimeChart.js.map +0 -1
- package/dist/TimeChart/index.d.ts +0 -2
- package/dist/TimeChart/index.d.ts.map +0 -1
- package/dist/TimeChart/index.js +0 -15
- package/dist/TimeChart/index.js.map +0 -1
- package/dist/TimeSeriesTooltip/LineChartTooltip.d.ts +0 -21
- package/dist/TimeSeriesTooltip/LineChartTooltip.d.ts.map +0 -1
- package/dist/TimeSeriesTooltip/LineChartTooltip.js +0 -101
- package/dist/TimeSeriesTooltip/LineChartTooltip.js.map +0 -1
- package/dist/cjs/BarChart/BarChart.js +0 -142
- package/dist/cjs/BarChart/index.js +0 -30
- package/dist/cjs/GaugeChart/GaugeChart.js +0 -227
- package/dist/cjs/GaugeChart/index.js +0 -30
- package/dist/cjs/LineChart/LineChart.js +0 -274
- package/dist/cjs/LineChart/index.js +0 -30
- package/dist/cjs/PieChart/PieChart.js +0 -100
- package/dist/cjs/PieChart/index.js +0 -30
- package/dist/cjs/StatChart/StatChart.js +0 -202
- package/dist/cjs/StatChart/calculateFontSize.js +0 -55
- package/dist/cjs/StatChart/index.js +0 -30
- package/dist/cjs/StatChart/utils/formatStatChartValue.js +0 -34
- package/dist/cjs/StatusHistoryChart/StatusHistoryChart.js +0 -140
- package/dist/cjs/StatusHistoryChart/StatusHistoryTooltip.js +0 -55
- package/dist/cjs/StatusHistoryChart/get-formatted-axis-label.js +0 -48
- package/dist/cjs/StatusHistoryChart/index.js +0 -31
- package/dist/cjs/StatusHistoryChart/utils/get-color.js +0 -125
- package/dist/cjs/StatusHistoryChart/utils/get-tooltip-position.js +0 -35
- package/dist/cjs/TimeChart/TimeChart.js +0 -407
- package/dist/cjs/TimeChart/index.js +0 -30
- 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 +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 +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":"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"}
|
|
@@ -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"}
|