@apia/charts 2.0.7 → 2.0.8

package/dist/widgets/oxford/Oxford.js.map

@@ -1 +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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"}
+{"version":3,"file":"Oxford.js","sources":["../../../src/widgets/oxford/Oxford.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Box } from '@apia/theme';\r\nimport tinycolor from 'tinycolor2';\r\nimport { useGauge } from 'use-gauge';\r\nimport { TApiaWidgetBaseProps, TApiaWidgetOxfordProps } from '../types';\r\nimport { noNaN } from '@apia/util';\r\n\r\nconst START_ANGLE = 45;\r\nconst END_ANGLE = 315;\r\n\r\nexport const Oxford = ({\r\n  backgroundColor,\r\n  colorRanges,\r\n  currentValue,\r\n  currentValueColor,\r\n  currentValueFontSize,\r\n  height,\r\n  maxValue,\r\n  minValue,\r\n  pointerColor,\r\n  scaleValuesSize,\r\n  valueRanges,\r\n  width,\r\n}: TApiaWidgetBaseProps<TApiaWidgetOxfordProps>) => {\r\n  const allTicks = true;\r\n  const value = currentValue;\r\n  const diameter = Math.min(height, width);\r\n  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];\r\n  const domainMin = noNaN(minValue) ?? valueRanges[0];\r\n\r\n  const offset = 20;\r\n  const gauge = useGauge({\r\n    domain: [domainMin, domainMax],\r\n    startAngle: START_ANGLE,\r\n    endAngle: END_ANGLE,\r\n    numTicks: 10 + 1,\r\n    diameter: diameter,\r\n  });\r\n  const gauge2 = useGauge({\r\n    domain: [valueRanges[0], valueRanges[valueRanges.length - 1]],\r\n    startAngle: START_ANGLE,\r\n    endAngle: END_ANGLE,\r\n    numTicks: valueRanges[valueRanges.length - 1] - valueRanges[0] + 1,\r\n    diameter: diameter,\r\n  });\r\n\r\n  const needle = gauge.getNeedleProps({\r\n    value: 0,\r\n    baseRadius: 12,\r\n    tipRadius: 2,\r\n  });\r\n\r\n  const angle = ((END_ANGLE - START_ANGLE) * value) / (domainMax - domainMin);\r\n\r\n  function getColor(value: number) {\r\n    const index = valueRanges.findIndex(\r\n      (range) => noNaN(value) <= noNaN(range),\r\n    );\r\n\r\n    if (index === -1) {\r\n      return colorRanges[0];\r\n    }\r\n\r\n    return colorRanges[index];\r\n  }\r\n\r\n  return (\r\n    <Box>\r\n      <svg\r\n        {...gauge.getSVGProps()}\r\n        height={Math.max(width, height)}\r\n        width={Math.max(width, height)}\r\n        viewBox={`-${diameter / 2 + offset} -${diameter / 2 + offset} ${\r\n          diameter + offset * 2\r\n        } ${diameter + offset * 2}`}\r\n      >\r\n        <g id=\"arcs\">\r\n          <path\r\n            {...gauge.getArcProps({\r\n              offset: offset - 5,\r\n              startAngle: 0,\r\n              endAngle: 360,\r\n            })}\r\n            stroke=\"black\"\r\n            opacity=\"1\"\r\n            fill={\r\n              backgroundColor !== '' && backgroundColor !== undefined\r\n                ? tinycolor(backgroundColor)\r\n                    .setAlpha(0.5)\r\n                    .toPercentageRgbString()\r\n                : 'none'\r\n            }\r\n            strokeLinecap=\"round\"\r\n            strokeWidth={5}\r\n            vectorEffect={'non-scaling-stroke'}\r\n          />\r\n          {valueRanges.map((innerValue, i) => {\r\n            if (!valueRanges[i + 1]) {\r\n              return null;\r\n            }\r\n\r\n            const valueToAngle = (value: number) => {\r\n              const angleRange = END_ANGLE - START_ANGLE;\r\n              const valueRange = domainMax - domainMin;\r\n              const angle =\r\n                START_ANGLE + ((value - domainMin) / valueRange) * angleRange;\r\n              return Math.round(angle);\r\n            };\r\n\r\n            return (\r\n              <g key={`${innerValue}_${i}`}>\r\n                <path\r\n                  {...gauge.getArcProps({\r\n                    offset: offset - 5,\r\n                    startAngle:\r\n                      i === 0 ? START_ANGLE : valueToAngle(innerValue),\r\n                    endAngle:\r\n                      i === 0\r\n                        ? valueToAngle(valueRanges[1])\r\n                        : i === valueRanges.length - 1\r\n                          ? END_ANGLE\r\n                          : valueToAngle(valueRanges[i + 1]),\r\n                  })}\r\n                  stroke={'black'}\r\n                  opacity=\"0.8\"\r\n                  fill=\"none\"\r\n                  strokeLinecap=\"square\"\r\n                  strokeWidth={5}\r\n                  vectorEffect={'non-scaling-stroke'}\r\n                />\r\n                <path\r\n                  {...gauge.getArcProps({\r\n                    offset: -20,\r\n                    startAngle:\r\n                      i === 0 ? START_ANGLE : valueToAngle(innerValue),\r\n                    endAngle:\r\n                      i === 0\r\n                        ? valueToAngle(valueRanges[1])\r\n                        : i === valueRanges.length - 1\r\n                          ? END_ANGLE\r\n                          : valueToAngle(valueRanges[i + 1]),\r\n                  })}\r\n                  stroke={getColor(innerValue)}\r\n                  opacity=\"0.1\"\r\n                  fill=\"none\"\r\n                  strokeLinecap=\"butt\"\r\n                  strokeWidth={75}\r\n                  vectorEffect={'non-scaling-stroke'}\r\n                />\r\n                <path\r\n                  {...gauge.getArcProps({\r\n                    offset: -55,\r\n                    startAngle:\r\n                      i === 0 ? START_ANGLE : valueToAngle(innerValue),\r\n                    endAngle:\r\n                      i === 0\r\n                        ? valueToAngle(valueRanges[1])\r\n                        : i === valueRanges.length - 1\r\n                          ? END_ANGLE\r\n                          : valueToAngle(valueRanges[i + 1]),\r\n                  })}\r\n                  key={`${innerValue}_${i}`}\r\n                  stroke={getColor(innerValue) || '#999'}\r\n                  opacity=\"0.8\"\r\n                  fill=\"none\"\r\n                  strokeLinecap=\"butt\"\r\n                  strokeWidth={10}\r\n                  vectorEffect={'non-scaling-stroke'}\r\n                />\r\n              </g>\r\n            );\r\n          })}\r\n        </g>\r\n        <g id=\"ticks\">\r\n          {gauge.ticks.map((angle, i) => {\r\n            const angleToValue = (angle: number) => {\r\n              const angleRange = END_ANGLE - START_ANGLE;\r\n              const valueRange = domainMax - domainMin;\r\n\r\n              const value =\r\n                domainMin + ((angle - START_ANGLE) / angleRange) * valueRange;\r\n\r\n              return Math.round(value);\r\n            };\r\n            const asValue = angleToValue(angle);\r\n\r\n            const showText = asValue % 10 === 0;\r\n\r\n            return (\r\n              <React.Fragment key={`tick-group-${angle}_ ${i}`}>\r\n                <line\r\n                  stroke=\"gray\"\r\n                  strokeWidth={showText ? 4 : 2}\r\n                  {...gauge.getTickProps({ angle, length: showText ? 12 : 3 })}\r\n                  vectorEffect={'non-scaling-stroke'}\r\n                />\r\n                {showText && (\r\n                  <text\r\n                    fill={'black'}\r\n                    {...gauge.getLabelProps({\r\n                      angle,\r\n                      offset: 20,\r\n                    })}\r\n                    style={{\r\n                      fontSize: `${scaleValuesSize ?? 30}px`,\r\n                    }}\r\n                  >\r\n                    {asValue}\r\n                  </text>\r\n                )}\r\n              </React.Fragment>\r\n            );\r\n          })}\r\n          {allTicks &&\r\n            gauge2.ticks.map((angle, i) => {\r\n              return (\r\n                <React.Fragment key={`tick-group-${angle}_ ${i}_2`}>\r\n                  <line\r\n                    stroke=\"gray\"\r\n                    strokeWidth={2}\r\n                    {...gauge.getTickProps({\r\n                      angle,\r\n                      length: 3,\r\n                    })}\r\n                    vectorEffect={'non-scaling-stroke'}\r\n                  />\r\n                </React.Fragment>\r\n              );\r\n            })}\r\n        </g>\r\n        <g id=\"needle\">\r\n          <circle fill={pointerColor} {...needle.base} r={20} />\r\n          <circle fill={pointerColor} {...needle.base} />\r\n          <circle\r\n            fill={pointerColor}\r\n            opacity=\"0.5\"\r\n            {...needle.tip}\r\n            style={{\r\n              transform: `rotate(${angle}deg)`,\r\n              transition: 'transform 500ms',\r\n            }}\r\n          />\r\n          <polyline\r\n            style={{\r\n              transform: `rotate(${angle}deg)`,\r\n              transition: 'transform 500ms',\r\n            }}\r\n            fill={pointerColor}\r\n            opacity=\"0.5\"\r\n            points={needle.points}\r\n          />\r\n          <circle fill=\"white\" {...needle.base} r={4} />\r\n        </g>\r\n        <g>\r\n          <text\r\n            textAnchor=\"middle\"\r\n            alignmentBaseline=\"text-before-edge\"\r\n            y={diameter / 5}\r\n            style={{ fontSize: `${currentValueFontSize ?? 30}px` }}\r\n            fill={currentValueColor}\r\n          >\r\n            {value}\r\n          </text>\r\n        </g>\r\n      </svg>\r\n    </Box>\r\n  );\r\n};\r\n"],"names":["value","angle"],"mappings":"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"}

package/dist/widgets/ring/Ring.js

