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

package/dist/elements/DonutChart/DonutChart.js

@@ -0,0 +1,162 @@
+"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.DonutChart = void 0;
+var _palette = require("@artsy/palette");
+var _d3Interpolate = require("d3-interpolate");
+var _d3Shape = require("d3-shape");
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ChartHoverTooltip = require("../DataVis/ChartHoverTooltip");
+var _ChartTooltip = require("../DataVis/ChartTooltip");
+var _MousePositionContext = require("../DataVis/MousePositionContext");
+var _useWrapperWidth = require("../DataVis/utils/useWrapperWidth");
+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; }
+var colors = ["black10", "black30", "black60"];
+var MIN_CHART_SIZE = 30;
+/**
+ * DonutChart is a component that displays data points with donut shaped arcs.
+ * Good for illustrating numerical proportions.
+ */
+var DonutChart = function DonutChart(_ref) {
+  var points = _ref.points,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? (0, _palette.space)(2) : _ref$margin;
+  var _useState = (0, _react.useState)(-1),
+    _useState2 = _slicedToArray(_useState, 2),
+    hoverIndex = _useState2[0],
+    setHoverIndex = _useState2[1];
+  var wrapperRef = (0, _react.useRef)(null);
+  var width = Math.max((0, _useWrapperWidth.useWrapperWidth)(wrapperRef), MIN_CHART_SIZE);
+
+  // width of the arc is %12 of chart width
+  var donutWidth = width * 0.12;
+
+  // margin between chart and labels step down to 10px when chart is smaller than 230px
+  var donutLabelMargin = width > 230 ? (0, _palette.space)(2) : (0, _palette.space)(1);
+
+  // 2px in radians
+  var padAngel = Math.atan(2 / width);
+  var centerX = width / 2 + margin;
+  var centerY = width / 2 + margin;
+  var values = points.map(function (d) {
+    return d.value;
+  });
+  var angelInterpolator = (0, _d3Interpolate.interpolate)(0, 2 * Math.PI);
+  var arc = (0, _d3Shape.arc)().innerRadius(width / 2 - margin - donutWidth).outerRadius(width / 2 - margin).padAngle(padAngel);
+
+  // virtual donut to use its arc centroids to calculate label position
+  var labelArc = (0, _d3Shape.arc)().innerRadius(width / 2 - margin + donutLabelMargin).outerRadius(width / 2 - margin + donutLabelMargin);
+  var pie = (0, _d3Shape.pie)().value(function (d) {
+    return d.value;
+  });
+  var tooltip = points.map(function (point, index) {
+    var hover = hoverIndex === index;
+    return hover ? /*#__PURE__*/_react.default.createElement(_ChartHoverTooltip.ChartHoverTooltip, {
+      key: "".concat(index, "-hover")
+    }, (0, _ChartTooltip.coerceTooltip)(point.tooltip)) : null;
+  });
+  var labels = pie(points).map(function (slice, index) {
+    var _labelArc$centroid = labelArc.centroid(slice),
+      _labelArc$centroid2 = _slicedToArray(_labelArc$centroid, 2),
+      x = _labelArc$centroid2[0],
+      y = _labelArc$centroid2[1];
+    var axisLabelX = points[index].axisLabelX;
+    return axisLabelX && /*#__PURE__*/_react.default.createElement(DonutLabelContainer, {
+      key: index,
+      x: x + centerX,
+      y: y + centerY,
+      center: centerX
+    }, /*#__PURE__*/_react.default.createElement(_palette.Text, {
+      color: "black60",
+      variant: "xs"
+    }, (0, _ChartTooltip.coerceTooltipWithoutPadding)(axisLabelX)));
+  });
+  var zeroStateArc = pie([{
+    value: 1
+  }]).map(function (zeroState) {
+    return /*#__PURE__*/_react.default.createElement("path", {
+      key: "zero-state",
+      stroke: "none",
+      fill: (0, _palette.color)("black5"),
+      d: arc(zeroState)
+    });
+  });
+  var angle = angelInterpolator(1);
+  pie.endAngle(angle);
+  var slices = pie(points).map(function (datum, index) {
+    // d3 by default sorts slices by values. for color assignment we
+    // need sorted index but for hover we need original order in points
+    // to match with correct tooltip
+    var sortedIndex = datum.index;
+    var arcColor = (0, _palette.color)(colors[sortedIndex % colors.length]);
+    // avoid the first and last arc ending up the same color
+    if (sortedIndex === values.length - 1 && sortedIndex % colors.length === 0) {
+      arcColor = (0, _palette.color)(colors[1]);
+    }
+    return /*#__PURE__*/_react.default.createElement("path", {
+      key: index,
+      fill: arcColor,
+      d: arc(datum),
+      onMouseEnter: function onMouseEnter() {
+        return setHoverIndex(index);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHoverIndex(-1);
+      }
+    });
+  });
+  return /*#__PURE__*/_react.default.createElement(_MousePositionContext.ProvideMousePosition, null, /*#__PURE__*/_react.default.createElement(_palette.Box, {
+    ref: wrapperRef,
+    position: "relative"
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tooltip, width !== MIN_CHART_SIZE && labels, /*#__PURE__*/_react.default.createElement("svg", {
+    key: "svg",
+    width: width + margin,
+    height: width + margin
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    transform: "translate(".concat(centerX, ", ").concat(centerY, ")")
+  }, zeroStateArc, /*#__PURE__*/_react.default.createElement("g", null, slices))))));
+};
+exports.DonutChart = DonutChart;
+DonutChart.displayName = "DonutChart";
+// to create a float:right effect for labels that are on left side (also top)
+var computeLabelTranslate = function computeLabelTranslate(dim, center) {
+  var diffPercent = (dim - center) / center;
+  if (diffPercent < -0.25) {
+    return "-100%";
+  } else if (diffPercent < -0 && diffPercent > -0.25) {
+    return "-50%";
+  } else {
+    return "0";
+  }
+};
+var DonutLabelContainer = _styledComponents.default.div.withConfig({
+  displayName: "DonutChart__DonutLabelContainer",
+  componentId: "sc-1ieod6t-0"
+})(["top:", "px;left:", "px;position:absolute;text-align:center;transform:translate( ", ",", " );white-space:nowrap;"], function (_ref2) {
+  var y = _ref2.y;
+  return y;
+}, function (_ref3) {
+  var x = _ref3.x;
+  return x;
+}, function (_ref4) {
+  var x = _ref4.x,
+    center = _ref4.center;
+  return computeLabelTranslate(x, center);
+}, function (_ref5) {
+  var y = _ref5.y,
+    center = _ref5.center;
+  return computeLabelTranslate(y, center);
+});
+//# sourceMappingURL=DonutChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.js","names":["_palette","require","_d3Interpolate","_d3Shape","_react","_interopRequireWildcard","_styledComponents","_interopRequireDefault","_ChartHoverTooltip","_ChartTooltip","_MousePositionContext","_useWrapperWidth","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","colors","MIN_CHART_SIZE","DonutChart","_ref","points","_ref$margin","margin","space","_useState","useState","_useState2","hoverIndex","setHoverIndex","wrapperRef","useRef","width","Math","max","useWrapperWidth","donutWidth","donutLabelMargin","padAngel","atan","centerX","centerY","values","map","d","angelInterpolator","interpolate","PI","arc","d3_arc","innerRadius","outerRadius","padAngle","labelArc","pie","d3_pie","tooltip","point","index","hover","createElement","ChartHoverTooltip","concat","coerceTooltip","labels","_labelArc$centroid","centroid","_labelArc$centroid2","x","y","axisLabelX","DonutLabelContainer","center","Text","color","variant","coerceTooltipWithoutPadding","zeroStateArc","zeroState","stroke","fill","angle","endAngle","slices","datum","sortedIndex","arcColor","onMouseEnter","onMouseLeave","ProvideMousePosition","Box","ref","position","Fragment","height","transform","exports","displayName","computeLabelTranslate","dim","diffPercent","styled","div","withConfig","componentId","_ref2","_ref3","_ref4","_ref5"],"sources":["../../../src/elements/DonutChart/DonutChart.tsx"],"sourcesContent":["import { Box, color, Color, space, Text } 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<React.PropsWithChildren<DonutChartProps>> = ({\n  points,\n  margin = space(2), // FIXME: This whole\n}) => {\n  const [hoverIndex, setHoverIndex] = useState(-1)\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          x={x + centerX}\n          y={y + centerY}\n          center={centerX}\n        >\n          <Text color=\"black60\" variant=\"xs\">\n            {coerceTooltipWithoutPadding(axisLabelX)}\n          </Text>\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}\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`\n"],"mappings":"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"}

