@apia/charts 1.0.2 → 2.0.0

package/dist/widgets/ring/Ring.js

@@ -0,0 +1,123 @@
+import { jsx, jsxs } from '@apia/theme/jsx-runtime';
+import { Box } from '@apia/theme';
+import { useGauge } from 'use-gauge';
+import { noNaN, animate, addBoundary } from '@apia/util';
+import { useState, useRef, useEffect } from 'react';
+
+const START_ANGLE = 0;
+const END_ANGLE = 360;
+const Ring = ({
+  colorRanges,
+  maxValue,
+  minValue,
+  currentValue,
+  height,
+  valueRanges,
+  ringEmptyColor,
+  ringWidth,
+  width,
+  currentValueColor,
+  currentValueFontSize
+}) => {
+  const [value, setValue] = useState(currentValue);
+  const diameter = Math.min(height, width);
+  const offset = 20;
+  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
+  const domainMin = noNaN(minValue) ?? valueRanges[0];
+  const gauge = useGauge({
+    domain: [domainMin, domainMax],
+    startAngle: START_ANGLE,
+    endAngle: END_ANGLE,
+    numTicks: 0,
+    diameter
+  });
+  const lastCurrentValue = useRef(0);
+  useEffect(() => {
+    const difference = currentValue - lastCurrentValue.current;
+    return animate(
+      500,
+      (progress) => {
+        const step = addBoundary(
+          difference * progress + lastCurrentValue.current,
+          domainMin,
+          domainMax
+        );
+        setValue(Math.round(step));
+      },
+      () => {
+        lastCurrentValue.current = currentValue;
+      }
+    );
+  }, [currentValue]);
+  function getColor(value2) {
+    const index = valueRanges.findIndex((range) => value2 <= range);
+    if (index === -1) {
+      return colorRanges[0];
+    }
+    return colorRanges[index - 1] ?? colorRanges[index];
+  }
+  const valueToAngle = (value2) => {
+    const angleRange = 360;
+    const valueRange = domainMax - domainMin;
+    const angle = (value2 - domainMin) / valueRange * angleRange;
+    return Math.round(angle);
+  };
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...gauge.getSVGProps(),
+      height: Math.max(width, height),
+      width: Math.max(width, height),
+      viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter + offset * 2}`,
+      children: [
+        /* @__PURE__ */ jsxs("g", { id: "arcs", children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              ...gauge.getArcProps({
+                offset: offset - (noNaN(ringWidth) ?? 0) * 100,
+                startAngle: START_ANGLE,
+                endAngle: END_ANGLE
+              }),
+              stroke: ringEmptyColor ?? "transparent",
+              fill: "none",
+              strokeLinecap: "round",
+              strokeWidth: (noNaN(ringWidth) ?? 0) * 100
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              ...gauge.getArcProps({
+                offset: offset - (noNaN(ringWidth) ?? 0) * 100,
+                startAngle: 180,
+                endAngle: valueToAngle(value) === 360 ? 179 + valueToAngle(value) : 180 + valueToAngle(value)
+              }),
+              stroke: getColor(value),
+              opacity: "0.8",
+              fill: "none",
+              strokeLinecap: "square",
+              strokeWidth: (noNaN(ringWidth) ?? 0) * 100,
+              style: {
+                transition: "stroke 0.5s"
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+          "text",
+          {
+            textAnchor: "middle",
+            style: { fontSize: `${currentValueFontSize ?? 30}px` },
+            alignmentBaseline: "central",
+            color: currentValueColor,
+            children: value
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+
+export { Ring };
+//# sourceMappingURL=Ring.js.map

package/dist/widgets/ring/Ring.js.map

@@ -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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"}

package/dist/widgets/scale/Scale.js

@@ -0,0 +1,145 @@
+import { jsx, jsxs } from '@apia/theme/jsx-runtime';
+import React from 'react';
+import { Box } from '@apia/theme';
+import { useGauge } from 'use-gauge';
+import { noNaN } from '@apia/util';
+
+const START_ANGLE = 90;
+const END_ANGLE = 270;
+const Scale = ({
+  currentValue,
+  currentValueFontSize,
+  height,
+  maxValue,
+  minValue,
+  pointerColor,
+  scaleValuesSize,
+  valueRanges,
+  width
+}) => {
+  const allTicks = false;
+  const value = currentValue;
+  const diameter = Math.min(height, width);
+  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
+  const domainMin = noNaN(minValue) ?? valueRanges[0];
+  const offset = 20;
+  const gauge = useGauge({
+    domain: [domainMin, domainMax],
+    startAngle: START_ANGLE,
+    endAngle: END_ANGLE,
+    numTicks: 10 + 1,
+    diameter
+  });
+  useGauge({
+    domain: [valueRanges[0], valueRanges[valueRanges.length - 1]],
+    startAngle: START_ANGLE,
+    endAngle: END_ANGLE,
+    numTicks: valueRanges[valueRanges.length - 1] - valueRanges[0] + 1,
+    diameter
+  });
+  const needle = gauge.getNeedleProps({
+    value: 0,
+    baseRadius: 12,
+    tipRadius: 2
+  });
+  const angle = (END_ANGLE - START_ANGLE) * value / (domainMax - domainMin);
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...gauge.getSVGProps(),
+      height: Math.max(width, height),
+      width: Math.max(width, height),
+      viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter / 2 + offset * 2}`,
+      children: [
+        /* @__PURE__ */ jsx("g", { id: "arcs", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            ...gauge.getArcProps({
+              offset: offset - 5,
+              startAngle: 90,
+              endAngle: 270
+            }),
+            stroke: "gray",
+            opacity: "0.2",
+            fill: "none",
+            strokeLinecap: "round",
+            strokeWidth: 5
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("g", { id: "ticks", children: [
+          gauge.ticks.map((angle2) => {
+            const angleToValue = (angle3) => {
+              const angleRange = END_ANGLE - START_ANGLE;
+              const valueRange = domainMax - domainMin;
+              const value2 = domainMin + (angle3 - START_ANGLE) / angleRange * valueRange;
+              return Math.round(value2);
+            };
+            const asValue = angleToValue(angle2);
+            const showText = asValue % 10 === 0;
+            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "line",
+                {
+                  stroke: "gray",
+                  strokeWidth: showText ? 4 : 2,
+                  ...gauge.getTickProps({ angle: angle2, length: showText ? 12 : 3 })
+                }
+              ),
+              showText && /* @__PURE__ */ jsx(
+                "text",
+                {
+                  fill: "black",
+                  ...gauge.getLabelProps({ angle: angle2, offset: 20 }),
+                  style: { fontSize: `${scaleValuesSize ?? 30}px` },
+                  children: asValue
+                }
+              )
+            ] }, `tick-group-${angle2}`);
+          }),
+          allTicks 
+        ] }),
+        /* @__PURE__ */ jsxs("g", { id: "needle", children: [
+          /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base, r: 20 }),
+          /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              fill: pointerColor,
+              opacity: "0.5",
+              ...needle.tip,
+              style: {
+                transform: `rotate(${angle}deg)`,
+                transition: "transform 500ms"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "polyline",
+            {
+              style: {
+                transform: `rotate(${angle}deg)`,
+                transition: "transform 500ms"
+              },
+              fill: pointerColor,
+              opacity: "0.5",
+              points: needle.points
+            }
+          ),
+          /* @__PURE__ */ jsx("circle", { fill: "white", ...needle.base, r: 4 })
+        ] }),
+        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+          "text",
+          {
+            textAnchor: "middle",
+            style: { fontSize: `${currentValueFontSize ?? 30}px` },
+            y: -diameter / 4 + 20,
+            children: value
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+
+export { Scale };
+//# sourceMappingURL=Scale.js.map

package/dist/widgets/scale/Scale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scale.js","sources":["../../../src/widgets/scale/Scale.tsx"],"sourcesContent":["import React from 'react';\nimport { Box } from '@apia/theme';\nimport { useGauge } from 'use-gauge';\nimport { TApiaWidgetProps } from '../types';\nimport { noNaN } from '@apia/util';\n\nconst START_ANGLE = 90;\nconst END_ANGLE = 270;\n\nexport const Scale = ({\n  currentValue,\n  currentValueFontSize,\n  height,\n  maxValue,\n  minValue,\n  pointerColor,\n  scaleValuesSize,\n  valueRanges,\n  width,\n}: TApiaWidgetProps) => {\n  const allTicks = false;\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  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  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 / 2 + offset * 2}`}\n      >\n        <g id=\"arcs\">\n          <path\n            {...gauge.getArcProps({\n              offset: offset - 5,\n              startAngle: 90,\n              endAngle: 270,\n            })}\n            stroke=\"gray\"\n            opacity=\"0.2\"\n            fill=\"none\"\n            strokeLinecap=\"round\"\n            strokeWidth={5}\n          />\n        </g>\n        <g id=\"ticks\">\n          {gauge.ticks.map((angle) => {\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            const showText = asValue % 10 === 0;\n\n            return (\n              <React.Fragment key={`tick-group-${angle}`}>\n                <line\n                  stroke=\"gray\"\n                  strokeWidth={showText ? 4 : 2}\n                  {...gauge.getTickProps({ angle, length: showText ? 12 : 3 })}\n                />\n                {showText && (\n                  <text\n                    fill=\"black\"\n                    {...gauge.getLabelProps({ angle, offset: 20 })}\n                    style={{ fontSize: `${scaleValuesSize ?? 30}px` }}\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                  />\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            style={{ fontSize: `${currentValueFontSize ?? 30}px` }}\n            y={-diameter / 4 + 20}\n          >\n            {value}\n          </text>\n        </g>\n      </svg>\n    </Box>\n  );\n};\n"],"names":["angle","value"],"mappings":"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"}

package/dist/widgets/speedMeter/SpeedMeter.js

@@ -0,0 +1,187 @@
+import { jsx, jsxs } from '@apia/theme/jsx-runtime';
+import { Box, createElement } from '@apia/theme';
+import React from 'react';
+import { useGauge } from 'use-gauge';
+import { noNaN } from '@apia/util';
+
+const START_ANGLE = 30;
+const END_ANGLE = 330;
+const SpeedMeter = ({
+  backgroundColor,
+  colorRanges,
+  currentValue,
+  currentValueColor,
+  currentValueFontSize,
+  height,
+  maxValue,
+  minValue,
+  pointerColor,
+  scaleValuesSize,
+  valueRanges,
+  width
+}) => {
+  const value = currentValue;
+  const diameter = Math.min(height, width);
+  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
+  const domainMin = noNaN(minValue) ?? valueRanges[0];
+  const offset = 20;
+  const gauge = useGauge({
+    domain: [domainMin, domainMax],
+    startAngle: START_ANGLE,
+    endAngle: END_ANGLE,
+    numTicks: valueRanges[valueRanges.length - 1] / 10 + 1,
+    diameter
+  });
+  const needle = gauge.getNeedleProps({
+    value: 0,
+    baseRadius: 12,
+    tipRadius: 2
+  });
+  function getColor(value2) {
+    const index = valueRanges.findIndex((range) => value2 <= range);
+    if (index === -1) {
+      return colorRanges[0];
+    }
+    return colorRanges[index];
+  }
+  const angle = (END_ANGLE - START_ANGLE) * value / (domainMax - domainMin);
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...gauge.getSVGProps(),
+      height: Math.max(width, height),
+      width: Math.max(width, height),
+      viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter + offset * 2}`,
+      children: [
+        /* @__PURE__ */ jsxs("g", { id: "arcs", children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              ...gauge.getArcProps({
+                offset: offset - 5,
+                startAngle: 0,
+                endAngle: 360
+              }),
+              stroke: "gray",
+              fill: backgroundColor ?? "none",
+              strokeLinecap: "round",
+              strokeWidth: 5
+            }
+          ),
+          valueRanges.map((innerValue, i) => {
+            const valueToAngle = (value2) => {
+              const angleRange = END_ANGLE - START_ANGLE;
+              const valueRange = domainMax - domainMin;
+              const angle2 = START_ANGLE + (value2 - domainMin) / valueRange * angleRange;
+              return Math.round(angle2);
+            };
+            return /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  ...gauge.getArcProps({
+                    offset: -50,
+                    startAngle: i === 0 ? START_ANGLE : valueToAngle(innerValue),
+                    endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE : valueToAngle(valueRanges[i + 1])
+                  }),
+                  stroke: getColor(innerValue),
+                  opacity: "0.8",
+                  fill: "none",
+                  strokeLinecap: "round",
+                  strokeWidth: 2
+                }
+              ),
+              /* @__PURE__ */ createElement(
+                "path",
+                {
+                  ...gauge.getArcProps({
+                    offset: -55,
+                    startAngle: i === 0 ? START_ANGLE : valueToAngle(innerValue),
+                    endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE : valueToAngle(valueRanges[i + 1])
+                  }),
+                  key: `${innerValue}_${i}`,
+                  stroke: getColor(innerValue),
+                  opacity: "0.8",
+                  fill: "none",
+                  strokeLinecap: "round",
+                  strokeWidth: 2
+                }
+              )
+            ] }, `${innerValue}_${i}`);
+          })
+        ] }),
+        /* @__PURE__ */ jsx("g", { id: "ticks", children: gauge.ticks.map((angle2) => {
+          const angleToValue = (angle3) => {
+            const angleRange = END_ANGLE - START_ANGLE;
+            const valueRange = domainMax - domainMin;
+            const value2 = domainMin + (angle3 - START_ANGLE) / angleRange * valueRange;
+            return Math.round(value2);
+          };
+          const asValue = angleToValue(angle2);
+          const showText = asValue % 10 === 0;
+          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                stroke: "gray",
+                strokeWidth: showText ? 4 : 2,
+                ...gauge.getTickProps({ angle: angle2, length: showText ? 12 : 3 })
+              }
+            ),
+            showText && /* @__PURE__ */ jsx(
+              "text",
+              {
+                fill: "black",
+                ...gauge.getLabelProps({ angle: angle2, offset: 20 }),
+                style: { fontSize: `${scaleValuesSize ?? 30}px` },
+                children: asValue
+              }
+            )
+          ] }, `tick-group-${angle2}`);
+        }) }),
+        /* @__PURE__ */ jsxs("g", { id: "needle", children: [
+          /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base, r: 20 }),
+          /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              fill: pointerColor,
+              opacity: "0.5",
+              ...needle.tip,
+              style: {
+                transform: `rotate(${angle}deg)`,
+                transition: "transform 500ms"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "polyline",
+            {
+              style: {
+                transform: `rotate(${angle}deg)`,
+                transition: "transform 500ms"
+              },
+              fill: pointerColor,
+              opacity: "0.5",
+              points: needle.points
+            }
+          ),
+          /* @__PURE__ */ jsx("circle", { fill: "white", ...needle.base, r: 4 })
+        ] }),
+        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+          "text",
+          {
+            textAnchor: "middle",
+            y: diameter / 2,
+            fill: currentValueColor,
+            style: { fontSize: `${currentValueFontSize ?? 30}px` },
+            children: value
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+
+export { SpeedMeter };
+//# sourceMappingURL=SpeedMeter.js.map

package/dist/widgets/speedMeter/SpeedMeter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeedMeter.js","sources":["../../../src/widgets/speedMeter/SpeedMeter.tsx"],"sourcesContent":["import React from 'react';\nimport { Box } from '@apia/theme';\nimport { useGauge } from 'use-gauge';\nimport { TApiaWidgetProps } from '../types';\nimport { noNaN } from '@apia/util';\n\nconst START_ANGLE = 30;\nconst END_ANGLE = 330;\n\nexport const SpeedMeter = ({\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 = false;\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  const offset = 20;\n  const gauge = useGauge({\n    domain: [domainMin, domainMax],\n    startAngle: START_ANGLE,\n    endAngle: END_ANGLE,\n    numTicks: allTicks\n      ? valueRanges[valueRanges.length - 1] - valueRanges[0] + 1\n      : valueRanges[valueRanges.length - 1] / 10 + 1,\n    diameter: diameter,\n  });\n\n  const needle = gauge.getNeedleProps({\n    value: 0,\n    baseRadius: 12,\n    tipRadius: 2,\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];\n  }\n\n  const angle = ((END_ANGLE - START_ANGLE) * value) / (domainMax - domainMin);\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=\"gray\"\n            fill={backgroundColor ?? 'none'}\n            strokeLinecap=\"round\"\n            strokeWidth={5}\n          />\n          {valueRanges.map((innerValue, i) => {\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: -50,\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.8\"\n                  fill=\"none\"\n                  strokeLinecap=\"round\"\n                  strokeWidth={2}\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)}\n                  opacity=\"0.8\"\n                  fill=\"none\"\n                  strokeLinecap=\"round\"\n                  strokeWidth={2}\n                />\n              </g>\n            );\n          })}\n        </g>\n        <g id=\"ticks\">\n          {gauge.ticks.map((angle) => {\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            const showText = asValue % 10 === 0;\n\n            return (\n              <React.Fragment key={`tick-group-${angle}`}>\n                <line\n                  stroke=\"gray\"\n                  strokeWidth={showText ? 4 : 2}\n                  {...gauge.getTickProps({ angle, length: showText ? 12 : 3 })}\n                />\n                {showText && (\n                  <text\n                    fill=\"black\"\n                    {...gauge.getLabelProps({ angle, offset: 20 })}\n                    style={{ fontSize: `${scaleValuesSize ?? 30}px` }}\n                  >\n                    {asValue}\n                  </text>\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            y={diameter / 2}\n            fill={currentValueColor}\n            style={{ fontSize: `${currentValueFontSize ?? 30}px` }}\n          >\n            {value}\n          </text>\n        </g>\n      </svg>\n    </Box>\n  );\n};\n"],"names":["value","angle"],"mappings":"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"}

package/dist/widgets/tLight/TLight.js

@@ -0,0 +1,134 @@
+import { jsx, jsxs } from '@apia/theme/jsx-runtime';
+import { Box } from '@apia/theme';
+import { useGauge } from 'use-gauge';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { noNaN, animate, addBoundary } from '@apia/util';
+
+const START_ANGLE = 0;
+const END_ANGLE = 360;
+const TLight = ({
+  addBorder = false,
+  colorRanges,
+  maxValue,
+  minValue,
+  currentValue,
+  height,
+  valueRanges,
+  width,
+  currentValueColor,
+  currentValueFontSize
+}) => {
+  const [value, setValue] = useState(currentValue);
+  const diameter = Math.min(height, width);
+  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
+  const domainMin = noNaN(minValue) ?? valueRanges[0];
+  const gauge = useGauge({
+    domain: [domainMin, domainMax],
+    startAngle: START_ANGLE,
+    endAngle: END_ANGLE,
+    numTicks: 0,
+    diameter
+  });
+  function getColor(value2) {
+    const index = valueRanges.findIndex((range) => value2 < range);
+    if (index === -1) {
+      return colorRanges[0];
+    }
+    return colorRanges[index - 1] ?? colorRanges[index];
+  }
+  const hasRendered = useRef(false);
+  const onRenderSvg = useCallback(
+    (el) => {
+      if (!el || hasRendered.current)
+        return;
+      hasRendered.current = true;
+      const svgElement = el;
+      const pathElement = el.querySelector("#TLight_arcs");
+      if (!(svgElement && pathElement)) {
+        return;
+      }
+      const pathBox = pathElement.getBoundingClientRect();
+      const svgBox = svgElement.getBoundingClientRect();
+      const pathX = pathBox.x - svgBox.x;
+      const pathY = pathBox.y - svgBox.y;
+      const viewBox = `${pathX - diameter / 2} ${pathY - diameter / 2} ${diameter} ${diameter}`;
+      svgElement.setAttribute("viewBox", viewBox);
+      svgElement.style.visibility = "visible";
+    },
+    [diameter]
+  );
+  const lastCurrentValue = useRef(0);
+  useEffect(() => {
+    const difference = currentValue - lastCurrentValue.current;
+    return animate(
+      500,
+      (progress) => {
+        const step = addBoundary(
+          difference * progress + lastCurrentValue.current,
+          domainMin,
+          domainMax
+        );
+        setValue(Math.round(step));
+      },
+      () => {
+        lastCurrentValue.current = currentValue;
+      }
+    );
+  }, [currentValue]);
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...gauge.getSVGProps(),
+      style: { visibility: "hidden" },
+      height: Math.max(width, height),
+      width: Math.max(width, height),
+      id: "TLight_svg",
+      ref: onRenderSvg,
+      viewBox: `-${diameter / 2} -${diameter / 2} ${diameter} ${diameter}`,
+      children: [
+        /* @__PURE__ */ jsxs("g", { id: "TLight_arcs", children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              ...gauge.getArcProps({
+                startAngle: START_ANGLE,
+                endAngle: END_ANGLE
+              }),
+              fill: getColor(value),
+              id: "TLight_path",
+              style: { transition: "fill 0.3s" }
+            }
+          ),
+          addBorder && /* @__PURE__ */ jsx(
+            "path",
+            {
+              ...gauge.getArcProps({
+                offset: -2.5,
+                startAngle: START_ANGLE,
+                endAngle: END_ANGLE
+              }),
+              stroke: "black",
+              fill: "transparent",
+              strokeLinecap: "round",
+              strokeWidth: 5,
+              id: "TLight_path"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+          "text",
+          {
+            textAnchor: "middle",
+            style: { fontSize: `${currentValueFontSize ?? 100}pt` },
+            alignmentBaseline: "central",
+            fill: currentValueColor,
+            children: value
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+
+export { TLight };
+//# sourceMappingURL=TLight.js.map