@artsy/palette-charts 42.0.0 → 42.1.0

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

@@ -1,3 +1,4 @@
+import { Color } from "@artsy/palette";
 import React from "react";
 /**
  * Bar is the main component responsible for rendering an individual bar
@@ -11,7 +12,7 @@ import React from "react";
  * container set an appropriate min-height property. This prevents the highlight
  * label from obscuring content above the bar chart.
  */
-export declare const Bar: ({ heightPercent, label, highlightLabel, hasEnteredViewport, onMeasureHeight, highlightLabelRef, onClick, onHover, }: {
+export declare const Bar: ({ heightPercent, label, highlightLabel, hasEnteredViewport, onMeasureHeight, highlightLabelRef, onClick, onHover, primaryColor, hoverColor, highlightColor, }: {
     heightPercent: number;
     label: React.ReactNode;
     axisLabelX: React.ReactNode;
@@ -21,4 +22,7 @@ export declare const Bar: ({ heightPercent, label, highlightLabel, hasEnteredVie
     highlightLabelRef?: React.RefObject<HTMLDivElement>;
     onClick?: any;
     onHover?: any;
+    primaryColor?: Color;
+    hoverColor?: Color;
+    highlightColor?: Color;
 }) => React.JSX.Element;

package/dist/elements/BarChart/Bar.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Bar = void 0;
 var _palette = require("@artsy/palette");
+var _themeGet = require("@styled-system/theme-get");
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _ChartHoverTooltip = require("../DataVis/ChartHoverTooltip");
@@ -27,12 +28,12 @@ var BAR_HEIGHT_RANGE = MAX_BAR_HEIGHT - MIN_BAR_HEIGHT;
 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)("mono60") : (0, _palette.color)("mono10");
+})(["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, _themeGet.themeGet)("colors.".concat(props.highlightColor || "mono60")) : (0, _themeGet.themeGet)("colors.".concat(props.primaryColor || "mono10"));
 }, function (props) {
   return props.onClick ? "pointer" : "default";
 }, _palette.breakpoints.sm, function (props) {
-  return props.isHighlighted ? (0, _palette.color)("mono60") : (0, _palette.color)("mono30");
+  return props.isHighlighted ? (0, _themeGet.themeGet)("colors.".concat(props.highlightColor || "mono60")) : (0, _themeGet.themeGet)("colors.".concat(props.hoverColor || "mono30"));
 });
 var HighlightLabelPositioner = (0, _styledComponents.default)(_ChartHoverTooltip.BaseTooltipPositioner).withConfig({
   displayName: "Bar__HighlightLabelPositioner",
@@ -41,7 +42,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)("mono0"), (0, _palette.color)("mono10"));
+})(["", ";position:relative;background-color:", ";border:1px solid ", ";border-radius:2px;text-align:center;"], _palette.media.xs(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: none;\n  "]))), (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.mono10"));
 
 // the little dotted line which connects the label to the bar
 var LabelLineSvg = _styledComponents.default.svg.withConfig({
@@ -57,7 +58,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)("mono30")
+    fill: (0, _themeGet.themeGet)("colors.mono30")({})
   }));
 };
 LabelLine.displayName = "LabelLine";
