npm - @artsy/palette-charts - Versions diffs - 17.15.2 → 17.18.0 - Mend

@artsy/palette-charts 17.15.2 → 17.18.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 (24) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,15 @@
+# v17.18.0 (Fri Feb 04 2022)
+#### 🚀  Enhancement
+- feat(icon-button): implements icon button [#1115](https://github.com/artsy/palette/pull/1115) ([@dzucconi](https://github.com/dzucconi))
+#### Authors: 1
+- Damon ([@dzucconi](https://github.com/dzucconi))
+---
 # v17.15.2 (Tue Jan 25 2022)
 #### 🏠  Internal

package/dist/elements/BarChart/Bar.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -19,9 +19,9 @@ var _templateObject, _templateObject2, _templateObject3;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+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); }
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+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; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -31,7 +31,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

package/dist/elements/BarChart/Bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/elements/BarChart/Bar.tsx"],"names":["MAX_BAR_HEIGHT","MIN_BAR_HEIGHT","BAR_HEIGHT_RANGE","BarBox","Box","props","isHighlighted","onClick","breakpoints","sm","HighlightLabelPositioner","BaseTooltipPositioner","HighlightLabelBox","Flex","media","xs","LabelLineSvg","styled","svg","LabelLine","HighlightLabel","children","onMeasureHighlightLabel","opacity","innerRef","ref","current","offsetHeight","TRIANGLE_HEIGHT","TRIANGLE_BOTTOM_PADDING","TriangleHighlight","div","Bar","heightPercent","label","highlightLabel","hasEnteredViewport","onMeasureHeight","highlightLabelRef","onHover","hover","setHover","finalBarHeight","currentHeight","height","Boolean","labelHeight"],"mappings":"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~~AAAA~~,~~kBACsB~~,qBAAS,KAAT,~~CADtB~~;AAAA;AAAA,~~MACGC~~,~~KADH~~;AAAA,~~MACUC~~,~~QADV~~,~~kBAEJ~~;AACA;AACA;AACA;;;AACA,MAAMC,cAAc,GAClB;AACAT,EAAAA,aAAa,KAAK,CAAlB,IAAuB,CAACE,cAAxB,GACI,CADJ,GAEIlC,cAAc,GAAIC,gBAAgB,GAAG,GAApB,GAA2B+B,aAJlD;AAKA,MAAMU,aAAa,GAAGP,kBAAkB,GAAGM,cAAH,GAAoB,CAA5D;AAEA,sBACE,6BAAC,MAAD;AACE,IAAA,KAAK,EAAE;AAAEE,MAAAA,MAAM,EAAED;AAAV,KADT;AAEE,IAAA,YAAY,EAAE;AAAA,aAAMF,QAAQ,CAAC,IAAD,CAAd;AAAA,KAFhB;AAGE,IAAA,YAAY,EAAE;AAAA,aAAMA,QAAQ,CAAC,KAAD,CAAd;AAAA,KAHhB;AAIE,IAAA,aAAa,EAAEI,OAAO,CAACV,cAAD,CAJxB;AAKE,IAAA,OAAO,EAAE5B,OALX;AAME,IAAA,WAAW,EAAEgC;AANf,KAQGJ,cAAc,iBACb,6BAAC,cAAD;AACE,IAAA,QAAQ,EAAEG,iBADZ;AAEE,IAAA,OAAO,EAAEF,kBAAkB,GAAG,CAAH,GAAO,CAFpC;AAGE,IAAA,uBAAuB,EAAE,iCAAAU,WAAW;AAAA,aAClCT,eAAe,CAACS,WAAW,GAAGJ,cAAf,CADmB;AAAA;AAHtC,KAOGP,cAPH,CATJ,EAmBGK,KAAK,IAAIN,KAAT,iBAAkB,6BAAC,oCAAD,QAAoBA,KAApB,CAnBrB,CADF;AAuBD,CAvDM;;;AAAMF,G","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)`\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"],"file":"Bar.js"}
1	+ {"version":3,"sources":["../../../src/elements/BarChart/Bar.tsx"],"names":["MAX_BAR_HEIGHT","MIN_BAR_HEIGHT","BAR_HEIGHT_RANGE","BarBox","Box","props","isHighlighted","onClick","breakpoints","sm","HighlightLabelPositioner","BaseTooltipPositioner","HighlightLabelBox","Flex","media","xs","LabelLineSvg","styled","svg","LabelLine","HighlightLabel","children","onMeasureHighlightLabel","opacity","innerRef","ref","current","offsetHeight","TRIANGLE_HEIGHT","TRIANGLE_BOTTOM_PADDING","TriangleHighlight","div","Bar","heightPercent","label","highlightLabel","hasEnteredViewport","onMeasureHeight","highlightLabelRef","onHover","hover","setHover","finalBarHeight","currentHeight","height","Boolean","labelHeight"],"mappings":"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","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)`\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"],"file":"Bar.js"}

package/dist/elements/BarChart/BarChart.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -23,15 +23,15 @@ var _Bar = require("./Bar");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+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); }
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+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; }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 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."); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
@@ -43,7 +43,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

