@perses-dev/components 0.51.0-beta.1 → 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 (183) hide show
  1. package/README.md +1 -8
  2. package/dist/EChart/EChart.d.ts +3 -2
  3. package/dist/EChart/EChart.d.ts.map +1 -1
  4. package/dist/EChart/EChart.js +19 -7
  5. package/dist/EChart/EChart.js.map +1 -1
  6. package/dist/JSONEditor.d.ts.map +1 -1
  7. package/dist/JSONEditor.js +5 -6
  8. package/dist/JSONEditor.js.map +1 -1
  9. package/dist/Table/Table.d.ts +1 -1
  10. package/dist/Table/Table.d.ts.map +1 -1
  11. package/dist/Table/Table.js +14 -4
  12. package/dist/Table/Table.js.map +1 -1
  13. package/dist/Table/TableFoot.d.ts +4 -0
  14. package/dist/Table/TableFoot.d.ts.map +1 -0
  15. package/dist/{BarChart/index.js → Table/TableFoot.js} +11 -3
  16. package/dist/Table/TableFoot.js.map +1 -0
  17. package/dist/Table/VirtualizedTable.d.ts +3 -2
  18. package/dist/Table/VirtualizedTable.d.ts.map +1 -1
  19. package/dist/Table/VirtualizedTable.js +31 -2
  20. package/dist/Table/VirtualizedTable.js.map +1 -1
  21. package/dist/Table/model/table-model.d.ts +10 -1
  22. package/dist/Table/model/table-model.d.ts.map +1 -1
  23. package/dist/Table/model/table-model.js.map +1 -1
  24. package/dist/TimeRangeSelector/TimeRangeSelector.d.ts +1 -1
  25. package/dist/TimeRangeSelector/TimeRangeSelector.js.map +1 -1
  26. package/dist/TimeSeriesTooltip/TimeChartTooltip.d.ts.map +1 -1
  27. package/dist/TimeSeriesTooltip/TimeChartTooltip.js +2 -5
  28. package/dist/TimeSeriesTooltip/TimeChartTooltip.js.map +1 -1
  29. package/dist/TimeSeriesTooltip/index.d.ts +0 -1
  30. package/dist/TimeSeriesTooltip/index.d.ts.map +1 -1
  31. package/dist/TimeSeriesTooltip/index.js +0 -1
  32. package/dist/TimeSeriesTooltip/index.js.map +1 -1
  33. package/dist/TimeSeriesTooltip/tooltip-model.d.ts +1 -8
  34. package/dist/TimeSeriesTooltip/tooltip-model.d.ts.map +1 -1
  35. package/dist/TimeSeriesTooltip/tooltip-model.js +6 -16
  36. package/dist/TimeSeriesTooltip/tooltip-model.js.map +1 -1
  37. package/dist/TimeSeriesTooltip/utils.d.ts +1 -1
  38. package/dist/TimeSeriesTooltip/utils.d.ts.map +1 -1
  39. package/dist/TimeSeriesTooltip/utils.js +27 -23
  40. package/dist/TimeSeriesTooltip/utils.js.map +1 -1
  41. package/dist/cjs/EChart/EChart.js +17 -5
  42. package/dist/cjs/JSONEditor.js +4 -5
  43. package/dist/cjs/Table/Table.js +13 -3
  44. package/dist/cjs/{StatChart/utils/formatStatChartValue.js → Table/TableFoot.js} +12 -15
  45. package/dist/cjs/Table/VirtualizedTable.js +30 -1
  46. package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js +1 -4
  47. package/dist/cjs/TimeSeriesTooltip/index.js +0 -1
  48. package/dist/cjs/TimeSeriesTooltip/tooltip-model.js +6 -25
  49. package/dist/cjs/TimeSeriesTooltip/utils.js +26 -22
  50. package/dist/cjs/context/ChartsProvider.js +3 -1
  51. package/dist/cjs/index.js +0 -7
  52. package/dist/cjs/test-utils/theme.js +1 -0
  53. package/dist/cjs/utils/axis.js +3 -18
  54. package/dist/cjs/utils/format.js +0 -21
  55. package/dist/context/ChartsProvider.d.ts +2 -0
  56. package/dist/context/ChartsProvider.d.ts.map +1 -1
  57. package/dist/context/ChartsProvider.js +3 -1
  58. package/dist/context/ChartsProvider.js.map +1 -1
  59. package/dist/index.d.ts +0 -7
  60. package/dist/index.d.ts.map +1 -1
  61. package/dist/index.js +0 -7
  62. package/dist/index.js.map +1 -1
  63. package/dist/model/graph.d.ts +0 -1
  64. package/dist/model/graph.d.ts.map +1 -1
  65. package/dist/model/graph.js.map +1 -1
  66. package/dist/test-utils/theme.d.ts.map +1 -1
  67. package/dist/test-utils/theme.js +1 -0
  68. package/dist/test-utils/theme.js.map +1 -1
  69. package/dist/utils/axis.d.ts +0 -4
  70. package/dist/utils/axis.d.ts.map +1 -1
  71. package/dist/utils/axis.js +0 -9
  72. package/dist/utils/axis.js.map +1 -1
  73. package/dist/utils/chart-actions.d.ts +0 -2
  74. package/dist/utils/chart-actions.d.ts.map +1 -1
  75. package/dist/utils/chart-actions.js.map +1 -1
  76. package/dist/utils/format.d.ts +0 -1
  77. package/dist/utils/format.d.ts.map +1 -1
  78. package/dist/utils/format.js +0 -20
  79. package/dist/utils/format.js.map +1 -1
  80. package/package.json +2 -7
  81. package/dist/BarChart/BarChart.d.ts +0 -16
  82. package/dist/BarChart/BarChart.d.ts.map +0 -1
  83. package/dist/BarChart/BarChart.js +0 -134
  84. package/dist/BarChart/BarChart.js.map +0 -1
  85. package/dist/BarChart/index.d.ts +0 -2
  86. package/dist/BarChart/index.d.ts.map +0 -1
  87. package/dist/BarChart/index.js.map +0 -1
  88. package/dist/GaugeChart/GaugeChart.d.ts +0 -23
  89. package/dist/GaugeChart/GaugeChart.d.ts.map +0 -1
  90. package/dist/GaugeChart/GaugeChart.js +0 -214
  91. package/dist/GaugeChart/GaugeChart.js.map +0 -1
  92. package/dist/GaugeChart/index.d.ts +0 -2
  93. package/dist/GaugeChart/index.d.ts.map +0 -1
  94. package/dist/GaugeChart/index.js +0 -15
  95. package/dist/GaugeChart/index.js.map +0 -1
  96. package/dist/LineChart/LineChart.d.ts +0 -22
  97. package/dist/LineChart/LineChart.d.ts.map +0 -1
  98. package/dist/LineChart/LineChart.js +0 -266
  99. package/dist/LineChart/LineChart.js.map +0 -1
  100. package/dist/LineChart/index.d.ts +0 -2
  101. package/dist/LineChart/index.d.ts.map +0 -1
  102. package/dist/LineChart/index.js +0 -15
  103. package/dist/LineChart/index.js.map +0 -1
  104. package/dist/PieChart/PieChart.d.ts +0 -14
  105. package/dist/PieChart/PieChart.d.ts.map +0 -1
  106. package/dist/PieChart/PieChart.js +0 -92
  107. package/dist/PieChart/PieChart.js.map +0 -1
  108. package/dist/PieChart/index.d.ts +0 -2
  109. package/dist/PieChart/index.d.ts.map +0 -1
  110. package/dist/PieChart/index.js +0 -15
  111. package/dist/PieChart/index.js.map +0 -1
  112. package/dist/StatChart/StatChart.d.ts +0 -21
  113. package/dist/StatChart/StatChart.d.ts.map +0 -1
  114. package/dist/StatChart/StatChart.js +0 -185
  115. package/dist/StatChart/StatChart.js.map +0 -1
  116. package/dist/StatChart/calculateFontSize.d.ts +0 -16
  117. package/dist/StatChart/calculateFontSize.d.ts.map +0 -1
  118. package/dist/StatChart/calculateFontSize.js +0 -49
  119. package/dist/StatChart/calculateFontSize.js.map +0 -1
  120. package/dist/StatChart/index.d.ts +0 -2
  121. package/dist/StatChart/index.d.ts.map +0 -1
  122. package/dist/StatChart/index.js +0 -15
  123. package/dist/StatChart/index.js.map +0 -1
  124. package/dist/StatChart/utils/formatStatChartValue.d.ts +0 -3
  125. package/dist/StatChart/utils/formatStatChartValue.d.ts.map +0 -1
  126. package/dist/StatChart/utils/formatStatChartValue.js +0 -26
  127. package/dist/StatChart/utils/formatStatChartValue.js.map +0 -1
  128. package/dist/StatusHistoryChart/StatusHistoryChart.d.ts +0 -27
  129. package/dist/StatusHistoryChart/StatusHistoryChart.d.ts.map +0 -1
  130. package/dist/StatusHistoryChart/StatusHistoryChart.js +0 -132
  131. package/dist/StatusHistoryChart/StatusHistoryChart.js.map +0 -1
  132. package/dist/StatusHistoryChart/StatusHistoryTooltip.d.ts +0 -13
  133. package/dist/StatusHistoryChart/StatusHistoryTooltip.d.ts.map +0 -1
  134. package/dist/StatusHistoryChart/StatusHistoryTooltip.js +0 -47
  135. package/dist/StatusHistoryChart/StatusHistoryTooltip.js.map +0 -1
  136. package/dist/StatusHistoryChart/get-formatted-axis-label.d.ts +0 -2
  137. package/dist/StatusHistoryChart/get-formatted-axis-label.d.ts.map +0 -1
  138. package/dist/StatusHistoryChart/get-formatted-axis-label.js +0 -41
  139. package/dist/StatusHistoryChart/get-formatted-axis-label.js.map +0 -1
  140. package/dist/StatusHistoryChart/index.d.ts +0 -3
  141. package/dist/StatusHistoryChart/index.d.ts.map +0 -1
  142. package/dist/StatusHistoryChart/index.js +0 -16
  143. package/dist/StatusHistoryChart/index.js.map +0 -1
  144. package/dist/StatusHistoryChart/utils/get-color.d.ts +0 -6
  145. package/dist/StatusHistoryChart/utils/get-color.d.ts.map +0 -1
  146. package/dist/StatusHistoryChart/utils/get-color.js +0 -100
  147. package/dist/StatusHistoryChart/utils/get-color.js.map +0 -1
  148. package/dist/StatusHistoryChart/utils/get-tooltip-position.d.ts +0 -3
  149. package/dist/StatusHistoryChart/utils/get-tooltip-position.d.ts.map +0 -1
  150. package/dist/StatusHistoryChart/utils/get-tooltip-position.js +0 -27
  151. package/dist/StatusHistoryChart/utils/get-tooltip-position.js.map +0 -1
  152. package/dist/TimeChart/TimeChart.d.ts +0 -24
  153. package/dist/TimeChart/TimeChart.d.ts.map +0 -1
  154. package/dist/TimeChart/TimeChart.js +0 -394
  155. package/dist/TimeChart/TimeChart.js.map +0 -1
  156. package/dist/TimeChart/index.d.ts +0 -2
  157. package/dist/TimeChart/index.d.ts.map +0 -1
  158. package/dist/TimeChart/index.js +0 -15
  159. package/dist/TimeChart/index.js.map +0 -1
  160. package/dist/TimeSeriesTooltip/LineChartTooltip.d.ts +0 -21
  161. package/dist/TimeSeriesTooltip/LineChartTooltip.d.ts.map +0 -1
  162. package/dist/TimeSeriesTooltip/LineChartTooltip.js +0 -104
  163. package/dist/TimeSeriesTooltip/LineChartTooltip.js.map +0 -1
  164. package/dist/cjs/BarChart/BarChart.js +0 -142
  165. package/dist/cjs/BarChart/index.js +0 -30
  166. package/dist/cjs/GaugeChart/GaugeChart.js +0 -227
  167. package/dist/cjs/GaugeChart/index.js +0 -30
  168. package/dist/cjs/LineChart/LineChart.js +0 -274
  169. package/dist/cjs/LineChart/index.js +0 -30
  170. package/dist/cjs/PieChart/PieChart.js +0 -100
  171. package/dist/cjs/PieChart/index.js +0 -30
  172. package/dist/cjs/StatChart/StatChart.js +0 -198
  173. package/dist/cjs/StatChart/calculateFontSize.js +0 -55
  174. package/dist/cjs/StatChart/index.js +0 -30
  175. package/dist/cjs/StatusHistoryChart/StatusHistoryChart.js +0 -140
  176. package/dist/cjs/StatusHistoryChart/StatusHistoryTooltip.js +0 -55
  177. package/dist/cjs/StatusHistoryChart/get-formatted-axis-label.js +0 -48
  178. package/dist/cjs/StatusHistoryChart/index.js +0 -31
  179. package/dist/cjs/StatusHistoryChart/utils/get-color.js +0 -125
  180. package/dist/cjs/StatusHistoryChart/utils/get-tooltip-position.js +0 -35
  181. package/dist/cjs/TimeChart/TimeChart.js +0 -407
  182. package/dist/cjs/TimeChart/index.js +0 -30
  183. package/dist/cjs/TimeSeriesTooltip/LineChartTooltip.js +0 -117