package/dist/elements/DonutChart/DonutChart.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/DonutChart/DonutChart.story.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _palette = require("@artsy/palette");
+var _react = _interopRequireDefault(require("react"));
+var _DonutChart = require("../DonutChart");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: "Components/DonutChart"
+};
+exports.default = _default;
+var Default = function Default() {
+  return /*#__PURE__*/_react.default.createElement(_palette.Box, {
+    width: "500px"
+  }, /*#__PURE__*/_react.default.createElement(_DonutChart.DonutChart, {
+    points: [{
+      value: 567,
+      axisLabelX: "Sep 11",
+      tooltip: {
+        title: "Sep 8",
+        description: "100 clicks"
+      }
+    }, {
+      value: 300,
+      axisLabelX: "Sep 12",
+      tooltip: {
+        title: "Sep 12",
+        description: "300 clicks"
+      }
+    }, {
+      value: 800,
+      axisLabelX: "Sep 16",
+      tooltip: {
+        title: "Sep 16",
+        description: "800 clicks"
+      }
+    }]
+  }));
+};
+exports.Default = Default;
+Default.displayName = "Default";
+//# sourceMappingURL=DonutChart.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.story.js","names":["_palette","require","_react","_interopRequireDefault","_DonutChart","obj","__esModule","default","_default","title","exports","Default","createElement","Box","width","DonutChart","points","value","axisLabelX","tooltip","description","displayName"],"sources":["../../../src/elements/DonutChart/DonutChart.story.tsx"],"sourcesContent":["import { Box } from \"@artsy/palette\"\nimport React from \"react\"\nimport { DonutChart } from \"../DonutChart\"\n\nexport default {\n  title: \"Components/DonutChart\",\n}\n\nexport const Default = () => {\n  return (\n    <Box width=\"500px\">\n      <DonutChart\n        points={[\n          {\n            value: 567,\n            axisLabelX: \"Sep 11\",\n            tooltip: { title: \"Sep 8\", description: \"100 clicks\" },\n          },\n          {\n            value: 300,\n            axisLabelX: \"Sep 12\",\n            tooltip: { title: \"Sep 12\", description: \"300 clicks\" },\n          },\n          {\n            value: 800,\n            axisLabelX: \"Sep 16\",\n            tooltip: { title: \"Sep 16\", description: \"800 clicks\" },\n          },\n        ]}\n      />\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAA0C,SAAAE,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAE3B;EACbC,KAAK,EAAE;AACT,CAAC;AAAAC,OAAA,CAAAH,OAAA,GAAAC,QAAA;AAEM,IAAMG,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACET,MAAA,CAAAK,OAAA,CAAAK,aAAA,CAACZ,QAAA,CAAAa,GAAG;IAACC,KAAK,EAAC;EAAO,gBAChBZ,MAAA,CAAAK,OAAA,CAAAK,aAAA,CAACR,WAAA,CAAAW,UAAU;IACTC,MAAM,EAAE,CACN;MACEC,KAAK,EAAE,GAAG;MACVC,UAAU,EAAE,QAAQ;MACpBC,OAAO,EAAE;QAAEV,KAAK,EAAE,OAAO;QAAEW,WAAW,EAAE;MAAa;IACvD,CAAC,EACD;MACEH,KAAK,EAAE,GAAG;MACVC,UAAU,EAAE,QAAQ;MACpBC,OAAO,EAAE;QAAEV,KAAK,EAAE,QAAQ;QAAEW,WAAW,EAAE;MAAa;IACxD,CAAC,EACD;MACEH,KAAK,EAAE,GAAG;MACVC,UAAU,EAAE,QAAQ;MACpBC,OAAO,EAAE;QAAEV,KAAK,EAAE,QAAQ;QAAEW,WAAW,EAAE;MAAa;IACxD,CAAC;EACD,EACF,CACE;AAEV,CAAC;AAAAV,OAAA,CAAAC,OAAA,GAAAA,OAAA;AAxBYA,OAAO,CAAAU,WAAA"}

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