package/dist/elements/BarChart/BarChart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/elements/BarChart/BarChart.tsx"],"names":["ChartContainer","Flex","useHighlightLabelPositionConstraints","wrapperDiv","labelDiv","style","left","right","offsetWidth","wrapperRect","getBoundingClientRect","labelRect","labelLeftOffset","labelRightOffset","BarChart","bars","minLabel","maxLabel","wrapperRef","highlightLabelRef","current","hasEnteredViewport","minHeight","setMinHeight","maxValue","Math","max","map","value","allZero","every","item","index","label","axisLabelX","highlightLabel","onClick","onHover","heightPercent","filter","bar","length","i","BarAxisLabelContainer","styled","div","AxisLabelX","Sans"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,cAAc,GAAG,+BAAOC,aAAP,CAAH;AAAA;AAAA;AAAA,sCACS,oBAAM,SAAN,CADT,CAApB;;AAIA,SAASC,oCAAT,CACEC,UADF,EAEEC,QAFF,EAGE;AACA;AACA,wBAAU,YAAM;AACd,QAAI,CAACD,UAAD,IAAe,CAACC,QAApB,EAA8B;AAC5B;AACD,KAHa,CAId;;;AACAA,IAAAA,QAAQ,CAACC,KAAT,CAAeC,IAAf,GAAsB,IAAtB;AACAF,IAAAA,QAAQ,CAACC,KAAT,CAAeE,KAAf,GAAuB,IAAvB,CANc,CAOd;;AACAH,IAAAA,QAAQ,CAACI,WAAT;AAEA,QAAMC,WAAW,GAAGN,UAAU,CAACO,qBAAX,EAApB;AACA,QAAMC,SAAS,GAAGP,QAAQ,CAACM,qBAAT,EAAlB,CAXc,CAad;;AACA,QAAME,eAAe,GAAGH,WAAW,CAACH,IAAZ,GAAmBK,SAAS,CAACL,IAArD;;AACA,QAAIM,eAAe,GAAG,CAAtB,EAAyB;AACvB;AACAR,MAAAA,QAAQ,CAACC,KAAT,CAAeC,IAAf,GAAsBM,eAAe,GAAG,IAAxC;AACA;AACD,KAnBa,CAoBd;;;AACA,QAAMC,gBAAgB,GAAGF,SAAS,CAACJ,KAAV,GAAkBE,WAAW,CAACF,KAAvD;;AACA,QAAIM,gBAAgB,GAAG,CAAvB,EAA0B;AACxB;AACAT,MAAAA,QAAQ,CAACC,KAAT,CAAeE,KAAf,GAAuBM,gBAAgB,GAAG,IAA1C;AACD;AACF,GA1BD;AA2BD;;AAgBD;AACA;AACA;AACA;AACA;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAAiD;AAAA,MAA9CC,IAA8C,QAA9CA,IAA8C;AAAA,MAAxCC,QAAwC,QAAxCA,QAAwC;AAAA,MAA9BC,QAA8B,QAA9BA,QAA8B;AACvE,MAAMC,UAAU,GAAG,mBAAuB,IAAvB,CAAnB;AACA,MAAMC,iBAAiB,GAAG,mBAAuB,IAAvB,CAA1B;AAEAjB,EAAAA,oCAAoC,CAClCgB,UAAU,CAACE,OADuB,EAElCD,iBAAiB,CAACC,OAFgB,CAApC;AAKA,MAAMC,kBAAkB,GAAG,kDAAsBH,UAAtB,CAA3B;;~~AATuE~~,~~kBAUrC~~,qBAAS,CAAT,~~CAVqC~~;AAAA;AAAA,~~MAUhEI~~,~~SAVgE~~;AAAA,~~MAUrDC~~,~~YAVqD~~;;~~AAWvE~~,MAAMC,QAAQ,GAAGC,IAAI,CAACC,GAAL,OAAAD,IAAI,qBAAQV,IAAI,CAACY,GAAL,CAAS;AAAA,QAAGC,KAAH,SAAGA,KAAH;AAAA,WAAeA,KAAf;AAAA,GAAT,CAAR,EAArB;AACA,MAAMC,OAAO,GAAGd,IAAI,CAACe,KAAL,CAAW,UAAAC,IAAI;AAAA,WAAIA,IAAI,CAACH,KAAL,KAAe,CAAnB;AAAA,GAAf,CAAhB;AACA,sBACE,6BAAC,0CAAD,qBACE,6BAAC,aAAD;AACE,IAAA,aAAa,EAAC,QADhB;AAEE,IAAA,GAAG,EAAEV,UAFP;AAGE,IAAA,QAAQ,EAAE,CAHZ;AAIE,IAAA,EAAE,EAAC;AAJL,kBAME,6BAAC,cAAD;AACE,IAAA,MAAM,EAAC,MADT;AAEE,IAAA,UAAU,EAAC,UAFb;AAGE,IAAA,EAAE,EAAE,GAHN;AAIE,IAAA,KAAK,EAAE;AAAEI,MAAAA,SAAS,EAATA;AAAF;AAJT,KAMGP,IAAI,CAACY,GAAL,CACC,iBAEEK,KAFF,EAGK;AAAA,QAFDJ,KAEC,SAFDA,KAEC;AAAA,QAFMK,KAEN,SAFMA,KAEN;AAAA,QAFaC,UAEb,SAFaA,UAEb;AAAA,QAFyBC,cAEzB,SAFyBA,cAEzB;AAAA,QAFyCC,OAEzC,SAFyCA,OAEzC;AAAA,QAFkDC,OAElD,SAFkDA,OAElD;AACH,QAAMC,aAAa,GACjBd,QAAQ,KAAK,CAAb,GAAiB,GAAjB,GAAwB,MAAMA,QAAP,GAAmBI,KAD5C;AAEA,wBACE,6BAAC,QAAD;AACE,MAAA,GAAG,EAAEI,KADP;AAEE,MAAA,aAAa,EAAEH,OAAO,GAAG,CAAH,GAAOS,aAF/B;AAGE,MAAA,KAAK,EAAE,iCAAcL,KAAd,CAHT;AAIE,MAAA,UAAU,EAAEC,UAJd;AAKE,MAAA,iBAAiB,EAAEf,iBALrB;AAME,MAAA,cAAc,EAAE,iCAAcgB,cAAd,CANlB;AAOE,MAAA,kBAAkB,EAAEd,kBAPtB;AAQE,MAAA,eAAe,EAAEc,cAAc,GAAGZ,YAAH,GAAkB,IARnD;AASE,MAAA,OAAO,EAAEa,OATX;AAUE,MAAA,OAAO,EAAEC;AAVX,MADF;AAcD,GArBF,CANH,CANF,eAoCE,6BAAC,aAAD;AAAM,IAAA,cAAc,EAAC;AAArB,kBACE,6BAAC,aAAD;AAAM,IAAA,KAAK,EAAC,SAAZ;AAAsB,IAAA,IAAI,EAAC;AAA3B,KACGrB,QADH,CADF,eAIE,6BAAC,aAAD;AAAM,IAAA,KAAK,EAAC,SAAZ;AAAsB,IAAA,IAAI,EAAC;AAA3B,KACGC,QADH,CAJF,CApCF,EA4CGF,IAAI,CAACwB,MAAL,CAAY,UAAAC,GAAG;AAAA,WAAIA,GAAG,CAACN,UAAR;AAAA,GAAf,EAAmCO,MAAnC,GAA4C,CAA5C,iBACC,6BAAC,aAAD,QACG1B,IAAI,CAACY,GAAL,CAAS,iBAAiBe,CAAjB;AAAA,QAAGR,UAAH,SAAGA,UAAH;AAAA,wBACR,6BAAC,qBAAD;AAAuB,MAAA,GAAG,EAAEQ;AAA5B,oBACE,6BAAC,UAAD;AAAY,MAAA,KAAK,EAAC,SAAlB;AAA4B,MAAA,IAAI,EAAC;AAAjC,OACGR,UADH,CADF,CADQ;AAAA,GAAT,CADH,CA7CJ,CADF,CADF;AA4DD,CAzEM;;;AAAMpB,Q;;AA2Eb,IAAM6B,qBAAqB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,oDAEX,oBAAM,CAAN,CAFW,CAA3B;;AAMA,IAAMC,UAAU,GAAG,+BAAOC,aAAP,CAAH;AAAA;AAAA;AAAA,mGAAhB","sourcesContent":["import { color, Flex, Sans, space } from \"@artsy/palette\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { ChartTooltipProps, coerceTooltip } from \"../DataVis/ChartTooltip\"\nimport { ProvideMousePosition } from \"../DataVis/MousePositionContext\"\nimport { useHasEnteredViewport } from \"../DataVis/utils/useHasEnteredViewPort\"\nimport { Bar } from \"./Bar\"\n\nconst ChartContainer = styled(Flex)`\n border-bottom: 1px solid ${color(\"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 wrapperRef = useRef<HTMLDivElement>(null)\n const highlightLabelRef = useRef<HTMLDivElement>(null)\n\n useHighlightLabelPositionConstraints(\n wrapperRef.current,\n highlightLabelRef.current\n )\n\n const hasEnteredViewport = useHasEnteredViewport(wrapperRef)\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 <Flex justifyContent=\"space-between\">\n <Sans color=\"black60\" size=\"2\">\n {minLabel}\n </Sans>\n <Sans color=\"black60\" size=\"2\">\n {maxLabel}\n </Sans>\n </Flex>\n {bars.filter(bar => bar.axisLabelX).length > 0 && (\n <Flex>\n {bars.map(({ axisLabelX }, i) => (\n <BarAxisLabelContainer key={i}>\n <AxisLabelX color=\"black60\" size=\"2\">\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: ${space(2)}px;\n position: relative;\n`\n\nconst AxisLabelX = styled(Sans)`\n position: absolute;\n text-align: center;\n white-space: nowrap;\n left: 50%;\n transform: translateX(-50%);\n`\n"],"file":"BarChart.js"}
1	+ {"version":3,"sources":["../../../src/elements/BarChart/BarChart.tsx"],"names":["ChartContainer","Flex","useHighlightLabelPositionConstraints","wrapperDiv","labelDiv","style","left","right","offsetWidth","wrapperRect","getBoundingClientRect","labelRect","labelLeftOffset","labelRightOffset","BarChart","bars","minLabel","maxLabel","wrapperRef","highlightLabelRef","current","hasEnteredViewport","minHeight","setMinHeight","maxValue","Math","max","map","value","allZero","every","item","index","label","axisLabelX","highlightLabel","onClick","onHover","heightPercent","filter","bar","length","i","BarAxisLabelContainer","styled","div","AxisLabelX","Sans"],"mappings":"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","sourcesContent":["import { color, Flex, Sans, space } from \"@artsy/palette\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { ChartTooltipProps, coerceTooltip } from \"../DataVis/ChartTooltip\"\nimport { ProvideMousePosition } from \"../DataVis/MousePositionContext\"\nimport { useHasEnteredViewport } from \"../DataVis/utils/useHasEnteredViewPort\"\nimport { Bar } from \"./Bar\"\n\nconst ChartContainer = styled(Flex)`\n border-bottom: 1px solid ${color(\"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 wrapperRef = useRef<HTMLDivElement>(null)\n const highlightLabelRef = useRef<HTMLDivElement>(null)\n\n useHighlightLabelPositionConstraints(\n wrapperRef.current,\n highlightLabelRef.current\n )\n\n const hasEnteredViewport = useHasEnteredViewport(wrapperRef)\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 <Flex justifyContent=\"space-between\">\n <Sans color=\"black60\" size=\"2\">\n {minLabel}\n </Sans>\n <Sans color=\"black60\" size=\"2\">\n {maxLabel}\n </Sans>\n </Flex>\n {bars.filter(bar => bar.axisLabelX).length > 0 && (\n <Flex>\n {bars.map(({ axisLabelX }, i) => (\n <BarAxisLabelContainer key={i}>\n <AxisLabelX color=\"black60\" size=\"2\">\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: ${space(2)}px;\n position: relative;\n`\n\nconst AxisLabelX = styled(Sans)`\n position: absolute;\n text-align: center;\n white-space: nowrap;\n left: 50%;\n transform: translateX(-50%);\n`\n"],"file":"BarChart.js"}

package/dist/elements/DataVis/ChartHoverTooltip.js CHANGED Viewed

@@ -1,11 +1,11 @@
 "use strict";
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BaseTooltipPositioner = exports.ChartHoverTooltip = void 0;
+exports.ChartHoverTooltip = exports.BaseTooltipPositioner = void 0;
 var _palette = require("@artsy/palette");
@@ -19,9 +19,9 @@ var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+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); }
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+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; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

