@apia/charts 2.0.6 → 2.0.8

package/dist/charts/chartJsRenderer/ChartComponent.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { ChartData } from 'chart.js';
+
+type TChartData = {
+    chartData: ChartData;
+    showLegend?: boolean;
+    showValues?: boolean;
+    showXAxisValues?: boolean;
+    showYAxisValues?: boolean;
+    showTable?: boolean;
+    type: 'bar' | 'line' | 'scatter' | 'bubble' | 'pie' | 'doughnut' | 'polarArea' | 'radar' | 'waterfall';
+    indexAxis?: 'x' | 'y';
+    xAxisTitle?: string;
+    yAxisTitle?: string;
+    id?: string;
+    chartId?: string;
+    aspectRatio?: number;
+};
+declare const ChartComponent: (props?: TChartData) => react.JSX.Element;
+
+export { ChartComponent, type TChartData };
+//# sourceMappingURL=ChartComponent.d.ts.map

package/dist/charts/chartJsRenderer/ChartComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartComponent.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/charts/chartJsRenderer/ChartComponent.js

@@ -0,0 +1,244 @@
+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 { Chart as Chart$1 } from 'react-chartjs-2';
+import { useThemeUI } from '@apia/theme';
+
+Chart.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  BarController,
+  BarElement,
+  PieController,
+  ArcElement,
+  LineController
+);
+const ChartComponent = (props = {
+  chartData: { datasets: [{ data: [{ x: 0, y: 0 }] }] },
+  type: "bar",
+  indexAxis: "x",
+  showLegend: true,
+  showValues: true,
+  showXAxisValues: true,
+  showYAxisValues: true,
+  showTable: true,
+  xAxisTitle: "",
+  yAxisTitle: "",
+  aspectRatio: 2.5
+}) => {
+  const { theme } = useThemeUI();
+  if (!theme.layout)
+    console.error("The layout property is missing in the current theme");
+  const data = useMemo(() => {
+    const charts = theme.layout?.charts ?? {};
+    return {
+      datasets: (props.type === "waterfall" ? arrayOrArray(props.chartData.datasets).map((dataset) => {
+        let sum = 0;
+        const newData = dataset.data.map((dataValue) => {
+          if (typeof dataValue === "number") {
+            const currentValue = sum;
+            sum += dataValue;
+            return [currentValue, sum];
+          } else {
+            return dataValue;
+          }
+        });
+        return {
+          ...dataset,
+          data: newData
+        };
+      }) : props.chartData.datasets).map((dataset, datasetIndex) => {
+        const isSingle = arrayOrArray(props.chartData.datasets).every(
+          (dataset2) => arrayOrArray(dataset2.data).length === 1
+        ) || props.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 (props.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));
+                      });
+                    }
+                  } 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];
+            }
+            return schemaArray[i % 6];
+          }),
+          borderColor: dataset.borderColor.map(
+            (color, i) => {
+              let schemaBorderArray = [];
+              if (typeof color === "string") {
+                if (color in charts) {
+                  const currentBorderStylescheme = {
+                    schema: getValueByPath(
+                      theme.colors,
+                      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                      charts[color.toLowerCase()]?.schema
+                    )
+                  };
+                  if (typeof currentBorderStylescheme.schema === "object" && currentBorderStylescheme.schema) {
+                    schemaBorderArray = Object.values(
+                      currentBorderStylescheme.schema
+                    ).map((varColor) => {
+                      return window.getComputedStyle(document.documentElement).getPropertyValue(varColor.slice(4, -1));
+                    });
+                  }
+                } else {
+                  schemaBorderArray = [
+                    color,
+                    color,
+                    color,
+                    color,
+                    color,
+                    color
+                  ];
+                }
+              } else {
+                return color[datasetIndex % color.length];
+              }
+              return schemaBorderArray[i % 6];
+            }
+          )
+        };
+      }),
+      labels: props.chartData.labels
+    };
+  }, [
+    props.chartData.datasets,
+    props.chartData.labels,
+    props.type,
+    theme.colors,
+    theme.layout
+  ]);
+  const options = useMemo(() => {
+    return {
+      plugins: {
+        legend: { position: "right", display: props.showLegend },
+        tooltip: {
+          callbacks: {
+            label(tooltipItem) {
+              const XLabel = tooltipItem.dataset.label ?? "";
+              let YValue = tooltipItem.formattedValue;
+              if (isNaN(parseFloat(YValue))) {
+                const arrayValue = tooltipItem.raw;
+                const realValue = arrayValue[1] - arrayValue[0];
+                YValue = `${realValue}`;
+              }
+              let finalString = "";
+              if (props.showLegend || props.type === "pie") {
+                finalString += XLabel;
+                if (props.showValues) {
+                  finalString += ": " + YValue;
+                }
+              } else if (props.showValues) {
+                finalString += YValue;
+              }
+              return finalString;
+            },
+            title(tooltipItems) {
+              if (props.type !== "pie" && !props.showXAxisValues && props.indexAxis === "x" || props.type !== "pie" && !props.showYAxisValues && props.indexAxis === "y" || props.type === "pie" && !props.showLegend) {
+                return "";
+              }
+              return tooltipItems[0].label;
+            }
+          },
+          enabled: (props.indexAxis === "y" ? props.showYAxisValues : props.showXAxisValues) || props.showValues || props.showLegend
+        }
+      },
+      aspectRatio: props.aspectRatio,
+      indexAxis: props.indexAxis,
+      scales: {
+        x: {
+          display: props.type !== "pie",
+          title: {
+            display: props.showXAxisValues,
+            text: props.indexAxis === "y" ? props.yAxisTitle : props.xAxisTitle
+          },
+          ticks: {
+            display: !!props.showXAxisValues
+          },
+          grid: {
+            display: props.showTable
+          }
+        },
+        y: {
+          axis: props.indexAxis === "y" ? "x" : "y",
+          display: props.type !== "pie",
+          title: {
+            display: props.showYAxisValues,
+            text: props.indexAxis === "y" ? props.xAxisTitle : props.yAxisTitle
+          },
+          ticks: {
+            display: !!props.showYAxisValues
+          },
+          grid: {
+            display: props.showTable
+          }
+        }
+      }
+    };
+  }, [
+    props.aspectRatio,
+    props.indexAxis,
+    props.showLegend,
+    props.showTable,
+    props.showValues,
+    props.showXAxisValues,
+    props.showYAxisValues,
+    props.type,
+    props.xAxisTitle,
+    props.yAxisTitle
+  ]);
+  return /* @__PURE__ */ jsx(
+    Chart$1,
+    {
+      id: props.id ?? void 0,
+      className: props.chartId ?? "",
+      type: props.type === "waterfall" ? "bar" : props.type,
+      options,
+      data
+    }
+  );
+};
+
+export { ChartComponent };
+//# sourceMappingURL=ChartComponent.js.map

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

