@apia/charts 4.0.83 → 4.0.84

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 (3) hide show
  1. package/dist/index.js +782 -700
  2. package/dist/index.js.map +1 -1
  3. package/package.json +6 -6
package/dist/index.js CHANGED
@@ -53,146 +53,156 @@ const SpeedMeter = ({
53
53
  }
54
54
  return colorRanges[index];
55
55
  }
56
- const angle = (END_ANGLE$5 - START_ANGLE$5) * value / (domainMax - domainMin);
57
- return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
58
- "svg",
56
+ const needleValue = Math.min(value, domainMax);
57
+ const angle = (END_ANGLE$5 - START_ANGLE$5) * (needleValue - domainMin) / (domainMax - domainMin);
58
+ return /* @__PURE__ */ jsx(
59
+ Box,
59
60
  {
60
- ...gauge.getSVGProps(),
61
- height: Math.max(width, height),
62
- width: Math.max(width, height),
63
- viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter + offset * 2}`,
64
- children: [
65
- /* @__PURE__ */ jsxs("g", { id: "arcs", children: [
66
- /* @__PURE__ */ jsx(
67
- "path",
68
- {
69
- ...gauge.getArcProps({
70
- offset: offset - 5,
71
- startAngle: 0,
72
- endAngle: 360
73
- }),
74
- stroke: "gray",
75
- fill: backgroundColor ?? "none",
76
- strokeLinecap: "round",
77
- strokeWidth: 5
78
- }
79
- ),
80
- valueRanges.map((innerValue, i) => {
81
- const valueToAngle = (value2) => {
82
- const angleRange = END_ANGLE$5 - START_ANGLE$5;
83
- const valueRange = domainMax - domainMin;
84
- const angle2 = START_ANGLE$5 + (value2 - domainMin) / valueRange * angleRange;
85
- return Math.round(angle2);
86
- };
87
- return /* @__PURE__ */ jsxs("g", { children: [
61
+ sx: {
62
+ height: `${Math.max(width, height)}px`,
63
+ width: `${Math.max(width, height)}px`
64
+ },
65
+ children: /* @__PURE__ */ jsxs(
66
+ "svg",
67
+ {
68
+ ...gauge.getSVGProps(),
69
+ height: Math.max(width, height),
70
+ width: Math.max(width, height),
71
+ viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter + offset * 2}`,
72
+ children: [
73
+ /* @__PURE__ */ jsxs("g", { id: "arcs", children: [
88
74
  /* @__PURE__ */ jsx(
89
75
  "path",
90
76
  {
91
77
  ...gauge.getArcProps({
92
- offset: -50,
93
- startAngle: i === 0 ? START_ANGLE$5 : valueToAngle(innerValue),
94
- endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE$5 : valueToAngle(valueRanges[i + 1])
78
+ offset: offset - 5,
79
+ startAngle: 0,
80
+ endAngle: 360
95
81
  }),
96
- stroke: getColor(innerValue),
97
- opacity: "0.8",
98
- fill: "none",
82
+ stroke: "gray",
83
+ fill: backgroundColor ?? "none",
99
84
  strokeLinecap: "round",
100
- strokeWidth: 2
85
+ strokeWidth: 5
101
86
  }
102
87
  ),
103
- /* @__PURE__ */ createElement(
104
- "path",
88
+ valueRanges.map((innerValue, i) => {
89
+ const valueToAngle = (value2) => {
90
+ const angleRange = END_ANGLE$5 - START_ANGLE$5;
91
+ const valueRange = domainMax - domainMin;
92
+ const angle2 = START_ANGLE$5 + (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: -50,
101
+ startAngle: i === 0 ? START_ANGLE$5 : valueToAngle(innerValue),
102
+ endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE$5 : valueToAngle(valueRanges[i + 1])
103
+ }),
104
+ stroke: getColor(innerValue),
105
+ opacity: "0.8",
106
+ fill: "none",
107
+ strokeLinecap: "round",
108
+ strokeWidth: 2
109
+ }
110
+ ),
111
+ /* @__PURE__ */ createElement(
112
+ "path",
113
+ {
114
+ ...gauge.getArcProps({
115
+ offset: -55,
116
+ startAngle: i === 0 ? START_ANGLE$5 : valueToAngle(innerValue),
117
+ endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE$5 : valueToAngle(valueRanges[i + 1])
118
+ }),
119
+ key: `${innerValue}_${i}`,
120
+ stroke: getColor(innerValue),
121
+ opacity: "0.8",
122
+ fill: "none",
123
+ strokeLinecap: "round",
124
+ strokeWidth: 2
125
+ }
126
+ )
127
+ ] }, `${innerValue}_${i}`);
128
+ })
129
+ ] }),
130
+ /* @__PURE__ */ jsx("g", { id: "ticks", children: gauge.ticks.map((angle2) => {
131
+ const angleToValue = (angle3) => {
132
+ const angleRange = END_ANGLE$5 - START_ANGLE$5;
133
+ const valueRange = domainMax - domainMin;
134
+ const value2 = domainMin + (angle3 - START_ANGLE$5) / angleRange * valueRange;
135
+ return Math.round(value2);
136
+ };
137
+ const asValue = angleToValue(angle2);
138
+ const showText = asValue % 10 === 0;
139
+ return /* @__PURE__ */ jsxs(React.Fragment, { children: [
140
+ /* @__PURE__ */ jsx(
141
+ "line",
142
+ {
143
+ stroke: "gray",
144
+ strokeWidth: showText ? 4 : 2,
145
+ ...gauge.getTickProps({ angle: angle2, length: showText ? 12 : 3 })
146
+ }
147
+ ),
148
+ showText && /* @__PURE__ */ jsx(
149
+ "text",
150
+ {
151
+ fill: "black",
152
+ ...gauge.getLabelProps({ angle: angle2, offset: 20 }),
153
+ style: { fontSize: `${scaleValuesSize ?? 30}px` },
154
+ children: asValue
155
+ }
156
+ )
157
+ ] }, `tick-group-${angle2}`);
158
+ }) }),
159
+ /* @__PURE__ */ jsxs("g", { id: "needle", children: [
160
+ /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base, r: 20 }),
161
+ /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base }),
162
+ /* @__PURE__ */ jsx(
163
+ "circle",
105
164
  {
106
- ...gauge.getArcProps({
107
- offset: -55,
108
- startAngle: i === 0 ? START_ANGLE$5 : valueToAngle(innerValue),
109
- endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE$5 : valueToAngle(valueRanges[i + 1])
110
- }),
111
- key: `${innerValue}_${i}`,
112
- stroke: getColor(innerValue),
113
- opacity: "0.8",
114
- fill: "none",
115
- strokeLinecap: "round",
116
- strokeWidth: 2
165
+ fill: pointerColor,
166
+ opacity: "0.5",
167
+ ...needle.tip,
168
+ style: {
169
+ transform: `rotate(${angle}deg)`,
170
+ transition: "transform 500ms"
171
+ }
117
172
  }
118
- )
119
- ] }, `${innerValue}_${i}`);
120
- })
121
- ] }),
122
- /* @__PURE__ */ jsx("g", { id: "ticks", children: gauge.ticks.map((angle2) => {
123
- const angleToValue = (angle3) => {
124
- const angleRange = END_ANGLE$5 - START_ANGLE$5;
125
- const valueRange = domainMax - domainMin;
126
- const value2 = domainMin + (angle3 - START_ANGLE$5) / angleRange * valueRange;
127
- return Math.round(value2);
128
- };
129
- const asValue = angleToValue(angle2);
130
- const showText = asValue % 10 === 0;
131
- return /* @__PURE__ */ jsxs(React.Fragment, { children: [
132
- /* @__PURE__ */ jsx(
133
- "line",
134
- {
135
- stroke: "gray",
136
- strokeWidth: showText ? 4 : 2,
137
- ...gauge.getTickProps({ angle: angle2, length: showText ? 12 : 3 })
138
- }
139
- ),
140
- showText && /* @__PURE__ */ jsx(
173
+ ),
174
+ /* @__PURE__ */ jsx(
175
+ "polyline",
176
+ {
177
+ style: {
178
+ transform: `rotate(${angle}deg)`,
179
+ transition: "transform 500ms"
180
+ },
181
+ fill: pointerColor,
182
+ opacity: "0.5",
183
+ points: needle.points
184
+ }
185
+ ),
186
+ /* @__PURE__ */ jsx("circle", { fill: "white", ...needle.base, r: 4 })
187
+ ] }),
188
+ /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
141
189
  "text",
142
190
  {
143
- fill: "black",
144
- ...gauge.getLabelProps({ angle: angle2, offset: 20 }),
145
- style: { fontSize: `${scaleValuesSize ?? 30}px` },
146
- children: asValue
191
+ textAnchor: "middle",
192
+ y: diameter / 2,
193
+ fill: currentValueColor,
194
+ style: { fontSize: `${currentValueFontSize ?? 30}px` },
195
+ children: [
196
+ noNaN(value).toFixed(noNaN(valueDecimals)),
197
+ valueType === "2" || valueType === 2 ? "%" : ""
198
+ ]
147
199
  }
148
- )
149
- ] }, `tick-group-${angle2}`);
150
- }) }),
151
- /* @__PURE__ */ jsxs("g", { id: "needle", children: [
152
- /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base, r: 20 }),
153
- /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base }),
154
- /* @__PURE__ */ jsx(
155
- "circle",
156
- {
157
- fill: pointerColor,
158
- opacity: "0.5",
159
- ...needle.tip,
160
- style: {
161
- transform: `rotate(${angle}deg)`,
162
- transition: "transform 500ms"
163
- }
164
- }
165
- ),
166
- /* @__PURE__ */ jsx(
167
- "polyline",
168
- {
169
- style: {
170
- transform: `rotate(${angle}deg)`,
171
- transition: "transform 500ms"
172
- },
173
- fill: pointerColor,
174
- opacity: "0.5",
175
- points: needle.points
176
- }
177
- ),
178
- /* @__PURE__ */ jsx("circle", { fill: "white", ...needle.base, r: 4 })
179
- ] }),
180
- /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
181
- "text",
182
- {
183
- textAnchor: "middle",
184
- y: diameter / 2,
185
- fill: currentValueColor,
186
- style: { fontSize: `${currentValueFontSize ?? 30}px` },
187
- children: [
188
- noNaN(value).toFixed(noNaN(valueDecimals)),
189
- valueType === "2" || valueType === 2 ? "%" : ""
190
- ]
191
- }
192
- ) })
193
- ]
200
+ ) })
201
+ ]
202
+ }
203
+ )
194
204
  }