package/dist/elements/DataVis/ChartHoverTooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/elements/DataVis/ChartHoverTooltip.tsx"],"names":["LABEL_OFFSET","ChartHoverTooltip","children","ref","MousePositionContext","x","y","current","style","top","offsetHeight","left","BaseTooltipPositioner","Flex","HoverTooltipPositioner","media","xs"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAG,EAArB;AAEA;AACA;AACA;;AACO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACjD,MAAMC,GAAG,GAAG,mBAAO,IAAP,CAAZ;;~~AADiD~~,~~oBAEhC~~,uBAAWC,0CAAX,~~CAFgC~~;AAAA,~~MAEzCC~~,~~CAFyC~~,~~eAEzCA~~,~~CAFyC~~;AAAA,~~MAEtCC~~,~~CAFsC~~,~~eAEtCA~~,~~CAFsC~~;;~~AAGjD~~,MAAIH,GAAG,CAACI,OAAR,EAAiB;AACf;AACAJ,IAAAA,GAAG,CAACI,OAAJ,CAAYC,KAAZ,CAAkBC,GAAlB,GAAwBH,CAAC,GAAGN,YAAJ,GAAmBG,GAAG,CAACI,OAAJ,CAAYG,YAA/B,GAA8C,IAAtE;AACAP,IAAAA,GAAG,CAACI,OAAJ,CAAYC,KAAZ,CAAkBG,IAAlB,GAAyBN,CAAC,GAAG,IAA7B;AACD;;AACD,sBAAO,6BAAC,sBAAD;AAAwB,IAAA,GAAG,EAAEF;AAA7B,KAAmCD,QAAnC,CAAP;AACD,CATM;;;AAAMD,iB;;AAWb;AACA;AACA;AACO,IAAMW,qBAAqB,GAAG,+BAAOC,aAAP,CAAH;AAAA;AAAA;AAAA,yEAA3B;;AAMP,IAAMC,sBAAsB,GAAG,+BAAOF,qBAAP,CAAH;AAAA;AAAA;AAAA,qGACxBG,eAAMC,EADkB,+FAMN,oBAAM,UAAN,CANM,CAA5B","sourcesContent":["import { color, Flex, media } from \"@artsy/palette\"\nimport React, { useContext, useRef } from \"react\"\nimport styled from \"styled-components\"\nimport { MousePositionContext } from \"./MousePositionContext\"\n\nconst LABEL_OFFSET = 10\n\n/*\n Tooltip for bar and line charts\n /\nexport const ChartHoverTooltip = ({ children }) => {\n const ref = useRef(null)\n const { x, y } = useContext(MousePositionContext)\n if (ref.current) {\n // position outside of the render loop to avoid GC churn\n ref.current.style.top = y - LABEL_OFFSET - ref.current.offsetHeight + \"px\"\n ref.current.style.left = x + \"px\"\n }\n return <HoverTooltipPositioner ref={ref}>{children}</HoverTooltipPositioner>\n}\n\n/\n Base component for positioning tooltips\n */\nexport const BaseTooltipPositioner = styled(Flex)`\n transform: translateX(-50%);\n pointer-events: none;\n border-radius: 2px;\n`\n\nconst HoverTooltipPositioner = styled(BaseTooltipPositioner)`\n ${media.xs`\n display: none;\n `};\n z-index: 2;\n position: fixed;\n background-color: ${color(\"white100\")};\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);\n`\n"],"file":"ChartHoverTooltip.js"}
1	+ {"version":3,"sources":["../../../src/elements/DataVis/ChartHoverTooltip.tsx"],"names":["LABEL_OFFSET","ChartHoverTooltip","children","ref","MousePositionContext","x","y","current","style","top","offsetHeight","left","BaseTooltipPositioner","Flex","HoverTooltipPositioner","media","xs"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAG,EAArB;AAEA;AACA;AACA;;AACO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACjD,MAAMC,GAAG,GAAG,mBAAO,IAAP,CAAZ;;AACA,oBAAiB,uBAAWC,0CAAX,CAAjB;AAAA,MAAQC,CAAR,eAAQA,CAAR;AAAA,MAAWC,CAAX,eAAWA,CAAX;;AACA,MAAIH,GAAG,CAACI,OAAR,EAAiB;AACf;AACAJ,IAAAA,GAAG,CAACI,OAAJ,CAAYC,KAAZ,CAAkBC,GAAlB,GAAwBH,CAAC,GAAGN,YAAJ,GAAmBG,GAAG,CAACI,OAAJ,CAAYG,YAA/B,GAA8C,IAAtE;AACAP,IAAAA,GAAG,CAACI,OAAJ,CAAYC,KAAZ,CAAkBG,IAAlB,GAAyBN,CAAC,GAAG,IAA7B;AACD;;AACD,sBAAO,6BAAC,sBAAD;AAAwB,IAAA,GAAG,EAAEF;AAA7B,KAAmCD,QAAnC,CAAP;AACD,CATM;;;AAAMD,iB;;AAWb;AACA;AACA;AACO,IAAMW,qBAAqB,GAAG,+BAAOC,aAAP,CAAH;AAAA;AAAA;AAAA,yEAA3B;;AAMP,IAAMC,sBAAsB,GAAG,+BAAOF,qBAAP,CAAH;AAAA;AAAA;AAAA,qGACxBG,eAAMC,EADkB,+FAMN,oBAAM,UAAN,CANM,CAA5B","sourcesContent":["import { color, Flex, media } from \"@artsy/palette\"\nimport React, { useContext, useRef } from \"react\"\nimport styled from \"styled-components\"\nimport { MousePositionContext } from \"./MousePositionContext\"\n\nconst LABEL_OFFSET = 10\n\n/*\n Tooltip for bar and line charts\n /\nexport const ChartHoverTooltip = ({ children }) => {\n const ref = useRef(null)\n const { x, y } = useContext(MousePositionContext)\n if (ref.current) {\n // position outside of the render loop to avoid GC churn\n ref.current.style.top = y - LABEL_OFFSET - ref.current.offsetHeight + \"px\"\n ref.current.style.left = x + \"px\"\n }\n return <HoverTooltipPositioner ref={ref}>{children}</HoverTooltipPositioner>\n}\n\n/\n Base component for positioning tooltips\n */\nexport const BaseTooltipPositioner = styled(Flex)`\n transform: translateX(-50%);\n pointer-events: none;\n border-radius: 2px;\n`\n\nconst HoverTooltipPositioner = styled(BaseTooltipPositioner)`\n ${media.xs`\n display: none;\n `};\n z-index: 2;\n position: fixed;\n background-color: ${color(\"white100\")};\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);\n`\n"],"file":"ChartHoverTooltip.js"}

package/dist/elements/DataVis/ChartTooltip.js CHANGED Viewed

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.coerceTooltipWithoutPadding = exports.coerceTooltip = exports.ChartTooltip = void 0;
 exports.isChartTooltipProps = isChartTooltipProps;
-exports.ChartTooltip = exports.coerceTooltipWithoutPadding = exports.coerceTooltip = void 0;
 var _palette = require("@artsy/palette");
