@apia/charts 2.0.7 → 2.0.9

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 (78) hide show
  1. package/dist/index.d.ts +334 -5
  2. package/dist/index.js +1455 -3
  3. package/dist/index.js.map +1 -1
  4. package/package.json +8 -6
  5. package/dist/charts/ChartContext.js +0 -6
  6. package/dist/charts/ChartContext.js.map +0 -1
  7. package/dist/charts/ChartRenderer.d.ts +0 -17
  8. package/dist/charts/ChartRenderer.d.ts.map +0 -1
  9. package/dist/charts/ChartRenderer.js +0 -175
  10. package/dist/charts/ChartRenderer.js.map +0 -1
  11. package/dist/charts/horizontalBars/Bar.js +0 -228
  12. package/dist/charts/horizontalBars/Bar.js.map +0 -1
  13. package/dist/charts/horizontalBars/HorizontalBars.js +0 -374
  14. package/dist/charts/horizontalBars/HorizontalBars.js.map +0 -1
  15. package/dist/charts/linear/LineChart.js +0 -469
  16. package/dist/charts/linear/LineChart.js.map +0 -1
  17. package/dist/charts/linear/Node.js +0 -56
  18. package/dist/charts/linear/Node.js.map +0 -1
  19. package/dist/charts/pie/Pie.js +0 -183
  20. package/dist/charts/pie/Pie.js.map +0 -1
  21. package/dist/charts/pie/Slice.js +0 -96
  22. package/dist/charts/pie/Slice.js.map +0 -1
  23. package/dist/charts/pie/usePieAnimation.js +0 -123
  24. package/dist/charts/pie/usePieAnimation.js.map +0 -1
  25. package/dist/charts/types.d.ts +0 -188
  26. package/dist/charts/types.d.ts.map +0 -1
  27. package/dist/charts/util/ChartSelector.js +0 -36
  28. package/dist/charts/util/ChartSelector.js.map +0 -1
  29. package/dist/charts/util/ColoredLegendItem.js +0 -46
  30. package/dist/charts/util/ColoredLegendItem.js.map +0 -1
  31. package/dist/charts/util/EmptyGrid.d.ts +0 -8
  32. package/dist/charts/util/EmptyGrid.d.ts.map +0 -1
  33. package/dist/charts/util/EmptyGrid.js +0 -51
  34. package/dist/charts/util/EmptyGrid.js.map +0 -1
  35. package/dist/charts/util/LegendContainer.js +0 -54
  36. package/dist/charts/util/LegendContainer.js.map +0 -1
  37. package/dist/charts/util/NumberedLegendItem.js +0 -45
  38. package/dist/charts/util/NumberedLegendItem.js.map +0 -1
  39. package/dist/charts/util/getBarColor.js +0 -29
  40. package/dist/charts/util/getBarColor.js.map +0 -1
  41. package/dist/charts/util/parseMargin.js +0 -11
  42. package/dist/charts/util/parseMargin.js.map +0 -1
  43. package/dist/charts/util/useChartStyles.js +0 -35
  44. package/dist/charts/util/useChartStyles.js.map +0 -1
  45. package/dist/charts/verticalBars/Bar.js +0 -241
  46. package/dist/charts/verticalBars/Bar.js.map +0 -1
  47. package/dist/charts/verticalBars/VerticalBars.js +0 -394
  48. package/dist/charts/verticalBars/VerticalBars.js.map +0 -1
  49. package/dist/charts/waterfallBars/WaterfallBar.js +0 -84
  50. package/dist/charts/waterfallBars/WaterfallBar.js.map +0 -1
  51. package/dist/charts/waterfallBars/WaterfallBars.js +0 -247
  52. package/dist/charts/waterfallBars/WaterfallBars.js.map +0 -1
  53. package/dist/widgets/WidgetContainer.d.ts +0 -10
  54. package/dist/widgets/WidgetContainer.d.ts.map +0 -1
  55. package/dist/widgets/WidgetContainer.js +0 -68
  56. package/dist/widgets/WidgetContainer.js.map +0 -1
  57. package/dist/widgets/counter/Counter.js +0 -108
  58. package/dist/widgets/counter/Counter.js.map +0 -1
  59. package/dist/widgets/custom/useCustomWidget.js +0 -64
  60. package/dist/widgets/custom/useCustomWidget.js.map +0 -1
  61. package/dist/widgets/custom/util.js +0 -9
  62. package/dist/widgets/custom/util.js.map +0 -1
  63. package/dist/widgets/oxford/Oxford.js +0 -241
  64. package/dist/widgets/oxford/Oxford.js.map +0 -1
  65. package/dist/widgets/ring/Ring.js +0 -123
  66. package/dist/widgets/ring/Ring.js.map +0 -1
  67. package/dist/widgets/scale/Scale.js +0 -145
  68. package/dist/widgets/scale/Scale.js.map +0 -1
  69. package/dist/widgets/speedMeter/SpeedMeter.js +0 -187
  70. package/dist/widgets/speedMeter/SpeedMeter.js.map +0 -1
  71. package/dist/widgets/tLight/TLight.js +0 -134
  72. package/dist/widgets/tLight/TLight.js.map +0 -1
  73. package/dist/widgets/thermometer/Thermometer.js +0 -144
  74. package/dist/widgets/thermometer/Thermometer.js.map +0 -1
  75. package/dist/widgets/thermometer/util.js +0 -31
  76. package/dist/widgets/thermometer/util.js.map +0 -1
  77. package/dist/widgets/types.d.ts +0 -41
  78. package/dist/widgets/types.d.ts.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"Counter.js","sources":["../../../src/widgets/counter/Counter.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\nimport { useGauge } from 'use-gauge';\nimport { TApiaWidgetProps } from '../types';\nimport { addBoundary, noNaN, animate } from '@apia/util';\nimport { useEffect, useRef, useState } from 'react';\n\nconst START_ANGLE = 0;\nconst END_ANGLE = 360;\n\nexport const Counter = ({\n addBorder = false,\n colorRanges,\n currentValue,\n valueRanges,\n maxValue,\n minValue,\n currentValueFontSize,\n panelId,\n}: TApiaWidgetProps) => {\n const [value, setValue] = useState(currentValue ?? 0);\n const actualWidth = ((currentValueFontSize as number) ?? 80) * 3 * 0.8;\n const diameter = actualWidth;\n const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];\n const domainMin = noNaN(minValue) ?? valueRanges[0];\n const gauge = useGauge({\n domain: [domainMin, domainMax],\n startAngle: START_ANGLE,\n endAngle: END_ANGLE,\n numTicks: 0,\n diameter: diameter,\n });\n\n function getColor(value: number) {\n const index = valueRanges.findIndex((range) => value <= range);\n\n if (index === -1) {\n return colorRanges[0];\n }\n\n return colorRanges[index - 1] ?? colorRanges[index];\n }\n const lastCurrentValue = useRef(0);\n useEffect(() => {\n const difference = currentValue - lastCurrentValue.current;\n return animate(\n 500,\n (progress) => {\n const step = addBoundary(\n difference * progress + lastCurrentValue.current,\n domainMin,\n domainMax,\n );\n setValue(Math.round(step));\n },\n () => {\n lastCurrentValue.current = currentValue;\n },\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [currentValue]);\n\n return (\n <Box sx={{ position: 'relative' }} className=\"widgetContainer__Counter\">\n <svg\n {...gauge.getSVGProps()}\n height={actualWidth}\n width={actualWidth}\n viewBox={undefined}\n >\n <g id=\"arcs\">\n {addBorder && `${value}`.length < 4 && (\n <ellipse\n cx={actualWidth / 2}\n cy={actualWidth / 2}\n rx={actualWidth / 2 - 5}\n ry={actualWidth / 2 - 5}\n stroke=\"gray\"\n opacity=\"0.2\"\n fill=\"none\"\n strokeLinecap=\"round\"\n strokeWidth={2}\n />\n )}\n </g>\n </svg>\n <svg\n height={actualWidth}\n width={actualWidth}\n style={{ position: 'absolute', left: 0, top: 0 }}\n >\n <text\n x={actualWidth / 2}\n y={actualWidth / 2 - 5}\n textAnchor=\"middle\"\n style={{\n fontSize: `${currentValueFontSize ?? 80}px`,\n transition: 'fill 0.5s',\n }}\n alignmentBaseline=\"central\"\n fill={getColor(value)}\n id={`text_${panelId}`}\n >\n {value}\n </text>\n </svg>\n </Box>\n );\n};\n"],"names":["value"],"mappings":"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"}
