@artsy/palette-charts 39.2.1 → 39.3.0-canary.1417.31465.0

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.
Files changed (42) hide show
  1. package/LICENSE +21 -0
  2. package/package.json +3 -3
  3. package/dist/elements/BarChart/Bar.js +0 -149
  4. package/dist/elements/BarChart/Bar.js.map +0 -1
  5. package/dist/elements/BarChart/BarChart.js +0 -160
  6. package/dist/elements/BarChart/BarChart.js.map +0 -1
  7. package/dist/elements/BarChart/BarChart.story.js +0 -154
  8. package/dist/elements/BarChart/BarChart.story.js.map +0 -1
  9. package/dist/elements/BarChart/index.js +0 -28
  10. package/dist/elements/BarChart/index.js.map +0 -1
  11. package/dist/elements/DataVis/ChartHoverTooltip.js +0 -52
  12. package/dist/elements/DataVis/ChartHoverTooltip.js.map +0 -1
  13. package/dist/elements/DataVis/ChartTooltip.js +0 -68
  14. package/dist/elements/DataVis/ChartTooltip.js.map +0 -1
  15. package/dist/elements/DataVis/MousePositionContext.js +0 -52
  16. package/dist/elements/DataVis/MousePositionContext.js.map +0 -1
  17. package/dist/elements/DataVis/useIntersectionObserver.js +0 -67
  18. package/dist/elements/DataVis/useIntersectionObserver.js.map +0 -1
  19. package/dist/elements/DataVis/utils/SharedTypes.js +0 -2
  20. package/dist/elements/DataVis/utils/SharedTypes.js.map +0 -1
  21. package/dist/elements/DataVis/utils/useWrapperWidth.js +0 -41
  22. package/dist/elements/DataVis/utils/useWrapperWidth.js.map +0 -1
  23. package/dist/elements/DonutChart/DonutChart.js +0 -162
  24. package/dist/elements/DonutChart/DonutChart.js.map +0 -1
  25. package/dist/elements/DonutChart/DonutChart.story.js +0 -45
  26. package/dist/elements/DonutChart/DonutChart.story.js.map +0 -1
  27. package/dist/elements/DonutChart/index.js +0 -17
  28. package/dist/elements/DonutChart/index.js.map +0 -1
  29. package/dist/elements/LineChart/Line.js +0 -24
  30. package/dist/elements/LineChart/Line.js.map +0 -1
  31. package/dist/elements/LineChart/LineChart.js +0 -123
  32. package/dist/elements/LineChart/LineChart.js.map +0 -1
  33. package/dist/elements/LineChart/LineChartSVG.js +0 -84
  34. package/dist/elements/LineChart/LineChartSVG.js.map +0 -1
  35. package/dist/elements/LineChart/Point.js +0 -29
  36. package/dist/elements/LineChart/Point.js.map +0 -1
  37. package/dist/elements/LineChart/index.js +0 -17
  38. package/dist/elements/LineChart/index.js.map +0 -1
  39. package/dist/elements/index.js +0 -39
  40. package/dist/elements/index.js.map +0 -1
  41. package/dist/index.js +0 -17
  42. package/dist/index.js.map +0 -1
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2018 Artsy Inc. <dev@artsymail.com>
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@artsy/palette-charts",
3
3
  "sideEffects": false,
4
- "version": "39.2.1",
4
+ "version": "39.3.0-canary.1417.31465.0",
5
5
  "description": "Design system library for react components",
6
6
  "main": "dist/index.js",
7
7
  "publishConfig": {
@@ -13,7 +13,6 @@
13
13
  "clean": "rm -rf dist",
14
14
  "compile": "babel src --source-maps --extensions '.ts,.tsx' --ignore src/**/__tests__,src/**/__stories__ --out-dir dist",
15
15
  "lint": "tslint --project tsconfig.json 'src/*/**'",
16
- "prepublishOnly": "yarn clean && yarn compile && yarn type-declarations",
17
16
  "prettier-project": "yarn prettier --write 'src/**/*.{ts,tsx}'",
18
17
  "release": "auto shipit && node scripts/clean-up-after-auto.js",
19
18
  "test": "yarn type-check && yarn jest --runInBand",
@@ -178,5 +177,6 @@
178
177
  "testEnvironmentOptions": {
179
178
  "url": "http://localhost"
180
179
  }
181
- }
180
+ },
181
+ "gitHead": "51fa9f39272e80616524479d1447822a5a286e08"
182
182
  }