@@ -12,13 +12,15 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _excluded = ["title", "description", "noPadding"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+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); }
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -65,7 +67,7 @@ var ChartTooltip = function ChartTooltip(_ref) {
   var title = _ref.title,
       description = _ref.description,
       noPadding = _ref.noPadding,
-      others = _objectWithoutProperties(_ref, ["title", "description", "noPadding"]);
+      others = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(ChartTooltipWrapper, _extends({
     py: noPadding ? 0 : 0.5,

package/dist/elements/DataVis/ChartTooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/elements/DataVis/ChartTooltip.tsx"],"names":["ChartTooltipWrapper","Flex","coerceTooltip","tooltip","isChartTooltipProps","coerceTooltipWithoutPadding","obj","result","hasOwnProperty","ChartTooltip","title","description","noPadding","others"],"mappings":";;;;;;;;AAAA;;AACA;;AACA~~;;;;;;;;;;;;~~AAEA,IAAMA,mBAAmB,GAAG,+BAAOC,aAAP,CAAH;AAAA;AAAA;AAAA,sFAAzB;AAOA;AACA;AACA;AACA;;AACO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,OAAD;AAAA,SAC3BC,mBAAmB,CAACD,OAAD,CAAnB,gBAA+B,6BAAC,YAAD,EAAkBA,OAAlB,CAA/B,GAA+DA,OADpC;AAAA,CAAtB;AAGP;AACA;AACA;AACA;;;;;AACO,IAAME,2BAA2B,GAAG,SAA9BA,2BAA8B,CACzCF,OADyC;AAAA,SAGzCC,mBAAmB,CAACD,OAAD,CAAnB,gBACE,6BAAC,YAAD;AAAc,IAAA,SAAS;AAAvB,KAA4BA,OAA5B,EADF,GAGEA,OANuC;AAAA,CAApC;;;;AAeP;AACO,SAASC,mBAAT,CAA6BE,GAA7B,EAAiE;AACtE,MAAMC,MAAM,GACVD,GAAG,IACH,QAAOA,GAAP,MAAe,QADf,IAEAA,GAAG,CAACE,cAAJ,CAAmB,OAAnB,CAFA,IAGAF,GAAG,CAACE,cAAJ,CAAmB,aAAnB,CAJF;AAKA,SAAOD,MAAP;AACD;AAED;AACA;AACA;AACA;;;AACO,IAAME,YAAY,GAAG,SAAfA,YAAe;AAAA,MAC1BC,KAD0B,QAC1BA,KAD0B;AAAA,MAE1BC,WAF0B,QAE1BA,WAF0B;AAAA,MAG1BC,SAH0B,QAG1BA,SAH0B;AAAA,MAIvBC,MAJuB;;AAAA,sBAM1B,6BAAC,mBAAD;AACE,IAAA,EAAE,EAAED,SAAS,GAAG,CAAH,GAAO,GADtB;AAEE,IAAA,EAAE,EAAEA,SAAS,GAAG,CAAH,GAAO;AAFtB,KAGMC,MAHN,gBAKE,6BAAC,aAAD;AAAM,IAAA,KAAK,EAAE,UAAb;AAAyB,IAAA,MAAM,EAAC,QAAhC;AAAyC,IAAA,IAAI,EAAC;AAA9C,KACGH,KADH,CALF,eAQE,6BAAC,aAAD;AAAM,IAAA,KAAK,EAAE,SAAb;AAAwB,IAAA,IAAI,EAAC;AAA7B,KACGC,WADH,CARF,CAN0B;AAAA,CAArB;;;AAAMF,Y","sourcesContent":["import { Flex, FlexProps, Sans } from \"@artsy/palette\"\nimport React from \"react\"\nimport styled from \"styled-components\"\n\nconst ChartTooltipWrapper = styled(Flex)`\n text-align: center;\n align-items: center;\n flex-direction: column;\n white-space: nowrap;\n`\n\n/*\n Returns tooltip component based on the type of tooltip param passed to it\n * @param tooltip either a component or hash containing `title` and `description`\n /\nexport const coerceTooltip = (tooltip: React.ReactNode \| ChartTooltipProps) =>\n isChartTooltipProps(tooltip) ? <ChartTooltip {...tooltip} /> : tooltip\n\n/\n Similart to `coerceTooltip` but without padding\n * @param tooltip\n /\nexport const coerceTooltipWithoutPadding = (\n tooltip: React.ReactNode \| ChartTooltipProps\n) =>\n isChartTooltipProps(tooltip) ? (\n <ChartTooltip noPadding {...tooltip} />\n ) : (\n tooltip\n )\n\nexport interface ChartTooltipProps extends FlexProps {\n title: React.ReactNode\n description: React.ReactNode\n noPadding: boolean\n}\n\n// tslint:disable-next-line:completed-docs\nexport function isChartTooltipProps(obj: any): obj is ChartTooltipProps {\n const result =\n obj &&\n typeof obj === \"object\" &&\n obj.hasOwnProperty(\"title\") &&\n obj.hasOwnProperty(\"description\")\n return result\n}\n\n/\n ChartTooltip is the default content format for a label on a BarChart.\n * @param props\n */\nexport const ChartTooltip = ({\n title,\n description,\n noPadding,\n ...others\n}: ChartTooltipProps) => (\n <ChartTooltipWrapper\n py={noPadding ? 0 : 0.5}\n px={noPadding ? 0 : 1}\n {...others}\n >\n <Sans color={\"black100\"} weight=\"medium\" size=\"2\">\n {title}\n </Sans>\n <Sans color={\"black60\"} size=\"2\">\n {description}\n </Sans>\n </ChartTooltipWrapper>\n)\n"],"file":"ChartTooltip.js"}
1	+ {"version":3,"sources":["../../../src/elements/DataVis/ChartTooltip.tsx"],"names":["ChartTooltipWrapper","Flex","coerceTooltip","tooltip","isChartTooltipProps","coerceTooltipWithoutPadding","obj","result","hasOwnProperty","ChartTooltip","title","description","noPadding","others"],"mappings":";;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;AAEA,IAAMA,mBAAmB,GAAG,+BAAOC,aAAP,CAAH;AAAA;AAAA;AAAA,sFAAzB;AAOA;AACA;AACA;AACA;;AACO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,OAAD;AAAA,SAC3BC,mBAAmB,CAACD,OAAD,CAAnB,gBAA+B,6BAAC,YAAD,EAAkBA,OAAlB,CAA/B,GAA+DA,OADpC;AAAA,CAAtB;AAGP;AACA;AACA;AACA;;;;;AACO,IAAME,2BAA2B,GAAG,SAA9BA,2BAA8B,CACzCF,OADyC;AAAA,SAGzCC,mBAAmB,CAACD,OAAD,CAAnB,gBACE,6BAAC,YAAD;AAAc,IAAA,SAAS;AAAvB,KAA4BA,OAA5B,EADF,GAGEA,OANuC;AAAA,CAApC;;;;AAeP;AACO,SAASC,mBAAT,CAA6BE,GAA7B,EAAiE;AACtE,MAAMC,MAAM,GACVD,GAAG,IACH,QAAOA,GAAP,MAAe,QADf,IAEAA,GAAG,CAACE,cAAJ,CAAmB,OAAnB,CAFA,IAGAF,GAAG,CAACE,cAAJ,CAAmB,aAAnB,CAJF;AAKA,SAAOD,MAAP;AACD;AAED;AACA;AACA;AACA;;;AACO,IAAME,YAAY,GAAG,SAAfA,YAAe;AAAA,MAC1BC,KAD0B,QAC1BA,KAD0B;AAAA,MAE1BC,WAF0B,QAE1BA,WAF0B;AAAA,MAG1BC,SAH0B,QAG1BA,SAH0B;AAAA,MAIvBC,MAJuB;;AAAA,sBAM1B,6BAAC,mBAAD;AACE,IAAA,EAAE,EAAED,SAAS,GAAG,CAAH,GAAO,GADtB;AAEE,IAAA,EAAE,EAAEA,SAAS,GAAG,CAAH,GAAO;AAFtB,KAGMC,MAHN,gBAKE,6BAAC,aAAD;AAAM,IAAA,KAAK,EAAE,UAAb;AAAyB,IAAA,MAAM,EAAC,QAAhC;AAAyC,IAAA,IAAI,EAAC;AAA9C,KACGH,KADH,CALF,eAQE,6BAAC,aAAD;AAAM,IAAA,KAAK,EAAE,SAAb;AAAwB,IAAA,IAAI,EAAC;AAA7B,KACGC,WADH,CARF,CAN0B;AAAA,CAArB;;;AAAMF,Y","sourcesContent":["import { Flex, FlexProps, Sans } from \"@artsy/palette\"\nimport React from \"react\"\nimport styled from \"styled-components\"\n\nconst ChartTooltipWrapper = styled(Flex)`\n text-align: center;\n align-items: center;\n flex-direction: column;\n white-space: nowrap;\n`\n\n/*\n Returns tooltip component based on the type of tooltip param passed to it\n * @param tooltip either a component or hash containing `title` and `description`\n /\nexport const coerceTooltip = (tooltip: React.ReactNode \| ChartTooltipProps) =>\n isChartTooltipProps(tooltip) ? <ChartTooltip {...tooltip} /> : tooltip\n\n/\n Similart to `coerceTooltip` but without padding\n * @param tooltip\n /\nexport const coerceTooltipWithoutPadding = (\n tooltip: React.ReactNode \| ChartTooltipProps\n) =>\n isChartTooltipProps(tooltip) ? (\n <ChartTooltip noPadding {...tooltip} />\n ) : (\n tooltip\n )\n\nexport interface ChartTooltipProps extends FlexProps {\n title: React.ReactNode\n description: React.ReactNode\n noPadding: boolean\n}\n\n// tslint:disable-next-line:completed-docs\nexport function isChartTooltipProps(obj: any): obj is ChartTooltipProps {\n const result =\n obj &&\n typeof obj === \"object\" &&\n obj.hasOwnProperty(\"title\") &&\n obj.hasOwnProperty(\"description\")\n return result\n}\n\n/\n ChartTooltip is the default content format for a label on a BarChart.\n * @param props\n */\nexport const ChartTooltip = ({\n title,\n description,\n noPadding,\n ...others\n}: ChartTooltipProps) => (\n <ChartTooltipWrapper\n py={noPadding ? 0 : 0.5}\n px={noPadding ? 0 : 1}\n {...others}\n >\n <Sans color={\"black100\"} weight=\"medium\" size=\"2\">\n {title}\n </Sans>\n <Sans color={\"black60\"} size=\"2\">\n {description}\n </Sans>\n </ChartTooltipWrapper>\n)\n"],"file":"ChartTooltip.js"}

package/dist/elements/DataVis/MousePositionContext.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,9 +9,9 @@ exports.ProvideMousePosition = exports.MousePositionContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+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); }
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+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; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -21,7 +21,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

