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

package/dist/elements/BarChart/Bar.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+/**
+ * Bar is the main component responsible for rendering an individual bar
+ * in a bar chart.
+ *
+ * It not publically usable
+ *
+ * It is responsible for rendering a visible bar of a specific height and 0-2 labels.
+ *
+ * If a 'highlight' label is given, the bar will measure itself to help it's parent
+ * container set an appropriate min-height property. This prevents the highlight
+ * label from obscuring content above the bar chart.
+ */
+export declare const Bar: ({ heightPercent, label, highlightLabel, hasEnteredViewport, onMeasureHeight, highlightLabelRef, onClick, onHover, }: {
+    heightPercent: number;
+    label: React.ReactNode;
+    axisLabelX: React.ReactNode;
+    highlightLabel?: React.ReactNode;
+    hasEnteredViewport: boolean;
+    onMeasureHeight?: (height: number) => void;
+    highlightLabelRef?: React.RefObject<HTMLDivElement>;
+    onClick?: any;
+    onHover?: any;
+}) => React.JSX.Element;

package/dist/elements/BarChart/Bar.js

@@ -0,0 +1,149 @@
+"use strict";
+
+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.Bar = void 0;
+var _palette = require("@artsy/palette");
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ChartHoverTooltip = require("../DataVis/ChartHoverTooltip");
+var _templateObject, _templateObject2, _templateObject3;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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, 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(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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 _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) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var MAX_BAR_HEIGHT = 80;
+var MIN_BAR_HEIGHT = 10;
+var BAR_HEIGHT_RANGE = MAX_BAR_HEIGHT - MIN_BAR_HEIGHT;
+// the actual visible bit of the bar
+var BarBox = (0, _styledComponents.default)(_palette.Box).withConfig({
+  displayName: "Bar__BarBox",
+  componentId: "sc-1p8ufrs-0"
+})(["transition:height 0.8s ease;position:relative;background:", ";margin-right:2px;margin-bottom:-1px;:last-child{margin-right:0;}flex:1;cursor:", ";border-top-left-radius:1px;border-top-right-radius:1px;@media (min-width:", "){:hover{background:", ";}}"], function (props) {
+  return props.isHighlighted ? (0, _palette.color)("black60") : (0, _palette.color)("black10");
+}, function (props) {
+  return props.onClick ? "pointer" : "default";
+}, _palette.breakpoints.sm, function (props) {
+  return props.isHighlighted ? (0, _palette.color)("black60") : (0, _palette.color)("black30");
+});
+var HighlightLabelPositioner = (0, _styledComponents.default)(_ChartHoverTooltip.BaseTooltipPositioner).withConfig({
+  displayName: "Bar__HighlightLabelPositioner",
+  componentId: "sc-1p8ufrs-1"
+})(["z-index:1;position:absolute;left:50%;bottom:100%;transition:opacity 0.8s ease;flex-direction:column;align-items:center;"]);
+var HighlightLabelBox = (0, _styledComponents.default)(_palette.Flex).withConfig({
+  displayName: "Bar__HighlightLabelBox",
+  componentId: "sc-1p8ufrs-2"
+})(["", ";position:relative;background-color:", ";border:1px solid ", ";border-radius:2px;text-align:center;"], _palette.media.xs(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: none;\n  "]))), (0, _palette.color)("white100"), (0, _palette.color)("black10"));
+
+// the little dotted line which connects the label to the bar
+var LabelLineSvg = _styledComponents.default.svg.withConfig({
+  displayName: "Bar__LabelLineSvg",
+  componentId: "sc-1p8ufrs-3"
+})(["", ";"], _palette.media.xs(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+var LabelLine = function LabelLine() {
+  return /*#__PURE__*/_react.default.createElement(LabelLineSvg, {
+    width: "2",
+    height: "10",
+    viewBox: "0 0 2 10"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    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",
+    fill: (0, _palette.color)("black30")
+  }));
+};
+LabelLine.displayName = "LabelLine";
+var HighlightLabel = function HighlightLabel(_ref) {
+  var children = _ref.children,
+    onMeasureHighlightLabel = _ref.onMeasureHighlightLabel,
+    opacity = _ref.opacity,
+    innerRef = _ref.innerRef;
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    onMeasureHighlightLabel(ref.current.offsetHeight);
+  });
+  return /*#__PURE__*/_react.default.createElement(HighlightLabelPositioner, {
+    ref: ref,
+    style: {
+      opacity: opacity
+    }
+  }, /*#__PURE__*/_react.default.createElement(HighlightLabelBox, {
+    ref: innerRef
+  }, children), /*#__PURE__*/_react.default.createElement(LabelLine, null), /*#__PURE__*/_react.default.createElement(TriangleHighlight, null));
+};
+HighlightLabel.displayName = "HighlightLabel";
+var TRIANGLE_HEIGHT = 4;
+var TRIANGLE_BOTTOM_PADDING = (0, _palette.space)(0.5);
+
+// https://css-tricks.com/snippets/css/css-triangle/
+var TriangleHighlight = _styledComponents.default.div.withConfig({
+  displayName: "Bar__TriangleHighlight",
+  componentId: "sc-1p8ufrs-4"
+})(["display:none;", ";width:0;height:0;margin-bottom:", ";border-left:", "px solid transparent;border-right:", "px solid transparent;border-top:", "px solid ", ";"], _palette.media.xs(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: block;\n  "]))), TRIANGLE_BOTTOM_PADDING, TRIANGLE_HEIGHT, TRIANGLE_HEIGHT, TRIANGLE_HEIGHT, (0, _palette.color)("black60"));
+
+/**
+ * Bar is the main component responsible for rendering an individual bar
+ * in a bar chart.
+ *
+ * It not publically usable
+ *
+ * It is responsible for rendering a visible bar of a specific height and 0-2 labels.
+ *
+ * If a 'highlight' label is given, the bar will measure itself to help it's parent
+ * container set an appropriate min-height property. This prevents the highlight
+ * label from obscuring content above the bar chart.
+ */
+
+var Bar = function Bar(_ref2) {
+  var heightPercent = _ref2.heightPercent,
+    label = _ref2.label,
+    highlightLabel = _ref2.highlightLabel,
+    hasEnteredViewport = _ref2.hasEnteredViewport,
+    onMeasureHeight = _ref2.onMeasureHeight,
+    highlightLabelRef = _ref2.highlightLabelRef,
+    onClick = _ref2.onClick,
+    onHover = _ref2.onHover;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hover = _useState2[0],
+    setHover = _useState2[1];
+  // Before the bar has entered the view port it will have a height of 0
+  // but it still needs to know how big it will eventually be once visible,
+  // to allow the parent BarChart container to set an appropriate min-height
+  // property
+  var finalBarHeight =
+  // bar heights start at MIN_BAR_HEIGHT, unless the intended height === 0
+  heightPercent === 0 && !highlightLabel ? 0 : MIN_BAR_HEIGHT + BAR_HEIGHT_RANGE / 100 * heightPercent;
+  var currentHeight = hasEnteredViewport ? finalBarHeight : 0;
+  return /*#__PURE__*/_react.default.createElement(BarBox, {
+    style: {
+      height: currentHeight
+    },
+    onMouseEnter: function onMouseEnter() {
+      return setHover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHover(false);
+    },
+    isHighlighted: Boolean(highlightLabel),
+    onClick: onClick,
+    onMouseOver: onHover
+  }, highlightLabel && /*#__PURE__*/_react.default.createElement(HighlightLabel, {
+    innerRef: highlightLabelRef,
+    opacity: hasEnteredViewport ? 1 : 0,
+    onMeasureHighlightLabel: function onMeasureHighlightLabel(labelHeight) {
+      return onMeasureHeight(labelHeight + finalBarHeight);
+    }
+  }, highlightLabel), hover && label && /*#__PURE__*/_react.default.createElement(_ChartHoverTooltip.ChartHoverTooltip, null, label));
+};
+exports.Bar = Bar;
+Bar.displayName = "Bar";
+//# sourceMappingURL=Bar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Bar.js","names":["_palette","require","_react","_interopRequireWildcard","_styledComponents","_interopRequireDefault","_ChartHoverTooltip","_templateObject","_templateObject2","_templateObject3","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_taggedTemplateLiteral","strings","raw","freeze","defineProperties","MAX_BAR_HEIGHT","MIN_BAR_HEIGHT","BAR_HEIGHT_RANGE","BarBox","styled","Box","withConfig","displayName","componentId","props","isHighlighted","color","onClick","breakpoints","sm","HighlightLabelPositioner","BaseTooltipPositioner","HighlightLabelBox","Flex","media","xs","LabelLineSvg","svg","LabelLine","createElement","width","height","viewBox","fillRule","clipRule","d","fill","HighlightLabel","_ref","children","onMeasureHighlightLabel","opacity","innerRef","ref","useRef","useEffect","current","offsetHeight","style","TriangleHighlight","TRIANGLE_HEIGHT","TRIANGLE_BOTTOM_PADDING","space","div","Bar","_ref2","heightPercent","label","highlightLabel","hasEnteredViewport","onMeasureHeight","highlightLabelRef","onHover","_useState","useState","_useState2","hover","setHover","finalBarHeight","currentHeight","onMouseEnter","onMouseLeave","Boolean","onMouseOver","labelHeight","ChartHoverTooltip","exports"],"sources":["../../../src/elements/BarChart/Bar.tsx"],"sourcesContent":["import { Box, breakpoints, color, Flex, media, space } from \"@artsy/palette\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport {\n  BaseTooltipPositioner,\n  ChartHoverTooltip,\n} from \"../DataVis/ChartHoverTooltip\"\n\nconst MAX_BAR_HEIGHT = 80\nconst MIN_BAR_HEIGHT = 10\nconst BAR_HEIGHT_RANGE = MAX_BAR_HEIGHT - MIN_BAR_HEIGHT\n\ninterface BarBoxProps {\n  isHighlighted?: boolean\n}\n\n// the actual visible bit of the bar\nconst BarBox = styled(Box)<BarBoxProps>`\n  transition: height 0.8s ease;\n  position: relative;\n  background: ${(props: BarBoxProps) =>\n    props.isHighlighted ? color(\"black60\") : color(\"black10\")};\n  margin-right: 2px;\n  margin-bottom: -1px;\n  :last-child {\n    margin-right: 0;\n  }\n  flex: 1;\n  cursor: ${(props) => ((props as any).onClick ? \"pointer\" : \"default\")};\n  border-top-left-radius: 1px;\n  border-top-right-radius: 1px;\n  @media (min-width: ${breakpoints.sm}) {\n    :hover {\n      background: ${(props: BarBoxProps) =>\n        props.isHighlighted ? color(\"black60\") : color(\"black30\")};\n    }\n  }\n`\n\nconst HighlightLabelPositioner = styled(BaseTooltipPositioner)`\n  z-index: 1;\n  position: absolute;\n  left: 50%;\n  bottom: 100%;\n  transition: opacity 0.8s ease;\n  flex-direction: column;\n  align-items: center;\n`\nconst HighlightLabelBox = styled(Flex)`\n  ${media.xs`\n    display: none;\n  `};\n  position: relative;\n  background-color: ${color(\"white100\")};\n  border: 1px solid ${color(\"black10\")};\n  border-radius: 2px;\n  text-align: center;\n`\n\n// the little dotted line which connects the label to the bar\nconst LabelLineSvg = styled.svg`\n  ${media.xs`\n    display: none;\n  `};\n`\nconst LabelLine = () => (\n  <LabelLineSvg width=\"2\" height=\"10\" viewBox=\"0 0 2 10\">\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M0.5 1.11111V0H1.5V1.11111H0.5ZM0.5 4.44444V2.22222H1.5V4.44444H0.5ZM0.5 7.77778V5.55556H1.5V7.77778H0.5ZM0.5 10V8.88889H1.5V10H0.5Z\"\n      fill={color(\"black30\")}\n    />\n  </LabelLineSvg>\n)\n\nconst HighlightLabel = ({\n  children,\n  onMeasureHighlightLabel,\n  opacity,\n  innerRef,\n}: {\n  children: React.ReactNode\n  // this label is absolutely positioned and it might obscure content above the\n  // bar chart if it gets too tall. So it needs to measure itself to let the\n  // parent BarChart set an appropriate min-height.\n  onMeasureHighlightLabel: (height: number) => void\n  opacity: number\n  innerRef: React.RefObject<HTMLDivElement>\n}) => {\n  const ref = useRef<HTMLDivElement>(null)\n  useEffect(() => {\n    onMeasureHighlightLabel(ref.current.offsetHeight)\n  })\n  return (\n    <HighlightLabelPositioner ref={ref as any} style={{ opacity }}>\n      <HighlightLabelBox ref={innerRef as any}>{children}</HighlightLabelBox>\n      <LabelLine />\n      <TriangleHighlight />\n    </HighlightLabelPositioner>\n  )\n}\n\nconst TRIANGLE_HEIGHT = 4\nconst TRIANGLE_BOTTOM_PADDING = space(0.5)\n\n// https://css-tricks.com/snippets/css/css-triangle/\nconst TriangleHighlight = styled.div`\n  display: none;\n  ${media.xs`\n    display: block;\n  `};\n  width: 0;\n  height: 0;\n  margin-bottom: ${TRIANGLE_BOTTOM_PADDING};\n  border-left: ${TRIANGLE_HEIGHT}px solid transparent;\n  border-right: ${TRIANGLE_HEIGHT}px solid transparent;\n  border-top: ${TRIANGLE_HEIGHT}px solid ${color(\"black60\")};\n`\n\n/**\n * Bar is the main component responsible for rendering an individual bar\n * in a bar chart.\n *\n * It not publically usable\n *\n * It is responsible for rendering a visible bar of a specific height and 0-2 labels.\n *\n * If a 'highlight' label is given, the bar will measure itself to help it's parent\n * container set an appropriate min-height property. This prevents the highlight\n * label from obscuring content above the bar chart.\n */\n\nexport const Bar = ({\n  heightPercent,\n  label,\n  highlightLabel,\n  hasEnteredViewport,\n  onMeasureHeight,\n  highlightLabelRef,\n  onClick,\n  onHover,\n}: {\n  heightPercent: number\n  label: React.ReactNode\n  axisLabelX: React.ReactNode\n  highlightLabel?: React.ReactNode\n  hasEnteredViewport: boolean\n  onMeasureHeight?: (height: number) => void\n  highlightLabelRef?: React.RefObject<HTMLDivElement>\n  onClick?: any\n  onHover?: any\n}) => {\n  const [hover, setHover] = useState(false)\n  // Before the bar has entered the view port it will have a height of 0\n  // but it still needs to know how big it will eventually be once visible,\n  // to allow the parent BarChart container to set an appropriate min-height\n  // property\n  const finalBarHeight =\n    // bar heights start at MIN_BAR_HEIGHT, unless the intended height === 0\n    heightPercent === 0 && !highlightLabel\n      ? 0\n      : MIN_BAR_HEIGHT + (BAR_HEIGHT_RANGE / 100) * heightPercent\n  const currentHeight = hasEnteredViewport ? finalBarHeight : 0\n\n  return (\n    <BarBox\n      style={{ height: currentHeight }}\n      onMouseEnter={() => setHover(true)}\n      onMouseLeave={() => setHover(false)}\n      isHighlighted={Boolean(highlightLabel)}\n      onClick={onClick}\n      onMouseOver={onHover}\n    >\n      {highlightLabel && (\n        <HighlightLabel\n          innerRef={highlightLabelRef}\n          opacity={hasEnteredViewport ? 1 : 0}\n          onMeasureHighlightLabel={(labelHeight) =>\n            onMeasureHeight(labelHeight + finalBarHeight)\n          }\n        >\n          {highlightLabel}\n        </HighlightLabel>\n      )}\n      {hover && label && <ChartHoverTooltip>{label}</ChartHoverTooltip>}\n    </BarBox>\n  )\n}\n"],"mappings":"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"}

package/dist/elements/BarChart/BarChart.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { ChartTooltipProps } from "../DataVis/ChartTooltip";
+export interface BarDescriptor {
+    value: number;
+    label?: React.ReactNode | ChartTooltipProps;
+    axisLabelX?: React.ReactNode;
+    highlightLabel?: React.ReactNode | ChartTooltipProps;
+    onClick?: any;
+    onHover?: any;
+}
+export interface BarChartProps {
+    bars: BarDescriptor[];
+    minLabel: React.ReactNode;
+    maxLabel: React.ReactNode;
+}
+/**
+ * BarChart is a component which displays some bars of varying heights in a row.
+ * Useful for histograms etc.
+ * @param props props
+ */
+export declare const BarChart: ({ bars, minLabel, maxLabel }: BarChartProps) => React.JSX.Element;

package/dist/elements/BarChart/BarChart.js

@@ -0,0 +1,160 @@
+"use strict";
+
+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.BarChart = void 0;
+var _palette = require("@artsy/palette");
+var _themeGet = require("@styled-system/theme-get");
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ChartTooltip = require("../DataVis/ChartTooltip");
+var _MousePositionContext = require("../DataVis/MousePositionContext");
+var _useIntersectionObserver = require("../DataVis/useIntersectionObserver");
+var _Bar = require("./Bar");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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, 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" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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 _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) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var ChartContainer = (0, _styledComponents.default)(_palette.Flex).withConfig({
+  displayName: "BarChart__ChartContainer",
+  componentId: "sc-1317yz6-0"
+})(["border-bottom:1px solid ", ";"], (0, _themeGet.themeGet)("colors.black10"));
+function useHighlightLabelPositionConstraints(wrapperDiv, labelDiv) {
+  // Constrain highlight label to be within the bounds of the graph
+  (0, _react.useEffect)(function () {
+    if (!wrapperDiv || !labelDiv) {
+      return;
+    }
+    // reset highlight label position
+    labelDiv.style.left = null;
+    labelDiv.style.right = null;
+    // force layout to find centered position
+    labelDiv.offsetWidth;
+    var wrapperRect = wrapperDiv.getBoundingClientRect();
+    var labelRect = labelDiv.getBoundingClientRect();
+
+    // check for overlap with BarChart left bound
+    var labelLeftOffset = wrapperRect.left - labelRect.left;
+    if (labelLeftOffset > 0) {
+      // label is too far to the left, compensate
+      labelDiv.style.left = labelLeftOffset + "px";
+      return;
+    }
+    // check for overlap with BarChart right bound
+    var labelRightOffset = labelRect.right - wrapperRect.right;
+    if (labelRightOffset > 0) {
+      // label is too far to the right, compensate
+      labelDiv.style.right = labelRightOffset + "px";
+    }
+  });
+}
+/**
+ * BarChart is a component which displays some bars of varying heights in a row.
+ * Useful for histograms etc.
+ * @param props props
+ */
+var BarChart = function BarChart(_ref) {
+  var bars = _ref.bars,
+    minLabel = _ref.minLabel,
+    maxLabel = _ref.maxLabel;
+  var highlightLabelRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasEnteredViewport = _useState2[0],
+    setHasEnteredViewport = _useState2[1];
+  var _useIntersectionObser = (0, _useIntersectionObserver.useIntersectionObserver)({
+      once: true,
+      options: {
+        threshold: 0.2
+      },
+      onIntersection: function onIntersection() {
+        setHasEnteredViewport(true);
+      }
+    }),
+    wrapperRef = _useIntersectionObser.ref;
+  useHighlightLabelPositionConstraints(wrapperRef.current, highlightLabelRef.current);
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    minHeight = _useState4[0],
+    setMinHeight = _useState4[1];
+  var maxValue = Math.max.apply(Math, _toConsumableArray(bars.map(function (_ref2) {
+    var value = _ref2.value;
+    return value;
+  })));
+  var allZero = bars.every(function (item) {
+    return item.value === 0;
+  });
+  return /*#__PURE__*/_react.default.createElement(_MousePositionContext.ProvideMousePosition, null, /*#__PURE__*/_react.default.createElement(_palette.Flex, {
+    flexDirection: "column",
+    ref: wrapperRef,
+    flexGrow: 1,
+    id: "flex-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(ChartContainer, {
+    height: "80px",
+    alignItems: "flex-end",
+    mb: 0.5,
+    style: {
+      minHeight: minHeight
+    }
+  }, bars.map(function (_ref3, index) {
+    var value = _ref3.value,
+      label = _ref3.label,
+      axisLabelX = _ref3.axisLabelX,
+      highlightLabel = _ref3.highlightLabel,
+      onClick = _ref3.onClick,
+      onHover = _ref3.onHover;
+    var heightPercent = maxValue === 0 ? 100 : 100 / maxValue * value;
+    return /*#__PURE__*/_react.default.createElement(_Bar.Bar, {
+      key: index,
+      heightPercent: allZero ? 0 : heightPercent,
+      label: (0, _ChartTooltip.coerceTooltip)(label),
+      axisLabelX: axisLabelX,
+      highlightLabelRef: highlightLabelRef,
+      highlightLabel: (0, _ChartTooltip.coerceTooltip)(highlightLabel),
+      hasEnteredViewport: hasEnteredViewport,
+      onMeasureHeight: highlightLabel ? setMinHeight : null,
+      onClick: onClick,
+      onHover: onHover
+    });
+  })), /*#__PURE__*/_react.default.createElement(_palette.Flex, {
+    justifyContent: "space-between"
+  }, /*#__PURE__*/_react.default.createElement(_palette.Text, {
+    color: "black60",
+    variant: "xs"
+  }, minLabel), /*#__PURE__*/_react.default.createElement(_palette.Text, {
+    color: "black60",
+    variant: "xs"
+  }, maxLabel)), bars.filter(function (bar) {
+    return bar.axisLabelX;
+  }).length > 0 && /*#__PURE__*/_react.default.createElement(_palette.Flex, null, bars.map(function (_ref4, i) {
+    var axisLabelX = _ref4.axisLabelX;
+    return /*#__PURE__*/_react.default.createElement(BarAxisLabelContainer, {
+      key: i
+    }, /*#__PURE__*/_react.default.createElement(AxisLabelX, {
+      color: "black60",
+      variant: "xs"
+    }, axisLabelX));
+  }))));
+};
+exports.BarChart = BarChart;
+BarChart.displayName = "BarChart";
+var BarAxisLabelContainer = _styledComponents.default.div.withConfig({
+  displayName: "BarChart__BarAxisLabelContainer",
+  componentId: "sc-1317yz6-1"
+})(["flex:1;min-height:", ";position:relative;"], (0, _themeGet.themeGet)("space.2"));
+var AxisLabelX = (0, _styledComponents.default)(_palette.Text).withConfig({
+  displayName: "BarChart__AxisLabelX",
+  componentId: "sc-1317yz6-2"
+})(["position:absolute;text-align:center;white-space:nowrap;left:50%;transform:translateX(-50%);"]);
+//# sourceMappingURL=BarChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.js","names":["_palette","require","_themeGet","_react","_interopRequireWildcard","_styledComponents","_interopRequireDefault","_ChartTooltip","_MousePositionContext","_useIntersectionObserver","_Bar","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","iter","Symbol","iterator","Array","from","isArray","_arrayLikeToArray","_slicedToArray","i","_arrayWithHoles","_iterableToArrayLimit","_nonIterableRest","o","minLen","n","toString","slice","constructor","name","test","len","length","arr2","_i","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","ChartContainer","styled","Flex","withConfig","displayName","componentId","themeGet","useHighlightLabelPositionConstraints","wrapperDiv","labelDiv","useEffect","style","left","right","offsetWidth","wrapperRect","getBoundingClientRect","labelRect","labelLeftOffset","labelRightOffset","BarChart","_ref","bars","minLabel","maxLabel","highlightLabelRef","useRef","_useState","useState","_useState2","hasEnteredViewport","setHasEnteredViewport","_useIntersectionObser","useIntersectionObserver","once","options","threshold","onIntersection","wrapperRef","ref","current","_useState3","_useState4","minHeight","setMinHeight","maxValue","Math","max","apply","map","_ref2","allZero","every","item","createElement","ProvideMousePosition","flexDirection","flexGrow","id","height","alignItems","mb","_ref3","index","label","axisLabelX","highlightLabel","onClick","onHover","heightPercent","Bar","coerceTooltip","onMeasureHeight","justifyContent","Text","color","variant","filter","bar","_ref4","BarAxisLabelContainer","AxisLabelX","exports","div"],"sources":["../../../src/elements/BarChart/BarChart.tsx"],"sourcesContent":["import { Flex, Text } from \"@artsy/palette\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { ChartTooltipProps, coerceTooltip } from \"../DataVis/ChartTooltip\"\nimport { ProvideMousePosition } from \"../DataVis/MousePositionContext\"\nimport { useIntersectionObserver } from \"../DataVis/useIntersectionObserver\"\nimport { Bar } from \"./Bar\"\n\nconst ChartContainer = styled(Flex)`\n  border-bottom: 1px solid ${themeGet(\"colors.black10\")};\n`\n\nfunction useHighlightLabelPositionConstraints(\n  wrapperDiv: HTMLDivElement | null,\n  labelDiv: HTMLDivElement | null\n) {\n  // Constrain highlight label to be within the bounds of the graph\n  useEffect(() => {\n    if (!wrapperDiv || !labelDiv) {\n      return\n    }\n    // reset highlight label position\n    labelDiv.style.left = null\n    labelDiv.style.right = null\n    // force layout to find centered position\n    labelDiv.offsetWidth\n\n    const wrapperRect = wrapperDiv.getBoundingClientRect()\n    const labelRect = labelDiv.getBoundingClientRect()\n\n    // check for overlap with BarChart left bound\n    const labelLeftOffset = wrapperRect.left - labelRect.left\n    if (labelLeftOffset > 0) {\n      // label is too far to the left, compensate\n      labelDiv.style.left = labelLeftOffset + \"px\"\n      return\n    }\n    // check for overlap with BarChart right bound\n    const labelRightOffset = labelRect.right - wrapperRect.right\n    if (labelRightOffset > 0) {\n      // label is too far to the right, compensate\n      labelDiv.style.right = labelRightOffset + \"px\"\n    }\n  })\n}\n\nexport interface BarDescriptor {\n  value: number\n  label?: React.ReactNode | ChartTooltipProps\n  axisLabelX?: React.ReactNode\n  highlightLabel?: React.ReactNode | ChartTooltipProps\n  onClick?: any\n  onHover?: any\n}\n\nexport interface BarChartProps {\n  bars: BarDescriptor[]\n  minLabel: React.ReactNode\n  maxLabel: React.ReactNode\n}\n/**\n * BarChart is a component which displays some bars of varying heights in a row.\n * Useful for histograms etc.\n * @param props props\n */\nexport const BarChart = ({ bars, minLabel, maxLabel }: BarChartProps) => {\n  const highlightLabelRef = useRef<HTMLDivElement>(null)\n  const [hasEnteredViewport, setHasEnteredViewport] = useState(false)\n\n  const { ref: wrapperRef } = useIntersectionObserver({\n    once: true,\n    options: { threshold: 0.2 },\n    onIntersection: () => {\n      setHasEnteredViewport(true)\n    },\n  })\n\n  useHighlightLabelPositionConstraints(\n    wrapperRef.current as HTMLDivElement,\n    highlightLabelRef.current\n  )\n\n  const [minHeight, setMinHeight] = useState(0)\n  const maxValue = Math.max(...bars.map(({ value }) => value))\n  const allZero = bars.every((item) => item.value === 0)\n  return (\n    <ProvideMousePosition>\n      <Flex\n        flexDirection=\"column\"\n        ref={wrapperRef as any}\n        flexGrow={1}\n        id=\"flex-wrapper\"\n      >\n        <ChartContainer\n          height=\"80px\"\n          alignItems=\"flex-end\"\n          mb={0.5}\n          style={{ minHeight }}\n        >\n          {bars.map(\n            (\n              { value, label, axisLabelX, highlightLabel, onClick, onHover },\n              index\n            ) => {\n              const heightPercent =\n                maxValue === 0 ? 100 : (100 / maxValue) * value\n              return (\n                <Bar\n                  key={index}\n                  heightPercent={allZero ? 0 : heightPercent}\n                  label={coerceTooltip(label)}\n                  axisLabelX={axisLabelX}\n                  highlightLabelRef={highlightLabelRef}\n                  highlightLabel={coerceTooltip(highlightLabel)}\n                  hasEnteredViewport={hasEnteredViewport}\n                  onMeasureHeight={highlightLabel ? setMinHeight : null}\n                  onClick={onClick}\n                  onHover={onHover}\n                />\n              )\n            }\n          )}\n        </ChartContainer>\n\n        <Flex justifyContent=\"space-between\">\n          <Text color=\"black60\" variant=\"xs\">\n            {minLabel}\n          </Text>\n\n          <Text color=\"black60\" variant=\"xs\">\n            {maxLabel}\n          </Text>\n        </Flex>\n\n        {bars.filter((bar) => bar.axisLabelX).length > 0 && (\n          <Flex>\n            {bars.map(({ axisLabelX }, i) => (\n              <BarAxisLabelContainer key={i}>\n                <AxisLabelX color=\"black60\" variant=\"xs\">\n                  {axisLabelX}\n                </AxisLabelX>\n              </BarAxisLabelContainer>\n            ))}\n          </Flex>\n        )}\n      </Flex>\n    </ProvideMousePosition>\n  )\n}\n\nconst BarAxisLabelContainer = styled.div`\n  flex: 1;\n  min-height: ${themeGet(\"space.2\")};\n  position: relative;\n`\n\nconst AxisLabelX = styled(Text)`\n  position: absolute;\n  text-align: center;\n  white-space: nowrap;\n  left: 50%;\n  transform: translateX(-50%);\n`\n"],"mappings":"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"}