@@ -0,0 +1 @@
+export * from "./DonutChart";

package/dist/elements/DonutChart/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_DonutChart","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["../../../src/elements/DonutChart/index.ts"],"sourcesContent":["export * from \"./DonutChart\"\n"],"mappings":";;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,WAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,WAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,WAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}

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

@@ -0,0 +1,8 @@
+import React from "react";
+/**
+ * Line is the component responsible for rendering a line that goes through all of the data points
+ * in a line chart.
+ */
+export declare const Line: ({ path }: {
+    path: string;
+}) => React.JSX.Element;

package/dist/elements/LineChart/Line.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Line = void 0;
+var _palette = require("@artsy/palette");
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Line is the component responsible for rendering a line that goes through all of the data points
+ * in a line chart.
+ */
+var Line = function Line(_ref) {
+  var path = _ref.path;
+  return /*#__PURE__*/_react.default.createElement("path", {
+    fill: "none",
+    stroke: (0, _palette.color)("black10"),
+    d: path
+  });
+};
+exports.Line = Line;
+Line.displayName = "Line";
+//# sourceMappingURL=Line.js.map

package/dist/elements/LineChart/Line.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Line.js","names":["_palette","require","_react","_interopRequireDefault","obj","__esModule","default","Line","_ref","path","createElement","fill","stroke","color","d","exports","displayName"],"sources":["../../../src/elements/LineChart/Line.tsx"],"sourcesContent":["import { color } from \"@artsy/palette\"\nimport React from \"react\"\n\n/**\n * Line is the component responsible for rendering a line that goes through all of the data points\n * in a line chart.\n */\nexport const Line = ({ path }: { path: string }) => {\n  return <path fill=\"none\" stroke={color(\"black10\")} d={path} />\n}\n"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAyB,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEzB;AACA;AACA;AACA;AACO,IAAMG,IAAI,GAAG,SAAPA,IAAIA,CAAAC,IAAA,EAAmC;EAAA,IAA7BC,IAAI,GAAAD,IAAA,CAAJC,IAAI;EACzB,oBAAOP,MAAA,CAAAI,OAAA,CAAAI,aAAA;IAAMC,IAAI,EAAC,MAAM;IAACC,MAAM,EAAE,IAAAC,cAAK,EAAC,SAAS,CAAE;IAACC,CAAC,EAAEL;EAAK,EAAG;AAChE,CAAC;AAAAM,OAAA,CAAAR,IAAA,GAAAA,IAAA;AAFYA,IAAI,CAAAS,WAAA"}