@@ -1,274 +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
- "use strict";
14
- Object.defineProperty(exports, "__esModule", {
15
- value: true
16
- });
17
- Object.defineProperty(exports, "LineChart", {
18
- enumerable: true,
19
- get: function() {
20
- return LineChart;
21
- }
22
- });
23
- const _jsxruntime = require("react/jsx-runtime");
24
- const _react = require("react");
25
- const _material = require("@mui/material");
26
- const _core = require("echarts/core");
27
- const _charts = require("echarts/charts");
28
- const _components = require("echarts/components");
29
- const _renderers = require("echarts/renderers");
30
- const _EChart = require("../EChart");
31
- const _context = require("../context");
32
- const _TimeSeriesTooltip = require("../TimeSeriesTooltip");
33
- const _utils = require("../utils");
34
- (0, _core.use)([
35
- _charts.LineChart,
36
- _components.GridComponent,
37
- _components.DataZoomComponent,
38
- _components.MarkAreaComponent,
39
- _components.MarkLineComponent,
40
- _components.MarkPointComponent,
41
- _components.TitleComponent,
42
- _components.ToolboxComponent,
43
- _components.TooltipComponent,
44
- _components.LegendComponent,
45
- _renderers.CanvasRenderer
46
- ]);
47
- const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ height, data, yAxis, format, grid, legend, tooltipConfig = _TimeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
48
- const chartsTheme = (0, _context.useChartsTheme)();
49
- const chartRef = (0, _react.useRef)();
50
- const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
51
- const [tooltipPinnedCoords, setTooltipPinnedCoords] = (0, _react.useState)(null);
52
- const { timeZone } = (0, _context.useTimeZone)();
53
- const [isDragging, setIsDragging] = (0, _react.useState)(false);
54
- const [startX, setStartX] = (0, _react.useState)(0);
55
- (0, _react.useImperativeHandle)(ref, ()=>{
56
- return {
57
- highlightSeries ({ id }) {
58
- if (!chartRef.current) {
59
- // when chart undef, do not highlight series when hovering over legend
60
- return;
61
- }
62
- chartRef.current.dispatchAction({
63
- type: 'highlight',
64
- seriesId: id
65
- });
66
- },
67
- clearHighlightedSeries: ()=>{
68
- if (!chartRef.current) {
69
- // when chart undef, do not clear highlight series
70
- return;
71
- }
72
- (0, _utils.clearHighlightedSeries)(chartRef.current);
73
- }
74
- };
75
- }, []);
76
- const handleEvents = (0, _react.useMemo)(()=>{
77
- return {
78
- datazoom: (params)=>{
79
- if (onDataZoom === undefined) {
80
- setTimeout(()=>{
81
- // workaround so unpin happens after click event
82
- setTooltipPinnedCoords(null);
83
- }, 10);
84
- }
85
- if (onDataZoom === undefined || params.batch[0] === undefined) return;
86
- const startIndex = params.batch[0].startValue ?? 0;
87
- const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;
88
- const xAxisStartValue = data.xAxis[startIndex];
89
- const xAxisEndValue = data.xAxis[endIndex];
90
- if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {
91
- const zoomEvent = {
92
- start: xAxisStartValue,
93
- end: xAxisEndValue,
94
- startIndex,
95
- endIndex
96
- };
97
- onDataZoom(zoomEvent);
98
- }
99
- }
100
- };
101
- }, [
102
- data,
103
- onDataZoom,
104
- setTooltipPinnedCoords
105
- ]);
106
- if (chartRef.current !== undefined) {
107
- (0, _utils.enableDataZoom)(chartRef.current);
108
- }
109
- const { noDataOption } = chartsTheme;
110
- const option = (0, _react.useMemo)(()=>{
111
- if (data.timeSeries === undefined) return {};
112
- // The "chart" `noDataVariant` is only used when the `timeSeries` is an
113
- // empty array because a `null` value will throw an error.
114
- if (data.timeSeries === null || data.timeSeries.length === 0 && noDataVariant === 'message') return noDataOption;
115
- const rangeMs = data.rangeMs ?? (0, _utils.getDateRange)(data.xAxis);
116
- const option = {
117
- series: data.timeSeries,
118
- xAxis: {
119
- type: 'category',
120
- data: data.xAxis,
121
- max: data.xAxisMax,
122
- axisLabel: {
123
- formatter: (value)=>{
124
- return (0, _utils.getFormattedDate)(value, rangeMs, timeZone);
125
- }
126
- }
127
- },
128
- yAxis: (0, _utils.getFormattedAxis)(yAxis, format),
129
- animation: false,
130
- tooltip: {
131
- show: true,
132
- trigger: 'axis',
133
- showContent: false
134
- },
135
- // https://echarts.apache.org/en/option.html#axisPointer
136
- axisPointer: {
137
- type: 'line',
138
- z: 0,
139
- triggerEmphasis: false,
140
- triggerTooltip: false,
141
- snap: true
142
- },
143
- toolbox: {
144
- feature: {
145
- dataZoom: {
146
- icon: null,
147
- yAxisIndex: 'none'
148
- }
149
- }
150
- },
151
- grid,
152
- legend
153
- };
154
- if (__experimentalEChartsOptionsOverride) {
155
- return __experimentalEChartsOptionsOverride(option);
156
- }
157
- return option;
158
- }, [
159
- data,
160
- yAxis,
161
- format,
162
- grid,
163
- legend,
164
- noDataOption,
165
- timeZone,
166
- __experimentalEChartsOptionsOverride,
167
- noDataVariant
168
- ]);
169
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
170
- style: {
171
- height
172
- },
173
- onClick: (e)=>{
174
- // Pin and unpin when clicking on chart canvas but not tooltip text.
175
- if (tooltipConfig.enablePinning && e.target instanceof HTMLCanvasElement) {
176
- setTooltipPinnedCoords((current)=>{
177
- if (current === null) {
178
- return {
179
- page: {
180
- x: e.pageX,
181
- y: e.pageY
182
- },
183
- client: {
184
- x: e.clientX,
185
- y: e.clientY
186
- },
187
- plotCanvas: {
188
- x: e.nativeEvent.offsetX,
189
- y: e.nativeEvent.offsetY
190
- },
191
- target: e.target
192
- };
193
- } else {
194
- return null;
195
- }
196
- });
197
- }
198
- },
199
- onMouseDown: (e)=>{
200
- const { clientX } = e;
201
- setIsDragging(true);
202
- setStartX(clientX);
203
- },
204
- onMouseMove: (e)=>{
205
- // Allow clicking inside tooltip to copy labels.
206
- if (!(e.target instanceof HTMLCanvasElement)) {
207
- return;
208
- }
209
- const { clientX } = e;
210
- if (isDragging) {
211
- const deltaX = clientX - startX;
212
- if (deltaX > 0) {
213
- // Hide tooltip when user drags to zoom.
214
- setShowTooltip(false);
215
- }
216
- }
217
- },
218
- onMouseUp: ()=>{
219
- setIsDragging(false);
220
- setStartX(0);
221
- setShowTooltip(true);
222
- },
223
- onMouseLeave: ()=>{
224
- if (tooltipPinnedCoords === null) {
225
- setShowTooltip(false);
226
- }
227
- if (chartRef.current !== undefined) {
228
- (0, _utils.clearHighlightedSeries)(chartRef.current);
229
- }
230
- },
231
- onMouseEnter: ()=>{
232
- setShowTooltip(true);
233
- if (chartRef.current !== undefined) {
234
- (0, _utils.enableDataZoom)(chartRef.current);
235
- }
236
- },
237
- onDoubleClick: (e)=>{
238
- setTooltipPinnedCoords(null);
239
- // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior
240
- if (onDoubleClick === undefined) {
241
- if (chartRef.current !== undefined) {
242
- (0, _utils.restoreChart)(chartRef.current);
243
- }
244
- } else {
245
- onDoubleClick(e);
246
- }
247
- },
248
- children: [
249
- showTooltip === true && option.tooltip?.showContent === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesTooltip.LineChartTooltip, {
250
- chartRef: chartRef,
251
- chartData: data,
252
- wrapLabels: tooltipConfig.wrapLabels,
253
- enablePinning: tooltipConfig.enablePinning,
254
- pinnedPos: tooltipPinnedCoords,
255
- format: format,
256
- onUnpinClick: ()=>{
257
- setTooltipPinnedCoords(null);
258
- },
259
- containerId: chartsTheme.tooltipPortalContainerId
260
- }),
261
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_EChart.EChart, {
262
- sx: {
263
- width: '100%',
264
- height: '100%'
265
- },
266
- option: option,
267
- theme: chartsTheme.echartsTheme,
268
- onEvents: handleEvents,
269
- _instance: chartRef,
270
- syncGroup: syncGroup
271
- })
272
- ]
273
- });
274
- });
@@ -1,30 +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
- "use strict";
14
- Object.defineProperty(exports, "__esModule", {
15
- value: true
16
- });
17
- _export_star(require("./LineChart"), exports);
18
- function _export_star(from, to) {
19
- Object.keys(from).forEach(function(k) {
20
- if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
21
- Object.defineProperty(to, k, {
22
- enumerable: true,
23
- get: function() {
24
- return from[k];
25
- }
26
- });
27
- }
28
- });
29
- return from;
30
- }
@@ -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
- "use strict";
14
- Object.defineProperty(exports, "__esModule", {
15
- value: true
16
- });
17
- Object.defineProperty(exports, "PieChart", {
18
- enumerable: true,
19
- get: function() {
20
- return PieChart;
21
- }
22
- });
23
- const _jsxruntime = require("react/jsx-runtime");
24
- const _core = require("echarts/core");
25
- const _charts = require("echarts/charts");
26
- const _components = require("echarts/components");
27
- const _renderers = require("echarts/renderers");
28
- const _material = require("@mui/material");
29
- const _ChartsProvider = require("../context/ChartsProvider");
30
- const _EChart = require("../EChart");
31
- (0, _core.use)([
32
- _charts.PieChart,
33
- _components.GridComponent,
34
- _components.DatasetComponent,
35
- _components.TitleComponent,
36
- _components.TooltipComponent,
37
- _renderers.CanvasRenderer
38
- ]);
39
- const PIE_WIN_WIDTH = 12;
40
- const PIE_GAP = 4;
41
- function PieChart(props) {
42
- const { width, height, data } = props;
43
- const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
44
- const option = {
45
- title: {
46
- text: 'Referer of a Website',
47
- subtext: 'Fake Data',
48
- left: 'center'
49
- },
50
- tooltip: {
51
- trigger: 'item',
52
- formatter: '{a} <br/>{b} : {c} ({d}%)'
53
- },
54
- axisLabel: {
55
- overflow: 'truncate',
56
- width: width / 3
57
- },
58
- series: [
59
- {
60
- name: 'Access From',
61
- type: 'pie',
62
- radius: '55%',
63
- label: false,
64
- center: [
65
- '40%',
66
- '50%'
67
- ],
68
- data: data,
69
- emphasis: {
70
- itemStyle: {
71
- shadowBlur: 10,
72
- shadowOffsetX: 0,
73
- shadowColor: 'rgba(0, 0, 0, 0.5)'
74
- }
75
- }
76
- }
77
- ],
78
- itemStyle: {
79
- borderRadius: 2,
80
- color: chartsTheme.echartsTheme[0]
81
- }
82
- };
83
- return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
84
- style: {
85
- width: width,
86
- height: height
87
- },
88
- sx: {
89
- overflow: 'auto'
90
- },
91
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_EChart.EChart, {
92
- sx: {
93
- minHeight: height,
94
- height: data ? data.length * (PIE_WIN_WIDTH + PIE_GAP) : '100%'
95
- },
96
- option: option,
97
- theme: chartsTheme.echartsTheme
98
- })
99
- });
100
- }
@@ -1,30 +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
- "use strict";
14
- Object.defineProperty(exports, "__esModule", {
15
- value: true
16
- });
17
- _export_star(require("./PieChart"), exports);
18
- function _export_star(from, to) {
19
- Object.keys(from).forEach(function(k) {
20
- if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
21
- Object.defineProperty(to, k, {
22
- enumerable: true,
23
- get: function() {
24
- return from[k];
25
- }
26
- });
27
- }
28
- });
29
- return from;
30
- }
@@ -1,198 +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
- "use strict";
14
- Object.defineProperty(exports, "__esModule", {
15
- value: true
16
- });
17
- Object.defineProperty(exports, "StatChart", {
18
- enumerable: true,
19
- get: function() {
20
- return StatChart;
21
- }
22
- });
23
- const _jsxruntime = require("react/jsx-runtime");
24
- const _react = require("react");
25
- const _material = require("@mui/material");
26
- const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
27
- const _core = require("echarts/core");
28
- const _charts = require("echarts/charts");
29
- const _components = require("echarts/components");
30
- const _renderers = require("echarts/renderers");
31
- const _context = require("../context");
32
- const _EChart = require("../EChart");
33
- const _calculateFontSize = require("./calculateFontSize");
34
- const _formatStatChartValue = require("./utils/formatStatChartValue");
35
- function _interop_require_default(obj) {
36
- return obj && obj.__esModule ? obj : {
37
- default: obj
38
- };
39
- }
40
- (0, _core.use)([
41
- _charts.LineChart,
42
- _components.GridComponent,
43
- _components.DatasetComponent,
44
- _components.TitleComponent,
45
- _components.TooltipComponent,
46
- _renderers.CanvasRenderer
47
- ]);
48
- const LINE_HEIGHT = 1.2;
49
- const SERIES_NAME_MAX_FONT_SIZE = 30;
50
- const SERIES_NAME_FONT_WEIGHT = 400;
51
- const VALUE_FONT_WEIGHT = 700;
52
- const StatChart = (props)=>{
53
- const { width, height, data, sparkline, showSeriesName, format, valueFontSize } = props;
54
- const chartsTheme = (0, _context.useChartsTheme)();
55
- const color = data.color;
56
- const formattedValue = (0, _formatStatChartValue.formatStatChartValue)(data.calculatedValue, format);
57
- const containerPadding = chartsTheme.container.padding.default;
58
- // calculate series name font size and height
59
- let seriesNameFontSize = (0, _calculateFontSize.useOptimalFontSize)({
60
- text: data?.seriesData?.name ?? '',
61
- fontWeight: SERIES_NAME_FONT_WEIGHT,
62
- width,
63
- height: height * 0.125,
64
- lineHeight: LINE_HEIGHT,
65
- maxSize: SERIES_NAME_MAX_FONT_SIZE
66
- });
67
- const seriesNameHeight = showSeriesName ? seriesNameFontSize * LINE_HEIGHT + containerPadding : 0;
68
- // calculate value font size and height
69
- const availableWidth = width - containerPadding * 2;
70
- const availableHeight = height - seriesNameHeight;
71
- const optimalValueFontSize = (0, _calculateFontSize.useOptimalFontSize)({
72
- text: formattedValue,
73
- // override the font size if user selects it in the settings
74
- fontSizeOverride: valueFontSize,
75
- fontWeight: VALUE_FONT_WEIGHT,
76
- // without sparkline, use only 50% of the available width so it looks better for multiseries
77
- width: sparkline ? availableWidth : availableWidth * 0.5,
78
- // with sparkline, use only 25% of available height to leave room for chart
79
- // without sparkline, value should take up 90% of available space
80
- height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,
81
- lineHeight: LINE_HEIGHT
82
- });
83
- const valueFontHeight = optimalValueFontSize * LINE_HEIGHT;
84
- // make sure the series name font size is slightly smaller than value font size
85
- seriesNameFontSize = Math.min(optimalValueFontSize * 0.7, seriesNameFontSize);
86
- const option = (0, _react.useMemo)(()=>{
87
- if (data.seriesData === undefined) return chartsTheme.noDataOption;
88
- const series = data.seriesData;
89
- const statSeries = [];
90
- if (sparkline !== undefined) {
91
- const lineSeries = {
92
- type: 'line',
93
- name: series.name,
94
- data: series.values,
95
- zlevel: 1,
96
- symbol: 'none',
97
- animation: false,
98
- silent: true
99
- };
100
- const mergedSeries = (0, _merge.default)(lineSeries, sparkline);
101
- statSeries.push(mergedSeries);
102
- }
103
- const option = {
104
- title: {
105
- show: false
106
- },
107
- grid: {
108
- show: false,
109
- top: '35%',
110
- right: 0,
111
- bottom: 0,
112
- left: 0,
113
- containLabel: false
114
- },
115
- xAxis: {
116
- type: 'time',
117
- show: false,
118
- boundaryGap: false
119
- },
120
- yAxis: {
121
- type: 'value',
122
- show: false,
123
- min: (value)=>{
124
- if (value.min >= 0 && value.min <= 1) {
125
- // helps with percent-decimal units, or datasets that return 0 or 1 booleans
126
- return 0;
127
- }
128
- return value.min;
129
- }
130
- },
131
- tooltip: {
132
- show: false
133
- },
134
- series: statSeries
135
- };
136
- return option;
137
- }, [
138
- data,
139
- chartsTheme,
140
- sparkline
141
- ]);
142
- const textAlignment = sparkline ? 'auto' : 'center';
143
- const textStyles = {
144
- display: 'flex',
145
- flexDirection: 'column',
146
- justifyContent: textAlignment,
147
- alignItems: textAlignment
148
- };
149
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
150
- sx: {
151
- height: '100%',
152
- width: '100%',
153
- ...textStyles
154
- },
155
- children: [
156
- showSeriesName && /*#__PURE__*/ (0, _jsxruntime.jsx)(SeriesName, {
157
- padding: containerPadding,
158
- fontSize: seriesNameFontSize,
159
- children: data.seriesData?.name
160
- }),
161
- /*#__PURE__*/ (0, _jsxruntime.jsx)(Value, {
162
- variant: "h3",
163
- color: color,
164
- fontSize: optimalValueFontSize,
165
- padding: containerPadding,
166
- children: formattedValue
167
- }),
168
- sparkline !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsx)(_EChart.EChart, {
169
- sx: {
170
- width: '100%',
171
- height: height - seriesNameHeight - valueFontHeight
172
- },
173
- option: option,
174
- theme: chartsTheme.echartsTheme,
175
- renderer: "svg"
176
- })
177
- ]
178
- });
179
- };
180
- const SeriesName = (0, _material.styled)(_material.Typography, {
181
- shouldForwardProp: (prop)=>prop !== 'padding' && prop !== 'fontSize'
182
- })(({ theme, padding, fontSize })=>({
183
- color: theme.palette.text.secondary,
184
- padding: `${padding}px`,
185
- fontSize: `${fontSize}px`,
186
- overflow: 'hidden',
187
- textOverflow: 'ellipsis',
188
- whiteSpace: 'nowrap'
189
- }));
190
- const Value = (0, _material.styled)(_material.Typography, {
191
- shouldForwardProp: (prop)=>prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline'
192
- })(({ theme, color, padding, fontSize, sparkline })=>({
193
- color: color ?? theme.palette.text.primary,
194
- fontSize: `${fontSize}px`,
195
- padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,
196
- whiteSpace: 'nowrap',
197
- lineHeight: LINE_HEIGHT
198
- }));
@@ -1,55 +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
- "use strict";
14
- Object.defineProperty(exports, "__esModule", {
15
- value: true
16
- });
17
- Object.defineProperty(exports, "useOptimalFontSize", {
18
- enumerable: true,
19
- get: function() {
20
- return useOptimalFontSize;
21
- }
22
- });
23
- const _ChartsProvider = require("../context/ChartsProvider");
24
- let canvasContext;
25
- function getGlobalCanvasContext() {
26
- if (!canvasContext) {
27
- canvasContext = document.createElement('canvas').getContext('2d');
28
- if (canvasContext === null) {
29
- throw new Error('Canvas context is null.');
30
- }
31
- }
32
- return canvasContext;
33
- }
34
- function useOptimalFontSize({ text, fontWeight, width, height, lineHeight, maxSize, fontSizeOverride }) {
35
- const ctx = getGlobalCanvasContext();
36
- const { echartsTheme } = (0, _ChartsProvider.useChartsTheme)();
37
- // if user has selected a font size in the settings, use it instead of calculating the optimal size
38
- if (fontSizeOverride !== undefined) {
39
- return Number(fontSizeOverride);
40
- }
41
- const textStyle = echartsTheme.textStyle;
42
- const fontSize = Number(textStyle?.fontSize) ?? 12;
43
- const fontFamily = textStyle?.fontFamily ?? 'Lato';
44
- // set the font on the canvas context
45
- const fontStyle = `${fontWeight} ${fontSize}px ${fontFamily}`;
46
- ctx.font = fontStyle;
47
- // measure the width of the text with the given font style
48
- const textMetrics = ctx.measureText(text);
49
- // check how much bigger we can make the font while staying within the width and height
50
- const fontSizeBasedOnWidth = width / textMetrics.width * fontSize;
51
- const fontSizeBasedOnHeight = height / lineHeight;
52
- // return the smaller font size
53
- const finalFontSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth);
54
- return maxSize ? Math.min(finalFontSize, maxSize) : finalFontSize;
55
- }