@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.
- package/README.md +1 -8
- package/dist/EChart/EChart.d.ts +3 -2
- package/dist/EChart/EChart.d.ts.map +1 -1
- package/dist/EChart/EChart.js +19 -7
- package/dist/EChart/EChart.js.map +1 -1
- package/dist/JSONEditor.d.ts.map +1 -1
- package/dist/JSONEditor.js +5 -6
- package/dist/JSONEditor.js.map +1 -1
- package/dist/Table/Table.d.ts +1 -1
- package/dist/Table/Table.d.ts.map +1 -1
- package/dist/Table/Table.js +14 -4
- package/dist/Table/Table.js.map +1 -1
- package/dist/Table/TableFoot.d.ts +4 -0
- package/dist/Table/TableFoot.d.ts.map +1 -0
- package/dist/{BarChart/index.js → Table/TableFoot.js} +11 -3
- package/dist/Table/TableFoot.js.map +1 -0
- package/dist/Table/VirtualizedTable.d.ts +3 -2
- package/dist/Table/VirtualizedTable.d.ts.map +1 -1
- package/dist/Table/VirtualizedTable.js +31 -2
- package/dist/Table/VirtualizedTable.js.map +1 -1
- package/dist/Table/model/table-model.d.ts +10 -1
- package/dist/Table/model/table-model.d.ts.map +1 -1
- package/dist/Table/model/table-model.js.map +1 -1
- package/dist/TimeRangeSelector/TimeRangeSelector.d.ts +1 -1
- package/dist/TimeRangeSelector/TimeRangeSelector.js.map +1 -1
- package/dist/TimeSeriesTooltip/TimeChartTooltip.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/TimeChartTooltip.js +2 -5
- package/dist/TimeSeriesTooltip/TimeChartTooltip.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/TimeSeriesTooltip/tooltip-model.d.ts +1 -8
- package/dist/TimeSeriesTooltip/tooltip-model.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/tooltip-model.js +6 -16
- package/dist/TimeSeriesTooltip/tooltip-model.js.map +1 -1
- package/dist/TimeSeriesTooltip/utils.d.ts +1 -1
- package/dist/TimeSeriesTooltip/utils.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/utils.js +27 -23
- package/dist/TimeSeriesTooltip/utils.js.map +1 -1
- package/dist/cjs/EChart/EChart.js +17 -5
- package/dist/cjs/JSONEditor.js +4 -5
- package/dist/cjs/Table/Table.js +13 -3
- package/dist/cjs/{StatChart/utils/formatStatChartValue.js → Table/TableFoot.js} +12 -15
- package/dist/cjs/Table/VirtualizedTable.js +30 -1
- package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js +1 -4
- package/dist/cjs/TimeSeriesTooltip/index.js +0 -1
- package/dist/cjs/TimeSeriesTooltip/tooltip-model.js +6 -25
- package/dist/cjs/TimeSeriesTooltip/utils.js +26 -22
- 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 +2 -7
- 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.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 -185
- 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 -104
- 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 -198
- package/dist/cjs/StatChart/calculateFontSize.js +0 -55
- package/dist/cjs/StatChart/index.js +0 -30
- 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 -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
|
-
}
|