package/dist/elements/DataVis/MousePositionContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/elements/DataVis/MousePositionContext.tsx"],"names":["MousePositionContext","React","createContext","x","y","ProvideMousePosition","children","state","setState","setMousePosition","ev","clientX","clientY","window","addEventListener","removeEventListener"],"mappings":";;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;AAEA;AACO,IAAMA,oBAAoB,gBAAGC,eAAMC,aAAN,CAAoB;AAAEC,EAAAA,CAAC,EAAE,CAAL;AAAQC,EAAAA,CAAC,EAAE;AAAX,CAApB,CAA7B,C,CAEP;;;;;AACO,IAAMC,oBAA+B,GAAG,SAAlCA,oBAAkC,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;;~~AAAA~~,~~kBACrC~~,qBAAS;AAAEH,IAAAA,CAAC,EAAE,CAAL;AAAQC,IAAAA,CAAC,EAAE;AAAX,GAAT,~~CADqC~~;AAAA;AAAA,~~MACxDG~~,~~KADwD~~;AAAA,~~MACjDC~~,~~QADiD~~;;~~AAG/D~~,wBAAU,YAAM;AACd,QAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,EAAD,EAAoB;AAC3CF,MAAAA,QAAQ,CAAC;AACPL,QAAAA,CAAC,EAAEO,EAAE,CAACC,OADC;AAEPP,QAAAA,CAAC,EAAEM,EAAE,CAACE;AAFC,OAAD,CAAR;AAID,KALD;;AAMAC,IAAAA,MAAM,CAACC,gBAAP,CAAwB,WAAxB,EAAqCL,gBAArC;AACA,WAAO,YAAM;AACXI,MAAAA,MAAM,CAACE,mBAAP,CAA2B,WAA3B,EAAwCN,gBAAxC;AACD,KAFD;AAGD,GAXD,EAWG,CAAC,KAAD,CAXH;AAaA,sBACE,6BAAC,oBAAD,CAAsB,QAAtB;AAA+B,IAAA,KAAK,EAAEF;AAAtC,KACGD,QADH,CADF;AAKD,CArBM;;;AAAMD,oB","sourcesContent":["import React, { useEffect, useState } from \"react\"\n\n// tslint:disable-next-line:completed-docs\nexport const MousePositionContext = React.createContext({ x: 0, y: 0 })\n\n// tslint:disable-next-line:completed-docs\nexport const ProvideMousePosition: React.SFC = ({ children }) => {\n const [state, setState] = useState({ x: 0, y: 0 })\n\n useEffect(() => {\n const setMousePosition = (ev: MouseEvent) => {\n setState({\n x: ev.clientX,\n y: ev.clientY,\n })\n }\n window.addEventListener(\"mousemove\", setMousePosition)\n return () => {\n window.removeEventListener(\"mousemove\", setMousePosition)\n }\n }, [false])\n\n return (\n <MousePositionContext.Provider value={state}>\n {children}\n </MousePositionContext.Provider>\n )\n}\n"],"file":"MousePositionContext.js"}
1	+ {"version":3,"sources":["../../../src/elements/DataVis/MousePositionContext.tsx"],"names":["MousePositionContext","React","createContext","x","y","ProvideMousePosition","children","state","setState","setMousePosition","ev","clientX","clientY","window","addEventListener","removeEventListener"],"mappings":";;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;AAEA;AACO,IAAMA,oBAAoB,gBAAGC,eAAMC,aAAN,CAAoB;AAAEC,EAAAA,CAAC,EAAE,CAAL;AAAQC,EAAAA,CAAC,EAAE;AAAX,CAApB,CAA7B,C,CAEP;;;;;AACO,IAAMC,oBAA+B,GAAG,SAAlCA,oBAAkC,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;;AAC/D,kBAA0B,qBAAS;AAAEH,IAAAA,CAAC,EAAE,CAAL;AAAQC,IAAAA,CAAC,EAAE;AAAX,GAAT,CAA1B;AAAA;AAAA,MAAOG,KAAP;AAAA,MAAcC,QAAd;;AAEA,wBAAU,YAAM;AACd,QAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,EAAD,EAAoB;AAC3CF,MAAAA,QAAQ,CAAC;AACPL,QAAAA,CAAC,EAAEO,EAAE,CAACC,OADC;AAEPP,QAAAA,CAAC,EAAEM,EAAE,CAACE;AAFC,OAAD,CAAR;AAID,KALD;;AAMAC,IAAAA,MAAM,CAACC,gBAAP,CAAwB,WAAxB,EAAqCL,gBAArC;AACA,WAAO,YAAM;AACXI,MAAAA,MAAM,CAACE,mBAAP,CAA2B,WAA3B,EAAwCN,gBAAxC;AACD,KAFD;AAGD,GAXD,EAWG,CAAC,KAAD,CAXH;AAaA,sBACE,6BAAC,oBAAD,CAAsB,QAAtB;AAA+B,IAAA,KAAK,EAAEF;AAAtC,KACGD,QADH,CADF;AAKD,CArBM;;;AAAMD,oB","sourcesContent":["import React, { useEffect, useState } from \"react\"\n\n// tslint:disable-next-line:completed-docs\nexport const MousePositionContext = React.createContext({ x: 0, y: 0 })\n\n// tslint:disable-next-line:completed-docs\nexport const ProvideMousePosition: React.SFC = ({ children }) => {\n const [state, setState] = useState({ x: 0, y: 0 })\n\n useEffect(() => {\n const setMousePosition = (ev: MouseEvent) => {\n setState({\n x: ev.clientX,\n y: ev.clientY,\n })\n }\n window.addEventListener(\"mousemove\", setMousePosition)\n return () => {\n window.removeEventListener(\"mousemove\", setMousePosition)\n }\n }, [false])\n\n return (\n <MousePositionContext.Provider value={state}>\n {children}\n </MousePositionContext.Provider>\n )\n}\n"],"file":"MousePositionContext.js"}

package/dist/elements/DataVis/utils/SharedTypes.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ChartTooltipProps } from "../ChartTooltip";
 export interface PointDescriptor {
     value: number;

package/dist/elements/DataVis/utils/useHasEnteredViewPort.js CHANGED Viewed

@@ -15,7 +15,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

package/dist/elements/DataVis/utils/useHasEnteredViewPort.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/elements/DataVis/utils/useHasEnteredViewPort.ts"],"names":["useHasEnteredViewport","ref","hasEntered","setHasEntered","handleScroll","rect","current","getBoundingClientRect","top","window","innerHeight","height","removeEventListener","addEventListener","dispatchEvent","Event"],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;AAEA;AACA;AACA;AACA;AACO,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,GAAD,EAAuC;~~AAAA~~,~~kBACtC~~,qBAAS,KAAT,~~CADsC~~;AAAA;AAAA,~~MACnEC~~,~~UADmE~~;AAAA,~~MACvDC~~,~~aADuD~~;;~~AAE1E~~,wBAAU,YAAM;AACd,QAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,UAAMC,IAAI,GAAGJ,GAAG,CAACK,OAAJ,CAAYC,qBAAZ,EAAb;;AACA,UAAIF,IAAI,CAACG,GAAL,IAAYC,MAAM,CAACC,WAAP,GAAqBL,IAAI,CAACM,MAA1C,EAAkD;AAChDR,QAAAA,aAAa,CAAC,IAAD,CAAb;AACAM,QAAAA,MAAM,CAACG,mBAAP,CAA2B,QAA3B,EAAqCR,YAArC;AACD;AACF,KAND;;AAOAK,IAAAA,MAAM,CAACI,gBAAP,CAAwB,QAAxB,EAAkCT,YAAlC;AACAK,IAAAA,MAAM,CAACK,aAAP,CAAqB,IAAIC,KAAJ,CAAU,QAAV,CAArB;AACA,WAAO,YAAM;AACXN,MAAAA,MAAM,CAACG,mBAAP,CAA2B,QAA3B,EAAqCR,YAArC;AACD,KAFD;AAGD,GAbD,EAaG,EAbH;AAcA,SAAOF,UAAP;AACD,CAjBM","sourcesContent":["import { useEffect, useState } from \"react\"\n\n/*\n Returns true when component enters viewport\n * @param ref reference to component\n */\nexport const useHasEnteredViewport = (ref: React.RefObject<HTMLElement>) => {\n const [hasEntered, setHasEntered] = useState(false)\n useEffect(() => {\n const handleScroll = () => {\n const rect = ref.current.getBoundingClientRect()\n if (rect.top <= window.innerHeight - rect.height) {\n setHasEntered(true)\n window.removeEventListener(\"scroll\", handleScroll)\n }\n }\n window.addEventListener(\"scroll\", handleScroll)\n window.dispatchEvent(new Event(\"scroll\"))\n return () => {\n window.removeEventListener(\"scroll\", handleScroll)\n }\n }, [])\n return hasEntered\n}\n"],"file":"useHasEnteredViewPort.js"}
1	+ {"version":3,"sources":["../../../../src/elements/DataVis/utils/useHasEnteredViewPort.ts"],"names":["useHasEnteredViewport","ref","hasEntered","setHasEntered","handleScroll","rect","current","getBoundingClientRect","top","window","innerHeight","height","removeEventListener","addEventListener","dispatchEvent","Event"],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;AAEA;AACA;AACA;AACA;AACO,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,GAAD,EAAuC;AAC1E,kBAAoC,qBAAS,KAAT,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AACA,wBAAU,YAAM;AACd,QAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,UAAMC,IAAI,GAAGJ,GAAG,CAACK,OAAJ,CAAYC,qBAAZ,EAAb;;AACA,UAAIF,IAAI,CAACG,GAAL,IAAYC,MAAM,CAACC,WAAP,GAAqBL,IAAI,CAACM,MAA1C,EAAkD;AAChDR,QAAAA,aAAa,CAAC,IAAD,CAAb;AACAM,QAAAA,MAAM,CAACG,mBAAP,CAA2B,QAA3B,EAAqCR,YAArC;AACD;AACF,KAND;;AAOAK,IAAAA,MAAM,CAACI,gBAAP,CAAwB,QAAxB,EAAkCT,YAAlC;AACAK,IAAAA,MAAM,CAACK,aAAP,CAAqB,IAAIC,KAAJ,CAAU,QAAV,CAArB;AACA,WAAO,YAAM;AACXN,MAAAA,MAAM,CAACG,mBAAP,CAA2B,QAA3B,EAAqCR,YAArC;AACD,KAFD;AAGD,GAbD,EAaG,EAbH;AAcA,SAAOF,UAAP;AACD,CAjBM","sourcesContent":["import { useEffect, useState } from \"react\"\n\n/*\n Returns true when component enters viewport\n * @param ref reference to component\n */\nexport const useHasEnteredViewport = (ref: React.RefObject<HTMLElement>) => {\n const [hasEntered, setHasEntered] = useState(false)\n useEffect(() => {\n const handleScroll = () => {\n const rect = ref.current.getBoundingClientRect()\n if (rect.top <= window.innerHeight - rect.height) {\n setHasEntered(true)\n window.removeEventListener(\"scroll\", handleScroll)\n }\n }\n window.addEventListener(\"scroll\", handleScroll)\n window.dispatchEvent(new Event(\"scroll\"))\n return () => {\n window.removeEventListener(\"scroll\", handleScroll)\n }\n }, [])\n return hasEntered\n}\n"],"file":"useHasEnteredViewPort.js"}

package/dist/elements/DataVis/utils/useWrapperWidth.js CHANGED Viewed

@@ -15,7 +15,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

