@artsy/palette-charts 44.14.0-canary.1497.33075.0 → 44.14.0-canary.1497.33079.0

package/dist/esm/elements/DataVis/utils/useWrapperWidth.js

@@ -0,0 +1,35 @@
+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; }
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * Returns width of container element
+ * @param ref reference to wrapper component
+ */
+export var useWrapperWidth = function useWrapperWidth(ref) {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  var widthCheckInterval = useRef(null);
+  useEffect(function () {
+    var setContainerWidth = function setContainerWidth() {
+      if (ref.current) {
+        setWidth(ref.current.getBoundingClientRect().width - 5);
+      }
+    };
+    setContainerWidth();
+    widthCheckInterval.current = setInterval(setContainerWidth, 500);
+    window.addEventListener("resize", setContainerWidth);
+    return function cleanup() {
+      window.removeEventListener("resize", setContainerWidth);
+      clearInterval(widthCheckInterval.current);
+    };
+  }, []);
+  return width;
+};
+//# sourceMappingURL=useWrapperWidth.js.map

package/dist/esm/elements/DataVis/utils/useWrapperWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWrapperWidth.js","names":["useEffect","useRef","useState","useWrapperWidth","ref","_useState","_useState2","_slicedToArray","width","setWidth","widthCheckInterval","setContainerWidth","current","getBoundingClientRect","setInterval","window","addEventListener","cleanup","removeEventListener","clearInterval"],"sources":["../../../../../src/elements/DataVis/utils/useWrapperWidth.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\"\n\n/**\n * Returns width of container element\n * @param ref reference to wrapper component\n */\nexport const useWrapperWidth = (ref: React.RefObject<HTMLElement>) => {\n  const [width, setWidth] = useState(0)\n\n  const widthCheckInterval = useRef(null)\n\n  useEffect(() => {\n    const setContainerWidth = () => {\n      if (ref.current) {\n        setWidth(ref.current.getBoundingClientRect().width - 5)\n      }\n    }\n\n    setContainerWidth()\n\n    widthCheckInterval.current = setInterval(setContainerWidth, 500)\n\n    window.addEventListener(\"resize\", setContainerWidth)\n\n    return function cleanup() {\n      window.removeEventListener(\"resize\", setContainerWidth)\n      clearInterval(widthCheckInterval.current)\n    }\n  }, [])\n\n  return width\n}\n"],"mappings":";;;;;;AAAA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;;AAEnD;AACA;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,GAAiC,EAAK;EACpE,IAAAC,SAAA,GAA0BH,QAAQ,CAAC,CAAC,CAAC;IAAAI,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAA9BG,KAAK,GAAAF,UAAA;IAAEG,QAAQ,GAAAH,UAAA;EAEtB,IAAMI,kBAAkB,GAAGT,MAAM,CAAC,IAAI,CAAC;EAEvCD,SAAS,CAAC,YAAM;IACd,IAAMW,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAA,EAAS;MAC9B,IAAIP,GAAG,CAACQ,OAAO,EAAE;QACfH,QAAQ,CAACL,GAAG,CAACQ,OAAO,CAACC,qBAAqB,EAAE,CAACL,KAAK,GAAG,CAAC,CAAC;MACzD;IACF,CAAC;IAEDG,iBAAiB,EAAE;IAEnBD,kBAAkB,CAACE,OAAO,GAAGE,WAAW,CAACH,iBAAiB,EAAE,GAAG,CAAC;IAEhEI,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEL,iBAAiB,CAAC;IAEpD,OAAO,SAASM,OAAOA,CAAA,EAAG;MACxBF,MAAM,CAACG,mBAAmB,CAAC,QAAQ,EAAEP,iBAAiB,CAAC;MACvDQ,aAAa,CAACT,kBAAkB,CAACE,OAAO,CAAC;IAC3C,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOJ,KAAK;AACd,CAAC"}

package/dist/esm/elements/DonutChart/DonutChart.js

