| 1 | {"version":3,"file":"CircleGraph.js","sources":["../src/components/CircleGraph/CircleGraph.js"],"sourcesContent":["import React, { useCallback } from 'react'\nimport PropTypes from 'prop-types'\nimport { Spring, animated } from 'react-spring'\nimport { useTheme } from '../../theme'\nimport { clamp, warnOnce } from '../../utils'\n\nconst STROKE_WIDTH = 4\nconst SIZE_DEFAULT = 80\n\nfunction labelDefault(animValue, value) {\n const parts = {\n suffix: '%',\n value: String(Math.floor(animValue * 100)),\n }\n\n const animPercentage = animValue * 100\n const percentage = value * 100\n\n const lessThanOne =\n percentage > 0 &&\n percentage < 1 &&\n animPercentage > 0 &&\n // We know that the actual percentage is less than 1,\n // so this is to avoid a jump with “1%” without prefix.\n animPercentage < 2\n\n return lessThanOne ? { ...parts, prefix: '<', value: '1' } : parts\n}\n\nfunction labelCompat(parts) {\n if (\n typeof parts === 'string' ||\n typeof parts === 'number' ||\n React.isValidElement(parts)\n ) {\n warnOnce(\n 'CircleGraph:label:string',\n 'CircleGraph: the function passed to the label should not ' +\n 'return a React node anymore: please check the CircleGraph documentation.'\n )\n return { value: String(parts) }\n }\n return parts\n}\n\nfunction CircleGraph({ color, label, size, strokeWidth, value }) {\n const theme = useTheme()\n const length = Math.PI * 2 * (size - strokeWidth)\n const radius = (size - strokeWidth) / 2\n\n if (label === undefined) {\n label = labelDefault\n }\n\n const labelPart = useCallback(\n name => animValue => {\n if (typeof label !== 'function') {\n return null\n }\n\n const cValue = clamp(animValue)\n const parts = labelCompat(label(cValue, value))\n\n return (\n (parts[name] === undefined\n ? labelDefault(cValue, value)[name]\n : parts[name]) || ''\n )\n },\n [label, value]\n )\n\n const colorFn =\n typeof color === 'function' ? color : () => color || theme.accent\n\n return (\n <Spring to={{ progressValue: value }} native>\n {({ progressValue }) => (\n <div\n css={`\n position: relative;\n display: flex;\n align-items: center;\n justify-content center;\n width: ${size}px;\n height: ${size}px;\n `}\n >\n <svg\n css={`\n position: absolute;\n top: 0;\n left: 0;\n `}\n width={size}\n height={size}\n viewBox={`0 0 ${size} ${size}`}\n >\n <circle\n cx={size / 2}\n cy={size / 2}\n r={radius}\n style={{ strokeWidth }}\n fill=\"none\"\n stroke={theme.border}\n />\n <animated.circle\n cx={size / 2}\n cy={size / 2}\n r={radius}\n fill=\"none\"\n strokeLinecap=\"round\"\n strokeDasharray={length}\n strokeWidth={strokeWidth}\n style={{\n stroke: progressValue.interpolate(colorFn),\n strokeDashoffset: progressValue.interpolate(\n t => length - (length * t) / 2\n ),\n }}\n css={`\n transform: rotate(270deg);\n transform-origin: 50% 50%;\n `}\n />\n </svg>\n <div\n css={`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n line-height: 1.2;\n `}\n >\n {typeof label !== 'function'\n ? label\n : label && (\n <div\n css={`\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n transform: translateY(-50%);\n `}\n >\n <div\n css={`\n display: flex;\n align-items: baseline;\n justify-content: center;\n `}\n >\n <animated.div style={{ fontSize: `${size * 0.2}px` }}>\n {progressValue.interpolate(labelPart('prefix'))}\n </animated.div>\n <animated.div style={{ fontSize: `${size * 0.25}px` }}>\n {progressValue.interpolate(labelPart('value'))}\n </animated.div>\n <animated.div\n css={`\n display: flex;\n color: ${theme.surfaceContentSecondary};\n `}\n style={{ fontSize: `${size * 0.13}px` }}\n >\n {progressValue.interpolate(labelPart('suffix'))}\n </animated.div>\n </div>\n <animated.div\n css={`\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n display: flex;\n justify-content: center;\n color: ${theme.surfaceContentSecondary};\n `}\n style={{ fontSize: `${size * 0.1}px` }}\n >\n {progressValue.interpolate(labelPart('secondary'))}\n </animated.div>\n </div>\n )}\n </div>\n </div>\n )}\n </Spring>\n )\n}\n\nCircleGraph.propTypes = {\n color: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n label: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n size: PropTypes.number,\n strokeWidth: PropTypes.number,\n value: PropTypes.number.isRequired,\n}\n\nCircleGraph.defaultProps = {\n size: SIZE_DEFAULT,\n strokeWidth: STROKE_WIDTH,\n}\n\nexport default CircleGraph\n"],"names":["STROKE_WIDTH","SIZE_DEFAULT","labelDefault","animValue","value","parts","suffix","String","Math","floor","animPercentage","percentage","lessThanOne","prefix","labelCompat","React","isValidElement","warnOnce","CircleGraph","color","label","size","strokeWidth","theme","useTheme","length","PI","radius","undefined","labelPart","useCallback","name","cValue","clamp","colorFn","accent","Spring","progressValue","border","stroke","interpolate","strokeDashoffset","t","animated","fontSize","surfaceContentSecondary","propTypes","PropTypes","oneOfType","func","string","node","number","isRequired","defaultProps"],"mappings":"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"} |