@apia/charts 2.0.11 → 3.0.2
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/dist/index.d.ts +336 -4
- package/dist/index.js +1552 -2
- package/dist/index.js.map +1 -1
- package/package.json +10 -6
- package/dist/charts/chartJsRenderer/ChartComponent.d.ts +0 -22
- package/dist/charts/chartJsRenderer/ChartComponent.d.ts.map +0 -1
- package/dist/charts/chartJsRenderer/ChartComponent.js +0 -274
- package/dist/charts/chartJsRenderer/ChartComponent.js.map +0 -1
- package/dist/charts/types.d.ts +0 -173
- package/dist/charts/types.d.ts.map +0 -1
- package/dist/widgets/WidgetComponent.d.ts +0 -10
- package/dist/widgets/WidgetComponent.d.ts.map +0 -1
- package/dist/widgets/WidgetComponent.js +0 -54
- package/dist/widgets/WidgetComponent.js.map +0 -1
- package/dist/widgets/counter/Counter.js +0 -117
- package/dist/widgets/counter/Counter.js.map +0 -1
- package/dist/widgets/custom/useCustomWidget.js +0 -64
- package/dist/widgets/custom/useCustomWidget.js.map +0 -1
- package/dist/widgets/custom/util.js +0 -9
- package/dist/widgets/custom/util.js.map +0 -1
- package/dist/widgets/oxford/Oxford.js +0 -248
- package/dist/widgets/oxford/Oxford.js.map +0 -1
- package/dist/widgets/ring/Ring.js +0 -133
- package/dist/widgets/ring/Ring.js.map +0 -1
- package/dist/widgets/scale/Scale.js +0 -150
- package/dist/widgets/scale/Scale.js.map +0 -1
- package/dist/widgets/speedMeter/SpeedMeter.js +0 -194
- package/dist/widgets/speedMeter/SpeedMeter.js.map +0 -1
- package/dist/widgets/tLight/TLight.js +0 -143
- package/dist/widgets/tLight/TLight.js.map +0 -1
- package/dist/widgets/thermometer/Thermometer.js +0 -151
- package/dist/widgets/thermometer/Thermometer.js.map +0 -1
- package/dist/widgets/thermometer/util.js +0 -38
- package/dist/widgets/thermometer/util.js.map +0 -1
- package/dist/widgets/types.d.ts +0 -108
- package/dist/widgets/types.d.ts.map +0 -1
|
@@ -1,248 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from '@apia/theme/jsx-runtime';
|
|
2
|
-
import { Box, createElement } from '@apia/theme';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import tinycolor from 'tinycolor2';
|
|
5
|
-
import { useGauge } from 'use-gauge';
|
|
6
|
-
import { noNaN } from '@apia/util';
|
|
7
|
-
|
|
8
|
-
const START_ANGLE = 45;
|
|
9
|
-
const END_ANGLE = 315;
|
|
10
|
-
const Oxford = ({
|
|
11
|
-
backgroundColor,
|
|
12
|
-
colorRanges,
|
|
13
|
-
currentValue,
|
|
14
|
-
currentValueColor,
|
|
15
|
-
currentValueFontSize,
|
|
16
|
-
height,
|
|
17
|
-
maxValue,
|
|
18
|
-
minValue,
|
|
19
|
-
pointerColor,
|
|
20
|
-
scaleValuesSize,
|
|
21
|
-
valueRanges,
|
|
22
|
-
width,
|
|
23
|
-
valueDecimals,
|
|
24
|
-
valueType
|
|
25
|
-
}) => {
|
|
26
|
-
const value = currentValue;
|
|
27
|
-
const diameter = Math.min(height, width);
|
|
28
|
-
const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
|
|
29
|
-
const domainMin = noNaN(minValue) ?? valueRanges[0];
|
|
30
|
-
const offset = 20;
|
|
31
|
-
const gauge = useGauge({
|
|
32
|
-
domain: [domainMin, domainMax],
|
|
33
|
-
startAngle: START_ANGLE,
|
|
34
|
-
endAngle: END_ANGLE,
|
|
35
|
-
numTicks: 10 + 1,
|
|
36
|
-
diameter
|
|
37
|
-
});
|
|
38
|
-
const gauge2 = useGauge({
|
|
39
|
-
domain: [valueRanges[0], valueRanges[valueRanges.length - 1]],
|
|
40
|
-
startAngle: START_ANGLE,
|
|
41
|
-
endAngle: END_ANGLE,
|
|
42
|
-
numTicks: valueRanges[valueRanges.length - 1] - valueRanges[0] + 1,
|
|
43
|
-
diameter
|
|
44
|
-
});
|
|
45
|
-
const needle = gauge.getNeedleProps({
|
|
46
|
-
value: 0,
|
|
47
|
-
baseRadius: 12,
|
|
48
|
-
tipRadius: 2
|
|
49
|
-
});
|
|
50
|
-
const angle = (END_ANGLE - START_ANGLE) * value / (domainMax - domainMin);
|
|
51
|
-
function getColor(value2) {
|
|
52
|
-
const index = valueRanges.findIndex(
|
|
53
|
-
(range) => noNaN(value2) <= noNaN(range)
|
|
54
|
-
);
|
|
55
|
-
if (index === -1) {
|
|
56
|
-
return colorRanges[0];
|
|
57
|
-
}
|
|
58
|
-
return colorRanges[index];
|
|
59
|
-
}
|
|
60
|
-
return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
|
|
61
|
-
"svg",
|
|
62
|
-
{
|
|
63
|
-
...gauge.getSVGProps(),
|
|
64
|
-
height: Math.max(width, height),
|
|
65
|
-
width: Math.max(width, height),
|
|
66
|
-
viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter + offset * 2}`,
|
|
67
|
-
children: [
|
|
68
|
-
/* @__PURE__ */ jsxs("g", { id: "arcs", children: [
|
|
69
|
-
/* @__PURE__ */ jsx(
|
|
70
|
-
"path",
|
|
71
|
-
{
|
|
72
|
-
...gauge.getArcProps({
|
|
73
|
-
offset: offset - 5,
|
|
74
|
-
startAngle: 0,
|
|
75
|
-
endAngle: 360
|
|
76
|
-
}),
|
|
77
|
-
stroke: "black",
|
|
78
|
-
opacity: "1",
|
|
79
|
-
fill: backgroundColor !== "" && backgroundColor !== void 0 ? tinycolor(backgroundColor).setAlpha(0.5).toPercentageRgbString() : "none",
|
|
80
|
-
strokeLinecap: "round",
|
|
81
|
-
strokeWidth: 5,
|
|
82
|
-
vectorEffect: "non-scaling-stroke"
|
|
83
|
-
}
|
|
84
|
-
),
|
|
85
|
-
valueRanges.map((innerValue, i) => {
|
|
86
|
-
if (!valueRanges[i + 1]) {
|
|
87
|
-
return null;
|
|
88
|
-
}
|
|
89
|
-
const valueToAngle = (value2) => {
|
|
90
|
-
const angleRange = END_ANGLE - START_ANGLE;
|
|
91
|
-
const valueRange = domainMax - domainMin;
|
|
92
|
-
const angle2 = START_ANGLE + (value2 - domainMin) / valueRange * angleRange;
|
|
93
|
-
return Math.round(angle2);
|
|
94
|
-
};
|
|
95
|
-
return /* @__PURE__ */ jsxs("g", { children: [
|
|
96
|
-
/* @__PURE__ */ jsx(
|
|
97
|
-
"path",
|
|
98
|
-
{
|
|
99
|
-
...gauge.getArcProps({
|
|
100
|
-
offset: offset - 5,
|
|
101
|
-
startAngle: i === 0 ? START_ANGLE : valueToAngle(innerValue),
|
|
102
|
-
endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE : valueToAngle(valueRanges[i + 1])
|
|
103
|
-
}),
|
|
104
|
-
stroke: "black",
|
|
105
|
-
opacity: "0.8",
|
|
106
|
-
fill: "none",
|
|
107
|
-
strokeLinecap: "square",
|
|
108
|
-
strokeWidth: 5,
|
|
109
|
-
vectorEffect: "non-scaling-stroke"
|
|
110
|
-
}
|
|
111
|
-
),
|
|
112
|
-
/* @__PURE__ */ jsx(
|
|
113
|
-
"path",
|
|
114
|
-
{
|
|
115
|
-
...gauge.getArcProps({
|
|
116
|
-
offset: -20,
|
|
117
|
-
startAngle: i === 0 ? START_ANGLE : valueToAngle(innerValue),
|
|
118
|
-
endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE : valueToAngle(valueRanges[i + 1])
|
|
119
|
-
}),
|
|
120
|
-
stroke: getColor(innerValue),
|
|
121
|
-
opacity: "0.1",
|
|
122
|
-
fill: "none",
|
|
123
|
-
strokeLinecap: "butt",
|
|
124
|
-
strokeWidth: 75,
|
|
125
|
-
vectorEffect: "non-scaling-stroke"
|
|
126
|
-
}
|
|
127
|
-
),
|
|
128
|
-
/* @__PURE__ */ createElement(
|
|
129
|
-
"path",
|
|
130
|
-
{
|
|
131
|
-
...gauge.getArcProps({
|
|
132
|
-
offset: -55,
|
|
133
|
-
startAngle: i === 0 ? START_ANGLE : valueToAngle(innerValue),
|
|
134
|
-
endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE : valueToAngle(valueRanges[i + 1])
|
|
135
|
-
}),
|
|
136
|
-
key: `${innerValue}_${i}`,
|
|
137
|
-
stroke: getColor(innerValue) || "#999",
|
|
138
|
-
opacity: "0.8",
|
|
139
|
-
fill: "none",
|
|
140
|
-
strokeLinecap: "butt",
|
|
141
|
-
strokeWidth: 10,
|
|
142
|
-
vectorEffect: "non-scaling-stroke"
|
|
143
|
-
}
|
|
144
|
-
)
|
|
145
|
-
] }, `${innerValue}_${i}`);
|
|
146
|
-
})
|
|
147
|
-
] }),
|
|
148
|
-
/* @__PURE__ */ jsxs("g", { id: "ticks", children: [
|
|
149
|
-
gauge.ticks.map((angle2, i) => {
|
|
150
|
-
const angleToValue = (angle3) => {
|
|
151
|
-
const angleRange = END_ANGLE - START_ANGLE;
|
|
152
|
-
const valueRange = domainMax - domainMin;
|
|
153
|
-
const value2 = domainMin + (angle3 - START_ANGLE) / angleRange * valueRange;
|
|
154
|
-
return Math.round(value2);
|
|
155
|
-
};
|
|
156
|
-
const asValue = angleToValue(angle2);
|
|
157
|
-
const showText = asValue % 10 === 0;
|
|
158
|
-
return /* @__PURE__ */ jsxs(React.Fragment, { children: [
|
|
159
|
-
/* @__PURE__ */ jsx(
|
|
160
|
-
"line",
|
|
161
|
-
{
|
|
162
|
-
stroke: "gray",
|
|
163
|
-
strokeWidth: showText ? 4 : 2,
|
|
164
|
-
...gauge.getTickProps({ angle: angle2, length: showText ? 12 : 3 }),
|
|
165
|
-
vectorEffect: "non-scaling-stroke"
|
|
166
|
-
}
|
|
167
|
-
),
|
|
168
|
-
showText && /* @__PURE__ */ jsx(
|
|
169
|
-
"text",
|
|
170
|
-
{
|
|
171
|
-
fill: "black",
|
|
172
|
-
...gauge.getLabelProps({
|
|
173
|
-
angle: angle2,
|
|
174
|
-
offset: 20
|
|
175
|
-
}),
|
|
176
|
-
style: {
|
|
177
|
-
fontSize: `${scaleValuesSize ?? 30}px`
|
|
178
|
-
},
|
|
179
|
-
children: asValue
|
|
180
|
-
}
|
|
181
|
-
)
|
|
182
|
-
] }, `tick-group-${angle2}_ ${i}`);
|
|
183
|
-
}),
|
|
184
|
-
gauge2.ticks.map((angle2, i) => {
|
|
185
|
-
return /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsx(
|
|
186
|
-
"line",
|
|
187
|
-
{
|
|
188
|
-
stroke: "gray",
|
|
189
|
-
strokeWidth: 2,
|
|
190
|
-
...gauge.getTickProps({
|
|
191
|
-
angle: angle2,
|
|
192
|
-
length: 3
|
|
193
|
-
}),
|
|
194
|
-
vectorEffect: "non-scaling-stroke"
|
|
195
|
-
}
|
|
196
|
-
) }, `tick-group-${angle2}_ ${i}_2`);
|
|
197
|
-
})
|
|
198
|
-
] }),
|
|
199
|
-
/* @__PURE__ */ jsxs("g", { id: "needle", children: [
|
|
200
|
-
/* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base, r: 20 }),
|
|
201
|
-
/* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base }),
|
|
202
|
-
/* @__PURE__ */ jsx(
|
|
203
|
-
"circle",
|
|
204
|
-
{
|
|
205
|
-
fill: pointerColor,
|
|
206
|
-
opacity: "0.5",
|
|
207
|
-
...needle.tip,
|
|
208
|
-
style: {
|
|
209
|
-
transform: `rotate(${angle}deg)`,
|
|
210
|
-
transition: "transform 500ms"
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
),
|
|
214
|
-
/* @__PURE__ */ jsx(
|
|
215
|
-
"polyline",
|
|
216
|
-
{
|
|
217
|
-
style: {
|
|
218
|
-
transform: `rotate(${angle}deg)`,
|
|
219
|
-
transition: "transform 500ms"
|
|
220
|
-
},
|
|
221
|
-
fill: pointerColor,
|
|
222
|
-
opacity: "0.5",
|
|
223
|
-
points: needle.points
|
|
224
|
-
}
|
|
225
|
-
),
|
|
226
|
-
/* @__PURE__ */ jsx("circle", { fill: "white", ...needle.base, r: 4 })
|
|
227
|
-
] }),
|
|
228
|
-
/* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
|
|
229
|
-
"text",
|
|
230
|
-
{
|
|
231
|
-
textAnchor: "middle",
|
|
232
|
-
alignmentBaseline: "text-before-edge",
|
|
233
|
-
y: diameter / 5,
|
|
234
|
-
style: { fontSize: `${currentValueFontSize ?? 30}px` },
|
|
235
|
-
fill: currentValueColor,
|
|
236
|
-
children: [
|
|
237
|
-
noNaN(value).toFixed(noNaN(valueDecimals)),
|
|
238
|
-
valueType === "2" || valueType === 2 ? "%" : ""
|
|
239
|
-
]
|
|
240
|
-
}
|
|
241
|
-
) })
|
|
242
|
-
]
|
|
243
|
-
}
|
|
244
|
-
) });
|
|
245
|
-
};
|
|
246
|
-
|
|
247
|
-
export { Oxford };
|
|
248
|
-
//# sourceMappingURL=Oxford.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Oxford.js","sources":["../../../src/widgets/oxford/Oxford.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Box } from '@apia/theme';\r\nimport tinycolor from 'tinycolor2';\r\nimport { useGauge } from 'use-gauge';\r\nimport { TApiaWidgetBaseProps, TApiaWidgetOxfordProps } from '../types';\r\nimport { noNaN } from '@apia/util';\r\n\r\nconst START_ANGLE = 45;\r\nconst END_ANGLE = 315;\r\n\r\nexport const Oxford = ({\r\n backgroundColor,\r\n colorRanges,\r\n currentValue,\r\n currentValueColor,\r\n currentValueFontSize,\r\n height,\r\n maxValue,\r\n minValue,\r\n pointerColor,\r\n scaleValuesSize,\r\n valueRanges,\r\n width,\r\n valueDecimals,\r\n valueType,\r\n}: TApiaWidgetBaseProps<TApiaWidgetOxfordProps>) => {\r\n const allTicks = true;\r\n const value = currentValue;\r\n const diameter = Math.min(height, width);\r\n const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];\r\n const domainMin = noNaN(minValue) ?? valueRanges[0];\r\n\r\n const offset = 20;\r\n const gauge = useGauge({\r\n domain: [domainMin, domainMax],\r\n startAngle: START_ANGLE,\r\n endAngle: END_ANGLE,\r\n numTicks: 10 + 1,\r\n diameter: diameter,\r\n });\r\n const gauge2 = useGauge({\r\n domain: [valueRanges[0], valueRanges[valueRanges.length - 1]],\r\n startAngle: START_ANGLE,\r\n endAngle: END_ANGLE,\r\n numTicks: valueRanges[valueRanges.length - 1] - valueRanges[0] + 1,\r\n diameter: diameter,\r\n });\r\n\r\n const needle = gauge.getNeedleProps({\r\n value: 0,\r\n baseRadius: 12,\r\n tipRadius: 2,\r\n });\r\n\r\n const angle = ((END_ANGLE - START_ANGLE) * value) / (domainMax - domainMin);\r\n\r\n function getColor(value: number) {\r\n const index = valueRanges.findIndex(\r\n (range) => noNaN(value) <= noNaN(range),\r\n );\r\n\r\n if (index === -1) {\r\n return colorRanges[0];\r\n }\r\n\r\n return colorRanges[index];\r\n }\r\n\r\n return (\r\n <Box>\r\n <svg\r\n {...gauge.getSVGProps()}\r\n height={Math.max(width, height)}\r\n width={Math.max(width, height)}\r\n viewBox={`-${diameter / 2 + offset} -${diameter / 2 + offset} ${\r\n diameter + offset * 2\r\n } ${diameter + offset * 2}`}\r\n >\r\n <g id=\"arcs\">\r\n <path\r\n {...gauge.getArcProps({\r\n offset: offset - 5,\r\n startAngle: 0,\r\n endAngle: 360,\r\n })}\r\n stroke=\"black\"\r\n opacity=\"1\"\r\n fill={\r\n backgroundColor !== '' && backgroundColor !== undefined\r\n ? tinycolor(backgroundColor)\r\n .setAlpha(0.5)\r\n .toPercentageRgbString()\r\n : 'none'\r\n }\r\n strokeLinecap=\"round\"\r\n strokeWidth={5}\r\n vectorEffect={'non-scaling-stroke'}\r\n />\r\n {valueRanges.map((innerValue, i) => {\r\n if (!valueRanges[i + 1]) {\r\n return null;\r\n }\r\n\r\n const valueToAngle = (value: number) => {\r\n const angleRange = END_ANGLE - START_ANGLE;\r\n const valueRange = domainMax - domainMin;\r\n const angle =\r\n START_ANGLE + ((value - domainMin) / valueRange) * angleRange;\r\n return Math.round(angle);\r\n };\r\n\r\n return (\r\n <g key={`${innerValue}_${i}`}>\r\n <path\r\n {...gauge.getArcProps({\r\n offset: offset - 5,\r\n startAngle:\r\n i === 0 ? START_ANGLE : valueToAngle(innerValue),\r\n endAngle:\r\n i === 0\r\n ? valueToAngle(valueRanges[1])\r\n : i === valueRanges.length - 1\r\n ? END_ANGLE\r\n : valueToAngle(valueRanges[i + 1]),\r\n })}\r\n stroke={'black'}\r\n opacity=\"0.8\"\r\n fill=\"none\"\r\n strokeLinecap=\"square\"\r\n strokeWidth={5}\r\n vectorEffect={'non-scaling-stroke'}\r\n />\r\n <path\r\n {...gauge.getArcProps({\r\n offset: -20,\r\n startAngle:\r\n i === 0 ? START_ANGLE : valueToAngle(innerValue),\r\n endAngle:\r\n i === 0\r\n ? valueToAngle(valueRanges[1])\r\n : i === valueRanges.length - 1\r\n ? END_ANGLE\r\n : valueToAngle(valueRanges[i + 1]),\r\n })}\r\n stroke={getColor(innerValue)}\r\n opacity=\"0.1\"\r\n fill=\"none\"\r\n strokeLinecap=\"butt\"\r\n strokeWidth={75}\r\n vectorEffect={'non-scaling-stroke'}\r\n />\r\n <path\r\n {...gauge.getArcProps({\r\n offset: -55,\r\n startAngle:\r\n i === 0 ? START_ANGLE : valueToAngle(innerValue),\r\n endAngle:\r\n i === 0\r\n ? valueToAngle(valueRanges[1])\r\n : i === valueRanges.length - 1\r\n ? END_ANGLE\r\n : valueToAngle(valueRanges[i + 1]),\r\n })}\r\n key={`${innerValue}_${i}`}\r\n stroke={getColor(innerValue) || '#999'}\r\n opacity=\"0.8\"\r\n fill=\"none\"\r\n strokeLinecap=\"butt\"\r\n strokeWidth={10}\r\n vectorEffect={'non-scaling-stroke'}\r\n />\r\n </g>\r\n );\r\n })}\r\n </g>\r\n <g id=\"ticks\">\r\n {gauge.ticks.map((angle, i) => {\r\n const angleToValue = (angle: number) => {\r\n const angleRange = END_ANGLE - START_ANGLE;\r\n const valueRange = domainMax - domainMin;\r\n\r\n const value =\r\n domainMin + ((angle - START_ANGLE) / angleRange) * valueRange;\r\n\r\n return Math.round(value);\r\n };\r\n const asValue = angleToValue(angle);\r\n\r\n const showText = asValue % 10 === 0;\r\n\r\n return (\r\n <React.Fragment key={`tick-group-${angle}_ ${i}`}>\r\n <line\r\n stroke=\"gray\"\r\n strokeWidth={showText ? 4 : 2}\r\n {...gauge.getTickProps({ angle, length: showText ? 12 : 3 })}\r\n vectorEffect={'non-scaling-stroke'}\r\n />\r\n {showText && (\r\n <text\r\n fill={'black'}\r\n {...gauge.getLabelProps({\r\n angle,\r\n offset: 20,\r\n })}\r\n style={{\r\n fontSize: `${scaleValuesSize ?? 30}px`,\r\n }}\r\n >\r\n {asValue}\r\n </text>\r\n )}\r\n </React.Fragment>\r\n );\r\n })}\r\n {allTicks &&\r\n gauge2.ticks.map((angle, i) => {\r\n return (\r\n <React.Fragment key={`tick-group-${angle}_ ${i}_2`}>\r\n <line\r\n stroke=\"gray\"\r\n strokeWidth={2}\r\n {...gauge.getTickProps({\r\n angle,\r\n length: 3,\r\n })}\r\n vectorEffect={'non-scaling-stroke'}\r\n />\r\n </React.Fragment>\r\n );\r\n })}\r\n </g>\r\n <g id=\"needle\">\r\n <circle fill={pointerColor} {...needle.base} r={20} />\r\n <circle fill={pointerColor} {...needle.base} />\r\n <circle\r\n fill={pointerColor}\r\n opacity=\"0.5\"\r\n {...needle.tip}\r\n style={{\r\n transform: `rotate(${angle}deg)`,\r\n transition: 'transform 500ms',\r\n }}\r\n />\r\n <polyline\r\n style={{\r\n transform: `rotate(${angle}deg)`,\r\n transition: 'transform 500ms',\r\n }}\r\n fill={pointerColor}\r\n opacity=\"0.5\"\r\n points={needle.points}\r\n />\r\n <circle fill=\"white\" {...needle.base} r={4} />\r\n </g>\r\n <g>\r\n <text\r\n textAnchor=\"middle\"\r\n alignmentBaseline=\"text-before-edge\"\r\n y={diameter / 5}\r\n style={{ fontSize: `${currentValueFontSize ?? 30}px` }}\r\n fill={currentValueColor}\r\n >\r\n {noNaN(value).toFixed(noNaN(valueDecimals))}\r\n {valueType === '2' || valueType === 2 ? '%' : ''}\r\n </text>\r\n </g>\r\n </svg>\r\n </Box>\r\n );\r\n};\r\n"],"names":["value","angle"],"mappings":"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"}
|
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from '@apia/theme/jsx-runtime';
|
|
2
|
-
import { Box } from '@apia/theme';
|
|
3
|
-
import { useGauge } from 'use-gauge';
|
|
4
|
-
import { noNaN, animate, addBoundary } from '@apia/util';
|
|
5
|
-
import { useState, useRef, useEffect } from 'react';
|
|
6
|
-
|
|
7
|
-
const START_ANGLE = 0;
|
|
8
|
-
const END_ANGLE = 360;
|
|
9
|
-
const Ring = ({
|
|
10
|
-
colorRanges,
|
|
11
|
-
maxValue,
|
|
12
|
-
minValue,
|
|
13
|
-
currentValue,
|
|
14
|
-
height,
|
|
15
|
-
valueRanges,
|
|
16
|
-
ringEmptyColor,
|
|
17
|
-
ringWidth: incommingRingWidth,
|
|
18
|
-
width,
|
|
19
|
-
currentValueColor,
|
|
20
|
-
currentValueFontSize,
|
|
21
|
-
valueDecimals,
|
|
22
|
-
valueType
|
|
23
|
-
}) => {
|
|
24
|
-
const ringWidth = (incommingRingWidth - 0.05) * 50;
|
|
25
|
-
const [value, setValue] = useState(noNaN(currentValue));
|
|
26
|
-
const diameter = Math.min(height, width);
|
|
27
|
-
const offset = 20;
|
|
28
|
-
const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
|
|
29
|
-
const domainMin = noNaN(minValue) ?? valueRanges[0];
|
|
30
|
-
const gauge = useGauge({
|
|
31
|
-
domain: [domainMin, domainMax],
|
|
32
|
-
startAngle: START_ANGLE,
|
|
33
|
-
endAngle: END_ANGLE,
|
|
34
|
-
numTicks: 0,
|
|
35
|
-
diameter
|
|
36
|
-
});
|
|
37
|
-
const lastCurrentValue = useRef(0);
|
|
38
|
-
useEffect(() => {
|
|
39
|
-
const difference = noNaN(currentValue) - lastCurrentValue.current;
|
|
40
|
-
return animate(
|
|
41
|
-
500,
|
|
42
|
-
(progress) => {
|
|
43
|
-
const step = addBoundary(
|
|
44
|
-
difference * progress + lastCurrentValue.current,
|
|
45
|
-
domainMin,
|
|
46
|
-
domainMax
|
|
47
|
-
);
|
|
48
|
-
let factor = Math.pow(10, valueDecimals);
|
|
49
|
-
if (valueType === 0 || valueType === "0") {
|
|
50
|
-
factor = 1;
|
|
51
|
-
}
|
|
52
|
-
setValue(Math.round(step * factor) / factor);
|
|
53
|
-
},
|
|
54
|
-
() => {
|
|
55
|
-
lastCurrentValue.current = noNaN(currentValue);
|
|
56
|
-
}
|
|
57
|
-
);
|
|
58
|
-
}, [currentValue]);
|
|
59
|
-
function getColor(value2) {
|
|
60
|
-
const index = valueRanges.findIndex((range) => value2 <= range);
|
|
61
|
-
if (index === -1) {
|
|
62
|
-
return colorRanges[0];
|
|
63
|
-
}
|
|
64
|
-
return colorRanges[index - 1] ?? colorRanges[index];
|
|
65
|
-
}
|
|
66
|
-
const valueToAngle = (value2) => {
|
|
67
|
-
const angleRange = 360;
|
|
68
|
-
const valueRange = domainMax - domainMin;
|
|
69
|
-
const angle = (value2 - domainMin) / valueRange * angleRange;
|
|
70
|
-
return Math.round(angle);
|
|
71
|
-
};
|
|
72
|
-
return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
|
|
73
|
-
"svg",
|
|
74
|
-
{
|
|
75
|
-
...gauge.getSVGProps(),
|
|
76
|
-
height: Math.max(width, height),
|
|
77
|
-
width: Math.max(width, height),
|
|
78
|
-
viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter + offset * 2}`,
|
|
79
|
-
children: [
|
|
80
|
-
/* @__PURE__ */ jsxs("g", { id: "arcs", children: [
|
|
81
|
-
/* @__PURE__ */ jsx(
|
|
82
|
-
"path",
|
|
83
|
-
{
|
|
84
|
-
...gauge.getArcProps({
|
|
85
|
-
offset: offset - ((noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0),
|
|
86
|
-
startAngle: START_ANGLE,
|
|
87
|
-
endAngle: END_ANGLE
|
|
88
|
-
}),
|
|
89
|
-
stroke: ringEmptyColor ?? "transparent",
|
|
90
|
-
fill: "none",
|
|
91
|
-
strokeLinecap: "round",
|
|
92
|
-
strokeWidth: (noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0
|
|
93
|
-
}
|
|
94
|
-
),
|
|
95
|
-
/* @__PURE__ */ jsx(
|
|
96
|
-
"path",
|
|
97
|
-
{
|
|
98
|
-
...gauge.getArcProps({
|
|
99
|
-
offset: offset - ((noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0),
|
|
100
|
-
startAngle: 180,
|
|
101
|
-
endAngle: valueToAngle(value) === 360 ? 179 + valueToAngle(value) : 180 + valueToAngle(value)
|
|
102
|
-
}),
|
|
103
|
-
stroke: getColor(value),
|
|
104
|
-
opacity: "0.8",
|
|
105
|
-
fill: "none",
|
|
106
|
-
strokeLinecap: "square",
|
|
107
|
-
strokeWidth: (noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0,
|
|
108
|
-
style: {
|
|
109
|
-
transition: "stroke 0.5s"
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
)
|
|
113
|
-
] }),
|
|
114
|
-
/* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
|
|
115
|
-
"text",
|
|
116
|
-
{
|
|
117
|
-
textAnchor: "middle",
|
|
118
|
-
style: { fontSize: `${currentValueFontSize ?? 30}px` },
|
|
119
|
-
alignmentBaseline: "central",
|
|
120
|
-
color: currentValueColor,
|
|
121
|
-
children: [
|
|
122
|
-
noNaN(value).toFixed(noNaN(valueDecimals)),
|
|
123
|
-
valueType === "2" || valueType === 2 ? "%" : ""
|
|
124
|
-
]
|
|
125
|
-
}
|
|
126
|
-
) })
|
|
127
|
-
]
|
|
128
|
-
}
|
|
129
|
-
) });
|
|
130
|
-
};
|
|
131
|
-
|
|
132
|
-
export { Ring };
|
|
133
|
-
//# sourceMappingURL=Ring.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Ring.js","sources":["../../../src/widgets/ring/Ring.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\r\nimport { useGauge } from 'use-gauge';\r\nimport { TApiaWidgetBaseProps, TApiaWidgetRingProps } from '../types';\r\nimport { addBoundary, noNaN, animate } from '@apia/util';\r\nimport { useEffect, useRef, useState } from 'react';\r\n\r\nconst START_ANGLE = 0;\r\nconst END_ANGLE = 360;\r\n\r\nexport const Ring = ({\r\n colorRanges,\r\n maxValue,\r\n minValue,\r\n currentValue,\r\n height,\r\n valueRanges,\r\n ringEmptyColor,\r\n ringWidth: incommingRingWidth,\r\n width,\r\n currentValueColor,\r\n currentValueFontSize,\r\n valueDecimals,\r\n valueType,\r\n}: TApiaWidgetBaseProps<TApiaWidgetRingProps>) => {\r\n const ringWidth = (incommingRingWidth - 0.05) * 50;\r\n const [value, setValue] = useState(noNaN(currentValue));\r\n const diameter = Math.min(height, width);\r\n const offset = 20;\r\n const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];\r\n const domainMin = noNaN(minValue) ?? valueRanges[0];\r\n const gauge = useGauge({\r\n domain: [domainMin, domainMax],\r\n startAngle: START_ANGLE,\r\n endAngle: END_ANGLE,\r\n numTicks: 0,\r\n diameter: diameter,\r\n });\r\n\r\n const lastCurrentValue = useRef(0);\r\n useEffect(() => {\r\n const difference = noNaN(currentValue) - lastCurrentValue.current;\r\n return animate(\r\n 500,\r\n (progress) => {\r\n const step = addBoundary(\r\n difference * progress + lastCurrentValue.current,\r\n domainMin,\r\n domainMax,\r\n );\r\n let factor = Math.pow(10, valueDecimals);\r\n if (valueType === 0 || valueType === '0') {\r\n factor = 1;\r\n }\r\n setValue(Math.round(step * factor) / factor);\r\n },\r\n () => {\r\n lastCurrentValue.current = noNaN(currentValue);\r\n },\r\n );\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [currentValue]);\r\n\r\n function getColor(value: number) {\r\n const index = valueRanges.findIndex((range) => value <= range);\r\n\r\n if (index === -1) {\r\n return colorRanges[0];\r\n }\r\n\r\n return colorRanges[index - 1] ?? colorRanges[index];\r\n }\r\n\r\n const valueToAngle = (value: number) => {\r\n const angleRange = 360;\r\n const valueRange = domainMax - domainMin;\r\n const angle = ((value - domainMin) / valueRange) * angleRange;\r\n\r\n return Math.round(angle);\r\n };\r\n\r\n return (\r\n <Box>\r\n <svg\r\n {...gauge.getSVGProps()}\r\n height={Math.max(width, height)}\r\n width={Math.max(width, height)}\r\n viewBox={`-${diameter / 2 + offset} -${diameter / 2 + offset} ${\r\n diameter + offset * 2\r\n } ${diameter + offset * 2}`}\r\n >\r\n <g id=\"arcs\">\r\n <path\r\n {...gauge.getArcProps({\r\n offset:\r\n offset -\r\n ((noNaN(ringWidth) ?? 0) < 0\r\n ? (noNaN(ringWidth) ?? 0) * 100\r\n : noNaN(ringWidth) ?? 0),\r\n startAngle: START_ANGLE,\r\n endAngle: END_ANGLE,\r\n })}\r\n stroke={ringEmptyColor ?? 'transparent'}\r\n fill=\"none\"\r\n strokeLinecap=\"round\"\r\n strokeWidth={\r\n (noNaN(ringWidth) ?? 0) < 0\r\n ? (noNaN(ringWidth) ?? 0) * 100\r\n : noNaN(ringWidth) ?? 0\r\n }\r\n />\r\n <path\r\n {...gauge.getArcProps({\r\n offset:\r\n offset -\r\n ((noNaN(ringWidth) ?? 0) < 0\r\n ? (noNaN(ringWidth) ?? 0) * 100\r\n : noNaN(ringWidth) ?? 0),\r\n startAngle: 180,\r\n endAngle:\r\n valueToAngle(value) === 360\r\n ? 179 + valueToAngle(value)\r\n : 180 + valueToAngle(value),\r\n })}\r\n stroke={getColor(value)}\r\n opacity=\"0.8\"\r\n fill=\"none\"\r\n strokeLinecap=\"square\"\r\n strokeWidth={\r\n (noNaN(ringWidth) ?? 0) < 0\r\n ? (noNaN(ringWidth) ?? 0) * 100\r\n : noNaN(ringWidth) ?? 0\r\n }\r\n style={{\r\n transition: 'stroke 0.5s',\r\n }}\r\n />\r\n </g>\r\n <g>\r\n <text\r\n textAnchor=\"middle\"\r\n style={{ fontSize: `${currentValueFontSize ?? 30}px` }}\r\n alignmentBaseline=\"central\"\r\n color={currentValueColor}\r\n >\r\n {noNaN(value).toFixed(noNaN(valueDecimals))}\r\n {valueType === '2' || valueType === 2 ? '%' : ''}\r\n </text>\r\n </g>\r\n </svg>\r\n </Box>\r\n );\r\n};\r\n"],"names":["value"],"mappings":"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"}
|
|
@@ -1,150 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from '@apia/theme/jsx-runtime';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { Box } from '@apia/theme';
|
|
4
|
-
import { useGauge } from 'use-gauge';
|
|
5
|
-
import { noNaN } from '@apia/util';
|
|
6
|
-
|
|
7
|
-
const START_ANGLE = 90;
|
|
8
|
-
const END_ANGLE = 270;
|
|
9
|
-
const Scale = ({
|
|
10
|
-
currentValue,
|
|
11
|
-
currentValueFontSize,
|
|
12
|
-
height,
|
|
13
|
-
maxValue,
|
|
14
|
-
minValue,
|
|
15
|
-
pointerColor,
|
|
16
|
-
scaleValuesSize,
|
|
17
|
-
valueRanges,
|
|
18
|
-
width,
|
|
19
|
-
valueDecimals,
|
|
20
|
-
valueType
|
|
21
|
-
}) => {
|
|
22
|
-
const allTicks = false;
|
|
23
|
-
const value = currentValue;
|
|
24
|
-
const diameter = Math.min(height, width);
|
|
25
|
-
const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
|
|
26
|
-
const domainMin = noNaN(minValue) ?? valueRanges[0];
|
|
27
|
-
const offset = 20;
|
|
28
|
-
const gauge = useGauge({
|
|
29
|
-
domain: [domainMin, domainMax],
|
|
30
|
-
startAngle: START_ANGLE,
|
|
31
|
-
endAngle: END_ANGLE,
|
|
32
|
-
numTicks: 10 + 1,
|
|
33
|
-
diameter
|
|
34
|
-
});
|
|
35
|
-
useGauge({
|
|
36
|
-
domain: [valueRanges[0], valueRanges[valueRanges.length - 1]],
|
|
37
|
-
startAngle: START_ANGLE,
|
|
38
|
-
endAngle: END_ANGLE,
|
|
39
|
-
numTicks: valueRanges[valueRanges.length - 1] - valueRanges[0] + 1,
|
|
40
|
-
diameter
|
|
41
|
-
});
|
|
42
|
-
const needle = gauge.getNeedleProps({
|
|
43
|
-
value: 0,
|
|
44
|
-
baseRadius: 12,
|
|
45
|
-
tipRadius: 2
|
|
46
|
-
});
|
|
47
|
-
const angle = (END_ANGLE - START_ANGLE) * value / (domainMax - domainMin);
|
|
48
|
-
return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
|
|
49
|
-
"svg",
|
|
50
|
-
{
|
|
51
|
-
...gauge.getSVGProps(),
|
|
52
|
-
height: Math.max(width, height),
|
|
53
|
-
width: Math.max(width, height),
|
|
54
|
-
viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter / 2 + offset * 2}`,
|
|
55
|
-
children: [
|
|
56
|
-
/* @__PURE__ */ jsx("g", { id: "arcs", children: /* @__PURE__ */ jsx(
|
|
57
|
-
"path",
|
|
58
|
-
{
|
|
59
|
-
...gauge.getArcProps({
|
|
60
|
-
offset: offset - 5,
|
|
61
|
-
startAngle: 90,
|
|
62
|
-
endAngle: 270
|
|
63
|
-
}),
|
|
64
|
-
stroke: "gray",
|
|
65
|
-
opacity: "0.2",
|
|
66
|
-
fill: "none",
|
|
67
|
-
strokeLinecap: "round",
|
|
68
|
-
strokeWidth: 5
|
|
69
|
-
}
|
|
70
|
-
) }),
|
|
71
|
-
/* @__PURE__ */ jsxs("g", { id: "ticks", children: [
|
|
72
|
-
gauge.ticks.map((angle2) => {
|
|
73
|
-
const angleToValue = (angle3) => {
|
|
74
|
-
const angleRange = END_ANGLE - START_ANGLE;
|
|
75
|
-
const valueRange = domainMax - domainMin;
|
|
76
|
-
const value2 = domainMin + (angle3 - START_ANGLE) / angleRange * valueRange;
|
|
77
|
-
return Math.round(value2);
|
|
78
|
-
};
|
|
79
|
-
const asValue = angleToValue(angle2);
|
|
80
|
-
const showText = asValue % 10 === 0;
|
|
81
|
-
return /* @__PURE__ */ jsxs(React.Fragment, { children: [
|
|
82
|
-
/* @__PURE__ */ jsx(
|
|
83
|
-
"line",
|
|
84
|
-
{
|
|
85
|
-
stroke: "gray",
|
|
86
|
-
strokeWidth: showText ? 4 : 2,
|
|
87
|
-
...gauge.getTickProps({ angle: angle2, length: showText ? 12 : 3 })
|
|
88
|
-
}
|
|
89
|
-
),
|
|
90
|
-
showText && /* @__PURE__ */ jsx(
|
|
91
|
-
"text",
|
|
92
|
-
{
|
|
93
|
-
fill: "black",
|
|
94
|
-
...gauge.getLabelProps({ angle: angle2, offset: 20 }),
|
|
95
|
-
style: { fontSize: `${scaleValuesSize ?? 30}px` },
|
|
96
|
-
children: asValue
|
|
97
|
-
}
|
|
98
|
-
)
|
|
99
|
-
] }, `tick-group-${angle2}`);
|
|
100
|
-
}),
|
|
101
|
-
allTicks
|
|
102
|
-
] }),
|
|
103
|
-
/* @__PURE__ */ jsxs("g", { id: "needle", children: [
|
|
104
|
-
/* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base, r: 20 }),
|
|
105
|
-
/* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base }),
|
|
106
|
-
/* @__PURE__ */ jsx(
|
|
107
|
-
"circle",
|
|
108
|
-
{
|
|
109
|
-
fill: pointerColor,
|
|
110
|
-
opacity: "0.5",
|
|
111
|
-
...needle.tip,
|
|
112
|
-
style: {
|
|
113
|
-
transform: `rotate(${angle}deg)`,
|
|
114
|
-
transition: "transform 500ms"
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
),
|
|
118
|
-
/* @__PURE__ */ jsx(
|
|
119
|
-
"polyline",
|
|
120
|
-
{
|
|
121
|
-
style: {
|
|
122
|
-
transform: `rotate(${angle}deg)`,
|
|
123
|
-
transition: "transform 500ms"
|
|
124
|
-
},
|
|
125
|
-
fill: pointerColor,
|
|
126
|
-
opacity: "0.5",
|
|
127
|
-
points: needle.points
|
|
128
|
-
}
|
|
129
|
-
),
|
|
130
|
-
/* @__PURE__ */ jsx("circle", { fill: "white", ...needle.base, r: 4 })
|
|
131
|
-
] }),
|
|
132
|
-
/* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
|
|
133
|
-
"text",
|
|
134
|
-
{
|
|
135
|
-
textAnchor: "middle",
|
|
136
|
-
style: { fontSize: `${currentValueFontSize ?? 30}px` },
|
|
137
|
-
y: -diameter / 4 + 20,
|
|
138
|
-
children: [
|
|
139
|
-
noNaN(value).toFixed(noNaN(valueDecimals)),
|
|
140
|
-
valueType === "2" || valueType === 2 ? "%" : ""
|
|
141
|
-
]
|
|
142
|
-
}
|
|
143
|
-
) })
|
|
144
|
-
]
|
|
145
|
-
}
|
|
146
|
-
) });
|
|
147
|
-
};
|
|
148
|
-
|
|
149
|
-
export { Scale };
|
|
150
|
-
//# sourceMappingURL=Scale.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Scale.js","sources":["../../../src/widgets/scale/Scale.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Box } from '@apia/theme';\r\nimport { useGauge } from 'use-gauge';\r\nimport { TApiaWidgetBaseProps, TApiaWidgetScaleProps } from '../types';\r\nimport { noNaN } from '@apia/util';\r\n\r\nconst START_ANGLE = 90;\r\nconst END_ANGLE = 270;\r\n\r\nexport const Scale = ({\r\n currentValue,\r\n currentValueFontSize,\r\n height,\r\n maxValue,\r\n minValue,\r\n pointerColor,\r\n scaleValuesSize,\r\n valueRanges,\r\n width,\r\n valueDecimals,\r\n valueType,\r\n}: TApiaWidgetBaseProps<TApiaWidgetScaleProps>) => {\r\n const allTicks = false;\r\n const value = currentValue;\r\n const diameter = Math.min(height, width);\r\n const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];\r\n const domainMin = noNaN(minValue) ?? valueRanges[0];\r\n const offset = 20;\r\n const gauge = useGauge({\r\n domain: [domainMin, domainMax],\r\n startAngle: START_ANGLE,\r\n endAngle: END_ANGLE,\r\n numTicks: 10 + 1,\r\n diameter: diameter,\r\n });\r\n const gauge2 = useGauge({\r\n domain: [valueRanges[0], valueRanges[valueRanges.length - 1]],\r\n startAngle: START_ANGLE,\r\n endAngle: END_ANGLE,\r\n numTicks: valueRanges[valueRanges.length - 1] - valueRanges[0] + 1,\r\n diameter: diameter,\r\n });\r\n\r\n const needle = gauge.getNeedleProps({\r\n value: 0,\r\n baseRadius: 12,\r\n tipRadius: 2,\r\n });\r\n\r\n const angle = ((END_ANGLE - START_ANGLE) * value) / (domainMax - domainMin);\r\n\r\n return (\r\n <Box>\r\n <svg\r\n {...gauge.getSVGProps()}\r\n height={Math.max(width, height)}\r\n width={Math.max(width, height)}\r\n viewBox={`-${diameter / 2 + offset} -${diameter / 2 + offset} ${\r\n diameter + offset * 2\r\n } ${diameter / 2 + offset * 2}`}\r\n >\r\n <g id=\"arcs\">\r\n <path\r\n {...gauge.getArcProps({\r\n offset: offset - 5,\r\n startAngle: 90,\r\n endAngle: 270,\r\n })}\r\n stroke=\"gray\"\r\n opacity=\"0.2\"\r\n fill=\"none\"\r\n strokeLinecap=\"round\"\r\n strokeWidth={5}\r\n />\r\n </g>\r\n <g id=\"ticks\">\r\n {gauge.ticks.map((angle) => {\r\n const angleToValue = (angle: number) => {\r\n const angleRange = END_ANGLE - START_ANGLE;\r\n const valueRange = domainMax - domainMin;\r\n\r\n const value =\r\n domainMin + ((angle - START_ANGLE) / angleRange) * valueRange;\r\n\r\n return Math.round(value);\r\n };\r\n const asValue = angleToValue(angle);\r\n const showText = asValue % 10 === 0;\r\n\r\n return (\r\n <React.Fragment key={`tick-group-${angle}`}>\r\n <line\r\n stroke=\"gray\"\r\n strokeWidth={showText ? 4 : 2}\r\n {...gauge.getTickProps({ angle, length: showText ? 12 : 3 })}\r\n />\r\n {showText && (\r\n <text\r\n fill=\"black\"\r\n {...gauge.getLabelProps({ angle, offset: 20 })}\r\n style={{ fontSize: `${scaleValuesSize ?? 30}px` }}\r\n >\r\n {asValue}\r\n </text>\r\n )}\r\n </React.Fragment>\r\n );\r\n })}\r\n {allTicks &&\r\n gauge2.ticks.map((angle, i) => {\r\n return (\r\n <React.Fragment key={`tick-group-${angle}_ ${i}_2`}>\r\n <line\r\n stroke=\"gray\"\r\n strokeWidth={2}\r\n {...gauge.getTickProps({\r\n angle,\r\n length: 3,\r\n })}\r\n />\r\n </React.Fragment>\r\n );\r\n })}\r\n </g>\r\n <g id=\"needle\">\r\n <circle fill={pointerColor} {...needle.base} r={20} />\r\n <circle fill={pointerColor} {...needle.base} />\r\n <circle\r\n fill={pointerColor}\r\n opacity=\"0.5\"\r\n {...needle.tip}\r\n style={{\r\n transform: `rotate(${angle}deg)`,\r\n transition: 'transform 500ms',\r\n }}\r\n />\r\n <polyline\r\n style={{\r\n transform: `rotate(${angle}deg)`,\r\n transition: 'transform 500ms',\r\n }}\r\n fill={pointerColor}\r\n opacity=\"0.5\"\r\n points={needle.points}\r\n />\r\n <circle fill=\"white\" {...needle.base} r={4} />\r\n </g>\r\n <g>\r\n <text\r\n textAnchor=\"middle\"\r\n style={{ fontSize: `${currentValueFontSize ?? 30}px` }}\r\n y={-diameter / 4 + 20}\r\n >\r\n {noNaN(value).toFixed(noNaN(valueDecimals))}\r\n {valueType === '2' || valueType === 2 ? '%' : ''}\r\n </text>\r\n </g>\r\n </svg>\r\n </Box>\r\n );\r\n};\r\n"],"names":["angle","value"],"mappings":"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"}
|