package/dist/elements/DataVis/utils/useWrapperWidth.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/elements/DataVis/utils/useWrapperWidth.ts"],"names":["useWrapperWidth","ref","width","setWidth","widthCheckInterval","setContainerWidth","current","getBoundingClientRect","setInterval","window","addEventListener","cleanup","removeEventListener","clearInterval"],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;AAEA;AACA;AACA;AACA;AACO,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,GAAD,EAAuC;~~AAAA~~,~~kBAC1C~~,qBAAS,CAAT,~~CAD0C~~;AAAA;AAAA,~~MAC7DC~~,~~KAD6D~~;AAAA,~~MACtDC~~,~~QADsD~~;;~~AAGpE~~,MAAMC,kBAAkB,GAAG,mBAAO,IAAP,CAA3B;AAEA,wBAAU,YAAM;AACd,QAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AAC9B,UAAIJ,GAAG,CAACK,OAAR,EAAiB;AACfH,QAAAA,QAAQ,CAACF,GAAG,CAACK,OAAJ,CAAYC,qBAAZ,GAAoCL,KAApC,GAA4C,CAA7C,CAAR;AACD;AACF,KAJD;;AAMAG,IAAAA,iBAAiB;AAEjBD,IAAAA,kBAAkB,CAACE,OAAnB,GAA6BE,WAAW,CAACH,iBAAD,EAAoB,GAApB,CAAxC;AAEAI,IAAAA,MAAM,CAACC,gBAAP,CAAwB,QAAxB,EAAkCL,iBAAlC;AAEA,WAAO,SAASM,OAAT,GAAmB;AACxBF,MAAAA,MAAM,CAACG,mBAAP,CAA2B,QAA3B,EAAqCP,iBAArC;AACAQ,MAAAA,aAAa,CAACT,kBAAkB,CAACE,OAApB,CAAb;AACD,KAHD;AAID,GAjBD,EAiBG,EAjBH;AAmBA,SAAOJ,KAAP;AACD,CAzBM","sourcesContent":["import { useEffect, useRef, useState } from \"react\"\n\n/*\n Returns width of container element\n * @param ref reference to wrapper component\n */\nexport const useWrapperWidth = (ref: React.RefObject<HTMLElement>) => {\n const [width, setWidth] = useState(0)\n\n const widthCheckInterval = useRef(null)\n\n useEffect(() => {\n const setContainerWidth = () => {\n if (ref.current) {\n setWidth(ref.current.getBoundingClientRect().width - 5)\n }\n }\n\n setContainerWidth()\n\n widthCheckInterval.current = setInterval(setContainerWidth, 500)\n\n window.addEventListener(\"resize\", setContainerWidth)\n\n return function cleanup() {\n window.removeEventListener(\"resize\", setContainerWidth)\n clearInterval(widthCheckInterval.current)\n }\n }, [])\n\n return width\n}\n"],"file":"useWrapperWidth.js"}
1	+ {"version":3,"sources":["../../../../src/elements/DataVis/utils/useWrapperWidth.ts"],"names":["useWrapperWidth","ref","width","setWidth","widthCheckInterval","setContainerWidth","current","getBoundingClientRect","setInterval","window","addEventListener","cleanup","removeEventListener","clearInterval"],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;AAEA;AACA;AACA;AACA;AACO,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,GAAD,EAAuC;AACpE,kBAA0B,qBAAS,CAAT,CAA1B;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcC,QAAd;;AAEA,MAAMC,kBAAkB,GAAG,mBAAO,IAAP,CAA3B;AAEA,wBAAU,YAAM;AACd,QAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AAC9B,UAAIJ,GAAG,CAACK,OAAR,EAAiB;AACfH,QAAAA,QAAQ,CAACF,GAAG,CAACK,OAAJ,CAAYC,qBAAZ,GAAoCL,KAApC,GAA4C,CAA7C,CAAR;AACD;AACF,KAJD;;AAMAG,IAAAA,iBAAiB;AAEjBD,IAAAA,kBAAkB,CAACE,OAAnB,GAA6BE,WAAW,CAACH,iBAAD,EAAoB,GAApB,CAAxC;AAEAI,IAAAA,MAAM,CAACC,gBAAP,CAAwB,QAAxB,EAAkCL,iBAAlC;AAEA,WAAO,SAASM,OAAT,GAAmB;AACxBF,MAAAA,MAAM,CAACG,mBAAP,CAA2B,QAA3B,EAAqCP,iBAArC;AACAQ,MAAAA,aAAa,CAACT,kBAAkB,CAACE,OAApB,CAAb;AACD,KAHD;AAID,GAjBD,EAiBG,EAjBH;AAmBA,SAAOJ,KAAP;AACD,CAzBM","sourcesContent":["import { useEffect, useRef, useState } from \"react\"\n\n/*\n Returns width of container element\n * @param ref reference to wrapper component\n */\nexport const useWrapperWidth = (ref: React.RefObject<HTMLElement>) => {\n const [width, setWidth] = useState(0)\n\n const widthCheckInterval = useRef(null)\n\n useEffect(() => {\n const setContainerWidth = () => {\n if (ref.current) {\n setWidth(ref.current.getBoundingClientRect().width - 5)\n }\n }\n\n setContainerWidth()\n\n widthCheckInterval.current = setInterval(setContainerWidth, 500)\n\n window.addEventListener(\"resize\", setContainerWidth)\n\n return function cleanup() {\n window.removeEventListener(\"resize\", setContainerWidth)\n clearInterval(widthCheckInterval.current)\n }\n }, [])\n\n return width\n}\n"],"file":"useWrapperWidth.js"}

package/dist/elements/DonutChart/DonutChart.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -27,9 +27,9 @@ var _useWrapperWidth = require("../DataVis/utils/useWrapperWidth");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+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); }
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+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; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -39,7 +39,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