package/dist/elements/BarChart/BarChart.story.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/dist/elements/BarChart/BarChart.story.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _BarChart = require("./BarChart");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: "Components/BarChart"
+};
+exports.default = _default;
+var Default = function Default() {
+  return /*#__PURE__*/_react.default.createElement(_BarChart.BarChart, {
+    minLabel: "$0",
+    maxLabel: "$30,000",
+    bars: BARS
+  });
+};
+exports.Default = Default;
+Default.displayName = "Default";
+var BARS = [{
+  value: 1,
+  label: {
+    title: "$0–$1,500",
+    description: "1 work"
+  }
+}, {
+  value: 1,
+  label: {
+    title: "$1,500–$3,000",
+    description: "1 work"
+  }
+}, {
+  value: 1,
+  label: {
+    title: "$3,000–$4,500",
+    description: "1 work"
+  }
+}, {
+  value: 1,
+  label: {
+    title: "$4,500–$6,000",
+    description: "1 work"
+  }
+}, {
+  value: 4,
+  label: {
+    title: "$6,000–$7,500",
+    description: "4 works"
+  }
+}, {
+  value: 10,
+  label: {
+    title: "$7,500–$9,000",
+    description: "10 works"
+  }
+}, {
+  value: 42,
+  label: {
+    title: "$9,000–$10,500",
+    description: "42 works"
+  }
+}, {
+  value: 0,
+  label: {
+    title: "$10,500–$12,000",
+    description: "0 works"
+  }
+}, {
+  value: 216,
+  label: {
+    title: "$12,000–$13,500",
+    description: "216 works"
+  }
+}, {
+  value: 1,
+  label: {
+    title: "$13,500–$15,000",
+    description: "1 work"
+  }
+}, {
+  value: 201,
+  label: {
+    title: "$15,000–$16,500",
+    description: "201 works"
+  },
+  highlightLabel: {
+    title: "$15,000–$16,500",
+    description: "This work"
+  }
+}, {
+  value: 0,
+  label: {
+    title: "$16,500–$18,000",
+    description: "0 works"
+  }
+}, {
+  value: 113,
+  label: {
+    title: "$18,000–$19,500",
+    description: "113 works"
+  }
+}, {
+  value: 4,
+  label: {
+    title: "$19,500–$21,000",
+    description: "4 works"
+  }
+}, {
+  value: 2,
+  label: {
+    title: "$21,000–$22,500",
+    description: "2 works"
+  }
+}, {
+  value: 6,
+  label: {
+    title: "$22,500–$24,000",
+    description: "6 works"
+  }
+}, {
+  value: 37,
+  label: {
+    title: "$24,000–$25,500",
+    description: "37 works"
+  }
+}, {
+  value: 1,
+  label: {
+    title: "$25,500–$27,000",
+    description: "1 work"
+  }
+}, {
+  value: 3,
+  label: {
+    title: "$27,000–$28,500",
+    description: "3 works"
+  }
+}, {
+  value: 0,
+  label: {
+    title: "$28,500–$30,000",
+    description: "0 works"
+  }
+}, {
+  value: 0,
+  label: {
+    title: "$30,000+",
+    description: "0 works"
+  }
+}];
+//# sourceMappingURL=BarChart.story.js.map

