@artsy/palette-charts 40.0.0-canary.1423.31650.0 → 40.0.0-canary.1433.31866.0

package/dist/elements/BarChart/Bar.js

@@ -28,11 +28,11 @@ var BarBox = (0, _styledComponents.default)(_palette.Box).withConfig({
   displayName: "Bar__BarBox",
   componentId: "sc-1p8ufrs-0"
 })(["transition:height 0.8s ease;position:relative;background:", ";margin-right:2px;margin-bottom:-1px;:last-child{margin-right:0;}flex:1;cursor:", ";border-top-left-radius:1px;border-top-right-radius:1px;@media (min-width:", "){:hover{background:", ";}}"], function (props) {
-  return props.isHighlighted ? (0, _palette.color)("black60") : (0, _palette.color)("black10");
+  return props.isHighlighted ? (0, _palette.color)("mono60") : (0, _palette.color)("mono10");
 }, function (props) {
   return props.onClick ? "pointer" : "default";
 }, _palette.breakpoints.sm, function (props) {
-  return props.isHighlighted ? (0, _palette.color)("black60") : (0, _palette.color)("black30");
+  return props.isHighlighted ? (0, _palette.color)("mono60") : (0, _palette.color)("mono30");
 });
 var HighlightLabelPositioner = (0, _styledComponents.default)(_ChartHoverTooltip.BaseTooltipPositioner).withConfig({
   displayName: "Bar__HighlightLabelPositioner",
@@ -41,7 +41,7 @@ var HighlightLabelPositioner = (0, _styledComponents.default)(_ChartHoverTooltip
 var HighlightLabelBox = (0, _styledComponents.default)(_palette.Flex).withConfig({
   displayName: "Bar__HighlightLabelBox",
   componentId: "sc-1p8ufrs-2"
-})(["", ";position:relative;background-color:", ";border:1px solid ", ";border-radius:2px;text-align:center;"], _palette.media.xs(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: none;\n  "]))), (0, _palette.color)("white100"), (0, _palette.color)("black10"));
+})(["", ";position:relative;background-color:", ";border:1px solid ", ";border-radius:2px;text-align:center;"], _palette.media.xs(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: none;\n  "]))), (0, _palette.color)("mono0"), (0, _palette.color)("mono10"));
 
 // the little dotted line which connects the label to the bar
 var LabelLineSvg = _styledComponents.default.svg.withConfig({
@@ -57,7 +57,7 @@ var LabelLine = function LabelLine() {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M0.5 1.11111V0H1.5V1.11111H0.5ZM0.5 4.44444V2.22222H1.5V4.44444H0.5ZM0.5 7.77778V5.55556H1.5V7.77778H0.5ZM0.5 10V8.88889H1.5V10H0.5Z",
-    fill: (0, _palette.color)("black30")
+    fill: (0, _palette.color)("mono30")
   }));
 };
 LabelLine.displayName = "LabelLine";
@@ -87,7 +87,7 @@ var TRIANGLE_BOTTOM_PADDING = (0, _palette.space)(0.5);
 var TriangleHighlight = _styledComponents.default.div.withConfig({
   displayName: "Bar__TriangleHighlight",
   componentId: "sc-1p8ufrs-4"
-})(["display:none;", ";width:0;height:0;margin-bottom:", ";border-left:", "px solid transparent;border-right:", "px solid transparent;border-top:", "px solid ", ";"], _palette.media.xs(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: block;\n  "]))), TRIANGLE_BOTTOM_PADDING, TRIANGLE_HEIGHT, TRIANGLE_HEIGHT, TRIANGLE_HEIGHT, (0, _palette.color)("black60"));
+})(["display:none;", ";width:0;height:0;margin-bottom:", ";border-left:", "px solid transparent;border-right:", "px solid transparent;border-top:", "px solid ", ";"], _palette.media.xs(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: block;\n  "]))), TRIANGLE_BOTTOM_PADDING, TRIANGLE_HEIGHT, TRIANGLE_HEIGHT, TRIANGLE_HEIGHT, (0, _palette.color)("mono60"));
 
 /**
  * Bar is the main component responsible for rendering an individual bar

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

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

package/dist/elements/BarChart/BarChart.js

@@ -29,7 +29,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var ChartContainer = (0, _styledComponents.default)(_palette.Flex).withConfig({
   displayName: "BarChart__ChartContainer",
   componentId: "sc-1317yz6-0"
-})(["border-bottom:1px solid ", ";"], (0, _themeGet.themeGet)("colors.black10"));
+})(["border-bottom:1px solid ", ";"], (0, _themeGet.themeGet)("colors.mono10"));
 function useHighlightLabelPositionConstraints(wrapperDiv, labelDiv) {
   // Constrain highlight label to be within the bounds of the graph
   (0, _react.useEffect)(function () {
@@ -130,10 +130,10 @@ var BarChart = function BarChart(_ref) {
   })), /*#__PURE__*/_react.default.createElement(_palette.Flex, {
     justifyContent: "space-between"
   }, /*#__PURE__*/_react.default.createElement(_palette.Text, {
-    color: "black60",
+    color: "mono60",
     variant: "xs"
   }, minLabel), /*#__PURE__*/_react.default.createElement(_palette.Text, {
-    color: "black60",
+    color: "mono60",
     variant: "xs"
   }, maxLabel)), bars.filter(function (bar) {
     return bar.axisLabelX;
@@ -142,7 +142,7 @@ var BarChart = function BarChart(_ref) {
     return /*#__PURE__*/_react.default.createElement(BarAxisLabelContainer, {
       key: i
     }, /*#__PURE__*/_react.default.createElement(AxisLabelX, {
-      color: "black60",
+      color: "mono60",
       variant: "xs"
     }, axisLabelX));
   }))));

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

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

package/dist/elements/DataVis/ChartHoverTooltip.js

@@ -48,5 +48,5 @@ exports.BaseTooltipPositioner = BaseTooltipPositioner;
 var HoverTooltipPositioner = (0, _styledComponents.default)(BaseTooltipPositioner).withConfig({
   displayName: "ChartHoverTooltip__HoverTooltipPositioner",
   componentId: "sc-2qa7c8-1"
-})(["", ";z-index:2;position:fixed;background-color:", ";box-shadow:", ";"], _palette.media.xs(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: none;\n  "]))), (0, _themeGet.themeGet)("colors.white100"), (0, _themeGet.themeGet)("effects.dropShadow"));
+})(["", ";z-index:2;position:fixed;background-color:", ";box-shadow:", ";"], _palette.media.xs(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: none;\n  "]))), (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("effects.dropShadow"));
 //# sourceMappingURL=ChartHoverTooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChartHoverTooltip.js","names":["_palette","require","_themeGet","_react","_interopRequireWildcard","_styledComponents","_interopRequireDefault","_MousePositionContext","_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","LABEL_OFFSET","ChartHoverTooltip","_ref","children","ref","useRef","_useContext","useContext","MousePositionContext","x","y","current","style","top","offsetHeight","left","createElement","HoverTooltipPositioner","exports","displayName","BaseTooltipPositioner","styled","Flex","withConfig","componentId","media","xs","themeGet"],"sources":["../../../src/elements/DataVis/ChartHoverTooltip.tsx"],"sourcesContent":["import { Flex, media } from \"@artsy/palette\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React, { useContext, useRef } from \"react\"\nimport styled from \"styled-components\"\nimport { MousePositionContext } from \"./MousePositionContext\"\n\nconst LABEL_OFFSET = 10\n\n/**\n * Tooltip for bar and line charts\n */\nexport const ChartHoverTooltip = ({ children }) => {\n  const ref = useRef(null)\n  const { x, y } = useContext(MousePositionContext)\n  if (ref.current) {\n    // position outside of the render loop to avoid GC churn\n    ref.current.style.top = y - LABEL_OFFSET - ref.current.offsetHeight + \"px\"\n    ref.current.style.left = x + \"px\"\n  }\n  return <HoverTooltipPositioner ref={ref}>{children}</HoverTooltipPositioner>\n}\n\n/**\n * Base component for positioning tooltips\n */\nexport const BaseTooltipPositioner = styled(Flex)`\n  transform: translateX(-50%);\n  pointer-events: none;\n  border-radius: 2px;\n`\n\nconst HoverTooltipPositioner = styled(BaseTooltipPositioner)`\n  ${media.xs`\n    display: none;\n  `};\n  z-index: 2;\n  position: fixed;\n  background-color: ${themeGet(\"colors.white100\")};\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n`\n"],"mappings":"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"}
+{"version":3,"file":"ChartHoverTooltip.js","names":["_palette","require","_themeGet","_react","_interopRequireWildcard","_styledComponents","_interopRequireDefault","_MousePositionContext","_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","LABEL_OFFSET","ChartHoverTooltip","_ref","children","ref","useRef","_useContext","useContext","MousePositionContext","x","y","current","style","top","offsetHeight","left","createElement","HoverTooltipPositioner","exports","displayName","BaseTooltipPositioner","styled","Flex","withConfig","componentId","media","xs","themeGet"],"sources":["../../../src/elements/DataVis/ChartHoverTooltip.tsx"],"sourcesContent":["import { Flex, media } from \"@artsy/palette\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React, { useContext, useRef } from \"react\"\nimport styled from \"styled-components\"\nimport { MousePositionContext } from \"./MousePositionContext\"\n\nconst LABEL_OFFSET = 10\n\n/**\n * Tooltip for bar and line charts\n */\nexport const ChartHoverTooltip = ({ children }) => {\n  const ref = useRef(null)\n  const { x, y } = useContext(MousePositionContext)\n  if (ref.current) {\n    // position outside of the render loop to avoid GC churn\n    ref.current.style.top = y - LABEL_OFFSET - ref.current.offsetHeight + \"px\"\n    ref.current.style.left = x + \"px\"\n  }\n  return <HoverTooltipPositioner ref={ref}>{children}</HoverTooltipPositioner>\n}\n\n/**\n * Base component for positioning tooltips\n */\nexport const BaseTooltipPositioner = styled(Flex)`\n  transform: translateX(-50%);\n  pointer-events: none;\n  border-radius: 2px;\n`\n\nconst HoverTooltipPositioner = styled(BaseTooltipPositioner)`\n  ${media.xs`\n    display: none;\n  `};\n  z-index: 2;\n  position: fixed;\n  background-color: ${themeGet(\"colors.mono0\")};\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n`\n"],"mappings":"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"}

package/dist/elements/DataVis/ChartTooltip.js

@@ -59,7 +59,7 @@ var ChartTooltip = function ChartTooltip(_ref) {
   }, others), /*#__PURE__*/_react.default.createElement(_palette.Text, {
     variant: "xs"
   }, title), /*#__PURE__*/_react.default.createElement(_palette.Text, {
-    color: "black60",
+    color: "mono60",
     variant: "xs"
   }, description));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ChartTooltip.js","names":["_palette","require","_react","_interopRequireDefault","_styledComponents","_excluded","obj","__esModule","default","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","i","Object","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","prototype","propertyIsEnumerable","call","sourceKeys","keys","_typeof","Symbol","iterator","constructor","_extends","assign","bind","arguments","hasOwnProperty","apply","ChartTooltipWrapper","styled","Flex","withConfig","displayName","componentId","coerceTooltip","tooltip","isChartTooltipProps","createElement","ChartTooltip","exports","coerceTooltipWithoutPadding","noPadding","result","_ref","title","description","others","py","px","Text","variant","color"],"sources":["../../../src/elements/DataVis/ChartTooltip.tsx"],"sourcesContent":["import { Flex, FlexProps, Text } from \"@artsy/palette\"\nimport React from \"react\"\nimport styled from \"styled-components\"\n\nconst ChartTooltipWrapper = styled(Flex)`\n  text-align: center;\n  align-items: center;\n  flex-direction: column;\n  white-space: nowrap;\n`\n\n/**\n * Returns tooltip component based on the type of tooltip param passed to it\n * @param tooltip either a component or hash containing `title` and `description`\n */\nexport const coerceTooltip = (tooltip: React.ReactNode | ChartTooltipProps) =>\n  isChartTooltipProps(tooltip) ? <ChartTooltip {...tooltip} /> : tooltip\n\n/**\n * Similart to `coerceTooltip` but without padding\n * @param tooltip\n */\nexport const coerceTooltipWithoutPadding = (\n  tooltip: React.ReactNode | ChartTooltipProps\n) =>\n  isChartTooltipProps(tooltip) ? (\n    <ChartTooltip noPadding {...tooltip} />\n  ) : (\n    tooltip\n  )\n\nexport interface ChartTooltipProps extends FlexProps {\n  title: React.ReactNode\n  description: React.ReactNode\n  noPadding?: boolean\n}\n\n// tslint:disable-next-line:completed-docs\nexport function isChartTooltipProps(obj: any): obj is ChartTooltipProps {\n  const result =\n    obj &&\n    typeof obj === \"object\" &&\n    obj.hasOwnProperty(\"title\") &&\n    obj.hasOwnProperty(\"description\")\n  return result\n}\n\n/**\n * ChartTooltip is the default content format for a label on a BarChart.\n * @param props\n */\nexport const ChartTooltip = ({\n  title,\n  description,\n  noPadding,\n  ...others\n}: ChartTooltipProps) => (\n  <ChartTooltipWrapper\n    py={noPadding ? 0 : 0.5}\n    px={noPadding ? 0 : 1}\n    {...others}\n  >\n    <Text variant=\"xs\">{title}</Text>\n\n    <Text color=\"black60\" variant=\"xs\">\n      {description}\n    </Text>\n  </ChartTooltipWrapper>\n)\n"],"mappings":";;;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAD,sBAAA,CAAAF,OAAA;AAAsC,IAAAI,SAAA;AAAA,SAAAF,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,MAAA,EAAAC,QAAA,QAAAD,MAAA,yBAAAE,MAAA,GAAAC,6BAAA,CAAAH,MAAA,EAAAC,QAAA,OAAAG,GAAA,EAAAC,CAAA,MAAAC,MAAA,CAAAC,qBAAA,QAAAC,gBAAA,GAAAF,MAAA,CAAAC,qBAAA,CAAAP,MAAA,QAAAK,CAAA,MAAAA,CAAA,GAAAG,gBAAA,CAAAC,MAAA,EAAAJ,CAAA,MAAAD,GAAA,GAAAI,gBAAA,CAAAH,CAAA,OAAAJ,QAAA,CAAAS,OAAA,CAAAN,GAAA,uBAAAE,MAAA,CAAAK,SAAA,CAAAC,oBAAA,CAAAC,IAAA,CAAAb,MAAA,EAAAI,GAAA,aAAAF,MAAA,CAAAE,GAAA,IAAAJ,MAAA,CAAAI,GAAA,cAAAF,MAAA;AAAA,SAAAC,8BAAAH,MAAA,EAAAC,QAAA,QAAAD,MAAA,yBAAAE,MAAA,WAAAY,UAAA,GAAAR,MAAA,CAAAS,IAAA,CAAAf,MAAA,OAAAI,GAAA,EAAAC,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAS,UAAA,CAAAL,MAAA,EAAAJ,CAAA,MAAAD,GAAA,GAAAU,UAAA,CAAAT,CAAA,OAAAJ,QAAA,CAAAS,OAAA,CAAAN,GAAA,kBAAAF,MAAA,CAAAE,GAAA,IAAAJ,MAAA,CAAAI,GAAA,YAAAF,MAAA;AAAA,SAAAc,QAAApB,GAAA,sCAAAoB,OAAA,wBAAAC,MAAA,uBAAAA,MAAA,CAAAC,QAAA,aAAAtB,GAAA,kBAAAA,GAAA,gBAAAA,GAAA,WAAAA,GAAA,yBAAAqB,MAAA,IAAArB,GAAA,CAAAuB,WAAA,KAAAF,MAAA,IAAArB,GAAA,KAAAqB,MAAA,CAAAN,SAAA,qBAAAf,GAAA,KAAAoB,OAAA,CAAApB,GAAA;AAAA,SAAAwB,SAAA,IAAAA,QAAA,GAAAd,MAAA,CAAAe,MAAA,GAAAf,MAAA,CAAAe,MAAA,CAAAC,IAAA,eAAApB,MAAA,aAAAG,CAAA,MAAAA,CAAA,GAAAkB,SAAA,CAAAd,MAAA,EAAAJ,CAAA,UAAAL,MAAA,GAAAuB,SAAA,CAAAlB,CAAA,YAAAD,GAAA,IAAAJ,MAAA,QAAAM,MAAA,CAAAK,SAAA,CAAAa,cAAA,CAAAX,IAAA,CAAAb,MAAA,EAAAI,GAAA,KAAAF,MAAA,CAAAE,GAAA,IAAAJ,MAAA,CAAAI,GAAA,gBAAAF,MAAA,YAAAkB,QAAA,CAAAK,KAAA,OAAAF,SAAA;AAEtC,IAAMG,mBAAmB,GAAG,IAAAC,yBAAM,EAACC,aAAI,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sFAKvC;;AAED;AACA;AACA;AACA;AACO,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,OAA4C;EAAA,OACxEC,mBAAmB,CAACD,OAAO,CAAC,gBAAGzC,MAAA,CAAAM,OAAA,CAAAqC,aAAA,CAACC,YAAY,EAAKH,OAAO,CAAI,GAAGA,OAAO;AAAA;;AAExE;AACA;AACA;AACA;AAHAI,OAAA,CAAAL,aAAA,GAAAA,aAAA;AAIO,IAAMM,2BAA2B,GAAG,SAA9BA,2BAA2BA,CACtCL,OAA4C;EAAA,OAE5CC,mBAAmB,CAACD,OAAO,CAAC,gBAC1BzC,MAAA,CAAAM,OAAA,CAAAqC,aAAA,CAACC,YAAY,EAAAhB,QAAA;IAACmB,SAAS;EAAA,GAAKN,OAAO,EAAI,GAEvCA,OACD;AAAA;AAAAI,OAAA,CAAAC,2BAAA,GAAAA,2BAAA;AAQH;AACO,SAASJ,mBAAmBA,CAACtC,GAAQ,EAA4B;EACtE,IAAM4C,MAAM,GACV5C,GAAG,IACHoB,OAAA,CAAOpB,GAAG,MAAK,QAAQ,IACvBA,GAAG,CAAC4B,cAAc,CAAC,OAAO,CAAC,IAC3B5B,GAAG,CAAC4B,cAAc,CAAC,aAAa,CAAC;EACnC,OAAOgB,MAAM;AACf;;AAEA;AACA;AACA;AACA;AACO,IAAMJ,YAAY,GAAG,SAAfA,YAAYA,CAAAK,IAAA;EAAA,IACvBC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IACXJ,SAAS,GAAAE,IAAA,CAATF,SAAS;IACNK,MAAM,GAAA7C,wBAAA,CAAA0C,IAAA,EAAA9C,SAAA;EAAA,oBAETH,MAAA,CAAAM,OAAA,CAAAqC,aAAA,CAACT,mBAAmB,EAAAN,QAAA;IAClByB,EAAE,EAAEN,SAAS,GAAG,CAAC,GAAG,GAAI;IACxBO,EAAE,EAAEP,SAAS,GAAG,CAAC,GAAG;EAAE,GAClBK,MAAM,gBAEVpD,MAAA,CAAAM,OAAA,CAAAqC,aAAA,CAAC7C,QAAA,CAAAyD,IAAI;IAACC,OAAO,EAAC;EAAI,GAAEN,KAAK,CAAQ,eAEjClD,MAAA,CAAAM,OAAA,CAAAqC,aAAA,CAAC7C,QAAA,CAAAyD,IAAI;IAACE,KAAK,EAAC,SAAS;IAACD,OAAO,EAAC;EAAI,GAC/BL,WAAW,CACP,CACa;AAAA,CACvB;AAAAN,OAAA,CAAAD,YAAA,GAAAA,YAAA;AAjBYA,YAAY,CAAAN,WAAA"}
+{"version":3,"file":"ChartTooltip.js","names":["_palette","require","_react","_interopRequireDefault","_styledComponents","_excluded","obj","__esModule","default","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","i","Object","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","prototype","propertyIsEnumerable","call","sourceKeys","keys","_typeof","Symbol","iterator","constructor","_extends","assign","bind","arguments","hasOwnProperty","apply","ChartTooltipWrapper","styled","Flex","withConfig","displayName","componentId","coerceTooltip","tooltip","isChartTooltipProps","createElement","ChartTooltip","exports","coerceTooltipWithoutPadding","noPadding","result","_ref","title","description","others","py","px","Text","variant","color"],"sources":["../../../src/elements/DataVis/ChartTooltip.tsx"],"sourcesContent":["import { Flex, FlexProps, Text } from \"@artsy/palette\"\nimport React from \"react\"\nimport styled from \"styled-components\"\n\nconst ChartTooltipWrapper = styled(Flex)`\n  text-align: center;\n  align-items: center;\n  flex-direction: column;\n  white-space: nowrap;\n`\n\n/**\n * Returns tooltip component based on the type of tooltip param passed to it\n * @param tooltip either a component or hash containing `title` and `description`\n */\nexport const coerceTooltip = (tooltip: React.ReactNode | ChartTooltipProps) =>\n  isChartTooltipProps(tooltip) ? <ChartTooltip {...tooltip} /> : tooltip\n\n/**\n * Similart to `coerceTooltip` but without padding\n * @param tooltip\n */\nexport const coerceTooltipWithoutPadding = (\n  tooltip: React.ReactNode | ChartTooltipProps\n) =>\n  isChartTooltipProps(tooltip) ? (\n    <ChartTooltip noPadding {...tooltip} />\n  ) : (\n    tooltip\n  )\n\nexport interface ChartTooltipProps extends FlexProps {\n  title: React.ReactNode\n  description: React.ReactNode\n  noPadding?: boolean\n}\n\n// tslint:disable-next-line:completed-docs\nexport function isChartTooltipProps(obj: any): obj is ChartTooltipProps {\n  const result =\n    obj &&\n    typeof obj === \"object\" &&\n    obj.hasOwnProperty(\"title\") &&\n    obj.hasOwnProperty(\"description\")\n  return result\n}\n\n/**\n * ChartTooltip is the default content format for a label on a BarChart.\n * @param props\n */\nexport const ChartTooltip = ({\n  title,\n  description,\n  noPadding,\n  ...others\n}: ChartTooltipProps) => (\n  <ChartTooltipWrapper\n    py={noPadding ? 0 : 0.5}\n    px={noPadding ? 0 : 1}\n    {...others}\n  >\n    <Text variant=\"xs\">{title}</Text>\n\n    <Text color=\"mono60\" variant=\"xs\">\n      {description}\n    </Text>\n  </ChartTooltipWrapper>\n)\n"],"mappings":"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"}

package/dist/elements/DonutChart/DonutChart.js

@@ -23,7 +23,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 function _iterableToArrayLimit(arr, i) { 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 colors = ["mono10", "mono30", "mono60"];
 var MIN_CHART_SIZE = 30;
 /**
  * DonutChart is a component that displays data points with donut shaped arcs.
@@ -79,7 +79,7 @@ var DonutChart = function DonutChart(_ref) {
       y: y + centerY,
       center: centerX
     }, /*#__PURE__*/_react.default.createElement(_palette.Text, {
-      color: "black60",
+      color: "mono60",
       variant: "xs"
     }, (0, _ChartTooltip.coerceTooltipWithoutPadding)(axisLabelX)));
   });