@@ -0,0 +1,151 @@
+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; }
+import { Box, color, space, Text } from "@artsy/palette";
+import { interpolate } from "d3-interpolate";
+import { arc as d3_arc, pie as d3_pie } from "d3-shape";
+import React, { useRef, useState } from "react";
+import styled from "styled-components";
+import { ChartHoverTooltip } from "../DataVis/ChartHoverTooltip";
+import { coerceTooltip, coerceTooltipWithoutPadding } from "../DataVis/ChartTooltip";
+import { ProvideMousePosition } from "../DataVis/MousePositionContext";
+import { useWrapperWidth } from "../DataVis/utils/useWrapperWidth";
+var colors = ["mono10", "mono30", "mono60"];
+var MIN_CHART_SIZE = 30;
+/**
+ * DonutChart is a component that displays data points with donut shaped arcs.
+ * Good for illustrating numerical proportions.
+ */
+export var DonutChart = function DonutChart(_ref) {
+  var points = _ref.points,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? space(2) : _ref$margin;
+  var _useState = useState(-1),
+    _useState2 = _slicedToArray(_useState, 2),
+    hoverIndex = _useState2[0],
+    setHoverIndex = _useState2[1];
+  var wrapperRef = useRef(null);
+  var width = Math.max(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 ? space(2) : 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 = interpolate(0, 2 * Math.PI);
+  var arc = d3_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 = d3_arc().innerRadius(width / 2 - margin + donutLabelMargin).outerRadius(width / 2 - margin + donutLabelMargin);
+  var pie = d3_pie().value(function (d) {
+    return d.value;
+  });
+  var tooltip = points.map(function (point, index) {
+    var hover = hoverIndex === index;
+    return hover ? /*#__PURE__*/React.createElement(ChartHoverTooltip, {
+      key: "".concat(index, "-hover")
+    }, 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.createElement(DonutLabelContainer, {
+      key: index,
+      x: x + centerX,
+      y: y + centerY,
+      center: centerX
+    }, /*#__PURE__*/React.createElement(Text, {
+      color: "mono60",
+      variant: "xs"
+    }, coerceTooltipWithoutPadding(axisLabelX)));
+  });
+  var zeroStateArc = pie([{
+    value: 1
+  }]).map(function (zeroState) {
+    return /*#__PURE__*/React.createElement("path", {
+      key: "zero-state",
+      stroke: "none",
+      fill: color("mono5"),
+      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 = 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 = color(colors[1]);
+    }
+    return /*#__PURE__*/React.createElement("path", {
+      key: index,
+      fill: arcColor,
+      d: arc(datum),
+      onMouseEnter: function onMouseEnter() {
+        return setHoverIndex(index);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHoverIndex(-1);
+      }
+    });
+  });
+  return /*#__PURE__*/React.createElement(ProvideMousePosition, null, /*#__PURE__*/React.createElement(Box, {
+    ref: wrapperRef,
+    position: "relative"
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, tooltip, width !== MIN_CHART_SIZE && labels, /*#__PURE__*/React.createElement("svg", {
+    key: "svg",
+    width: width + margin,
+    height: width + margin
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(".concat(centerX, ", ").concat(centerY, ")")
+  }, zeroStateArc, /*#__PURE__*/React.createElement("g", null, slices))))));
+};
+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 = styled.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/esm/elements/DonutChart/DonutChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.js","names":["Box","color","space","Text","interpolate","arc","d3_arc","pie","d3_pie","React","useRef","useState","styled","ChartHoverTooltip","coerceTooltip","coerceTooltipWithoutPadding","ProvideMousePosition","useWrapperWidth","colors","MIN_CHART_SIZE","DonutChart","_ref","points","_ref$margin","margin","_useState","_useState2","_slicedToArray","hoverIndex","setHoverIndex","wrapperRef","width","Math","max","donutWidth","donutLabelMargin","padAngel","atan","centerX","centerY","values","map","d","value","angelInterpolator","PI","innerRadius","outerRadius","padAngle","labelArc","tooltip","point","index","hover","createElement","key","concat","labels","slice","_labelArc$centroid","centroid","_labelArc$centroid2","x","y","axisLabelX","DonutLabelContainer","center","variant","zeroStateArc","zeroState","stroke","fill","angle","endAngle","slices","datum","sortedIndex","arcColor","length","onMouseEnter","onMouseLeave","ref","position","Fragment","height","transform","displayName","computeLabelTranslate","dim","diffPercent","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[] = [\"mono10\", \"mono30\", \"mono60\"]\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=\"mono60\" 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(\"mono5\")}\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/esm/elements/DonutChart/DonutChart.story.js

@@ -0,0 +1,36 @@
+import { Box } from "@artsy/palette";
+import React from "react";
+import { DonutChart } from "../DonutChart";
+export default {
+  title: "Components/DonutChart"
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Box, {
+    width: "500px"
+  }, /*#__PURE__*/React.createElement(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"
+      }
+    }]
+  }));
+};
+Default.displayName = "Default";
+//# sourceMappingURL=DonutChart.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.story.js","names":["Box","React","DonutChart","title","Default","createElement","width","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,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU;AAEnB,eAAe;EACbC,KAAK,EAAE;AACT,CAAC;AAED,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACEH,KAAA,CAAAI,aAAA,CAACL,GAAG;IAACM,KAAK,EAAC;EAAO,gBAChBL,KAAA,CAAAI,aAAA,CAACH,UAAU;IACTK,MAAM,EAAE,CACN;MACEC,KAAK,EAAE,GAAG;MACVC,UAAU,EAAE,QAAQ;MACpBC,OAAO,EAAE;QAAEP,KAAK,EAAE,OAAO;QAAEQ,WAAW,EAAE;MAAa;IACvD,CAAC,EACD;MACEH,KAAK,EAAE,GAAG;MACVC,UAAU,EAAE,QAAQ;MACpBC,OAAO,EAAE;QAAEP,KAAK,EAAE,QAAQ;QAAEQ,WAAW,EAAE;MAAa;IACxD,CAAC,EACD;MACEH,KAAK,EAAE,GAAG;MACVC,UAAU,EAAE,QAAQ;MACpBC,OAAO,EAAE;QAAEP,KAAK,EAAE,QAAQ;QAAEQ,WAAW,EAAE;MAAa;IACxD,CAAC;EACD,EACF,CACE;AAEV,CAAC;AAxBYP,OAAO,CAAAQ,WAAA"}

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