package/dist/elements/BarChart/BarChart.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.story.js","names":["_react","_interopRequireDefault","require","_BarChart","obj","__esModule","default","_default","title","exports","Default","createElement","BarChart","minLabel","maxLabel","bars","BARS","displayName","value","label","description","highlightLabel"],"sources":["../../../src/elements/BarChart/BarChart.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { BarChart } from \"./BarChart\"\n\nexport default {\n  title: \"Components/BarChart\",\n}\n\nexport const Default = () => {\n  return <BarChart minLabel=\"$0\" maxLabel=\"$30,000\" bars={BARS} />\n}\n\nconst BARS = [\n  {\n    value: 1,\n    label: {\n      title: \"$0–$1,500\",\n      description: \"1 work\",\n    },\n  },\n  {\n    value: 1,\n    label: {\n      title: \"$1,500–$3,000\",\n      description: \"1 work\",\n    },\n  },\n  {\n    value: 1,\n    label: {\n      title: \"$3,000–$4,500\",\n      description: \"1 work\",\n    },\n  },\n  {\n    value: 1,\n    label: {\n      title: \"$4,500–$6,000\",\n      description: \"1 work\",\n    },\n  },\n  {\n    value: 4,\n    label: {\n      title: \"$6,000–$7,500\",\n      description: \"4 works\",\n    },\n  },\n  {\n    value: 10,\n    label: {\n      title: \"$7,500–$9,000\",\n      description: \"10 works\",\n    },\n  },\n  {\n    value: 42,\n    label: {\n      title: \"$9,000–$10,500\",\n      description: \"42 works\",\n    },\n  },\n  {\n    value: 0,\n    label: {\n      title: \"$10,500–$12,000\",\n      description: \"0 works\",\n    },\n  },\n  {\n    value: 216,\n    label: {\n      title: \"$12,000–$13,500\",\n      description: \"216 works\",\n    },\n  },\n  {\n    value: 1,\n    label: {\n      title: \"$13,500–$15,000\",\n      description: \"1 work\",\n    },\n  },\n  {\n    value: 201,\n    label: {\n      title: \"$15,000–$16,500\",\n      description: \"201 works\",\n    },\n    highlightLabel: {\n      title: \"$15,000–$16,500\",\n      description: \"This work\",\n    },\n  },\n  {\n    value: 0,\n    label: {\n      title: \"$16,500–$18,000\",\n      description: \"0 works\",\n    },\n  },\n  {\n    value: 113,\n    label: {\n      title: \"$18,000–$19,500\",\n      description: \"113 works\",\n    },\n  },\n  {\n    value: 4,\n    label: {\n      title: \"$19,500–$21,000\",\n      description: \"4 works\",\n    },\n  },\n  {\n    value: 2,\n    label: {\n      title: \"$21,000–$22,500\",\n      description: \"2 works\",\n    },\n  },\n  {\n    value: 6,\n    label: {\n      title: \"$22,500–$24,000\",\n      description: \"6 works\",\n    },\n  },\n  {\n    value: 37,\n    label: {\n      title: \"$24,000–$25,500\",\n      description: \"37 works\",\n    },\n  },\n  {\n    value: 1,\n    label: {\n      title: \"$25,500–$27,000\",\n      description: \"1 work\",\n    },\n  },\n  {\n    value: 3,\n    label: {\n      title: \"$27,000–$28,500\",\n      description: \"3 works\",\n    },\n  },\n  {\n    value: 0,\n    label: {\n      title: \"$28,500–$30,000\",\n      description: \"0 works\",\n    },\n  },\n  {\n    value: 0,\n    label: {\n      title: \"$30,000+\",\n      description: \"0 works\",\n    },\n  },\n]\n"],"mappings":"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"}

package/dist/elements/BarChart/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./BarChart";
+export * from "./Bar";

package/dist/elements/BarChart/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _BarChart = require("./BarChart");
+Object.keys(_BarChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BarChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _BarChart[key];
+    }
+  });
+});
+var _Bar = require("./Bar");
+Object.keys(_Bar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Bar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Bar[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/dist/elements/BarChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_BarChart","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_Bar"],"sources":["../../../src/elements/BarChart/index.ts"],"sourcesContent":["export * from \"./BarChart\"\nexport * from \"./Bar\"\n"],"mappings":";;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,SAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,SAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,SAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,IAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,IAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,IAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAC,IAAA,CAAAL,GAAA;IAAA;EAAA;AAAA"}