@artsy/palette-charts 37.15.0 → 38.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +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)`\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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"}
|
|
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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"}
|
|
@@ -8,4 +8,6 @@ export declare const ChartHoverTooltip: ({ children }: {
|
|
|
8
8
|
/**
|
|
9
9
|
* Base component for positioning tooltips
|
|
10
10
|
*/
|
|
11
|
-
export declare const BaseTooltipPositioner: import("styled-components").
|
|
11
|
+
export declare const BaseTooltipPositioner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@artsy/palette").BoxProps> & import("@artsy/palette").BoxProps, keyof import("@artsy/palette").BoxProps | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
|
|
12
|
+
ref?: ((instance: HTMLDivElement) => void) | React.RefObject<HTMLDivElement>;
|
|
13
|
+
}, keyof import("@artsy/palette").BoxProps> & import("@artsy/palette").BoxProps, never>> & string;
|
|
@@ -11,4 +11,4 @@ export declare const LineChart: React.FC<LineChartProps>;
|
|
|
11
11
|
/**
|
|
12
12
|
* The rectangle area around Dots which triggers mouseover for tooltip
|
|
13
13
|
*/
|
|
14
|
-
export declare const PointHoverArea: import("styled-components").
|
|
14
|
+
export declare const PointHoverArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
@@ -1 +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<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}\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<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`\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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"}
|
|
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<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}\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<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/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette-charts",
|
|
3
3
|
"sideEffects": false,
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "38.0.0",
|
|
5
5
|
"description": "Design system library for react components",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"publishConfig": {
|
|
@@ -74,7 +74,6 @@
|
|
|
74
74
|
"@types/react-lazy-load-image-component": "1.3.0",
|
|
75
75
|
"@types/react-test-renderer": "16.8.1",
|
|
76
76
|
"@types/semver": "5.5.0",
|
|
77
|
-
"@types/styled-components": "4.0.3",
|
|
78
77
|
"@types/styled-system": "5.1.9",
|
|
79
78
|
"@types/styled-system__theme-get": "5.0.0",
|
|
80
79
|
"@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
|
|
@@ -94,7 +93,7 @@
|
|
|
94
93
|
"husky": "2.1.0",
|
|
95
94
|
"jest": "^28.0.0",
|
|
96
95
|
"jest-environment-jsdom": "^29.5.0",
|
|
97
|
-
"jest-styled-components": "7.
|
|
96
|
+
"jest-styled-components": "7.2.0",
|
|
98
97
|
"lint-staged": "8.1.5",
|
|
99
98
|
"mock-raf": "1.0.1",
|
|
100
99
|
"prettier": "2.2.1",
|
|
@@ -106,7 +105,7 @@
|
|
|
106
105
|
"simple-progress-webpack-plugin": "1.1.2",
|
|
107
106
|
"static-extend": "0.1.2",
|
|
108
107
|
"storybook-states": "^1.2.0",
|
|
109
|
-
"styled-components": "
|
|
108
|
+
"styled-components": "6.1.13",
|
|
110
109
|
"ts-node": "8.1.0",
|
|
111
110
|
"tslint": "5.16.0",
|
|
112
111
|
"tslint-config-prettier": "1.18.0",
|
|
@@ -115,7 +114,7 @@
|
|
|
115
114
|
"typescript-styled-plugin": "0.10.0"
|
|
116
115
|
},
|
|
117
116
|
"dependencies": {
|
|
118
|
-
"@artsy/palette": "^
|
|
117
|
+
"@artsy/palette": "^39.0.0",
|
|
119
118
|
"@seznam/compose-react-refs": "^1.0.6",
|
|
120
119
|
"@styled-system/theme-get": "^5.1.2",
|
|
121
120
|
"d3-interpolate": "^1.3.2",
|
|
@@ -174,5 +173,5 @@
|
|
|
174
173
|
"url": "http://localhost"
|
|
175
174
|
}
|
|
176
175
|
},
|
|
177
|
-
"gitHead": "
|
|
176
|
+
"gitHead": "3bfdf8b1625044b942af28b940bb0c2ba4f7da0d"
|
|
178
177
|
}
|