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

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 +2 -7
  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,92 +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 { use } from 'echarts/core';
15
- import { PieChart as EChartsPieChart } from 'echarts/charts';
16
- import { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';
17
- import { CanvasRenderer } from 'echarts/renderers';
18
- import { Box } from '@mui/material';
19
- import { useChartsTheme } from '../context/ChartsProvider';
20
- import { EChart } from '../EChart';
21
- use([
22
- EChartsPieChart,
23
- GridComponent,
24
- DatasetComponent,
25
- TitleComponent,
26
- TooltipComponent,
27
- CanvasRenderer
28
- ]);
29
- const PIE_WIN_WIDTH = 12;
30
- const PIE_GAP = 4;
31
- export function PieChart(props) {
32
- const { width, height, data } = props;
33
- const chartsTheme = useChartsTheme();
34
- const option = {
35
- title: {
36
- text: 'Referer of a Website',
37
- subtext: 'Fake Data',
38
- left: 'center'
39
- },
40
- tooltip: {
41
- trigger: 'item',
42
- formatter: '{a} <br/>{b} : {c} ({d}%)'
43
- },
44
- axisLabel: {
45
- overflow: 'truncate',
46
- width: width / 3
47
- },
48
- series: [
49
- {
50
- name: 'Access From',
51
- type: 'pie',
52
- radius: '55%',
53
- label: false,
54
- center: [
55
- '40%',
56
- '50%'
57
- ],
58
- data: data,
59
- emphasis: {
60
- itemStyle: {
61
- shadowBlur: 10,
62
- shadowOffsetX: 0,
63
- shadowColor: 'rgba(0, 0, 0, 0.5)'
64
- }
65
- }
66
- }
67
- ],
68
- itemStyle: {
69
- borderRadius: 2,
70
- color: chartsTheme.echartsTheme[0]
71
- }
72
- };
73
- return /*#__PURE__*/ _jsx(Box, {
74
- style: {
75
- width: width,
76
- height: height
77
- },
78
- sx: {
79
- overflow: 'auto'
80
- },
81
- children: /*#__PURE__*/ _jsx(EChart, {
82
- sx: {
83
- minHeight: height,
84
- height: data ? data.length * (PIE_WIN_WIDTH + PIE_GAP) : '100%'
85
- },
86
- option: option,
87
- theme: chartsTheme.echartsTheme
88
- })
89
- });
90
- }
91
-
92
- //# sourceMappingURL=PieChart.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/PieChart/PieChart.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 { use } from 'echarts/core';\nimport { PieChart as EChartsPieChart } from 'echarts/charts';\nimport {\n GridComponent,\n DatasetComponent,\n TitleComponent,\n TooltipComponent,\n LegendComponentOption,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { Box } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { EChart } from '../EChart';\n\nuse([EChartsPieChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst PIE_WIN_WIDTH = 12;\nconst PIE_GAP = 4;\nexport interface PieChartData {\n name: string;\n value: number | null;\n}\n\nexport interface PieChartProps {\n width: number;\n height: number;\n data: PieChartData[] | null;\n legend?: LegendComponentOption;\n}\n\nexport function PieChart(props: PieChartProps): ReactElement {\n const { width, height, data } = props;\n const chartsTheme = useChartsTheme();\n\n const option = {\n title: {\n text: 'Referer of a Website',\n subtext: 'Fake Data',\n left: 'center',\n },\n tooltip: {\n trigger: 'item',\n formatter: '{a} <br/>{b} : {c} ({d}%)',\n },\n axisLabel: {\n overflow: 'truncate',\n width: width / 3,\n },\n series: [\n {\n name: 'Access From',\n type: 'pie',\n radius: '55%',\n label: false,\n center: ['40%', '50%'],\n data: data,\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n },\n },\n },\n ],\n itemStyle: {\n borderRadius: 2,\n color: chartsTheme.echartsTheme[0],\n },\n };\n\n return (\n <Box\n style={{\n width: width,\n height: height,\n }}\n sx={{ overflow: 'auto' }}\n >\n <EChart\n sx={{\n minHeight: height,\n height: data ? data.length * (PIE_WIN_WIDTH + PIE_GAP) : '100%',\n }}\n option={option}\n theme={chartsTheme.echartsTheme}\n />\n </Box>\n );\n}\n"],"names":["use","PieChart","EChartsPieChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","Box","useChartsTheme","EChart","PIE_WIN_WIDTH","PIE_GAP","props","width","height","data","chartsTheme","option","title","text","subtext","left","tooltip","trigger","formatter","axisLabel","overflow","series","name","type","radius","label","center","emphasis","itemStyle","shadowBlur","shadowOffsetX","shadowColor","borderRadius","color","echartsTheme","style","sx","minHeight","length","theme"],"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,QAAQ,eAAe;AACnC,SAASC,YAAYC,eAAe,QAAQ,iBAAiB;AAC7D,SACEC,aAAa,EACbC,gBAAgB,EAChBC,cAAc,EACdC,gBAAgB,QAEX,qBAAqB;AAC5B,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,GAAG,QAAQ,gBAAgB;AAEpC,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,MAAM,QAAQ,YAAY;AAEnCV,IAAI;IAACE;IAAiBC;IAAeC;IAAkBC;IAAgBC;IAAkBC;CAAe;AAExG,MAAMI,gBAAgB;AACtB,MAAMC,UAAU;AAahB,OAAO,SAASX,SAASY,KAAoB;IAC3C,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGH;IAChC,MAAMI,cAAcR;IAEpB,MAAMS,SAAS;QACbC,OAAO;YACLC,MAAM;YACNC,SAAS;YACTC,MAAM;QACR;QACAC,SAAS;YACPC,SAAS;YACTC,WAAW;QACb;QACAC,WAAW;YACTC,UAAU;YACVb,OAAOA,QAAQ;QACjB;QACAc,QAAQ;YACN;gBACEC,MAAM;gBACNC,MAAM;gBACNC,QAAQ;gBACRC,OAAO;gBACPC,QAAQ;oBAAC;oBAAO;iBAAM;gBACtBjB,MAAMA;gBACNkB,UAAU;oBACRC,WAAW;wBACTC,YAAY;wBACZC,eAAe;wBACfC,aAAa;oBACf;gBACF;YACF;SACD;QACDH,WAAW;YACTI,cAAc;YACdC,OAAOvB,YAAYwB,YAAY,CAAC,EAAE;QACpC;IACF;IAEA,qBACE,KAACjC;QACCkC,OAAO;YACL5B,OAAOA;YACPC,QAAQA;QACV;QACA4B,IAAI;YAAEhB,UAAU;QAAO;kBAEvB,cAAA,KAACjB;YACCiC,IAAI;gBACFC,WAAW7B;gBACXA,QAAQC,OAAOA,KAAK6B,MAAM,GAAIlC,CAAAA,gBAAgBC,OAAM,IAAK;YAC3D;YACAM,QAAQA;YACR4B,OAAO7B,YAAYwB,YAAY;;;AAIvC"}
@@ -1,2 +0,0 @@
1
- export * from './PieChart';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/PieChart/index.ts"],"names":[],"mappings":"AAaA,cAAc,YAAY,CAAC"}
@@ -1,15 +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 * from './PieChart';
14
-
15
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/PieChart/index.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 * from './PieChart';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,aAAa"}
@@ -1,21 +0,0 @@
1
- import { FC } from 'react';
2
- import { FormatOptions } from '@perses-dev/core';
3
- import { LineSeriesOption } from 'echarts/charts';
4
- import { GraphSeries } from '../model';
5
- import { FontSizeOption } from '../FontSizeSelector';
6
- export interface StatChartData {
7
- color: string;
8
- calculatedValue?: string | number | null;
9
- seriesData?: GraphSeries;
10
- }
11
- export interface StatChartProps {
12
- width: number;
13
- height: number;
14
- data: StatChartData;
15
- format?: FormatOptions;
16
- sparkline?: LineSeriesOption;
17
- showSeriesName?: boolean;
18
- valueFontSize?: FontSizeOption;
19
- }
20
- export declare const StatChart: FC<StatChartProps>;
21
- //# sourceMappingURL=StatChart.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKjF,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAWrD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,cAAc,CAAC;CAChC;AAED,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAqIxC,CAAC"}
@@ -1,189 +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
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
14
- import { useMemo } from 'react';
15
- import { Box, Typography, styled } from '@mui/material';
16
- import merge from 'lodash/merge';
17
- import { use } from 'echarts/core';
18
- import { LineChart as EChartsLineChart } from 'echarts/charts';
19
- import { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';
20
- import { CanvasRenderer } from 'echarts/renderers';
21
- import { useChartsTheme } from '../context';
22
- import { EChart } from '../EChart';
23
- import { useOptimalFontSize } from './calculateFontSize';
24
- import { formatStatChartValue } from './utils/formatStatChartValue';
25
- use([
26
- EChartsLineChart,
27
- GridComponent,
28
- DatasetComponent,
29
- TitleComponent,
30
- TooltipComponent,
31
- CanvasRenderer
32
- ]);
33
- const LINE_HEIGHT = 1.2;
34
- const SERIES_NAME_MAX_FONT_SIZE = 30;
35
- const SERIES_NAME_FONT_WEIGHT = 400;
36
- const VALUE_FONT_WEIGHT = 700;
37
- export const StatChart = (props)=>{
38
- const { width, height, data, sparkline, showSeriesName, format, valueFontSize } = props;
39
- const chartsTheme = useChartsTheme();
40
- const color = data.color;
41
- const formattedValue = formatStatChartValue(data.calculatedValue, format);
42
- const containerPadding = chartsTheme.container.padding.default;
43
- // calculate series name font size and height
44
- let seriesNameFontSize = useOptimalFontSize({
45
- text: data?.seriesData?.name ?? '',
46
- fontWeight: SERIES_NAME_FONT_WEIGHT,
47
- width,
48
- height: height * 0.125,
49
- lineHeight: LINE_HEIGHT,
50
- maxSize: SERIES_NAME_MAX_FONT_SIZE
51
- });
52
- const seriesNameHeight = showSeriesName ? seriesNameFontSize * LINE_HEIGHT + containerPadding : 0;
53
- // calculate value font size and height
54
- const availableWidth = width - containerPadding * 2;
55
- const availableHeight = height - seriesNameHeight;
56
- const optimalValueFontSize = useOptimalFontSize({
57
- text: formattedValue,
58
- // override the font size if user selects it in the settings
59
- fontSizeOverride: valueFontSize,
60
- fontWeight: VALUE_FONT_WEIGHT,
61
- // without sparkline, use only 50% of the available width so it looks better for multiseries
62
- width: sparkline ? availableWidth : availableWidth * 0.5,
63
- // with sparkline, use only 25% of available height to leave room for chart
64
- // without sparkline, value should take up 90% of available space
65
- height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,
66
- lineHeight: LINE_HEIGHT
67
- });
68
- const valueFontHeight = optimalValueFontSize * LINE_HEIGHT;
69
- // make sure the series name font size is slightly smaller than value font size
70
- seriesNameFontSize = Math.min(optimalValueFontSize * 0.7, seriesNameFontSize);
71
- const option = useMemo(()=>{
72
- if (data.seriesData === undefined) return chartsTheme.noDataOption;
73
- const series = data.seriesData;
74
- const statSeries = [];
75
- if (sparkline !== undefined) {
76
- const lineSeries = {
77
- type: 'line',
78
- name: series.name,
79
- data: series.values,
80
- zlevel: 1,
81
- symbol: 'none',
82
- animation: false,
83
- silent: true
84
- };
85
- const mergedSeries = merge(lineSeries, sparkline);
86
- statSeries.push(mergedSeries);
87
- }
88
- const option = {
89
- title: {
90
- show: false
91
- },
92
- grid: {
93
- show: false,
94
- top: '35%',
95
- right: 0,
96
- bottom: 0,
97
- left: 0,
98
- containLabel: false
99
- },
100
- xAxis: {
101
- type: 'time',
102
- show: false,
103
- boundaryGap: false
104
- },
105
- yAxis: {
106
- type: 'value',
107
- show: false,
108
- min: (value)=>{
109
- if (value.min >= 0 && value.min <= 1) {
110
- // helps with percent-decimal units, or datasets that return 0 or 1 booleans
111
- return 0;
112
- }
113
- return value.min;
114
- }
115
- },
116
- tooltip: {
117
- show: false
118
- },
119
- series: statSeries
120
- };
121
- return option;
122
- }, [
123
- data,
124
- chartsTheme,
125
- sparkline
126
- ]);
127
- const textAlignment = sparkline ? 'auto' : 'center';
128
- const textStyles = {
129
- display: 'flex',
130
- flexDirection: 'column',
131
- justifyContent: textAlignment,
132
- alignItems: textAlignment
133
- };
134
- return /*#__PURE__*/ _jsxs(Box, {
135
- sx: {
136
- height: '100%',
137
- width: '100%',
138
- ...textStyles
139
- },
140
- children: [
141
- showSeriesName && /*#__PURE__*/ _jsx(SeriesName, {
142
- padding: containerPadding,
143
- fontSize: seriesNameFontSize,
144
- children: data.seriesData?.name
145
- }),
146
- /*#__PURE__*/ _jsx(Value, {
147
- variant: "h3",
148
- color: color,
149
- fontSize: optimalValueFontSize,
150
- padding: containerPadding,
151
- children: formattedValue
152
- }),
153
- sparkline !== undefined && /*#__PURE__*/ _jsx(EChart, {
154
- sx: {
155
- width: '100%'
156
- },
157
- style: {
158
- // ECharts rounds the height to the nearest integer by default.
159
- // This can cause unneccessary scrollbars when the total height of this chart exceeds the 'height' prop.
160
- height: Math.floor(height - seriesNameHeight - valueFontHeight)
161
- },
162
- option: option,
163
- theme: chartsTheme.echartsTheme,
164
- renderer: "svg"
165
- })
166
- ]
167
- });
168
- };
169
- const SeriesName = styled(Typography, {
170
- shouldForwardProp: (prop)=>prop !== 'padding' && prop !== 'fontSize'
171
- })(({ theme, padding, fontSize })=>({
172
- color: theme.palette.text.secondary,
173
- padding: `${padding}px`,
174
- fontSize: `${fontSize}px`,
175
- overflow: 'hidden',
176
- textOverflow: 'ellipsis',
177
- whiteSpace: 'nowrap'
178
- }));
179
- const Value = styled(Typography, {
180
- shouldForwardProp: (prop)=>prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline'
181
- })(({ theme, color, padding, fontSize, sparkline })=>({
182
- color: color ?? theme.palette.text.primary,
183
- fontSize: `${fontSize}px`,
184
- padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,
185
- whiteSpace: 'nowrap',
186
- lineHeight: LINE_HEIGHT
187
- }));
188
-
189
- //# sourceMappingURL=StatChart.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/StatChart/StatChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FC, useMemo } from 'react';\nimport { FormatOptions } from '@perses-dev/core';\nimport { Box, Typography, styled } from '@mui/material';\nimport merge from 'lodash/merge';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { LineChart as EChartsLineChart, LineSeriesOption } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model';\nimport { FontSizeOption } from '../FontSizeSelector';\nimport { useOptimalFontSize } from './calculateFontSize';\nimport { formatStatChartValue } from './utils/formatStatChartValue';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst LINE_HEIGHT = 1.2;\nconst SERIES_NAME_MAX_FONT_SIZE = 30;\nconst SERIES_NAME_FONT_WEIGHT = 400;\nconst VALUE_FONT_WEIGHT = 700;\n\nexport interface StatChartData {\n color: string;\n calculatedValue?: string | number | null;\n seriesData?: GraphSeries;\n}\n\nexport interface StatChartProps {\n width: number;\n height: number;\n data: StatChartData;\n format?: FormatOptions;\n sparkline?: LineSeriesOption;\n showSeriesName?: boolean;\n valueFontSize?: FontSizeOption;\n}\n\nexport const StatChart: FC<StatChartProps> = (props) => {\n const { width, height, data, sparkline, showSeriesName, format, valueFontSize } = props;\n const chartsTheme = useChartsTheme();\n const color = data.color;\n\n const formattedValue = formatStatChartValue(data.calculatedValue, format);\n\n const containerPadding = chartsTheme.container.padding.default;\n\n // calculate series name font size and height\n let seriesNameFontSize = useOptimalFontSize({\n text: data?.seriesData?.name ?? '',\n fontWeight: SERIES_NAME_FONT_WEIGHT,\n width,\n height: height * 0.125, // assume series name will take 12.5% of available height\n lineHeight: LINE_HEIGHT,\n maxSize: SERIES_NAME_MAX_FONT_SIZE,\n });\n\n const seriesNameHeight = showSeriesName ? seriesNameFontSize * LINE_HEIGHT + containerPadding : 0;\n\n // calculate value font size and height\n const availableWidth = width - containerPadding * 2;\n const availableHeight = height - seriesNameHeight;\n const optimalValueFontSize = useOptimalFontSize({\n text: formattedValue,\n // override the font size if user selects it in the settings\n fontSizeOverride: valueFontSize,\n fontWeight: VALUE_FONT_WEIGHT,\n // without sparkline, use only 50% of the available width so it looks better for multiseries\n width: sparkline ? availableWidth : availableWidth * 0.5,\n // with sparkline, use only 25% of available height to leave room for chart\n // without sparkline, value should take up 90% of available space\n height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,\n lineHeight: LINE_HEIGHT,\n });\n const valueFontHeight = optimalValueFontSize * LINE_HEIGHT;\n\n // make sure the series name font size is slightly smaller than value font size\n seriesNameFontSize = Math.min(optimalValueFontSize * 0.7, seriesNameFontSize);\n\n const option: EChartsCoreOption = useMemo(() => {\n if (data.seriesData === undefined) return chartsTheme.noDataOption;\n\n const series = data.seriesData;\n const statSeries: LineSeriesOption[] = [];\n\n if (sparkline !== undefined) {\n const lineSeries = {\n type: 'line',\n name: series.name,\n data: series.values,\n zlevel: 1,\n symbol: 'none',\n animation: false,\n silent: true,\n };\n const mergedSeries = merge(lineSeries, sparkline);\n statSeries.push(mergedSeries);\n }\n\n const option = {\n title: {\n show: false,\n },\n grid: {\n show: false,\n top: '35%', // adds space above sparkline\n right: 0,\n bottom: 0,\n left: 0,\n containLabel: false,\n },\n xAxis: {\n type: 'time',\n show: false,\n boundaryGap: false,\n },\n yAxis: {\n type: 'value',\n show: false,\n min: (value: { min: number; max: number }): number => {\n if (value.min >= 0 && value.min <= 1) {\n // helps with percent-decimal units, or datasets that return 0 or 1 booleans\n return 0;\n }\n return value.min;\n },\n },\n tooltip: {\n show: false,\n },\n series: statSeries,\n };\n\n return option;\n }, [data, chartsTheme, sparkline]);\n\n const textAlignment = sparkline ? 'auto' : 'center';\n const textStyles = {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: textAlignment,\n alignItems: textAlignment,\n };\n\n return (\n <Box sx={{ height: '100%', width: '100%', ...textStyles }}>\n {showSeriesName && (\n <SeriesName padding={containerPadding} fontSize={seriesNameFontSize}>\n {data.seriesData?.name}\n </SeriesName>\n )}\n <Value variant=\"h3\" color={color} fontSize={optimalValueFontSize} padding={containerPadding}>\n {formattedValue}\n </Value>\n {sparkline !== undefined && (\n <EChart\n sx={{\n width: '100%',\n }}\n style={{\n // ECharts rounds the height to the nearest integer by default.\n // This can cause unneccessary scrollbars when the total height of this chart exceeds the 'height' prop.\n height: Math.floor(height - seriesNameHeight - valueFontHeight),\n }}\n option={option}\n theme={chartsTheme.echartsTheme}\n renderer=\"svg\"\n />\n )}\n </Box>\n );\n};\n\nconst SeriesName = styled(Typography, {\n shouldForwardProp: (prop) => prop !== 'padding' && prop !== 'fontSize',\n})<{ padding?: number; fontSize?: number; textAlignment?: string }>(({ theme, padding, fontSize }) => ({\n color: theme.palette.text.secondary,\n padding: `${padding}px`,\n fontSize: `${fontSize}px`,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n}));\n\nconst Value = styled(Typography, {\n shouldForwardProp: (prop) => prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline',\n})<{ color?: string; padding?: number; fontSize?: number; sparkline?: boolean }>(\n ({ theme, color, padding, fontSize, sparkline }) => ({\n color: color ?? theme.palette.text.primary,\n fontSize: `${fontSize}px`,\n padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,\n whiteSpace: 'nowrap',\n lineHeight: LINE_HEIGHT,\n })\n);\n"],"names":["useMemo","Box","Typography","styled","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","EChart","useOptimalFontSize","formatStatChartValue","LINE_HEIGHT","SERIES_NAME_MAX_FONT_SIZE","SERIES_NAME_FONT_WEIGHT","VALUE_FONT_WEIGHT","StatChart","props","width","height","data","sparkline","showSeriesName","format","valueFontSize","chartsTheme","color","formattedValue","calculatedValue","containerPadding","container","padding","default","seriesNameFontSize","text","seriesData","name","fontWeight","lineHeight","maxSize","seriesNameHeight","availableWidth","availableHeight","optimalValueFontSize","fontSizeOverride","valueFontHeight","Math","min","option","undefined","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","value","tooltip","textAlignment","textStyles","display","flexDirection","justifyContent","alignItems","sx","SeriesName","fontSize","Value","variant","style","floor","theme","echartsTheme","renderer","shouldForwardProp","prop","palette","secondary","overflow","textOverflow","whiteSpace","primary"],"mappings":"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"}
@@ -1,16 +0,0 @@
1
- import { FontSizeOption } from '../FontSizeSelector';
2
- interface CalculateFontSize {
3
- text: string;
4
- fontWeight: number;
5
- width: number;
6
- height: number;
7
- lineHeight: number;
8
- maxSize?: number;
9
- fontSizeOverride?: FontSizeOption;
10
- }
11
- /**
12
- * Find the optimal font size given available space
13
- */
14
- export declare function useOptimalFontSize({ text, fontWeight, width, height, lineHeight, maxSize, fontSizeOverride, }: CalculateFontSize): number;
15
- export {};
16
- //# sourceMappingURL=calculateFontSize.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"calculateFontSize.d.ts","sourceRoot":"","sources":["../../src/StatChart/calculateFontSize.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,cAAc,CAAC;CACnC;AAcD;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,UAAU,EACV,KAAK,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,gBAAgB,GACjB,EAAE,iBAAiB,GAAG,MAAM,CA0B5B"}
@@ -1,49 +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
- import { useChartsTheme } from '../context/ChartsProvider';
14
- let canvasContext;
15
- function getGlobalCanvasContext() {
16
- if (!canvasContext) {
17
- canvasContext = document.createElement('canvas').getContext('2d');
18
- if (canvasContext === null) {
19
- throw new Error('Canvas context is null.');
20
- }
21
- }
22
- return canvasContext;
23
- }
24
- /**
25
- * Find the optimal font size given available space
26
- */ export function useOptimalFontSize({ text, fontWeight, width, height, lineHeight, maxSize, fontSizeOverride }) {
27
- const ctx = getGlobalCanvasContext();
28
- const { echartsTheme } = useChartsTheme();
29
- // if user has selected a font size in the settings, use it instead of calculating the optimal size
30
- if (fontSizeOverride !== undefined) {
31
- return Number(fontSizeOverride);
32
- }
33
- const textStyle = echartsTheme.textStyle;
34
- const fontSize = Number(textStyle?.fontSize) ?? 12;
35
- const fontFamily = textStyle?.fontFamily ?? 'Lato';
36
- // set the font on the canvas context
37
- const fontStyle = `${fontWeight} ${fontSize}px ${fontFamily}`;
38
- ctx.font = fontStyle;
39
- // measure the width of the text with the given font style
40
- const textMetrics = ctx.measureText(text);
41
- // check how much bigger we can make the font while staying within the width and height
42
- const fontSizeBasedOnWidth = width / textMetrics.width * fontSize;
43
- const fontSizeBasedOnHeight = height / lineHeight;
44
- // return the smaller font size
45
- const finalFontSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth);
46
- return maxSize ? Math.min(finalFontSize, maxSize) : finalFontSize;
47
- }
48
-
49
- //# sourceMappingURL=calculateFontSize.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/StatChart/calculateFontSize.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\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { FontSizeOption } from '../FontSizeSelector';\n\ninterface CalculateFontSize {\n text: string;\n fontWeight: number;\n width: number;\n height: number;\n lineHeight: number;\n maxSize?: number;\n fontSizeOverride?: FontSizeOption;\n}\n\nlet canvasContext: CanvasRenderingContext2D | null;\n\nfunction getGlobalCanvasContext(): CanvasRenderingContext2D {\n if (!canvasContext) {\n canvasContext = document.createElement('canvas').getContext('2d');\n if (canvasContext === null) {\n throw new Error('Canvas context is null.');\n }\n }\n return canvasContext;\n}\n\n/**\n * Find the optimal font size given available space\n */\nexport function useOptimalFontSize({\n text,\n fontWeight,\n width,\n height,\n lineHeight,\n maxSize,\n fontSizeOverride,\n}: CalculateFontSize): number {\n const ctx = getGlobalCanvasContext();\n const { echartsTheme } = useChartsTheme();\n\n // if user has selected a font size in the settings, use it instead of calculating the optimal size\n if (fontSizeOverride !== undefined) {\n return Number(fontSizeOverride);\n }\n\n const textStyle = echartsTheme.textStyle;\n const fontSize = Number(textStyle?.fontSize) ?? 12;\n const fontFamily = textStyle?.fontFamily ?? 'Lato';\n\n // set the font on the canvas context\n const fontStyle = `${fontWeight} ${fontSize}px ${fontFamily}`;\n ctx.font = fontStyle;\n // measure the width of the text with the given font style\n const textMetrics: TextMetrics = ctx.measureText(text);\n\n // check how much bigger we can make the font while staying within the width and height\n const fontSizeBasedOnWidth = (width / textMetrics.width) * fontSize;\n const fontSizeBasedOnHeight = height / lineHeight;\n\n // return the smaller font size\n const finalFontSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth);\n return maxSize ? Math.min(finalFontSize, maxSize) : finalFontSize;\n}\n"],"names":["useChartsTheme","canvasContext","getGlobalCanvasContext","document","createElement","getContext","Error","useOptimalFontSize","text","fontWeight","width","height","lineHeight","maxSize","fontSizeOverride","ctx","echartsTheme","undefined","Number","textStyle","fontSize","fontFamily","fontStyle","font","textMetrics","measureText","fontSizeBasedOnWidth","fontSizeBasedOnHeight","finalFontSize","Math","min"],"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,cAAc,QAAQ,4BAA4B;AAa3D,IAAIC;AAEJ,SAASC;IACP,IAAI,CAACD,eAAe;QAClBA,gBAAgBE,SAASC,aAAa,CAAC,UAAUC,UAAU,CAAC;QAC5D,IAAIJ,kBAAkB,MAAM;YAC1B,MAAM,IAAIK,MAAM;QAClB;IACF;IACA,OAAOL;AACT;AAEA;;CAEC,GACD,OAAO,SAASM,mBAAmB,EACjCC,IAAI,EACJC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,OAAO,EACPC,gBAAgB,EACE;IAClB,MAAMC,MAAMb;IACZ,MAAM,EAAEc,YAAY,EAAE,GAAGhB;IAEzB,mGAAmG;IACnG,IAAIc,qBAAqBG,WAAW;QAClC,OAAOC,OAAOJ;IAChB;IAEA,MAAMK,YAAYH,aAAaG,SAAS;IACxC,MAAMC,WAAWF,OAAOC,WAAWC,aAAa;IAChD,MAAMC,aAAaF,WAAWE,cAAc;IAE5C,qCAAqC;IACrC,MAAMC,YAAY,GAAGb,WAAW,CAAC,EAAEW,SAAS,GAAG,EAAEC,YAAY;IAC7DN,IAAIQ,IAAI,GAAGD;IACX,0DAA0D;IAC1D,MAAME,cAA2BT,IAAIU,WAAW,CAACjB;IAEjD,uFAAuF;IACvF,MAAMkB,uBAAuB,AAAChB,QAAQc,YAAYd,KAAK,GAAIU;IAC3D,MAAMO,wBAAwBhB,SAASC;IAEvC,+BAA+B;IAC/B,MAAMgB,gBAAgBC,KAAKC,GAAG,CAACH,uBAAuBD;IACtD,OAAOb,UAAUgB,KAAKC,GAAG,CAACF,eAAef,WAAWe;AACtD"}
@@ -1,2 +0,0 @@
1
- export * from './StatChart';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/StatChart/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC"}
@@ -1,15 +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 './StatChart';
14
-
15
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/StatChart/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 './StatChart';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,cAAc"}
@@ -1,3 +0,0 @@
1
- import { FormatOptions } from '@perses-dev/core';
2
- export declare const formatStatChartValue: (value?: string | number | null, format?: FormatOptions) => string;
3
- //# sourceMappingURL=formatStatChartValue.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"formatStatChartValue.d.ts","sourceRoot":"","sources":["../../../src/StatChart/utils/formatStatChartValue.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAe,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,oBAAoB,WAAY,MAAM,GAAG,MAAM,GAAG,IAAI,WAAW,aAAa,KAAG,MAU7F,CAAC"}
@@ -1,26 +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 { formatValue } from '@perses-dev/core';
14
- export const formatStatChartValue = (value, format)=>{
15
- if (value === null) {
16
- return 'null';
17
- } else if (typeof value === 'number') {
18
- return formatValue(value, format);
19
- } else if (value === undefined) {
20
- return '';
21
- } else {
22
- return value;
23
- }
24
- };
25
-
26
- //# sourceMappingURL=formatStatChartValue.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/StatChart/utils/formatStatChartValue.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 { FormatOptions, formatValue } from '@perses-dev/core';\n\nexport const formatStatChartValue = (value?: string | number | null, format?: FormatOptions): string => {\n if (value === null) {\n return 'null';\n } else if (typeof value === 'number') {\n return formatValue(value, format);\n } else if (value === undefined) {\n return '';\n } else {\n return value;\n }\n};\n"],"names":["formatValue","formatStatChartValue","value","format","undefined"],"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,SAAwBA,WAAW,QAAQ,mBAAmB;AAE9D,OAAO,MAAMC,uBAAuB,CAACC,OAAgCC;IACnE,IAAID,UAAU,MAAM;QAClB,OAAO;IACT,OAAO,IAAI,OAAOA,UAAU,UAAU;QACpC,OAAOF,YAAYE,OAAOC;IAC5B,OAAO,IAAID,UAAUE,WAAW;QAC9B,OAAO;IACT,OAAO;QACL,OAAOF;IACT;AACF,EAAE"}
@@ -1,27 +0,0 @@
1
- import { LegendComponentOption } from 'echarts/components';
2
- import { TimeScale } from '@perses-dev/core';
3
- import { FC } from 'react';
4
- export type StatusHistoryData = [number, number, number | undefined];
5
- export interface StatusHistoryDataItem {
6
- value: StatusHistoryData;
7
- label?: string;
8
- itemStyle?: {
9
- color?: string;
10
- borderColor?: string;
11
- borderWidth?: number;
12
- };
13
- }
14
- export interface StatusHistoryChartProps {
15
- height: number;
16
- data: StatusHistoryDataItem[];
17
- xAxisCategories: number[];
18
- yAxisCategories: string[];
19
- legend?: LegendComponentOption;
20
- timeScale?: TimeScale;
21
- colors?: Array<{
22
- value: number | string;
23
- color: string;
24
- }>;
25
- }
26
- export declare const StatusHistoryChart: FC<StatusHistoryChartProps>;
27
- //# sourceMappingURL=StatusHistoryChart.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"StatusHistoryChart.d.ts","sourceRoot":"","sources":["../../src/StatusHistoryChart/StatusHistoryChart.tsx"],"names":[],"mappings":"AAeA,OAAO,EAML,qBAAqB,EACtB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAiB3B,MAAM,MAAM,iBAAiB,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAErE,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,iBAAiB,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACH;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,qBAAqB,EAAE,CAAC;IAC9B,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC3D;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA+F1D,CAAC"}