@@ -89,7 +89,7 @@ var DonutChart = function DonutChart(_ref) {
     return /*#__PURE__*/_react.default.createElement("path", {
       key: "zero-state",
       stroke: "none",
-      fill: (0, _palette.color)("black5"),
+      fill: (0, _palette.color)("mono5"),
       d: arc(zeroState)
     });
   });

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

@@ -1 +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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"}
+{"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[] = [\"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/elements/LineChart/Line.js

@@ -15,7 +15,7 @@ var Line = function Line(_ref) {
   var path = _ref.path;
   return /*#__PURE__*/_react.default.createElement("path", {
     fill: "none",
-    stroke: (0, _palette.color)("black10"),
+    stroke: (0, _palette.color)("mono10"),
     d: path
   });
 };

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

@@ -1 +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"}
+{"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(\"mono10\")} 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,QAAQ,CAAE;IAACC,CAAC,EAAEL;EAAK,EAAG;AAC/D,CAAC;AAAAM,OAAA,CAAAR,IAAA,GAAAA,IAAA;AAFYA,IAAI,CAAAS,WAAA"}

package/dist/elements/LineChart/LineChart.js

@@ -71,7 +71,7 @@ var LineChart = function LineChart(_ref) {
       first: i === 0,
       last: i === points.length - 1
     }, /*#__PURE__*/_react.default.createElement(AxisLabelX, {
-      color: "black60",
+      color: "mono60",
       variant: "xs"
     }, axisLabelX));
   })))));

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