@@ -0,0 +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 = (\r\n  props: TChartData = {\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) => {\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: (props.type === 'waterfall'\r\n        ? arrayOrArray(props.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        : props.chartData.datasets\r\n      ).map((dataset, datasetIndex) => {\r\n        const isSingle =\r\n          arrayOrArray(props.chartData.datasets).every(\r\n            (dataset) => arrayOrArray(dataset.data).length === 1,\r\n          ) || props.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 (props.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: props.chartData.labels,\r\n    };\r\n  }, [\r\n    props.chartData.datasets,\r\n    props.chartData.labels,\r\n    props.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: props.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 (props.showLegend || props.type === 'pie') {\r\n                finalString += XLabel;\r\n                if (props.showValues) {\r\n                  finalString += ': ' + YValue;\r\n                }\r\n              } else if (props.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                (props.type !== 'pie' &&\r\n                  !props.showXAxisValues &&\r\n                  props.indexAxis === 'x') ||\r\n                (props.type !== 'pie' &&\r\n                  !props.showYAxisValues &&\r\n                  props.indexAxis === 'y') ||\r\n                (props.type === 'pie' && !props.showLegend)\r\n              ) {\r\n                return '';\r\n              }\r\n              return tooltipItems[0].label;\r\n            },\r\n          },\r\n          enabled:\r\n            (props.indexAxis === 'y'\r\n              ? props.showYAxisValues\r\n              : props.showXAxisValues) ||\r\n            props.showValues ||\r\n            props.showLegend,\r\n        },\r\n      },\r\n      aspectRatio: props.aspectRatio,\r\n      indexAxis: props.indexAxis,\r\n      scales: {\r\n        x: {\r\n          display: props.type !== 'pie',\r\n          title: {\r\n            display: props.showXAxisValues,\r\n            text: props.indexAxis === 'y' ? props.yAxisTitle : props.xAxisTitle,\r\n          },\r\n          ticks: {\r\n            display: !!props.showXAxisValues,\r\n          },\r\n          grid: {\r\n            display: props.showTable,\r\n          },\r\n        },\r\n        y: {\r\n          axis: (props.indexAxis === 'y' ? 'x' : 'y') as 'x' | 'y' | 'r',\r\n          display: props.type !== 'pie',\r\n          title: {\r\n            display: props.showYAxisValues,\r\n            text: props.indexAxis === 'y' ? props.xAxisTitle : props.yAxisTitle,\r\n          },\r\n          ticks: {\r\n            display: !!props.showYAxisValues,\r\n          },\r\n          grid: {\r\n            display: props.showTable,\r\n          },\r\n        },\r\n      },\r\n    };\r\n  }, [\r\n    props.aspectRatio,\r\n    props.indexAxis,\r\n    props.showLegend,\r\n    props.showTable,\r\n    props.showValues,\r\n    props.showXAxisValues,\r\n    props.showYAxisValues,\r\n    props.type,\r\n    props.xAxisTitle,\r\n    props.yAxisTitle,\r\n  ]);\r\n\r\n  return (\r\n    <Chart\r\n      id={props.id ?? undefined}\r\n      className={props.chartId ?? ''}\r\n      type={props.type === 'waterfall' ? 'bar' : props.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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"}

package/dist/charts/types.d.ts

@@ -37,6 +37,7 @@ type TApiaChartDefinition = {
     chartType?: 'barH2D' | 'barV2D' | 'linear' | 'waterfall' | 'pie2D';
     axisXTitle?: string;
     axisYTitle?: string;
+    aspectRatio?: number;
     hideSelector?: boolean;
     /**
      * The colors of the waterfall chart are defined by the bars with positive
@@ -167,22 +168,6 @@ type TApiaChartDefinition = {
         maxWidth: number;
     };
 };
-type TChartMargin = {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-};
-type TChartRendererProps = {
-    chart: TApiaChartDefinition;
-    margin?: number | TChartMargin;
-    disableEvents?: boolean;
-    className?: string;
-    chartId: string;
-    parentRef?: React.MutableRefObject<HTMLElement>;
-    outerClassName?: string;
-    allowZoom?: boolean;
-};
 
-export type { TApiaChartColumn, TApiaChartCoordinate, TApiaChartDefinition, TChartMargin, TChartRendererProps };
+export type { TApiaChartColumn, TApiaChartCoordinate, TApiaChartDefinition };
 //# sourceMappingURL=types.d.ts.map

package/dist/index.d.ts

@@ -1,6 +1,5 @@
-export { ChartRenderer } from './charts/ChartRenderer.js';
 export { TApiaChartColumn, TApiaChartDefinition } from './charts/types.js';
-export { EmptyGrid } from './charts/util/EmptyGrid.js';
-export { TWidgetData } from './widgets/types.js';
-export { WidgetContainer } from './widgets/WidgetContainer.js';
+export { TApiaWidgetBaseProps, TApiaWidgetCounterProps, TApiaWidgetOxfordProps, TApiaWidgetProps, TApiaWidgetRingProps, TApiaWidgetScaleProps, TApiaWidgetSpeedMeterProps, TApiaWidgetTLightProps, TApiaWidgetThermometerProps, TWidgetData, TWidgetZone } from './widgets/types.js';
+export { WidgetComponent } from './widgets/WidgetComponent.js';
+export { ChartComponent } from './charts/chartJsRenderer/ChartComponent.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,4 +1,3 @@
-export { ChartRenderer } from './charts/ChartRenderer.js';
-export { EmptyGrid } from './charts/util/EmptyGrid.js';
-export { WidgetContainer } from './widgets/WidgetContainer.js';
+export { WidgetComponent } from './widgets/WidgetComponent.js';
+export { ChartComponent } from './charts/chartJsRenderer/ChartComponent.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/widgets/WidgetComponent.d.ts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { TApiaWidgetBaseProps } from './types.js';
+
+declare const WidgetComponent: ({ data, type, }: {
+    data: TApiaWidgetBaseProps<any>;
+    type: 'SpeedMeter' | 'Oxford' | 'Counter' | 'TLight' | 'Thermometer' | 'Scale' | 'Ring';
+}) => react.JSX.Element;
+
+export { WidgetComponent };
+//# sourceMappingURL=WidgetComponent.d.ts.map

package/dist/widgets/WidgetComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetComponent.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/widgets/WidgetComponent.js

@@ -0,0 +1,54 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { getIndex, arrayOrArray } from '@apia/util';
+import { SpeedMeter } from './speedMeter/SpeedMeter.js';
+import { Oxford } from './oxford/Oxford.js';
+import { Counter } from './counter/Counter.js';
+import { TLight } from './tLight/TLight.js';
+import { Thermometer } from './thermometer/Thermometer.js';
+import { Scale } from './scale/Scale.js';
+import { Ring } from './ring/Ring.js';
+import tinycolor from 'tinycolor2';
+
+const WidgetComponent = ({
+  data,
+  type
+}) => {
+  const CurrentWidget = getIndex(
+    [SpeedMeter, Oxford, Counter, TLight, Thermometer, Scale, Ring],
+    [
+      type === "SpeedMeter",
+      type === "Oxford",
+      type === "Counter",
+      type === "TLight",
+      type === "Thermometer",
+      type === "Scale",
+      type === "Ring"
+    ],
+    0
+  );
+  const wigetTypeData = data;
+  const widgetData = wigetTypeData;
+  let valueRanges = [];
+  let colorRanges = [];
+  if (data.zones && arrayOrArray(data.zones.Zone).length > 0) {
+    valueRanges = Array.from(
+      new Set(
+        arrayOrArray(data.zones.Zone).map((zone) => {
+          return [Number(zone.minimum), Number(zone.maximum)];
+        }).flat().sort((a, b) => a - b)
+      )
+    );
+    colorRanges = arrayOrArray(data.zones.Zone).map((zone) => {
+      return tinycolor(zone.color).setAlpha(1 - (255 - zone.transparency) / 255).toPercentageRgbString();
+    }).flat();
+  } else {
+    valueRanges = widgetData.valueRanges;
+    colorRanges = widgetData.colorRanges;
+  }
+  widgetData.colorRanges = colorRanges;
+  widgetData.valueRanges = valueRanges;
+  return /* @__PURE__ */ jsx(CurrentWidget, { ...widgetData });
+};
+
+export { WidgetComponent };
+//# sourceMappingURL=WidgetComponent.js.map

package/dist/widgets/WidgetComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetComponent.js","sources":["../../src/widgets/WidgetComponent.tsx"],"sourcesContent":["import { arrayOrArray, getIndex } from '@apia/util';\r\nimport { TApiaWidgetBaseProps, TApiaWidgetProps, TWidgetZone } from './types';\r\nimport { SpeedMeter } from './speedMeter/SpeedMeter';\r\nimport { Oxford } from './oxford/Oxford';\r\nimport { Counter } from './counter/Counter';\r\nimport { TLight } from './tLight/TLight';\r\nimport { Thermometer } from './thermometer/Thermometer';\r\nimport { Scale } from './scale/Scale';\r\nimport { Ring } from './ring/Ring';\r\nimport tinycolor from 'tinycolor2';\r\n\r\nexport const WidgetComponent = ({\r\n  data,\r\n  type,\r\n}: {\r\n  data: TApiaWidgetBaseProps<any>;\r\n  type:\r\n    | 'SpeedMeter'\r\n    | 'Oxford'\r\n    | 'Counter'\r\n    | 'TLight'\r\n    | 'Thermometer'\r\n    | 'Scale'\r\n    | 'Ring';\r\n}) => {\r\n  const CurrentWidget: TApiaWidgetBaseProps<any> = getIndex(\r\n    [SpeedMeter, Oxford, Counter, TLight, Thermometer, Scale, Ring],\r\n    [\r\n      type === 'SpeedMeter',\r\n      type === 'Oxford',\r\n      type === 'Counter',\r\n      type === 'TLight',\r\n      type === 'Thermometer',\r\n      type === 'Scale',\r\n      type === 'Ring',\r\n    ],\r\n    0,\r\n  );\r\n  const wigetTypeData: TApiaWidgetProps = data as TApiaWidgetProps & {\r\n    zones: { Zone: TWidgetZone[] };\r\n  };\r\n\r\n  const widgetData = wigetTypeData as TApiaWidgetProps;\r\n  let valueRanges: number[] = [];\r\n  let colorRanges: string[] = [];\r\n\r\n  if (data.zones && arrayOrArray(data.zones.Zone).length > 0) {\r\n    valueRanges = Array.from(\r\n      new Set(\r\n        arrayOrArray(data.zones.Zone)\r\n          .map((zone) => {\r\n            return [Number(zone.minimum), Number(zone.maximum)];\r\n          })\r\n          .flat()\r\n          .sort((a, b) => a - b),\r\n      ),\r\n    );\r\n\r\n    colorRanges = arrayOrArray(data.zones.Zone)\r\n      .map((zone) => {\r\n        return tinycolor(zone.color)\r\n          .setAlpha(1 - (255 - zone.transparency) / 255)\r\n          .toPercentageRgbString();\r\n      })\r\n      .flat();\r\n  } else {\r\n    valueRanges = widgetData.valueRanges;\r\n    colorRanges = widgetData.colorRanges;\r\n  }\r\n\r\n  widgetData.colorRanges = colorRanges;\r\n  widgetData.valueRanges = valueRanges;\r\n  return <CurrentWidget {...widgetData} />;\r\n};\r\n"],"names":[],"mappings":";;;;;;;;;;;AAWO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,IAAA;AAAA,EACA,IAAA;AACF,CAUM,KAAA;AACJ,EAAA,MAAM,aAA2C,GAAA,QAAA;AAAA,IAC/C,CAAC,UAAY,EAAA,MAAA,EAAQ,SAAS,MAAQ,EAAA,WAAA,EAAa,OAAO,IAAI,CAAA;AAAA,IAC9D;AAAA,MACE,IAAS,KAAA,YAAA;AAAA,MACT,IAAS,KAAA,QAAA;AAAA,MACT,IAAS,KAAA,SAAA;AAAA,MACT,IAAS,KAAA,QAAA;AAAA,MACT,IAAS,KAAA,aAAA;AAAA,MACT,IAAS,KAAA,OAAA;AAAA,MACT,IAAS,KAAA,MAAA;AAAA,KACX;AAAA,IACA,CAAA;AAAA,GACF,CAAA;AACA,EAAA,MAAM,aAAkC,GAAA,IAAA,CAAA;AAIxC,EAAA,MAAM,UAAa,GAAA,aAAA,CAAA;AACnB,EAAA,IAAI,cAAwB,EAAC,CAAA;AAC7B,EAAA,IAAI,cAAwB,EAAC,CAAA;AAE7B,EAAI,IAAA,IAAA,CAAK,SAAS,YAAa,CAAA,IAAA,CAAK,MAAM,IAAI,CAAA,CAAE,SAAS,CAAG,EAAA;AAC1D,IAAA,WAAA,GAAc,KAAM,CAAA,IAAA;AAAA,MAClB,IAAI,GAAA;AAAA,QACF,aAAa,IAAK,CAAA,KAAA,CAAM,IAAI,CACzB,CAAA,GAAA,CAAI,CAAC,IAAS,KAAA;AACb,UAAO,OAAA,CAAC,OAAO,IAAK,CAAA,OAAO,GAAG,MAAO,CAAA,IAAA,CAAK,OAAO,CAAC,CAAA,CAAA;AAAA,SACnD,EACA,IAAK,EAAA,CACL,KAAK,CAAC,CAAA,EAAG,CAAM,KAAA,CAAA,GAAI,CAAC,CAAA;AAAA,OACzB;AAAA,KACF,CAAA;AAEA,IAAA,WAAA,GAAc,aAAa,IAAK,CAAA,KAAA,CAAM,IAAI,CACvC,CAAA,GAAA,CAAI,CAAC,IAAS,KAAA;AACb,MAAO,OAAA,SAAA,CAAU,IAAK,CAAA,KAAK,CACxB,CAAA,QAAA,CAAS,CAAK,GAAA,CAAA,GAAA,GAAM,IAAK,CAAA,YAAA,IAAgB,GAAG,CAAA,CAC5C,qBAAsB,EAAA,CAAA;AAAA,KAC1B,EACA,IAAK,EAAA,CAAA;AAAA,GACH,MAAA;AACL,IAAA,WAAA,GAAc,UAAW,CAAA,WAAA,CAAA;AACzB,IAAA,WAAA,GAAc,UAAW,CAAA,WAAA,CAAA;AAAA,GAC3B;AAEA,EAAA,UAAA,CAAW,WAAc,GAAA,WAAA,CAAA;AACzB,EAAA,UAAA,CAAW,WAAc,GAAA,WAAA,CAAA;AACzB,EAAO,uBAAA,GAAA,CAAC,aAAe,EAAA,EAAA,GAAG,UAAY,EAAA,CAAA,CAAA;AACxC;;;;"}

package/dist/widgets/counter/Counter.js

@@ -13,10 +13,9 @@ const Counter = ({
   valueRanges,
   maxValue,
   minValue,
-  currentValueFontSize,
-  panelId
+  currentValueFontSize
 }) => {
-  const [value, setValue] = useState(currentValue ?? 0);
+  const [value, setValue] = useState(noNaN(currentValue) ?? 0);
   const actualWidth = (currentValueFontSize ?? 80) * 3 * 0.8;
   const diameter = actualWidth;
   const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
@@ -29,7 +28,9 @@ const Counter = ({
     diameter
   });
   function getColor(value2) {
-    const index = valueRanges.findIndex((range) => value2 <= range);
+    const index = valueRanges.findIndex(
+      (range) => noNaN(value2) <= noNaN(range)
+    );
     if (index === -1) {
       return colorRanges[0];
     }
@@ -37,7 +38,7 @@ const Counter = ({
   }
   const lastCurrentValue = useRef(0);
   useEffect(() => {
-    const difference = currentValue - lastCurrentValue.current;
+    const difference = noNaN(currentValue) - lastCurrentValue.current;
     return animate(
       500,
       (progress) => {
@@ -49,10 +50,10 @@ const Counter = ({
         setValue(Math.round(step));
       },
       () => {
-        lastCurrentValue.current = currentValue;
+        lastCurrentValue.current = noNaN(currentValue);
       }
     );
-  }, [currentValue]);
+  }, [noNaN(currentValue)]);
   return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, className: "widgetContainer__Counter", children: [
     /* @__PURE__ */ jsx(
       "svg",
@@ -95,7 +96,6 @@ const Counter = ({
             },
             alignmentBaseline: "central",
             fill: getColor(value),
-            id: `text_${panelId}`,
             children: value
           }
         )

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';\nimport { useGauge } from 'use-gauge';\nimport { TApiaWidgetProps } from '../types';\nimport { addBoundary, noNaN, animate } from '@apia/util';\nimport { useEffect, useRef, useState } from 'react';\n\nconst START_ANGLE = 0;\nconst END_ANGLE = 360;\n\nexport const Counter = ({\n  addBorder = false,\n  colorRanges,\n  currentValue,\n  valueRanges,\n  maxValue,\n  minValue,\n  currentValueFontSize,\n  panelId,\n}: TApiaWidgetProps) => {\n  const [value, setValue] = useState(currentValue ?? 0);\n  const actualWidth = ((currentValueFontSize as number) ?? 80) * 3 * 0.8;\n  const diameter = actualWidth;\n  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];\n  const domainMin = noNaN(minValue) ?? valueRanges[0];\n  const gauge = useGauge({\n    domain: [domainMin, domainMax],\n    startAngle: START_ANGLE,\n    endAngle: END_ANGLE,\n    numTicks: 0,\n    diameter: diameter,\n  });\n\n  function getColor(value: number) {\n    const index = valueRanges.findIndex((range) => value <= range);\n\n    if (index === -1) {\n      return colorRanges[0];\n    }\n\n    return colorRanges[index - 1] ?? colorRanges[index];\n  }\n  const lastCurrentValue = useRef(0);\n  useEffect(() => {\n    const difference = currentValue - lastCurrentValue.current;\n    return animate(\n      500,\n      (progress) => {\n        const step = addBoundary(\n          difference * progress + lastCurrentValue.current,\n          domainMin,\n          domainMax,\n        );\n        setValue(Math.round(step));\n      },\n      () => {\n        lastCurrentValue.current = currentValue;\n      },\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [currentValue]);\n\n  return (\n    <Box sx={{ position: 'relative' }} className=\"widgetContainer__Counter\">\n      <svg\n        {...gauge.getSVGProps()}\n        height={actualWidth}\n        width={actualWidth}\n        viewBox={undefined}\n      >\n        <g id=\"arcs\">\n          {addBorder && `${value}`.length < 4 && (\n            <ellipse\n              cx={actualWidth / 2}\n              cy={actualWidth / 2}\n              rx={actualWidth / 2 - 5}\n              ry={actualWidth / 2 - 5}\n              stroke=\"gray\"\n              opacity=\"0.2\"\n              fill=\"none\"\n              strokeLinecap=\"round\"\n              strokeWidth={2}\n            />\n          )}\n        </g>\n      </svg>\n      <svg\n        height={actualWidth}\n        width={actualWidth}\n        style={{ position: 'absolute', left: 0, top: 0 }}\n      >\n        <text\n          x={actualWidth / 2}\n          y={actualWidth / 2 - 5}\n          textAnchor=\"middle\"\n          style={{\n            fontSize: `${currentValueFontSize ?? 80}px`,\n            transition: 'fill 0.5s',\n          }}\n          alignmentBaseline=\"central\"\n          fill={getColor(value)}\n          id={`text_${panelId}`}\n        >\n          {value}\n        </text>\n      </svg>\n    </Box>\n  );\n};\n"],"names":["value"],"mappings":"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"}
+{"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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"}

package/dist/widgets/custom/useCustomWidget.js

@@ -6,7 +6,7 @@ const useCustomWidget = ({
   maxValue,
   minValue,
   currentValue,
-  panelId
+  uId
 }) => {
   const baseValue = minValue;
   const domainMax = maxValue;
@@ -18,7 +18,7 @@ const useCustomWidget = ({
       if (!el)
         return;
       const svgElement = el.closest("svg");
-      const pathElement = svgElement?.querySelector(`#path_${panelId}`);
+      const pathElement = svgElement?.querySelector(`#path_${uId}`);
       if (!svgElement)
         throw new Error("No svg");
       if (!pathElement)
@@ -30,7 +30,7 @@ const useCustomWidget = ({
       pathRect.current = pathBox;
       setYDifference(pathY2);
     },
-    [panelId]
+    [uId]
   );
   const pathX = noNaN(pathRect.current.x - svgRect.current.x);
   const pathY = noNaN(pathRect.current.y - svgRect.current.y);

package/dist/widgets/custom/useCustomWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCustomWidget.js","sources":["../../../src/widgets/custom/useCustomWidget.ts"],"sourcesContent":["import { noNaN } from '@apia/util';\nimport { useState, useRef, useCallback } from 'react';\nimport { valueToPercent } from './util';\n\nexport const useCustomWidget = ({\n  maxValue,\n  minValue,\n  currentValue,\n  panelId,\n}: {\n  maxValue: number;\n  minValue: number;\n  currentValue: number;\n  panelId: string;\n}) => {\n  const baseValue = minValue;\n  const domainMax = maxValue;\n\n  const [yDifference, setYDifference] = useState(0);\n  const svgRect = useRef<DOMRect>({} as DOMRect);\n  const pathRect = useRef<DOMRect>({} as DOMRect);\n\n  const onRenderRect = useCallback(\n    (el: SVGRectElement) => {\n      if (!el) return;\n\n      const svgElement = el.closest('svg');\n      const pathElement = svgElement?.querySelector(`#path_${panelId}`);\n\n      if (!svgElement) throw new Error('No svg');\n      if (!pathElement) throw new Error('No path');\n\n      const svgBox = svgElement.getBoundingClientRect();\n      const pathBox = pathElement.getBoundingClientRect();\n\n      const pathY = pathBox.y - svgBox.y;\n\n      svgRect.current = svgBox;\n      pathRect.current = pathBox;\n      setYDifference(pathY);\n    },\n    [panelId],\n  );\n\n  const pathX = noNaN(pathRect.current.x - svgRect.current.x);\n  const pathY = noNaN(pathRect.current.y - svgRect.current.y);\n  const pathWidth = noNaN(pathRect.current.width);\n  const pathHeight = noNaN(pathRect.current.height);\n\n  const viewBox = `${pathX} ${pathY} ${pathWidth} ${pathHeight}`;\n\n  const rectProps: React.SVGProps<SVGRectElement> = {\n    y: noNaN(\n      (valueToPercent(domainMax, baseValue, currentValue) * pathHeight) / 100 +\n        yDifference,\n    ),\n    x: pathX,\n    width: pathWidth,\n    height: pathHeight,\n    style: {\n      visibility: 'visible',\n      transition: 'y 0.5s, fill 0.5s',\n    },\n  };\n\n  return {\n    rectRef: onRenderRect,\n    svgViewBox: viewBox,\n    rectProps,\n    pathX,\n    pathY,\n    pathRect,\n    svgRect,\n  };\n};\n"],"names":["pathY"],"mappings":";;;;AAIO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AACF,CAKM,KAAA;AACJ,EAAA,MAAM,SAAY,GAAA,QAAA,CAAA;AAClB,EAAA,MAAM,SAAY,GAAA,QAAA,CAAA;AAElB,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,CAAC,CAAA,CAAA;AAChD,EAAM,MAAA,OAAA,GAAU,MAAgB,CAAA,EAAa,CAAA,CAAA;AAC7C,EAAM,MAAA,QAAA,GAAW,MAAgB,CAAA,EAAa,CAAA,CAAA;AAE9C,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,EAAuB,KAAA;AACtB,MAAA,IAAI,CAAC,EAAA;AAAI,QAAA,OAAA;AAET,MAAM,MAAA,UAAA,GAAa,EAAG,CAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AACnC,MAAA,MAAM,WAAc,GAAA,UAAA,EAAY,aAAc,CAAA,CAAA,MAAA,EAAS,OAAO,CAAE,CAAA,CAAA,CAAA;AAEhE,MAAA,IAAI,CAAC,UAAA;AAAY,QAAM,MAAA,IAAI,MAAM,QAAQ,CAAA,CAAA;AACzC,MAAA,IAAI,CAAC,WAAA;AAAa,QAAM,MAAA,IAAI,MAAM,SAAS,CAAA,CAAA;AAE3C,MAAM,MAAA,MAAA,GAAS,WAAW,qBAAsB,EAAA,CAAA;AAChD,MAAM,MAAA,OAAA,GAAU,YAAY,qBAAsB,EAAA,CAAA;AAElD,MAAMA,MAAAA,MAAAA,GAAQ,OAAQ,CAAA,CAAA,GAAI,MAAO,CAAA,CAAA,CAAA;AAEjC,MAAA,OAAA,CAAQ,OAAU,GAAA,MAAA,CAAA;AAClB,MAAA,QAAA,CAAS,OAAU,GAAA,OAAA,CAAA;AACnB,MAAA,cAAA,CAAeA,MAAK,CAAA,CAAA;AAAA,KACtB;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAEA,EAAA,MAAM,QAAQ,KAAM,CAAA,QAAA,CAAS,QAAQ,CAAI,GAAA,OAAA,CAAQ,QAAQ,CAAC,CAAA,CAAA;AAC1D,EAAA,MAAM,QAAQ,KAAM,CAAA,QAAA,CAAS,QAAQ,CAAI,GAAA,OAAA,CAAQ,QAAQ,CAAC,CAAA,CAAA;AAC1D,EAAA,MAAM,SAAY,GAAA,KAAA,CAAM,QAAS,CAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAC9C,EAAA,MAAM,UAAa,GAAA,KAAA,CAAM,QAAS,CAAA,OAAA,CAAQ,MAAM,CAAA,CAAA;AAEhD,EAAM,MAAA,OAAA,GAAU,GAAG,KAAK,CAAA,CAAA,EAAI,KAAK,CAAI,CAAA,EAAA,SAAS,IAAI,UAAU,CAAA,CAAA,CAAA;AAE5D,EAAA,MAAM,SAA4C,GAAA;AAAA,IAChD,CAAG,EAAA,KAAA;AAAA,MACA,eAAe,SAAW,EAAA,SAAA,EAAW,YAAY,CAAA,GAAI,aAAc,GAClE,GAAA,WAAA;AAAA,KACJ;AAAA,IACA,CAAG,EAAA,KAAA;AAAA,IACH,KAAO,EAAA,SAAA;AAAA,IACP,MAAQ,EAAA,UAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,UAAY,EAAA,SAAA;AAAA,MACZ,UAAY,EAAA,mBAAA;AAAA,KACd;AAAA,GACF,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,OAAS,EAAA,YAAA;AAAA,IACT,UAAY,EAAA,OAAA;AAAA,IACZ,SAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"useCustomWidget.js","sources":["../../../src/widgets/custom/useCustomWidget.ts"],"sourcesContent":["import { noNaN } from '@apia/util';\r\nimport { useState, useRef, useCallback } from 'react';\r\nimport { valueToPercent } from './util';\r\n\r\nexport const useCustomWidget = ({\r\n  maxValue,\r\n  minValue,\r\n  currentValue,\r\n  uId,\r\n}: {\r\n  maxValue: number;\r\n  minValue: number;\r\n  currentValue: number;\r\n  uId: string;\r\n}) => {\r\n  const baseValue = minValue;\r\n  const domainMax = maxValue;\r\n\r\n  const [yDifference, setYDifference] = useState(0);\r\n  const svgRect = useRef<DOMRect>({} as DOMRect);\r\n  const pathRect = useRef<DOMRect>({} as DOMRect);\r\n\r\n  const onRenderRect = useCallback(\r\n    (el: SVGRectElement) => {\r\n      if (!el) return;\r\n\r\n      const svgElement = el.closest('svg');\r\n      const pathElement = svgElement?.querySelector(`#path_${uId}`);\r\n\r\n      if (!svgElement) throw new Error('No svg');\r\n      if (!pathElement) throw new Error('No path');\r\n\r\n      const svgBox = svgElement.getBoundingClientRect();\r\n      const pathBox = pathElement.getBoundingClientRect();\r\n\r\n      const pathY = pathBox.y - svgBox.y;\r\n\r\n      svgRect.current = svgBox;\r\n      pathRect.current = pathBox;\r\n      setYDifference(pathY);\r\n    },\r\n    [uId],\r\n  );\r\n\r\n  const pathX = noNaN(pathRect.current.x - svgRect.current.x);\r\n  const pathY = noNaN(pathRect.current.y - svgRect.current.y);\r\n  const pathWidth = noNaN(pathRect.current.width);\r\n  const pathHeight = noNaN(pathRect.current.height);\r\n\r\n  const viewBox = `${pathX} ${pathY} ${pathWidth} ${pathHeight}`;\r\n\r\n  const rectProps: React.SVGProps<SVGRectElement> = {\r\n    y: noNaN(\r\n      (valueToPercent(domainMax, baseValue, currentValue) * pathHeight) / 100 +\r\n        yDifference,\r\n    ),\r\n    x: pathX,\r\n    width: pathWidth,\r\n    height: pathHeight,\r\n    style: {\r\n      visibility: 'visible',\r\n      transition: 'y 0.5s, fill 0.5s',\r\n    },\r\n  };\r\n\r\n  return {\r\n    rectRef: onRenderRect,\r\n    svgViewBox: viewBox,\r\n    rectProps,\r\n    pathX,\r\n    pathY,\r\n    pathRect,\r\n    svgRect,\r\n  };\r\n};\r\n"],"names":["pathY"],"mappings":";;;;AAIO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AACF,CAKM,KAAA;AACJ,EAAA,MAAM,SAAY,GAAA,QAAA,CAAA;AAClB,EAAA,MAAM,SAAY,GAAA,QAAA,CAAA;AAElB,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,CAAC,CAAA,CAAA;AAChD,EAAM,MAAA,OAAA,GAAU,MAAgB,CAAA,EAAa,CAAA,CAAA;AAC7C,EAAM,MAAA,QAAA,GAAW,MAAgB,CAAA,EAAa,CAAA,CAAA;AAE9C,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,EAAuB,KAAA;AACtB,MAAA,IAAI,CAAC,EAAA;AAAI,QAAA,OAAA;AAET,MAAM,MAAA,UAAA,GAAa,EAAG,CAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AACnC,MAAA,MAAM,WAAc,GAAA,UAAA,EAAY,aAAc,CAAA,CAAA,MAAA,EAAS,GAAG,CAAE,CAAA,CAAA,CAAA;AAE5D,MAAA,IAAI,CAAC,UAAA;AAAY,QAAM,MAAA,IAAI,MAAM,QAAQ,CAAA,CAAA;AACzC,MAAA,IAAI,CAAC,WAAA;AAAa,QAAM,MAAA,IAAI,MAAM,SAAS,CAAA,CAAA;AAE3C,MAAM,MAAA,MAAA,GAAS,WAAW,qBAAsB,EAAA,CAAA;AAChD,MAAM,MAAA,OAAA,GAAU,YAAY,qBAAsB,EAAA,CAAA;AAElD,MAAMA,MAAAA,MAAAA,GAAQ,OAAQ,CAAA,CAAA,GAAI,MAAO,CAAA,CAAA,CAAA;AAEjC,MAAA,OAAA,CAAQ,OAAU,GAAA,MAAA,CAAA;AAClB,MAAA,QAAA,CAAS,OAAU,GAAA,OAAA,CAAA;AACnB,MAAA,cAAA,CAAeA,MAAK,CAAA,CAAA;AAAA,KACtB;AAAA,IACA,CAAC,GAAG,CAAA;AAAA,GACN,CAAA;AAEA,EAAA,MAAM,QAAQ,KAAM,CAAA,QAAA,CAAS,QAAQ,CAAI,GAAA,OAAA,CAAQ,QAAQ,CAAC,CAAA,CAAA;AAC1D,EAAA,MAAM,QAAQ,KAAM,CAAA,QAAA,CAAS,QAAQ,CAAI,GAAA,OAAA,CAAQ,QAAQ,CAAC,CAAA,CAAA;AAC1D,EAAA,MAAM,SAAY,GAAA,KAAA,CAAM,QAAS,CAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAC9C,EAAA,MAAM,UAAa,GAAA,KAAA,CAAM,QAAS,CAAA,OAAA,CAAQ,MAAM,CAAA,CAAA;AAEhD,EAAM,MAAA,OAAA,GAAU,GAAG,KAAK,CAAA,CAAA,EAAI,KAAK,CAAI,CAAA,EAAA,SAAS,IAAI,UAAU,CAAA,CAAA,CAAA;AAE5D,EAAA,MAAM,SAA4C,GAAA;AAAA,IAChD,CAAG,EAAA,KAAA;AAAA,MACA,eAAe,SAAW,EAAA,SAAA,EAAW,YAAY,CAAA,GAAI,aAAc,GAClE,GAAA,WAAA;AAAA,KACJ;AAAA,IACA,CAAG,EAAA,KAAA;AAAA,IACH,KAAO,EAAA,SAAA;AAAA,IACP,MAAQ,EAAA,UAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,UAAY,EAAA,SAAA;AAAA,MACZ,UAAY,EAAA,mBAAA;AAAA,KACd;AAAA,GACF,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,OAAS,EAAA,YAAA;AAAA,IACT,UAAY,EAAA,OAAA;AAAA,IACZ,SAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AACF;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../src/widgets/custom/util.ts"],"sourcesContent":["const colorGetter = (\n  valueRanges: number[],\n  colorRanges: string[],\n  innerValue: number,\n) => {\n  let color = '';\n  valueRanges.forEach((value, index) => {\n    if (value >= innerValue && valueRanges[index - 1] <= innerValue) {\n      color = colorRanges[index - 1];\n    }\n  });\n  return color;\n};\n\nfunction getColor(valueRanges: number[], colorRanges: string[], value: number) {\n  const index = valueRanges.findIndex((range) => value <= range);\n\n  if (index === -1) {\n    return colorRanges[0];\n  }\n\n  return colorRanges[index];\n}\n\nfunction getInnerColor(\n  valueRanges: number[],\n  colorRanges: string[],\n  value: number,\n) {\n  const index = valueRanges.findIndex((range) => value < range);\n\n  if (index === -1) {\n    return colorRanges[0];\n  }\n\n  return colorRanges[index - 1] ?? colorRanges[index];\n}\n\nconst valueToTickPercent = (\n  domainMax: number,\n  baseValue: number,\n  value: number,\n) => {\n  const range = domainMax - (baseValue ?? 0);\n  const percentage = 100 - ((value - (baseValue ?? 0)) / range) * 100;\n\n  return Math.round(percentage);\n};\n\nconst valueToPercent = (\n  domainMax: number,\n  baseValue: number,\n  value: number,\n) => {\n  const range = domainMax - (baseValue ?? 0);\n  const percentage = 100 - ((value - (baseValue ?? 0)) / range) * 100;\n  const test = (percentage * 69) / 100;\n\n  return Math.round(test);\n};\n\nexport {\n  colorGetter,\n  getColor,\n  getInnerColor,\n  valueToPercent,\n  valueToTickPercent,\n};\n"],"names":[],"mappings":"AAiDA,MAAM,cAAiB,GAAA,CACrB,SACA,EAAA,SAAA,EACA,KACG,KAAA;AACH,EAAM,MAAA,KAAA,GAAQ,aAAa,SAAa,IAAA,CAAA,CAAA,CAAA;AACxC,EAAA,MAAM,UAAa,GAAA,GAAA,GAAA,CAAQ,KAAS,IAAA,SAAA,IAAa,MAAM,KAAS,GAAA,GAAA,CAAA;AAChE,EAAM,MAAA,IAAA,GAAQ,aAAa,EAAM,GAAA,GAAA,CAAA;AAEjC,EAAO,OAAA,IAAA,CAAK,MAAM,IAAI,CAAA,CAAA;AACxB;;;;"}
+{"version":3,"file":"util.js","sources":["../../../src/widgets/custom/util.ts"],"sourcesContent":["const 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  return color;\r\n};\r\n\r\nfunction getColor(valueRanges: number[], colorRanges: string[], 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];\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  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":"AAiDA,MAAM,cAAiB,GAAA,CACrB,SACA,EAAA,SAAA,EACA,KACG,KAAA;AACH,EAAM,MAAA,KAAA,GAAQ,aAAa,SAAa,IAAA,CAAA,CAAA,CAAA;AACxC,EAAA,MAAM,UAAa,GAAA,GAAA,GAAA,CAAQ,KAAS,IAAA,SAAA,IAAa,MAAM,KAAS,GAAA,GAAA,CAAA;AAChE,EAAM,MAAA,IAAA,GAAQ,aAAa,EAAM,GAAA,GAAA,CAAA;AAEjC,EAAO,OAAA,IAAA,CAAK,MAAM,IAAI,CAAA,CAAA;AACxB;;;;"}

package/dist/widgets/oxford/Oxford.js

@@ -47,7 +47,9 @@ const Oxford = ({
   });
   const angle = (END_ANGLE - START_ANGLE) * value / (domainMax - domainMin);
   function getColor(value2) {
-    const index = valueRanges.findIndex((range) => value2 <= range);
+    const index = valueRanges.findIndex(
+      (range) => noNaN(value2) <= noNaN(range)
+    );
     if (index === -1) {
       return colorRanges[0];
     }