195
- ) });
205
+ );
196
206
  };
197
207
 
198
208
  const START_ANGLE$4 = 45;
@@ -237,7 +247,8 @@ const Oxford = ({
237
247
  baseRadius: 12,
238
248
  tipRadius: 2
239
249
  });
240
- const angle = (END_ANGLE$4 - START_ANGLE$4) * value / (domainMax - domainMin);
250
+ const needleValue = Math.min(value, domainMax);
251
+ const angle = (END_ANGLE$4 - START_ANGLE$4) * (needleValue - domainMin) / (domainMax - domainMin);
241
252
  function getColor(value2) {
242
253
  const index = valueRanges.findIndex(
243
254
  (range) => noNaN(value2) <= noNaN(range)
@@ -247,191 +258,200 @@ const Oxford = ({
247
258
  }
248
259
  return colorRanges[index];
249
260
  }
250
- return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
251
- "svg",
261
+ return /* @__PURE__ */ jsx(
262
+ Box,
252
263
  {
253
- ...gauge.getSVGProps(),
254
- height: Math.max(width, height),
255
- width: Math.max(width, height),
256
- viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter + offset * 2}`,
257
- children: [
258
- /* @__PURE__ */ jsxs("g", { id: "arcs", children: [
259
- /* @__PURE__ */ jsx(
260
- "path",
261
- {
262
- ...gauge.getArcProps({
263
- offset: offset - 5,
264
- startAngle: 0,
265
- endAngle: 360
266
- }),
267
- stroke: "black",
268
- opacity: "1",
269
- fill: backgroundColor !== "" && backgroundColor !== void 0 ? tinycolor(backgroundColor).setAlpha(0.5).toPercentageRgbString() : "none",
270
- strokeLinecap: "round",
271
- strokeWidth: 5,
272
- vectorEffect: "non-scaling-stroke"
273
- }
274
- ),
275
- valueRanges.map((innerValue, i) => {
276
- if (!valueRanges[i + 1]) {
277
- return null;
278
- }
279
- const valueToAngle = (value2) => {
280
- const angleRange = END_ANGLE$4 - START_ANGLE$4;
281
- const valueRange = domainMax - domainMin;
282
- const angle2 = START_ANGLE$4 + (value2 - domainMin) / valueRange * angleRange;
283
- return Math.round(angle2);
284
- };
285
- return /* @__PURE__ */ jsxs("g", { children: [
264
+ sx: {
265
+ height: `${Math.max(width, height)}px`,
266
+ width: `${Math.max(width, height)}px`
267
+ },
268
+ children: /* @__PURE__ */ jsxs(
269
+ "svg",
270
+ {
271
+ ...gauge.getSVGProps(),
272
+ height: Math.max(width, height),
273
+ width: Math.max(width, height),
274
+ viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter + offset * 2}`,
275
+ children: [
276
+ /* @__PURE__ */ jsxs("g", { id: "arcs", children: [
286
277
  /* @__PURE__ */ jsx(
287
278
  "path",
288
279
  {
289
280
  ...gauge.getArcProps({
290
281
  offset: offset - 5,
291
- startAngle: i === 0 ? START_ANGLE$4 : valueToAngle(innerValue),
292
- endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE$4 : valueToAngle(valueRanges[i + 1])
282
+ startAngle: 0,
283
+ endAngle: 360
293
284
  }),
294
285
  stroke: "black",
295
- opacity: "0.8",
296
- fill: "none",
297
- strokeLinecap: "square",
286
+ opacity: "1",
287
+ fill: backgroundColor !== "" && backgroundColor !== void 0 ? tinycolor(backgroundColor).setAlpha(0.5).toPercentageRgbString() : "none",
288
+ strokeLinecap: "round",
298
289
  strokeWidth: 5,
299
290
  vectorEffect: "non-scaling-stroke"
300
291
  }
301
292
  ),
302
- /* @__PURE__ */ jsx(
303
- "path",
304
- {
305
- ...gauge.getArcProps({
306
- offset: -20,
307
- startAngle: i === 0 ? START_ANGLE$4 : valueToAngle(innerValue),
308
- endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE$4 : valueToAngle(valueRanges[i + 1])
309
- }),
310
- stroke: getColor(innerValue),
311
- opacity: "0.1",
312
- fill: "none",
313
- strokeLinecap: "butt",
314
- strokeWidth: 75,
315
- vectorEffect: "non-scaling-stroke"
316
- }
317
- ),
318
- /* @__PURE__ */ createElement(
319
- "path",
320
- {
321
- ...gauge.getArcProps({
322
- offset: -55,
323
- startAngle: i === 0 ? START_ANGLE$4 : valueToAngle(innerValue),
324
- endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE$4 : valueToAngle(valueRanges[i + 1])
325
- }),
326
- key: `${innerValue}_${i}`,
327
- stroke: getColor(innerValue) || "#999",
328
- opacity: "0.8",
329
- fill: "none",
330
- strokeLinecap: "butt",
331
- strokeWidth: 10,
332
- vectorEffect: "non-scaling-stroke"
293
+ valueRanges.map((innerValue, i) => {
294
+ if (!valueRanges[i + 1]) {
295
+ return null;
333
296
  }
334
- )
335
- ] }, `${innerValue}_${i}`);
336
- })
337
- ] }),
338
- /* @__PURE__ */ jsxs("g", { id: "ticks", children: [
339
- gauge.ticks.map((angle2, i) => {
340
- const angleToValue = (angle3) => {
341
- const angleRange = END_ANGLE$4 - START_ANGLE$4;
342
- const valueRange = domainMax - domainMin;
343
- const value2 = domainMin + (angle3 - START_ANGLE$4) / angleRange * valueRange;
344
- return Math.round(value2);
345
- };
346
- const asValue = angleToValue(angle2);
347
- const showText = asValue % 10 === 0;
348
- return /* @__PURE__ */ jsxs(React.Fragment, { children: [
297
+ const valueToAngle = (value2) => {
298
+ const angleRange = END_ANGLE$4 - START_ANGLE$4;
299
+ const valueRange = domainMax - domainMin;
300
+ const angle2 = START_ANGLE$4 + (value2 - domainMin) / valueRange * angleRange;
301
+ return Math.round(angle2);
302
+ };
303
+ return /* @__PURE__ */ jsxs("g", { children: [
304
+ /* @__PURE__ */ jsx(
305
+ "path",
306
+ {
307
+ ...gauge.getArcProps({
308
+ offset: offset - 5,
309
+ startAngle: i === 0 ? START_ANGLE$4 : valueToAngle(innerValue),
310
+ endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE$4 : valueToAngle(valueRanges[i + 1])
311
+ }),
312
+ stroke: "black",
313
+ opacity: "0.8",
314
+ fill: "none",
315
+ strokeLinecap: "square",
316
+ strokeWidth: 5,
317
+ vectorEffect: "non-scaling-stroke"
318
+ }
319
+ ),
320
+ /* @__PURE__ */ jsx(
321
+ "path",
322
+ {
323
+ ...gauge.getArcProps({
324
+ offset: -20,
325
+ startAngle: i === 0 ? START_ANGLE$4 : valueToAngle(innerValue),
326
+ endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE$4 : valueToAngle(valueRanges[i + 1])
327
+ }),
328
+ stroke: getColor(innerValue),
329
+ opacity: "0.1",
330
+ fill: "none",
331
+ strokeLinecap: "butt",
332
+ strokeWidth: 75,
333
+ vectorEffect: "non-scaling-stroke"
334
+ }
335
+ ),
336
+ /* @__PURE__ */ createElement(
337
+ "path",
338
+ {
339
+ ...gauge.getArcProps({
340
+ offset: -55,
341
+ startAngle: i === 0 ? START_ANGLE$4 : valueToAngle(innerValue),
342
+ endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE$4 : valueToAngle(valueRanges[i + 1])
343
+ }),
344
+ key: `${innerValue}_${i}`,
345
+ stroke: getColor(innerValue) || "#999",
346
+ opacity: "0.8",
347
+ fill: "none",
348
+ strokeLinecap: "butt",
349
+ strokeWidth: 10,
350
+ vectorEffect: "non-scaling-stroke"
351
+ }
352
+ )
353
+ ] }, `${innerValue}_${i}`);
354
+ })
355
+ ] }),
356
+ /* @__PURE__ */ jsxs("g", { id: "ticks", children: [
357
+ gauge.ticks.map((angle2, i) => {
358
+ const angleToValue = (angle3) => {
359
+ const angleRange = END_ANGLE$4 - START_ANGLE$4;
360
+ const valueRange = domainMax - domainMin;
361
+ const value2 = domainMin + (angle3 - START_ANGLE$4) / angleRange * valueRange;
362
+ return Math.round(value2);
363
+ };
364
+ const asValue = angleToValue(angle2);
365
+ const showText = asValue % 10 === 0;
366
+ return /* @__PURE__ */ jsxs(React.Fragment, { children: [
367
+ /* @__PURE__ */ jsx(
368
+ "line",
369
+ {
370
+ stroke: "gray",
371
+ strokeWidth: showText ? 4 : 2,
372
+ ...gauge.getTickProps({ angle: angle2, length: showText ? 12 : 3 }),
373
+ vectorEffect: "non-scaling-stroke"
374
+ }
375
+ ),
376
+ showText && /* @__PURE__ */ jsx(
377
+ "text",
378
+ {
379
+ fill: "black",
380
+ ...gauge.getLabelProps({
381
+ angle: angle2,
382
+ offset: 20
383
+ }),
384
+ style: {
385
+ fontSize: `${scaleValuesSize ?? 30}px`
386
+ },
387
+ children: asValue
388
+ }
389
+ )
390
+ ] }, `tick-group-${angle2}_ ${i}`);
391
+ }),
392
+ gauge2.ticks.map((angle2, i) => {
393
+ return /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsx(
394
+ "line",
395
+ {
396
+ stroke: "gray",
397
+ strokeWidth: 2,
398
+ ...gauge.getTickProps({
399
+ angle: angle2,
400
+ length: 3
401
+ }),
402
+ vectorEffect: "non-scaling-stroke"
403
+ }
404
+ ) }, `tick-group-${angle2}_ ${i}_2`);
405
+ })
406
+ ] }),
407
+ /* @__PURE__ */ jsxs("g", { id: "needle", children: [
408
+ /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base, r: 20 }),
409
+ /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base }),
349
410
  /* @__PURE__ */ jsx(
350
- "line",
411
+ "circle",
351
412
  {
352
- stroke: "gray",
353
- strokeWidth: showText ? 4 : 2,
354
- ...gauge.getTickProps({ angle: angle2, length: showText ? 12 : 3 }),
355
- vectorEffect: "non-scaling-stroke"
413
+ fill: pointerColor,
414
+ opacity: "0.5",
415
+ ...needle.tip,
416
+ style: {
417
+ transform: `rotate(${angle}deg)`,
418
+ transition: "transform 500ms"
419
+ }
356
420
  }
357
421
  ),
358
- showText && /* @__PURE__ */ jsx(
359
- "text",
422
+ /* @__PURE__ */ jsx(
423
+ "polyline",
360
424
  {
361
- fill: "black",
362
- ...gauge.getLabelProps({
363
- angle: angle2,
364
- offset: 20
365
- }),
366
425
  style: {
367
- fontSize: `${scaleValuesSize ?? 30}px`
426
+ transform: `rotate(${angle}deg)`,
427
+ transition: "transform 500ms"
368
428
  },
369
- children: asValue
429
+ fill: pointerColor,
430
+ opacity: "0.5",
431
+ points: needle.points
370
432
  }
371
- )
372
- ] }, `tick-group-${angle2}_ ${i}`);
373
- }),
374
- gauge2.ticks.map((angle2, i) => {
375
- return /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsx(
376
- "line",
433
+ ),
434
+ /* @__PURE__ */ jsx("circle", { fill: "white", ...needle.base, r: 4 })
435
+ ] }),
436
+ /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
437
+ "text",
377
438
  {
378
- stroke: "gray",
379
- strokeWidth: 2,
380
- ...gauge.getTickProps({
381
- angle: angle2,
382
- length: 3
383
- }),
384
- vectorEffect: "non-scaling-stroke"
385
- }
386
- ) }, `tick-group-${angle2}_ ${i}_2`);
387
- })
388
- ] }),
389
- /* @__PURE__ */ jsxs("g", { id: "needle", children: [
390
- /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base, r: 20 }),
391
- /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base }),
392
- /* @__PURE__ */ jsx(
393
- "circle",
394
- {
395
- fill: pointerColor,
396
- opacity: "0.5",
397
- ...needle.tip,
398
- style: {
399
- transform: `rotate(${angle}deg)`,
400
- transition: "transform 500ms"
439
+ textAnchor: "middle",
440
+ alignmentBaseline: "text-before-edge",
441
+ y: diameter / 5,
442
+ style: { fontSize: `${currentValueFontSize ?? 30}px` },
443
+ fill: currentValueColor,
444
+ children: [
445
+ noNaN(value).toFixed(noNaN(valueDecimals)),
446
+ valueType === "2" || valueType === 2 ? "%" : ""
447
+ ]
401
448
  }
402
- }
403
- ),
404
- /* @__PURE__ */ jsx(
405
- "polyline",
406
- {
407
- style: {
408
- transform: `rotate(${angle}deg)`,
409
- transition: "transform 500ms"
410
- },
411
- fill: pointerColor,
412
- opacity: "0.5",
413
- points: needle.points
414
- }
415
- ),
416
- /* @__PURE__ */ jsx("circle", { fill: "white", ...needle.base, r: 4 })
417
- ] }),
418
- /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
419
- "text",
420
- {
421
- textAnchor: "middle",
422
- alignmentBaseline: "text-before-edge",
423
- y: diameter / 5,
424
- style: { fontSize: `${currentValueFontSize ?? 30}px` },
425
- fill: currentValueColor,
426
- children: [
427
- noNaN(value).toFixed(noNaN(valueDecimals)),
428
- valueType === "2" || valueType === 2 ? "%" : ""
429
- ]
430
- }
431
- ) })
432
- ]
449
+ ) })
450
+ ]
451
+ }
452
+ )
433
453
  }