package/dist/elements/LineChart/LineChart.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ChartProps } from "../DataVis/utils/SharedTypes";
+export interface LineChartProps extends ChartProps {
+    height?: number;
+}
+/**
+ * LineChart is a component that displays some data points connected by lines.
+ * Useful for visualizing a time series, etc.
+ */
+export declare const LineChart: React.FC<React.PropsWithChildren<LineChartProps>>;
+/**
+ * The rectangle area around Dots which triggers mouseover for tooltip
+ */
+export declare const PointHoverArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/elements/LineChart/LineChart.js

@@ -0,0 +1,123 @@
+"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.PointHoverArea = exports.LineChart = void 0;
+var _palette = require("@artsy/palette");
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ChartHoverTooltip = require("../DataVis/ChartHoverTooltip");
+var _ChartTooltip = require("../DataVis/ChartTooltip");
+var _MousePositionContext = require("../DataVis/MousePositionContext");
+var _useWrapperWidth = require("../DataVis/utils/useWrapperWidth");
+var _LineChartSVG = require("./LineChartSVG");
+var _templateObject;
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+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 margin = (0, _palette.space)(2);
+var DEFAULT_HEIGHT = 87;
+/**
+ * LineChart is a component that displays some data points connected by lines.
+ * Useful for visualizing a time series, etc.
+ */
+var LineChart = function LineChart(_ref) {
+  var points = _ref.points,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? DEFAULT_HEIGHT : _ref$height;
+  var _useState = (0, _react.useState)(-1),
+    _useState2 = _slicedToArray(_useState, 2),
+    hoverIndex = _useState2[0],
+    setHoverIndex = _useState2[1];
+  var wrapperRef = (0, _react.useRef)(null);
+  var width = (0, _useWrapperWidth.useWrapperWidth)(wrapperRef);
+  return /*#__PURE__*/_react.default.createElement(_MousePositionContext.ProvideMousePosition, null, /*#__PURE__*/_react.default.createElement(_palette.Flex, {
+    flexDirection: "column",
+    ref: wrapperRef,
+    width: "100%"
+  }, width && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_palette.Flex, {
+    height: height
+  }, points.map(function (point, i) {
+    return /*#__PURE__*/_react.default.createElement(HoverHandler, {
+      key: i,
+      index: i,
+      hoverIndex: hoverIndex,
+      setHoverIndex: setHoverIndex
+    }, (0, _ChartTooltip.coerceTooltip)(point.tooltip));
+  })), /*#__PURE__*/_react.default.createElement(_LineChartSVG.LineChartSVG, {
+    width: width,
+    height: height,
+    margin: margin,
+    points: points,
+    hoverIndex: hoverIndex
+  }), points.filter(function (bar) {
+    return bar.axisLabelX;
+  }).length > 0 && /*#__PURE__*/_react.default.createElement(_palette.Flex, {
+    px: "2",
+    width: width
+  }, points.map(function (_ref2, i) {
+    var axisLabelX = _ref2.axisLabelX;
+    return /*#__PURE__*/_react.default.createElement(BarAxisLabelContainer, {
+      key: i,
+      first: i === 0,
+      last: i === points.length - 1
+    }, /*#__PURE__*/_react.default.createElement(AxisLabelX, {
+      color: "black60",
+      variant: "xs"
+    }, axisLabelX));
+  })))));
+};
+exports.LineChart = LineChart;
+LineChart.displayName = "LineChart";
+var HoverHandler = function HoverHandler(_ref3) {
+  var children = _ref3.children,
+    index = _ref3.index,
+    hoverIndex = _ref3.hoverIndex,
+    setHoverIndex = _ref3.setHoverIndex;
+  var hover = hoverIndex === index;
+  return /*#__PURE__*/_react.default.createElement(PointHoverArea, {
+    onMouseEnter: function onMouseEnter() {
+      return setHoverIndex(index);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHoverIndex(-1);
+    },
+    style: {
+      opacity: hover ? 1 : 0
+    }
+  }, hover && /*#__PURE__*/_react.default.createElement(_ChartHoverTooltip.ChartHoverTooltip, null, children));
+};
+HoverHandler.displayName = "HoverHandler";
+/**
+ * The rectangle area around Dots which triggers mouseover for tooltip
+ */
+var PointHoverArea = _styledComponents.default.div.withConfig({
+  displayName: "LineChart__PointHoverArea",
+  componentId: "sc-5u6zwj-0"
+})(["flex:1;z-index:1;margin:0 1%;opacity:0;transition:opacity 0.4s ease-in;"]);
+exports.PointHoverArea = PointHoverArea;
+var BarAxisLabelContainer = _styledComponents.default.div.withConfig({
+  displayName: "LineChart__BarAxisLabelContainer",
+  componentId: "sc-5u6zwj-1"
+})(["flex:", ";min-height:", "px;position:relative;", ";"], function (_ref4) {
+  var last = _ref4.last;
+  return last ? 0 : 1;
+}, (0, _palette.space)(2), _palette.media.xs(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: ", ";;\n  "])), function (_ref5) {
+  var first = _ref5.first,
+    last = _ref5.last;
+  return first || last ? "auto" : "none";
+}));
+var AxisLabelX = (0, _styledComponents.default)(_palette.Text).withConfig({
+  displayName: "LineChart__AxisLabelX",
+  componentId: "sc-5u6zwj-2"
+})(["position:absolute;text-align:center;white-space:nowrap;transform:translateX(-33%);"]);
+//# sourceMappingURL=LineChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.js","names":["_palette","require","_react","_interopRequireWildcard","_styledComponents","_interopRequireDefault","_ChartHoverTooltip","_ChartTooltip","_MousePositionContext","_useWrapperWidth","_LineChartSVG","_templateObject","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","err","return","isArray","margin","space","DEFAULT_HEIGHT","LineChart","_ref","points","_ref$height","height","_useState","useState","_useState2","hoverIndex","setHoverIndex","wrapperRef","useRef","width","useWrapperWidth","createElement","ProvideMousePosition","Flex","flexDirection","ref","Fragment","map","point","HoverHandler","index","coerceTooltip","tooltip","LineChartSVG","filter","bar","axisLabelX","px","_ref2","BarAxisLabelContainer","first","last","AxisLabelX","color","variant","exports","displayName","_ref3","children","hover","PointHoverArea","onMouseEnter","onMouseLeave","style","opacity","ChartHoverTooltip","styled","div","withConfig","componentId","_ref4","media","xs","_ref5","Text"],"sources":["../../../src/elements/LineChart/LineChart.tsx"],"sourcesContent":["import { Flex, media, space, Text } 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<React.PropsWithChildren<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\" variant=\"xs\">\n                      {axisLabelX as any}\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<React.PropsWithChildren<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<AxisContainerProps>`\n    display: ${({ first, last }) => (first || last ? \"auto\" : \"none\")};;\n  `};\n`\n\nconst AxisLabelX = styled(Text)`\n  position: absolute;\n  text-align: center;\n  white-space: nowrap;\n  transform: translateX(-33%);\n`\n"],"mappings":"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"}