@@ -1,149 +0,0 @@
1
- "use strict";
2
-
3
- function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.Bar = void 0;
8
- var _palette = require("@artsy/palette");
9
- var _react = _interopRequireWildcard(require("react"));
10
- var _styledComponents = _interopRequireDefault(require("styled-components"));
11
- var _ChartHoverTooltip = require("../DataVis/ChartHoverTooltip");
12
- var _templateObject, _templateObject2, _templateObject3;
13
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
16
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
17
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
18
- function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
19
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
20
- function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
21
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
22
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
23
- var MAX_BAR_HEIGHT = 80;
24
- var MIN_BAR_HEIGHT = 10;
25
- var BAR_HEIGHT_RANGE = MAX_BAR_HEIGHT - MIN_BAR_HEIGHT;
26
- // the actual visible bit of the bar
27
- var BarBox = (0, _styledComponents.default)(_palette.Box).withConfig({
28
- displayName: "Bar__BarBox",
29
- componentId: "sc-1p8ufrs-0"
30
- })(["transition:height 0.8s ease;position:relative;background:", ";margin-right:2px;margin-bottom:-1px;:last-child{margin-right:0;}flex:1;cursor:", ";border-top-left-radius:1px;border-top-right-radius:1px;@media (min-width:", "){:hover{background:", ";}}"], function (props) {
31
- return props.isHighlighted ? (0, _palette.color)("black60") : (0, _palette.color)("black10");
32
- }, function (props) {
33
- return props.onClick ? "pointer" : "default";
34
- }, _palette.breakpoints.sm, function (props) {
35
- return props.isHighlighted ? (0, _palette.color)("black60") : (0, _palette.color)("black30");
36
- });
37
- var HighlightLabelPositioner = (0, _styledComponents.default)(_ChartHoverTooltip.BaseTooltipPositioner).withConfig({
38
- displayName: "Bar__HighlightLabelPositioner",
39
- componentId: "sc-1p8ufrs-1"
40
- })(["z-index:1;position:absolute;left:50%;bottom:100%;transition:opacity 0.8s ease;flex-direction:column;align-items:center;"]);
41
- var HighlightLabelBox = (0, _styledComponents.default)(_palette.Flex).withConfig({
42
- displayName: "Bar__HighlightLabelBox",
43
- componentId: "sc-1p8ufrs-2"
44
- })(["", ";position:relative;background-color:", ";border:1px solid ", ";border-radius:2px;text-align:center;"], _palette.media.xs(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: none;\n "]))), (0, _palette.color)("white100"), (0, _palette.color)("black10"));
45
-
46
- // the little dotted line which connects the label to the bar
47
- var LabelLineSvg = _styledComponents.default.svg.withConfig({
48
- displayName: "Bar__LabelLineSvg",
49
- componentId: "sc-1p8ufrs-3"
50
- })(["", ";"], _palette.media.xs(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: none;\n "]))));
51
- var LabelLine = function LabelLine() {
52
- return /*#__PURE__*/_react.default.createElement(LabelLineSvg, {
53
- width: "2",
54
- height: "10",
55
- viewBox: "0 0 2 10"
56
- }, /*#__PURE__*/_react.default.createElement("path", {
57
- fillRule: "evenodd",
58
- clipRule: "evenodd",
59
- d: "M0.5 1.11111V0H1.5V1.11111H0.5ZM0.5 4.44444V2.22222H1.5V4.44444H0.5ZM0.5 7.77778V5.55556H1.5V7.77778H0.5ZM0.5 10V8.88889H1.5V10H0.5Z",
60
- fill: (0, _palette.color)("black30")
61
- }));
62
- };
63
- LabelLine.displayName = "LabelLine";
64
- var HighlightLabel = function HighlightLabel(_ref) {
65
- var children = _ref.children,
66
- onMeasureHighlightLabel = _ref.onMeasureHighlightLabel,
67
- opacity = _ref.opacity,
68
- innerRef = _ref.innerRef;
69
- var ref = (0, _react.useRef)(null);
70
- (0, _react.useEffect)(function () {
71
- onMeasureHighlightLabel(ref.current.offsetHeight);
72
- });
73
- return /*#__PURE__*/_react.default.createElement(HighlightLabelPositioner, {
74
- ref: ref,
75
- style: {
76
- opacity: opacity
77
- }
78
- }, /*#__PURE__*/_react.default.createElement(HighlightLabelBox, {
79
- ref: innerRef
80
- }, children), /*#__PURE__*/_react.default.createElement(LabelLine, null), /*#__PURE__*/_react.default.createElement(TriangleHighlight, null));
81
- };
82
- HighlightLabel.displayName = "HighlightLabel";
83
- var TRIANGLE_HEIGHT = 4;
84
- var TRIANGLE_BOTTOM_PADDING = (0, _palette.space)(0.5);
85
-
86
- // https://css-tricks.com/snippets/css/css-triangle/
87
- var TriangleHighlight = _styledComponents.default.div.withConfig({
88
- displayName: "Bar__TriangleHighlight",
89
- componentId: "sc-1p8ufrs-4"
90
- })(["display:none;", ";width:0;height:0;margin-bottom:", ";border-left:", "px solid transparent;border-right:", "px solid transparent;border-top:", "px solid ", ";"], _palette.media.xs(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: block;\n "]))), TRIANGLE_BOTTOM_PADDING, TRIANGLE_HEIGHT, TRIANGLE_HEIGHT, TRIANGLE_HEIGHT, (0, _palette.color)("black60"));
91
-
92
- /**
93
- * Bar is the main component responsible for rendering an individual bar
94
- * in a bar chart.
95
- *
96
- * It not publically usable
97
- *
98
- * It is responsible for rendering a visible bar of a specific height and 0-2 labels.
99
- *
100
- * If a 'highlight' label is given, the bar will measure itself to help it's parent
101
- * container set an appropriate min-height property. This prevents the highlight
102
- * label from obscuring content above the bar chart.
103
- */
104
-
105
- var Bar = function Bar(_ref2) {
106
- var heightPercent = _ref2.heightPercent,
107
- label = _ref2.label,
108
- highlightLabel = _ref2.highlightLabel,
109
- hasEnteredViewport = _ref2.hasEnteredViewport,
110
- onMeasureHeight = _ref2.onMeasureHeight,
111
- highlightLabelRef = _ref2.highlightLabelRef,
112
- onClick = _ref2.onClick,
113
- onHover = _ref2.onHover;
114
- var _useState = (0, _react.useState)(false),
115
- _useState2 = _slicedToArray(_useState, 2),
116
- hover = _useState2[0],
117
- setHover = _useState2[1];
118
- // Before the bar has entered the view port it will have a height of 0
119
- // but it still needs to know how big it will eventually be once visible,
120
- // to allow the parent BarChart container to set an appropriate min-height
121
- // property
122
- var finalBarHeight =
123
- // bar heights start at MIN_BAR_HEIGHT, unless the intended height === 0
124
- heightPercent === 0 && !highlightLabel ? 0 : MIN_BAR_HEIGHT + BAR_HEIGHT_RANGE / 100 * heightPercent;
125
- var currentHeight = hasEnteredViewport ? finalBarHeight : 0;
126
- return /*#__PURE__*/_react.default.createElement(BarBox, {
127
- style: {
128
- height: currentHeight
129
- },
130
- onMouseEnter: function onMouseEnter() {
131
- return setHover(true);
132
- },
133
- onMouseLeave: function onMouseLeave() {
134
- return setHover(false);
135
- },
136
- isHighlighted: Boolean(highlightLabel),
137
- onClick: onClick,
138
- onMouseOver: onHover
139
- }, highlightLabel && /*#__PURE__*/_react.default.createElement(HighlightLabel, {
140
- innerRef: highlightLabelRef,
141
- opacity: hasEnteredViewport ? 1 : 0,
142
- onMeasureHighlightLabel: function onMeasureHighlightLabel(labelHeight) {
143
- return onMeasureHeight(labelHeight + finalBarHeight);
144
- }
145
- }, highlightLabel), hover && label && /*#__PURE__*/_react.default.createElement(_ChartHoverTooltip.ChartHoverTooltip, null, label));
146
- };
147
- exports.Bar = Bar;
148
- Bar.displayName = "Bar";
149
- //# sourceMappingURL=Bar.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Bar.js","names":["_palette","require","_react","_interopRequireWildcard","_styledComponents","_interopRequireDefault","_ChartHoverTooltip","_templateObject","_templateObject2","_templateObject3","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_taggedTemplateLiteral","strings","raw","freeze","defineProperties","MAX_BAR_HEIGHT","MIN_BAR_HEIGHT","BAR_HEIGHT_RANGE","BarBox","styled","Box","withConfig","displayName","componentId","props","isHighlighted","color","onClick","breakpoints","sm","HighlightLabelPositioner","BaseTooltipPositioner","HighlightLabelBox","Flex","media","xs","LabelLineSvg","svg","LabelLine","createElement","width","height","viewBox","fillRule","clipRule","d","fill","HighlightLabel","_ref","children","onMeasureHighlightLabel","opacity","innerRef","ref","useRef","useEffect","current","offsetHeight","style","TriangleHighlight","TRIANGLE_HEIGHT","TRIANGLE_BOTTOM_PADDING","space","div","Bar","_ref2","heightPercent","label","highlightLabel","hasEnteredViewport","onMeasureHeight","highlightLabelRef","onHover","_useState","useState","_useState2","hover","setHover","finalBarHeight","currentHeight","onMouseEnter","onMouseLeave","Boolean","onMouseOver","labelHeight","ChartHoverTooltip","exports"],"sources":["../../../src/elements/BarChart/Bar.tsx"],"sourcesContent":["import { Box, breakpoints, color, Flex, media, space } from \"@artsy/palette\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport {\n BaseTooltipPositioner,\n ChartHoverTooltip,\n} from \"../DataVis/ChartHoverTooltip\"\n\nconst MAX_BAR_HEIGHT = 80\nconst MIN_BAR_HEIGHT = 10\nconst BAR_HEIGHT_RANGE = MAX_BAR_HEIGHT - MIN_BAR_HEIGHT\n\ninterface BarBoxProps {\n isHighlighted?: boolean\n}\n\n// the actual visible bit of the bar\nconst BarBox = styled(Box)<BarBoxProps>`\n transition: height 0.8s ease;\n position: relative;\n background: ${(props: BarBoxProps) =>\n props.isHighlighted ? color(\"black60\") : color(\"black10\")};\n margin-right: 2px;\n margin-bottom: -1px;\n :last-child {\n margin-right: 0;\n }\n flex: 1;\n cursor: ${(props) => ((props as any).onClick ? \"pointer\" : \"default\")};\n border-top-left-radius: 1px;\n border-top-right-radius: 1px;\n @media (min-width: ${breakpoints.sm}) {\n :hover {\n background: ${(props: BarBoxProps) =>\n props.isHighlighted ? color(\"black60\") : color(\"black30\")};\n }\n }\n`\n\nconst HighlightLabelPositioner = styled(BaseTooltipPositioner)`\n z-index: 1;\n position: absolute;\n left: 50%;\n bottom: 100%;\n transition: opacity 0.8s ease;\n flex-direction: column;\n align-items: center;\n`\nconst HighlightLabelBox = styled(Flex)`\n ${media.xs`\n display: none;\n `};\n position: relative;\n background-color: ${color(\"white100\")};\n border: 1px solid ${color(\"black10\")};\n border-radius: 2px;\n text-align: center;\n`\n\n// the little dotted line which connects the label to the bar\nconst LabelLineSvg = styled.svg`\n ${media.xs`\n display: none;\n `};\n`\nconst LabelLine = () => (\n <LabelLineSvg width=\"2\" height=\"10\" viewBox=\"0 0 2 10\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M0.5 1.11111V0H1.5V1.11111H0.5ZM0.5 4.44444V2.22222H1.5V4.44444H0.5ZM0.5 7.77778V5.55556H1.5V7.77778H0.5ZM0.5 10V8.88889H1.5V10H0.5Z\"\n fill={color(\"black30\")}\n />\n </LabelLineSvg>\n)\n\nconst HighlightLabel = ({\n children,\n onMeasureHighlightLabel,\n opacity,\n innerRef,\n}: {\n children: React.ReactNode\n // this label is absolutely positioned and it might obscure content above the\n // bar chart if it gets too tall. So it needs to measure itself to let the\n // parent BarChart set an appropriate min-height.\n onMeasureHighlightLabel: (height: number) => void\n opacity: number\n innerRef: React.RefObject<HTMLDivElement>\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n useEffect(() => {\n onMeasureHighlightLabel(ref.current.offsetHeight)\n })\n return (\n <HighlightLabelPositioner ref={ref as any} style={{ opacity }}>\n <HighlightLabelBox ref={innerRef as any}>{children}</HighlightLabelBox>\n <LabelLine />\n <TriangleHighlight />\n </HighlightLabelPositioner>\n )\n}\n\nconst TRIANGLE_HEIGHT = 4\nconst TRIANGLE_BOTTOM_PADDING = space(0.5)\n\n// https://css-tricks.com/snippets/css/css-triangle/\nconst TriangleHighlight = styled.div`\n display: none;\n ${media.xs`\n display: block;\n `};\n width: 0;\n height: 0;\n margin-bottom: ${TRIANGLE_BOTTOM_PADDING};\n border-left: ${TRIANGLE_HEIGHT}px solid transparent;\n border-right: ${TRIANGLE_HEIGHT}px solid transparent;\n border-top: ${TRIANGLE_HEIGHT}px solid ${color(\"black60\")};\n`\n\n/**\n * Bar is the main component responsible for rendering an individual bar\n * in a bar chart.\n *\n * It not publically usable\n *\n * It is responsible for rendering a visible bar of a specific height and 0-2 labels.\n *\n * If a 'highlight' label is given, the bar will measure itself to help it's parent\n * container set an appropriate min-height property. This prevents the highlight\n * label from obscuring content above the bar chart.\n */\n\nexport const Bar = ({\n heightPercent,\n label,\n highlightLabel,\n hasEnteredViewport,\n onMeasureHeight,\n highlightLabelRef,\n onClick,\n onHover,\n}: {\n heightPercent: number\n label: React.ReactNode\n axisLabelX: React.ReactNode\n highlightLabel?: React.ReactNode\n hasEnteredViewport: boolean\n onMeasureHeight?: (height: number) => void\n highlightLabelRef?: React.RefObject<HTMLDivElement>\n onClick?: any\n onHover?: any\n}) => {\n const [hover, setHover] = useState(false)\n // Before the bar has entered the view port it will have a height of 0\n // but it still needs to know how big it will eventually be once visible,\n // to allow the parent BarChart container to set an appropriate min-height\n // property\n const finalBarHeight =\n // bar heights start at MIN_BAR_HEIGHT, unless the intended height === 0\n heightPercent === 0 && !highlightLabel\n ? 0\n : MIN_BAR_HEIGHT + (BAR_HEIGHT_RANGE / 100) * heightPercent\n const currentHeight = hasEnteredViewport ? finalBarHeight : 0\n\n return (\n <BarBox\n style={{ height: currentHeight }}\n onMouseEnter={() => setHover(true)}\n onMouseLeave={() => setHover(false)}\n isHighlighted={Boolean(highlightLabel)}\n onClick={onClick}\n onMouseOver={onHover}\n >\n {highlightLabel && (\n <HighlightLabel\n innerRef={highlightLabelRef}\n opacity={hasEnteredViewport ? 1 : 0}\n onMeasureHighlightLabel={(labelHeight) =>\n onMeasureHeight(labelHeight + finalBarHeight)\n }\n >\n {highlightLabel}\n </HighlightLabel>\n )}\n {hover && label && <ChartHoverTooltip>{label}</ChartHoverTooltip>}\n </BarBox>\n )\n}\n"],"mappings":"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"}
@@ -1,160 +0,0 @@
1
- "use strict";
2
-
3
- function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.BarChart = void 0;
8
- var _palette = require("@artsy/palette");
9
- var _themeGet = require("@styled-system/theme-get");
10
- var _react = _interopRequireWildcard(require("react"));
11
- var _styledComponents = _interopRequireDefault(require("styled-components"));
12
- var _ChartTooltip = require("../DataVis/ChartTooltip");
13
- var _MousePositionContext = require("../DataVis/MousePositionContext");
14
- var _useIntersectionObserver = require("../DataVis/useIntersectionObserver");
15
- var _Bar = require("./Bar");
16
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
18
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
- function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
20
- function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
21
- function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
22
- function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
23
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
24
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
25
- function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
26
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
27
- function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
28
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
29
- var ChartContainer = (0, _styledComponents.default)(_palette.Flex).withConfig({
30
- displayName: "BarChart__ChartContainer",
31
- componentId: "sc-1317yz6-0"
32
- })(["border-bottom:1px solid ", ";"], (0, _themeGet.themeGet)("colors.black10"));
33
- function useHighlightLabelPositionConstraints(wrapperDiv, labelDiv) {
34
- // Constrain highlight label to be within the bounds of the graph
35
- (0, _react.useEffect)(function () {
36
- if (!wrapperDiv || !labelDiv) {
37
- return;
38
- }
39
- // reset highlight label position
40
- labelDiv.style.left = null;
41
- labelDiv.style.right = null;
42
- // force layout to find centered position
43
- labelDiv.offsetWidth;
44
- var wrapperRect = wrapperDiv.getBoundingClientRect();
45
- var labelRect = labelDiv.getBoundingClientRect();
46
-
47
- // check for overlap with BarChart left bound
48
- var labelLeftOffset = wrapperRect.left - labelRect.left;
49
- if (labelLeftOffset > 0) {
50
- // label is too far to the left, compensate
51
- labelDiv.style.left = labelLeftOffset + "px";
52
- return;
53
- }
54
- // check for overlap with BarChart right bound
55
- var labelRightOffset = labelRect.right - wrapperRect.right;
56
- if (labelRightOffset > 0) {
57
- // label is too far to the right, compensate
58
- labelDiv.style.right = labelRightOffset + "px";
59
- }
60
- });
61
- }
62
- /**
63
- * BarChart is a component which displays some bars of varying heights in a row.
64
- * Useful for histograms etc.
65
- * @param props props
66
- */
67
- var BarChart = function BarChart(_ref) {
68
- var bars = _ref.bars,
69
- minLabel = _ref.minLabel,
70
- maxLabel = _ref.maxLabel;
71
- var highlightLabelRef = (0, _react.useRef)(null);
72
- var _useState = (0, _react.useState)(false),
73
- _useState2 = _slicedToArray(_useState, 2),
74
- hasEnteredViewport = _useState2[0],
75
- setHasEnteredViewport = _useState2[1];
76
- var _useIntersectionObser = (0, _useIntersectionObserver.useIntersectionObserver)({
77
- once: true,
78
- options: {
79
- threshold: 0.2
80
- },
81
- onIntersection: function onIntersection() {
82
- setHasEnteredViewport(true);
83
- }
84
- }),
85
- wrapperRef = _useIntersectionObser.ref;
86
- useHighlightLabelPositionConstraints(wrapperRef.current, highlightLabelRef.current);
87
- var _useState3 = (0, _react.useState)(0),
88
- _useState4 = _slicedToArray(_useState3, 2),
89
- minHeight = _useState4[0],
90
- setMinHeight = _useState4[1];
91
- var maxValue = Math.max.apply(Math, _toConsumableArray(bars.map(function (_ref2) {
92
- var value = _ref2.value;
93
- return value;
94
- })));
95
- var allZero = bars.every(function (item) {
96
- return item.value === 0;
97
- });
98
- return /*#__PURE__*/_react.default.createElement(_MousePositionContext.ProvideMousePosition, null, /*#__PURE__*/_react.default.createElement(_palette.Flex, {
99
- flexDirection: "column",
100
- ref: wrapperRef,
101
- flexGrow: 1,
102
- id: "flex-wrapper"
103
- }, /*#__PURE__*/_react.default.createElement(ChartContainer, {
104
- height: "80px",
105
- alignItems: "flex-end",
106
- mb: 0.5,
107
- style: {
108
- minHeight: minHeight
109
- }
110
- }, bars.map(function (_ref3, index) {
111
- var value = _ref3.value,
112
- label = _ref3.label,
113
- axisLabelX = _ref3.axisLabelX,
114
- highlightLabel = _ref3.highlightLabel,
115
- onClick = _ref3.onClick,
116
- onHover = _ref3.onHover;
117
- var heightPercent = maxValue === 0 ? 100 : 100 / maxValue * value;
118
- return /*#__PURE__*/_react.default.createElement(_Bar.Bar, {
119
- key: index,
120
- heightPercent: allZero ? 0 : heightPercent,
121
- label: (0, _ChartTooltip.coerceTooltip)(label),
122
- axisLabelX: axisLabelX,
123
- highlightLabelRef: highlightLabelRef,
124
- highlightLabel: (0, _ChartTooltip.coerceTooltip)(highlightLabel),
125
- hasEnteredViewport: hasEnteredViewport,
126
- onMeasureHeight: highlightLabel ? setMinHeight : null,
127
- onClick: onClick,
128
- onHover: onHover
129
- });
130
- })), /*#__PURE__*/_react.default.createElement(_palette.Flex, {
131
- justifyContent: "space-between"
132
- }, /*#__PURE__*/_react.default.createElement(_palette.Text, {
133
- color: "black60",
134
- variant: "xs"
135
- }, minLabel), /*#__PURE__*/_react.default.createElement(_palette.Text, {
136
- color: "black60",
137
- variant: "xs"
138
- }, maxLabel)), bars.filter(function (bar) {
139
- return bar.axisLabelX;
140
- }).length > 0 && /*#__PURE__*/_react.default.createElement(_palette.Flex, null, bars.map(function (_ref4, i) {
141
- var axisLabelX = _ref4.axisLabelX;
142
- return /*#__PURE__*/_react.default.createElement(BarAxisLabelContainer, {
143
- key: i
144
- }, /*#__PURE__*/_react.default.createElement(AxisLabelX, {
145
- color: "black60",
146
- variant: "xs"
147
- }, axisLabelX));
148
- }))));
149
- };
150
- exports.BarChart = BarChart;
151
- BarChart.displayName = "BarChart";
152
- var BarAxisLabelContainer = _styledComponents.default.div.withConfig({
153
- displayName: "BarChart__BarAxisLabelContainer",
154
- componentId: "sc-1317yz6-1"
155
- })(["flex:1;min-height:", ";position:relative;"], (0, _themeGet.themeGet)("space.2"));
156
- var AxisLabelX = (0, _styledComponents.default)(_palette.Text).withConfig({
157
- displayName: "BarChart__AxisLabelX",
158
- componentId: "sc-1317yz6-2"
159
- })(["position:absolute;text-align:center;white-space:nowrap;left:50%;transform:translateX(-50%);"]);
160
- //# sourceMappingURL=BarChart.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BarChart.js","names":["_palette","require","_themeGet","_react","_interopRequireWildcard","_styledComponents","_interopRequireDefault","_ChartTooltip","_MousePositionContext","_useIntersectionObserver","_Bar","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","iter","Symbol","iterator","Array","from","isArray","_arrayLikeToArray","_slicedToArray","i","_arrayWithHoles","_iterableToArrayLimit","_nonIterableRest","o","minLen","n","toString","slice","constructor","name","test","len","length","arr2","_i","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","ChartContainer","styled","Flex","withConfig","displayName","componentId","themeGet","useHighlightLabelPositionConstraints","wrapperDiv","labelDiv","useEffect","style","left","right","offsetWidth","wrapperRect","getBoundingClientRect","labelRect","labelLeftOffset","labelRightOffset","BarChart","_ref","bars","minLabel","maxLabel","highlightLabelRef","useRef","_useState","useState","_useState2","hasEnteredViewport","setHasEnteredViewport","_useIntersectionObser","useIntersectionObserver","once","options","threshold","onIntersection","wrapperRef","ref","current","_useState3","_useState4","minHeight","setMinHeight","maxValue","Math","max","apply","map","_ref2","allZero","every","item","createElement","ProvideMousePosition","flexDirection","flexGrow","id","height","alignItems","mb","_ref3","index","label","axisLabelX","highlightLabel","onClick","onHover","heightPercent","Bar","coerceTooltip","onMeasureHeight","justifyContent","Text","color","variant","filter","bar","_ref4","BarAxisLabelContainer","AxisLabelX","exports","div"],"sources":["../../../src/elements/BarChart/BarChart.tsx"],"sourcesContent":["import { Flex, Text } from \"@artsy/palette\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { ChartTooltipProps, coerceTooltip } from \"../DataVis/ChartTooltip\"\nimport { ProvideMousePosition } from \"../DataVis/MousePositionContext\"\nimport { useIntersectionObserver } from \"../DataVis/useIntersectionObserver\"\nimport { Bar } from \"./Bar\"\n\nconst ChartContainer = styled(Flex)`\n border-bottom: 1px solid ${themeGet(\"colors.black10\")};\n`\n\nfunction useHighlightLabelPositionConstraints(\n wrapperDiv: HTMLDivElement | null,\n labelDiv: HTMLDivElement | null\n) {\n // Constrain highlight label to be within the bounds of the graph\n useEffect(() => {\n if (!wrapperDiv || !labelDiv) {\n return\n }\n // reset highlight label position\n labelDiv.style.left = null\n labelDiv.style.right = null\n // force layout to find centered position\n labelDiv.offsetWidth\n\n const wrapperRect = wrapperDiv.getBoundingClientRect()\n const labelRect = labelDiv.getBoundingClientRect()\n\n // check for overlap with BarChart left bound\n const labelLeftOffset = wrapperRect.left - labelRect.left\n if (labelLeftOffset > 0) {\n // label is too far to the left, compensate\n labelDiv.style.left = labelLeftOffset + \"px\"\n return\n }\n // check for overlap with BarChart right bound\n const labelRightOffset = labelRect.right - wrapperRect.right\n if (labelRightOffset > 0) {\n // label is too far to the right, compensate\n labelDiv.style.right = labelRightOffset + \"px\"\n }\n })\n}\n\nexport interface BarDescriptor {\n value: number\n label?: React.ReactNode | ChartTooltipProps\n axisLabelX?: React.ReactNode\n highlightLabel?: React.ReactNode | ChartTooltipProps\n onClick?: any\n onHover?: any\n}\n\nexport interface BarChartProps {\n bars: BarDescriptor[]\n minLabel: React.ReactNode\n maxLabel: React.ReactNode\n}\n/**\n * BarChart is a component which displays some bars of varying heights in a row.\n * Useful for histograms etc.\n * @param props props\n */\nexport const BarChart = ({ bars, minLabel, maxLabel }: BarChartProps) => {\n const highlightLabelRef = useRef<HTMLDivElement>(null)\n const [hasEnteredViewport, setHasEnteredViewport] = useState(false)\n\n const { ref: wrapperRef } = useIntersectionObserver({\n once: true,\n options: { threshold: 0.2 },\n onIntersection: () => {\n setHasEnteredViewport(true)\n },\n })\n\n useHighlightLabelPositionConstraints(\n wrapperRef.current as HTMLDivElement,\n highlightLabelRef.current\n )\n\n const [minHeight, setMinHeight] = useState(0)\n const maxValue = Math.max(...bars.map(({ value }) => value))\n const allZero = bars.every((item) => item.value === 0)\n return (\n <ProvideMousePosition>\n <Flex\n flexDirection=\"column\"\n ref={wrapperRef as any}\n flexGrow={1}\n id=\"flex-wrapper\"\n >\n <ChartContainer\n height=\"80px\"\n alignItems=\"flex-end\"\n mb={0.5}\n style={{ minHeight }}\n >\n {bars.map(\n (\n { value, label, axisLabelX, highlightLabel, onClick, onHover },\n index\n ) => {\n const heightPercent =\n maxValue === 0 ? 100 : (100 / maxValue) * value\n return (\n <Bar\n key={index}\n heightPercent={allZero ? 0 : heightPercent}\n label={coerceTooltip(label)}\n axisLabelX={axisLabelX}\n highlightLabelRef={highlightLabelRef}\n highlightLabel={coerceTooltip(highlightLabel)}\n hasEnteredViewport={hasEnteredViewport}\n onMeasureHeight={highlightLabel ? setMinHeight : null}\n onClick={onClick}\n onHover={onHover}\n />\n )\n }\n )}\n </ChartContainer>\n\n <Flex justifyContent=\"space-between\">\n <Text color=\"black60\" variant=\"xs\">\n {minLabel}\n </Text>\n\n <Text color=\"black60\" variant=\"xs\">\n {maxLabel}\n </Text>\n </Flex>\n\n {bars.filter((bar) => bar.axisLabelX).length > 0 && (\n <Flex>\n {bars.map(({ axisLabelX }, i) => (\n <BarAxisLabelContainer key={i}>\n <AxisLabelX color=\"black60\" variant=\"xs\">\n {axisLabelX}\n </AxisLabelX>\n </BarAxisLabelContainer>\n ))}\n </Flex>\n )}\n </Flex>\n </ProvideMousePosition>\n )\n}\n\nconst BarAxisLabelContainer = styled.div`\n flex: 1;\n min-height: ${themeGet(\"space.2\")};\n position: relative;\n`\n\nconst AxisLabelX = styled(Text)`\n position: absolute;\n text-align: center;\n white-space: nowrap;\n left: 50%;\n transform: translateX(-50%);\n`\n"],"mappings":"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"}
@@ -1,154 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.Default = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _BarChart = require("./BarChart");
9
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
- var _default = {
11
- title: "Components/BarChart"
12
- };
13
- exports.default = _default;
14
- var Default = function Default() {
15
- return /*#__PURE__*/_react.default.createElement(_BarChart.BarChart, {
16
- minLabel: "$0",
17
- maxLabel: "$30,000",
18
- bars: BARS
19
- });
20
- };
21
- exports.Default = Default;
22
- Default.displayName = "Default";
23
- var BARS = [{
24
- value: 1,
25
- label: {
26
- title: "$0–$1,500",
27
- description: "1 work"
28
- }
29
- }, {
30
- value: 1,
31
- label: {
32
- title: "$1,500–$3,000",
33
- description: "1 work"
34
- }
35
- }, {
36
- value: 1,
37
- label: {
38
- title: "$3,000–$4,500",
39
- description: "1 work"
40
- }
41
- }, {
42
- value: 1,
43
- label: {
44
- title: "$4,500–$6,000",
45
- description: "1 work"
46
- }
47
- }, {
48
- value: 4,
49
- label: {
50
- title: "$6,000–$7,500",
51
- description: "4 works"
52
- }
53
- }, {
54
- value: 10,
55
- label: {
56
- title: "$7,500–$9,000",
57
- description: "10 works"
58
- }
59
- }, {
60
- value: 42,
61
- label: {
62
- title: "$9,000–$10,500",
63
- description: "42 works"
64
- }
65
- }, {
66
- value: 0,
67
- label: {
68
- title: "$10,500–$12,000",
69
- description: "0 works"
70
- }
71
- }, {
72
- value: 216,
73
- label: {
74
- title: "$12,000–$13,500",
75
- description: "216 works"
76
- }
77
- }, {
78
- value: 1,
79
- label: {
80
- title: "$13,500–$15,000",
81
- description: "1 work"
82
- }
83
- }, {
84
- value: 201,
85
- label: {
86
- title: "$15,000–$16,500",
87
- description: "201 works"
88
- },
89
- highlightLabel: {
90
- title: "$15,000–$16,500",
91
- description: "This work"
92
- }
93
- }, {
94
- value: 0,
95
- label: {
96
- title: "$16,500–$18,000",
97
- description: "0 works"
98
- }
99
- }, {
100
- value: 113,
101
- label: {
102
- title: "$18,000–$19,500",
103
- description: "113 works"
104
- }
105
- }, {
106
- value: 4,
107
- label: {
108
- title: "$19,500–$21,000",
109
- description: "4 works"
110
- }
111
- }, {
112
- value: 2,
113
- label: {
114
- title: "$21,000–$22,500",
115
- description: "2 works"
116
- }
117
- }, {
118
- value: 6,
119
- label: {
120
- title: "$22,500–$24,000",
121
- description: "6 works"
122
- }
123
- }, {
124
- value: 37,
125
- label: {
126
- title: "$24,000–$25,500",
127
- description: "37 works"
128
- }
129
- }, {
130
- value: 1,
131
- label: {
132
- title: "$25,500–$27,000",
133
- description: "1 work"
134
- }
135
- }, {
136
- value: 3,
137
- label: {
138
- title: "$27,000–$28,500",
139
- description: "3 works"
140
- }
141
- }, {
142
- value: 0,
143
- label: {
144
- title: "$28,500–$30,000",
145
- description: "0 works"
146
- }
147
- }, {
148
- value: 0,
149
- label: {
150
- title: "$30,000+",
151
- description: "0 works"
152
- }
153
- }];
154
- //# sourceMappingURL=BarChart.story.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BarChart.story.js","names":["_react","_interopRequireDefault","require","_BarChart","obj","__esModule","default","_default","title","exports","Default","createElement","BarChart","minLabel","maxLabel","bars","BARS","displayName","value","label","description","highlightLabel"],"sources":["../../../src/elements/BarChart/BarChart.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { BarChart } from \"./BarChart\"\n\nexport default {\n title: \"Components/BarChart\",\n}\n\nexport const Default = () => {\n return <BarChart minLabel=\"$0\" maxLabel=\"$30,000\" bars={BARS} />\n}\n\nconst BARS = [\n {\n value: 1,\n label: {\n title: \"$0–$1,500\",\n description: \"1 work\",\n },\n },\n {\n value: 1,\n label: {\n title: \"$1,500–$3,000\",\n description: \"1 work\",\n },\n },\n {\n value: 1,\n label: {\n title: \"$3,000–$4,500\",\n description: \"1 work\",\n },\n },\n {\n value: 1,\n label: {\n title: \"$4,500–$6,000\",\n description: \"1 work\",\n },\n },\n {\n value: 4,\n label: {\n title: \"$6,000–$7,500\",\n description: \"4 works\",\n },\n },\n {\n value: 10,\n label: {\n title: \"$7,500–$9,000\",\n description: \"10 works\",\n },\n },\n {\n value: 42,\n label: {\n title: \"$9,000–$10,500\",\n description: \"42 works\",\n },\n },\n {\n value: 0,\n label: {\n title: \"$10,500–$12,000\",\n description: \"0 works\",\n },\n },\n {\n value: 216,\n label: {\n title: \"$12,000–$13,500\",\n description: \"216 works\",\n },\n },\n {\n value: 1,\n label: {\n title: \"$13,500–$15,000\",\n description: \"1 work\",\n },\n },\n {\n value: 201,\n label: {\n title: \"$15,000–$16,500\",\n description: \"201 works\",\n },\n highlightLabel: {\n title: \"$15,000–$16,500\",\n description: \"This work\",\n },\n },\n {\n value: 0,\n label: {\n title: \"$16,500–$18,000\",\n description: \"0 works\",\n },\n },\n {\n value: 113,\n label: {\n title: \"$18,000–$19,500\",\n description: \"113 works\",\n },\n },\n {\n value: 4,\n label: {\n title: \"$19,500–$21,000\",\n description: \"4 works\",\n },\n },\n {\n value: 2,\n label: {\n title: \"$21,000–$22,500\",\n description: \"2 works\",\n },\n },\n {\n value: 6,\n label: {\n title: \"$22,500–$24,000\",\n description: \"6 works\",\n },\n },\n {\n value: 37,\n label: {\n title: \"$24,000–$25,500\",\n description: \"37 works\",\n },\n },\n {\n value: 1,\n label: {\n title: \"$25,500–$27,000\",\n description: \"1 work\",\n },\n },\n {\n value: 3,\n label: {\n title: \"$27,000–$28,500\",\n description: \"3 works\",\n },\n },\n {\n value: 0,\n label: {\n title: \"$28,500–$30,000\",\n description: \"0 works\",\n },\n },\n {\n value: 0,\n label: {\n title: \"$30,000+\",\n description: \"0 works\",\n },\n },\n]\n"],"mappings":"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"}
@@ -1,28 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- var _BarChart = require("./BarChart");
7
- Object.keys(_BarChart).forEach(function (key) {
8
- if (key === "default" || key === "__esModule") return;
9
- if (key in exports && exports[key] === _BarChart[key]) return;
10
- Object.defineProperty(exports, key, {
11
- enumerable: true,
12
- get: function get() {
13
- return _BarChart[key];
14
- }
15
- });
16
- });
17
- var _Bar = require("./Bar");
18
- Object.keys(_Bar).forEach(function (key) {
19
- if (key === "default" || key === "__esModule") return;
20
- if (key in exports && exports[key] === _Bar[key]) return;
21
- Object.defineProperty(exports, key, {
22
- enumerable: true,
23
- get: function get() {
24
- return _Bar[key];
25
- }
26
- });
27
- });
28
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","names":["_BarChart","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_Bar"],"sources":["../../../src/elements/BarChart/index.ts"],"sourcesContent":["export * from \"./BarChart\"\nexport * from \"./Bar\"\n"],"mappings":";;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,SAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,SAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,SAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,IAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,IAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,IAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAC,IAAA,CAAAL,GAAA;IAAA;EAAA;AAAA"}