434
- ) });
454
+ );
435
455
  };
436
456
 
437
457
  const START_ANGLE$3 = 0;
@@ -495,59 +515,70 @@ const Counter = ({
495
515
  }
496
516
  );
497
517
  }, [noNaN(currentValue)]);
498
- return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, className: "widgetContainer__Counter", children: [
499
- /* @__PURE__ */ jsx(
500
- "svg",
501
- {
502
- ...gauge.getSVGProps(),
503
- height: Math.max(width, height),
504
- width: Math.max(width, height),
505
- viewBox: void 0,
506
- children: /* @__PURE__ */ jsx("g", { id: "arcs", children: addBorder && `${value}`.length < 4 && /* @__PURE__ */ jsx(
507
- "ellipse",
518
+ return /* @__PURE__ */ jsxs(
519
+ Box,
520
+ {
521
+ sx: {
522
+ position: "relative",
523
+ height: `${Math.max(width, height)}px`,
524
+ width: `${Math.max(width, height)}px`
525
+ },
526
+ className: "widgetContainer__Counter",
527
+ children: [
528
+ /* @__PURE__ */ jsx(
529
+ "svg",
508
530
  {
509
- cx: Math.max(width, height) / 2,
510
- cy: Math.max(width, height) / 2,
511
- rx: Math.max(width, height) / 5,
512
- ry: Math.max(width, height) / 5,
513
- stroke: "gray",
514
- opacity: "0.2",
515
- fill: "none",
516
- strokeLinecap: "round",
517
- strokeWidth: 2
531
+ ...gauge.getSVGProps(),
532
+ height: Math.max(width, height),
533
+ width: Math.max(width, height),
534
+ viewBox: void 0,
535
+ children: /* @__PURE__ */ jsx("g", { id: "arcs", children: addBorder && `${value}`.length < 4 && /* @__PURE__ */ jsx(
536
+ "ellipse",
537
+ {
538
+ cx: Math.max(width, height) / 2,
539
+ cy: Math.max(width, height) / 2,
540
+ rx: Math.max(width, height) / 5,
541
+ ry: Math.max(width, height) / 5,
542
+ stroke: "gray",
543
+ opacity: "0.2",
544
+ fill: "none",
545
+ strokeLinecap: "round",
546
+ strokeWidth: 2
547
+ }
548
+ ) })
518
549
  }
519
- ) })
520
- }
521
- ),
522
- /* @__PURE__ */ jsx(
523
- "svg",
524
- {
525
- height: Math.max(width, height),
526
- width: Math.max(width, height),
527
- style: { position: "absolute", left: 0, top: 0 },
528
- children: /* @__PURE__ */ jsxs(
529
- "text",
550
+ ),
551
+ /* @__PURE__ */ jsx(
552
+ "svg",
530
553
  {
531
- x: Math.max(width, height) / 2,
532
- y: Math.max(width, height) / 2 - 5,
533
- textAnchor: "middle",
534
- style: {
535
- fontSize: `${currentValueFontSize ?? 80}px`,
536
- transition: "fill 0.5s"
537
- },
538
- alignmentBaseline: "central",
539
- fill: getColor(value),
540
- children: [
541
- unitPosition === "START" && !["", void 0, null].includes(unit) ? unit : "",
542
- noNaN(value).toFixed(noNaN(valueDecimals)),
543
- valueType === "2" || valueType === 2 ? "%" : "",
544
- unitPosition === "END" && !["", void 0, null].includes(unit) ? unit : ""
545
- ]
554
+ height: Math.max(width, height),
555
+ width: Math.max(width, height),
556
+ style: { position: "absolute", left: 0, top: 0 },
557
+ children: /* @__PURE__ */ jsxs(
558
+ "text",
559
+ {
560
+ x: Math.max(width, height) / 2,
561
+ y: Math.max(width, height) / 2 - 5,
562
+ textAnchor: "middle",
563
+ style: {
564
+ fontSize: `${currentValueFontSize ?? 80}px`,
565
+ transition: "fill 0.5s"
566
+ },
567
+ dy: "0.35em",
568
+ fill: getColor(value),
569
+ children: [
570
+ unitPosition === "START" && !["", void 0, null].includes(unit) ? unit : "",
571
+ noNaN(value).toFixed(noNaN(valueDecimals)),
572
+ valueType === "2" || valueType === 2 ? "%" : "",
573
+ unitPosition === "END" && !["", void 0, null].includes(unit) ? unit : ""
574
+ ]
575
+ }
576
+ )
546
577
  }
547
578
  )
548
- }
549
- )
550
- ] });
579
+ ]
580
+ }
581
+ );
551
582
  };