package/dist/elements/LineChart/LineChartSVG.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { PointDescriptor } from "../DataVis/utils/SharedTypes";
+interface LineChartSVGProps {
+    width: number;
+    height: number;
+    margin: number;
+    points: PointDescriptor[];
+    hoverIndex: number;
+    hasEnteredViewport?: boolean;
+}
+/**
+ * Component rendering the SVG part of the line chart (e.g line and points)
+ */
+export declare const LineChartSVG: React.FC<React.PropsWithChildren<LineChartSVGProps>>;
+export {};

package/dist/elements/LineChart/LineChartSVG.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LineChartSVG = void 0;
+var _palette = require("@artsy/palette");
+var _d3Interpolate = require("d3-interpolate");
+var _d3Shape = require("d3-shape");
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Line = require("./Line");
+var _Point = require("./Point");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 _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" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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; }
+/**
+ * Component rendering the SVG part of the line chart (e.g line and points)
+ */
+var LineChartSVG = function LineChartSVG(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    margin = _ref.margin,
+    points = _ref.points,
+    hoverIndex = _ref.hoverIndex;
+  var values = points.map(function (d) {
+    return d.value;
+  });
+  var maxValue = Math.max.apply(Math, _toConsumableArray(points.map(function (_ref2) {
+    var value = _ref2.value;
+    return value;
+  })));
+  var zeros = values.map(function () {
+    return 0;
+  });
+  var valuesInterpolator = (0, _d3Interpolate.interpolateArray)(zeros, values);
+  var w = width - 2 * margin;
+  var h = height - 2 * margin;
+
+  // maps value to x/y position
+  var displayYPosition = function displayYPosition(d) {
+    return maxValue ? h - d * h / maxValue : h;
+  };
+  var displayXPosition = function displayXPosition(_d, i) {
+    return i / (points.length - 1) * w;
+  };
+  var line = (0, _d3Shape.line)().x(displayXPosition).y(displayYPosition);
+  var interpolatedValues = valuesInterpolator(1);
+  return /*#__PURE__*/_react.default.createElement(Svg, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    transform: "translate(0, ".concat(margin, ")")
+  }, /*#__PURE__*/_react.default.createElement("line", {
+    stroke: (0, _palette.color)("black10"),
+    x1: "0",
+    x2: width,
+    y1: h,
+    y2: h
+  }), /*#__PURE__*/_react.default.createElement("g", {
+    transform: "translate(".concat(margin, ", 0)")
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Line.Line, {
+    path: line(interpolatedValues)
+  }), interpolatedValues.map(function (value, index) {
+    return /*#__PURE__*/_react.default.createElement(_Point.Point, {
+      hovered: hoverIndex === index,
+      key: index,
+      opacity: 1,
+      cx: displayXPosition(value, index),
+      cy: displayYPosition(value)
+    });
+  })))));
+};
+exports.LineChartSVG = LineChartSVG;
+LineChartSVG.displayName = "LineChartSVG";
+var Svg = _styledComponents.default.svg.withConfig({
+  displayName: "LineChartSVG__Svg",
+  componentId: "sc-112gtml-0"
+})(["position:absolute;"]);
+//# sourceMappingURL=LineChartSVG.js.map