@@ -0,0 +1,2 @@
+export * from "./DonutChart";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/DonutChart/index.ts"],"sourcesContent":["export * from \"./DonutChart\"\n"],"mappings":"AAAA"}

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

@@ -0,0 +1,20 @@
+import { useTheme } from "@artsy/palette";
+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 var Line = function Line(_ref) {
+  var path = _ref.path,
+    customColor = _ref.color;
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  return /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: theme.colors[customColor || "mono10"],
+    d: path
+  });
+};
+Line.displayName = "Line";
+//# sourceMappingURL=Line.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Line.js","names":["useTheme","React","Line","_ref","path","customColor","color","_useTheme","theme","createElement","fill","stroke","colors","d","displayName"],"sources":["../../../../src/elements/LineChart/Line.tsx"],"sourcesContent":["import { Color, useTheme } 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 = ({\n  path,\n  color: customColor,\n}: {\n  path: string\n  color?: Color\n}) => {\n  const { theme } = useTheme()\n  return (\n    <path fill=\"none\" stroke={theme.colors[customColor || \"mono10\"]} d={path} />\n  )\n}\n"],"mappings":"AAAA,SAAgBA,QAAQ,QAAQ,gBAAgB;AAChD,OAAOC,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAIA,CAAAC,IAAA,EAMX;EAAA,IALJC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACGC,WAAW,GAAAF,IAAA,CAAlBG,KAAK;EAKL,IAAAC,SAAA,GAAkBP,QAAQ,EAAE;IAApBQ,KAAK,GAAAD,SAAA,CAALC,KAAK;EACb,oBACEP,KAAA,CAAAQ,aAAA;IAAMC,IAAI,EAAC,MAAM;IAACC,MAAM,EAAEH,KAAK,CAACI,MAAM,CAACP,WAAW,IAAI,QAAQ,CAAE;IAACQ,CAAC,EAAET;EAAK,EAAG;AAEhF,CAAC;AAXYF,IAAI,CAAAY,WAAA"}

package/dist/esm/elements/LineChart/LineChart.js