552
583
 
553
584
  const START_ANGLE$2 = 0;
@@ -630,65 +661,74 @@ const TLight = ({
630
661
  }
631
662
  );
632
663
  }, [noNaN(currentValue)]);
633
- return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
634
- "svg",
664
+ return /* @__PURE__ */ jsx(
665
+ Box,
635
666
  {
636
- ...gauge.getSVGProps(),
637
- style: { visibility: "hidden" },
638
- height: Math.max(width, height),
639
- width: Math.max(width, height),
640
- id: "TLight_svg",
641
- ref: onRenderSvg,
642
- viewBox: `-${diameter / 2} -${diameter / 2} ${diameter} ${diameter}`,
643
- children: [
644
- /* @__PURE__ */ jsxs("g", { id: "TLight_arcs", children: [
645
- /* @__PURE__ */ jsx(
646
- "path",
647
- {
648
- ...gauge.getArcProps({
649
- startAngle: START_ANGLE$2,
650
- endAngle: END_ANGLE$2
651
- }),
652
- fill: getColor(value),
653
- id: "TLight_path",
654
- style: { transition: "fill 0.3s" }
655
- }
656
- ),
657
- addBorder && /* @__PURE__ */ jsx(
658
- "path",
659
- {
660
- ...gauge.getArcProps({
661
- offset: -2.5,
662
- startAngle: START_ANGLE$2,
663
- endAngle: END_ANGLE$2
664
- }),
665
- stroke: "black",
666
- fill: "transparent",
667
- strokeLinecap: "round",
668
- strokeWidth: 5,
669
- id: "TLight_path"
670
- }
671
- )
672
- ] }),
673
- /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
674
- "text",
675
- {
676
- textAnchor: "middle",
677
- style: { fontSize: `${currentValueFontSize ?? 100}pt` },
678
- alignmentBaseline: "central",
679
- fill: currentValueColor,
680
- children: [
681
- unitPosition && unitPosition === "START" && !["", void 0, null].includes(unit) ? unit : "",
682
- noNaN(value).toFixed(noNaN(valueDecimals)),
683
- valueType === "2" || valueType === 2 ? "%" : "",
684
- !["", void 0, null].includes(unit) ? unit : "",
685
- unitPosition && unitPosition === "END" && !["", void 0, null].includes(unit) ? unit : ""
686
- ]
687
- }
688
- ) })
689
- ]
667
+ sx: {
668
+ height: `${Math.max(width, height)}px`,
669
+ width: `${Math.max(width, height)}px`
670
+ },
671
+ children: /* @__PURE__ */ jsxs(
672
+ "svg",
673
+ {
674
+ ...gauge.getSVGProps(),
675
+ style: { visibility: "hidden" },
676
+ height: Math.max(width, height),
677
+ width: Math.max(width, height),
678
+ id: "TLight_svg",
679
+ ref: onRenderSvg,
680
+ viewBox: `-${diameter / 2} -${diameter / 2} ${diameter} ${diameter}`,
681
+ children: [
682
+ /* @__PURE__ */ jsxs("g", { id: "TLight_arcs", children: [
683
+ /* @__PURE__ */ jsx(
684
+ "path",
685
+ {
686
+ ...gauge.getArcProps({
687
+ startAngle: START_ANGLE$2,
688
+ endAngle: END_ANGLE$2
689
+ }),
690
+ fill: getColor(value),
691
+ id: "TLight_path",
692
+ style: { transition: "fill 0.3s" }
693
+ }
694
+ ),
695
+ addBorder && /* @__PURE__ */ jsx(
696
+ "path",
697
+ {
698
+ ...gauge.getArcProps({
699
+ offset: -2.5,
700
+ startAngle: START_ANGLE$2,
701
+ endAngle: END_ANGLE$2
702
+ }),
703
+ stroke: "black",
704
+ fill: "transparent",
705
+ strokeLinecap: "round",
706
+ strokeWidth: 5,
707
+ id: "TLight_path"
708
+ }
709
+ )
710
+ ] }),
711
+ /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
712
+ "text",
713
+ {
714
+ textAnchor: "middle",
715
+ style: { fontSize: `${currentValueFontSize ?? 100}pt` },
716
+ dy: "0.35em",
717
+ fill: currentValueColor,
718
+ children: [
719
+ unitPosition && unitPosition === "START" && !["", void 0, null].includes(unit) ? unit : "",
720
+ noNaN(value).toFixed(noNaN(valueDecimals)),
721
+ valueType === "2" || valueType === 2 ? "%" : "",
722
+ !["", void 0, null].includes(unit) ? unit : "",
723
+ unitPosition && unitPosition === "END" && !["", void 0, null].includes(unit) ? unit : ""
724
+ ]
725
+ }
726
+ ) })
727
+ ]
728
+ }
729
+ )
690
730
  }