@@ -87,7 +88,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)("mono60"));
+})(["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, _themeGet.themeGet)("colors.mono60"));
 
 /**
  * Bar is the main component responsible for rendering an individual bar
@@ -110,7 +111,10 @@ var Bar = function Bar(_ref2) {
     onMeasureHeight = _ref2.onMeasureHeight,
     highlightLabelRef = _ref2.highlightLabelRef,
     onClick = _ref2.onClick,
-    onHover = _ref2.onHover;
+    onHover = _ref2.onHover,
+    primaryColor = _ref2.primaryColor,
+    hoverColor = _ref2.hoverColor,
+    highlightColor = _ref2.highlightColor;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     hover = _useState2[0],
@@ -135,7 +139,10 @@ var Bar = function Bar(_ref2) {
     },
     isHighlighted: Boolean(highlightLabel),
     onClick: onClick,
-    onMouseOver: onHover
+    onMouseOver: onHover,
+    primaryColor: primaryColor,
+    hoverColor: hoverColor,
+    highlightColor: highlightColor
   }, highlightLabel && /*#__PURE__*/_react.default.createElement(HighlightLabel, {
     innerRef: highlightLabelRef,
     opacity: hasEnteredViewport ? 1 : 0,

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(\"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":";;;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,kBAAA,GAAAL,OAAA;AAGqC,IAAAM,eAAA,EAAAC,gBAAA,EAAAC,gBAAA;AAAA,SAAAJ,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAX,wBAAAO,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,aAAAQ,OAAA,CAAAR,GAAA,yBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAS,KAAA,GAAAN,wBAAA,CAAAC,WAAA,OAAAK,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAV,GAAA,YAAAS,KAAA,CAAAE,GAAA,CAAAX,GAAA,SAAAY,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAjB,GAAA,QAAAiB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAApB,GAAA,EAAAiB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAhB,GAAA,EAAAiB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAjB,GAAA,CAAAiB,GAAA,SAAAL,MAAA,CAAAV,OAAA,GAAAF,GAAA,MAAAS,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAtB,GAAA,EAAAY,MAAA,YAAAA,MAAA;AAAA,SAAAW,eAAAC,GAAA,EAAAC,CAAA,WAAAC,eAAA,CAAAF,GAAA,KAAAG,qBAAA,CAAAH,GAAA,EAAAC,CAAA,KAAAG,2BAAA,CAAAJ,GAAA,EAAAC,CAAA,KAAAI,gBAAA;AAAA,SAAAA,iBAAA,cAAAC,SAAA;AAAA,SAAAF,4BAAAG,CAAA,EAAAC,MAAA,SAAAD,CAAA,qBAAAA,CAAA,sBAAAE,iBAAA,CAAAF,CAAA,EAAAC,MAAA,OAAAE,CAAA,GAAApB,MAAA,CAAAI,SAAA,CAAAiB,QAAA,CAAAf,IAAA,CAAAW,CAAA,EAAAK,KAAA,aAAAF,CAAA,iBAAAH,CAAA,CAAAM,WAAA,EAAAH,CAAA,GAAAH,CAAA,CAAAM,WAAA,CAAAC,IAAA,MAAAJ,CAAA,cAAAA,CAAA,mBAAAK,KAAA,CAAAC,IAAA,CAAAT,CAAA,OAAAG,CAAA,+DAAAO,IAAA,CAAAP,CAAA,UAAAD,iBAAA,CAAAF,CAAA,EAAAC,MAAA;AAAA,SAAAC,kBAAAT,GAAA,EAAAkB,GAAA,QAAAA,GAAA,YAAAA,GAAA,GAAAlB,GAAA,CAAAmB,MAAA,EAAAD,GAAA,GAAAlB,GAAA,CAAAmB,MAAA,WAAAlB,CAAA,MAAAmB,IAAA,OAAAL,KAAA,CAAAG,GAAA,GAAAjB,CAAA,GAAAiB,GAAA,EAAAjB,CAAA,MAAAmB,IAAA,CAAAnB,CAAA,IAAAD,GAAA,CAAAC,CAAA,YAAAmB,IAAA;AAAA,SAAAjB,sBAAAH,GAAA,EAAAC,CAAA,QAAAoB,EAAA,WAAArB,GAAA,gCAAAsB,MAAA,IAAAtB,GAAA,CAAAsB,MAAA,CAAAC,QAAA,KAAAvB,GAAA,4BAAAqB,EAAA,QAAAG,EAAA,EAAAC,EAAA,EAAAC,EAAA,EAAAC,EAAA,EAAAC,IAAA,OAAAC,EAAA,OAAAC,EAAA,iBAAAJ,EAAA,IAAAL,EAAA,GAAAA,EAAA,CAAAzB,IAAA,CAAAI,GAAA,GAAA+B,IAAA,QAAA9B,CAAA,QAAAX,MAAA,CAAA+B,EAAA,MAAAA,EAAA,UAAAQ,EAAA,uBAAAA,EAAA,IAAAL,EAAA,GAAAE,EAAA,CAAA9B,IAAA,CAAAyB,EAAA,GAAAW,IAAA,MAAAJ,IAAA,CAAAK,IAAA,CAAAT,EAAA,CAAAU,KAAA,GAAAN,IAAA,CAAAT,MAAA,KAAAlB,CAAA,GAAA4B,EAAA,sBAAAM,GAAA,IAAAL,EAAA,OAAAL,EAAA,GAAAU,GAAA,yBAAAN,EAAA,YAAAR,EAAA,CAAAe,MAAA,KAAAT,EAAA,GAAAN,EAAA,CAAAe,MAAA,IAAA9C,MAAA,CAAAqC,EAAA,MAAAA,EAAA,2BAAAG,EAAA,QAAAL,EAAA,aAAAG,IAAA;AAAA,SAAA1B,gBAAAF,GAAA,QAAAe,KAAA,CAAAsB,OAAA,CAAArC,GAAA,UAAAA,GAAA;AAAA,SAAAsC,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAA3B,KAAA,cAAAtB,MAAA,CAAAmD,MAAA,CAAAnD,MAAA,CAAAoD,gBAAA,CAAAH,OAAA,IAAAC,GAAA,IAAAN,KAAA,EAAA5C,MAAA,CAAAmD,MAAA,CAAAD,GAAA;AAErC,IAAMG,cAAc,GAAG,EAAE;AACzB,IAAMC,cAAc,GAAG,EAAE;AACzB,IAAMC,gBAAgB,GAAGF,cAAc,GAAGC,cAAc;AAMxD;AACA,IAAME,MAAM,GAAG,IAAAC,yBAAM,EAACC,YAAG,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kQAGV,UAACC,KAAkB;EAAA,OAC/BA,KAAK,CAACC,aAAa,GAAG,IAAAC,cAAK,EAAC,QAAQ,CAAC,GAAG,IAAAA,cAAK,EAAC,QAAQ,CAAC;AAAA,GAO/C,UAACF,KAAK;EAAA,OAAOA,KAAK,CAASG,OAAO,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC,EAGhDC,oBAAW,CAACC,EAAE,EAEjB,UAACL,KAAkB;EAAA,OAC/BA,KAAK,CAACC,aAAa,GAAG,IAAAC,cAAK,EAAC,QAAQ,CAAC,GAAG,IAAAA,cAAK,EAAC,QAAQ,CAAC;AAAA,EAG9D;AAED,IAAMI,wBAAwB,GAAG,IAAAX,yBAAM,EAACY,wCAAqB,CAAC,CAAAV,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+HAQ7D;AACD,IAAMS,iBAAiB,GAAG,IAAAb,yBAAM,EAACc,aAAI,CAAC,CAAAZ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gHAClCW,cAAK,CAACC,EAAE,CAAA1F,eAAA,KAAAA,eAAA,GAAAiE,sBAAA,kCAIU,IAAAgB,cAAK,EAAC,OAAO,CAAC,EACd,IAAAA,cAAK,EAAC,QAAQ,CAAC,CAGpC;;AAED;AACA,IAAMU,YAAY,GAAGjB,yBAAM,CAACkB,GAAG,CAAAhB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,cAC3BW,cAAK,CAACC,EAAE,CAAAzF,gBAAA,KAAAA,gBAAA,GAAAgE,sBAAA,iCAGX;AACD,IAAM4B,SAAS,GAAG,SAAZA,SAASA,CAAA;EAAA,oBACblG,MAAA,CAAAU,OAAA,CAAAyF,aAAA,CAACH,YAAY;IAACI,KAAK,EAAC,GAAG;IAACC,MAAM,EAAC,IAAI;IAACC,OAAO,EAAC;EAAU,gBACpDtG,MAAA,CAAAU,OAAA,CAAAyF,aAAA;IACEI,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,sIAAsI;IACxIC,IAAI,EAAE,IAAApB,cAAK,EAAC,QAAQ;EAAE,EACtB,CACW;AAAA,CAChB;AATKY,SAAS,CAAAhB,WAAA;AAWf,IAAMyB,cAAc,GAAG,SAAjBA,cAAcA,CAAAC,IAAA,EAad;EAAA,IAZJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,uBAAuB,GAAAF,IAAA,CAAvBE,uBAAuB;IACvBC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;EAUR,IAAMC,GAAG,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EACxC,IAAAC,gBAAS,EAAC,YAAM;IACdL,uBAAuB,CAACG,GAAG,CAACG,OAAO,CAACC,YAAY,CAAC;EACnD,CAAC,CAAC;EACF,oBACErH,MAAA,CAAAU,OAAA,CAAAyF,aAAA,CAACT,wBAAwB;IAACuB,GAAG,EAAEA,GAAW;IAACK,KAAK,EAAE;MAAEP,OAAO,EAAPA;IAAQ;EAAE,gBAC5D/G,MAAA,CAAAU,OAAA,CAAAyF,aAAA,CAACP,iBAAiB;IAACqB,GAAG,EAAED;EAAgB,GAAEH,QAAQ,CAAqB,eACvE7G,MAAA,CAAAU,OAAA,CAAAyF,aAAA,CAACD,SAAS,OAAG,eACblG,MAAA,CAAAU,OAAA,CAAAyF,aAAA,CAACoB,iBAAiB,OAAG,CACI;AAE/B,CAAC;AAzBKZ,cAAc,CAAAzB,WAAA;AA2BpB,IAAMsC,eAAe,GAAG,CAAC;AACzB,IAAMC,uBAAuB,GAAG,IAAAC,cAAK,EAAC,GAAG,CAAC;;AAE1C;AACA,IAAMH,iBAAiB,GAAGxC,yBAAM,CAAC4C,GAAG,CAAA1C,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uKAEhCW,cAAK,CAACC,EAAE,CAAAxF,gBAAA,KAAAA,gBAAA,GAAA+D,sBAAA,mCAKOmD,uBAAuB,EACzBD,eAAe,EACdA,eAAe,EACjBA,eAAe,EAAY,IAAAlC,cAAK,EAAC,QAAQ,CAAC,CACzD;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEO,IAAMsC,GAAG,GAAG,SAANA,GAAGA,CAAAC,KAAA,EAmBV;EAAA,IAlBJC,aAAa,GAAAD,KAAA,CAAbC,aAAa;IACbC,KAAK,GAAAF,KAAA,CAALE,KAAK;IACLC,cAAc,GAAAH,KAAA,CAAdG,cAAc;IACdC,kBAAkB,GAAAJ,KAAA,CAAlBI,kBAAkB;IAClBC,eAAe,GAAAL,KAAA,CAAfK,eAAe;IACfC,iBAAiB,GAAAN,KAAA,CAAjBM,iBAAiB;IACjB5C,OAAO,GAAAsC,KAAA,CAAPtC,OAAO;IACP6C,OAAO,GAAAP,KAAA,CAAPO,OAAO;EAYP,IAAAC,SAAA,GAA0B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAAC,UAAA,GAAAxG,cAAA,CAAAsG,SAAA;IAAlCG,KAAK,GAAAD,UAAA;IAAEE,QAAQ,GAAAF,UAAA;EACtB;EACA;EACA;EACA;EACA,IAAMG,cAAc;EAClB;EACAZ,aAAa,KAAK,CAAC,IAAI,CAACE,cAAc,GAClC,CAAC,GACDpD,cAAc,GAAIC,gBAAgB,GAAG,GAAG,GAAIiD,aAAa;EAC/D,IAAMa,aAAa,GAAGV,kBAAkB,GAAGS,cAAc,GAAG,CAAC;EAE7D,oBACE1I,MAAA,CAAAU,OAAA,CAAAyF,aAAA,CAACrB,MAAM;IACLwC,KAAK,EAAE;MAAEjB,MAAM,EAAEsC;IAAc,CAAE;IACjCC,YAAY,EAAE,SAAAA,aAAA;MAAA,OAAMH,QAAQ,CAAC,IAAI,CAAC;IAAA,CAAC;IACnCI,YAAY,EAAE,SAAAA,aAAA;MAAA,OAAMJ,QAAQ,CAAC,KAAK,CAAC;IAAA,CAAC;IACpCpD,aAAa,EAAEyD,OAAO,CAACd,cAAc,CAAE;IACvCzC,OAAO,EAAEA,OAAQ;IACjBwD,WAAW,EAAEX;EAAQ,GAEpBJ,cAAc,iBACbhI,MAAA,CAAAU,OAAA,CAAAyF,aAAA,CAACQ,cAAc;IACbK,QAAQ,EAAEmB,iBAAkB;IAC5BpB,OAAO,EAAEkB,kBAAkB,GAAG,CAAC,GAAG,CAAE;IACpCnB,uBAAuB,EAAE,SAAAA,wBAACkC,WAAW;MAAA,OACnCd,eAAe,CAACc,WAAW,GAAGN,cAAc,CAAC;IAAA;EAC9C,GAEAV,cAAc,CAElB,EACAQ,KAAK,IAAIT,KAAK,iBAAI/H,MAAA,CAAAU,OAAA,CAAAyF,aAAA,CAAC/F,kBAAA,CAAA6I,iBAAiB,QAAElB,KAAK,CAAqB,CAC1D;AAEb,CAAC;AAAAmB,OAAA,CAAAtB,GAAA,GAAAA,GAAA;AAvDYA,GAAG,CAAA1C,WAAA"}
+{"version":3,"file":"Bar.js","names":["_palette","require","_themeGet","_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","themeGet","concat","highlightColor","primaryColor","onClick","breakpoints","sm","hoverColor","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 {\n  Box,\n  breakpoints,\n  Color,\n  Flex,\n  media,\n  space,\n} from \"@artsy/palette\"\nimport { themeGet } from \"@styled-system/theme-get\"\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  primaryColor?: Color\n  hoverColor?: Color\n  highlightColor?: Color\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) => \n    props.isHighlighted \n      ? themeGet(`colors.${props.highlightColor || \"mono60\"}`)\n      : themeGet(`colors.${props.primaryColor || \"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\n  @media (min-width: ${breakpoints.sm}) {\n    &:hover {\n      background: ${(props: BarBoxProps) =>\n        props.isHighlighted\n          ? themeGet(`colors.${props.highlightColor || \"mono60\"}`)\n          : themeGet(`colors.${props.hoverColor || \"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: ${themeGet(\"colors.mono0\")};\n  border: 1px solid ${themeGet(\"colors.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={themeGet(\"colors.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 ${themeGet(\"colors.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  primaryColor,\n  hoverColor,\n  highlightColor,\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  primaryColor?: Color\n  hoverColor?: Color\n  highlightColor?: Color\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      primaryColor={primaryColor}\n      hoverColor={hoverColor}\n      highlightColor={highlightColor}\n    >\n      {highlightLabel && (\n        <HighlightLabel\n          innerRef={highlightLabelRef}\n          opacity={hasEnteredViewport ? 1 : 0}\n          onMeasureHighlightLabel={(labelHeight) =>\n            onMeasureHeight(labelHeight + finalBarHeight)\n          }\n        >\n          {highlightLabel}\n        </HighlightLabel>\n      )}\n      {hover && label && <ChartHoverTooltip>{label}</ChartHoverTooltip>}\n    </BarBox>\n  )\n}\n"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+import { Color } from "@artsy/palette";
 import React from "react";
 import { ChartTooltipProps } from "../DataVis/ChartTooltip";
 export interface BarDescriptor {
@@ -12,10 +13,13 @@ export interface BarChartProps {
     bars: BarDescriptor[];
     minLabel: React.ReactNode;
     maxLabel: React.ReactNode;
+    primaryColor?: Color;
+    hoverColor?: Color;
+    highlightColor?: Color;
 }
 /**
  * BarChart is a component which displays some bars of varying heights in a row.
  * Useful for histograms etc.
  * @param props props
  */
-export declare const BarChart: ({ bars, minLabel, maxLabel }: BarChartProps) => React.JSX.Element;
+export declare const BarChart: ({ bars, minLabel, maxLabel, primaryColor, hoverColor, highlightColor }: BarChartProps) => React.JSX.Element;

package/dist/elements/BarChart/BarChart.js

@@ -67,7 +67,10 @@ function useHighlightLabelPositionConstraints(wrapperDiv, labelDiv) {
 var BarChart = function BarChart(_ref) {
   var bars = _ref.bars,
     minLabel = _ref.minLabel,
-    maxLabel = _ref.maxLabel;
+    maxLabel = _ref.maxLabel,
+    primaryColor = _ref.primaryColor,
+    hoverColor = _ref.hoverColor,
+    highlightColor = _ref.highlightColor;
   var highlightLabelRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -125,7 +128,10 @@ var BarChart = function BarChart(_ref) {
       hasEnteredViewport: hasEnteredViewport,
       onMeasureHeight: highlightLabel ? setMinHeight : null,
       onClick: onClick,
-      onHover: onHover
+      onHover: onHover,
+      primaryColor: primaryColor,
+      hoverColor: hoverColor,
+      highlightColor: highlightColor
     });
   })), /*#__PURE__*/_react.default.createElement(_palette.Flex, {
     justifyContent: "space-between"

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.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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"}
+{"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","primaryColor","hoverColor","highlightColor","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 { Color, 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  primaryColor?: Color\n  hoverColor?: Color\n  highlightColor?: Color\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, primaryColor, hoverColor, highlightColor }: 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                  primaryColor={primaryColor}\n                  hoverColor={hoverColor}\n                  highlightColor={highlightColor}\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/BarChart/BarChart.story.d.ts

@@ -3,4 +3,7 @@ declare const _default: {
     title: string;
 };
 export default _default;
+/** Default BarChart with standard colors */
 export declare const Default: () => React.JSX.Element;
+/** BarChart with custom primary and hover colors */
+export declare const WithCustomColors: () => React.JSX.Element;

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

@@ -3,13 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = void 0;
+exports.default = exports.WithCustomColors = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _BarChart = require("./BarChart");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = {
   title: "Components/BarChart"
 };
+/** Default BarChart with standard colors */
 exports.default = _default;
 var Default = function Default() {
   return /*#__PURE__*/_react.default.createElement(_BarChart.BarChart, {
@@ -20,6 +21,19 @@ var Default = function Default() {
 };
 exports.Default = Default;
 Default.displayName = "Default";
+/** BarChart with custom primary and hover colors */
+var WithCustomColors = function WithCustomColors() {
+  return /*#__PURE__*/_react.default.createElement(_BarChart.BarChart, {
+    minLabel: "$0",
+    maxLabel: "$30,000",
+    bars: BARS,
+    primaryColor: "blue100",
+    hoverColor: "red100",
+    highlightColor: "orange100"
+  });
+};
+exports.WithCustomColors = WithCustomColors;
+WithCustomColors.displayName = "WithCustomColors";
 var BARS = [{
   value: 1,
   label: {

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

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

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

@@ -1,8 +1,10 @@
+import { Color } 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 declare const Line: ({ path }: {
+export declare const Line: ({ path, color: customColor, }: {
     path: string;
+    color?: Color;
 }) => React.JSX.Element;

package/dist/elements/LineChart/Line.js

@@ -12,10 +12,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * in a line chart.
  */
 var Line = function Line(_ref) {
-  var path = _ref.path;
+  var path = _ref.path,
+    customColor = _ref.color;
+  var _useTheme = (0, _palette.useTheme)(),
+    theme = _useTheme.theme;
   return /*#__PURE__*/_react.default.createElement("path", {
     fill: "none",
-    stroke: (0, _palette.color)("mono10"),
+    stroke: theme.colors[customColor || "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(\"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"}
+{"version":3,"file":"Line.js","names":["_palette","require","_react","_interopRequireDefault","obj","__esModule","default","Line","_ref","path","customColor","color","_useTheme","useTheme","theme","createElement","fill","stroke","colors","d","exports","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,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,EAMX;EAAA,IALJC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACGC,WAAW,GAAAF,IAAA,CAAlBG,KAAK;EAKL,IAAAC,SAAA,GAAkB,IAAAC,iBAAQ,GAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK;EACb,oBACEZ,MAAA,CAAAI,OAAA,CAAAS,aAAA;IAAMC,IAAI,EAAC,MAAM;IAACC,MAAM,EAAEH,KAAK,CAACI,MAAM,CAACR,WAAW,IAAI,QAAQ,CAAE;IAACS,CAAC,EAAEV;EAAK,EAAG;AAEhF,CAAC;AAAAW,OAAA,CAAAb,IAAA,GAAAA,IAAA;AAXYA,IAAI,CAAAc,WAAA"}

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

@@ -1,7 +1,10 @@
+import { Color } from "@artsy/palette";
 import React from "react";
 import { ChartProps } from "../DataVis/utils/SharedTypes";
 export interface LineChartProps extends ChartProps {
     height?: number;
+    primaryColor?: Color;
+    hoverColor?: Color;
 }
 /**
  * LineChart is a component that displays some data points connected by lines.

package/dist/elements/LineChart/LineChart.js

@@ -33,7 +33,9 @@ var DEFAULT_HEIGHT = 87;
 var LineChart = function LineChart(_ref) {
   var points = _ref.points,
     _ref$height = _ref.height,
-    height = _ref$height === void 0 ? DEFAULT_HEIGHT : _ref$height;
+    height = _ref$height === void 0 ? DEFAULT_HEIGHT : _ref$height,
+    primaryColor = _ref.primaryColor,
+    hoverColor = _ref.hoverColor;
   var _useState = (0, _react.useState)(-1),
     _useState2 = _slicedToArray(_useState, 2),
     hoverIndex = _useState2[0],
@@ -58,7 +60,9 @@ var LineChart = function LineChart(_ref) {
     height: height,
     margin: margin,
     points: points,
-    hoverIndex: hoverIndex
+    hoverIndex: hoverIndex,
+    primaryColor: primaryColor,
+    hoverColor: hoverColor
   }), points.filter(function (bar) {
     return bar.axisLabelX;
   }).length > 0 && /*#__PURE__*/_react.default.createElement(_palette.Flex, {

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=\"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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"}
+{"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","primaryColor","hoverColor","_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 { 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/elements/LineChart/LineChart.story.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+/** Default LineChart with standard colors */
+export declare const Default: () => React.JSX.Element;
+/** LineChart with custom primary and hover colors */
+export declare const WithCustomColors: () => React.JSX.Element;

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

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithCustomColors = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _LineChart = require("./LineChart");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: "Components/LineChart"
+};
+/** Default LineChart with standard colors */
+exports.default = _default;
+var Default = function Default() {
+  return /*#__PURE__*/_react.default.createElement(_LineChart.LineChart, {
+    points: POINTS
+  });
+};
+exports.Default = Default;
+Default.displayName = "Default";
+/** LineChart with custom primary and hover colors */
+var WithCustomColors = function WithCustomColors() {
+  return /*#__PURE__*/_react.default.createElement(_LineChart.LineChart, {
+    points: POINTS,
+    primaryColor: "blue100",
+    hoverColor: "red100"
+  });
+};
+exports.WithCustomColors = WithCustomColors;
+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/elements/LineChart/LineChart.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.story.js","names":["_react","_interopRequireDefault","require","_LineChart","obj","__esModule","default","_default","title","exports","Default","createElement","LineChart","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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAAuC,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAExB;EACbC,KAAK,EAAE;AACT,CAAC;AAED;AAAAC,OAAA,CAAAH,OAAA,GAAAC,QAAA;AACO,IAAMG,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBAAOV,MAAA,CAAAM,OAAA,CAAAK,aAAA,CAACR,UAAA,CAAAS,SAAS;IAACC,MAAM,EAAEC;EAAO,EAAG;AACtC,CAAC;AAAAL,OAAA,CAAAC,OAAA,GAAAA,OAAA;AAFYA,OAAO,CAAAK,WAAA;AAIpB;AACO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAA,EAAS;EACpC,oBACEhB,MAAA,CAAAM,OAAA,CAAAK,aAAA,CAACR,UAAA,CAAAS,SAAS;IACRC,MAAM,EAAEC,MAAO;IACfG,YAAY,EAAC,SAAS;IACtBC,UAAU,EAAC;EAAQ,EACnB;AAEN,CAAC;AAAAT,OAAA,CAAAO,gBAAA,GAAAA,gBAAA;AARYA,gBAAgB,CAAAD,WAAA;AAU7B,IAAMD,MAAM,GAAG,CACb;EACEK,KAAK,EAAE,EAAE;EACTC,OAAO,EAAE;IACPZ,KAAK,EAAE,SAAS;IAChBa,WAAW,EAAE;EACf,CAAC;EACDC,UAAU,EAAE;AACd,CAAC,EACD;EACEH,KAAK,EAAE,EAAE;EACTC,OAAO,EAAE;IACPZ,KAAK,EAAE,UAAU;IACjBa,WAAW,EAAE;EACf,CAAC;EACDC,UAAU,EAAE;AACd,CAAC,EACD;EACEH,KAAK,EAAE,EAAE;EACTC,OAAO,EAAE;IACPZ,KAAK,EAAE,OAAO;IACda,WAAW,EAAE;EACf,CAAC;EACDC,UAAU,EAAE;AACd,CAAC,EACD;EACEH,KAAK,EAAE,EAAE;EACTC,OAAO,EAAE;IACPZ,KAAK,EAAE,OAAO;IACda,WAAW,EAAE;EACf,CAAC;EACDC,UAAU,EAAE;AACd,CAAC,EACD;EACEH,KAAK,EAAE,EAAE;EACTC,OAAO,EAAE;IACPZ,KAAK,EAAE,KAAK;IACZa,WAAW,EAAE;EACf,CAAC;EACDC,UAAU,EAAE;AACd,CAAC,EACD;EACEH,KAAK,EAAE,EAAE;EACTC,OAAO,EAAE;IACPZ,KAAK,EAAE,MAAM;IACba,WAAW,EAAE;EACf,CAAC;EACDC,UAAU,EAAE;AACd,CAAC,CACF"}

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

@@ -1,3 +1,4 @@
+import { Color } from "@artsy/palette";
 import React from "react";
 import { PointDescriptor } from "../DataVis/utils/SharedTypes";
 interface LineChartSVGProps {
@@ -7,6 +8,8 @@ interface LineChartSVGProps {
     points: PointDescriptor[];
     hoverIndex: number;
     hasEnteredViewport?: boolean;
+    primaryColor?: Color;
+    hoverColor?: Color;
 }
 /**
  * Component rendering the SVG part of the line chart (e.g line and points)

package/dist/elements/LineChart/LineChartSVG.js

@@ -26,7 +26,11 @@ var LineChartSVG = function LineChartSVG(_ref) {
     height = _ref.height,
     margin = _ref.margin,
     points = _ref.points,
-    hoverIndex = _ref.hoverIndex;
+    hoverIndex = _ref.hoverIndex,
+    primaryColor = _ref.primaryColor,
+    hoverColor = _ref.hoverColor;
+  var _useTheme = (0, _palette.useTheme)(),
+    theme = _useTheme.theme;
   var values = points.map(function (d) {
     return d.value;
   });
@@ -56,7 +60,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)("mono10"),
+    stroke: theme.colors.mono10,
     x1: "0",
     x2: width,
     y1: h,
@@ -64,14 +68,17 @@ var LineChartSVG = function LineChartSVG(_ref) {
   }), /*#__PURE__*/_react.default.createElement("g", {
     transform: "translate(".concat(margin, ", 0)")
   }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Line.Line, {
-    path: line(interpolatedValues)
+    path: line(interpolatedValues),
+    color: primaryColor
   }), interpolatedValues.map(function (value, index) {
     return /*#__PURE__*/_react.default.createElement(_Point.Point, {
       hovered: hoverIndex === index,
       key: index,
       opacity: 1,
       cx: displayXPosition(value, index),
-      cy: displayYPosition(value)
+      cy: displayYPosition(value),
+      primaryColor: primaryColor,
+      hoverColor: hoverColor
     });
   })))));
 };

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<\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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"}
+{"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","primaryColor","hoverColor","_useTheme","useTheme","theme","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","colors","mono10","x1","x2","y1","y2","Fragment","Line","path","color","index","Point","hovered","key","opacity","cx","cy","exports","displayName","styled","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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"}

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

@@ -1,11 +1,14 @@
+import { Color } from "@artsy/palette";
 import React from "react";
 /**
  * Point is the component responsible for rendering a data point
  * in a line chart.
  */
-export declare const Point: ({ cx, cy, opacity, hovered, }: {
+export declare const Point: ({ cx, cy, opacity, hovered, primaryColor, hoverColor, }: {
     cx: number;
     cy: number;
     opacity: number;
     hovered: boolean;
+    primaryColor?: Color;
+    hoverColor?: Color;
 }) => React.JSX.Element;

package/dist/elements/LineChart/Point.js

@@ -15,13 +15,19 @@ var Point = function Point(_ref) {
   var cx = _ref.cx,
     cy = _ref.cy,
     opacity = _ref.opacity,
-    hovered = _ref.hovered;
+    hovered = _ref.hovered,
+    primaryColor = _ref.primaryColor,
+    hoverColor = _ref.hoverColor;
+  var _useTheme = (0, _palette.useTheme)(),
+    theme = _useTheme.theme;
+  var defaultColor = theme.colors[primaryColor || "mono10"];
+  var hoveredColor = theme.colors[hoverColor || primaryColor || "mono30"];
   return /*#__PURE__*/_react.default.createElement("circle", {
     cx: cx,
     cy: cy,
     r: "4",
     opacity: opacity,
-    fill: hovered ? (0, _palette.color)("mono30") : (0, _palette.color)("mono10")
+    fill: hovered ? hoveredColor : defaultColor
   });
 };
 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(\"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"}
+{"version":3,"file":"Point.js","names":["_palette","require","_react","_interopRequireDefault","obj","__esModule","default","Point","_ref","cx","cy","opacity","hovered","primaryColor","hoverColor","_useTheme","useTheme","theme","defaultColor","colors","hoveredColor","createElement","r","fill","exports","displayName"],"sources":["../../../src/elements/LineChart/Point.tsx"],"sourcesContent":["import { Color, useTheme } 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  primaryColor,\n  hoverColor,\n}: {\n  cx: number\n  cy: number\n  opacity: number\n  hovered: boolean\n  primaryColor?: Color\n  hoverColor?: Color\n}) => {\n  const { theme } = useTheme()\n  const defaultColor = theme.colors[primaryColor || \"mono10\"]\n  const hoveredColor = theme.colors[hoverColor || primaryColor || \"mono30\"]\n  \n  return (\n    <circle\n      cx={cx}\n      cy={cy}\n      r=\"4\"\n      opacity={opacity}\n      fill={hovered ? hoveredColor : defaultColor}\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,EAcZ;EAAA,IAbJC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,EAAE,GAAAF,IAAA,CAAFE,EAAE;IACFC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,YAAY,GAAAL,IAAA,CAAZK,YAAY;IACZC,UAAU,GAAAN,IAAA,CAAVM,UAAU;EASV,IAAAC,SAAA,GAAkB,IAAAC,iBAAQ,GAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK;EACb,IAAMC,YAAY,GAAGD,KAAK,CAACE,MAAM,CAACN,YAAY,IAAI,QAAQ,CAAC;EAC3D,IAAMO,YAAY,GAAGH,KAAK,CAACE,MAAM,CAACL,UAAU,IAAID,YAAY,IAAI,QAAQ,CAAC;EAEzE,oBACEX,MAAA,CAAAI,OAAA,CAAAe,aAAA;IACEZ,EAAE,EAAEA,EAAG;IACPC,EAAE,EAAEA,EAAG;IACPY,CAAC,EAAC,GAAG;IACLX,OAAO,EAAEA,OAAQ;IACjBY,IAAI,EAAEX,OAAO,GAAGQ,YAAY,GAAGF;EAAa,EAC5C;AAEN,CAAC;AAAAM,OAAA,CAAAjB,KAAA,GAAAA,KAAA;AA5BYA,KAAK,CAAAkB,WAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@artsy/palette-charts",
   "sideEffects": false,
-  "version": "42.0.0",
+  "version": "42.1.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": "^43.0.0",
+    "@artsy/palette": "^43.1.0",
     "@babel/cli": "7.12.16",
     "@babel/core": "7.12.16",
     "@babel/plugin-proposal-class-properties": "7.12.13",
@@ -179,5 +179,5 @@
       "url": "http://localhost"
     }
   },
-  "gitHead": "febd100771ab7aef13dd6f65ceec14f3cabc1d23"
+  "gitHead": "b4c4250faf073c7766440c95f642e481f1ac0c80"
 }