@apia/charts 2.0.14 → 2.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -180,6 +180,15 @@ const ChartComponent = (props) => {
|
|
|
180
180
|
chart.tooltip?.setActiveElements([activeElement], { x: 0, y: 0 });
|
|
181
181
|
chart.update();
|
|
182
182
|
}
|
|
183
|
+
},
|
|
184
|
+
labels: {
|
|
185
|
+
filter(item, _) {
|
|
186
|
+
if (actualProps.type === "pie") {
|
|
187
|
+
return (item.index ?? 0) < 10;
|
|
188
|
+
} else {
|
|
189
|
+
return (item.datasetIndex ?? 0) < 10;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
183
192
|
}
|
|
184
193
|
},
|
|
185
194
|
tooltip: {
|
|
@@ -260,6 +269,12 @@ const ChartComponent = (props) => {
|
|
|
260
269
|
return /* @__PURE__ */ jsx(
|
|
261
270
|
Chart$1,
|
|
262
271
|
{
|
|
272
|
+
sx: {
|
|
273
|
+
canvas: {
|
|
274
|
+
width: "100%",
|
|
275
|
+
height: "auto"
|
|
276
|
+
}
|
|
277
|
+
},
|
|
263
278
|
id: actualProps.id ?? void 0,
|
|
264
279
|
className: actualProps.chartId ?? "",
|
|
265
280
|
type: actualProps.type === "waterfall" ? "bar" : actualProps.type,
|
|
@@ -1 +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, 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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"}
|
|
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, 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 labels: {\r\n filter(item, _) {\r\n if (actualProps.type === 'pie') {\r\n return (item.index ?? 0) < 10;\r\n } else {\r\n return (item.datasetIndex ?? 0) < 10;\r\n }\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 sx={{\r\n canvas: {\r\n width: '100%',\r\n height: 'auto',\r\n },\r\n }}\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":";;;;;;;;AA0BAA,KAAQ,CAAA,QAAA;AAAA,EACN,aAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,aAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AACF,CAAA,CAAA;AAmCa,MAAA,cAAA,GAAiB,CAAC,KAAsB,KAAA;AACnD,EAAA,MAAM,cAA0B,MAAO,CAAA,MAAA;AAAA,IACrC;AAAA,MACE,SAAW,EAAA,EAAE,QAAU,EAAA,CAAC,EAAE,IAAM,EAAA,CAAC,EAAE,CAAA,EAAG,GAAG,CAAG,EAAA,CAAA,EAAG,CAAA,EAAG,CAAE,EAAA;AAAA,MACpD,IAAM,EAAA,KAAA;AAAA,MACN,SAAW,EAAA,GAAA;AAAA,MACX,UAAY,EAAA,IAAA;AAAA,MACZ,UAAY,EAAA,IAAA;AAAA,MACZ,eAAiB,EAAA,IAAA;AAAA,MACjB,eAAiB,EAAA,IAAA;AAAA,MACjB,SAAW,EAAA,IAAA;AAAA,MACX,UAAY,EAAA,EAAA;AAAA,MACZ,UAAY,EAAA,EAAA;AAAA,MACZ,WAAa,EAAA,GAAA;AAAA,KACf;AAAA,IACA,KAAA;AAAA,GACF,CAAA;AACA,EAAM,MAAA,EAAE,KAAM,EAAA,GAAI,UAAW,EAAA,CAAA;AAC7B,EAAM,MAAA,QAAA,GAAW,OAAgB,IAAI,CAAA,CAAA;AAErC,EAAA,IAAI,CAAC,KAAM,CAAA,MAAA;AACT,IAAA,OAAA,CAAQ,MAAM,qDAAqD,CAAA,CAAA;AAErE,EAAM,MAAA,IAAA,GAAkB,QAAQ,MAAM;AACpC,IAAA,MAAM,MAAW,GAAA,KAAA,CAAM,MACnB,EAAA,MAAA,IAAU,EAAC,CAAA;AAEf,IAAO,OAAA;AAAA,MACL,QAAA,EAAA,CAAW,WAAY,CAAA,IAAA,KAAS,WAC5B,GAAA,YAAA,CAAa,WAAY,CAAA,SAAA,CAAU,QAAQ,CAAA,CAAE,GAAI,CAAA,CAAC,OAAY,KAAA;AAC5D,QAAA,IAAI,GAAM,GAAA,CAAA,CAAA;AACV,QAAA,MAAM,OAAU,GAAA,OAAA,CAAQ,IAAK,CAAA,GAAA,CAAsB,CAAC,SAAc,KAAA;AAChE,UAAI,IAAA,OAAO,cAAc,QAAU,EAAA;AACjC,YAAA,MAAM,YAAe,GAAA,GAAA,CAAA;AACrB,YAAO,GAAA,IAAA,SAAA,CAAA;AACP,YAAO,OAAA,CAAC,cAAc,GAAG,CAAA,CAAA;AAAA,WACpB,MAAA;AACL,YAAO,OAAA,SAAA,CAAA;AAAA,WACT;AAAA,SACD,CAAA,CAAA;AAED,QAAO,OAAA;AAAA,UACL,GAAG,OAAA;AAAA,UACH,IAAM,EAAA,OAAA;AAAA,SACR,CAAA;AAAA,OACD,IACD,WAAY,CAAA,SAAA,CAAU,UACxB,GAAI,CAAA,CAAC,SAAS,YAAiB,KAAA;AAC/B,QAAA,MAAM,QACJ,GAAA,YAAA,CAAa,WAAY,CAAA,SAAA,CAAU,QAAQ,CAAE,CAAA,KAAA;AAAA,UAC3C,CAACC,QAAY,KAAA,YAAA,CAAaA,QAAQ,CAAA,IAAI,EAAE,MAAW,KAAA,CAAA;AAAA,SACrD,IAAK,YAAY,IAAS,KAAA,KAAA,CAAA;AAE5B,QAAA,MAAM,kBACJ,OAAQ,CAAA,eAAA,CACR,GAAI,CAAA,CAAC,aAAa,CAAM,KAAA;AACxB,UAAA,IAAI,cAAwB,EAAC,CAAA;AAC7B,UAAI,IAAA,OAAO,gBAAgB,QAAU,EAAA;AACnC,YAAM,MAAA,KAAA,GAAQ,YAAY,WAAY,EAAA,CAAA;AACtC,YAAA,IAAI,SAAS,MAAQ,EAAA;AACnB,cAAA,MAAM,4BAEF,GAAA;AAAA,gBACF,MAAQ,EAAA,cAAA;AAAA,kBACN,KAAM,CAAA,MAAA;AAAA;AAAA,kBAEN,MAAO,CAAA,KAAA,CAAM,WAAY,EAAC,CAAG,EAAA,MAAA;AAAA,iBAC/B;AAAA,eACF,CAAA;AAEA,cAAA,IACE,OAAO,4BAAA,CAA6B,MAAW,KAAA,QAAA,IAC/C,6BAA6B,MAC7B,EAAA;AACA,gBAAA,IAAI,QAAU,EAAA;AACZ,kBAAI,IAAA,WAAA,CAAY,SAAS,KAAO,EAAA;AAC9B,oBAAA,WAAA,GAAc,MAAO,CAAA,MAAA;AAAA,sBACnB,4BAA6B,CAAA,MAAA;AAAA,qBAC/B,CAAE,GAAI,CAAA,CAAC,QAAa,KAAA;AAClB,sBAAO,OAAA,MAAA,CACJ,gBAAiB,CAAA,QAAA,CAAS,eAAe,CAAA,CACzC,iBAAiB,QAAS,CAAA,KAAA,CAAM,CAAG,EAAA,CAAA,CAAE,CAAC,CAAA,CAAA;AAAA,qBAC1C,CAAA,CAAA;AAAA,mBACI,MAAA;AACL,oBAAc,WAAA,GAAA,IAAI,KAAc,CAAA,CAAC,CAC9B,CAAA,IAAA;AAAA,sBACC,OAAO,MAAO,CAAA,4BAAA,CAA6B,MAAM,CAAA,CAC/C,eAAe,CACjB,CAAA;AAAA,qBACF,CACC,GAAI,CAAA,CAAC,QAAa,KAAA;AACjB,sBAAO,OAAA,MAAA,CACJ,gBAAiB,CAAA,QAAA,CAAS,eAAe,CAAA,CACzC,iBAAiB,QAAS,CAAA,KAAA,CAAM,CAAG,EAAA,CAAA,CAAE,CAAC,CAAA,CAAA;AAAA,qBAC1C,CAAA,CAAA;AAAA,mBACL;AAAA,iBACK,MAAA;AACL,kBAAc,WAAA,GAAA,IAAI,KAAc,CAAA,CAAC,CAAE,CAAA,IAAA;AAAA,oBACjC,MAAO,CAAA,MAAA,CAAO,4BAA6B,CAAA,MAAM,CAAE,CAAA,GAAA;AAAA,sBACjD,CAAC,QAAa,KAAA;AACZ,wBAAO,OAAA,MAAA,CACJ,gBAAiB,CAAA,QAAA,CAAS,eAAe,CAAA,CACzC,iBAAiB,QAAS,CAAA,KAAA,CAAM,CAAG,EAAA,CAAA,CAAE,CAAC,CAAA,CAAA;AAAA,uBAC3C;AAAA,qBACF,CAAE,eAAe,CAAC,CAAA;AAAA,mBACpB,CAAA;AAAA,iBACF;AAAA,eACF;AAAA,aACK,MAAA;AACL,cAAA,WAAA,GAAc,CAAC,KAAO,EAAA,KAAA,EAAO,KAAO,EAAA,KAAA,EAAO,OAAO,KAAK,CAAA,CAAA;AAAA,aACzD;AAAA,WACK,MAAA;AACL,YAAO,OAAA,WAAA,CAAY,YAAe,GAAA,WAAA,CAAY,MAAM,CAAA,CAAA;AAAA,WACtD;AAEA,UAAO,OAAA,WAAA,CAAY,IAAI,CAAC,CAAA,CAAA;AAAA,SACzB,CAAA,CAAA;AAED,QAAA,MAAM,oBAAuB,GAAA,eAAA,CAAgB,GAAI,CAAA,CAAC,CAAM,KAAA;AACtD,UAAM,MAAA,KAAA,GAAQ,UAAU,CAAC,CAAA,CAAA;AAEzB,UACE,OAAA,CAAA,KAAA,CAAM,MAAO,EAAA,GAAI,KAAM,CAAA,OAAA,CAAQ,EAAE,CAAA,GAAI,KAAM,CAAA,MAAA,CAAO,EAAE,CAAA,EACpD,WAAY,EAAA,CAAA;AAAA,SACf,CAAA,CAAA;AAED,QAAO,OAAA;AAAA,UACL,GAAG,OAAA;AAAA,UACH,oBAAA;AAAA,UACA,eAAA;AAAA,UACA,WAAA,EAAc,QAAQ,WAAsC,CAAA,GAAA;AAAA,YAC1D,CAAC,OAAO,CAAM,KAAA;AACZ,cAAA,IAAI,oBAA8B,EAAC,CAAA;AACnC,cAAI,IAAA,OAAO,UAAU,QAAU,EAAA;AAC7B,gBAAA,IAAI,SAAS,MAAQ,EAAA;AACnB,kBAAA,MAAM,wBAEF,GAAA;AAAA,oBACF,MAAQ,EAAA,cAAA;AAAA,sBACN,KAAM,CAAA,MAAA;AAAA;AAAA,sBAEN,MAAO,CAAA,KAAA,CAAM,WAAY,EAAC,CAAG,EAAA,MAAA;AAAA,qBAC/B;AAAA,mBACF,CAAA;AAEA,kBAAA,IACE,OAAO,wBAAA,CAAyB,MAAW,KAAA,QAAA,IAC3C,yBAAyB,MACzB,EAAA;AACA,oBAAA,iBAAA,GAAoB,MAAO,CAAA,MAAA;AAAA,sBACzB,wBAAyB,CAAA,MAAA;AAAA,qBAC3B,CAAE,GAAI,CAAA,CAAC,QAAa,KAAA;AAClB,sBAAO,OAAA,MAAA,CACJ,gBAAiB,CAAA,QAAA,CAAS,eAAe,CAAA,CACzC,iBAAiB,QAAS,CAAA,KAAA,CAAM,CAAG,EAAA,CAAA,CAAE,CAAC,CAAA,CAAA;AAAA,qBAC1C,CAAA,CAAA;AAAA,mBACH;AAAA,iBACK,MAAA;AACL,kBAAoB,iBAAA,GAAA;AAAA,oBAClB,KAAA;AAAA,oBACA,KAAA;AAAA,oBACA,KAAA;AAAA,oBACA,KAAA;AAAA,oBACA,KAAA;AAAA,oBACA,KAAA;AAAA,mBACF,CAAA;AAAA,iBACF;AAAA,eACK,MAAA;AACL,gBAAO,OAAA,KAAA,CAAM,YAAe,GAAA,KAAA,CAAM,MAAM,CAAA,CAAA;AAAA,eAC1C;AACA,cAAO,OAAA,iBAAA,CAAkB,IAAI,CAAC,CAAA,CAAA;AAAA,aAChC;AAAA,WACF;AAAA,SACF,CAAA;AAAA,OACD,CAAA;AAAA,MACD,MAAA,EAAQ,YAAY,SAAU,CAAA,MAAA;AAAA,KAChC,CAAA;AAAA,GACC,EAAA;AAAA,IACD,YAAY,SAAU,CAAA,QAAA;AAAA,IACtB,YAAY,SAAU,CAAA,MAAA;AAAA,IACtB,WAAY,CAAA,IAAA;AAAA,IACZ,KAAM,CAAA,MAAA;AAAA,IACN,KAAM,CAAA,MAAA;AAAA,GACP,CAAA,CAAA;AAED,EAAM,MAAA,OAAA,GAAwB,QAAQ,MAAM;AAC1C,IAAO,OAAA;AAAA,MACL,OAAS,EAAA;AAAA,QACP,MAAQ,EAAA;AAAA,UACN,QAAU,EAAA,OAAA;AAAA,UACV,SAAS,WAAY,CAAA,UAAA;AAAA,UACrB,OAAS,EAAA,CAAC,EAAI,EAAA,UAAA,EAAY,MAAW,KAAA;AACnC,YAAA,MAAM,QAAQ,QAAS,CAAA,OAAA,CAAA;AACvB,YAAA,IAAI,KAAO,EAAA;AACT,cAAA,MAAM,aAAgB,GAAA;AAAA,gBACpB,YACE,EAAA,WAAA,CAAY,IAAS,KAAA,KAAA,GAAQ,IAAI,UAAW,CAAA,YAAA;AAAA,gBAC9C,KAAO,EAAA,WAAA,CAAY,IAAS,KAAA,KAAA,GAAQ,WAAW,KAAS,GAAA,CAAA;AAAA,eAC1D,CAAA;AACA,cAAA,OAAA,CAAQ,GAAI,CAAA,aAAA,EAAe,UAAY,EAAA,MAAA,EAAQ,EAAE,CAAA,CAAA;AAEjD,cAAM,KAAA,CAAA,iBAAA,CAAkB,CAAC,aAAa,CAAC,CAAA,CAAA;AACvC,cAAM,KAAA,CAAA,OAAA,EAAS,iBAAkB,CAAA,CAAC,aAAa,CAAA,EAAG,EAAE,CAAG,EAAA,CAAA,EAAG,CAAG,EAAA,CAAA,EAAG,CAAA,CAAA;AAChE,cAAA,KAAA,CAAM,MAAO,EAAA,CAAA;AAAA,aACf;AAAA,WACF;AAAA,UACA,MAAQ,EAAA;AAAA,YACN,MAAA,CAAO,MAAM,CAAG,EAAA;AACd,cAAI,IAAA,WAAA,CAAY,SAAS,KAAO,EAAA;AAC9B,gBAAQ,OAAA,CAAA,IAAA,CAAK,SAAS,CAAK,IAAA,EAAA,CAAA;AAAA,eACtB,MAAA;AACL,gBAAQ,OAAA,CAAA,IAAA,CAAK,gBAAgB,CAAK,IAAA,EAAA,CAAA;AAAA,eACpC;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA,QACA,OAAS,EAAA;AAAA,UACP,SAAW,EAAA;AAAA,YACT,MAAM,WAAmD,EAAA;AACvD,cAAM,MAAA,MAAA,GAAS,WAAY,CAAA,OAAA,CAAQ,KAAS,IAAA,EAAA,CAAA;AAC5C,cAAA,IAAI,SAAS,WAAY,CAAA,cAAA,CAAA;AACzB,cAAA,IAAI,KAAM,CAAA,UAAA,CAAW,MAAM,CAAC,CAAG,EAAA;AAC7B,gBAAA,MAAM,aAA+B,WAAY,CAAA,GAAA,CAAA;AAIjD,gBAAA,MAAM,SAAY,GAAA,UAAA,CAAW,CAAC,CAAA,GAAI,WAAW,CAAC,CAAA,CAAA;AAC9C,gBAAA,MAAA,GAAS,GAAG,SAAS,CAAA,CAAA,CAAA;AAAA,eACvB;AACA,cAAA,IAAI,WAAc,GAAA,EAAA,CAAA;AAClB,cAAA,IAAI,WAAY,CAAA,UAAA,IAAc,WAAY,CAAA,IAAA,KAAS,KAAO,EAAA;AACxD,gBAAe,WAAA,IAAA,MAAA,CAAA;AACf,gBAAA,IAAI,YAAY,UAAY,EAAA;AAC1B,kBAAA,WAAA,IAAe,IAAO,GAAA,MAAA,CAAA;AAAA,iBACxB;AAAA,eACF,MAAA,IAAW,YAAY,UAAY,EAAA;AACjC,gBAAe,WAAA,IAAA,MAAA,CAAA;AAAA,eACjB;AACA,cAAO,OAAA,WAAA,CAAA;AAAA,aACT;AAAA,YACA,MAAM,YAAsD,EAAA;AAC1D,cACG,IAAA,WAAA,CAAY,SAAS,KACpB,IAAA,CAAC,YAAY,eACb,IAAA,WAAA,CAAY,SAAc,KAAA,GAAA,IAC3B,WAAY,CAAA,IAAA,KAAS,SACpB,CAAC,WAAA,CAAY,eACb,IAAA,WAAA,CAAY,SAAc,KAAA,GAAA,IAC3B,YAAY,IAAS,KAAA,KAAA,IAAS,CAAC,WAAA,CAAY,UAC5C,EAAA;AACA,gBAAO,OAAA,EAAA,CAAA;AAAA,eACT;AACA,cAAO,OAAA,YAAA,CAAa,CAAC,CAAE,CAAA,KAAA,CAAA;AAAA,aACzB;AAAA,WACF;AAAA,UACA,OAAA,EAAA,CACG,WAAY,CAAA,SAAA,KAAc,GACvB,GAAA,WAAA,CAAY,kBACZ,WAAY,CAAA,eAAA,KAChB,WAAY,CAAA,UAAA,IACZ,WAAY,CAAA,UAAA;AAAA,SAChB;AAAA,OACF;AAAA,MACA,aAAa,WAAY,CAAA,WAAA;AAAA,MACzB,WAAW,WAAY,CAAA,SAAA;AAAA,MACvB,MAAQ,EAAA;AAAA,QACN,CAAG,EAAA;AAAA,UACD,OAAA,EAAS,YAAY,IAAS,KAAA,KAAA;AAAA,UAC9B,KAAO,EAAA;AAAA,YACL,SAAS,WAAY,CAAA,eAAA;AAAA,YACrB,MACE,WAAY,CAAA,SAAA,KAAc,GACtB,GAAA,WAAA,CAAY,aACZ,WAAY,CAAA,UAAA;AAAA,WACpB;AAAA,UACA,KAAO,EAAA;AAAA,YACL,OAAA,EAAS,CAAC,CAAC,WAAY,CAAA,eAAA;AAAA,WACzB;AAAA,UACA,IAAM,EAAA;AAAA,YACJ,SAAS,WAAY,CAAA,SAAA;AAAA,WACvB;AAAA,SACF;AAAA,QACA,CAAG,EAAA;AAAA,UACD,IAAO,EAAA,WAAA,CAAY,SAAc,KAAA,GAAA,GAAM,GAAM,GAAA,GAAA;AAAA,UAC7C,OAAA,EAAS,YAAY,IAAS,KAAA,KAAA;AAAA,UAC9B,KAAO,EAAA;AAAA,YACL,SAAS,WAAY,CAAA,eAAA;AAAA,YACrB,MACE,WAAY,CAAA,SAAA,KAAc,GACtB,GAAA,WAAA,CAAY,aACZ,WAAY,CAAA,UAAA;AAAA,WACpB;AAAA,UACA,KAAO,EAAA;AAAA,YACL,OAAA,EAAS,CAAC,CAAC,WAAY,CAAA,eAAA;AAAA,WACzB;AAAA,UACA,IAAM,EAAA;AAAA,YACJ,SAAS,WAAY,CAAA,SAAA;AAAA,WACvB;AAAA,SACF;AAAA,OACF;AAAA,KACF,CAAA;AAAA,GACC,EAAA;AAAA,IACD,WAAY,CAAA,WAAA;AAAA,IACZ,WAAY,CAAA,SAAA;AAAA,IACZ,WAAY,CAAA,UAAA;AAAA,IACZ,WAAY,CAAA,SAAA;AAAA,IACZ,WAAY,CAAA,UAAA;AAAA,IACZ,WAAY,CAAA,eAAA;AAAA,IACZ,WAAY,CAAA,eAAA;AAAA,IACZ,WAAY,CAAA,IAAA;AAAA,IACZ,WAAY,CAAA,UAAA;AAAA,IACZ,WAAY,CAAA,UAAA;AAAA,GACb,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,MAAQ,EAAA;AAAA,UACN,KAAO,EAAA,MAAA;AAAA,UACP,MAAQ,EAAA,MAAA;AAAA,SACV;AAAA,OACF;AAAA,MACA,EAAA,EAAI,YAAY,EAAM,IAAA,KAAA,CAAA;AAAA,MACtB,SAAA,EAAW,YAAY,OAAW,IAAA,EAAA;AAAA,MAClC,IAAM,EAAA,WAAA,CAAY,IAAS,KAAA,WAAA,GAAc,QAAQ,WAAY,CAAA,IAAA;AAAA,MAC7D,OAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAK,EAAA,QAAA;AAAA,KAAA;AAAA,GACP,CAAA;AAEJ;;;;"}
|
|
@@ -117,7 +117,7 @@ const Ring = ({
|
|
|
117
117
|
textAnchor: "middle",
|
|
118
118
|
style: { fontSize: `${currentValueFontSize ?? 30}px` },
|
|
119
119
|
alignmentBaseline: "central",
|
|
120
|
-
|
|
120
|
+
fill: currentValueColor,
|
|
121
121
|
children: [
|
|
122
122
|
noNaN(value).toFixed(noNaN(valueDecimals)),
|
|
123
123
|
valueType === "2" || valueType === 2 ? "%" : ""
|
|
@@ -1 +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: 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
|
|
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: 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 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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@apia/charts",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.16",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"author": "Felipe Arzuaga <felipearax.2012@gmail.com>",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -13,10 +13,10 @@
|
|
|
13
13
|
"libWatch": "rollup --watch --config ../../config/rollup.common.mjs --environment MODE:development,ENTRY:index.ts,WATCH:true"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@apia/components": "^2.0.
|
|
17
|
-
"@apia/icons": "^2.0.
|
|
18
|
-
"@apia/theme": "^2.0.
|
|
19
|
-
"@apia/util": "^2.0.
|
|
16
|
+
"@apia/components": "^2.0.16",
|
|
17
|
+
"@apia/icons": "^2.0.16",
|
|
18
|
+
"@apia/theme": "^2.0.16",
|
|
19
|
+
"@apia/util": "^2.0.16",
|
|
20
20
|
"@types/d3-array": "^3.0.5",
|
|
21
21
|
"@visx/axis": "^3.1.0",
|
|
22
22
|
"@visx/curve": "^3.0.0",
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"access": "public",
|
|
53
53
|
"registry": "https://registry.npmjs.org/"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "75fca159990771598d04e86071be635714315c1e"
|
|
56
56
|
}
|