@@ -0,0 +1,115 @@
+var _templateObject;
+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; }
+import { Flex, media, space, Text } from "@artsy/palette";
+import React, { useRef, useState } from "react";
+import styled from "styled-components";
+import { ChartHoverTooltip } from "../DataVis/ChartHoverTooltip";
+import { coerceTooltip } from "../DataVis/ChartTooltip";
+import { ProvideMousePosition } from "../DataVis/MousePositionContext";
+import { useWrapperWidth } from "../DataVis/utils/useWrapperWidth";
+import { LineChartSVG } from "./LineChartSVG";
+var margin = 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.
+ */
+export var LineChart = function LineChart(_ref) {
+  var points = _ref.points,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? DEFAULT_HEIGHT : _ref$height,
+    primaryColor = _ref.primaryColor,
+    hoverColor = _ref.hoverColor;
+  var _useState = useState(-1),
+    _useState2 = _slicedToArray(_useState, 2),
+    hoverIndex = _useState2[0],
+    setHoverIndex = _useState2[1];
+  var wrapperRef = useRef(null);
+  var width = useWrapperWidth(wrapperRef);
+  return /*#__PURE__*/React.createElement(ProvideMousePosition, null, /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "column",
+    ref: wrapperRef,
+    width: "100%"
+  }, width && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex, {
+    height: height
+  }, points.map(function (point, i) {
+    return /*#__PURE__*/React.createElement(HoverHandler, {
+      key: i,
+      index: i,
+      hoverIndex: hoverIndex,
+      setHoverIndex: setHoverIndex
+    }, coerceTooltip(point.tooltip));
+  })), /*#__PURE__*/React.createElement(LineChartSVG, {
+    width: width,
+    height: height,
+    margin: margin,
+    points: points,
+    hoverIndex: hoverIndex,
+    primaryColor: primaryColor,
+    hoverColor: hoverColor
+  }), points.filter(function (bar) {
+    return bar.axisLabelX;
+  }).length > 0 && /*#__PURE__*/React.createElement(Flex, {
+    px: "2",
+    width: width
+  }, points.map(function (_ref2, i) {
+    var axisLabelX = _ref2.axisLabelX;
+    return /*#__PURE__*/React.createElement(BarAxisLabelContainer, {
+      key: i,
+      first: i === 0,
+      last: i === points.length - 1
+    }, /*#__PURE__*/React.createElement(AxisLabelX, {
+      color: "mono60",
+      variant: "xs"
+    }, axisLabelX));
+  })))));
+};
+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.createElement(PointHoverArea, {
+    onMouseEnter: function onMouseEnter() {
+      return setHoverIndex(index);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHoverIndex(-1);
+    },
+    style: {
+      opacity: hover ? 1 : 0
+    }
+  }, hover && /*#__PURE__*/React.createElement(ChartHoverTooltip, null, children));
+};
+HoverHandler.displayName = "HoverHandler";
+/**
+ * The rectangle area around Dots which triggers mouseover for tooltip
+ */
+export var PointHoverArea = styled.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;"]);
+var BarAxisLabelContainer = styled.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;
+}, space(2), media.xs(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: ", ";;\n  "])), function (_ref5) {
+  var first = _ref5.first,
+    last = _ref5.last;
+  return first || last ? "auto" : "none";
+}));
+var AxisLabelX = styled(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/esm/elements/LineChart/LineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.js","names":["Flex","media","space","Text","React","useRef","useState","styled","ChartHoverTooltip","coerceTooltip","ProvideMousePosition","useWrapperWidth","LineChartSVG","margin","DEFAULT_HEIGHT","LineChart","_ref","points","_ref$height","height","primaryColor","hoverColor","_useState","_useState2","_slicedToArray","hoverIndex","setHoverIndex","wrapperRef","width","createElement","flexDirection","ref","Fragment","map","point","i","HoverHandler","key","index","tooltip","filter","bar","axisLabelX","length","px","_ref2","BarAxisLabelContainer","first","last","AxisLabelX","color","variant","displayName","_ref3","children","hover","PointHoverArea","onMouseEnter","onMouseLeave","style","opacity","div","withConfig","componentId","_ref4","xs","_templateObject","_taggedTemplateLiteral","_ref5"],"sources":["../../../../src/elements/LineChart/LineChart.tsx"],"sourcesContent":["import { Color, 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  primaryColor?: Color\n  hoverColor?: Color\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  primaryColor,\n  hoverColor,\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              primaryColor={primaryColor}\n              hoverColor={hoverColor}\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=\"mono60\" 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/esm/elements/LineChart/LineChart.story.js

@@ -0,0 +1,66 @@
+import React from "react";
+import { LineChart } from "./LineChart";
+export default {
+  title: "Components/LineChart"
+};
+
+/** Default LineChart with standard colors */
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(LineChart, {
+    points: POINTS
+  });
+};
+Default.displayName = "Default";
+/** LineChart with custom primary and hover colors */
+export var WithCustomColors = function WithCustomColors() {
+  return /*#__PURE__*/React.createElement(LineChart, {
+    points: POINTS,
+    primaryColor: "blue100",
+    hoverColor: "red100"
+  });
+};
+WithCustomColors.displayName = "WithCustomColors";
+var POINTS = [{
+  value: 10,
+  tooltip: {
+    title: "January",
+    description: "10 sales"
+  },
+  axisLabelX: "Jan"
+}, {
+  value: 25,
+  tooltip: {
+    title: "February",
+    description: "25 sales"
+  },
+  axisLabelX: "Feb"
+}, {
+  value: 15,
+  tooltip: {
+    title: "March",
+    description: "15 sales"
+  },
+  axisLabelX: "Mar"
+}, {
+  value: 30,
+  tooltip: {
+    title: "April",
+    description: "30 sales"
+  },
+  axisLabelX: "Apr"
+}, {
+  value: 20,
+  tooltip: {
+    title: "May",
+    description: "20 sales"
+  },
+  axisLabelX: "May"
+}, {
+  value: 35,
+  tooltip: {
+    title: "June",
+    description: "35 sales"
+  },
+  axisLabelX: "Jun"
+}];
+//# sourceMappingURL=LineChart.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.story.js","names":["React","LineChart","title","Default","createElement","points","POINTS","displayName","WithCustomColors","primaryColor","hoverColor","value","tooltip","description","axisLabelX"],"sources":["../../../../src/elements/LineChart/LineChart.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { LineChart } from \"./LineChart\"\n\nexport default {\n  title: \"Components/LineChart\",\n}\n\n/** Default LineChart with standard colors */\nexport const Default = () => {\n  return <LineChart points={POINTS} />\n}\n\n/** LineChart with custom primary and hover colors */\nexport const WithCustomColors = () => {\n  return (\n    <LineChart \n      points={POINTS}\n      primaryColor=\"blue100\"\n      hoverColor=\"red100\"\n    />\n  )\n}\n\nconst POINTS = [\n  {\n    value: 10,\n    tooltip: {\n      title: \"January\",\n      description: \"10 sales\",\n    },\n    axisLabelX: \"Jan\",\n  },\n  {\n    value: 25,\n    tooltip: {\n      title: \"February\", \n      description: \"25 sales\",\n    },\n    axisLabelX: \"Feb\",\n  },\n  {\n    value: 15,\n    tooltip: {\n      title: \"March\",\n      description: \"15 sales\", \n    },\n    axisLabelX: \"Mar\",\n  },\n  {\n    value: 30,\n    tooltip: {\n      title: \"April\",\n      description: \"30 sales\",\n    },\n    axisLabelX: \"Apr\",\n  },\n  {\n    value: 20,\n    tooltip: {\n      title: \"May\", \n      description: \"20 sales\",\n    },\n    axisLabelX: \"May\",\n  },\n  {\n    value: 35,\n    tooltip: {\n      title: \"June\",\n      description: \"35 sales\",\n    },\n    axisLabelX: \"Jun\",\n  },\n]"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS;AAElB,eAAe;EACbC,KAAK,EAAE;AACT,CAAC;;AAED;AACA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBAAOH,KAAA,CAAAI,aAAA,CAACH,SAAS;IAACI,MAAM,EAAEC;EAAO,EAAG;AACtC,CAAC;AAFYH,OAAO,CAAAI,WAAA;AAIpB;AACA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAA,EAAS;EACpC,oBACER,KAAA,CAAAI,aAAA,CAACH,SAAS;IACRI,MAAM,EAAEC,MAAO;IACfG,YAAY,EAAC,SAAS;IACtBC,UAAU,EAAC;EAAQ,EACnB;AAEN,CAAC;AARYF,gBAAgB,CAAAD,WAAA;AAU7B,IAAMD,MAAM,GAAG,CACb;EACEK,KAAK,EAAE,EAAE;EACTC,OAAO,EAAE;IACPV,KAAK,EAAE,SAAS;IAChBW,WAAW,EAAE;EACf,CAAC;EACDC,UAAU,EAAE;AACd,CAAC,EACD;EACEH,KAAK,EAAE,EAAE;EACTC,OAAO,EAAE;IACPV,KAAK,EAAE,UAAU;IACjBW,WAAW,EAAE;EACf,CAAC;EACDC,UAAU,EAAE;AACd,CAAC,EACD;EACEH,KAAK,EAAE,EAAE;EACTC,OAAO,EAAE;IACPV,KAAK,EAAE,OAAO;IACdW,WAAW,EAAE;EACf,CAAC;EACDC,UAAU,EAAE;AACd,CAAC,EACD;EACEH,KAAK,EAAE,EAAE;EACTC,OAAO,EAAE;IACPV,KAAK,EAAE,OAAO;IACdW,WAAW,EAAE;EACf,CAAC;EACDC,UAAU,EAAE;AACd,CAAC,EACD;EACEH,KAAK,EAAE,EAAE;EACTC,OAAO,EAAE;IACPV,KAAK,EAAE,KAAK;IACZW,WAAW,EAAE;EACf,CAAC;EACDC,UAAU,EAAE;AACd,CAAC,EACD;EACEH,KAAK,EAAE,EAAE;EACTC,OAAO,EAAE;IACPV,KAAK,EAAE,MAAM;IACbW,WAAW,EAAE;EACf,CAAC;EACDC,UAAU,EAAE;AACd,CAAC,CACF"}

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

@@ -0,0 +1,83 @@
+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; }
+import { useTheme } from "@artsy/palette";
+import { interpolateArray } from "d3-interpolate";
+import { line as d3Line } from "d3-shape";
+import React from "react";
+import styled from "styled-components";
+import { Line } from "./Line";
+import { Point } from "./Point";
+/**
+ * Component rendering the SVG part of the line chart (e.g line and points)
+ */
+export var LineChartSVG = function LineChartSVG(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    margin = _ref.margin,
+    points = _ref.points,
+    hoverIndex = _ref.hoverIndex,
+    primaryColor = _ref.primaryColor,
+    hoverColor = _ref.hoverColor;
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  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 = 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 = d3Line().x(displayXPosition).y(displayYPosition);
+  var interpolatedValues = valuesInterpolator(1);
+  return /*#__PURE__*/React.createElement(Svg, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(0, ".concat(margin, ")")
+  }, /*#__PURE__*/React.createElement("line", {
+    stroke: theme.colors.mono10,
+    x1: "0",
+    x2: width,
+    y1: h,
+    y2: h
+  }), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(".concat(margin, ", 0)")
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line, {
+    path: line(interpolatedValues),
+    color: primaryColor
+  }), interpolatedValues.map(function (value, index) {
+    return /*#__PURE__*/React.createElement(Point, {
+      hovered: hoverIndex === index,
+      key: index,
+      opacity: 1,
+      cx: displayXPosition(value, index),
+      cy: displayYPosition(value),
+      primaryColor: primaryColor,
+      hoverColor: hoverColor
+    });
+  })))));
+};
+LineChartSVG.displayName = "LineChartSVG";
+var Svg = styled.svg.withConfig({
+  displayName: "LineChartSVG__Svg",
+  componentId: "sc-112gtml-0"
+})(["position:absolute;"]);
+//# sourceMappingURL=LineChartSVG.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LineChartSVG.js","names":["useTheme","interpolateArray","line","d3Line","React","styled","Line","Point","LineChartSVG","_ref","width","height","margin","points","hoverIndex","primaryColor","hoverColor","_useTheme","theme","values","map","d","value","maxValue","Math","max","apply","_toConsumableArray","_ref2","zeros","valuesInterpolator","w","h","displayYPosition","displayXPosition","_d","i","length","x","y","interpolatedValues","createElement","Svg","transform","concat","stroke","colors","mono10","x1","x2","y1","y2","Fragment","path","color","index","hovered","key","opacity","cx","cy","displayName","svg","withConfig","componentId"],"sources":["../../../../src/elements/LineChart/LineChartSVG.tsx"],"sourcesContent":["import { Color, useTheme } 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  primaryColor?: Color\n  hoverColor?: Color\n}\n\n/**\n * Component rendering the SVG part of the line chart (e.g line and points)\n */\nexport const LineChartSVG: React.FC<\n  React.PropsWithChildren<LineChartSVGProps>\n> = ({ width, height, margin, points, hoverIndex, primaryColor, hoverColor }: LineChartSVGProps) => {\n  const { theme } = useTheme()\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={theme.colors.mono10} x1=\"0\" x2={width} y1={h} y2={h} />\n        <g transform={`translate(${margin}, 0)`}>\n          <>\n            <Line path={line(interpolatedValues as any)} color={primaryColor} />\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                  primaryColor={primaryColor}\n                  hoverColor={hoverColor}\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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"}