691
- ) });
731
+ );
692
732
  };
693
733
 
694
734
  const colorGetter = (valueRanges, colorRanges, innerValue) => {
@@ -807,8 +847,9 @@ const Thermometer = ({
807
847
  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
808
848
  const pathDValue = `m 179.6875,717.73633 c -0.45013,0 -0.8125,0.36237 -0.8125,0.8125 l 0,8.46289 a 2.3125,2.3125 0 0 0 -1.5,2.16211 2.3125,2.3125 0 0 0 2.3125,2.3125 2.3125,2.3125 0 0 0 2.3125,-2.3125 2.3125,2.3125 0 0 0 -1.5,-2.16211 l 0,-8.46289 c 0,-0.45013 -0.36237,-0.8125 -0.8125,-0.8125 z`;
809
849
  const uId = useMemo(() => uniqueId(), []);
850
+ const visualValue = Math.max(baseValue, Math.min(value, domainMax));
810
851
  const { rectProps, rectRef, svgViewBox, pathX} = useCustomWidget({
811
- currentValue: value,
852
+ currentValue: visualValue,
812
853
  maxValue: domainMax,
813
854
  minValue: baseValue,
814
855
  uId
@@ -832,144 +873,154 @@ const Thermometer = ({
832
873
  height: boxValues.height * (valueToTickPercent(domainMax, baseValue, separation * i) / 100)
833
874
  };
834
875
  });
835
- return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
836
- /* @__PURE__ */ jsxs(
837
- "svg",
838
- {
839
- height: Math.max(width, height),
840
- width: Math.max(width, height),
841
- id: `svg_${uId}`,
842
- viewBox: svgViewBox,
843
- style: { position: "relative", top: "10px" },
844
- children: [
845
- /* @__PURE__ */ jsx("clipPath", { id: "clipPath", children: /* @__PURE__ */ jsx("path", { d: pathDValue }) }),
846
- /* @__PURE__ */ jsx("mask", { id: "myMask", children: /* @__PURE__ */ jsx("path", { d: pathDValue, id: "maskPath", fill: "white" }) }),
847
- /* @__PURE__ */ jsx("path", { d: pathDValue, id: `path_${uId}`, fill: "white" }),
848
- /* @__PURE__ */ jsx(
849
- "rect",
850
- {
851
- fill: getInnerColor(valueRanges, colorRanges, value),
852
- id: `rect_${uId}`,
853
- mask: "url(#myMask)",
854
- ref: rectRef,
855
- ...rectProps
856
- }
857
- ),
858
- /* @__PURE__ */ jsx(
859
- "path",
860
- {
861
- d: pathDValue,
862
- id: "path",
863
- fill: "none",
864
- stroke: "white",
865
- strokeWidth: 10,
866
- clipPath: "url(#clipPath)",
867
- vectorEffect: "non-scaling-stroke"
868
- }
869
- ),
870
- /* @__PURE__ */ jsx(
871
- "path",
872
- {
873
- clipPath: "url(#clipPath)",
874
- d: pathDValue,
875
- id: "path",
876
- fill: "none",
877
- stroke: "black",
878
- strokeWidth: 5,
879
- vectorEffect: "non-scaling-stroke"
880
- }
881
- )
882
- ]
883
- }
884
- ),
885
- /* @__PURE__ */ jsxs(
886
- "svg",
887
- {
888
- height: Math.max(width, height) + 10,
889
- width: Math.max(width, height),
890
- style: { position: "absolute", left: 0, top: 0 },
891
- children: [
892
- boxValues.x && /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
893
- "text",
894
- {
895
- x: Math.max(width, height) / 2,
896
- y: Math.max(width, height) - Math.max(width, height) / 6 + 10,
897
- style: {
898
- fontSize: `${noNaN(currentValueFontSize) ?? 50}px`,
899
- fontWeight: 900
900
- },
901
- textAnchor: "middle",
902
- alignmentBaseline: "central",
903
- vectorEffect: "non-scaling-stroke",
904
- children: [
905
- noNaN(value).toFixed(noNaN(valueDecimals)),
906
- valueType === "2" || valueType === 2 ? "%" : ""
907
- ]
908
- }
909
- ) }),
910
- cosmeticTicksArray.map((tick, i) => {
911
- if (i === 0) {
912
- return null;
913
- }
914
- return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
915
- "rect",
916
- {
917
- x: Math.max(width, height) / 2,
918
- y: tick.height + 10,
919
- width: "15px",
920
- height: "1px",
921
- vectorEffect: "non-scaling-stroke",
922
- fill: "black"
923
- }
924
- ) }, i);
925
- }),
926
- tickArray.map((tick, i) => {
927
- return /* @__PURE__ */ jsxs("g", { children: [
928
- tickArray[i + 1] && i > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
929
- /* @__PURE__ */ jsx(
930
- "rect",
931
- {
932
- x: Math.max(width, height) / 2 - 15,
933
- y: tick.height + 7,
934
- width: "30px",
935
- height: "3px",
936
- vectorEffect: "non-scaling-stroke",
937
- fill: getColor(valueRanges, colorRanges, tick.value)
938
- }
939
- ),
940
- /* @__PURE__ */ jsx(
941
- "rect",
942
- {
943
- x: Math.max(width, height) / 2 - 15,
944
- y: tick.height - 10,
945
- width: "30px",
946
- height: "20px",
947
- opacity: 0.1,
948
- vectorEffect: "non-scaling-stroke",
949
- fill: getColor(valueRanges, colorRanges, tick.value)
950
- }
951
- )
952
- ] }),
953
- i > 0 && /* @__PURE__ */ jsx(
876
+ return /* @__PURE__ */ jsxs(
877
+ Box,
878
+ {
879
+ sx: {
880
+ position: "relative",
881
+ height: `${Math.max(width, height)}px`,
882
+ width: `${Math.max(width, height)}px`
883
+ },
884
+ children: [
885
+ /* @__PURE__ */ jsxs(
886
+ "svg",
887
+ {
888
+ height: Math.max(width, height),
889
+ width: Math.max(width, height),
890
+ id: `svg_${uId}`,
891
+ viewBox: svgViewBox,
892
+ style: { position: "relative", top: "10px" },
893
+ children: [
894
+ /* @__PURE__ */ jsx("clipPath", { id: "clipPath", children: /* @__PURE__ */ jsx("path", { d: pathDValue }) }),
895
+ /* @__PURE__ */ jsx("mask", { id: "myMask", children: /* @__PURE__ */ jsx("path", { d: pathDValue, id: "maskPath", fill: "white" }) }),
896
+ /* @__PURE__ */ jsx("path", { d: pathDValue, id: `path_${uId}`, fill: "white" }),
897
+ /* @__PURE__ */ jsx(
898
+ "rect",
899
+ {
900
+ fill: getInnerColor(valueRanges, colorRanges, value),
901
+ id: `rect_${uId}`,
902
+ mask: "url(#myMask)",
903
+ ref: rectRef,
904
+ ...rectProps
905
+ }
906
+ ),
907
+ /* @__PURE__ */ jsx(
908
+ "path",
909
+ {
910
+ d: pathDValue,
911
+ id: "path",
912
+ fill: "none",
913
+ stroke: "white",
914
+ strokeWidth: 10,
915
+ clipPath: "url(#clipPath)",
916
+ vectorEffect: "non-scaling-stroke"
917
+ }
918
+ ),
919
+ /* @__PURE__ */ jsx(
920
+ "path",
921
+ {
922
+ clipPath: "url(#clipPath)",
923
+ d: pathDValue,
924
+ id: "path",
925
+ fill: "none",
926
+ stroke: "black",
927
+ strokeWidth: 5,
928
+ vectorEffect: "non-scaling-stroke"
929
+ }
930
+ )
931
+ ]
932
+ }
933
+ ),
934
+ /* @__PURE__ */ jsxs(
935
+ "svg",
936
+ {
937
+ height: Math.max(width, height) + 10,
938
+ width: Math.max(width, height),
939
+ style: { position: "absolute", left: 0, top: 0 },
940
+ children: [
941
+ boxValues.x && /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
954
942
  "text",
955
943
  {
956
- x: Math.max(width, height) / 2 + 14,
957
- y: tickArray[i + 1] ? tick.height + 5 : tick.height + 19,
958
- textAnchor: "end",
959
- alignmentBaseline: tickArray[i + 1] ? "auto" : "text-before-edge",
944
+ x: Math.max(width, height) / 2,
945
+ y: Math.max(width, height) - Math.max(width, height) / 6 + 10,
960
946
  style: {
961
- fontSize: "12px",
962
- fontWeight: 600
947
+ fontSize: `${noNaN(currentValueFontSize) ?? 50}px`,
948
+ fontWeight: 900
963
949
  },
964
- children: noNaN(tick.value).toFixed(0)
950
+ textAnchor: "middle",
951
+ dy: "0.35em",
952
+ vectorEffect: "non-scaling-stroke",
953
+ children: [
954
+ noNaN(value).toFixed(noNaN(valueDecimals)),
955
+ valueType === "2" || valueType === 2 ? "%" : ""
956
+ ]
965
957
  }
966
- )
967
- ] }, i);
968
- })
969
- ]
970
- }
971
- )
972
- ] });
958
+ ) }),
959
+ cosmeticTicksArray.map((tick, i) => {
960
+ if (i === 0) {
961
+ return null;
962
+ }
963
+ return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
964
+ "rect",
965
+ {
966
+ x: Math.max(width, height) / 2,
967
+ y: tick.height + 10,
968
+ width: "15px",
969
+ height: "1px",
970
+ vectorEffect: "non-scaling-stroke",
971
+ fill: "black"
972
+ }
973
+ ) }, i);
974
+ }),
975
+ tickArray.map((tick, i) => {
976
+ return /* @__PURE__ */ jsxs("g", { children: [
977
+ tickArray[i + 1] && i > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
978
+ /* @__PURE__ */ jsx(
979
+ "rect",
980
+ {
981
+ x: Math.max(width, height) / 2 - 15,
982
+ y: tick.height + 7,
983
+ width: "30px",
984
+ height: "3px",
985
+ vectorEffect: "non-scaling-stroke",
986
+ fill: getColor(valueRanges, colorRanges, tick.value)
987
+ }
988
+ ),
989
+ /* @__PURE__ */ jsx(
990
+ "rect",
991
+ {
992
+ x: Math.max(width, height) / 2 - 15,
993
+ y: tick.height - 10,
994
+ width: "30px",
995
+ height: "20px",
996
+ opacity: 0.1,
997
+ vectorEffect: "non-scaling-stroke",
998
+ fill: getColor(valueRanges, colorRanges, tick.value)
999
+ }
1000
+ )
1001
+ ] }),
1002
+ i > 0 && /* @__PURE__ */ jsx(
1003
+ "text",
1004
+ {
1005
+ x: Math.max(width, height) / 2 + 14,
1006
+ y: tickArray[i + 1] ? tick.height + 5 : tick.height + 19,
1007
+ textAnchor: "end",
1008
+ alignmentBaseline: tickArray[i + 1] ? "auto" : "text-before-edge",
1009
+ style: {
1010
+ fontSize: "12px",
1011
+ fontWeight: 600
1012
+ },
1013
+ children: noNaN(tick.value).toFixed(0)
1014
+ }
1015
+ )
1016
+ ] }, i);
1017
+ })
1018
+ ]
1019
+ }
1020
+ )
1021
+ ]
1022
+ }
1023
+ );
973
1024
  };