package/dist/elements/LineChart/LineChartSVG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChartSVG.js","names":["_palette","require","_d3Interpolate","_d3Shape","_react","_interopRequireDefault","_styledComponents","_Line","_Point","obj","__esModule","default","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","o","minLen","_arrayLikeToArray","n","Object","prototype","toString","call","slice","constructor","name","Array","from","test","iter","Symbol","iterator","isArray","len","length","i","arr2","LineChartSVG","_ref","width","height","margin","points","hoverIndex","values","map","d","value","maxValue","Math","max","apply","_ref2","zeros","valuesInterpolator","interpolateArray","w","h","displayYPosition","displayXPosition","_d","line","d3Line","x","y","interpolatedValues","createElement","Svg","transform","concat","stroke","color","x1","x2","y1","y2","Fragment","Line","path","index","Point","hovered","key","opacity","cx","cy","exports","displayName","styled","svg","withConfig","componentId"],"sources":["../../../src/elements/LineChart/LineChartSVG.tsx"],"sourcesContent":["import { color } from \"@artsy/palette\"\nimport { interpolateArray } from \"d3-interpolate\"\nimport { line as d3Line } from \"d3-shape\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { PointDescriptor } from \"../DataVis/utils/SharedTypes\"\nimport { Line } from \"./Line\"\nimport { Point } from \"./Point\"\n\ninterface LineChartSVGProps {\n  width: number\n  height: number\n  margin: number\n  points: PointDescriptor[]\n  hoverIndex: number\n  hasEnteredViewport?: boolean\n}\n\n/**\n * Component rendering the SVG part of the line chart (e.g line and points)\n */\nexport const LineChartSVG: React.FC<React.PropsWithChildren<LineChartSVGProps>> = ({\n  width,\n  height,\n  margin,\n  points,\n  hoverIndex,\n}: LineChartSVGProps) => {\n  const values = points.map((d) => d.value)\n  const maxValue = Math.max(...points.map(({ value }) => value))\n\n  const zeros = values.map(() => 0)\n  const valuesInterpolator = interpolateArray(zeros, values)\n\n  const w = width - 2 * margin\n  const h = height - 2 * margin\n\n  // maps value to x/y position\n  const displayYPosition = (d) => (maxValue ? h - (d * h) / maxValue : h)\n  const displayXPosition = (_d, i) => (i / (points.length - 1)) * w\n\n  const line = d3Line().x(displayXPosition).y(displayYPosition)\n\n  const interpolatedValues: any = valuesInterpolator(1)\n  return (\n    <Svg width={width} height={height}>\n      <g transform={`translate(0, ${margin})`}>\n        <line stroke={color(\"black10\")} x1=\"0\" x2={width} y1={h} y2={h} />\n        <g transform={`translate(${margin}, 0)`}>\n          <>\n            <Line path={line(interpolatedValues as any)} />\n            {interpolatedValues.map((value, index) => {\n              return (\n                <Point\n                  hovered={hoverIndex === index}\n                  key={index}\n                  opacity={1}\n                  cx={displayXPosition(value, index)}\n                  cy={displayYPosition(value)}\n                />\n              )\n            })}\n          </>\n        </g>\n      </g>\n    </Svg>\n  )\n}\n\nconst Svg = styled.svg`\n  position: absolute;\n`\n"],"mappings":"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"}