@@ -1,64 +0,0 @@
1
- import { noNaN } from '@apia/util';
2
- import { useState, useRef, useCallback } from 'react';
3
- import { valueToPercent } from './util.js';
4
-
5
- const useCustomWidget = ({
6
- maxValue,
7
- minValue,
8
- currentValue,
9
- panelId
10
- }) => {
11
- const baseValue = minValue;
12
- const domainMax = maxValue;
13
- const [yDifference, setYDifference] = useState(0);
14
- const svgRect = useRef({});
15
- const pathRect = useRef({});
16
- const onRenderRect = useCallback(
17
- (el) => {
18
- if (!el)
19
- return;
20
- const svgElement = el.closest("svg");
21
- const pathElement = svgElement?.querySelector(`#path_${panelId}`);
22
- if (!svgElement)
23
- throw new Error("No svg");
24
- if (!pathElement)
25
- throw new Error("No path");
26
- const svgBox = svgElement.getBoundingClientRect();
27
- const pathBox = pathElement.getBoundingClientRect();
28
- const pathY2 = pathBox.y - svgBox.y;
29
- svgRect.current = svgBox;
30
- pathRect.current = pathBox;
31
- setYDifference(pathY2);
32
- },
33
- [panelId]
34
- );
35
- const pathX = noNaN(pathRect.current.x - svgRect.current.x);
36
- const pathY = noNaN(pathRect.current.y - svgRect.current.y);
37
- const pathWidth = noNaN(pathRect.current.width);
38
- const pathHeight = noNaN(pathRect.current.height);
39
- const viewBox = `${pathX} ${pathY} ${pathWidth} ${pathHeight}`;
40
- const rectProps = {
41
- y: noNaN(
42
- valueToPercent(domainMax, baseValue, currentValue) * pathHeight / 100 + yDifference
43
- ),
44
- x: pathX,
45
- width: pathWidth,
46
- height: pathHeight,
47
- style: {
48
- visibility: "visible",
49
- transition: "y 0.5s, fill 0.5s"
50
- }
51
- };
52
- return {
53
- rectRef: onRenderRect,
54
- svgViewBox: viewBox,
55
- rectProps,
56
- pathX,
57
- pathY,
58
- pathRect,
59
- svgRect
60
- };
61
- };
62
-
63
- export { useCustomWidget };
64
- //# sourceMappingURL=useCustomWidget.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useCustomWidget.js","sources":["../../../src/widgets/custom/useCustomWidget.ts"],"sourcesContent":["import { noNaN } from '@apia/util';\nimport { useState, useRef, useCallback } from 'react';\nimport { valueToPercent } from './util';\n\nexport const useCustomWidget = ({\n maxValue,\n minValue,\n currentValue,\n panelId,\n}: {\n maxValue: number;\n minValue: number;\n currentValue: number;\n panelId: string;\n}) => {\n const baseValue = minValue;\n const domainMax = maxValue;\n\n const [yDifference, setYDifference] = useState(0);\n const svgRect = useRef<DOMRect>({} as DOMRect);\n const pathRect = useRef<DOMRect>({} as DOMRect);\n\n const onRenderRect = useCallback(\n (el: SVGRectElement) => {\n if (!el) return;\n\n const svgElement = el.closest('svg');\n const pathElement = svgElement?.querySelector(`#path_${panelId}`);\n\n if (!svgElement) throw new Error('No svg');\n if (!pathElement) throw new Error('No path');\n\n const svgBox = svgElement.getBoundingClientRect();\n const pathBox = pathElement.getBoundingClientRect();\n\n const pathY = pathBox.y - svgBox.y;\n\n svgRect.current = svgBox;\n pathRect.current = pathBox;\n setYDifference(pathY);\n },\n [panelId],\n );\n\n const pathX = noNaN(pathRect.current.x - svgRect.current.x);\n const pathY = noNaN(pathRect.current.y - svgRect.current.y);\n const pathWidth = noNaN(pathRect.current.width);\n const pathHeight = noNaN(pathRect.current.height);\n\n const viewBox = `${pathX} ${pathY} ${pathWidth} ${pathHeight}`;\n\n const rectProps: React.SVGProps<SVGRectElement> = {\n y: noNaN(\n (valueToPercent(domainMax, baseValue, currentValue) * pathHeight) / 100 +\n yDifference,\n ),\n x: pathX,\n width: pathWidth,\n height: pathHeight,\n style: {\n visibility: 'visible',\n transition: 'y 0.5s, fill 0.5s',\n },\n };\n\n return {\n rectRef: onRenderRect,\n svgViewBox: viewBox,\n rectProps,\n pathX,\n pathY,\n pathRect,\n svgRect,\n };\n};\n"],"names":["pathY"],"mappings":";;;;AAIO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AACF,CAKM,KAAA;AACJ,EAAA,MAAM,SAAY,GAAA,QAAA,CAAA;AAClB,EAAA,MAAM,SAAY,GAAA,QAAA,CAAA;AAElB,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,CAAC,CAAA,CAAA;AAChD,EAAM,MAAA,OAAA,GAAU,MAAgB,CAAA,EAAa,CAAA,CAAA;AAC7C,EAAM,MAAA,QAAA,GAAW,MAAgB,CAAA,EAAa,CAAA,CAAA;AAE9C,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,EAAuB,KAAA;AACtB,MAAA,IAAI,CAAC,EAAA;AAAI,QAAA,OAAA;AAET,MAAM,MAAA,UAAA,GAAa,EAAG,CAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AACnC,MAAA,MAAM,WAAc,GAAA,UAAA,EAAY,aAAc,CAAA,CAAA,MAAA,EAAS,OAAO,CAAE,CAAA,CAAA,CAAA;AAEhE,MAAA,IAAI,CAAC,UAAA;AAAY,QAAM,MAAA,IAAI,MAAM,QAAQ,CAAA,CAAA;AACzC,MAAA,IAAI,CAAC,WAAA;AAAa,QAAM,MAAA,IAAI,MAAM,SAAS,CAAA,CAAA;AAE3C,MAAM,MAAA,MAAA,GAAS,WAAW,qBAAsB,EAAA,CAAA;AAChD,MAAM,MAAA,OAAA,GAAU,YAAY,qBAAsB,EAAA,CAAA;AAElD,MAAMA,MAAAA,MAAAA,GAAQ,OAAQ,CAAA,CAAA,GAAI,MAAO,CAAA,CAAA,CAAA;AAEjC,MAAA,OAAA,CAAQ,OAAU,GAAA,MAAA,CAAA;AAClB,MAAA,QAAA,CAAS,OAAU,GAAA,OAAA,CAAA;AACnB,MAAA,cAAA,CAAeA,MAAK,CAAA,CAAA;AAAA,KACtB;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAEA,EAAA,MAAM,QAAQ,KAAM,CAAA,QAAA,CAAS,QAAQ,CAAI,GAAA,OAAA,CAAQ,QAAQ,CAAC,CAAA,CAAA;AAC1D,EAAA,MAAM,QAAQ,KAAM,CAAA,QAAA,CAAS,QAAQ,CAAI,GAAA,OAAA,CAAQ,QAAQ,CAAC,CAAA,CAAA;AAC1D,EAAA,MAAM,SAAY,GAAA,KAAA,CAAM,QAAS,CAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAC9C,EAAA,MAAM,UAAa,GAAA,KAAA,CAAM,QAAS,CAAA,OAAA,CAAQ,MAAM,CAAA,CAAA;AAEhD,EAAM,MAAA,OAAA,GAAU,GAAG,KAAK,CAAA,CAAA,EAAI,KAAK,CAAI,CAAA,EAAA,SAAS,IAAI,UAAU,CAAA,CAAA,CAAA;AAE5D,EAAA,MAAM,SAA4C,GAAA;AAAA,IAChD,CAAG,EAAA,KAAA;AAAA,MACA,eAAe,SAAW,EAAA,SAAA,EAAW,YAAY,CAAA,GAAI,aAAc,GAClE,GAAA,WAAA;AAAA,KACJ;AAAA,IACA,CAAG,EAAA,KAAA;AAAA,IACH,KAAO,EAAA,SAAA;AAAA,IACP,MAAQ,EAAA,UAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,UAAY,EAAA,SAAA;AAAA,MACZ,UAAY,EAAA,mBAAA;AAAA,KACd;AAAA,GACF,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,OAAS,EAAA,YAAA;AAAA,IACT,UAAY,EAAA,OAAA;AAAA,IACZ,SAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AACF;;;;"}
@@ -1,9 +0,0 @@
1
- const valueToPercent = (domainMax, baseValue, value) => {
2
- const range = domainMax - (baseValue ?? 0);
3
- const percentage = 100 - (value - (baseValue ?? 0)) / range * 100;
4
- const test = percentage * 69 / 100;
5
- return Math.round(test);
6
- };
7
-
8
- export { valueToPercent };
9
- //# sourceMappingURL=util.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"util.js","sources":["../../../src/widgets/custom/util.ts"],"sourcesContent":["const colorGetter = (\n valueRanges: number[],\n colorRanges: string[],\n innerValue: number,\n) => {\n let color = '';\n valueRanges.forEach((value, index) => {\n if (value >= innerValue && valueRanges[index - 1] <= innerValue) {\n color = colorRanges[index - 1];\n }\n });\n return color;\n};\n\nfunction getColor(valueRanges: number[], colorRanges: string[], value: number) {\n const index = valueRanges.findIndex((range) => value <= range);\n\n if (index === -1) {\n return colorRanges[0];\n }\n\n return colorRanges[index];\n}\n\nfunction getInnerColor(\n valueRanges: number[],\n colorRanges: string[],\n value: number,\n) {\n const index = valueRanges.findIndex((range) => value < range);\n\n if (index === -1) {\n return colorRanges[0];\n }\n\n return colorRanges[index - 1] ?? colorRanges[index];\n}\n\nconst valueToTickPercent = (\n domainMax: number,\n baseValue: number,\n value: number,\n) => {\n const range = domainMax - (baseValue ?? 0);\n const percentage = 100 - ((value - (baseValue ?? 0)) / range) * 100;\n\n return Math.round(percentage);\n};\n\nconst valueToPercent = (\n domainMax: number,\n baseValue: number,\n value: number,\n) => {\n const range = domainMax - (baseValue ?? 0);\n const percentage = 100 - ((value - (baseValue ?? 0)) / range) * 100;\n const test = (percentage * 69) / 100;\n\n return Math.round(test);\n};\n\nexport {\n colorGetter,\n getColor,\n getInnerColor,\n valueToPercent,\n valueToTickPercent,\n};\n"],"names":[],"mappings":"AAiDA,MAAM,cAAiB,GAAA,CACrB,SACA,EAAA,SAAA,EACA,KACG,KAAA;AACH,EAAM,MAAA,KAAA,GAAQ,aAAa,SAAa,IAAA,CAAA,CAAA,CAAA;AACxC,EAAA,MAAM,UAAa,GAAA,GAAA,GAAA,CAAQ,KAAS,IAAA,SAAA,IAAa,MAAM,KAAS,GAAA,GAAA,CAAA;AAChE,EAAM,MAAA,IAAA,GAAQ,aAAa,EAAM,GAAA,GAAA,CAAA;AAEjC,EAAO,OAAA,IAAA,CAAK,MAAM,IAAI,CAAA,CAAA;AACxB;;;;"}
@@ -1,241 +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
- }) => {
24
- const value = currentValue;
25
- const diameter = Math.min(height, width);
26
- const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
27
- const domainMin = noNaN(minValue) ?? valueRanges[0];
28
- const offset = 20;
29
- const gauge = useGauge({
30
- domain: [domainMin, domainMax],
31
- startAngle: START_ANGLE,
32
- endAngle: END_ANGLE,
33
- numTicks: 10 + 1,
34
- diameter
35
- });
36
- const gauge2 = useGauge({
37
- domain: [valueRanges[0], valueRanges[valueRanges.length - 1]],
38
- startAngle: START_ANGLE,
39
- endAngle: END_ANGLE,
40
- numTicks: valueRanges[valueRanges.length - 1] - valueRanges[0] + 1,
41
- diameter
42
- });
43
- const needle = gauge.getNeedleProps({
44
- value: 0,
45
- baseRadius: 12,
46
- tipRadius: 2
47
- });
48
- const angle = (END_ANGLE - START_ANGLE) * value / (domainMax - domainMin);
49
- function getColor(value2) {
50
- const index = valueRanges.findIndex((range) => value2 <= range);
51
- if (index === -1) {
52
- return colorRanges[0];
53
- }
54
- return colorRanges[index];
55
- }
56
- return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
57
- "svg",
58
- {
59
- ...gauge.getSVGProps(),
60
- height: Math.max(width, height),
61
- width: Math.max(width, height),
62
- viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter + offset * 2}`,
63
- children: [
64
- /* @__PURE__ */ jsxs("g", { id: "arcs", children: [
65
- /* @__PURE__ */ jsx(
66
- "path",
67
- {
68
- ...gauge.getArcProps({
69
- offset: offset - 5,
70
- startAngle: 0,
71
- endAngle: 360
72
- }),
73
- stroke: "black",
74
- opacity: "1",
75
- fill: backgroundColor !== "" && backgroundColor !== void 0 ? tinycolor(backgroundColor).setAlpha(0.5).toPercentageRgbString() : "none",
76
- strokeLinecap: "round",
77
- strokeWidth: 5,
78
- vectorEffect: "non-scaling-stroke"
79
- }
80
- ),
81
- valueRanges.map((innerValue, i) => {
82
- if (!valueRanges[i + 1]) {
83
- return null;
84
- }
85
- const valueToAngle = (value2) => {
86
- const angleRange = END_ANGLE - START_ANGLE;
87
- const valueRange = domainMax - domainMin;
88
- const angle2 = START_ANGLE + (value2 - domainMin) / valueRange * angleRange;
89
- return Math.round(angle2);
90
- };
91
- return /* @__PURE__ */ jsxs("g", { children: [
92
- /* @__PURE__ */ jsx(
93
- "path",
94
- {
95
- ...gauge.getArcProps({
96
- offset: offset - 5,
97
- startAngle: i === 0 ? START_ANGLE : valueToAngle(innerValue),
98
- endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE : valueToAngle(valueRanges[i + 1])
99
- }),
100
- stroke: "black",
101
- opacity: "0.8",
102
- fill: "none",
103
- strokeLinecap: "square",
104
- strokeWidth: 5,
105
- vectorEffect: "non-scaling-stroke"
106
- }
107
- ),
108
- /* @__PURE__ */ jsx(
109
- "path",
110
- {
111
- ...gauge.getArcProps({
112
- offset: -20,
113
- startAngle: i === 0 ? START_ANGLE : valueToAngle(innerValue),
114
- endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE : valueToAngle(valueRanges[i + 1])
115
- }),
116
- stroke: getColor(innerValue),
117
- opacity: "0.1",
118
- fill: "none",
119
- strokeLinecap: "butt",
120
- strokeWidth: 75,
121
- vectorEffect: "non-scaling-stroke"
122
- }
123
- ),
124
- /* @__PURE__ */ createElement(
125
- "path",
126
- {
127
- ...gauge.getArcProps({
128
- offset: -55,
129
- startAngle: i === 0 ? START_ANGLE : valueToAngle(innerValue),
130
- endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE : valueToAngle(valueRanges[i + 1])
131
- }),
132
- key: `${innerValue}_${i}`,
133
- stroke: getColor(innerValue) || "#999",
134
- opacity: "0.8",
135
- fill: "none",
136
- strokeLinecap: "butt",
137
- strokeWidth: 10,
138
- vectorEffect: "non-scaling-stroke"
139
- }
140
- )
141
- ] }, `${innerValue}_${i}`);
142
- })
143
- ] }),
144
- /* @__PURE__ */ jsxs("g", { id: "ticks", children: [
145
- gauge.ticks.map((angle2, i) => {
146
- const angleToValue = (angle3) => {
147
- const angleRange = END_ANGLE - START_ANGLE;
148
- const valueRange = domainMax - domainMin;
149
- const value2 = domainMin + (angle3 - START_ANGLE) / angleRange * valueRange;
150
- return Math.round(value2);
151
- };
152
- const asValue = angleToValue(angle2);
153
- const showText = asValue % 10 === 0;
154
- return /* @__PURE__ */ jsxs(React.Fragment, { children: [
155
- /* @__PURE__ */ jsx(
156
- "line",
157
- {
158
- stroke: "gray",
159
- strokeWidth: showText ? 4 : 2,
160
- ...gauge.getTickProps({ angle: angle2, length: showText ? 12 : 3 }),
161
- vectorEffect: "non-scaling-stroke"
162
- }
163
- ),
164
- showText && /* @__PURE__ */ jsx(
165
- "text",
166
- {
167
- fill: "black",
168
- ...gauge.getLabelProps({
169
- angle: angle2,
170
- offset: 20
171
- }),
172
- style: {
173
- fontSize: `${scaleValuesSize ?? 30}px`
174
- },
175
- children: asValue
176
- }
177
- )
178
- ] }, `tick-group-${angle2}_ ${i}`);
179
- }),
180
- gauge2.ticks.map((angle2, i) => {
181
- return /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsx(
182
- "line",
183
- {
184
- stroke: "gray",
185
- strokeWidth: 2,
186
- ...gauge.getTickProps({
187
- angle: angle2,
188
- length: 3
189
- }),
190
- vectorEffect: "non-scaling-stroke"
191
- }
192
- ) }, `tick-group-${angle2}_ ${i}_2`);
193
- })
194
- ] }),
195
- /* @__PURE__ */ jsxs("g", { id: "needle", children: [
196
- /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base, r: 20 }),
197
- /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base }),
198
- /* @__PURE__ */ jsx(
199
- "circle",
200
- {
201
- fill: pointerColor,
202
- opacity: "0.5",
203
- ...needle.tip,
204
- style: {
205
- transform: `rotate(${angle}deg)`,
206
- transition: "transform 500ms"
207
- }
208
- }
209
- ),
210
- /* @__PURE__ */ jsx(
211
- "polyline",
212
- {
213
- style: {
214
- transform: `rotate(${angle}deg)`,
215
- transition: "transform 500ms"
216
- },
217
- fill: pointerColor,
218
- opacity: "0.5",
219
- points: needle.points
220
- }
221
- ),
222
- /* @__PURE__ */ jsx("circle", { fill: "white", ...needle.base, r: 4 })
223
- ] }),
224
- /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
225
- "text",
226
- {
227
- textAnchor: "middle",
228
- alignmentBaseline: "text-before-edge",
229
- y: diameter / 5,
230
- style: { fontSize: `${currentValueFontSize ?? 30}px` },
231
- fill: currentValueColor,
232
- children: value
233
- }
234
- ) })
235
- ]
236
- }
237
- ) });
238
- };
239
-
240
- export { Oxford };
241
- //# sourceMappingURL=Oxford.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Oxford.js","sources":["../../../src/widgets/oxford/Oxford.tsx"],"sourcesContent":["import React from 'react';\nimport { Box } from '@apia/theme';\nimport tinycolor from 'tinycolor2';\nimport { useGauge } from 'use-gauge';\nimport { TApiaWidgetProps } from '../types';\nimport { noNaN } from '@apia/util';\n\nconst START_ANGLE = 45;\nconst END_ANGLE = 315;\n\nexport const Oxford = ({\n backgroundColor,\n colorRanges,\n currentValue,\n currentValueColor,\n currentValueFontSize,\n height,\n maxValue,\n minValue,\n pointerColor,\n scaleValuesSize,\n valueRanges,\n width,\n}: TApiaWidgetProps) => {\n const allTicks = true;\n const value = currentValue;\n const diameter = Math.min(height, width);\n const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];\n const domainMin = noNaN(minValue) ?? valueRanges[0];\n\n const offset = 20;\n const gauge = useGauge({\n domain: [domainMin, domainMax],\n startAngle: START_ANGLE,\n endAngle: END_ANGLE,\n numTicks: 10 + 1,\n diameter: diameter,\n });\n const gauge2 = useGauge({\n domain: [valueRanges[0], valueRanges[valueRanges.length - 1]],\n startAngle: START_ANGLE,\n endAngle: END_ANGLE,\n numTicks: valueRanges[valueRanges.length - 1] - valueRanges[0] + 1,\n diameter: diameter,\n });\n\n const needle = gauge.getNeedleProps({\n value: 0,\n baseRadius: 12,\n tipRadius: 2,\n });\n\n const angle = ((END_ANGLE - START_ANGLE) * value) / (domainMax - domainMin);\n\n function getColor(value: number) {\n const index = valueRanges.findIndex((range) => value <= range);\n\n if (index === -1) {\n return colorRanges[0];\n }\n\n return colorRanges[index];\n }\n\n return (\n <Box>\n <svg\n {...gauge.getSVGProps()}\n height={Math.max(width, height)}\n width={Math.max(width, height)}\n viewBox={`-${diameter / 2 + offset} -${diameter / 2 + offset} ${\n diameter + offset * 2\n } ${diameter + offset * 2}`}\n >\n <g id=\"arcs\">\n <path\n {...gauge.getArcProps({\n offset: offset - 5,\n startAngle: 0,\n endAngle: 360,\n })}\n stroke=\"black\"\n opacity=\"1\"\n fill={\n backgroundColor !== '' && backgroundColor !== undefined\n ? tinycolor(backgroundColor)\n .setAlpha(0.5)\n .toPercentageRgbString()\n : 'none'\n }\n strokeLinecap=\"round\"\n strokeWidth={5}\n vectorEffect={'non-scaling-stroke'}\n />\n {valueRanges.map((innerValue, i) => {\n if (!valueRanges[i + 1]) {\n return null;\n }\n\n const valueToAngle = (value: number) => {\n const angleRange = END_ANGLE - START_ANGLE;\n const valueRange = domainMax - domainMin;\n const angle =\n START_ANGLE + ((value - domainMin) / valueRange) * angleRange;\n return Math.round(angle);\n };\n\n return (\n <g key={`${innerValue}_${i}`}>\n <path\n {...gauge.getArcProps({\n offset: offset - 5,\n startAngle:\n i === 0 ? START_ANGLE : valueToAngle(innerValue),\n endAngle:\n i === 0\n ? valueToAngle(valueRanges[1])\n : i === valueRanges.length - 1\n ? END_ANGLE\n : valueToAngle(valueRanges[i + 1]),\n })}\n stroke={'black'}\n opacity=\"0.8\"\n fill=\"none\"\n strokeLinecap=\"square\"\n strokeWidth={5}\n vectorEffect={'non-scaling-stroke'}\n />\n <path\n {...gauge.getArcProps({\n offset: -20,\n startAngle:\n i === 0 ? START_ANGLE : valueToAngle(innerValue),\n endAngle:\n i === 0\n ? valueToAngle(valueRanges[1])\n : i === valueRanges.length - 1\n ? END_ANGLE\n : valueToAngle(valueRanges[i + 1]),\n })}\n stroke={getColor(innerValue)}\n opacity=\"0.1\"\n fill=\"none\"\n strokeLinecap=\"butt\"\n strokeWidth={75}\n vectorEffect={'non-scaling-stroke'}\n />\n <path\n {...gauge.getArcProps({\n offset: -55,\n startAngle:\n i === 0 ? START_ANGLE : valueToAngle(innerValue),\n endAngle:\n i === 0\n ? valueToAngle(valueRanges[1])\n : i === valueRanges.length - 1\n ? END_ANGLE\n : valueToAngle(valueRanges[i + 1]),\n })}\n key={`${innerValue}_${i}`}\n stroke={getColor(innerValue) || '#999'}\n opacity=\"0.8\"\n fill=\"none\"\n strokeLinecap=\"butt\"\n strokeWidth={10}\n vectorEffect={'non-scaling-stroke'}\n />\n </g>\n );\n })}\n </g>\n <g id=\"ticks\">\n {gauge.ticks.map((angle, i) => {\n const angleToValue = (angle: number) => {\n const angleRange = END_ANGLE - START_ANGLE;\n const valueRange = domainMax - domainMin;\n\n const value =\n domainMin + ((angle - START_ANGLE) / angleRange) * valueRange;\n\n return Math.round(value);\n };\n const asValue = angleToValue(angle);\n\n const showText = asValue % 10 === 0;\n\n return (\n <React.Fragment key={`tick-group-${angle}_ ${i}`}>\n <line\n stroke=\"gray\"\n strokeWidth={showText ? 4 : 2}\n {...gauge.getTickProps({ angle, length: showText ? 12 : 3 })}\n vectorEffect={'non-scaling-stroke'}\n />\n {showText && (\n <text\n fill={'black'}\n {...gauge.getLabelProps({\n angle,\n offset: 20,\n })}\n style={{\n fontSize: `${scaleValuesSize ?? 30}px`,\n }}\n >\n {asValue}\n </text>\n )}\n </React.Fragment>\n );\n })}\n {allTicks &&\n gauge2.ticks.map((angle, i) => {\n return (\n <React.Fragment key={`tick-group-${angle}_ ${i}_2`}>\n <line\n stroke=\"gray\"\n strokeWidth={2}\n {...gauge.getTickProps({\n angle,\n length: 3,\n })}\n vectorEffect={'non-scaling-stroke'}\n />\n </React.Fragment>\n );\n })}\n </g>\n <g id=\"needle\">\n <circle fill={pointerColor} {...needle.base} r={20} />\n <circle fill={pointerColor} {...needle.base} />\n <circle\n fill={pointerColor}\n opacity=\"0.5\"\n {...needle.tip}\n style={{\n transform: `rotate(${angle}deg)`,\n transition: 'transform 500ms',\n }}\n />\n <polyline\n style={{\n transform: `rotate(${angle}deg)`,\n transition: 'transform 500ms',\n }}\n fill={pointerColor}\n opacity=\"0.5\"\n points={needle.points}\n />\n <circle fill=\"white\" {...needle.base} r={4} />\n </g>\n <g>\n <text\n textAnchor=\"middle\"\n alignmentBaseline=\"text-before-edge\"\n y={diameter / 5}\n style={{ fontSize: `${currentValueFontSize ?? 30}px` }}\n fill={currentValueColor}\n >\n {value}\n </text>\n </g>\n </svg>\n </Box>\n );\n};\n"],"names":["value","angle"],"mappings":"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"}
@@ -1,123 +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,
18
- width,
19
- currentValueColor,
20
- currentValueFontSize
21
- }) => {
22
- const [value, setValue] = useState(currentValue);
23
- const diameter = Math.min(height, width);
24
- const offset = 20;
25
- const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
26
- const domainMin = noNaN(minValue) ?? valueRanges[0];
27
- const gauge = useGauge({
28
- domain: [domainMin, domainMax],
29
- startAngle: START_ANGLE,
30
- endAngle: END_ANGLE,
31
- numTicks: 0,
32
- diameter
33
- });
34
- const lastCurrentValue = useRef(0);
35
- useEffect(() => {
36
- const difference = currentValue - lastCurrentValue.current;
37
- return animate(
38
- 500,
39
- (progress) => {
40
- const step = addBoundary(
41
- difference * progress + lastCurrentValue.current,
42
- domainMin,
43
- domainMax
44
- );
45
- setValue(Math.round(step));
46
- },
47
- () => {
48
- lastCurrentValue.current = currentValue;
49
- }
50
- );
51
- }, [currentValue]);
52
- function getColor(value2) {
53
- const index = valueRanges.findIndex((range) => value2 <= range);
54
- if (index === -1) {
55
- return colorRanges[0];
56
- }
57
- return colorRanges[index - 1] ?? colorRanges[index];
58
- }
59
- const valueToAngle = (value2) => {
60
- const angleRange = 360;
61
- const valueRange = domainMax - domainMin;
62
- const angle = (value2 - domainMin) / valueRange * angleRange;
63
- return Math.round(angle);
64
- };
65
- return /* @__PURE__ */ jsx(Box, { 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: [
74
- /* @__PURE__ */ jsx(
75
- "path",
76
- {
77
- ...gauge.getArcProps({
78
- offset: offset - (noNaN(ringWidth) ?? 0) * 100,
79
- startAngle: START_ANGLE,
80
- endAngle: END_ANGLE
81
- }),
82
- stroke: ringEmptyColor ?? "transparent",
83
- fill: "none",
84
- strokeLinecap: "round",
85
- strokeWidth: (noNaN(ringWidth) ?? 0) * 100
86
- }
87
- ),
88
- /* @__PURE__ */ jsx(
89
- "path",
90
- {
91
- ...gauge.getArcProps({
92
- offset: offset - (noNaN(ringWidth) ?? 0) * 100,
93
- startAngle: 180,
94
- endAngle: valueToAngle(value) === 360 ? 179 + valueToAngle(value) : 180 + valueToAngle(value)
95
- }),
96
- stroke: getColor(value),
97
- opacity: "0.8",
98
- fill: "none",
99
- strokeLinecap: "square",
100
- strokeWidth: (noNaN(ringWidth) ?? 0) * 100,
101
- style: {
102
- transition: "stroke 0.5s"
103
- }
104
- }
105
- )
106
- ] }),
107
- /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
108
- "text",
109
- {
110
- textAnchor: "middle",
111
- style: { fontSize: `${currentValueFontSize ?? 30}px` },
112
- alignmentBaseline: "central",
113
- color: currentValueColor,
114
- children: value
115
- }
116
- ) })
117
- ]
118
- }
119
- ) });
120
- };
121
-
122
- export { Ring };
123
- //# 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';\nimport { useGauge } from 'use-gauge';\nimport { TApiaWidgetProps } from '../types';\nimport { addBoundary, noNaN, animate } from '@apia/util';\nimport { useEffect, useRef, useState } from 'react';\n\nconst START_ANGLE = 0;\nconst END_ANGLE = 360;\n\nexport const Ring = ({\n colorRanges,\n maxValue,\n minValue,\n currentValue,\n height,\n valueRanges,\n ringEmptyColor,\n ringWidth,\n width,\n currentValueColor,\n currentValueFontSize,\n}: TApiaWidgetProps) => {\n const [value, setValue] = useState(currentValue);\n const diameter = Math.min(height, width);\n const offset = 20;\n const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];\n const domainMin = noNaN(minValue) ?? valueRanges[0];\n const gauge = useGauge({\n domain: [domainMin, domainMax],\n startAngle: START_ANGLE,\n endAngle: END_ANGLE,\n numTicks: 0,\n diameter: diameter,\n });\n\n const lastCurrentValue = useRef(0);\n useEffect(() => {\n const difference = currentValue - lastCurrentValue.current;\n return animate(\n 500,\n (progress) => {\n const step = addBoundary(\n difference * progress + lastCurrentValue.current,\n domainMin,\n domainMax,\n );\n setValue(Math.round(step));\n },\n () => {\n lastCurrentValue.current = currentValue;\n },\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [currentValue]);\n\n function getColor(value: number) {\n const index = valueRanges.findIndex((range) => value <= range);\n\n if (index === -1) {\n return colorRanges[0];\n }\n\n return colorRanges[index - 1] ?? colorRanges[index];\n }\n\n const valueToAngle = (value: number) => {\n const angleRange = 360;\n const valueRange = domainMax - domainMin;\n const angle = ((value - domainMin) / valueRange) * angleRange;\n\n return Math.round(angle);\n };\n\n return (\n <Box>\n <svg\n {...gauge.getSVGProps()}\n height={Math.max(width, height)}\n width={Math.max(width, height)}\n viewBox={`-${diameter / 2 + offset} -${diameter / 2 + offset} ${\n diameter + offset * 2\n } ${diameter + offset * 2}`}\n >\n <g id=\"arcs\">\n <path\n {...gauge.getArcProps({\n offset: offset - (noNaN(ringWidth) ?? 0) * 100,\n startAngle: START_ANGLE,\n endAngle: END_ANGLE,\n })}\n stroke={ringEmptyColor ?? 'transparent'}\n fill=\"none\"\n strokeLinecap=\"round\"\n strokeWidth={(noNaN(ringWidth) ?? 0) * 100}\n />\n <path\n {...gauge.getArcProps({\n offset: offset - (noNaN(ringWidth) ?? 0) * 100,\n startAngle: 180,\n endAngle:\n valueToAngle(value) === 360\n ? 179 + valueToAngle(value)\n : 180 + valueToAngle(value),\n })}\n stroke={getColor(value)}\n opacity=\"0.8\"\n fill=\"none\"\n strokeLinecap=\"square\"\n strokeWidth={(noNaN(ringWidth) ?? 0) * 100}\n style={{\n transition: 'stroke 0.5s',\n }}\n />\n </g>\n <g>\n <text\n textAnchor=\"middle\"\n style={{ fontSize: `${currentValueFontSize ?? 30}px` }}\n alignmentBaseline=\"central\"\n color={currentValueColor}\n >\n {value}\n </text>\n </g>\n </svg>\n </Box>\n );\n};\n"],"names":["value"],"mappings":"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"}
@@ -1,145 +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
- }) => {
20
- const allTicks = false;
21
- const value = currentValue;
22
- const diameter = Math.min(height, width);
23
- const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
24
- const domainMin = noNaN(minValue) ?? valueRanges[0];
25
- const offset = 20;
26
- const gauge = useGauge({
27
- domain: [domainMin, domainMax],
28
- startAngle: START_ANGLE,
29
- endAngle: END_ANGLE,
30
- numTicks: 10 + 1,
31
- diameter
32
- });
33
- useGauge({
34
- domain: [valueRanges[0], valueRanges[valueRanges.length - 1]],
35
- startAngle: START_ANGLE,
36
- endAngle: END_ANGLE,
37
- numTicks: valueRanges[valueRanges.length - 1] - valueRanges[0] + 1,
38
- diameter
39
- });
40
- const needle = gauge.getNeedleProps({
41
- value: 0,
42
- baseRadius: 12,
43
- tipRadius: 2
44
- });
45
- const angle = (END_ANGLE - START_ANGLE) * value / (domainMax - domainMin);
46
- return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
47
- "svg",
48
- {
49
- ...gauge.getSVGProps(),
50
- height: Math.max(width, height),
51
- width: Math.max(width, height),
52
- viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter / 2 + offset * 2}`,
53
- children: [
54
- /* @__PURE__ */ jsx("g", { id: "arcs", children: /* @__PURE__ */ jsx(
55
- "path",
56
- {
57
- ...gauge.getArcProps({
58
- offset: offset - 5,
59
- startAngle: 90,
60
- endAngle: 270
61
- }),
62
- stroke: "gray",
63
- opacity: "0.2",
64
- fill: "none",
65
- strokeLinecap: "round",
66
- strokeWidth: 5
67
- }
68
- ) }),
69
- /* @__PURE__ */ jsxs("g", { id: "ticks", children: [
70
- gauge.ticks.map((angle2) => {
71
- const angleToValue = (angle3) => {
72
- const angleRange = END_ANGLE - START_ANGLE;
73
- const valueRange = domainMax - domainMin;
74
- const value2 = domainMin + (angle3 - START_ANGLE) / angleRange * valueRange;
75
- return Math.round(value2);
76
- };
77
- const asValue = angleToValue(angle2);
78
- const showText = asValue % 10 === 0;
79
- return /* @__PURE__ */ jsxs(React.Fragment, { children: [
80
- /* @__PURE__ */ jsx(
81
- "line",
82
- {
83
- stroke: "gray",
84
- strokeWidth: showText ? 4 : 2,
85
- ...gauge.getTickProps({ angle: angle2, length: showText ? 12 : 3 })
86
- }
87
- ),
88
- showText && /* @__PURE__ */ jsx(
89
- "text",
90
- {
91
- fill: "black",
92
- ...gauge.getLabelProps({ angle: angle2, offset: 20 }),
93
- style: { fontSize: `${scaleValuesSize ?? 30}px` },
94
- children: asValue
95
- }
96
- )
97
- ] }, `tick-group-${angle2}`);
98
- }),
99
- allTicks
100
- ] }),
101
- /* @__PURE__ */ jsxs("g", { id: "needle", children: [
102
- /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base, r: 20 }),
103
- /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base }),
104
- /* @__PURE__ */ jsx(
105
- "circle",
106
- {
107
- fill: pointerColor,
108
- opacity: "0.5",
109
- ...needle.tip,
110
- style: {
111
- transform: `rotate(${angle}deg)`,
112
- transition: "transform 500ms"
113
- }
114
- }
115
- ),
116
- /* @__PURE__ */ jsx(
117
- "polyline",
118
- {
119
- style: {
120
- transform: `rotate(${angle}deg)`,
121
- transition: "transform 500ms"
122
- },
123
- fill: pointerColor,
124
- opacity: "0.5",
125
- points: needle.points
126
- }
127
- ),
128
- /* @__PURE__ */ jsx("circle", { fill: "white", ...needle.base, r: 4 })
129
- ] }),
130
- /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
131
- "text",
132
- {
133
- textAnchor: "middle",
134
- style: { fontSize: `${currentValueFontSize ?? 30}px` },
135
- y: -diameter / 4 + 20,
136
- children: value
137
- }
138
- ) })
139
- ]
140
- }
141
- ) });
142
- };
143
-
144
- export { Scale };
145
- //# sourceMappingURL=Scale.js.map