package/dist/elements/DonutChart/DonutChart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/elements/DonutChart/DonutChart.tsx"],"names":["colors","MIN_CHART_SIZE","DonutChart","points","margin","hoverIndex","setHoverIndex","labelFadeIn","wrapperRef","width","Math","max","donutWidth","donutLabelMargin","padAngel","atan","centerX","centerY","values","map","d","value","angelInterpolator","PI","arc","innerRadius","outerRadius","padAngle","labelArc","pie","tooltip","point","index","hover","labels","slice","centroid","x","y","axisLabelX","zeroStateArc","zeroState","angle","endAngle","slices","datum","sortedIndex","arcColor","length","computeLabelTranslate","dim","center","diffPercent","DonutLabelContainer","styled","div","opacity"],"mappings":"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","sourcesContent":["import { Box, color, Color, Sans, space } from \"@artsy/palette\"\nimport { interpolate } from \"d3-interpolate\"\nimport { arc as d3_arc, pie as d3_pie } from \"d3-shape\"\nimport React, { useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { ChartHoverTooltip } from \"../DataVis/ChartHoverTooltip\"\nimport {\n coerceTooltip,\n coerceTooltipWithoutPadding,\n} from \"../DataVis/ChartTooltip\"\nimport { ProvideMousePosition } from \"../DataVis/MousePositionContext\"\nimport { ChartProps } from \"../DataVis/utils/SharedTypes\"\nimport { useWrapperWidth } from \"../DataVis/utils/useWrapperWidth\"\n\nconst colors: Color[] = [\"black10\", \"black30\", \"black60\"]\nconst MIN_CHART_SIZE = 30\n\nexport interface DonutChartProps extends ChartProps {\n margin?: number\n}\n\n/*\n DonutChart is a component that displays data points with donut shaped arcs.\n * Good for illustrating numerical proportions.\n /\nexport const DonutChart: React.FC<DonutChartProps> = ({\n points,\n margin = space(3),\n}) => {\n const [hoverIndex, setHoverIndex] = useState(-1)\n const [labelFadeIn] = useState(false)\n\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const width = Math.max(useWrapperWidth(wrapperRef), MIN_CHART_SIZE)\n\n // width of the arc is %12 of chart width\n const donutWidth = width 0.12\n\n // margin between chart and labels step down to 10px when chart is smaller than 230px\n const donutLabelMargin = width > 230 ? space(2) : space(1)\n\n // 2px in radians\n const padAngel = Math.atan(2 / width)\n\n const centerX = width / 2 + margin\n const centerY = width / 2 + margin\n\n const values = points.map((d) => d.value)\n const angelInterpolator = interpolate(0, 2 * Math.PI)\n\n const arc = d3_arc()\n .innerRadius(width / 2 - margin - donutWidth)\n .outerRadius(width / 2 - margin)\n .padAngle(padAngel)\n\n // virtual donut to use its arc centroids to calculate label position\n const labelArc = d3_arc()\n .innerRadius(width / 2 - margin + donutLabelMargin)\n .outerRadius(width / 2 - margin + donutLabelMargin)\n\n const pie = d3_pie().value((d: any) => d.value)\n\n const tooltip = points.map((point, index) => {\n const hover = hoverIndex === index\n return hover ? (\n <ChartHoverTooltip key={`${index}-hover`}>\n {coerceTooltip(point.tooltip)}\n </ChartHoverTooltip>\n ) : null\n })\n\n const labels = pie(points as any).map((slice, index) => {\n const [x, y] = labelArc.centroid(slice as any)\n const axisLabelX = points[index].axisLabelX\n return (\n axisLabelX && (\n <DonutLabelContainer\n key={index}\n opacity={labelFadeIn ? 1 : 0}\n x={x + centerX}\n y={y + centerY}\n center={centerX}\n >\n <Sans color=\"black60\" size=\"2\">\n {coerceTooltipWithoutPadding(axisLabelX)}\n </Sans>\n </DonutLabelContainer>\n )\n )\n })\n\n const zeroStateArc = pie([{ value: 1 }] as any).map((zeroState) => (\n <path\n key=\"zero-state\"\n stroke=\"none\"\n fill={color(\"black5\")}\n d={arc(zeroState as any)}\n />\n ))\n\n const angle = angelInterpolator(1)\n pie.endAngle(angle)\n const slices = pie(points as any).map((datum: any, index) => {\n // d3 by default sorts slices by values. for color assignment we\n // need sorted index but for hover we need original order in points\n // to match with correct tooltip\n const sortedIndex = datum.index\n let arcColor: string = color(colors[sortedIndex % colors.length])\n // avoid the first and last arc ending up the same color\n if (\n sortedIndex === values.length - 1 &&\n sortedIndex % colors.length === 0\n ) {\n arcColor = color(colors[1])\n }\n return (\n <path\n key={index}\n fill={arcColor}\n d={arc(datum)}\n onMouseEnter={() => setHoverIndex(index)}\n onMouseLeave={() => setHoverIndex(-1)}\n />\n )\n })\n\n return (\n <ProvideMousePosition>\n <Box ref={wrapperRef as any} position=\"relative\">\n <>\n {tooltip}\n {width !== MIN_CHART_SIZE && labels}\n <svg key={\"svg\"} width={width + margin} height={width + margin}>\n <g transform={`translate(${centerX}, ${centerY})`}>\n {zeroStateArc}\n <g>{slices}</g>\n </g>\n </svg>\n </>\n </Box>\n </ProvideMousePosition>\n )\n}\n\ninterface DonutLabelContainerProps {\n x: number\n y: number\n center?: number\n opacity: number\n}\n\n// to create a float:right effect for labels that are on left side (also top)\nconst computeLabelTranslate = (dim: number, center: number): string => {\n const diffPercent = (dim - center) / center\n if (diffPercent < -0.25) {\n return \"-100%\"\n } else if (diffPercent < -0 && diffPercent > -0.25) {\n return \"-50%\"\n } else {\n return \"0\"\n }\n}\n\nconst DonutLabelContainer = styled.div<DonutLabelContainerProps>`\n top: ${({ y }) => y}px;\n left: ${({ x }) => x}px;\n position: absolute;\n text-align: center;\n transform: translate(\n ${({ x, center }) => computeLabelTranslate(x, center)},\n ${({ y, center }) => computeLabelTranslate(y, center)}\n );\n white-space: nowrap;\n transition: opacity 0.4s ease-in;\n opacity: ${({ opacity }) => opacity};\n`\n"],"file":"DonutChart.js"}
1	+ {"version":3,"sources":["../../../src/elements/DonutChart/DonutChart.tsx"],"names":["colors","MIN_CHART_SIZE","DonutChart","points","margin","hoverIndex","setHoverIndex","labelFadeIn","wrapperRef","width","Math","max","donutWidth","donutLabelMargin","padAngel","atan","centerX","centerY","values","map","d","value","angelInterpolator","PI","arc","innerRadius","outerRadius","padAngle","labelArc","pie","tooltip","point","index","hover","labels","slice","centroid","x","y","axisLabelX","zeroStateArc","zeroState","angle","endAngle","slices","datum","sortedIndex","arcColor","length","computeLabelTranslate","dim","center","diffPercent","DonutLabelContainer","styled","div","opacity"],"mappings":"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","sourcesContent":["import { Box, color, Color, Sans, space } from \"@artsy/palette\"\nimport { interpolate } from \"d3-interpolate\"\nimport { arc as d3_arc, pie as d3_pie } from \"d3-shape\"\nimport React, { useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { ChartHoverTooltip } from \"../DataVis/ChartHoverTooltip\"\nimport {\n coerceTooltip,\n coerceTooltipWithoutPadding,\n} from \"../DataVis/ChartTooltip\"\nimport { ProvideMousePosition } from \"../DataVis/MousePositionContext\"\nimport { ChartProps } from \"../DataVis/utils/SharedTypes\"\nimport { useWrapperWidth } from \"../DataVis/utils/useWrapperWidth\"\n\nconst colors: Color[] = [\"black10\", \"black30\", \"black60\"]\nconst MIN_CHART_SIZE = 30\n\nexport interface DonutChartProps extends ChartProps {\n margin?: number\n}\n\n/*\n DonutChart is a component that displays data points with donut shaped arcs.\n * Good for illustrating numerical proportions.\n /\nexport const DonutChart: React.FC<DonutChartProps> = ({\n points,\n margin = space(3),\n}) => {\n const [hoverIndex, setHoverIndex] = useState(-1)\n const [labelFadeIn] = useState(false)\n\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const width = Math.max(useWrapperWidth(wrapperRef), MIN_CHART_SIZE)\n\n // width of the arc is %12 of chart width\n const donutWidth = width 0.12\n\n // margin between chart and labels step down to 10px when chart is smaller than 230px\n const donutLabelMargin = width > 230 ? space(2) : space(1)\n\n // 2px in radians\n const padAngel = Math.atan(2 / width)\n\n const centerX = width / 2 + margin\n const centerY = width / 2 + margin\n\n const values = points.map((d) => d.value)\n const angelInterpolator = interpolate(0, 2 * Math.PI)\n\n const arc = d3_arc()\n .innerRadius(width / 2 - margin - donutWidth)\n .outerRadius(width / 2 - margin)\n .padAngle(padAngel)\n\n // virtual donut to use its arc centroids to calculate label position\n const labelArc = d3_arc()\n .innerRadius(width / 2 - margin + donutLabelMargin)\n .outerRadius(width / 2 - margin + donutLabelMargin)\n\n const pie = d3_pie().value((d: any) => d.value)\n\n const tooltip = points.map((point, index) => {\n const hover = hoverIndex === index\n return hover ? (\n <ChartHoverTooltip key={`${index}-hover`}>\n {coerceTooltip(point.tooltip)}\n </ChartHoverTooltip>\n ) : null\n })\n\n const labels = pie(points as any).map((slice, index) => {\n const [x, y] = labelArc.centroid(slice as any)\n const axisLabelX = points[index].axisLabelX\n return (\n axisLabelX && (\n <DonutLabelContainer\n key={index}\n opacity={labelFadeIn ? 1 : 0}\n x={x + centerX}\n y={y + centerY}\n center={centerX}\n >\n <Sans color=\"black60\" size=\"2\">\n {coerceTooltipWithoutPadding(axisLabelX)}\n </Sans>\n </DonutLabelContainer>\n )\n )\n })\n\n const zeroStateArc = pie([{ value: 1 }] as any).map((zeroState) => (\n <path\n key=\"zero-state\"\n stroke=\"none\"\n fill={color(\"black5\")}\n d={arc(zeroState as any)}\n />\n ))\n\n const angle = angelInterpolator(1)\n pie.endAngle(angle)\n const slices = pie(points as any).map((datum: any, index) => {\n // d3 by default sorts slices by values. for color assignment we\n // need sorted index but for hover we need original order in points\n // to match with correct tooltip\n const sortedIndex = datum.index\n let arcColor: string = color(colors[sortedIndex % colors.length])\n // avoid the first and last arc ending up the same color\n if (\n sortedIndex === values.length - 1 &&\n sortedIndex % colors.length === 0\n ) {\n arcColor = color(colors[1])\n }\n return (\n <path\n key={index}\n fill={arcColor}\n d={arc(datum)}\n onMouseEnter={() => setHoverIndex(index)}\n onMouseLeave={() => setHoverIndex(-1)}\n />\n )\n })\n\n return (\n <ProvideMousePosition>\n <Box ref={wrapperRef as any} position=\"relative\">\n <>\n {tooltip}\n {width !== MIN_CHART_SIZE && labels}\n <svg key={\"svg\"} width={width + margin} height={width + margin}>\n <g transform={`translate(${centerX}, ${centerY})`}>\n {zeroStateArc}\n <g>{slices}</g>\n </g>\n </svg>\n </>\n </Box>\n </ProvideMousePosition>\n )\n}\n\ninterface DonutLabelContainerProps {\n x: number\n y: number\n center?: number\n opacity: number\n}\n\n// to create a float:right effect for labels that are on left side (also top)\nconst computeLabelTranslate = (dim: number, center: number): string => {\n const diffPercent = (dim - center) / center\n if (diffPercent < -0.25) {\n return \"-100%\"\n } else if (diffPercent < -0 && diffPercent > -0.25) {\n return \"-50%\"\n } else {\n return \"0\"\n }\n}\n\nconst DonutLabelContainer = styled.div<DonutLabelContainerProps>`\n top: ${({ y }) => y}px;\n left: ${({ x }) => x}px;\n position: absolute;\n text-align: center;\n transform: translate(\n ${({ x, center }) => computeLabelTranslate(x, center)},\n ${({ y, center }) => computeLabelTranslate(y, center)}\n );\n white-space: nowrap;\n transition: opacity 0.4s ease-in;\n opacity: ${({ opacity }) => opacity};\n`\n"],"file":"DonutChart.js"}

package/dist/elements/LineChart/Line.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Line is the component responsible for rendering a line that goes through all of the data points
  * in a line chart.

package/dist/elements/LineChart/LineChart.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -27,9 +27,9 @@ var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+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); }
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+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; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -41,7 +41,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

