| 1 | {"version":3,"file":"Distribution.js","sources":["../src/components/Distribution/Distribution.js"],"sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport { useTheme } from '../../theme'\nimport { GU, textStyle } from '../../style'\n\nfunction Distribution({\n colors,\n showLegend,\n heading,\n itemTitle,\n renderLegendItem: LegendItem,\n renderFullLegendItem: FullLegendItem,\n items,\n}) {\n const theme = useTheme()\n\n if (!colors) {\n colors = [\n theme.blue,\n theme.red,\n theme.brown,\n theme.yellow,\n theme.purple,\n theme.green,\n ]\n }\n\n const total = items.reduce((total, { percentage }) => total + percentage, 0)\n\n // Sort by percentage\n items = items.sort((a, b) => b.percentage - a.percentage)\n\n return (\n <section>\n {heading && (\n <div\n css={`\n margin-bottom: ${1 * GU}px;\n `}\n >\n {typeof heading === 'string' ? (\n <h1 css={textStyle('body2')}>{heading}</h1>\n ) : (\n heading\n )}\n </div>\n )}\n <div\n css={`\n display: flex;\n width: 100%;\n overflow: hidden;\n margin: 0 0 ${1 * GU}px;\n border-radius: 3px;\n div {\n height: 6px;\n }\n `}\n >\n {items.map(({ item, percentage }, index) => (\n <div\n key={index}\n title={itemTitle({ item, percentage, index })}\n style={{\n width: `${(percentage / total) * 100}%`,\n background: colors[index % colors.length],\n }}\n />\n ))}\n </div>\n {showLegend && (\n <ul\n css={`\n margin-top: ${3 * GU}px;\n `}\n >\n {items.map(({ item, percentage }, index) => {\n const color = colors[index % colors.length]\n return (\n <li\n key={index}\n css={`\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 10px;\n list-style: none;\n `}\n >\n {FullLegendItem ? (\n <FullLegendItem\n bullet={<Bullet color={color} />}\n color={color}\n index={index}\n item={item}\n percentage={percentage}\n />\n ) : (\n <React.Fragment>\n <div\n css={`\n display: flex;\n align-items: center;\n flex-shrink: 1;\n flex-grow: 1;\n `}\n >\n <Bullet color={color} />\n <div\n css={`\n width: 0;\n flex-shrink: 1;\n flex-grow: 1;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n `}\n >\n <LegendItem\n color={color}\n index={index}\n item={item}\n percentage={percentage}\n />\n </div>\n </div>\n <div\n css={`\n padding-left: ${1 * GU}px;\n flex-shrink: 0;\n `}\n >\n <strong>{percentage}%</strong>\n </div>\n </React.Fragment>\n )}\n </li>\n )\n })}\n </ul>\n )}\n </section>\n )\n}\n\nDistribution.propTypes = {\n colors: PropTypes.array,\n heading: PropTypes.node,\n itemTitle: PropTypes.func,\n renderLegendItem: PropTypes.func,\n renderFullLegendItem: PropTypes.func,\n showLegend: PropTypes.bool,\n items: PropTypes.arrayOf(\n PropTypes.shape({\n item: PropTypes.any.isRequired,\n percentage: PropTypes.number.isRequired,\n })\n ).isRequired,\n}\n\nDistribution.defaultProps = {\n heading: null,\n itemTitle: ({ item, percentage, index }) => {\n return `${\n typeof item === 'string' ? item : `Item ${index + 1}`\n }: ${percentage}%`\n },\n renderLegendItem: ({ item, percentage, index }) => {\n return typeof item === 'string' ? item : `Item ${index + 1}`\n },\n showLegend: true,\n}\n\n/* eslint-disable react/prop-types */\nfunction Bullet({ color }) {\n return (\n <div\n css={`\n width: ${1 * GU}px;\n height: ${1 * GU}px;\n margin-right: ${1 * GU}px;\n border-radius: 50%;\n flex-shrink: 0;\n `}\n style={{ background: color }}\n />\n )\n}\n/* eslint-enable react/prop-types */\n\nexport default Distribution\n"],"names":["Distribution","colors","showLegend","heading","itemTitle","LegendItem","renderLegendItem","FullLegendItem","renderFullLegendItem","items","theme","useTheme","blue","red","brown","yellow","purple","green","total","reduce","percentage","sort","a","b","React","GU","textStyle","map","index","item","width","background","length","color","propTypes","PropTypes","array","node","func","bool","arrayOf","shape","any","isRequired","number","defaultProps","Bullet"],"mappings":"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"} |