974
1025
 
975
1026
  const START_ANGLE$1 = 90;
@@ -1012,106 +1063,116 @@ const Scale = ({
1012
1063
  baseRadius: 12,
1013
1064
  tipRadius: 2
1014
1065
  });
1015
- const angle = (END_ANGLE$1 - START_ANGLE$1) * value / (domainMax - domainMin);
1016
- return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
1017
- "svg",
1066
+ const needleValue = Math.min(value, domainMax);
1067
+ const angle = (END_ANGLE$1 - START_ANGLE$1) * (needleValue - domainMin) / (domainMax - domainMin);
1068
+ return /* @__PURE__ */ jsx(
1069
+ Box,
1018
1070
  {
1019
- ...gauge.getSVGProps(),
1020
- height: Math.max(width, height),
1021
- width: Math.max(width, height),
1022
- viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter / 2 + offset * 2}`,
1023
- children: [
1024
- /* @__PURE__ */ jsx("g", { id: "arcs", children: /* @__PURE__ */ jsx(
1025
- "path",
1026
- {
1027
- ...gauge.getArcProps({
1028
- offset: offset - 5,
1029
- startAngle: 90,
1030
- endAngle: 270
1031
- }),
1032
- stroke: "gray",
1033
- opacity: "0.2",
1034
- fill: "none",
1035
- strokeLinecap: "round",
1036
- strokeWidth: 5
1037
- }
1038
- ) }),
1039
- /* @__PURE__ */ jsxs("g", { id: "ticks", children: [
1040
- gauge.ticks.map((angle2) => {
1041
- const angleToValue = (angle3) => {
1042
- const angleRange = END_ANGLE$1 - START_ANGLE$1;
1043
- const valueRange = domainMax - domainMin;
1044
- const value2 = domainMin + (angle3 - START_ANGLE$1) / angleRange * valueRange;
1045
- return Math.round(value2);
1046
- };
1047
- const asValue = angleToValue(angle2);
1048
- const showText = asValue % 10 === 0;
1049
- return /* @__PURE__ */ jsxs(React.Fragment, { children: [
1071
+ sx: {
1072
+ height: `${Math.max(width, height)}px`,
1073
+ width: `${Math.max(width, height)}px`
1074
+ },
1075
+ children: /* @__PURE__ */ jsxs(
1076
+ "svg",
1077
+ {
1078
+ ...gauge.getSVGProps(),
1079
+ height: Math.max(width, height),
1080
+ width: Math.max(width, height),
1081
+ viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter / 2 + offset * 2}`,
1082
+ children: [
1083
+ /* @__PURE__ */ jsx("g", { id: "arcs", children: /* @__PURE__ */ jsx(
1084
+ "path",
1085
+ {
1086
+ ...gauge.getArcProps({
1087
+ offset: offset - 5,
1088
+ startAngle: 90,
1089
+ endAngle: 270
1090
+ }),
1091
+ stroke: "gray",
1092
+ opacity: "0.2",
1093
+ fill: "none",
1094
+ strokeLinecap: "round",
1095
+ strokeWidth: 5
1096
+ }
1097
+ ) }),
1098
+ /* @__PURE__ */ jsxs("g", { id: "ticks", children: [
1099
+ gauge.ticks.map((angle2) => {
1100
+ const angleToValue = (angle3) => {
1101
+ const angleRange = END_ANGLE$1 - START_ANGLE$1;
1102
+ const valueRange = domainMax - domainMin;
1103
+ const value2 = domainMin + (angle3 - START_ANGLE$1) / angleRange * valueRange;
1104
+ return Math.round(value2);
1105
+ };
1106
+ const asValue = angleToValue(angle2);
1107
+ const showText = asValue % 10 === 0;
1108
+ return /* @__PURE__ */ jsxs(React.Fragment, { children: [
1109
+ /* @__PURE__ */ jsx(
1110
+ "line",
1111
+ {
1112
+ stroke: "gray",
1113
+ strokeWidth: showText ? 4 : 2,
1114
+ ...gauge.getTickProps({ angle: angle2, length: showText ? 12 : 3 })
1115
+ }
1116
+ ),
1117
+ showText && /* @__PURE__ */ jsx(
1118
+ "text",
1119
+ {
1120
+ fill: "black",
1121
+ ...gauge.getLabelProps({ angle: angle2, offset: 20 }),
1122
+ style: { fontSize: `${scaleValuesSize ?? 30}px` },
1123
+ children: asValue
1124
+ }
1125
+ )
1126
+ ] }, `tick-group-${angle2}`);
1127
+ }),
1128
+ allTicks
1129
+ ] }),
1130
+ /* @__PURE__ */ jsxs("g", { id: "needle", children: [
1131
+ /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base, r: 20 }),
1132
+ /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base }),
1050
1133
  /* @__PURE__ */ jsx(
1051
- "line",
1134
+ "circle",
1052
1135
  {
1053
- stroke: "gray",
1054
- strokeWidth: showText ? 4 : 2,
1055
- ...gauge.getTickProps({ angle: angle2, length: showText ? 12 : 3 })
1136
+ fill: pointerColor,
1137
+ opacity: "0.5",
1138
+ ...needle.tip,
1139
+ style: {
1140
+ transform: `rotate(${angle}deg)`,
1141
+ transition: "transform 500ms"
1142
+ }
1056
1143
  }
1057
1144
  ),
1058
- showText && /* @__PURE__ */ jsx(
1059
- "text",
1145
+ /* @__PURE__ */ jsx(
1146
+ "polyline",
1060
1147
  {
1061
- fill: "black",
1062
- ...gauge.getLabelProps({ angle: angle2, offset: 20 }),
1063
- style: { fontSize: `${scaleValuesSize ?? 30}px` },
1064
- children: asValue
1148
+ style: {
1149
+ transform: `rotate(${angle}deg)`,
1150
+ transition: "transform 500ms"
1151
+ },
1152
+ fill: pointerColor,
1153
+ opacity: "0.5",
1154
+ points: needle.points
1065
1155
  }
1066
- )
1067
- ] }, `tick-group-${angle2}`);
1068
- }),
1069
- allTicks
1070
- ] }),
1071
- /* @__PURE__ */ jsxs("g", { id: "needle", children: [
1072
- /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base, r: 20 }),
1073
- /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base }),
1074
- /* @__PURE__ */ jsx(
1075
- "circle",
1076
- {
1077
- fill: pointerColor,
1078
- opacity: "0.5",
1079
- ...needle.tip,
1080
- style: {
1081
- transform: `rotate(${angle}deg)`,
1082
- transition: "transform 500ms"
1156
+ ),
1157
+ /* @__PURE__ */ jsx("circle", { fill: "white", ...needle.base, r: 4 })
1158
+ ] }),
1159
+ /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
1160
+ "text",
1161
+ {
1162
+ textAnchor: "middle",
1163
+ style: { fontSize: `${currentValueFontSize ?? 30}px` },
1164
+ y: -diameter / 4 + 20,
1165
+ children: [
1166
+ noNaN(value).toFixed(noNaN(valueDecimals)),
1167
+ valueType === "2" || valueType === 2 ? "%" : ""
1168
+ ]
1083
1169
  }
