@apia/charts 2.0.13 → 2.0.15
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.
|
@@ -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.15",
|
|
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.15",
|
|
17
|
+
"@apia/icons": "^2.0.15",
|
|
18
|
+
"@apia/theme": "^2.0.15",
|
|
19
|
+
"@apia/util": "^2.0.15",
|
|
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": "51deb588c03985d0aa9e59ef0ba4c7acfe83025a"
|
|
56
56
|
}
|