| 1 | {"version":3,"file":"LineChart.js","sources":["../src/components/LineChart/LineChart.js"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Spring } from 'react-spring'\nimport PropTypes from '../../proptypes'\nimport { springs } from '../../style'\nimport { unselectable } from '../../utils'\n\nconst LABELS_HEIGHT = 30\nconst WIDTH_DEFAULT = 300\n\nfunction useMeasuredWidth() {\n const ref = useRef()\n const [measuredWidth, setMeasuredWidth] = useState(WIDTH_DEFAULT)\n\n const onResize = useCallback(() => {\n if (ref.current) {\n setMeasuredWidth(ref.current.clientWidth)\n }\n }, [])\n\n const onRef = useCallback(\n element => {\n ref.current = element\n onResize()\n },\n [onResize]\n )\n\n useEffect(() => {\n window.addEventListener('resize', onResize)\n return () => window.removeEventListener('resize', onResize)\n }, [onResize])\n\n return [measuredWidth, onRef]\n}\n\nfunction LineChart({\n animDelay,\n borderColor,\n color,\n dotRadius,\n height,\n label,\n labelColor,\n lines: linesProps,\n reset,\n springConfig,\n total,\n width: widthProps,\n ...props\n}) {\n const [width, onSvgRef] = useMeasuredWidth()\n\n const lines = useMemo(() => {\n return linesProps.map(lineOrValues =>\n Array.isArray(lineOrValues) ? { values: lineOrValues } : lineOrValues\n )\n }, [linesProps])\n\n // the count of provided values\n const valuesCount = useMemo(() => {\n // All the values have the same length, so we can use the first one.\n return lines[0] ? lines[0].values.length : 0\n }, [lines])\n\n // the total amount of values\n const totalCount = useMemo(() => {\n // If no total is provided, the total is the number of provided values.\n return total > 0 && total > valuesCount ? total : valuesCount\n }, [valuesCount, total])\n\n const getX = useCallback(\n index => {\n return (width / Math.max(1, totalCount - 1)) * index\n },\n [width, totalCount]\n )\n\n const getY = useCallback(\n (percentage, progress, height) => {\n const padding = dotRadius + 2\n return height - padding - (height - padding * 2) * percentage * progress\n },\n [dotRadius]\n )\n\n const getLabelPosition = useCallback((index, length) => {\n if (index === 0) return 'start'\n if (index === length - 1) return 'end'\n return 'middle'\n }, [])\n\n const labels =\n label && totalCount > 0 ? [...Array(totalCount).keys()].map(label) : null\n\n const chartHeight = height - (labels ? LABELS_HEIGHT : 0)\n\n const rectangle = (\n <rect\n width={width}\n height={chartHeight}\n rx=\"3\"\n ry=\"3\"\n fill=\"#ffffff\"\n strokeWidth=\"1\"\n stroke={borderColor}\n />\n )\n\n return (\n <Spring\n from={{ progress: 0 }}\n to={{ progress: 1 }}\n config={springConfig}\n delay={animDelay}\n reset={reset}\n >\n {({ progress }) => (\n <svg\n ref={onSvgRef}\n viewBox={`0 0 ${width} ${height}`}\n width={widthProps || 'auto'}\n height=\"auto\"\n css=\"display: block\"\n {...props}\n >\n <mask id=\"chart-mask\">{rectangle}</mask>\n {rectangle}\n\n <g mask=\"url(#chart-mask)\">\n {totalCount > 0 && (\n <path\n d={`\n ${[...new Array(totalCount - 1)].reduce(\n (path, _, index) =>\n `${path} M ${getX(index)},${chartHeight} l 0,-8`,\n ''\n )}\n `}\n stroke={borderColor}\n strokeWidth=\"1\"\n />\n )}\n {lines.map((line, lineIndex) => (\n <g key={`line-plot-${line.id || lineIndex}`}>\n <path\n d={`\n M\n ${getX(0)},\n ${getY(line.values[0], progress, chartHeight)}\n\n ${line.values\n .slice(1)\n .map(\n (val, index) =>\n `L\n ${getX((index + 1) * progress)},\n ${getY(val, progress, chartHeight)}\n `\n )\n .join('')}\n `}\n fill=\"transparent\"\n stroke={line.color || color(lineIndex, { lines })}\n strokeWidth=\"2\"\n />\n {line.values.slice(1, -1).map((val, index) => (\n <circle\n key={index}\n cx={getX(index + 1) * progress}\n cy={getY(val, progress, chartHeight)}\n r={dotRadius}\n fill=\"white\"\n stroke={line.color || color(lineIndex, { lines })}\n strokeWidth=\"1\"\n />\n ))}\n </g>\n ))}\n <line\n x1={getX(valuesCount - 1) * progress}\n y1=\"0\"\n x2={getX(valuesCount - 1) * progress}\n y2={chartHeight}\n stroke=\"#DAEAEF\"\n strokeWidth=\"3\"\n />\n </g>\n {labels && (\n <g transform={`translate(0,${chartHeight})`}>\n {labels.map((label, index) => (\n <text\n key={index}\n x={getX(index)}\n y={LABELS_HEIGHT / 2}\n textAnchor={getLabelPosition(index, labels.length)}\n fill={labelColor}\n css={`\n alignment-baseline: middle;\n font-size: 12px;\n font-weight: 300;\n ${unselectable};\n `}\n >\n {label}\n </text>\n ))}\n </g>\n )}\n </svg>\n )}\n </Spring>\n )\n}\n\nLineChart.propTypes = {\n springConfig: PropTypes._spring,\n total: PropTypes.number,\n width: PropTypes.number,\n height: PropTypes.number,\n dotRadius: PropTypes.number,\n animDelay: PropTypes.number,\n borderColor: PropTypes.string,\n labelColor: PropTypes.string,\n reset: PropTypes.bool,\n lines: PropTypes.arrayOf(\n PropTypes.oneOfType([\n PropTypes.shape({\n id: PropTypes.number,\n values: PropTypes.arrayOf(PropTypes.number).isRequired, // numbers between 0 and 1\n color: PropTypes.string, // overrides the color() prop if set\n }),\n // values can also be passed directly\n PropTypes.arrayOf(PropTypes.number),\n ])\n ),\n label: PropTypes.oneOfType([PropTypes.func, PropTypes._null]),\n color: PropTypes.func,\n}\n\nLineChart.defaultProps = {\n springConfig: springs.lazy,\n total: -1,\n height: 200,\n dotRadius: 7 / 2,\n animDelay: 500,\n reset: false,\n borderColor: 'rgba(209, 209, 209, 0.5)',\n labelColor: '#6d777b',\n lines: [],\n label: index => index + 1,\n color: (index, { lines }) =>\n `hsl(${(index * (360 / lines.length) + 40) % 360}, 60%, 70%)`,\n}\n\nexport default LineChart\n"],"names":["LABELS_HEIGHT","WIDTH_DEFAULT","useMeasuredWidth","ref","useRef","useState","measuredWidth","setMeasuredWidth","onResize","useCallback","current","clientWidth","onRef","element","useEffect","window","addEventListener","removeEventListener","unselectable","LineChart","animDelay","borderColor","color","dotRadius","height","label","labelColor","linesProps","lines","reset","springConfig","total","widthProps","width","props","onSvgRef","useMemo","map","lineOrValues","Array","isArray","values","valuesCount","length","totalCount","getX","index","Math","max","getY","percentage","progress","padding","getLabelPosition","labels","_toConsumableArray","keys","chartHeight","rectangle","React","Spring","reduce","path","_","line","lineIndex","id","slice","val","join","propTypes","PropTypes","_spring","number","string","bool","arrayOf","oneOfType","shape","isRequired","func","_null","defaultProps","springs","lazy"],"mappings":"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"} |