@@ -1 +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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"}
+{"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=\"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/elements/LineChart/LineChartSVG.js

@@ -56,7 +56,7 @@ var LineChartSVG = function LineChartSVG(_ref) {
   }, /*#__PURE__*/_react.default.createElement("g", {
     transform: "translate(0, ".concat(margin, ")")
   }, /*#__PURE__*/_react.default.createElement("line", {
-    stroke: (0, _palette.color)("black10"),
+    stroke: (0, _palette.color)("mono10"),
     x1: "0",
     x2: width,
     y1: h,

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

@@ -1 +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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"}
+{"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<\n  React.PropsWithChildren<LineChartSVGProps>\n> = ({ width, height, margin, points, hoverIndex }: 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(\"mono10\")} 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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"}

package/dist/elements/LineChart/Point.js

@@ -21,7 +21,7 @@ var Point = function Point(_ref) {
     cy: cy,
     r: "4",
     opacity: opacity,
-    fill: hovered ? (0, _palette.color)("black30") : (0, _palette.color)("black10")
+    fill: hovered ? (0, _palette.color)("mono30") : (0, _palette.color)("mono10")
   });
 };
 exports.Point = Point;

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

@@ -1 +1 @@
-{"version":3,"file":"Point.js","names":["_palette","require","_react","_interopRequireDefault","obj","__esModule","default","Point","_ref","cx","cy","opacity","hovered","createElement","r","fill","color","exports","displayName"],"sources":["../../../src/elements/LineChart/Point.tsx"],"sourcesContent":["import { color } from \"@artsy/palette\"\nimport React from \"react\"\n\n/**\n * Point is the component responsible for rendering a data point\n * in a line chart.\n */\nexport const Point = ({\n  cx,\n  cy,\n  opacity,\n  hovered,\n}: {\n  cx: number\n  cy: number\n  opacity: number\n  hovered: boolean\n}) => {\n  return (\n    <circle\n      cx={cx}\n      cy={cy}\n      r=\"4\"\n      opacity={opacity}\n      fill={hovered ? color(\"black30\") : color(\"black10\")}\n    />\n  )\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,KAAK,GAAG,SAARA,KAAKA,CAAAC,IAAA,EAUZ;EAAA,IATJC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,EAAE,GAAAF,IAAA,CAAFE,EAAE;IACFC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;EAOP,oBACEV,MAAA,CAAAI,OAAA,CAAAO,aAAA;IACEJ,EAAE,EAAEA,EAAG;IACPC,EAAE,EAAEA,EAAG;IACPI,CAAC,EAAC,GAAG;IACLH,OAAO,EAAEA,OAAQ;IACjBI,IAAI,EAAEH,OAAO,GAAG,IAAAI,cAAK,EAAC,SAAS,CAAC,GAAG,IAAAA,cAAK,EAAC,SAAS;EAAE,EACpD;AAEN,CAAC;AAAAC,OAAA,CAAAV,KAAA,GAAAA,KAAA;AApBYA,KAAK,CAAAW,WAAA"}
+{"version":3,"file":"Point.js","names":["_palette","require","_react","_interopRequireDefault","obj","__esModule","default","Point","_ref","cx","cy","opacity","hovered","createElement","r","fill","color","exports","displayName"],"sources":["../../../src/elements/LineChart/Point.tsx"],"sourcesContent":["import { color } from \"@artsy/palette\"\nimport React from \"react\"\n\n/**\n * Point is the component responsible for rendering a data point\n * in a line chart.\n */\nexport const Point = ({\n  cx,\n  cy,\n  opacity,\n  hovered,\n}: {\n  cx: number\n  cy: number\n  opacity: number\n  hovered: boolean\n}) => {\n  return (\n    <circle\n      cx={cx}\n      cy={cy}\n      r=\"4\"\n      opacity={opacity}\n      fill={hovered ? color(\"mono30\") : color(\"mono10\")}\n    />\n  )\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,KAAK,GAAG,SAARA,KAAKA,CAAAC,IAAA,EAUZ;EAAA,IATJC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,EAAE,GAAAF,IAAA,CAAFE,EAAE;IACFC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;EAOP,oBACEV,MAAA,CAAAI,OAAA,CAAAO,aAAA;IACEJ,EAAE,EAAEA,EAAG;IACPC,EAAE,EAAEA,EAAG;IACPI,CAAC,EAAC,GAAG;IACLH,OAAO,EAAEA,OAAQ;IACjBI,IAAI,EAAEH,OAAO,GAAG,IAAAI,cAAK,EAAC,QAAQ,CAAC,GAAG,IAAAA,cAAK,EAAC,QAAQ;EAAE,EAClD;AAEN,CAAC;AAAAC,OAAA,CAAAV,KAAA,GAAAA,KAAA;AApBYA,KAAK,CAAAW,WAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@artsy/palette-charts",
   "sideEffects": false,
-  "version": "40.0.0-canary.1423.31650.0",
+  "version": "40.0.0-canary.1433.31866.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@artsy/auto-config": "1.2.0",
-    "@artsy/palette": "41.0.0-canary.1423.31650.0",
+    "@artsy/palette": "41.0.0-canary.1433.31866.0",
     "@babel/cli": "7.12.16",
     "@babel/core": "7.12.16",
     "@babel/plugin-proposal-class-properties": "7.12.13",
@@ -75,7 +75,6 @@
     "@types/node": "14.14.27",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@types/react-lazy-load-image-component": "1.3.0",
     "@types/react-test-renderer": "16.8.1",
     "@types/semver": "5.5.0",
     "@types/styled-system": "5.1.9",
@@ -180,5 +179,5 @@
       "url": "http://localhost"
     }
   },
-  "gitHead": "a444dd4814cd281abd2b031f7032992af695127e"
+  "gitHead": "c29485a09db4d0fd9d85935826cd3c57aec92c68"
 }