@@ -75,21 +75,21 @@ const Ring = ({
             "path",
             {
               ...gauge.getArcProps({
-                offset: offset - (noNaN(ringWidth) ?? 0) * 100,
+                offset: offset - ((noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0),
                 startAngle: START_ANGLE,
                 endAngle: END_ANGLE
               }),
               stroke: ringEmptyColor ?? "transparent",
               fill: "none",
               strokeLinecap: "round",
-              strokeWidth: (noNaN(ringWidth) ?? 0) * 100
+              strokeWidth: (noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0
             }
           ),
           /* @__PURE__ */ jsx(
             "path",
             {
               ...gauge.getArcProps({
-                offset: offset - (noNaN(ringWidth) ?? 0) * 100,
+                offset: offset - ((noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0),
                 startAngle: 180,
                 endAngle: valueToAngle(value) === 360 ? 179 + valueToAngle(value) : 180 + valueToAngle(value)
               }),
@@ -97,7 +97,7 @@ const Ring = ({
               opacity: "0.8",
               fill: "none",
               strokeLinecap: "square",
-              strokeWidth: (noNaN(ringWidth) ?? 0) * 100,
+              strokeWidth: (noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0,
               style: {
                 transition: "stroke 0.5s"
               }

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

@@ -1 +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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"}
+{"version":3,"file":"Ring.js","sources":["../../../src/widgets/ring/Ring.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\r\nimport { useGauge } from 'use-gauge';\r\nimport { TApiaWidgetBaseProps, TApiaWidgetRingProps } from '../types';\r\nimport { addBoundary, noNaN, animate } from '@apia/util';\r\nimport { useEffect, useRef, useState } from 'react';\r\n\r\nconst START_ANGLE = 0;\r\nconst END_ANGLE = 360;\r\n\r\nexport const Ring = ({\r\n  colorRanges,\r\n  maxValue,\r\n  minValue,\r\n  currentValue,\r\n  height,\r\n  valueRanges,\r\n  ringEmptyColor,\r\n  ringWidth,\r\n  width,\r\n  currentValueColor,\r\n  currentValueFontSize,\r\n}: TApiaWidgetBaseProps<TApiaWidgetRingProps>) => {\r\n  const [value, setValue] = useState(currentValue);\r\n  const diameter = Math.min(height, width);\r\n  const offset = 20;\r\n  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];\r\n  const domainMin = noNaN(minValue) ?? valueRanges[0];\r\n  const gauge = useGauge({\r\n    domain: [domainMin, domainMax],\r\n    startAngle: START_ANGLE,\r\n    endAngle: END_ANGLE,\r\n    numTicks: 0,\r\n    diameter: diameter,\r\n  });\r\n\r\n  const lastCurrentValue = useRef(0);\r\n  useEffect(() => {\r\n    const difference = currentValue - lastCurrentValue.current;\r\n    return animate(\r\n      500,\r\n      (progress) => {\r\n        const step = addBoundary(\r\n          difference * progress + lastCurrentValue.current,\r\n          domainMin,\r\n          domainMax,\r\n        );\r\n        setValue(Math.round(step));\r\n      },\r\n      () => {\r\n        lastCurrentValue.current = currentValue;\r\n      },\r\n    );\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [currentValue]);\r\n\r\n  function getColor(value: number) {\r\n    const index = valueRanges.findIndex((range) => value <= range);\r\n\r\n    if (index === -1) {\r\n      return colorRanges[0];\r\n    }\r\n\r\n    return colorRanges[index - 1] ?? colorRanges[index];\r\n  }\r\n\r\n  const valueToAngle = (value: number) => {\r\n    const angleRange = 360;\r\n    const valueRange = domainMax - domainMin;\r\n    const angle = ((value - domainMin) / valueRange) * angleRange;\r\n\r\n    return Math.round(angle);\r\n  };\r\n\r\n  return (\r\n    <Box>\r\n      <svg\r\n        {...gauge.getSVGProps()}\r\n        height={Math.max(width, height)}\r\n        width={Math.max(width, height)}\r\n        viewBox={`-${diameter / 2 + offset} -${diameter / 2 + offset} ${\r\n          diameter + offset * 2\r\n        } ${diameter + offset * 2}`}\r\n      >\r\n        <g id=\"arcs\">\r\n          <path\r\n            {...gauge.getArcProps({\r\n              offset:\r\n                offset -\r\n                ((noNaN(ringWidth) ?? 0) < 0\r\n                  ? (noNaN(ringWidth) ?? 0) * 100\r\n                  : noNaN(ringWidth) ?? 0),\r\n              startAngle: START_ANGLE,\r\n              endAngle: END_ANGLE,\r\n            })}\r\n            stroke={ringEmptyColor ?? 'transparent'}\r\n            fill=\"none\"\r\n            strokeLinecap=\"round\"\r\n            strokeWidth={\r\n              (noNaN(ringWidth) ?? 0) < 0\r\n                ? (noNaN(ringWidth) ?? 0) * 100\r\n                : noNaN(ringWidth) ?? 0\r\n            }\r\n          />\r\n          <path\r\n            {...gauge.getArcProps({\r\n              offset:\r\n                offset -\r\n                ((noNaN(ringWidth) ?? 0) < 0\r\n                  ? (noNaN(ringWidth) ?? 0) * 100\r\n                  : noNaN(ringWidth) ?? 0),\r\n              startAngle: 180,\r\n              endAngle:\r\n                valueToAngle(value) === 360\r\n                  ? 179 + valueToAngle(value)\r\n                  : 180 + valueToAngle(value),\r\n            })}\r\n            stroke={getColor(value)}\r\n            opacity=\"0.8\"\r\n            fill=\"none\"\r\n            strokeLinecap=\"square\"\r\n            strokeWidth={\r\n              (noNaN(ringWidth) ?? 0) < 0\r\n                ? (noNaN(ringWidth) ?? 0) * 100\r\n                : noNaN(ringWidth) ?? 0\r\n            }\r\n            style={{\r\n              transition: 'stroke 0.5s',\r\n            }}\r\n          />\r\n        </g>\r\n        <g>\r\n          <text\r\n            textAnchor=\"middle\"\r\n            style={{ fontSize: `${currentValueFontSize ?? 30}px` }}\r\n            alignmentBaseline=\"central\"\r\n            color={currentValueColor}\r\n          >\r\n            {value}\r\n          </text>\r\n        </g>\r\n      </svg>\r\n    </Box>\r\n  );\r\n};\r\n"],"names":["value"],"mappings":"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"}

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

@@ -1 +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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"}
+{"version":3,"file":"Scale.js","sources":["../../../src/widgets/scale/Scale.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Box } from '@apia/theme';\r\nimport { useGauge } from 'use-gauge';\r\nimport { TApiaWidgetBaseProps, TApiaWidgetScaleProps } from '../types';\r\nimport { noNaN } from '@apia/util';\r\n\r\nconst START_ANGLE = 90;\r\nconst END_ANGLE = 270;\r\n\r\nexport const Scale = ({\r\n  currentValue,\r\n  currentValueFontSize,\r\n  height,\r\n  maxValue,\r\n  minValue,\r\n  pointerColor,\r\n  scaleValuesSize,\r\n  valueRanges,\r\n  width,\r\n}: TApiaWidgetBaseProps<TApiaWidgetScaleProps>) => {\r\n  const allTicks = false;\r\n  const value = currentValue;\r\n  const diameter = Math.min(height, width);\r\n  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];\r\n  const domainMin = noNaN(minValue) ?? valueRanges[0];\r\n  const offset = 20;\r\n  const gauge = useGauge({\r\n    domain: [domainMin, domainMax],\r\n    startAngle: START_ANGLE,\r\n    endAngle: END_ANGLE,\r\n    numTicks: 10 + 1,\r\n    diameter: diameter,\r\n  });\r\n  const gauge2 = useGauge({\r\n    domain: [valueRanges[0], valueRanges[valueRanges.length - 1]],\r\n    startAngle: START_ANGLE,\r\n    endAngle: END_ANGLE,\r\n    numTicks: valueRanges[valueRanges.length - 1] - valueRanges[0] + 1,\r\n    diameter: diameter,\r\n  });\r\n\r\n  const needle = gauge.getNeedleProps({\r\n    value: 0,\r\n    baseRadius: 12,\r\n    tipRadius: 2,\r\n  });\r\n\r\n  const angle = ((END_ANGLE - START_ANGLE) * value) / (domainMax - domainMin);\r\n\r\n  return (\r\n    <Box>\r\n      <svg\r\n        {...gauge.getSVGProps()}\r\n        height={Math.max(width, height)}\r\n        width={Math.max(width, height)}\r\n        viewBox={`-${diameter / 2 + offset} -${diameter / 2 + offset} ${\r\n          diameter + offset * 2\r\n        } ${diameter / 2 + offset * 2}`}\r\n      >\r\n        <g id=\"arcs\">\r\n          <path\r\n            {...gauge.getArcProps({\r\n              offset: offset - 5,\r\n              startAngle: 90,\r\n              endAngle: 270,\r\n            })}\r\n            stroke=\"gray\"\r\n            opacity=\"0.2\"\r\n            fill=\"none\"\r\n            strokeLinecap=\"round\"\r\n            strokeWidth={5}\r\n          />\r\n        </g>\r\n        <g id=\"ticks\">\r\n          {gauge.ticks.map((angle) => {\r\n            const angleToValue = (angle: number) => {\r\n              const angleRange = END_ANGLE - START_ANGLE;\r\n              const valueRange = domainMax - domainMin;\r\n\r\n              const value =\r\n                domainMin + ((angle - START_ANGLE) / angleRange) * valueRange;\r\n\r\n              return Math.round(value);\r\n            };\r\n            const asValue = angleToValue(angle);\r\n            const showText = asValue % 10 === 0;\r\n\r\n            return (\r\n              <React.Fragment key={`tick-group-${angle}`}>\r\n                <line\r\n                  stroke=\"gray\"\r\n                  strokeWidth={showText ? 4 : 2}\r\n                  {...gauge.getTickProps({ angle, length: showText ? 12 : 3 })}\r\n                />\r\n                {showText && (\r\n                  <text\r\n                    fill=\"black\"\r\n                    {...gauge.getLabelProps({ angle, offset: 20 })}\r\n                    style={{ fontSize: `${scaleValuesSize ?? 30}px` }}\r\n                  >\r\n                    {asValue}\r\n                  </text>\r\n                )}\r\n              </React.Fragment>\r\n            );\r\n          })}\r\n          {allTicks &&\r\n            gauge2.ticks.map((angle, i) => {\r\n              return (\r\n                <React.Fragment key={`tick-group-${angle}_ ${i}_2`}>\r\n                  <line\r\n                    stroke=\"gray\"\r\n                    strokeWidth={2}\r\n                    {...gauge.getTickProps({\r\n                      angle,\r\n                      length: 3,\r\n                    })}\r\n                  />\r\n                </React.Fragment>\r\n              );\r\n            })}\r\n        </g>\r\n        <g id=\"needle\">\r\n          <circle fill={pointerColor} {...needle.base} r={20} />\r\n          <circle fill={pointerColor} {...needle.base} />\r\n          <circle\r\n            fill={pointerColor}\r\n            opacity=\"0.5\"\r\n            {...needle.tip}\r\n            style={{\r\n              transform: `rotate(${angle}deg)`,\r\n              transition: 'transform 500ms',\r\n            }}\r\n          />\r\n          <polyline\r\n            style={{\r\n              transform: `rotate(${angle}deg)`,\r\n              transition: 'transform 500ms',\r\n            }}\r\n            fill={pointerColor}\r\n            opacity=\"0.5\"\r\n            points={needle.points}\r\n          />\r\n          <circle fill=\"white\" {...needle.base} r={4} />\r\n        </g>\r\n        <g>\r\n          <text\r\n            textAnchor=\"middle\"\r\n            style={{ fontSize: `${currentValueFontSize ?? 30}px` }}\r\n            y={-diameter / 4 + 20}\r\n          >\r\n            {value}\r\n          </text>\r\n        </g>\r\n      </svg>\r\n    </Box>\r\n  );\r\n};\r\n"],"names":["angle","value"],"mappings":";;;;;;AAMA,MAAM,WAAc,GAAA,EAAA,CAAA;AACpB,MAAM,SAAY,GAAA,GAAA,CAAA;AAEX,MAAM,QAAQ,CAAC;AAAA,EACpB,YAAA;AAAA,EACA,oBAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,eAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AACF,CAAmD,KAAA;AACjD,EAAA,MAAM,QAAW,GAAA,KAAA,CAAA;AACjB,EAAA,MAAM,KAAQ,GAAA,YAAA,CAAA;AACd,EAAA,MAAM,QAAW,GAAA,IAAA,CAAK,GAAI,CAAA,MAAA,EAAQ,KAAK,CAAA,CAAA;AACvC,EAAA,MAAM,YAAY,KAAM,CAAA,QAAQ,KAAK,WAAY,CAAA,WAAA,CAAY,SAAS,CAAC,CAAA,CAAA;AACvE,EAAA,MAAM,SAAY,GAAA,KAAA,CAAM,QAAQ,CAAA,IAAK,YAAY,CAAC,CAAA,CAAA;AAClD,EAAA,MAAM,MAAS,GAAA,EAAA,CAAA;AACf,EAAA,MAAM,QAAQ,QAAS,CAAA;AAAA,IACrB,MAAA,EAAQ,CAAC,SAAA,EAAW,SAAS,CAAA;AAAA,IAC7B,UAAY,EAAA,WAAA;AAAA,IACZ,QAAU,EAAA,SAAA;AAAA,IACV,UAAU,EAAK,GAAA,CAAA;AAAA,IACf,QAAA;AAAA,GACD,CAAA,CAAA;AACD,EAAe,QAAS,CAAA;AAAA,IACtB,MAAA,EAAQ,CAAC,WAAY,CAAA,CAAC,GAAG,WAAY,CAAA,WAAA,CAAY,MAAS,GAAA,CAAC,CAAC,CAAA;AAAA,IAC5D,UAAY,EAAA,WAAA;AAAA,IACZ,QAAU,EAAA,SAAA;AAAA,IACV,QAAA,EAAU,YAAY,WAAY,CAAA,MAAA,GAAS,CAAC,CAAI,GAAA,WAAA,CAAY,CAAC,CAAI,GAAA,CAAA;AAAA,IACjE,QAAA;AAAA,GACD,EAAA;AAED,EAAM,MAAA,MAAA,GAAS,MAAM,cAAe,CAAA;AAAA,IAClC,KAAO,EAAA,CAAA;AAAA,IACP,UAAY,EAAA,EAAA;AAAA,IACZ,SAAW,EAAA,CAAA;AAAA,GACZ,CAAA,CAAA;AAED,EAAA,MAAM,KAAU,GAAA,CAAA,SAAA,GAAY,WAAe,IAAA,KAAA,IAAU,SAAY,GAAA,SAAA,CAAA,CAAA;AAEjE,EAAA,2BACG,GACC,EAAA,EAAA,QAAA,kBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,MAAM,WAAY,EAAA;AAAA,MACtB,MAAQ,EAAA,IAAA,CAAK,GAAI,CAAA,KAAA,EAAO,MAAM,CAAA;AAAA,MAC9B,KAAO,EAAA,IAAA,CAAK,GAAI,CAAA,KAAA,EAAO,MAAM,CAAA;AAAA,MAC7B,SAAS,CAAI,CAAA,EAAA,QAAA,GAAW,CAAI,GAAA,MAAM,KAAK,QAAW,GAAA,CAAA,GAAI,MAAM,CAAA,CAAA,EAC1D,WAAW,MAAS,GAAA,CACtB,IAAI,QAAW,GAAA,CAAA,GAAI,SAAS,CAAC,CAAA,CAAA;AAAA,MAE7B,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,GAAA,EAAA,EAAE,IAAG,MACJ,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACE,GAAG,MAAM,WAAY,CAAA;AAAA,cACpB,QAAQ,MAAS,GAAA,CAAA;AAAA,cACjB,UAAY,EAAA,EAAA;AAAA,cACZ,QAAU,EAAA,GAAA;AAAA,aACX,CAAA;AAAA,YACD,MAAO,EAAA,MAAA;AAAA,YACP,OAAQ,EAAA,KAAA;AAAA,YACR,IAAK,EAAA,MAAA;AAAA,YACL,aAAc,EAAA,OAAA;AAAA,YACd,WAAa,EAAA,CAAA;AAAA,WAAA;AAAA,SAEjB,EAAA,CAAA;AAAA,wBACA,IAAA,CAAC,GAAE,EAAA,EAAA,EAAA,EAAG,OACH,EAAA,QAAA,EAAA;AAAA,UAAM,KAAA,CAAA,KAAA,CAAM,GAAI,CAAA,CAACA,MAAU,KAAA;AAC1B,YAAM,MAAA,YAAA,GAAe,CAACA,MAAkB,KAAA;AACtC,cAAA,MAAM,aAAa,SAAY,GAAA,WAAA,CAAA;AAC/B,cAAA,MAAM,aAAa,SAAY,GAAA,SAAA,CAAA;AAE/B,cAAA,MAAMC,MACJ,GAAA,SAAA,GAAA,CAAcD,MAAQ,GAAA,WAAA,IAAe,UAAc,GAAA,UAAA,CAAA;AAErD,cAAO,OAAA,IAAA,CAAK,MAAMC,MAAK,CAAA,CAAA;AAAA,aACzB,CAAA;AACA,YAAM,MAAA,OAAA,GAAU,aAAaD,MAAK,CAAA,CAAA;AAClC,YAAM,MAAA,QAAA,GAAW,UAAU,EAAO,KAAA,CAAA,CAAA;AAElC,YACE,uBAAA,IAAA,CAAC,KAAM,CAAA,QAAA,EAAN,EACC,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,MAAO,EAAA,MAAA;AAAA,kBACP,WAAA,EAAa,WAAW,CAAI,GAAA,CAAA;AAAA,kBAC3B,GAAG,KAAM,CAAA,YAAA,CAAa,EAAE,KAAA,EAAAA,QAAO,MAAQ,EAAA,QAAA,GAAW,EAAK,GAAA,CAAA,EAAG,CAAA;AAAA,iBAAA;AAAA,eAC7D;AAAA,cACC,QACC,oBAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,IAAK,EAAA,OAAA;AAAA,kBACJ,GAAG,MAAM,aAAc,CAAA,EAAE,OAAAA,MAAO,EAAA,MAAA,EAAQ,IAAI,CAAA;AAAA,kBAC7C,OAAO,EAAE,QAAA,EAAU,CAAG,EAAA,eAAA,IAAmB,EAAE,CAAK,EAAA,CAAA,EAAA;AAAA,kBAE/C,QAAA,EAAA,OAAA;AAAA,iBAAA;AAAA,eACH;AAAA,aAbiB,EAAA,EAAA,CAAA,WAAA,EAAcA,MAAK,CAexC,CAAA,CAAA,CAAA;AAAA,WAEH,CAAA;AAAA,UACA,SAcE;AAAA,SACL,EAAA,CAAA;AAAA,wBACA,IAAA,CAAC,GAAE,EAAA,EAAA,EAAA,EAAG,QACJ,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAO,IAAM,EAAA,YAAA,EAAe,GAAG,MAAO,CAAA,IAAA,EAAM,GAAG,EAAI,EAAA,CAAA;AAAA,8BACnD,QAAO,EAAA,EAAA,IAAA,EAAM,YAAe,EAAA,GAAG,OAAO,IAAM,EAAA,CAAA;AAAA,0BAC7C,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAM,EAAA,YAAA;AAAA,cACN,OAAQ,EAAA,KAAA;AAAA,cACP,GAAG,MAAO,CAAA,GAAA;AAAA,cACX,KAAO,EAAA;AAAA,gBACL,SAAA,EAAW,UAAU,KAAK,CAAA,IAAA,CAAA;AAAA,gBAC1B,UAAY,EAAA,iBAAA;AAAA,eACd;AAAA,aAAA;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAO,EAAA;AAAA,gBACL,SAAA,EAAW,UAAU,KAAK,CAAA,IAAA,CAAA;AAAA,gBAC1B,UAAY,EAAA,iBAAA;AAAA,eACd;AAAA,cACA,IAAM,EAAA,YAAA;AAAA,cACN,OAAQ,EAAA,KAAA;AAAA,cACR,QAAQ,MAAO,CAAA,MAAA;AAAA,aAAA;AAAA,WACjB;AAAA,0BACA,GAAA,CAAC,YAAO,IAAK,EAAA,OAAA,EAAS,GAAG,MAAO,CAAA,IAAA,EAAM,GAAG,CAAG,EAAA,CAAA;AAAA,SAC9C,EAAA,CAAA;AAAA,4BACC,GACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,UAAW,EAAA,QAAA;AAAA,YACX,OAAO,EAAE,QAAA,EAAU,CAAG,EAAA,oBAAA,IAAwB,EAAE,CAAK,EAAA,CAAA,EAAA;AAAA,YACrD,CAAA,EAAG,CAAC,QAAA,GAAW,CAAI,GAAA,EAAA;AAAA,YAElB,QAAA,EAAA,KAAA;AAAA,WAAA;AAAA,SAEL,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/dist/widgets/speedMeter/SpeedMeter.js

@@ -38,7 +38,9 @@ const SpeedMeter = ({
     tipRadius: 2
   });
   function getColor(value2) {
-    const index = valueRanges.findIndex((range) => value2 <= range);
+    const index = valueRanges.findIndex(
+      (range) => noNaN(value2) <= noNaN(range)
+    );
     if (index === -1) {
       return colorRanges[0];
     }

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

@@ -1 +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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"}
+{"version":3,"file":"SpeedMeter.js","sources":["../../../src/widgets/speedMeter/SpeedMeter.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Box } from '@apia/theme';\r\nimport { useGauge } from 'use-gauge';\r\nimport { TApiaWidgetBaseProps, TApiaWidgetSpeedMeterProps } from '../types';\r\nimport { noNaN } from '@apia/util';\r\n\r\nconst START_ANGLE = 30;\r\nconst END_ANGLE = 330;\r\n\r\nexport const SpeedMeter = ({\r\n  backgroundColor,\r\n  colorRanges,\r\n  currentValue,\r\n  currentValueColor,\r\n  currentValueFontSize,\r\n  height,\r\n  maxValue,\r\n  minValue,\r\n  pointerColor,\r\n  scaleValuesSize,\r\n  valueRanges,\r\n  width,\r\n}: TApiaWidgetBaseProps<TApiaWidgetSpeedMeterProps>) => {\r\n  const allTicks = false;\r\n  const value = currentValue;\r\n  const diameter = Math.min(height, width);\r\n  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];\r\n  const domainMin = noNaN(minValue) ?? valueRanges[0];\r\n  const offset = 20;\r\n  const gauge = useGauge({\r\n    domain: [domainMin, domainMax],\r\n    startAngle: START_ANGLE,\r\n    endAngle: END_ANGLE,\r\n    numTicks: allTicks\r\n      ? valueRanges[valueRanges.length - 1] - valueRanges[0] + 1\r\n      : valueRanges[valueRanges.length - 1] / 10 + 1,\r\n    diameter: diameter,\r\n  });\r\n\r\n  const needle = gauge.getNeedleProps({\r\n    value: 0,\r\n    baseRadius: 12,\r\n    tipRadius: 2,\r\n  });\r\n\r\n  function getColor(value: number) {\r\n    const index = valueRanges.findIndex(\r\n      (range) => noNaN(value) <= noNaN(range),\r\n    );\r\n\r\n    if (index === -1) {\r\n      return colorRanges[0];\r\n    }\r\n\r\n    return colorRanges[index];\r\n  }\r\n\r\n  const angle = ((END_ANGLE - START_ANGLE) * value) / (domainMax - domainMin);\r\n\r\n  return (\r\n    <Box>\r\n      <svg\r\n        {...gauge.getSVGProps()}\r\n        height={Math.max(width, height)}\r\n        width={Math.max(width, height)}\r\n        viewBox={`-${diameter / 2 + offset} -${diameter / 2 + offset} ${\r\n          diameter + offset * 2\r\n        } ${diameter + offset * 2}`}\r\n      >\r\n        <g id=\"arcs\">\r\n          <path\r\n            {...gauge.getArcProps({\r\n              offset: offset - 5,\r\n              startAngle: 0,\r\n              endAngle: 360,\r\n            })}\r\n            stroke=\"gray\"\r\n            fill={backgroundColor ?? 'none'}\r\n            strokeLinecap=\"round\"\r\n            strokeWidth={5}\r\n          />\r\n          {valueRanges.map((innerValue, i) => {\r\n            const valueToAngle = (value: number) => {\r\n              const angleRange = END_ANGLE - START_ANGLE;\r\n              const valueRange = domainMax - domainMin;\r\n              const angle =\r\n                START_ANGLE + ((value - domainMin) / valueRange) * angleRange;\r\n              return Math.round(angle);\r\n            };\r\n\r\n            return (\r\n              <g key={`${innerValue}_${i}`}>\r\n                <path\r\n                  {...gauge.getArcProps({\r\n                    offset: -50,\r\n                    startAngle:\r\n                      i === 0 ? START_ANGLE : valueToAngle(innerValue),\r\n                    endAngle:\r\n                      i === 0\r\n                        ? valueToAngle(valueRanges[1])\r\n                        : i === valueRanges.length - 1\r\n                          ? END_ANGLE\r\n                          : valueToAngle(valueRanges[i + 1]),\r\n                  })}\r\n                  stroke={getColor(innerValue)}\r\n                  opacity=\"0.8\"\r\n                  fill=\"none\"\r\n                  strokeLinecap=\"round\"\r\n                  strokeWidth={2}\r\n                />\r\n                <path\r\n                  {...gauge.getArcProps({\r\n                    offset: -55,\r\n                    startAngle:\r\n                      i === 0 ? START_ANGLE : valueToAngle(innerValue),\r\n                    endAngle:\r\n                      i === 0\r\n                        ? valueToAngle(valueRanges[1])\r\n                        : i === valueRanges.length - 1\r\n                          ? END_ANGLE\r\n                          : valueToAngle(valueRanges[i + 1]),\r\n                  })}\r\n                  key={`${innerValue}_${i}`}\r\n                  stroke={getColor(innerValue)}\r\n                  opacity=\"0.8\"\r\n                  fill=\"none\"\r\n                  strokeLinecap=\"round\"\r\n                  strokeWidth={2}\r\n                />\r\n              </g>\r\n            );\r\n          })}\r\n        </g>\r\n        <g id=\"ticks\">\r\n          {gauge.ticks.map((angle) => {\r\n            const angleToValue = (angle: number) => {\r\n              const angleRange = END_ANGLE - START_ANGLE;\r\n              const valueRange = domainMax - domainMin;\r\n\r\n              const value =\r\n                domainMin + ((angle - START_ANGLE) / angleRange) * valueRange;\r\n\r\n              return Math.round(value);\r\n            };\r\n            const asValue = angleToValue(angle);\r\n            const showText = asValue % 10 === 0;\r\n\r\n            return (\r\n              <React.Fragment key={`tick-group-${angle}`}>\r\n                <line\r\n                  stroke=\"gray\"\r\n                  strokeWidth={showText ? 4 : 2}\r\n                  {...gauge.getTickProps({ angle, length: showText ? 12 : 3 })}\r\n                />\r\n                {showText && (\r\n                  <text\r\n                    fill=\"black\"\r\n                    {...gauge.getLabelProps({ angle, offset: 20 })}\r\n                    style={{ fontSize: `${scaleValuesSize ?? 30}px` }}\r\n                  >\r\n                    {asValue}\r\n                  </text>\r\n                )}\r\n              </React.Fragment>\r\n            );\r\n          })}\r\n        </g>\r\n        <g id=\"needle\">\r\n          <circle fill={pointerColor} {...needle.base} r={20} />\r\n          <circle fill={pointerColor} {...needle.base} />\r\n          <circle\r\n            fill={pointerColor}\r\n            opacity=\"0.5\"\r\n            {...needle.tip}\r\n            style={{\r\n              transform: `rotate(${angle}deg)`,\r\n              transition: 'transform 500ms',\r\n            }}\r\n          />\r\n          <polyline\r\n            style={{\r\n              transform: `rotate(${angle}deg)`,\r\n              transition: 'transform 500ms',\r\n            }}\r\n            fill={pointerColor}\r\n            opacity=\"0.5\"\r\n            points={needle.points}\r\n          />\r\n          <circle fill=\"white\" {...needle.base} r={4} />\r\n        </g>\r\n        <g>\r\n          <text\r\n            textAnchor=\"middle\"\r\n            y={diameter / 2}\r\n            fill={currentValueColor}\r\n            style={{ fontSize: `${currentValueFontSize ?? 30}px` }}\r\n          >\r\n            {value}\r\n          </text>\r\n        </g>\r\n      </svg>\r\n    </Box>\r\n  );\r\n};\r\n"],"names":["value","angle"],"mappings":";;;;;;AAMA,MAAM,WAAc,GAAA,EAAA,CAAA;AACpB,MAAM,SAAY,GAAA,GAAA,CAAA;AAEX,MAAM,aAAa,CAAC;AAAA,EACzB,eAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,iBAAA;AAAA,EACA,oBAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,eAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AACF,CAAwD,KAAA;AAEtD,EAAA,MAAM,KAAQ,GAAA,YAAA,CAAA;AACd,EAAA,MAAM,QAAW,GAAA,IAAA,CAAK,GAAI,CAAA,MAAA,EAAQ,KAAK,CAAA,CAAA;AACvC,EAAA,MAAM,YAAY,KAAM,CAAA,QAAQ,KAAK,WAAY,CAAA,WAAA,CAAY,SAAS,CAAC,CAAA,CAAA;AACvE,EAAA,MAAM,SAAY,GAAA,KAAA,CAAM,QAAQ,CAAA,IAAK,YAAY,CAAC,CAAA,CAAA;AAClD,EAAA,MAAM,MAAS,GAAA,EAAA,CAAA;AACf,EAAA,MAAM,QAAQ,QAAS,CAAA;AAAA,IACrB,MAAA,EAAQ,CAAC,SAAA,EAAW,SAAS,CAAA;AAAA,IAC7B,UAAY,EAAA,WAAA;AAAA,IACZ,QAAU,EAAA,SAAA;AAAA,IACV,UAEI,WAAY,CAAA,WAAA,CAAY,MAAS,GAAA,CAAC,IAAI,EAAK,GAAA,CAAA;AAAA,IAC/C,QAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,MAAA,GAAS,MAAM,cAAe,CAAA;AAAA,IAClC,KAAO,EAAA,CAAA;AAAA,IACP,UAAY,EAAA,EAAA;AAAA,IACZ,SAAW,EAAA,CAAA;AAAA,GACZ,CAAA,CAAA;AAED,EAAA,SAAS,SAASA,MAAe,EAAA;AAC/B,IAAA,MAAM,QAAQ,WAAY,CAAA,SAAA;AAAA,MACxB,CAAC,KAAU,KAAA,KAAA,CAAMA,MAAK,CAAA,IAAK,MAAM,KAAK,CAAA;AAAA,KACxC,CAAA;AAEA,IAAA,IAAI,UAAU,CAAI,CAAA,EAAA;AAChB,MAAA,OAAO,YAAY,CAAC,CAAA,CAAA;AAAA,KACtB;AAEA,IAAA,OAAO,YAAY,KAAK,CAAA,CAAA;AAAA,GAC1B;AAEA,EAAA,MAAM,KAAU,GAAA,CAAA,SAAA,GAAY,WAAe,IAAA,KAAA,IAAU,SAAY,GAAA,SAAA,CAAA,CAAA;AAEjE,EAAA,2BACG,GACC,EAAA,EAAA,QAAA,kBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,MAAM,WAAY,EAAA;AAAA,MACtB,MAAQ,EAAA,IAAA,CAAK,GAAI,CAAA,KAAA,EAAO,MAAM,CAAA;AAAA,MAC9B,KAAO,EAAA,IAAA,CAAK,GAAI,CAAA,KAAA,EAAO,MAAM,CAAA;AAAA,MAC7B,SAAS,CAAI,CAAA,EAAA,QAAA,GAAW,CAAI,GAAA,MAAM,KAAK,QAAW,GAAA,CAAA,GAAI,MAAM,CAAA,CAAA,EAC1D,WAAW,MAAS,GAAA,CACtB,CAAI,CAAA,EAAA,QAAA,GAAW,SAAS,CAAC,CAAA,CAAA;AAAA,MAEzB,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,GAAA,EAAA,EAAE,IAAG,MACJ,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACE,GAAG,MAAM,WAAY,CAAA;AAAA,gBACpB,QAAQ,MAAS,GAAA,CAAA;AAAA,gBACjB,UAAY,EAAA,CAAA;AAAA,gBACZ,QAAU,EAAA,GAAA;AAAA,eACX,CAAA;AAAA,cACD,MAAO,EAAA,MAAA;AAAA,cACP,MAAM,eAAmB,IAAA,MAAA;AAAA,cACzB,aAAc,EAAA,OAAA;AAAA,cACd,WAAa,EAAA,CAAA;AAAA,aAAA;AAAA,WACf;AAAA,UACC,WAAY,CAAA,GAAA,CAAI,CAAC,UAAA,EAAY,CAAM,KAAA;AAClC,YAAM,MAAA,YAAA,GAAe,CAACA,MAAkB,KAAA;AACtC,cAAA,MAAM,aAAa,SAAY,GAAA,WAAA,CAAA;AAC/B,cAAA,MAAM,aAAa,SAAY,GAAA,SAAA,CAAA;AAC/B,cAAA,MAAMC,MACJ,GAAA,WAAA,GAAA,CAAgBD,MAAQ,GAAA,SAAA,IAAa,UAAc,GAAA,UAAA,CAAA;AACrD,cAAO,OAAA,IAAA,CAAK,MAAMC,MAAK,CAAA,CAAA;AAAA,aACzB,CAAA;AAEA,YAAA,4BACG,GACC,EAAA,EAAA,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACE,GAAG,MAAM,WAAY,CAAA;AAAA,oBACpB,MAAQ,EAAA,CAAA,EAAA;AAAA,oBACR,UACE,EAAA,CAAA,KAAM,CAAI,GAAA,WAAA,GAAc,aAAa,UAAU,CAAA;AAAA,oBACjD,UACE,CAAM,KAAA,CAAA,GACF,YAAa,CAAA,WAAA,CAAY,CAAC,CAAC,CAAA,GAC3B,CAAM,KAAA,WAAA,CAAY,SAAS,CACzB,GAAA,SAAA,GACA,aAAa,WAAY,CAAA,CAAA,GAAI,CAAC,CAAC,CAAA;AAAA,mBACxC,CAAA;AAAA,kBACD,MAAA,EAAQ,SAAS,UAAU,CAAA;AAAA,kBAC3B,OAAQ,EAAA,KAAA;AAAA,kBACR,IAAK,EAAA,MAAA;AAAA,kBACL,aAAc,EAAA,OAAA;AAAA,kBACd,WAAa,EAAA,CAAA;AAAA,iBAAA;AAAA,eACf;AAAA,8BACA,aAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACE,GAAG,MAAM,WAAY,CAAA;AAAA,oBACpB,MAAQ,EAAA,CAAA,EAAA;AAAA,oBACR,UACE,EAAA,CAAA,KAAM,CAAI,GAAA,WAAA,GAAc,aAAa,UAAU,CAAA;AAAA,oBACjD,UACE,CAAM,KAAA,CAAA,GACF,YAAa,CAAA,WAAA,CAAY,CAAC,CAAC,CAAA,GAC3B,CAAM,KAAA,WAAA,CAAY,SAAS,CACzB,GAAA,SAAA,GACA,aAAa,WAAY,CAAA,CAAA,GAAI,CAAC,CAAC,CAAA;AAAA,mBACxC,CAAA;AAAA,kBACD,GAAK,EAAA,CAAA,EAAG,UAAU,CAAA,CAAA,EAAI,CAAC,CAAA,CAAA;AAAA,kBACvB,MAAA,EAAQ,SAAS,UAAU,CAAA;AAAA,kBAC3B,OAAQ,EAAA,KAAA;AAAA,kBACR,IAAK,EAAA,MAAA;AAAA,kBACL,aAAc,EAAA,OAAA;AAAA,kBACd,WAAa,EAAA,CAAA;AAAA,iBAAA;AAAA,eACf;AAAA,aAAA,EAAA,EArCM,CAAG,EAAA,UAAU,CAAI,CAAA,EAAA,CAAC,CAsC1B,CAAA,CAAA,CAAA;AAAA,WAEH,CAAA;AAAA,SACH,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,OAAE,EAAG,EAAA,OAAA,EACH,gBAAM,KAAM,CAAA,GAAA,CAAI,CAACA,MAAU,KAAA;AAC1B,UAAM,MAAA,YAAA,GAAe,CAACA,MAAkB,KAAA;AACtC,YAAA,MAAM,aAAa,SAAY,GAAA,WAAA,CAAA;AAC/B,YAAA,MAAM,aAAa,SAAY,GAAA,SAAA,CAAA;AAE/B,YAAA,MAAMD,MACJ,GAAA,SAAA,GAAA,CAAcC,MAAQ,GAAA,WAAA,IAAe,UAAc,GAAA,UAAA,CAAA;AAErD,YAAO,OAAA,IAAA,CAAK,MAAMD,MAAK,CAAA,CAAA;AAAA,WACzB,CAAA;AACA,UAAM,MAAA,OAAA,GAAU,aAAaC,MAAK,CAAA,CAAA;AAClC,UAAM,MAAA,QAAA,GAAW,UAAU,EAAO,KAAA,CAAA,CAAA;AAElC,UACE,uBAAA,IAAA,CAAC,KAAM,CAAA,QAAA,EAAN,EACC,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,MAAO,EAAA,MAAA;AAAA,gBACP,WAAA,EAAa,WAAW,CAAI,GAAA,CAAA;AAAA,gBAC3B,GAAG,KAAM,CAAA,YAAA,CAAa,EAAE,KAAA,EAAAA,QAAO,MAAQ,EAAA,QAAA,GAAW,EAAK,GAAA,CAAA,EAAG,CAAA;AAAA,eAAA;AAAA,aAC7D;AAAA,YACC,QACC,oBAAA,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,IAAK,EAAA,OAAA;AAAA,gBACJ,GAAG,MAAM,aAAc,CAAA,EAAE,OAAAA,MAAO,EAAA,MAAA,EAAQ,IAAI,CAAA;AAAA,gBAC7C,OAAO,EAAE,QAAA,EAAU,CAAG,EAAA,eAAA,IAAmB,EAAE,CAAK,EAAA,CAAA,EAAA;AAAA,gBAE/C,QAAA,EAAA,OAAA;AAAA,eAAA;AAAA,aACH;AAAA,WAbiB,EAAA,EAAA,CAAA,WAAA,EAAcA,MAAK,CAexC,CAAA,CAAA,CAAA;AAAA,SAEH,CACH,EAAA,CAAA;AAAA,wBACA,IAAA,CAAC,GAAE,EAAA,EAAA,EAAA,EAAG,QACJ,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAO,IAAM,EAAA,YAAA,EAAe,GAAG,MAAO,CAAA,IAAA,EAAM,GAAG,EAAI,EAAA,CAAA;AAAA,8BACnD,QAAO,EAAA,EAAA,IAAA,EAAM,YAAe,EAAA,GAAG,OAAO,IAAM,EAAA,CAAA;AAAA,0BAC7C,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAM,EAAA,YAAA;AAAA,cACN,OAAQ,EAAA,KAAA;AAAA,cACP,GAAG,MAAO,CAAA,GAAA;AAAA,cACX,KAAO,EAAA;AAAA,gBACL,SAAA,EAAW,UAAU,KAAK,CAAA,IAAA,CAAA;AAAA,gBAC1B,UAAY,EAAA,iBAAA;AAAA,eACd;AAAA,aAAA;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAO,EAAA;AAAA,gBACL,SAAA,EAAW,UAAU,KAAK,CAAA,IAAA,CAAA;AAAA,gBAC1B,UAAY,EAAA,iBAAA;AAAA,eACd;AAAA,cACA,IAAM,EAAA,YAAA;AAAA,cACN,OAAQ,EAAA,KAAA;AAAA,cACR,QAAQ,MAAO,CAAA,MAAA;AAAA,aAAA;AAAA,WACjB;AAAA,0BACA,GAAA,CAAC,YAAO,IAAK,EAAA,OAAA,EAAS,GAAG,MAAO,CAAA,IAAA,EAAM,GAAG,CAAG,EAAA,CAAA;AAAA,SAC9C,EAAA,CAAA;AAAA,4BACC,GACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,UAAW,EAAA,QAAA;AAAA,YACX,GAAG,QAAW,GAAA,CAAA;AAAA,YACd,IAAM,EAAA,iBAAA;AAAA,YACN,OAAO,EAAE,QAAA,EAAU,CAAG,EAAA,oBAAA,IAAwB,EAAE,CAAK,EAAA,CAAA,EAAA;AAAA,YAEpD,QAAA,EAAA,KAAA;AAAA,WAAA;AAAA,SAEL,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/dist/widgets/tLight/TLight.js

@@ -18,7 +18,7 @@ const TLight = ({
   currentValueColor,
   currentValueFontSize
 }) => {
-  const [value, setValue] = useState(currentValue);
+  const [value, setValue] = useState(noNaN(currentValue));
   const diameter = Math.min(height, width);
   const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
   const domainMin = noNaN(minValue) ?? valueRanges[0];
@@ -59,7 +59,7 @@ const TLight = ({
   );
   const lastCurrentValue = useRef(0);
   useEffect(() => {
-    const difference = currentValue - lastCurrentValue.current;
+    const difference = noNaN(currentValue) - lastCurrentValue.current;
     return animate(
       500,
       (progress) => {
@@ -71,10 +71,10 @@ const TLight = ({
         setValue(Math.round(step));
       },
       () => {
-        lastCurrentValue.current = currentValue;
+        lastCurrentValue.current = noNaN(currentValue);
       }
     );
-  }, [currentValue]);
+  }, [noNaN(currentValue)]);
   return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
     "svg",
     {

package/dist/widgets/tLight/TLight.js.map

@@ -1 +1 @@
-{"version":3,"file":"TLight.js","sources":["../../../src/widgets/tLight/TLight.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\nimport { useGauge } from 'use-gauge';\nimport { TApiaWidgetProps } from '../types';\nimport { useCallback, useRef, useState, useEffect } from 'react';\nimport { addBoundary, noNaN, animate } from '@apia/util';\n\nconst START_ANGLE = 0;\nconst END_ANGLE = 360;\n\nexport const TLight = ({\n  addBorder = false,\n  colorRanges,\n  maxValue,\n  minValue,\n  currentValue,\n  height,\n  valueRanges,\n  width,\n  currentValueColor,\n  currentValueFontSize,\n}: TApiaWidgetProps) => {\n  const [value, setValue] = useState(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 gauge = useGauge({\n    domain: [domainMin, domainMax],\n    startAngle: START_ANGLE,\n    endAngle: END_ANGLE,\n    numTicks: 0,\n    diameter: diameter,\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 hasRendered = useRef(false);\n\n  const onRenderSvg = useCallback(\n    (el: SVGSVGElement) => {\n      if (!el || hasRendered.current) return;\n\n      hasRendered.current = true;\n\n      const svgElement = el;\n      const pathElement = el.querySelector('#TLight_arcs');\n\n      if (!(svgElement && pathElement)) {\n        return;\n      }\n\n      const pathBox = pathElement.getBoundingClientRect();\n      const svgBox = svgElement.getBoundingClientRect();\n      const pathX = pathBox.x - svgBox.x;\n      const pathY = pathBox.y - svgBox.y;\n\n      const viewBox = `${pathX - diameter / 2} ${\n        pathY - diameter / 2\n      } ${diameter} ${diameter}`;\n\n      svgElement.setAttribute('viewBox', viewBox);\n\n      svgElement.style.visibility = 'visible';\n    },\n    [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  return (\n    <Box>\n      <svg\n        {...gauge.getSVGProps()}\n        style={{ visibility: 'hidden' }}\n        height={Math.max(width, height)}\n        width={Math.max(width, height)}\n        id=\"TLight_svg\"\n        ref={onRenderSvg}\n        viewBox={`-${diameter / 2} -${diameter / 2} ${diameter} ${diameter}`}\n      >\n        <g id=\"TLight_arcs\">\n          <path\n            {...gauge.getArcProps({\n              startAngle: START_ANGLE,\n              endAngle: END_ANGLE,\n            })}\n            fill={getColor(value)}\n            id=\"TLight_path\"\n            style={{ transition: 'fill 0.3s' }}\n          />\n          {addBorder && (\n            <path\n              {...gauge.getArcProps({\n                offset: -2.5,\n                startAngle: START_ANGLE,\n                endAngle: END_ANGLE,\n              })}\n              stroke={'black'}\n              fill={'transparent'}\n              strokeLinecap=\"round\"\n              strokeWidth={5}\n              id=\"TLight_path\"\n            />\n          )}\n        </g>\n        <g>\n          <text\n            textAnchor=\"middle\"\n            style={{ fontSize: `${currentValueFontSize ?? 100}pt` }}\n            alignmentBaseline=\"central\"\n            fill={currentValueColor}\n          >\n            {value}\n          </text>\n        </g>\n      </svg>\n    </Box>\n  );\n};\n"],"names":["value"],"mappings":"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"}
+{"version":3,"file":"TLight.js","sources":["../../../src/widgets/tLight/TLight.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\r\nimport { useGauge } from 'use-gauge';\r\nimport { TApiaWidgetBaseProps, TApiaWidgetTLightProps } from '../types';\r\nimport { useCallback, useRef, useState, useEffect } from 'react';\r\nimport { addBoundary, noNaN, animate } from '@apia/util';\r\n\r\nconst START_ANGLE = 0;\r\nconst END_ANGLE = 360;\r\n\r\nexport const TLight = ({\r\n  addBorder = false,\r\n  colorRanges,\r\n  maxValue,\r\n  minValue,\r\n  currentValue,\r\n  height,\r\n  valueRanges,\r\n  width,\r\n  currentValueColor,\r\n  currentValueFontSize,\r\n}: TApiaWidgetBaseProps<TApiaWidgetTLightProps>) => {\r\n  const [value, setValue] = useState(noNaN(currentValue));\r\n  const diameter = Math.min(height, width);\r\n  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];\r\n  const domainMin = noNaN(minValue) ?? valueRanges[0];\r\n  const gauge = useGauge({\r\n    domain: [domainMin, domainMax],\r\n    startAngle: START_ANGLE,\r\n    endAngle: END_ANGLE,\r\n    numTicks: 0,\r\n    diameter: diameter,\r\n  });\r\n  function getColor(value: number) {\r\n    const index = valueRanges.findIndex((range) => value < range);\r\n\r\n    if (index === -1) {\r\n      return colorRanges[0];\r\n    }\r\n\r\n    return colorRanges[index - 1] ?? colorRanges[index];\r\n  }\r\n\r\n  const hasRendered = useRef(false);\r\n\r\n  const onRenderSvg = useCallback(\r\n    (el: SVGSVGElement) => {\r\n      if (!el || hasRendered.current) return;\r\n\r\n      hasRendered.current = true;\r\n\r\n      const svgElement = el;\r\n      const pathElement = el.querySelector('#TLight_arcs');\r\n\r\n      if (!(svgElement && pathElement)) {\r\n        return;\r\n      }\r\n\r\n      const pathBox = pathElement.getBoundingClientRect();\r\n      const svgBox = svgElement.getBoundingClientRect();\r\n      const pathX = pathBox.x - svgBox.x;\r\n      const pathY = pathBox.y - svgBox.y;\r\n\r\n      const viewBox = `${pathX - diameter / 2} ${\r\n        pathY - diameter / 2\r\n      } ${diameter} ${diameter}`;\r\n\r\n      svgElement.setAttribute('viewBox', viewBox);\r\n\r\n      svgElement.style.visibility = 'visible';\r\n    },\r\n    [diameter],\r\n  );\r\n\r\n  const lastCurrentValue = useRef(0);\r\n  useEffect(() => {\r\n    const difference = noNaN(currentValue) - lastCurrentValue.current;\r\n    return animate(\r\n      500,\r\n      (progress) => {\r\n        const step = addBoundary(\r\n          difference * progress + lastCurrentValue.current,\r\n          domainMin,\r\n          domainMax,\r\n        );\r\n\r\n        setValue(Math.round(step));\r\n      },\r\n      () => {\r\n        lastCurrentValue.current = noNaN(currentValue);\r\n      },\r\n    );\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [noNaN(currentValue)]);\r\n  return (\r\n    <Box>\r\n      <svg\r\n        {...gauge.getSVGProps()}\r\n        style={{ visibility: 'hidden' }}\r\n        height={Math.max(width, height)}\r\n        width={Math.max(width, height)}\r\n        id=\"TLight_svg\"\r\n        ref={onRenderSvg}\r\n        viewBox={`-${diameter / 2} -${diameter / 2} ${diameter} ${diameter}`}\r\n      >\r\n        <g id=\"TLight_arcs\">\r\n          <path\r\n            {...gauge.getArcProps({\r\n              startAngle: START_ANGLE,\r\n              endAngle: END_ANGLE,\r\n            })}\r\n            fill={getColor(value)}\r\n            id=\"TLight_path\"\r\n            style={{ transition: 'fill 0.3s' }}\r\n          />\r\n          {addBorder && (\r\n            <path\r\n              {...gauge.getArcProps({\r\n                offset: -2.5,\r\n                startAngle: START_ANGLE,\r\n                endAngle: END_ANGLE,\r\n              })}\r\n              stroke={'black'}\r\n              fill={'transparent'}\r\n              strokeLinecap=\"round\"\r\n              strokeWidth={5}\r\n              id=\"TLight_path\"\r\n            />\r\n          )}\r\n        </g>\r\n        <g>\r\n          <text\r\n            textAnchor=\"middle\"\r\n            style={{ fontSize: `${currentValueFontSize ?? 100}pt` }}\r\n            alignmentBaseline=\"central\"\r\n            fill={currentValueColor}\r\n          >\r\n            {value}\r\n          </text>\r\n        </g>\r\n      </svg>\r\n    </Box>\r\n  );\r\n};\r\n"],"names":["value"],"mappings":"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"}

package/dist/widgets/thermometer/Thermometer.js

@@ -3,6 +3,8 @@ import { Box } from '@apia/theme';
 import { valueToTickPercent, colorGetter, getInnerColor, getColor } from './util.js';
 import { noNaN } from '@apia/util';
 import { useCustomWidget } from '../custom/useCustomWidget.js';
+import { uniqueId } from 'lodash-es';
+import { useMemo } from 'react';
 
 const Thermometer = ({
   colorRanges,
@@ -12,18 +14,18 @@ const Thermometer = ({
   height,
   valueRanges,
   width,
-  panelId,
   currentValueFontSize
 }) => {
   const value = currentValue;
   const baseValue = noNaN(minValue) ?? valueRanges[0];
   const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
   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`;
+  const uId = useMemo(() => uniqueId(), []);
   const { rectProps, rectRef, svgViewBox, pathX, pathY } = useCustomWidget({
     currentValue: value,
     maxValue: domainMax,
     minValue: baseValue,
-    panelId
+    uId
   });
   const boxValues = {
     height: noNaN(Math.max(width, height) - Math.max(width, height) * 0.31),
@@ -44,18 +46,18 @@ const Thermometer = ({
       {
         height: Math.max(width, height),
         width: Math.max(width, height),
-        id: `svg_${panelId}`,
+        id: `svg_${uId}`,
         viewBox: svgViewBox,
         style: { position: "relative", top: "10px" },
         children: [
           /* @__PURE__ */ jsx("clipPath", { id: "clipPath", children: /* @__PURE__ */ jsx("path", { d: pathDValue }) }),
           /* @__PURE__ */ jsx("mask", { id: "myMask", children: /* @__PURE__ */ jsx("path", { d: pathDValue, id: "maskPath", fill: "white" }) }),
-          /* @__PURE__ */ jsx("path", { d: pathDValue, id: `path_${panelId}`, fill: "white" }),
+          /* @__PURE__ */ jsx("path", { d: pathDValue, id: `path_${uId}`, fill: "white" }),
           /* @__PURE__ */ jsx(
             "rect",
             {
               fill: getInnerColor(valueRanges, colorRanges, value),
-              id: `rect_${panelId}`,
+              id: `rect_${uId}`,
               mask: "url(#myMask)",
               ref: rectRef,
               ...rectProps

package/dist/widgets/thermometer/Thermometer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thermometer.js","sources":["../../../src/widgets/thermometer/Thermometer.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\nimport { TApiaWidgetProps } from '../types';\nimport {\n  valueToTickPercent,\n  colorGetter,\n  getInnerColor,\n  getColor,\n} from './util';\nimport { noNaN } from '@apia/util';\nimport { useCustomWidget } from '../custom/useCustomWidget';\n// Usar un segundo svg para los textos\nexport const Thermometer = ({\n  colorRanges,\n  maxValue,\n  minValue,\n  currentValue,\n  height,\n  valueRanges,\n  width,\n  panelId,\n  currentValueFontSize,\n}: TApiaWidgetProps) => {\n  const value = currentValue;\n  const baseValue = noNaN(minValue) ?? valueRanges[0];\n  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];\n  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`;\n\n  const { rectProps, rectRef, svgViewBox, pathX, pathY } = useCustomWidget({\n    currentValue: value,\n    maxValue: domainMax,\n    minValue: baseValue,\n    panelId,\n  });\n\n  const boxValues = {\n    height: noNaN(Math.max(width, height) - Math.max(width, height) * 0.31),\n    width: noNaN(Math.max(width, height)),\n    x: pathX,\n    y: pathY,\n  };\n\n  const tickArray = valueRanges.map((val, i) => {\n    return {\n      height:\n        boxValues.height *\n        (valueToTickPercent(domainMax, baseValue, val) / 100),\n      color: !valueRanges[i + 1]\n        ? 'black'\n        : colorGetter(valueRanges, colorRanges, val),\n      value: val,\n    };\n  });\n\n  return (\n    <Box sx={{ position: 'relative' }}>\n      <svg\n        height={Math.max(width, height)}\n        width={Math.max(width, height)}\n        id={`svg_${panelId}`}\n        viewBox={svgViewBox}\n        style={{ position: 'relative', top: '10px' }}\n      >\n        <clipPath id=\"clipPath\">\n          <path d={pathDValue} />\n        </clipPath>\n        <mask id=\"myMask\">\n          <path d={pathDValue} id=\"maskPath\" fill=\"white\" />\n        </mask>\n\n        <path d={pathDValue} id={`path_${panelId}`} fill=\"white\" />\n\n        <rect\n          fill={getInnerColor(valueRanges, colorRanges, value)}\n          id={`rect_${panelId}`}\n          mask=\"url(#myMask)\"\n          ref={rectRef}\n          {...rectProps}\n        />\n\n        <path\n          d={pathDValue}\n          id=\"path\"\n          fill=\"none\"\n          stroke=\"white\"\n          strokeWidth={10}\n          clipPath=\"url(#clipPath)\"\n          vectorEffect={'non-scaling-stroke'}\n        />\n        <path\n          clipPath=\"url(#clipPath)\"\n          d={pathDValue}\n          id=\"path\"\n          fill=\"none\"\n          stroke=\"black\"\n          strokeWidth={5}\n          vectorEffect={'non-scaling-stroke'}\n        />\n      </svg>\n      <svg\n        height={Math.max(width, height) + 10}\n        width={Math.max(width, height)}\n        style={{ position: 'absolute', left: 0, top: 0 }}\n      >\n        {boxValues.x && (\n          <g>\n            <text\n              x={Math.max(width, height) / 2}\n              y={Math.max(width, height) - Math.max(width, height) / 6 + 10}\n              style={{\n                fontSize: `${noNaN(currentValueFontSize) ?? 50}px`,\n              }}\n              textAnchor=\"middle\"\n              alignmentBaseline={'central'}\n              vectorEffect={'non-scaling-stroke'}\n            >\n              {value}\n            </text>\n          </g>\n        )}\n        {tickArray.map((tick, i) => {\n          return (\n            <g key={i}>\n              <rect\n                x={\n                  i === 0\n                    ? Math.max(width, height) / 2 + 30\n                    : Math.max(width, height) / 2 + 20\n                }\n                y={tick.height + 10}\n                width={'15px'}\n                height={'3px'}\n                vectorEffect={'non-scaling-stroke'}\n                fill={getColor(valueRanges, colorRanges, tick.value)}\n              />\n              <text\n                x={\n                  i === 0\n                    ? Math.max(width, height) - Math.max(width, height) / 3 + 10\n                    : Math.max(width, height) - Math.max(width, height) / 3\n                }\n                y={tickArray[i + 1] ? tick.height + 16 : tick.height + 1.5}\n                textAnchor=\"middle\"\n                alignmentBaseline={\n                  tickArray[i + 1] ? 'auto' : 'text-before-edge'\n                }\n              >\n                {tick.value}\n              </text>\n            </g>\n          );\n        })}\n      </svg>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Thermometer.js","sources":["../../../src/widgets/thermometer/Thermometer.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\r\nimport { TApiaWidgetBaseProps, TApiaWidgetThermometerProps } from '../types';\r\nimport {\r\n  valueToTickPercent,\r\n  colorGetter,\r\n  getInnerColor,\r\n  getColor,\r\n} from './util';\r\nimport { noNaN } from '@apia/util';\r\nimport { useCustomWidget } from '../custom/useCustomWidget';\r\nimport { uniqueId } from 'lodash-es';\r\nimport { useMemo } from 'react';\r\n// Usar un segundo svg para los textos\r\nexport const Thermometer = ({\r\n  colorRanges,\r\n  maxValue,\r\n  minValue,\r\n  currentValue,\r\n  height,\r\n  valueRanges,\r\n  width,\r\n  currentValueFontSize,\r\n}: TApiaWidgetBaseProps<TApiaWidgetThermometerProps>) => {\r\n  const value = currentValue;\r\n  const baseValue = noNaN(minValue) ?? valueRanges[0];\r\n  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];\r\n  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`;\r\n  const uId = useMemo(() => uniqueId(), []);\r\n  const { rectProps, rectRef, svgViewBox, pathX, pathY } = useCustomWidget({\r\n    currentValue: value,\r\n    maxValue: domainMax,\r\n    minValue: baseValue,\r\n    uId,\r\n  });\r\n\r\n  const boxValues = {\r\n    height: noNaN(Math.max(width, height) - Math.max(width, height) * 0.31),\r\n    width: noNaN(Math.max(width, height)),\r\n    x: pathX,\r\n    y: pathY,\r\n  };\r\n\r\n  const tickArray = valueRanges.map((val, i) => {\r\n    return {\r\n      height:\r\n        boxValues.height *\r\n        (valueToTickPercent(domainMax, baseValue, val) / 100),\r\n      color: !valueRanges[i + 1]\r\n        ? 'black'\r\n        : colorGetter(valueRanges, colorRanges, val),\r\n      value: val,\r\n    };\r\n  });\r\n\r\n  return (\r\n    <Box sx={{ position: 'relative' }}>\r\n      <svg\r\n        height={Math.max(width, height)}\r\n        width={Math.max(width, height)}\r\n        id={`svg_${uId}`}\r\n        viewBox={svgViewBox}\r\n        style={{ position: 'relative', top: '10px' }}\r\n      >\r\n        <clipPath id=\"clipPath\">\r\n          <path d={pathDValue} />\r\n        </clipPath>\r\n        <mask id=\"myMask\">\r\n          <path d={pathDValue} id=\"maskPath\" fill=\"white\" />\r\n        </mask>\r\n\r\n        <path d={pathDValue} id={`path_${uId}`} fill=\"white\" />\r\n\r\n        <rect\r\n          fill={getInnerColor(valueRanges, colorRanges, value)}\r\n          id={`rect_${uId}`}\r\n          mask=\"url(#myMask)\"\r\n          ref={rectRef}\r\n          {...rectProps}\r\n        />\r\n\r\n        <path\r\n          d={pathDValue}\r\n          id=\"path\"\r\n          fill=\"none\"\r\n          stroke=\"white\"\r\n          strokeWidth={10}\r\n          clipPath=\"url(#clipPath)\"\r\n          vectorEffect={'non-scaling-stroke'}\r\n        />\r\n        <path\r\n          clipPath=\"url(#clipPath)\"\r\n          d={pathDValue}\r\n          id=\"path\"\r\n          fill=\"none\"\r\n          stroke=\"black\"\r\n          strokeWidth={5}\r\n          vectorEffect={'non-scaling-stroke'}\r\n        />\r\n      </svg>\r\n      <svg\r\n        height={Math.max(width, height) + 10}\r\n        width={Math.max(width, height)}\r\n        style={{ position: 'absolute', left: 0, top: 0 }}\r\n      >\r\n        {boxValues.x && (\r\n          <g>\r\n            <text\r\n              x={Math.max(width, height) / 2}\r\n              y={Math.max(width, height) - Math.max(width, height) / 6 + 10}\r\n              style={{\r\n                fontSize: `${noNaN(currentValueFontSize) ?? 50}px`,\r\n              }}\r\n              textAnchor=\"middle\"\r\n              alignmentBaseline={'central'}\r\n              vectorEffect={'non-scaling-stroke'}\r\n            >\r\n              {value}\r\n            </text>\r\n          </g>\r\n        )}\r\n        {tickArray.map((tick, i) => {\r\n          return (\r\n            <g key={i}>\r\n              <rect\r\n                x={\r\n                  i === 0\r\n                    ? Math.max(width, height) / 2 + 30\r\n                    : Math.max(width, height) / 2 + 20\r\n                }\r\n                y={tick.height + 10}\r\n                width={'15px'}\r\n                height={'3px'}\r\n                vectorEffect={'non-scaling-stroke'}\r\n                fill={getColor(valueRanges, colorRanges, tick.value)}\r\n              />\r\n              <text\r\n                x={\r\n                  i === 0\r\n                    ? Math.max(width, height) - Math.max(width, height) / 3 + 10\r\n                    : Math.max(width, height) - Math.max(width, height) / 3\r\n                }\r\n                y={tickArray[i + 1] ? tick.height + 16 : tick.height + 1.5}\r\n                textAnchor=\"middle\"\r\n                alignmentBaseline={\r\n                  tickArray[i + 1] ? 'auto' : 'text-before-edge'\r\n                }\r\n              >\r\n                {tick.value}\r\n              </text>\r\n            </g>\r\n          );\r\n        })}\r\n      </svg>\r\n    </Box>\r\n  );\r\n};\r\n"],"names":[],"mappings":";;;;;;;;AAaO,MAAM,cAAc,CAAC;AAAA,EAC1B,WAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,oBAAA;AACF,CAAyD,KAAA;AACvD,EAAA,MAAM,KAAQ,GAAA,YAAA,CAAA;AACd,EAAA,MAAM,SAAY,GAAA,KAAA,CAAM,QAAQ,CAAA,IAAK,YAAY,CAAC,CAAA,CAAA;AAClD,EAAA,MAAM,YAAY,KAAM,CAAA,QAAQ,KAAK,WAAY,CAAA,WAAA,CAAY,SAAS,CAAC,CAAA,CAAA;AACvE,EAAA,MAAM,UAAa,GAAA,CAAA,mRAAA,CAAA,CAAA;AACnB,EAAA,MAAM,MAAM,OAAQ,CAAA,MAAM,QAAS,EAAA,EAAG,EAAE,CAAA,CAAA;AACxC,EAAA,MAAM,EAAE,SAAW,EAAA,OAAA,EAAS,YAAY,KAAO,EAAA,KAAA,KAAU,eAAgB,CAAA;AAAA,IACvE,YAAc,EAAA,KAAA;AAAA,IACd,QAAU,EAAA,SAAA;AAAA,IACV,QAAU,EAAA,SAAA;AAAA,IACV,GAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,SAAY,GAAA;AAAA,IAChB,MAAQ,EAAA,KAAA,CAAM,IAAK,CAAA,GAAA,CAAI,KAAO,EAAA,MAAM,CAAI,GAAA,IAAA,CAAK,GAAI,CAAA,KAAA,EAAO,MAAM,CAAA,GAAI,IAAI,CAAA;AAAA,IACtE,OAAO,KAAM,CAAA,IAAA,CAAK,GAAI,CAAA,KAAA,EAAO,MAAM,CAAC,CAAA;AAAA,IACpC,CAAG,EAAA,KAAA;AAAA,IACH,CAAG,EAAA,KAAA;AAAA,GACL,CAAA;AAEA,EAAA,MAAM,SAAY,GAAA,WAAA,CAAY,GAAI,CAAA,CAAC,KAAK,CAAM,KAAA;AAC5C,IAAO,OAAA;AAAA,MACL,QACE,SAAU,CAAA,MAAA,IACT,mBAAmB,SAAW,EAAA,SAAA,EAAW,GAAG,CAAI,GAAA,GAAA,CAAA;AAAA,MACnD,KAAA,EAAO,CAAC,WAAA,CAAY,CAAI,GAAA,CAAC,IACrB,OACA,GAAA,WAAA,CAAY,WAAa,EAAA,WAAA,EAAa,GAAG,CAAA;AAAA,MAC7C,KAAO,EAAA,GAAA;AAAA,KACT,CAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,4BACG,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,QAAA,EAAU,YACnB,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,MAAQ,EAAA,IAAA,CAAK,GAAI,CAAA,KAAA,EAAO,MAAM,CAAA;AAAA,QAC9B,KAAO,EAAA,IAAA,CAAK,GAAI,CAAA,KAAA,EAAO,MAAM,CAAA;AAAA,QAC7B,EAAA,EAAI,OAAO,GAAG,CAAA,CAAA;AAAA,QACd,OAAS,EAAA,UAAA;AAAA,QACT,KAAO,EAAA,EAAE,QAAU,EAAA,UAAA,EAAY,KAAK,MAAO,EAAA;AAAA,QAE3C,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,cAAS,EAAG,EAAA,UAAA,EACX,8BAAC,MAAK,EAAA,EAAA,CAAA,EAAG,YAAY,CACvB,EAAA,CAAA;AAAA,0BACC,GAAA,CAAA,MAAA,EAAA,EAAK,EAAG,EAAA,QAAA,EACP,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA,EAAK,CAAG,EAAA,UAAA,EAAY,EAAG,EAAA,UAAA,EAAW,IAAK,EAAA,OAAA,EAAQ,CAClD,EAAA,CAAA;AAAA,0BAEA,GAAA,CAAC,UAAK,CAAG,EAAA,UAAA,EAAY,IAAI,CAAQ,KAAA,EAAA,GAAG,CAAI,CAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,CAAA;AAAA,0BAErD,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,IAAM,EAAA,aAAA,CAAc,WAAa,EAAA,WAAA,EAAa,KAAK,CAAA;AAAA,cACnD,EAAA,EAAI,QAAQ,GAAG,CAAA,CAAA;AAAA,cACf,IAAK,EAAA,cAAA;AAAA,cACL,GAAK,EAAA,OAAA;AAAA,cACJ,GAAG,SAAA;AAAA,aAAA;AAAA,WACN;AAAA,0BAEA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,CAAG,EAAA,UAAA;AAAA,cACH,EAAG,EAAA,MAAA;AAAA,cACH,IAAK,EAAA,MAAA;AAAA,cACL,MAAO,EAAA,OAAA;AAAA,cACP,WAAa,EAAA,EAAA;AAAA,cACb,QAAS,EAAA,gBAAA;AAAA,cACT,YAAc,EAAA,oBAAA;AAAA,aAAA;AAAA,WAChB;AAAA,0BACA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,QAAS,EAAA,gBAAA;AAAA,cACT,CAAG,EAAA,UAAA;AAAA,cACH,EAAG,EAAA,MAAA;AAAA,cACH,IAAK,EAAA,MAAA;AAAA,cACL,MAAO,EAAA,OAAA;AAAA,cACP,WAAa,EAAA,CAAA;AAAA,cACb,YAAc,EAAA,oBAAA;AAAA,aAAA;AAAA,WAChB;AAAA,SAAA;AAAA,OAAA;AAAA,KACF;AAAA,oBACA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,MAAQ,EAAA,IAAA,CAAK,GAAI,CAAA,KAAA,EAAO,MAAM,CAAI,GAAA,EAAA;AAAA,QAClC,KAAO,EAAA,IAAA,CAAK,GAAI,CAAA,KAAA,EAAO,MAAM,CAAA;AAAA,QAC7B,OAAO,EAAE,QAAA,EAAU,YAAY,IAAM,EAAA,CAAA,EAAG,KAAK,CAAE,EAAA;AAAA,QAE9C,QAAA,EAAA;AAAA,UAAU,SAAA,CAAA,CAAA,wBACR,GACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,CAAG,EAAA,IAAA,CAAK,GAAI,CAAA,KAAA,EAAO,MAAM,CAAI,GAAA,CAAA;AAAA,cAC7B,CAAA,EAAG,IAAK,CAAA,GAAA,CAAI,KAAO,EAAA,MAAM,CAAI,GAAA,IAAA,CAAK,GAAI,CAAA,KAAA,EAAO,MAAM,CAAA,GAAI,CAAI,GAAA,EAAA;AAAA,cAC3D,KAAO,EAAA;AAAA,gBACL,QAAU,EAAA,CAAA,EAAG,KAAM,CAAA,oBAAoB,KAAK,EAAE,CAAA,EAAA,CAAA;AAAA,eAChD;AAAA,cACA,UAAW,EAAA,QAAA;AAAA,cACX,iBAAmB,EAAA,SAAA;AAAA,cACnB,YAAc,EAAA,oBAAA;AAAA,cAEb,QAAA,EAAA,KAAA;AAAA,aAAA;AAAA,WAEL,EAAA,CAAA;AAAA,UAED,SAAU,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,CAAM,KAAA;AAC1B,YAAA,4BACG,GACC,EAAA,EAAA,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CACE,EAAA,CAAA,KAAM,CACF,GAAA,IAAA,CAAK,IAAI,KAAO,EAAA,MAAM,CAAI,GAAA,CAAA,GAAI,KAC9B,IAAK,CAAA,GAAA,CAAI,KAAO,EAAA,MAAM,IAAI,CAAI,GAAA,EAAA;AAAA,kBAEpC,CAAA,EAAG,KAAK,MAAS,GAAA,EAAA;AAAA,kBACjB,KAAO,EAAA,MAAA;AAAA,kBACP,MAAQ,EAAA,KAAA;AAAA,kBACR,YAAc,EAAA,oBAAA;AAAA,kBACd,IAAM,EAAA,QAAA,CAAS,WAAa,EAAA,WAAA,EAAa,KAAK,KAAK,CAAA;AAAA,iBAAA;AAAA,eACrD;AAAA,8BACA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAA,EACE,CAAM,KAAA,CAAA,GACF,IAAK,CAAA,GAAA,CAAI,OAAO,MAAM,CAAA,GAAI,IAAK,CAAA,GAAA,CAAI,KAAO,EAAA,MAAM,IAAI,CAAI,GAAA,EAAA,GACxD,IAAK,CAAA,GAAA,CAAI,KAAO,EAAA,MAAM,IAAI,IAAK,CAAA,GAAA,CAAI,KAAO,EAAA,MAAM,CAAI,GAAA,CAAA;AAAA,kBAE1D,CAAA,EAAG,UAAU,CAAI,GAAA,CAAC,IAAI,IAAK,CAAA,MAAA,GAAS,EAAK,GAAA,IAAA,CAAK,MAAS,GAAA,GAAA;AAAA,kBACvD,UAAW,EAAA,QAAA;AAAA,kBACX,iBACE,EAAA,SAAA,CAAU,CAAI,GAAA,CAAC,IAAI,MAAS,GAAA,kBAAA;AAAA,kBAG7B,QAAK,EAAA,IAAA,CAAA,KAAA;AAAA,iBAAA;AAAA,eACR;AAAA,aAAA,EAAA,EA1BM,CA2BR,CAAA,CAAA;AAAA,WAEH,CAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KACH;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/dist/widgets/thermometer/util.js

@@ -1,3 +1,5 @@
+import { noNaN } from '@apia/util';
+
 const colorGetter = (valueRanges, colorRanges, innerValue) => {
   let color = "";
   valueRanges.forEach((value, index) => {
@@ -8,7 +10,7 @@ const colorGetter = (valueRanges, colorRanges, innerValue) => {
   return color;
 };
 function getColor(valueRanges, colorRanges, value) {
-  const index = valueRanges.findIndex((range) => value <= range);
+  const index = valueRanges.findIndex((range) => noNaN(value) <= noNaN(range));
   if (index === -1) {
     return colorRanges[0];
   }
@@ -19,6 +21,7 @@ function getInnerColor(valueRanges, colorRanges, value) {
   if (index === -1) {
     return colorRanges[0];
   }
+  console.log({ colorRanges, index });
   return colorRanges[index - 1] ?? colorRanges[index];
 }
 const valueToTickPercent = (domainMax, baseValue, value) => {

package/dist/widgets/thermometer/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../src/widgets/thermometer/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":"AAAA,MAAM,WAAc,GAAA,CAClB,WACA,EAAA,WAAA,EACA,UACG,KAAA;AACH,EAAA,IAAI,KAAQ,GAAA,EAAA,CAAA;AACZ,EAAY,WAAA,CAAA,OAAA,CAAQ,CAAC,KAAA,EAAO,KAAU,KAAA;AACpC,IAAA,IAAI,SAAS,UAAc,IAAA,WAAA,CAAY,KAAQ,GAAA,CAAC,KAAK,UAAY,EAAA;AAC/D,MAAQ,KAAA,GAAA,WAAA,CAAY,QAAQ,CAAC,CAAA,CAAA;AAAA,KAC/B;AAAA,GACD,CAAA,CAAA;AACD,EAAO,OAAA,KAAA,CAAA;AACT,EAAA;AAEA,SAAS,QAAA,CAAS,WAAuB,EAAA,WAAA,EAAuB,KAAe,EAAA;AAC7E,EAAA,MAAM,QAAQ,WAAY,CAAA,SAAA,CAAU,CAAC,KAAA,KAAU,SAAS,KAAK,CAAA,CAAA;AAE7D,EAAA,IAAI,UAAU,CAAI,CAAA,EAAA;AAChB,IAAA,OAAO,YAAY,CAAC,CAAA,CAAA;AAAA,GACtB;AAEA,EAAA,OAAO,YAAY,KAAK,CAAA,CAAA;AAC1B,CAAA;AAEA,SAAS,aAAA,CACP,WACA,EAAA,WAAA,EACA,KACA,EAAA;AACA,EAAA,MAAM,QAAQ,WAAY,CAAA,SAAA,CAAU,CAAC,KAAA,KAAU,QAAQ,KAAK,CAAA,CAAA;AAE5D,EAAA,IAAI,UAAU,CAAI,CAAA,EAAA;AAChB,IAAA,OAAO,YAAY,CAAC,CAAA,CAAA;AAAA,GACtB;AAEA,EAAA,OAAO,WAAY,CAAA,KAAA,GAAQ,CAAC,CAAA,IAAK,YAAY,KAAK,CAAA,CAAA;AACpD,CAAA;AAEA,MAAM,kBAAqB,GAAA,CACzB,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;AAEhE,EAAO,OAAA,IAAA,CAAK,MAAM,UAAU,CAAA,CAAA;AAC9B;;;;"}
+{"version":3,"file":"util.js","sources":["../../../src/widgets/thermometer/util.ts"],"sourcesContent":["import { noNaN } from '@apia/util';\r\n\r\nconst colorGetter = (\r\n  valueRanges: number[],\r\n  colorRanges: string[],\r\n  innerValue: number,\r\n) => {\r\n  let color = '';\r\n  valueRanges.forEach((value, index) => {\r\n    if (value >= innerValue && valueRanges[index - 1] <= innerValue) {\r\n      color = colorRanges[index - 1];\r\n    }\r\n  });\r\n\r\n  return color;\r\n};\r\n\r\nfunction getColor(valueRanges: number[], colorRanges: string[], value: number) {\r\n  const index = valueRanges.findIndex((range) => noNaN(value) <= noNaN(range));\r\n\r\n  if (index === -1) {\r\n    return colorRanges[0];\r\n  }\r\n\r\n  return colorRanges[index];\r\n}\r\n\r\nfunction getInnerColor(\r\n  valueRanges: number[],\r\n  colorRanges: string[],\r\n  value: number,\r\n) {\r\n  const index = valueRanges.findIndex((range) => value < range);\r\n\r\n  if (index === -1) {\r\n    return colorRanges[0];\r\n  }\r\n\r\n  console.log({ colorRanges, index });\r\n  return colorRanges[index - 1] ?? colorRanges[index];\r\n}\r\n\r\nconst valueToTickPercent = (\r\n  domainMax: number,\r\n  baseValue: number,\r\n  value: number,\r\n) => {\r\n  const range = domainMax - (baseValue ?? 0);\r\n  const percentage = 100 - ((value - (baseValue ?? 0)) / range) * 100;\r\n\r\n  return Math.round(percentage);\r\n};\r\n\r\nconst valueToPercent = (\r\n  domainMax: number,\r\n  baseValue: number,\r\n  value: number,\r\n) => {\r\n  const range = domainMax - (baseValue ?? 0);\r\n  const percentage = 100 - ((value - (baseValue ?? 0)) / range) * 100;\r\n  const test = (percentage * 69) / 100;\r\n\r\n  return Math.round(test);\r\n};\r\n\r\nexport {\r\n  colorGetter,\r\n  getColor,\r\n  getInnerColor,\r\n  valueToPercent,\r\n  valueToTickPercent,\r\n};\r\n"],"names":[],"mappings":";;AAEA,MAAM,WAAc,GAAA,CAClB,WACA,EAAA,WAAA,EACA,UACG,KAAA;AACH,EAAA,IAAI,KAAQ,GAAA,EAAA,CAAA;AACZ,EAAY,WAAA,CAAA,OAAA,CAAQ,CAAC,KAAA,EAAO,KAAU,KAAA;AACpC,IAAA,IAAI,SAAS,UAAc,IAAA,WAAA,CAAY,KAAQ,GAAA,CAAC,KAAK,UAAY,EAAA;AAC/D,MAAQ,KAAA,GAAA,WAAA,CAAY,QAAQ,CAAC,CAAA,CAAA;AAAA,KAC/B;AAAA,GACD,CAAA,CAAA;AAED,EAAO,OAAA,KAAA,CAAA;AACT,EAAA;AAEA,SAAS,QAAA,CAAS,WAAuB,EAAA,WAAA,EAAuB,KAAe,EAAA;AAC7E,EAAM,MAAA,KAAA,GAAQ,WAAY,CAAA,SAAA,CAAU,CAAC,KAAA,KAAU,MAAM,KAAK,CAAA,IAAK,KAAM,CAAA,KAAK,CAAC,CAAA,CAAA;AAE3E,EAAA,IAAI,UAAU,CAAI,CAAA,EAAA;AAChB,IAAA,OAAO,YAAY,CAAC,CAAA,CAAA;AAAA,GACtB;AAEA,EAAA,OAAO,YAAY,KAAK,CAAA,CAAA;AAC1B,CAAA;AAEA,SAAS,aAAA,CACP,WACA,EAAA,WAAA,EACA,KACA,EAAA;AACA,EAAA,MAAM,QAAQ,WAAY,CAAA,SAAA,CAAU,CAAC,KAAA,KAAU,QAAQ,KAAK,CAAA,CAAA;AAE5D,EAAA,IAAI,UAAU,CAAI,CAAA,EAAA;AAChB,IAAA,OAAO,YAAY,CAAC,CAAA,CAAA;AAAA,GACtB;AAEA,EAAA,OAAA,CAAQ,GAAI,CAAA,EAAE,WAAa,EAAA,KAAA,EAAO,CAAA,CAAA;AAClC,EAAA,OAAO,WAAY,CAAA,KAAA,GAAQ,CAAC,CAAA,IAAK,YAAY,KAAK,CAAA,CAAA;AACpD,CAAA;AAEA,MAAM,kBAAqB,GAAA,CACzB,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;AAEhE,EAAO,OAAA,IAAA,CAAK,MAAM,UAAU,CAAA,CAAA;AAC9B;;;;"}

package/dist/widgets/types.d.ts

@@ -36,6 +36,71 @@ type TWidgetData = {
         Zone: TWidgetZone | TWidgetZone[];
     };
 };
+type TApiaWidgetProps = {
+    colorRanges: string[];
+    currentValue: number;
+    height: number;
+    valueRanges: number[];
+    width: number;
+    decimals?: number;
+    addBorder?: boolean;
+    addInnerWhiteBorder?: boolean;
+    backgroundColor?: string;
+    currentValueColor?: string;
+    currentValueFontSize?: string | number;
+    forceProp?: Record<string, unknown>;
+    minValue?: number;
+    maxValue?: number;
+    pointerColor?: string;
+    scaleValuesSize?: string | number;
+    ringWidth?: number;
+    ringEmptyColor?: string;
+};
+type TApiaWidgetBaseProps<T> = {
+    currentValue: number;
+    currentValueFontSize?: string | number;
+    height: number;
+    maxValue?: number;
+    minValue?: number;
+    valueRanges: number[];
+    width: number;
+} & T;
+type TApiaWidgetThermometerProps = {
+    colorRanges: string[];
+};
+type TApiaWidgetTLightProps = {
+    addBorder: boolean;
+    colorRanges: string[];
+    currentValueColor?: string;
+};
+type TApiaWidgetSpeedMeterProps = {
+    backgroundColor: string;
+    colorRanges: string[];
+    currentValueColor: string;
+    pointerColor: string;
+    scaleValuesSize: string | number;
+};
+type TApiaWidgetScaleProps = {
+    pointerColor: string;
+    scaleValuesSize: string | number;
+};
+type TApiaWidgetRingProps = {
+    colorRanges: string[];
+    currentValueColor: string;
+    ringEmptyColor: string;
+    ringWidth: number;
+};
+type TApiaWidgetOxfordProps = {
+    backgroundColor: string;
+    colorRanges: string[];
+    currentValueColor: string;
+    pointerColor: string;
+    scaleValuesSize: string | number;
+};
+type TApiaWidgetCounterProps = {
+    addBorder: boolean;
+    colorRanges: string[];
+};
 
-export type { TWidgetData, TWidgetZone };
+export type { TApiaWidgetBaseProps, TApiaWidgetCounterProps, TApiaWidgetOxfordProps, TApiaWidgetProps, TApiaWidgetRingProps, TApiaWidgetScaleProps, TApiaWidgetSpeedMeterProps, TApiaWidgetTLightProps, TApiaWidgetThermometerProps, TWidgetData, TWidgetZone };
 //# sourceMappingURL=types.d.ts.map