@apia/charts 2.0.10 → 2.0.12

package/dist/charts/chartJsRenderer/ChartComponent.js

@@ -1,9 +1,10 @@
 import { jsx } from '@apia/theme/jsx-runtime';
 import { arrayOrArray, getValueByPath } from '@apia/util';
 import { Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, BarController, BarElement, PieController, ArcElement, LineController } from 'chart.js';
-import { useMemo } from 'react';
+import { useRef, useMemo } from 'react';
 import { Chart as Chart$1 } from 'react-chartjs-2';
 import { useThemeUI } from '@apia/theme';
+import tinycolor from 'tinycolor2';
 
 Chart.register(
   CategoryScale,
@@ -37,6 +38,7 @@ const ChartComponent = (props) => {
     props
   );
   const { theme } = useThemeUI();
+  const chartRef = useRef(null);
   if (!theme.layout)
     console.error("The layout property is missing in the current theme");
   const data = useMemo(() => {
@@ -61,52 +63,59 @@ const ChartComponent = (props) => {
         const isSingle = arrayOrArray(actualProps.chartData.datasets).every(
           (dataset2) => arrayOrArray(dataset2.data).length === 1
         ) || actualProps.type === "pie";
-        return {
-          ...dataset,
-          backgroundColor: dataset.backgroundColor.map((color, i) => {
-            let schemaArray = [];
-            if (typeof color === "string") {
-              if (color in charts) {
-                const currentBackgroundStylescheme = {
-                  schema: getValueByPath(
-                    theme.colors,
-                    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                    charts[color.toLowerCase()]?.schema
-                  )
-                };
-                if (typeof currentBackgroundStylescheme.schema === "object" && currentBackgroundStylescheme.schema) {
-                  if (isSingle) {
-                    if (actualProps.type === "pie") {
-                      schemaArray = Object.values(
-                        currentBackgroundStylescheme.schema
-                      ).map((varColor) => {
-                        return window.getComputedStyle(document.documentElement).getPropertyValue(varColor.slice(4, -1));
-                      });
-                    } else {
-                      schemaArray = new Array(6).fill(
-                        Object.values(currentBackgroundStylescheme.schema)[datasetIndex % 6]
-                      ).map((varColor) => {
-                        return window.getComputedStyle(document.documentElement).getPropertyValue(varColor.slice(4, -1));
-                      });
-                    }
+        const backgroundColor = dataset.backgroundColor.map((actualColor, i) => {
+          let schemaArray = [];
+          if (typeof actualColor === "string") {
+            const color = actualColor.toLowerCase();
+            if (color in charts) {
+              const currentBackgroundStylescheme = {
+                schema: getValueByPath(
+                  theme.colors,
+                  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                  charts[color.toLowerCase()]?.schema
+                )
+              };
+              if (typeof currentBackgroundStylescheme.schema === "object" && currentBackgroundStylescheme.schema) {
+                if (isSingle) {
+                  if (actualProps.type === "pie") {
+                    schemaArray = Object.values(
+                      currentBackgroundStylescheme.schema
+                    ).map((varColor) => {
+                      return window.getComputedStyle(document.documentElement).getPropertyValue(varColor.slice(4, -1));
+                    });
                   } else {
                     schemaArray = new Array(6).fill(
-                      Object.values(currentBackgroundStylescheme.schema).map(
-                        (varColor) => {
-                          return window.getComputedStyle(document.documentElement).getPropertyValue(varColor.slice(4, -1));
-                        }
-                      )[datasetIndex % 6]
-                    );
+                      Object.values(currentBackgroundStylescheme.schema)[datasetIndex % 6]
+                    ).map((varColor) => {
+                      return window.getComputedStyle(document.documentElement).getPropertyValue(varColor.slice(4, -1));
+                    });
                   }
+                } else {
+                  schemaArray = new Array(6).fill(
+                    Object.values(currentBackgroundStylescheme.schema).map(
+                      (varColor) => {
+                        return window.getComputedStyle(document.documentElement).getPropertyValue(varColor.slice(4, -1));
+                      }
+                    )[datasetIndex % 6]
+                  );
                 }
-              } else {
-                schemaArray = [color, color, color, color, color, color];
               }
             } else {
-              return color[datasetIndex % color.length];
+              schemaArray = [color, color, color, color, color, color];
             }
-            return schemaArray[i % 6];
-          }),
+          } else {
+            return actualColor[datasetIndex % actualColor.length];
+          }
+          return schemaArray[i % 6];
+        });
+        const hoverBackgroundColor = backgroundColor.map((c) => {
+          const color = tinycolor(c);
+          return (color.isDark() ? color.lighten(30) : color.darken(30)).toHexString();
+        });
+        return {
+          ...dataset,
+          hoverBackgroundColor,
+          backgroundColor,
           borderColor: dataset.borderColor.map(
             (color, i) => {
               let schemaBorderArray = [];
@@ -156,7 +165,23 @@ const ChartComponent = (props) => {
   const options = useMemo(() => {
     return {
       plugins: {
-        legend: { position: "right", display: actualProps.showLegend },
+        legend: {
+          position: "right",
+          display: actualProps.showLegend,
+          onHover: (ev, legendItem, legend) => {
+            const chart = chartRef.current;
+            if (chart) {
+              const activeElement = {
+                datasetIndex: actualProps.type === "pie" ? 0 : legendItem.datasetIndex,
+                index: actualProps.type === "pie" ? legendItem.index : 0
+              };
+              console.log(activeElement, legendItem, legend, ev);
+              chart.setActiveElements([activeElement]);
+              chart.tooltip?.setActiveElements([activeElement], { x: 0, y: 0 });
+              chart.update();
+            }
+          }
+        },
         tooltip: {
           callbacks: {
             label(tooltipItem) {
@@ -239,7 +264,8 @@ const ChartComponent = (props) => {
       className: actualProps.chartId ?? "",
       type: actualProps.type === "waterfall" ? "bar" : actualProps.type,
       options,
-      data
+      data,
+      ref: chartRef
     }
   );
 };

package/dist/charts/chartJsRenderer/ChartComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartComponent.js","sources":["../../../src/charts/chartJsRenderer/ChartComponent.tsx"],"sourcesContent":["import { arrayOrArray, getValueByPath } from '@apia/util';\r\nimport {\r\n  ChartData,\r\n  ChartOptions,\r\n  Chart as ChartJS,\r\n  CategoryScale,\r\n  LinearScale,\r\n  PointElement,\r\n  LineElement,\r\n  Title,\r\n  Tooltip,\r\n  Legend,\r\n  BarController,\r\n  BarElement,\r\n  PieController,\r\n  ArcElement,\r\n  ChartTypeRegistry,\r\n  TooltipItem,\r\n  LineController,\r\n} from 'chart.js';\r\nimport { useMemo } from 'react';\r\nimport { Chart } from 'react-chartjs-2';\r\nimport { ColorModesScale, ThemeUIStyleObject, useThemeUI } from '@apia/theme';\r\nimport { IChartStylesSchemes } from '../types';\r\n\r\nChartJS.register(\r\n  CategoryScale,\r\n  LinearScale,\r\n  PointElement,\r\n  LineElement,\r\n  Title,\r\n  Tooltip,\r\n  Legend,\r\n  BarController,\r\n  BarElement,\r\n  PieController,\r\n  ArcElement,\r\n  LineController,\r\n);\r\n\r\nexport type TChartData = {\r\n  chartData: ChartData;\r\n  showLegend?: boolean;\r\n  showValues?: boolean;\r\n  showXAxisValues?: boolean;\r\n  showYAxisValues?: boolean;\r\n  showTable?: boolean;\r\n  type:\r\n    | 'bar'\r\n    | 'line'\r\n    | 'scatter'\r\n    | 'bubble'\r\n    | 'pie'\r\n    | 'doughnut'\r\n    | 'polarArea'\r\n    | 'radar'\r\n    | 'waterfall';\r\n  indexAxis?: 'x' | 'y';\r\n  xAxisTitle?: string;\r\n  yAxisTitle?: string;\r\n  id?: string;\r\n  chartId?: string;\r\n  aspectRatio?: number;\r\n};\r\n\r\nexport type TDataset = {\r\n  backgroundColor?: string | string[];\r\n  borderColor?: string | string[];\r\n  borderWidth?: number;\r\n  label?: string;\r\n  data: number[] | [number, number][];\r\n}[];\r\n\r\nexport const ChartComponent = (props: TChartData) => {\r\n  const actualProps: TChartData = Object.assign(\r\n    {\r\n      chartData: { datasets: [{ data: [{ x: 0, y: 0 }] }] },\r\n      type: 'bar',\r\n      indexAxis: 'x',\r\n      showLegend: true,\r\n      showValues: true,\r\n      showXAxisValues: true,\r\n      showYAxisValues: true,\r\n      showTable: true,\r\n      xAxisTitle: '',\r\n      yAxisTitle: '',\r\n      aspectRatio: 2.5,\r\n    },\r\n    props,\r\n  );\r\n  const { theme } = useThemeUI();\r\n\r\n  if (!theme.layout)\r\n    console.error('The layout property is missing in the current theme');\r\n\r\n  const data: ChartData = useMemo(() => {\r\n    const charts = ((theme.layout as Record<string, ThemeUIStyleObject>)\r\n      ?.charts ?? {}) as IChartStylesSchemes;\r\n    return {\r\n      datasets: (actualProps.type === 'waterfall'\r\n        ? arrayOrArray(actualProps.chartData.datasets).map((dataset) => {\r\n            let sum = 0;\r\n            const newData = dataset.data.map<[number, number]>((dataValue) => {\r\n              if (typeof dataValue === 'number') {\r\n                const currentValue = sum;\r\n                sum += dataValue;\r\n                return [currentValue, sum] as [number, number];\r\n              } else {\r\n                return dataValue as [number, number];\r\n              }\r\n            });\r\n\r\n            return {\r\n              ...dataset,\r\n              data: newData,\r\n            };\r\n          })\r\n        : actualProps.chartData.datasets\r\n      ).map((dataset, datasetIndex) => {\r\n        const isSingle =\r\n          arrayOrArray(actualProps.chartData.datasets).every(\r\n            (dataset) => arrayOrArray(dataset.data).length === 1,\r\n          ) || actualProps.type === 'pie';\r\n\r\n        return {\r\n          ...dataset,\r\n          backgroundColor: (\r\n            dataset.backgroundColor as string[] | string[][]\r\n          ).map((color, i) => {\r\n            let schemaArray: string[] = [];\r\n            if (typeof color === 'string') {\r\n              if (color in charts) {\r\n                const currentBackgroundStylescheme: {\r\n                  schema: Record<string, string>;\r\n                } = {\r\n                  schema: getValueByPath(\r\n                    theme.colors as ColorModesScale,\r\n                    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\r\n                    charts[color.toLowerCase()]?.schema as string,\r\n                  ) as Record<string, string>,\r\n                };\r\n\r\n                if (\r\n                  typeof currentBackgroundStylescheme.schema === 'object' &&\r\n                  currentBackgroundStylescheme.schema\r\n                ) {\r\n                  if (isSingle) {\r\n                    if (actualProps.type === 'pie') {\r\n                      schemaArray = Object.values(\r\n                        currentBackgroundStylescheme.schema,\r\n                      ).map((varColor) => {\r\n                        return window\r\n                          .getComputedStyle(document.documentElement)\r\n                          .getPropertyValue(varColor.slice(4, -1));\r\n                      });\r\n                    } else {\r\n                      schemaArray = new Array<string>(6)\r\n                        .fill(\r\n                          Object.values(currentBackgroundStylescheme.schema)[\r\n                            datasetIndex % 6\r\n                          ],\r\n                        )\r\n                        .map((varColor) => {\r\n                          return window\r\n                            .getComputedStyle(document.documentElement)\r\n                            .getPropertyValue(varColor.slice(4, -1));\r\n                        });\r\n                    }\r\n                  } else {\r\n                    schemaArray = new Array<string>(6).fill(\r\n                      Object.values(currentBackgroundStylescheme.schema).map(\r\n                        (varColor) => {\r\n                          return window\r\n                            .getComputedStyle(document.documentElement)\r\n                            .getPropertyValue(varColor.slice(4, -1));\r\n                        },\r\n                      )[datasetIndex % 6],\r\n                    );\r\n                  }\r\n                }\r\n              } else {\r\n                schemaArray = [color, color, color, color, color, color];\r\n              }\r\n            } else {\r\n              return color[datasetIndex % color.length];\r\n            }\r\n\r\n            return schemaArray[i % 6];\r\n          }),\r\n          borderColor: (dataset.borderColor as string[] | string[][]).map(\r\n            (color, i) => {\r\n              let schemaBorderArray: string[] = [];\r\n              if (typeof color === 'string') {\r\n                if (color in charts) {\r\n                  const currentBorderStylescheme: {\r\n                    schema: Record<string, string>;\r\n                  } = {\r\n                    schema: getValueByPath(\r\n                      theme.colors as ColorModesScale,\r\n                      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\r\n                      charts[color.toLowerCase()]?.schema as string,\r\n                    ) as Record<string, string>,\r\n                  };\r\n\r\n                  if (\r\n                    typeof currentBorderStylescheme.schema === 'object' &&\r\n                    currentBorderStylescheme.schema\r\n                  ) {\r\n                    schemaBorderArray = Object.values(\r\n                      currentBorderStylescheme.schema,\r\n                    ).map((varColor) => {\r\n                      return window\r\n                        .getComputedStyle(document.documentElement)\r\n                        .getPropertyValue(varColor.slice(4, -1));\r\n                    });\r\n                  }\r\n                } else {\r\n                  schemaBorderArray = [\r\n                    color,\r\n                    color,\r\n                    color,\r\n                    color,\r\n                    color,\r\n                    color,\r\n                  ];\r\n                }\r\n              } else {\r\n                return color[datasetIndex % color.length];\r\n              }\r\n              return schemaBorderArray[i % 6];\r\n            },\r\n          ),\r\n        };\r\n      }),\r\n      labels: actualProps.chartData.labels,\r\n    };\r\n  }, [\r\n    actualProps.chartData.datasets,\r\n    actualProps.chartData.labels,\r\n    actualProps.type,\r\n    theme.colors,\r\n    theme.layout,\r\n  ]);\r\n\r\n  const options: ChartOptions = useMemo(() => {\r\n    return {\r\n      plugins: {\r\n        legend: { position: 'right', display: actualProps.showLegend },\r\n        tooltip: {\r\n          callbacks: {\r\n            label(tooltipItem: TooltipItem<keyof ChartTypeRegistry>) {\r\n              const XLabel = tooltipItem.dataset.label ?? '';\r\n              let YValue = tooltipItem.formattedValue;\r\n              if (isNaN(parseFloat(YValue))) {\r\n                const arrayValue: [number, number] = tooltipItem.raw as [\r\n                  number,\r\n                  number,\r\n                ];\r\n                const realValue = arrayValue[1] - arrayValue[0];\r\n                YValue = `${realValue}`;\r\n              }\r\n              let finalString = '';\r\n              if (actualProps.showLegend || actualProps.type === 'pie') {\r\n                finalString += XLabel;\r\n                if (actualProps.showValues) {\r\n                  finalString += ': ' + YValue;\r\n                }\r\n              } else if (actualProps.showValues) {\r\n                finalString += YValue;\r\n              }\r\n              return finalString;\r\n            },\r\n            title(tooltipItems: TooltipItem<keyof ChartTypeRegistry>[]) {\r\n              if (\r\n                (actualProps.type !== 'pie' &&\r\n                  !actualProps.showXAxisValues &&\r\n                  actualProps.indexAxis === 'x') ||\r\n                (actualProps.type !== 'pie' &&\r\n                  !actualProps.showYAxisValues &&\r\n                  actualProps.indexAxis === 'y') ||\r\n                (actualProps.type === 'pie' && !actualProps.showLegend)\r\n              ) {\r\n                return '';\r\n              }\r\n              return tooltipItems[0].label;\r\n            },\r\n          },\r\n          enabled:\r\n            (actualProps.indexAxis === 'y'\r\n              ? actualProps.showYAxisValues\r\n              : actualProps.showXAxisValues) ||\r\n            actualProps.showValues ||\r\n            actualProps.showLegend,\r\n        },\r\n      },\r\n      aspectRatio: actualProps.aspectRatio,\r\n      indexAxis: actualProps.indexAxis,\r\n      scales: {\r\n        x: {\r\n          display: actualProps.type !== 'pie',\r\n          title: {\r\n            display: actualProps.showXAxisValues,\r\n            text:\r\n              actualProps.indexAxis === 'y'\r\n                ? actualProps.yAxisTitle\r\n                : actualProps.xAxisTitle,\r\n          },\r\n          ticks: {\r\n            display: !!actualProps.showXAxisValues,\r\n          },\r\n          grid: {\r\n            display: actualProps.showTable,\r\n          },\r\n        },\r\n        y: {\r\n          axis: (actualProps.indexAxis === 'y' ? 'x' : 'y') as 'x' | 'y' | 'r',\r\n          display: actualProps.type !== 'pie',\r\n          title: {\r\n            display: actualProps.showYAxisValues,\r\n            text:\r\n              actualProps.indexAxis === 'y'\r\n                ? actualProps.xAxisTitle\r\n                : actualProps.yAxisTitle,\r\n          },\r\n          ticks: {\r\n            display: !!actualProps.showYAxisValues,\r\n          },\r\n          grid: {\r\n            display: actualProps.showTable,\r\n          },\r\n        },\r\n      },\r\n    };\r\n  }, [\r\n    actualProps.aspectRatio,\r\n    actualProps.indexAxis,\r\n    actualProps.showLegend,\r\n    actualProps.showTable,\r\n    actualProps.showValues,\r\n    actualProps.showXAxisValues,\r\n    actualProps.showYAxisValues,\r\n    actualProps.type,\r\n    actualProps.xAxisTitle,\r\n    actualProps.yAxisTitle,\r\n  ]);\r\n\r\n  return (\r\n    <Chart\r\n      id={actualProps.id ?? undefined}\r\n      className={actualProps.chartId ?? ''}\r\n      type={actualProps.type === 'waterfall' ? 'bar' : actualProps.type}\r\n      options={options}\r\n      data={data}\r\n    />\r\n  );\r\n};\r\n"],"names":["ChartJS","dataset","Chart"],"mappings":"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"}
+{"version":3,"file":"ChartComponent.js","sources":["../../../src/charts/chartJsRenderer/ChartComponent.tsx"],"sourcesContent":["import { arrayOrArray, getValueByPath } from '@apia/util';\r\nimport {\r\n  ChartData,\r\n  ChartOptions,\r\n  Chart as ChartJS,\r\n  CategoryScale,\r\n  LinearScale,\r\n  PointElement,\r\n  LineElement,\r\n  Title,\r\n  Tooltip,\r\n  Legend,\r\n  BarController,\r\n  BarElement,\r\n  PieController,\r\n  ArcElement,\r\n  ChartTypeRegistry,\r\n  TooltipItem,\r\n  LineController,\r\n} from 'chart.js';\r\nimport { useMemo, useRef } from 'react';\r\nimport { Chart } from 'react-chartjs-2';\r\nimport { ColorModesScale, ThemeUIStyleObject, useThemeUI } from '@apia/theme';\r\nimport { IChartStylesSchemes } from '../types';\r\nimport tinycolor from 'tinycolor2';\r\n\r\nChartJS.register(\r\n  CategoryScale,\r\n  LinearScale,\r\n  PointElement,\r\n  LineElement,\r\n  Title,\r\n  Tooltip,\r\n  Legend,\r\n  BarController,\r\n  BarElement,\r\n  PieController,\r\n  ArcElement,\r\n  LineController,\r\n);\r\n\r\nexport type TChartData = {\r\n  chartData: ChartData;\r\n  showLegend?: boolean;\r\n  showValues?: boolean;\r\n  showXAxisValues?: boolean;\r\n  showYAxisValues?: boolean;\r\n  showTable?: boolean;\r\n  type:\r\n    | 'bar'\r\n    | 'line'\r\n    | 'scatter'\r\n    | 'bubble'\r\n    | 'pie'\r\n    | 'doughnut'\r\n    | 'polarArea'\r\n    | 'radar'\r\n    | 'waterfall';\r\n  indexAxis?: 'x' | 'y';\r\n  xAxisTitle?: string;\r\n  yAxisTitle?: string;\r\n  id?: string;\r\n  chartId?: string;\r\n  aspectRatio?: number;\r\n};\r\n\r\nexport type TDataset = {\r\n  backgroundColor?: string | string[];\r\n  borderColor?: string | string[];\r\n  borderWidth?: number;\r\n  label?: string;\r\n  data: number[] | [number, number][];\r\n}[];\r\n\r\nexport const ChartComponent = (props: TChartData) => {\r\n  const actualProps: TChartData = Object.assign(\r\n    {\r\n      chartData: { datasets: [{ data: [{ x: 0, y: 0 }] }] },\r\n      type: 'bar',\r\n      indexAxis: 'x',\r\n      showLegend: true,\r\n      showValues: true,\r\n      showXAxisValues: true,\r\n      showYAxisValues: true,\r\n      showTable: true,\r\n      xAxisTitle: '',\r\n      yAxisTitle: '',\r\n      aspectRatio: 2.5,\r\n    },\r\n    props,\r\n  );\r\n  const { theme } = useThemeUI();\r\n  const chartRef = useRef<ChartJS>(null);\r\n\r\n  if (!theme.layout)\r\n    console.error('The layout property is missing in the current theme');\r\n\r\n  const data: ChartData = useMemo(() => {\r\n    const charts = ((theme.layout as Record<string, ThemeUIStyleObject>)\r\n      ?.charts ?? {}) as IChartStylesSchemes;\r\n\r\n    return {\r\n      datasets: (actualProps.type === 'waterfall'\r\n        ? arrayOrArray(actualProps.chartData.datasets).map((dataset) => {\r\n            let sum = 0;\r\n            const newData = dataset.data.map<[number, number]>((dataValue) => {\r\n              if (typeof dataValue === 'number') {\r\n                const currentValue = sum;\r\n                sum += dataValue;\r\n                return [currentValue, sum] as [number, number];\r\n              } else {\r\n                return dataValue as [number, number];\r\n              }\r\n            });\r\n\r\n            return {\r\n              ...dataset,\r\n              data: newData,\r\n            };\r\n          })\r\n        : actualProps.chartData.datasets\r\n      ).map((dataset, datasetIndex) => {\r\n        const isSingle =\r\n          arrayOrArray(actualProps.chartData.datasets).every(\r\n            (dataset) => arrayOrArray(dataset.data).length === 1,\r\n          ) || actualProps.type === 'pie';\r\n\r\n        const backgroundColor = (\r\n          dataset.backgroundColor as string[] | string[][]\r\n        ).map((actualColor, i) => {\r\n          let schemaArray: string[] = [];\r\n          if (typeof actualColor === 'string') {\r\n            const color = actualColor.toLowerCase();\r\n            if (color in charts) {\r\n              const currentBackgroundStylescheme: {\r\n                schema: Record<string, string>;\r\n              } = {\r\n                schema: getValueByPath(\r\n                  theme.colors as ColorModesScale,\r\n                  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\r\n                  charts[color.toLowerCase()]?.schema as string,\r\n                ) as Record<string, string>,\r\n              };\r\n\r\n              if (\r\n                typeof currentBackgroundStylescheme.schema === 'object' &&\r\n                currentBackgroundStylescheme.schema\r\n              ) {\r\n                if (isSingle) {\r\n                  if (actualProps.type === 'pie') {\r\n                    schemaArray = Object.values(\r\n                      currentBackgroundStylescheme.schema,\r\n                    ).map((varColor) => {\r\n                      return window\r\n                        .getComputedStyle(document.documentElement)\r\n                        .getPropertyValue(varColor.slice(4, -1));\r\n                    });\r\n                  } else {\r\n                    schemaArray = new Array<string>(6)\r\n                      .fill(\r\n                        Object.values(currentBackgroundStylescheme.schema)[\r\n                          datasetIndex % 6\r\n                        ],\r\n                      )\r\n                      .map((varColor) => {\r\n                        return window\r\n                          .getComputedStyle(document.documentElement)\r\n                          .getPropertyValue(varColor.slice(4, -1));\r\n                      });\r\n                  }\r\n                } else {\r\n                  schemaArray = new Array<string>(6).fill(\r\n                    Object.values(currentBackgroundStylescheme.schema).map(\r\n                      (varColor) => {\r\n                        return window\r\n                          .getComputedStyle(document.documentElement)\r\n                          .getPropertyValue(varColor.slice(4, -1));\r\n                      },\r\n                    )[datasetIndex % 6],\r\n                  );\r\n                }\r\n              }\r\n            } else {\r\n              schemaArray = [color, color, color, color, color, color];\r\n            }\r\n          } else {\r\n            return actualColor[datasetIndex % actualColor.length];\r\n          }\r\n\r\n          return schemaArray[i % 6];\r\n        });\r\n\r\n        const hoverBackgroundColor = backgroundColor.map((c) => {\r\n          const color = tinycolor(c);\r\n\r\n          return (\r\n            color.isDark() ? color.lighten(30) : color.darken(30)\r\n          ).toHexString();\r\n        });\r\n\r\n        return {\r\n          ...dataset,\r\n          hoverBackgroundColor,\r\n          backgroundColor,\r\n          borderColor: (dataset.borderColor as string[] | string[][]).map(\r\n            (color, i) => {\r\n              let schemaBorderArray: string[] = [];\r\n              if (typeof color === 'string') {\r\n                if (color in charts) {\r\n                  const currentBorderStylescheme: {\r\n                    schema: Record<string, string>;\r\n                  } = {\r\n                    schema: getValueByPath(\r\n                      theme.colors as ColorModesScale,\r\n                      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\r\n                      charts[color.toLowerCase()]?.schema as string,\r\n                    ) as Record<string, string>,\r\n                  };\r\n\r\n                  if (\r\n                    typeof currentBorderStylescheme.schema === 'object' &&\r\n                    currentBorderStylescheme.schema\r\n                  ) {\r\n                    schemaBorderArray = Object.values(\r\n                      currentBorderStylescheme.schema,\r\n                    ).map((varColor) => {\r\n                      return window\r\n                        .getComputedStyle(document.documentElement)\r\n                        .getPropertyValue(varColor.slice(4, -1));\r\n                    });\r\n                  }\r\n                } else {\r\n                  schemaBorderArray = [\r\n                    color,\r\n                    color,\r\n                    color,\r\n                    color,\r\n                    color,\r\n                    color,\r\n                  ];\r\n                }\r\n              } else {\r\n                return color[datasetIndex % color.length];\r\n              }\r\n              return schemaBorderArray[i % 6];\r\n            },\r\n          ),\r\n        };\r\n      }),\r\n      labels: actualProps.chartData.labels,\r\n    };\r\n  }, [\r\n    actualProps.chartData.datasets,\r\n    actualProps.chartData.labels,\r\n    actualProps.type,\r\n    theme.colors,\r\n    theme.layout,\r\n  ]);\r\n\r\n  const options: ChartOptions = useMemo(() => {\r\n    return {\r\n      plugins: {\r\n        legend: {\r\n          position: 'right',\r\n          display: actualProps.showLegend,\r\n          onHover: (ev, legendItem, legend) => {\r\n            const chart = chartRef.current;\r\n            if (chart) {\r\n              const activeElement = {\r\n                datasetIndex:\r\n                  actualProps.type === 'pie' ? 0 : legendItem.datasetIndex!,\r\n                index: actualProps.type === 'pie' ? legendItem.index! : 0,\r\n              };\r\n              console.log(activeElement, legendItem, legend, ev);\r\n\r\n              chart.setActiveElements([activeElement]); // To show thick border\r\n              chart.tooltip?.setActiveElements([activeElement], { x: 0, y: 0 });\r\n              chart.update();\r\n            }\r\n          },\r\n        },\r\n        tooltip: {\r\n          callbacks: {\r\n            label(tooltipItem: TooltipItem<keyof ChartTypeRegistry>) {\r\n              const XLabel = tooltipItem.dataset.label ?? '';\r\n              let YValue = tooltipItem.formattedValue;\r\n              if (isNaN(parseFloat(YValue))) {\r\n                const arrayValue: [number, number] = tooltipItem.raw as [\r\n                  number,\r\n                  number,\r\n                ];\r\n                const realValue = arrayValue[1] - arrayValue[0];\r\n                YValue = `${realValue}`;\r\n              }\r\n              let finalString = '';\r\n              if (actualProps.showLegend || actualProps.type === 'pie') {\r\n                finalString += XLabel;\r\n                if (actualProps.showValues) {\r\n                  finalString += ': ' + YValue;\r\n                }\r\n              } else if (actualProps.showValues) {\r\n                finalString += YValue;\r\n              }\r\n              return finalString;\r\n            },\r\n            title(tooltipItems: TooltipItem<keyof ChartTypeRegistry>[]) {\r\n              if (\r\n                (actualProps.type !== 'pie' &&\r\n                  !actualProps.showXAxisValues &&\r\n                  actualProps.indexAxis === 'x') ||\r\n                (actualProps.type !== 'pie' &&\r\n                  !actualProps.showYAxisValues &&\r\n                  actualProps.indexAxis === 'y') ||\r\n                (actualProps.type === 'pie' && !actualProps.showLegend)\r\n              ) {\r\n                return '';\r\n              }\r\n              return tooltipItems[0].label;\r\n            },\r\n          },\r\n          enabled:\r\n            (actualProps.indexAxis === 'y'\r\n              ? actualProps.showYAxisValues\r\n              : actualProps.showXAxisValues) ||\r\n            actualProps.showValues ||\r\n            actualProps.showLegend,\r\n        },\r\n      },\r\n      aspectRatio: actualProps.aspectRatio,\r\n      indexAxis: actualProps.indexAxis,\r\n      scales: {\r\n        x: {\r\n          display: actualProps.type !== 'pie',\r\n          title: {\r\n            display: actualProps.showXAxisValues,\r\n            text:\r\n              actualProps.indexAxis === 'y'\r\n                ? actualProps.yAxisTitle\r\n                : actualProps.xAxisTitle,\r\n          },\r\n          ticks: {\r\n            display: !!actualProps.showXAxisValues,\r\n          },\r\n          grid: {\r\n            display: actualProps.showTable,\r\n          },\r\n        },\r\n        y: {\r\n          axis: (actualProps.indexAxis === 'y' ? 'x' : 'y') as 'x' | 'y' | 'r',\r\n          display: actualProps.type !== 'pie',\r\n          title: {\r\n            display: actualProps.showYAxisValues,\r\n            text:\r\n              actualProps.indexAxis === 'y'\r\n                ? actualProps.xAxisTitle\r\n                : actualProps.yAxisTitle,\r\n          },\r\n          ticks: {\r\n            display: !!actualProps.showYAxisValues,\r\n          },\r\n          grid: {\r\n            display: actualProps.showTable,\r\n          },\r\n        },\r\n      },\r\n    };\r\n  }, [\r\n    actualProps.aspectRatio,\r\n    actualProps.indexAxis,\r\n    actualProps.showLegend,\r\n    actualProps.showTable,\r\n    actualProps.showValues,\r\n    actualProps.showXAxisValues,\r\n    actualProps.showYAxisValues,\r\n    actualProps.type,\r\n    actualProps.xAxisTitle,\r\n    actualProps.yAxisTitle,\r\n  ]);\r\n\r\n  return (\r\n    <Chart\r\n      id={actualProps.id ?? undefined}\r\n      className={actualProps.chartId ?? ''}\r\n      type={actualProps.type === 'waterfall' ? 'bar' : actualProps.type}\r\n      options={options}\r\n      data={data}\r\n      ref={chartRef}\r\n    />\r\n  );\r\n};\r\n"],"names":["ChartJS","dataset","Chart"],"mappings":"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"}

package/dist/charts/types.d.ts

@@ -34,7 +34,7 @@ type TApiaChartColumn = {
     name: string;
 };
 type TApiaChartDefinition = {
-    chartType?: 'barH2D' | 'barV2D' | 'linear' | 'waterfall' | 'pie2D';
+    chartType?: 'barH2D' | 'barV2D' | 'linear' | 'waterfall' | 'pie2D' | 'pie3D';
     axisXTitle?: string;
     axisYTitle?: string;
     aspectRatio?: number;

package/dist/widgets/counter/Counter.js

@@ -13,7 +13,9 @@ const Counter = ({
   valueRanges,
   maxValue,
   minValue,
-  currentValueFontSize
+  currentValueFontSize,
+  valueDecimals,
+  valueType
 }) => {
   const [value, setValue] = useState(noNaN(currentValue) ?? 0);
   const actualWidth = (currentValueFontSize ?? 80) * 3 * 0.8;
@@ -47,7 +49,11 @@ const Counter = ({
           domainMin,
           domainMax
         );
-        setValue(Math.round(step));
+        let factor = Math.pow(10, valueDecimals);
+        if (valueType === 0 || valueType === "0") {
+          factor = 1;
+        }
+        setValue(Math.round(step * factor) / factor);
       },
       () => {
         lastCurrentValue.current = noNaN(currentValue);
@@ -84,7 +90,7 @@ const Counter = ({
         height: actualWidth,
         width: actualWidth,
         style: { position: "absolute", left: 0, top: 0 },
-        children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsxs(
           "text",
           {
             x: actualWidth / 2,
@@ -96,7 +102,10 @@ const Counter = ({
             },
             alignmentBaseline: "central",
             fill: getColor(value),
-            children: value
+            children: [
+              noNaN(value).toFixed(noNaN(valueDecimals)),
+              valueType === "2" || valueType === 2 ? "%" : ""
+            ]
           }
         )
       }

package/dist/widgets/counter/Counter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Counter.js","sources":["../../../src/widgets/counter/Counter.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\r\nimport { useGauge } from 'use-gauge';\r\nimport { TApiaWidgetBaseProps, TApiaWidgetCounterProps } 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 Counter = ({\r\n  addBorder = false,\r\n  colorRanges,\r\n  currentValue,\r\n  valueRanges,\r\n  maxValue,\r\n  minValue,\r\n  currentValueFontSize,\r\n}: TApiaWidgetBaseProps<TApiaWidgetCounterProps>) => {\r\n  const [value, setValue] = useState(noNaN(currentValue) ?? 0);\r\n  const actualWidth = ((currentValueFontSize as number) ?? 80) * 3 * 0.8;\r\n  const diameter = actualWidth;\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  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 - 1] ?? colorRanges[index];\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        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\r\n  return (\r\n    <Box sx={{ position: 'relative' }} className=\"widgetContainer__Counter\">\r\n      <svg\r\n        {...gauge.getSVGProps()}\r\n        height={actualWidth}\r\n        width={actualWidth}\r\n        viewBox={undefined}\r\n      >\r\n        <g id=\"arcs\">\r\n          {addBorder && `${value}`.length < 4 && (\r\n            <ellipse\r\n              cx={actualWidth / 2}\r\n              cy={actualWidth / 2}\r\n              rx={actualWidth / 2 - 5}\r\n              ry={actualWidth / 2 - 5}\r\n              stroke=\"gray\"\r\n              opacity=\"0.2\"\r\n              fill=\"none\"\r\n              strokeLinecap=\"round\"\r\n              strokeWidth={2}\r\n            />\r\n          )}\r\n        </g>\r\n      </svg>\r\n      <svg\r\n        height={actualWidth}\r\n        width={actualWidth}\r\n        style={{ position: 'absolute', left: 0, top: 0 }}\r\n      >\r\n        <text\r\n          x={actualWidth / 2}\r\n          y={actualWidth / 2 - 5}\r\n          textAnchor=\"middle\"\r\n          style={{\r\n            fontSize: `${currentValueFontSize ?? 80}px`,\r\n            transition: 'fill 0.5s',\r\n          }}\r\n          alignmentBaseline=\"central\"\r\n          fill={getColor(value)}\r\n        >\r\n          {value}\r\n        </text>\r\n      </svg>\r\n    </Box>\r\n  );\r\n};\r\n"],"names":["value"],"mappings":"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"}
+{"version":3,"file":"Counter.js","sources":["../../../src/widgets/counter/Counter.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\r\nimport { useGauge } from 'use-gauge';\r\nimport { TApiaWidgetBaseProps, TApiaWidgetCounterProps } 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 Counter = ({\r\n  addBorder = false,\r\n  colorRanges,\r\n  currentValue,\r\n  valueRanges,\r\n  maxValue,\r\n  minValue,\r\n  currentValueFontSize,\r\n  valueDecimals,\r\n  valueType,\r\n}: TApiaWidgetBaseProps<TApiaWidgetCounterProps>) => {\r\n  const [value, setValue] = useState(noNaN(currentValue) ?? 0);\r\n  const actualWidth = ((currentValueFontSize as number) ?? 80) * 3 * 0.8;\r\n  const diameter = actualWidth;\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  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 - 1] ?? colorRanges[index];\r\n  }\r\n  const lastCurrentValue = useRef(0);\r\n  useEffect(() => {\r\n    const difference = noNaN(currentValue) - lastCurrentValue.current;\r\n    return animate(\r\n      500,\r\n      (progress) => {\r\n        const step = addBoundary(\r\n          difference * progress + lastCurrentValue.current,\r\n          domainMin,\r\n          domainMax,\r\n        );\r\n        let factor = Math.pow(10, valueDecimals);\r\n        if (valueType === 0 || valueType === '0') {\r\n          factor = 1;\r\n        }\r\n        setValue(Math.round(step * factor) / factor);\r\n      },\r\n      () => {\r\n        lastCurrentValue.current = noNaN(currentValue);\r\n      },\r\n    );\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [noNaN(currentValue)]);\r\n\r\n  return (\r\n    <Box sx={{ position: 'relative' }} className=\"widgetContainer__Counter\">\r\n      <svg\r\n        {...gauge.getSVGProps()}\r\n        height={actualWidth}\r\n        width={actualWidth}\r\n        viewBox={undefined}\r\n      >\r\n        <g id=\"arcs\">\r\n          {addBorder && `${value}`.length < 4 && (\r\n            <ellipse\r\n              cx={actualWidth / 2}\r\n              cy={actualWidth / 2}\r\n              rx={actualWidth / 2 - 5}\r\n              ry={actualWidth / 2 - 5}\r\n              stroke=\"gray\"\r\n              opacity=\"0.2\"\r\n              fill=\"none\"\r\n              strokeLinecap=\"round\"\r\n              strokeWidth={2}\r\n            />\r\n          )}\r\n        </g>\r\n      </svg>\r\n      <svg\r\n        height={actualWidth}\r\n        width={actualWidth}\r\n        style={{ position: 'absolute', left: 0, top: 0 }}\r\n      >\r\n        <text\r\n          x={actualWidth / 2}\r\n          y={actualWidth / 2 - 5}\r\n          textAnchor=\"middle\"\r\n          style={{\r\n            fontSize: `${currentValueFontSize ?? 80}px`,\r\n            transition: 'fill 0.5s',\r\n          }}\r\n          alignmentBaseline=\"central\"\r\n          fill={getColor(value)}\r\n        >\r\n          {noNaN(value).toFixed(noNaN(valueDecimals))}\r\n          {valueType === '2' || valueType === 2 ? '%' : ''}\r\n        </text>\r\n      </svg>\r\n    </Box>\r\n  );\r\n};\r\n"],"names":["value"],"mappings":"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"}

package/dist/widgets/oxford/Oxford.js

@@ -19,7 +19,9 @@ const Oxford = ({
   pointerColor,
   scaleValuesSize,
   valueRanges,
-  width
+  width,
+  valueDecimals,
+  valueType
 }) => {
   const value = currentValue;
   const diameter = Math.min(height, width);
@@ -223,7 +225,7 @@ const Oxford = ({
           ),
           /* @__PURE__ */ jsx("circle", { fill: "white", ...needle.base, r: 4 })
         ] }),
-        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
           "text",
           {
             textAnchor: "middle",
@@ -231,7 +233,10 @@ const Oxford = ({
             y: diameter / 5,
             style: { fontSize: `${currentValueFontSize ?? 30}px` },
             fill: currentValueColor,
-            children: value
+            children: [
+              noNaN(value).toFixed(noNaN(valueDecimals)),
+              valueType === "2" || valueType === 2 ? "%" : ""
+            ]
           }
         ) })
       ]

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

package/dist/widgets/ring/Ring.js

@@ -14,12 +14,15 @@ const Ring = ({
   height,
   valueRanges,
   ringEmptyColor,
-  ringWidth,
+  ringWidth: incommingRingWidth,
   width,
   currentValueColor,
-  currentValueFontSize
+  currentValueFontSize,
+  valueDecimals,
+  valueType
 }) => {
-  const [value, setValue] = useState(currentValue);
+  const ringWidth = (incommingRingWidth - 0.05) * 50;
+  const [value, setValue] = useState(noNaN(currentValue));
   const diameter = Math.min(height, width);
   const offset = 20;
   const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
@@ -33,7 +36,7 @@ const Ring = ({
   });
   const lastCurrentValue = useRef(0);
   useEffect(() => {
-    const difference = currentValue - lastCurrentValue.current;
+    const difference = noNaN(currentValue) - lastCurrentValue.current;
     return animate(
       500,
       (progress) => {
@@ -42,10 +45,14 @@ const Ring = ({
           domainMin,
           domainMax
         );
-        setValue(Math.round(step));
+        let factor = Math.pow(10, valueDecimals);
+        if (valueType === 0 || valueType === "0") {
+          factor = 1;
+        }
+        setValue(Math.round(step * factor) / factor);
       },
       () => {
-        lastCurrentValue.current = currentValue;
+        lastCurrentValue.current = noNaN(currentValue);
       }
     );
   }, [currentValue]);
@@ -104,14 +111,17 @@ const Ring = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
           "text",
           {
             textAnchor: "middle",
             style: { fontSize: `${currentValueFontSize ?? 30}px` },
             alignmentBaseline: "central",
             color: currentValueColor,
-            children: value
+            children: [
+              noNaN(value).toFixed(noNaN(valueDecimals)),
+              valueType === "2" || valueType === 2 ? "%" : ""
+            ]
           }
         ) })
       ]

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

package/dist/widgets/scale/Scale.js

@@ -15,7 +15,9 @@ const Scale = ({
   pointerColor,
   scaleValuesSize,
   valueRanges,
-  width
+  width,
+  valueDecimals,
+  valueType
 }) => {
   const allTicks = false;
   const value = currentValue;
@@ -127,13 +129,16 @@ const Scale = ({
           ),
           /* @__PURE__ */ jsx("circle", { fill: "white", ...needle.base, r: 4 })
         ] }),
-        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
           "text",
           {
             textAnchor: "middle",
             style: { fontSize: `${currentValueFontSize ?? 30}px` },
             y: -diameter / 4 + 20,
-            children: value
+            children: [
+              noNaN(value).toFixed(noNaN(valueDecimals)),
+              valueType === "2" || valueType === 2 ? "%" : ""
+            ]
           }
         ) })
       ]

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';\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":"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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  valueDecimals,\r\n  valueType,\r\n}: TApiaWidgetBaseProps<TApiaWidgetScaleProps>) => {\r\n  const allTicks = false;\r\n  const value = currentValue;\r\n  const diameter = Math.min(height, width);\r\n  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];\r\n  const domainMin = noNaN(minValue) ?? valueRanges[0];\r\n  const offset = 20;\r\n  const gauge = useGauge({\r\n    domain: [domainMin, domainMax],\r\n    startAngle: START_ANGLE,\r\n    endAngle: END_ANGLE,\r\n    numTicks: 10 + 1,\r\n    diameter: diameter,\r\n  });\r\n  const gauge2 = useGauge({\r\n    domain: [valueRanges[0], valueRanges[valueRanges.length - 1]],\r\n    startAngle: START_ANGLE,\r\n    endAngle: END_ANGLE,\r\n    numTicks: valueRanges[valueRanges.length - 1] - valueRanges[0] + 1,\r\n    diameter: diameter,\r\n  });\r\n\r\n  const needle = gauge.getNeedleProps({\r\n    value: 0,\r\n    baseRadius: 12,\r\n    tipRadius: 2,\r\n  });\r\n\r\n  const angle = ((END_ANGLE - START_ANGLE) * value) / (domainMax - domainMin);\r\n\r\n  return (\r\n    <Box>\r\n      <svg\r\n        {...gauge.getSVGProps()}\r\n        height={Math.max(width, height)}\r\n        width={Math.max(width, height)}\r\n        viewBox={`-${diameter / 2 + offset} -${diameter / 2 + offset} ${\r\n          diameter + offset * 2\r\n        } ${diameter / 2 + offset * 2}`}\r\n      >\r\n        <g id=\"arcs\">\r\n          <path\r\n            {...gauge.getArcProps({\r\n              offset: offset - 5,\r\n              startAngle: 90,\r\n              endAngle: 270,\r\n            })}\r\n            stroke=\"gray\"\r\n            opacity=\"0.2\"\r\n            fill=\"none\"\r\n            strokeLinecap=\"round\"\r\n            strokeWidth={5}\r\n          />\r\n        </g>\r\n        <g id=\"ticks\">\r\n          {gauge.ticks.map((angle) => {\r\n            const angleToValue = (angle: number) => {\r\n              const angleRange = END_ANGLE - START_ANGLE;\r\n              const valueRange = domainMax - domainMin;\r\n\r\n              const value =\r\n                domainMin + ((angle - START_ANGLE) / angleRange) * valueRange;\r\n\r\n              return Math.round(value);\r\n            };\r\n            const asValue = angleToValue(angle);\r\n            const showText = asValue % 10 === 0;\r\n\r\n            return (\r\n              <React.Fragment key={`tick-group-${angle}`}>\r\n                <line\r\n                  stroke=\"gray\"\r\n                  strokeWidth={showText ? 4 : 2}\r\n                  {...gauge.getTickProps({ angle, length: showText ? 12 : 3 })}\r\n                />\r\n                {showText && (\r\n                  <text\r\n                    fill=\"black\"\r\n                    {...gauge.getLabelProps({ angle, offset: 20 })}\r\n                    style={{ fontSize: `${scaleValuesSize ?? 30}px` }}\r\n                  >\r\n                    {asValue}\r\n                  </text>\r\n                )}\r\n              </React.Fragment>\r\n            );\r\n          })}\r\n          {allTicks &&\r\n            gauge2.ticks.map((angle, i) => {\r\n              return (\r\n                <React.Fragment key={`tick-group-${angle}_ ${i}_2`}>\r\n                  <line\r\n                    stroke=\"gray\"\r\n                    strokeWidth={2}\r\n                    {...gauge.getTickProps({\r\n                      angle,\r\n                      length: 3,\r\n                    })}\r\n                  />\r\n                </React.Fragment>\r\n              );\r\n            })}\r\n        </g>\r\n        <g id=\"needle\">\r\n          <circle fill={pointerColor} {...needle.base} r={20} />\r\n          <circle fill={pointerColor} {...needle.base} />\r\n          <circle\r\n            fill={pointerColor}\r\n            opacity=\"0.5\"\r\n            {...needle.tip}\r\n            style={{\r\n              transform: `rotate(${angle}deg)`,\r\n              transition: 'transform 500ms',\r\n            }}\r\n          />\r\n          <polyline\r\n            style={{\r\n              transform: `rotate(${angle}deg)`,\r\n              transition: 'transform 500ms',\r\n            }}\r\n            fill={pointerColor}\r\n            opacity=\"0.5\"\r\n            points={needle.points}\r\n          />\r\n          <circle fill=\"white\" {...needle.base} r={4} />\r\n        </g>\r\n        <g>\r\n          <text\r\n            textAnchor=\"middle\"\r\n            style={{ fontSize: `${currentValueFontSize ?? 30}px` }}\r\n            y={-diameter / 4 + 20}\r\n          >\r\n            {noNaN(value).toFixed(noNaN(valueDecimals))}\r\n            {valueType === '2' || valueType === 2 ? '%' : ''}\r\n          </text>\r\n        </g>\r\n      </svg>\r\n    </Box>\r\n  );\r\n};\r\n"],"names":["angle","value"],"mappings":"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"}

package/dist/widgets/speedMeter/SpeedMeter.js

@@ -18,7 +18,9 @@ const SpeedMeter = ({
   pointerColor,
   scaleValuesSize,
   valueRanges,
-  width
+  width,
+  valueDecimals,
+  valueType
 }) => {
   const value = currentValue;
   const diameter = Math.min(height, width);
@@ -170,14 +172,17 @@ const SpeedMeter = ({
           ),
           /* @__PURE__ */ jsx("circle", { fill: "white", ...needle.base, r: 4 })
         ] }),
-        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
           "text",
           {
             textAnchor: "middle",
             y: diameter / 2,
             fill: currentValueColor,
             style: { fontSize: `${currentValueFontSize ?? 30}px` },
-            children: value
+            children: [
+              noNaN(value).toFixed(noNaN(valueDecimals)),
+              valueType === "2" || valueType === 2 ? "%" : ""
+            ]
           }
         ) })
       ]

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';\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":"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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  valueDecimals,\r\n  valueType,\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            {noNaN(value).toFixed(noNaN(valueDecimals))}\r\n            {valueType === '2' || valueType === 2 ? '%' : ''}\r\n          </text>\r\n        </g>\r\n      </svg>\r\n    </Box>\r\n  );\r\n};\r\n"],"names":["value","angle"],"mappings":"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"}

package/dist/widgets/tLight/TLight.js

@@ -16,7 +16,9 @@ const TLight = ({
   valueRanges,
   width,
   currentValueColor,
-  currentValueFontSize
+  currentValueFontSize,
+  valueDecimals,
+  valueType
 }) => {
   const [value, setValue] = useState(noNaN(currentValue));
   const diameter = Math.min(height, width);
@@ -68,7 +70,11 @@ const TLight = ({
           domainMin,
           domainMax
         );
-        setValue(Math.round(step));
+        let factor = Math.pow(10, valueDecimals);
+        if (valueType === 0 || valueType === "0") {
+          factor = 1;
+        }
+        setValue(Math.round(step * factor) / factor);
       },
       () => {
         lastCurrentValue.current = noNaN(currentValue);
@@ -115,14 +121,17 @@ const TLight = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
           "text",
           {
             textAnchor: "middle",
             style: { fontSize: `${currentValueFontSize ?? 100}pt` },
             alignmentBaseline: "central",
             fill: currentValueColor,
-            children: value
+            children: [
+              noNaN(value).toFixed(noNaN(valueDecimals)),
+              valueType === "2" || valueType === 2 ? "%" : ""
+            ]
           }
         ) })
       ]

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';\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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"}
+{"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  valueDecimals,\r\n  valueType,\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        let factor = Math.pow(10, valueDecimals);\r\n        if (valueType === 0 || valueType === '0') {\r\n          factor = 1;\r\n        }\r\n        setValue(Math.round(step * factor) / factor);\r\n      },\r\n      () => {\r\n        lastCurrentValue.current = noNaN(currentValue);\r\n      },\r\n    );\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [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            {noNaN(value).toFixed(noNaN(valueDecimals))}\r\n            {valueType === '2' || valueType === 2 ? '%' : ''}\r\n          </text>\r\n        </g>\r\n      </svg>\r\n    </Box>\r\n  );\r\n};\r\n"],"names":["value"],"mappings":"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"}

package/dist/widgets/thermometer/Thermometer.js

@@ -14,7 +14,9 @@ const Thermometer = ({
   height,
   valueRanges,
   width,
-  currentValueFontSize
+  currentValueFontSize,
+  valueDecimals,
+  valueType
 }) => {
   const value = currentValue;
   const baseValue = noNaN(minValue) ?? valueRanges[0];
@@ -97,7 +99,7 @@ const Thermometer = ({
         width: Math.max(width, height),
         style: { position: "absolute", left: 0, top: 0 },
         children: [
-          boxValues.x && /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+          boxValues.x && /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
             "text",
             {
               x: Math.max(width, height) / 2,
@@ -108,7 +110,10 @@ const Thermometer = ({
               textAnchor: "middle",
               alignmentBaseline: "central",
               vectorEffect: "non-scaling-stroke",
-              children: value
+              children: [
+                noNaN(value).toFixed(noNaN(valueDecimals)),
+                valueType === "2" || valueType === 2 ? "%" : ""
+              ]
             }
           ) }),
           tickArray.map((tick, i) => {

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';\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":"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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  valueDecimals,\r\n  valueType,\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              {noNaN(value).toFixed(noNaN(valueDecimals))}\r\n              {valueType === '2' || valueType === 2 ? '%' : ''}\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":"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"}

package/dist/widgets/thermometer/util.js

@@ -17,11 +17,15 @@ function getColor(valueRanges, colorRanges, value) {
   return colorRanges[index];
 }
 function getInnerColor(valueRanges, colorRanges, value) {
-  const index = valueRanges.findIndex((range) => value < range);
+  const index = valueRanges.findIndex((range, i) => {
+    if (i === valueRanges.length - 1) {
+      return noNaN(value) <= noNaN(range);
+    }
+    return noNaN(value) < noNaN(range);
+  });
   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":["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;;;;"}
+{"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, i) => {\r\n    if (i === valueRanges.length - 1) {\r\n      return noNaN(value) <= noNaN(range);\r\n    }\r\n    return 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 - 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,KAAQ,GAAA,WAAA,CAAY,SAAU,CAAA,CAAC,OAAO,CAAM,KAAA;AAChD,IAAI,IAAA,CAAA,KAAM,WAAY,CAAA,MAAA,GAAS,CAAG,EAAA;AAChC,MAAA,OAAO,KAAM,CAAA,KAAK,CAAK,IAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AAAA,KACpC;AACA,IAAA,OAAO,KAAM,CAAA,KAAK,CAAI,GAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AAAA,GAClC,CAAA,CAAA;AAED,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;;;;"}

package/dist/widgets/types.d.ts

@@ -62,6 +62,8 @@ type TApiaWidgetBaseProps<T> = {
     height: number;
     maxValue?: number;
     minValue?: number;
+    valueDecimals: number;
+    valueType: string | number;
     valueRanges: number[];
     width: number;
 } & T;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apia/charts",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "sideEffects": false,
   "author": "Felipe Arzuaga <felipearax.2012@gmail.com>",
   "main": "dist/index.js",
@@ -13,10 +13,10 @@
     "libWatch": "rollup --watch --config ../../config/rollup.common.mjs --environment MODE:development,ENTRY:index.ts,WATCH:true"
   },
   "dependencies": {
-    "@apia/components": "^2.0.10",
-    "@apia/icons": "^2.0.8",
-    "@apia/theme": "^2.0.8",
-    "@apia/util": "^2.0.8",
+    "@apia/components": "^2.0.12",
+    "@apia/icons": "^2.0.12",
+    "@apia/theme": "^2.0.12",
+    "@apia/util": "^2.0.12",
     "@types/d3-array": "^3.0.5",
     "@visx/axis": "^3.1.0",
     "@visx/curve": "^3.0.0",
@@ -52,5 +52,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "7c24cfee81e9960f174af5ede68e8f9f514db1d9"
+  "gitHead": "15cb0d39b557de0e9b6ce2439f6bef5d8da5758f"
 }