1084
- }
1085
- ),
1086
- /* @__PURE__ */ jsx(
1087
- "polyline",
1088
- {
1089
- style: {
1090
- transform: `rotate(${angle}deg)`,
1091
- transition: "transform 500ms"
1092
- },
1093
- fill: pointerColor,
1094
- opacity: "0.5",
1095
- points: needle.points
1096
- }
1097
- ),
1098
- /* @__PURE__ */ jsx("circle", { fill: "white", ...needle.base, r: 4 })
1099
- ] }),
1100
- /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
1101
- "text",
1102
- {
1103
- textAnchor: "middle",
1104
- style: { fontSize: `${currentValueFontSize ?? 30}px` },
1105
- y: -diameter / 4 + 20,
1106
- children: [
1107
- noNaN(value).toFixed(noNaN(valueDecimals)),
1108
- valueType === "2" || valueType === 2 ? "%" : ""
1109
- ]
1110
- }
1111
- ) })
1112
- ]
1170
+ ) })
1171
+ ]
1172
+ }
1173
+ )
1113
1174
  }
1114
- ) });
1175
+ );
1115
1176
  };
1116
1177
 
1117
1178
  const START_ANGLE = 0;
@@ -1182,87 +1243,96 @@ const Ring = ({
1182
1243
  const angle = (value2 - domainMin) / valueRange * angleRange;
1183
1244
  return Math.round(angle);
1184
1245
  };
1185
- return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
1186
- "svg",
1246
+ return /* @__PURE__ */ jsx(
1247
+ Box,
1187
1248
  {
1188
- ...gauge.getSVGProps(),
1189
- height: Math.max(width, height),
1190
- width: Math.max(width, height),
1191
- viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter + offset * 2}`,
1192
- children: [
1193
- /* @__PURE__ */ jsxs("g", { id: "arcs", children: [
1194
- /* @__PURE__ */ jsx(
1195
- "path",
1196
- {
1197
- ...gauge.getArcProps({
1198
- offset: offset - ((noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0),
1199
- startAngle: START_ANGLE,
1200
- endAngle: END_ANGLE
1201
- }),
1202
- stroke: ringEmptyColor ?? "lightgrey",
1203
- fill: "none",
1204
- strokeLinecap: "round",
1205
- strokeWidth: (noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0
1206
- }
1207
- ),
1208
- /* @__PURE__ */ jsx(
1209
- "path",
1210
- {
1211
- ...gauge.getArcProps({
1212
- offset: offset - ((noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0),
1213
- startAngle: 180,
1214
- endAngle: valueToAngle(value) === 360 ? 179 + valueToAngle(value) : 180 + valueToAngle(value)
1215
- }),
1216
- stroke: `#${tinycolor(getColor(value)).saturate(20).brighten(20).toHex8()}`,
1217
- opacity: "0.8",
1218
- fill: "none",
1219
- strokeLinecap: "inherit",
1220
- strokeWidth: ((noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0) + 6,
1221
- style: {
1222
- transition: "stroke 0.5s"
1223
- }
1224
- }
1225
- ),
1226
- /* @__PURE__ */ jsx(
1227
- "path",
1228
- {
1229
- ...gauge.getArcProps({
1230
- offset: offset - ((noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0),
1231
- startAngle: 180,
1232
- endAngle: valueToAngle(value) === 360 ? 179 + valueToAngle(value) : 180 + valueToAngle(value)
1233
- }),
1234
- stroke: getColor(value),
1235
- opacity: "1",
1236
- fill: "none",
1237
- strokeLinecap: "inherit",
1238
- strokeWidth: (noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0,
1239
- style: {
1240
- transition: "stroke 0.5s"
1249
+ sx: {
1250
+ height: `${Math.max(width, height)}px`,
1251
+ width: `${Math.max(width, height)}px`
1252
+ },
1253
+ children: /* @__PURE__ */ jsxs(
1254
+ "svg",
1255
+ {
1256
+ ...gauge.getSVGProps(),
1257
+ height: Math.max(width, height),
1258
+ width: Math.max(width, height),
1259
+ viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter + offset * 2}`,
1260
+ children: [
1261
+ /* @__PURE__ */ jsxs("g", { id: "arcs", children: [
1262
+ /* @__PURE__ */ jsx(
1263
+ "path",
1264
+ {
1265
+ ...gauge.getArcProps({
1266
+ offset: offset - ((noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0),
1267
+ startAngle: START_ANGLE,
1268
+ endAngle: END_ANGLE
1269
+ }),
1270
+ stroke: ringEmptyColor ?? "lightgrey",
1271
+ fill: "none",
1272
+ strokeLinecap: "round",
1273
+ strokeWidth: (noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0
1274
+ }
1275
+ ),
1276
+ /* @__PURE__ */ jsx(
1277
+ "path",
1278
+ {
1279
+ ...gauge.getArcProps({
1280
+ offset: offset - ((noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0),
1281
+ startAngle: 180,
1282
+ endAngle: valueToAngle(value) === 360 ? 179 + valueToAngle(value) : 180 + valueToAngle(value)
1283
+ }),
1284
+ stroke: `#${tinycolor(getColor(value)).saturate(20).brighten(20).toHex8()}`,
1285
+ opacity: "0.8",
1286
+ fill: "none",
1287
+ strokeLinecap: "inherit",
1288
+ strokeWidth: ((noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0) + 6,
1289
+ style: {
1290
+ transition: "stroke 0.5s"
1291
+ }
1292
+ }
1293
+ ),
1294
+ /* @__PURE__ */ jsx(
1295
+ "path",
1296
+ {
1297
+ ...gauge.getArcProps({
1298
+ offset: offset - ((noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0),
1299
+ startAngle: 180,
1300
+ endAngle: valueToAngle(value) === 360 ? 179 + valueToAngle(value) : 180 + valueToAngle(value)
1301
+ }),
1302
+ stroke: getColor(value),
1303
+ opacity: "1",
1304
+ fill: "none",
1305
+ strokeLinecap: "inherit",
1306
+ strokeWidth: (noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0,
1307
+ style: {
1308
+ transition: "stroke 0.5s"
1309
+ }
1310
+ }
1311
+ )
1312
+ ] }),
1313
+ /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
1314
+ "text",
1315
+ {
1316
+ textAnchor: "middle",
1317
+ style: {
1318
+ fontSize: `${currentValueFontSize ?? 30}px`,
1319
+ fontWeight: "900"
1320
+ },
1321
+ dy: "0.35em",
1322
+ fill: currentValueColor,
1323
+ children: [
1324
+ unitPosition === "START" && !["", void 0, null].includes(unit) ? unit : "",
1325
+ noNaN(value).toFixed(noNaN(valueDecimals)),
1326
+ valueType === "2" || valueType === 2 ? "%" : "",
1327
+ unitPosition === "END" && !["", void 0, null].includes(unit) ? unit : ""
1328
+ ]
1241
1329
  }
1242
- }
1243
- )
1244
- ] }),
1245
- /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
1246
- "text",
1247
- {
1248
- textAnchor: "middle",
1249
- style: {
1250
- fontSize: `${currentValueFontSize ?? 30}px`,
1251
- fontWeight: "900"
1252
- },
1253
- alignmentBaseline: "central",
1254
- fill: currentValueColor,
1255
- children: [
1256
- unitPosition === "START" && !["", void 0, null].includes(unit) ? unit : "",
1257
- noNaN(value).toFixed(noNaN(valueDecimals)),
1258
- valueType === "2" || valueType === 2 ? "%" : "",
1259
- unitPosition === "END" && !["", void 0, null].includes(unit) ? unit : ""
1260
- ]
1261
- }
1262
- ) })
1263
- ]
1330
+ ) })
1331
+ ]
1332
+ }
1333
+ )
1264
1334
  }
