1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, '__esModule', { value: true });
|
4 |
|
5 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
6 |
|
7 | require('./slicedToArray-0711941d.js');
|
8 | require('./unsupportedIterableToArray-68db1d3b.js');
|
9 | var React = require('react');
|
10 | var React__default = _interopDefault(React);
|
11 | require('./_commonjsHelpers-72d386ba.js');
|
12 | var index = require('./index-b0606964.js');
|
13 | require('./defineProperty-0921a47c.js');
|
14 | require('./toConsumableArray-d8a4a2c3.js');
|
15 | var _styled = require('styled-components');
|
16 | var _styled__default = _interopDefault(_styled);
|
17 | require('./getPrototypeOf-2a661a20.js');
|
18 | require('./color.js');
|
19 | require('./components.js');
|
20 | require('./contains-component.js');
|
21 | require('./css.js');
|
22 | require('./dayjs.min-e07657bf.js');
|
23 | require('./date.js');
|
24 | require('./miscellaneous.js');
|
25 | require('./environment.js');
|
26 | require('./font.js');
|
27 | require('./math-f4029164.js');
|
28 | require('./characters.js');
|
29 | require('./format.js');
|
30 | require('./keycodes.js');
|
31 | require('./url.js');
|
32 | require('./web3.js');
|
33 | var constants = require('./constants.js');
|
34 | require('./breakpoints.js');
|
35 | require('./springs.js');
|
36 | var textStyles = require('./text-styles.js');
|
37 | require('./theme-dark.js');
|
38 | require('./theme-light.js');
|
39 | var Theme = require('./Theme.js');
|
40 |
|
41 | var _StyledDiv = _styled__default("div").withConfig({
|
42 | displayName: "Distribution___StyledDiv",
|
43 | componentId: "r4l1i4-0"
|
44 | })(["margin-bottom:", "px;"], function (p) {
|
45 | return p._css;
|
46 | });
|
47 |
|
48 | var _StyledH = _styled__default("h1").withConfig({
|
49 | displayName: "Distribution___StyledH",
|
50 | componentId: "r4l1i4-1"
|
51 | })(["", ""], function (p) {
|
52 | return p._css2;
|
53 | });
|
54 |
|
55 | var _StyledDiv2 = _styled__default("div").withConfig({
|
56 | displayName: "Distribution___StyledDiv2",
|
57 | componentId: "r4l1i4-2"
|
58 | })(["display:flex;width:100%;overflow:hidden;margin:0 0 ", "px;border-radius:3px;div{height:6px;}"], function (p) {
|
59 | return p._css3;
|
60 | });
|
61 |
|
62 | var _StyledUl = _styled__default("ul").withConfig({
|
63 | displayName: "Distribution___StyledUl",
|
64 | componentId: "r4l1i4-3"
|
65 | })(["margin-top:", "px;"], function (p) {
|
66 | return p._css4;
|
67 | });
|
68 |
|
69 | var _StyledLi = _styled__default("li").withConfig({
|
70 | displayName: "Distribution___StyledLi",
|
71 | componentId: "r4l1i4-4"
|
72 | })(["display:flex;align-items:center;justify-content:space-between;margin-top:10px;list-style:none;"]);
|
73 |
|
74 | var _StyledDiv3 = _styled__default("div").withConfig({
|
75 | displayName: "Distribution___StyledDiv3",
|
76 | componentId: "r4l1i4-5"
|
77 | })(["display:flex;align-items:center;flex-shrink:1;flex-grow:1;"]);
|
78 |
|
79 | var _StyledDiv4 = _styled__default("div").withConfig({
|
80 | displayName: "Distribution___StyledDiv4",
|
81 | componentId: "r4l1i4-6"
|
82 | })(["width:0;flex-shrink:1;flex-grow:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"]);
|
83 |
|
84 | var _StyledDiv5 = _styled__default("div").withConfig({
|
85 | displayName: "Distribution___StyledDiv5",
|
86 | componentId: "r4l1i4-7"
|
87 | })(["padding-left:", "px;flex-shrink:0;"], function (p) {
|
88 | return p._css5;
|
89 | });
|
90 |
|
91 | function Distribution(_ref) {
|
92 | var colors = _ref.colors,
|
93 | showLegend = _ref.showLegend,
|
94 | heading = _ref.heading,
|
95 | itemTitle = _ref.itemTitle,
|
96 | LegendItem = _ref.renderLegendItem,
|
97 | FullLegendItem = _ref.renderFullLegendItem,
|
98 | items = _ref.items;
|
99 | var theme = Theme.useTheme();
|
100 |
|
101 | if (!colors) {
|
102 | colors = [theme.blue, theme.red, theme.brown, theme.yellow, theme.purple, theme.green];
|
103 | }
|
104 |
|
105 | var total = items.reduce(function (total, _ref2) {
|
106 | var percentage = _ref2.percentage;
|
107 | return total + percentage;
|
108 | }, 0);
|
109 |
|
110 | items = items.sort(function (a, b) {
|
111 | return b.percentage - a.percentage;
|
112 | });
|
113 | return React__default.createElement("section", null, heading && React__default.createElement(_StyledDiv, {
|
114 | _css: 1 * constants.GU
|
115 | }, typeof heading === 'string' ? React__default.createElement(_StyledH, {
|
116 | _css2: textStyles.textStyle('body2')
|
117 | }, heading) : heading), React__default.createElement(_StyledDiv2, {
|
118 | _css3: 1 * constants.GU
|
119 | }, items.map(function (_ref3, index) {
|
120 | var item = _ref3.item,
|
121 | percentage = _ref3.percentage;
|
122 | return React__default.createElement("div", {
|
123 | key: index,
|
124 | title: itemTitle({
|
125 | item: item,
|
126 | percentage: percentage,
|
127 | index: index
|
128 | }),
|
129 | style: {
|
130 | width: "".concat(percentage / total * 100, "%"),
|
131 | background: colors[index % colors.length]
|
132 | }
|
133 | });
|
134 | })), showLegend && React__default.createElement(_StyledUl, {
|
135 | _css4: 3 * constants.GU
|
136 | }, items.map(function (_ref4, index) {
|
137 | var item = _ref4.item,
|
138 | percentage = _ref4.percentage;
|
139 | var color = colors[index % colors.length];
|
140 | return React__default.createElement(_StyledLi, {
|
141 | key: index
|
142 | }, FullLegendItem ? React__default.createElement(FullLegendItem, {
|
143 | bullet: React__default.createElement(Bullet, {
|
144 | color: color
|
145 | }),
|
146 | color: color,
|
147 | index: index,
|
148 | item: item,
|
149 | percentage: percentage
|
150 | }) : React__default.createElement(React__default.Fragment, null, React__default.createElement(_StyledDiv3, null, React__default.createElement(Bullet, {
|
151 | color: color
|
152 | }), React__default.createElement(_StyledDiv4, null, React__default.createElement(LegendItem, {
|
153 | color: color,
|
154 | index: index,
|
155 | item: item,
|
156 | percentage: percentage
|
157 | }))), React__default.createElement(_StyledDiv5, {
|
158 | _css5: 1 * constants.GU
|
159 | }, React__default.createElement("strong", null, percentage, "%"))));
|
160 | })));
|
161 | }
|
162 |
|
163 | Distribution.propTypes = {
|
164 | colors: index.PropTypes.array,
|
165 | heading: index.PropTypes.node,
|
166 | itemTitle: index.PropTypes.func,
|
167 | renderLegendItem: index.PropTypes.func,
|
168 | renderFullLegendItem: index.PropTypes.func,
|
169 | showLegend: index.PropTypes.bool,
|
170 | items: index.PropTypes.arrayOf(index.PropTypes.shape({
|
171 | item: index.PropTypes.any.isRequired,
|
172 | percentage: index.PropTypes.number.isRequired
|
173 | })).isRequired
|
174 | };
|
175 | Distribution.defaultProps = {
|
176 | heading: null,
|
177 | itemTitle: function itemTitle(_ref5) {
|
178 | var item = _ref5.item,
|
179 | percentage = _ref5.percentage,
|
180 | index = _ref5.index;
|
181 | return "".concat(typeof item === 'string' ? item : "Item ".concat(index + 1), ": ").concat(percentage, "%");
|
182 | },
|
183 | renderLegendItem: function renderLegendItem(_ref6) {
|
184 | var item = _ref6.item,
|
185 | percentage = _ref6.percentage,
|
186 | index = _ref6.index;
|
187 | return typeof item === 'string' ? item : "Item ".concat(index + 1);
|
188 | },
|
189 | showLegend: true
|
190 | };
|
191 |
|
192 |
|
193 | var _StyledDiv6 = _styled__default("div").withConfig({
|
194 | displayName: "Distribution___StyledDiv6",
|
195 | componentId: "r4l1i4-8"
|
196 | })(["width:", "px;height:", "px;margin-right:", "px;border-radius:50%;flex-shrink:0;"], function (p) {
|
197 | return p._css6;
|
198 | }, function (p) {
|
199 | return p._css7;
|
200 | }, function (p) {
|
201 | return p._css8;
|
202 | });
|
203 |
|
204 | function Bullet(_ref7) {
|
205 | var color = _ref7.color;
|
206 | return React__default.createElement(_StyledDiv6, {
|
207 | style: {
|
208 | background: color
|
209 | },
|
210 | _css6: 1 * constants.GU,
|
211 | _css7: 1 * constants.GU,
|
212 | _css8: 1 * constants.GU
|
213 | });
|
214 | }
|
215 |
|
216 | exports.default = Distribution;
|
217 |
|