package/dist/elements/LineChart/LineChart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/elements/LineChart/LineChart.tsx"],"names":["margin","DEFAULT_HEIGHT","LineChart","points","height","hoverIndex","setHoverIndex","wrapperRef","width","map","point","i","tooltip","filter","bar","axisLabelX","length","HoverHandler","children","index","hover","opacity","PointHoverArea","styled","div","BarAxisLabelContainer","last","media","xs","first","AxisLabelX","Sans"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,MAAM,GAAG,oBAAM,CAAN,CAAf;AACA,IAAMC,cAAc,GAAG,EAAvB;;AAMA;AACA;AACA;AACA;AACO,IAAMC,SAAmC,GAAG,SAAtCA,SAAsC,OAG7B;AAAA,MAFpBC,MAEoB,QAFpBA,MAEoB;AAAA,yBADpBC,MACoB;AAAA,MADpBA,MACoB,4BADXH,cACW;;~~AAAA~~,~~kBACgB~~,qBAAS,CAAC,CAAV,~~CADhB~~;AAAA;AAAA,~~MACbI~~,~~UADa~~;AAAA,~~MACDC~~,~~aADC~~;;~~AAGpB~~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","sourcesContent":["import { Flex, media, Sans, space } from \"@artsy/palette\"\nimport React, { useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { ChartHoverTooltip } from \"../DataVis/ChartHoverTooltip\"\nimport { coerceTooltip } from \"../DataVis/ChartTooltip\"\nimport { ProvideMousePosition } from \"../DataVis/MousePositionContext\"\nimport { ChartProps } from \"../DataVis/utils/SharedTypes\"\nimport { useWrapperWidth } from \"../DataVis/utils/useWrapperWidth\"\nimport { LineChartSVG } from \"./LineChartSVG\"\n\nconst margin = space(2)\nconst DEFAULT_HEIGHT = 87\n\nexport interface LineChartProps extends ChartProps {\n height?: number\n}\n\n/*\n LineChart is a component that displays some data points connected by lines.\n * Useful for visualizing a time series, etc.\n /\nexport const LineChart: React.FC<LineChartProps> = ({\n points,\n height = DEFAULT_HEIGHT,\n}: LineChartProps) => {\n const [hoverIndex, setHoverIndex] = useState(-1)\n\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const width = useWrapperWidth(wrapperRef)\n\n return (\n <ProvideMousePosition>\n <Flex flexDirection=\"column\" ref={wrapperRef as any} width=\"100%\">\n {width && (\n <>\n <Flex height={height}>\n {points.map((point, i) => (\n <HoverHandler\n key={i}\n index={i}\n hoverIndex={hoverIndex}\n setHoverIndex={setHoverIndex}\n >\n {coerceTooltip(point.tooltip)}\n </HoverHandler>\n ))}\n </Flex>\n <LineChartSVG\n width={width}\n height={height}\n margin={margin}\n points={points}\n hoverIndex={hoverIndex}\n />\n {points.filter((bar) => bar.axisLabelX).length > 0 && (\n <Flex px=\"2\" width={width}>\n {points.map(({ axisLabelX }, i) => (\n <BarAxisLabelContainer\n key={i}\n first={i === 0}\n last={i === points.length - 1}\n >\n <AxisLabelX color=\"black60\" size=\"2\">\n {axisLabelX}\n </AxisLabelX>\n </BarAxisLabelContainer>\n ))}\n </Flex>\n )}\n </>\n )}\n </Flex>\n </ProvideMousePosition>\n )\n}\n\ninterface HoverHandlerProps {\n children: React.ReactNode\n index: number\n hoverIndex: number\n setHoverIndex: React.Dispatch<React.SetStateAction<number>>\n}\n\nconst HoverHandler: React.FC<HoverHandlerProps> = ({\n children,\n index,\n hoverIndex,\n setHoverIndex,\n}: HoverHandlerProps) => {\n const hover = hoverIndex === index\n return (\n <PointHoverArea\n onMouseEnter={() => setHoverIndex(index)}\n onMouseLeave={() => setHoverIndex(-1)}\n style={{ opacity: hover ? 1 : 0 }}\n >\n {hover && <ChartHoverTooltip>{children}</ChartHoverTooltip>}\n </PointHoverArea>\n )\n}\n\n/\n The rectangle area around Dots which triggers mouseover for tooltip\n /\nexport const PointHoverArea = styled.div`\n flex: 1;\n z-index: 1;\n margin: 0 1%; / gap between area enabling tooptips */\n opacity: 0;\n transition: opacity 0.4s ease-in;\n`\n\ninterface AxisContainerProps {\n first: boolean\n last: boolean\n}\n\nconst BarAxisLabelContainer = styled.div<AxisContainerProps>`\n flex: ${({ last }) => (last ? 0 : 1)};\n min-height: ${space(2)}px;\n position: relative;\n ${media.xs`\n display: ${({ first, last }) => (first \|\| last ? \"auto\" : \"none\")};;\n `};\n`\n\nconst AxisLabelX = styled(Sans)`\n position: absolute;\n text-align: center;\n white-space: nowrap;\n transform: translateX(-33%);\n`\n"],"file":"LineChart.js"}
1	+ {"version":3,"sources":["../../../src/elements/LineChart/LineChart.tsx"],"names":["margin","DEFAULT_HEIGHT","LineChart","points","height","hoverIndex","setHoverIndex","wrapperRef","width","map","point","i","tooltip","filter","bar","axisLabelX","length","HoverHandler","children","index","hover","opacity","PointHoverArea","styled","div","BarAxisLabelContainer","last","media","xs","first","AxisLabelX","Sans"],"mappings":"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","sourcesContent":["import { Flex, media, Sans, space } from \"@artsy/palette\"\nimport React, { useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { ChartHoverTooltip } from \"../DataVis/ChartHoverTooltip\"\nimport { coerceTooltip } from \"../DataVis/ChartTooltip\"\nimport { ProvideMousePosition } from \"../DataVis/MousePositionContext\"\nimport { ChartProps } from \"../DataVis/utils/SharedTypes\"\nimport { useWrapperWidth } from \"../DataVis/utils/useWrapperWidth\"\nimport { LineChartSVG } from \"./LineChartSVG\"\n\nconst margin = space(2)\nconst DEFAULT_HEIGHT = 87\n\nexport interface LineChartProps extends ChartProps {\n height?: number\n}\n\n/*\n LineChart is a component that displays some data points connected by lines.\n * Useful for visualizing a time series, etc.\n /\nexport const LineChart: React.FC<LineChartProps> = ({\n points,\n height = DEFAULT_HEIGHT,\n}: LineChartProps) => {\n const [hoverIndex, setHoverIndex] = useState(-1)\n\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const width = useWrapperWidth(wrapperRef)\n\n return (\n <ProvideMousePosition>\n <Flex flexDirection=\"column\" ref={wrapperRef as any} width=\"100%\">\n {width && (\n <>\n <Flex height={height}>\n {points.map((point, i) => (\n <HoverHandler\n key={i}\n index={i}\n hoverIndex={hoverIndex}\n setHoverIndex={setHoverIndex}\n >\n {coerceTooltip(point.tooltip)}\n </HoverHandler>\n ))}\n </Flex>\n <LineChartSVG\n width={width}\n height={height}\n margin={margin}\n points={points}\n hoverIndex={hoverIndex}\n />\n {points.filter((bar) => bar.axisLabelX).length > 0 && (\n <Flex px=\"2\" width={width}>\n {points.map(({ axisLabelX }, i) => (\n <BarAxisLabelContainer\n key={i}\n first={i === 0}\n last={i === points.length - 1}\n >\n <AxisLabelX color=\"black60\" size=\"2\">\n {axisLabelX}\n </AxisLabelX>\n </BarAxisLabelContainer>\n ))}\n </Flex>\n )}\n </>\n )}\n </Flex>\n </ProvideMousePosition>\n )\n}\n\ninterface HoverHandlerProps {\n children: React.ReactNode\n index: number\n hoverIndex: number\n setHoverIndex: React.Dispatch<React.SetStateAction<number>>\n}\n\nconst HoverHandler: React.FC<HoverHandlerProps> = ({\n children,\n index,\n hoverIndex,\n setHoverIndex,\n}: HoverHandlerProps) => {\n const hover = hoverIndex === index\n return (\n <PointHoverArea\n onMouseEnter={() => setHoverIndex(index)}\n onMouseLeave={() => setHoverIndex(-1)}\n style={{ opacity: hover ? 1 : 0 }}\n >\n {hover && <ChartHoverTooltip>{children}</ChartHoverTooltip>}\n </PointHoverArea>\n )\n}\n\n/\n The rectangle area around Dots which triggers mouseover for tooltip\n /\nexport const PointHoverArea = styled.div`\n flex: 1;\n z-index: 1;\n margin: 0 1%; / gap between area enabling tooptips */\n opacity: 0;\n transition: opacity 0.4s ease-in;\n`\n\ninterface AxisContainerProps {\n first: boolean\n last: boolean\n}\n\nconst BarAxisLabelContainer = styled.div<AxisContainerProps>`\n flex: ${({ last }) => (last ? 0 : 1)};\n min-height: ${space(2)}px;\n position: relative;\n ${media.xs`\n display: ${({ first, last }) => (first \|\| last ? \"auto\" : \"none\")};;\n `};\n`\n\nconst AxisLabelX = styled(Sans)`\n position: absolute;\n text-align: center;\n white-space: nowrap;\n transform: translateX(-33%);\n`\n"],"file":"LineChart.js"}

package/dist/elements/LineChart/LineChartSVG.js CHANGED Viewed

@@ -27,7 +27,7 @@ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread n
 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); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

package/dist/elements/LineChart/Point.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Point is the component responsible for rendering a data point
  * in a line chart.

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@artsy/palette-charts",
   "sideEffects": false,
-  "version": "17.15.2",
+  "version": "17.18.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -113,7 +113,7 @@
     "typescript-styled-plugin": "0.10.0"
   },
   "dependencies": {
-    "@artsy/palette": "^18.15.2",
+    "@artsy/palette": "^18.18.0",
     "@seznam/compose-react-refs": "^1.0.6",
     "@styled-system/theme-get": "^5.1.2",
     "d3-interpolate": "^1.3.2",
@@ -168,5 +168,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "6f8ca7b79e77299705fe1131986a5ca38455942a"
+  "gitHead": "2fce857b1bbc12fb8fafef55f2bf2b9285119a6a"
 }