1265
- ) });
1335
+ );
1266
1336
  };
1267
1337
 
1268
1338
  const WidgetComponent = ({
@@ -1337,6 +1407,11 @@ function normalizeChartData(raw) {
1337
1407
  showYAxisValues: raw.showYAxisValues === "true"
1338
1408
  };
1339
1409
  }
1410
+ function stripHtml(html) {
1411
+ const div = document.createElement("div");
1412
+ div.innerHTML = html;
1413
+ return div.textContent || div.innerText || "";
1414
+ }
1340
1415
  const ChartComponent = (props) => {
1341
1416
  const defaultProps = {
1342
1417
  chartData: { datasets: [{ data: [{ x: 0, y: 0 }] }] },
@@ -1539,26 +1614,30 @@ const ChartComponent = (props) => {
1539
1614
  } else if (actualProps.showValues) {
1540
1615
  finalString += YValue;
1541
1616
  }
1542
- return finalString;
1617
+ return stripHtml(finalString);
1543
1618
  },
1544
1619
  title(tooltipItems) {
1545
1620
  if (actualProps.type !== "pie" && !actualProps.showXAxisValues && actualProps.indexAxis === "x" || actualProps.type !== "pie" && !actualProps.showYAxisValues && actualProps.indexAxis === "y" || actualProps.type === "pie" && !actualProps.showLegend) {
1546
1621
  return "";
1547
1622
  }
1548
- return actualProps.type !== "pie" && actualProps.chartData.labels && actualProps.chartData.labels.length > 1 ? tooltipItems[0].dataset.label : tooltipItems[0].label;
1623
+ return stripHtml(
1624
+ actualProps.type !== "pie" && actualProps.chartData.labels && actualProps.chartData.labels.length > 1 ? tooltipItems[0].dataset.label ?? "" : tooltipItems[0].label ?? ""
1625
+ );
1549
1626
  }
1550
1627
  },
1551
1628
  enabled: (actualProps.indexAxis === "y" ? actualProps.showYAxisValues : actualProps.showXAxisValues) || actualProps.showValues || actualProps.showLegend
1552
1629
  }
1553
1630
  },
1554
- aspectRatio: Math.max(actualProps.aspectRatio ?? 1, 2),
1631
+ aspectRatio: props.aspectRatio ? actualProps.aspectRatio : Math.max(actualProps.aspectRatio ?? 1, 2),
1555
1632
  indexAxis: actualProps.indexAxis,
1556
1633
  scales: {
1557
1634
  x: {
1558
1635
  display: actualProps.type !== "pie",
1559
1636
  title: {
1560
1637
  display: actualProps.showXAxisValues,
1561
- text: actualProps.indexAxis === "y" ? actualProps.yAxisTitle : actualProps.xAxisTitle
1638
+ text: stripHtml(
1639
+ actualProps.indexAxis === "y" ? actualProps.yAxisTitle ?? "" : actualProps.xAxisTitle ?? ""
1640
+ )
1562
1641
  },
1563
1642
  ticks: {
1564
1643
  display: !!actualProps.showXAxisValues
@@ -1572,7 +1651,9 @@ const ChartComponent = (props) => {
1572
1651
  display: actualProps.type !== "pie",
1573
1652
  title: {
1574
1653
  display: actualProps.showYAxisValues,
1575
- text: actualProps.indexAxis === "y" ? actualProps.xAxisTitle : actualProps.yAxisTitle
1654
+ text: stripHtml(
1655
+ actualProps.indexAxis === "y" ? actualProps.xAxisTitle ?? "" : actualProps.yAxisTitle ?? ""
1656
+ )
1576
1657
  },
1577
1658
  ticks: {
1578
1659
  display: !!actualProps.showYAxisValues
@@ -1596,6 +1677,7 @@ const ChartComponent = (props) => {
1596
1677
  actualProps.type,
1597
1678
  actualProps.xAxisTitle,
1598
1679
  actualProps.yAxisTitle,
1680
+ props.aspectRatio,
1599
1681
  props.referencesAmount
1600
1682
  ]);
1601
1683
  return /* @__PURE__ */ jsx(