@artsy/palette-charts 38.0.4 → 39.0.0-canary.1408.31244.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.
- package/dist/elements/BarChart/Bar.d.ts +1 -1
- package/dist/elements/BarChart/BarChart.d.ts +1 -1
- package/dist/elements/BarChart/BarChart.story.d.ts +2 -1
- package/dist/elements/DataVis/ChartHoverTooltip.d.ts +2 -2
- package/dist/elements/DataVis/ChartTooltip.d.ts +4 -4
- package/dist/elements/DataVis/ChartTooltip.js.map +1 -1
- package/dist/elements/DataVis/MousePositionContext.d.ts +1 -1
- package/dist/elements/DataVis/MousePositionContext.js.map +1 -1
- package/dist/elements/DonutChart/DonutChart.d.ts +1 -1
- package/dist/elements/DonutChart/DonutChart.js.map +1 -1
- package/dist/elements/DonutChart/DonutChart.story.d.ts +2 -1
- package/dist/elements/LineChart/Line.d.ts +2 -1
- package/dist/elements/LineChart/LineChart.d.ts +1 -1
- package/dist/elements/LineChart/LineChart.js.map +1 -1
- package/dist/elements/LineChart/LineChartSVG.d.ts +1 -1
- package/dist/elements/LineChart/LineChartSVG.js.map +1 -1
- package/dist/elements/LineChart/Point.d.ts +2 -1
- package/package.json +15 -9
|
@@ -18,4 +18,4 @@ export interface BarChartProps {
|
|
|
18
18
|
* Useful for histograms etc.
|
|
19
19
|
* @param props props
|
|
20
20
|
*/
|
|
21
|
-
export declare const BarChart: ({ bars, minLabel, maxLabel }: BarChartProps) => JSX.Element;
|
|
21
|
+
export declare const BarChart: ({ bars, minLabel, maxLabel }: BarChartProps) => React.JSX.Element;
|
|
@@ -4,10 +4,10 @@ import React from "react";
|
|
|
4
4
|
*/
|
|
5
5
|
export declare const ChartHoverTooltip: ({ children }: {
|
|
6
6
|
children: any;
|
|
7
|
-
}) => JSX.Element;
|
|
7
|
+
}) => React.JSX.Element;
|
|
8
8
|
/**
|
|
9
9
|
* Base component for positioning tooltips
|
|
10
10
|
*/
|
|
11
|
-
export declare const BaseTooltipPositioner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<
|
|
11
|
+
export declare const BaseTooltipPositioner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@artsy/palette").BoxProps> & import("@artsy/palette").BoxProps, "ref"> & {
|
|
12
12
|
ref?: ((instance: HTMLDivElement) => void) | React.RefObject<HTMLDivElement>;
|
|
13
13
|
}, keyof import("@artsy/palette").BoxProps> & import("@artsy/palette").BoxProps, never>> & string;
|
|
@@ -4,20 +4,20 @@ import React from "react";
|
|
|
4
4
|
* Returns tooltip component based on the type of tooltip param passed to it
|
|
5
5
|
* @param tooltip either a component or hash containing `title` and `description`
|
|
6
6
|
*/
|
|
7
|
-
export declare const coerceTooltip: (tooltip: React.ReactNode | ChartTooltipProps) => React.ReactNode
|
|
7
|
+
export declare const coerceTooltip: (tooltip: React.ReactNode | ChartTooltipProps) => string | number | boolean | React.JSX.Element | Iterable<React.ReactNode>;
|
|
8
8
|
/**
|
|
9
9
|
* Similart to `coerceTooltip` but without padding
|
|
10
10
|
* @param tooltip
|
|
11
11
|
*/
|
|
12
|
-
export declare const coerceTooltipWithoutPadding: (tooltip: React.ReactNode | ChartTooltipProps) => React.ReactNode
|
|
12
|
+
export declare const coerceTooltipWithoutPadding: (tooltip: React.ReactNode | ChartTooltipProps) => string | number | boolean | React.JSX.Element | Iterable<React.ReactNode>;
|
|
13
13
|
export interface ChartTooltipProps extends FlexProps {
|
|
14
14
|
title: React.ReactNode;
|
|
15
15
|
description: React.ReactNode;
|
|
16
|
-
noPadding
|
|
16
|
+
noPadding?: boolean;
|
|
17
17
|
}
|
|
18
18
|
export declare function isChartTooltipProps(obj: any): obj is ChartTooltipProps;
|
|
19
19
|
/**
|
|
20
20
|
* ChartTooltip is the default content format for a label on a BarChart.
|
|
21
21
|
* @param props
|
|
22
22
|
*/
|
|
23
|
-
export declare const ChartTooltip: ({ title, description, noPadding, ...others }: ChartTooltipProps) => JSX.Element;
|
|
23
|
+
export declare const ChartTooltip: ({ title, description, noPadding, ...others }: ChartTooltipProps) => React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartTooltip.js","names":["_palette","require","_react","_interopRequireDefault","_styledComponents","_excluded","obj","__esModule","default","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","i","Object","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","prototype","propertyIsEnumerable","call","sourceKeys","keys","_typeof","Symbol","iterator","constructor","_extends","assign","bind","arguments","hasOwnProperty","apply","ChartTooltipWrapper","styled","Flex","withConfig","displayName","componentId","coerceTooltip","tooltip","isChartTooltipProps","createElement","ChartTooltip","exports","coerceTooltipWithoutPadding","noPadding","result","_ref","title","description","others","py","px","Text","variant","color"],"sources":["../../../src/elements/DataVis/ChartTooltip.tsx"],"sourcesContent":["import { Flex, FlexProps, Text } from \"@artsy/palette\"\nimport React from \"react\"\nimport styled from \"styled-components\"\n\nconst ChartTooltipWrapper = styled(Flex)`\n text-align: center;\n align-items: center;\n flex-direction: column;\n white-space: nowrap;\n`\n\n/**\n * Returns tooltip component based on the type of tooltip param passed to it\n * @param tooltip either a component or hash containing `title` and `description`\n */\nexport const coerceTooltip = (tooltip: React.ReactNode | ChartTooltipProps) =>\n isChartTooltipProps(tooltip) ? <ChartTooltip {...tooltip} /> : tooltip\n\n/**\n * Similart to `coerceTooltip` but without padding\n * @param tooltip\n */\nexport const coerceTooltipWithoutPadding = (\n tooltip: React.ReactNode | ChartTooltipProps\n) =>\n isChartTooltipProps(tooltip) ? (\n <ChartTooltip noPadding {...tooltip} />\n ) : (\n tooltip\n )\n\nexport interface ChartTooltipProps extends FlexProps {\n title: React.ReactNode\n description: React.ReactNode\n noPadding
|
|
1
|
+
{"version":3,"file":"ChartTooltip.js","names":["_palette","require","_react","_interopRequireDefault","_styledComponents","_excluded","obj","__esModule","default","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","i","Object","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","prototype","propertyIsEnumerable","call","sourceKeys","keys","_typeof","Symbol","iterator","constructor","_extends","assign","bind","arguments","hasOwnProperty","apply","ChartTooltipWrapper","styled","Flex","withConfig","displayName","componentId","coerceTooltip","tooltip","isChartTooltipProps","createElement","ChartTooltip","exports","coerceTooltipWithoutPadding","noPadding","result","_ref","title","description","others","py","px","Text","variant","color"],"sources":["../../../src/elements/DataVis/ChartTooltip.tsx"],"sourcesContent":["import { Flex, FlexProps, Text } from \"@artsy/palette\"\nimport React from \"react\"\nimport styled from \"styled-components\"\n\nconst ChartTooltipWrapper = styled(Flex)`\n text-align: center;\n align-items: center;\n flex-direction: column;\n white-space: nowrap;\n`\n\n/**\n * Returns tooltip component based on the type of tooltip param passed to it\n * @param tooltip either a component or hash containing `title` and `description`\n */\nexport const coerceTooltip = (tooltip: React.ReactNode | ChartTooltipProps) =>\n isChartTooltipProps(tooltip) ? <ChartTooltip {...tooltip} /> : tooltip\n\n/**\n * Similart to `coerceTooltip` but without padding\n * @param tooltip\n */\nexport const coerceTooltipWithoutPadding = (\n tooltip: React.ReactNode | ChartTooltipProps\n) =>\n isChartTooltipProps(tooltip) ? (\n <ChartTooltip noPadding {...tooltip} />\n ) : (\n tooltip\n )\n\nexport interface ChartTooltipProps extends FlexProps {\n title: React.ReactNode\n description: React.ReactNode\n noPadding?: boolean\n}\n\n// tslint:disable-next-line:completed-docs\nexport function isChartTooltipProps(obj: any): obj is ChartTooltipProps {\n const result =\n obj &&\n typeof obj === \"object\" &&\n obj.hasOwnProperty(\"title\") &&\n obj.hasOwnProperty(\"description\")\n return result\n}\n\n/**\n * ChartTooltip is the default content format for a label on a BarChart.\n * @param props\n */\nexport const ChartTooltip = ({\n title,\n description,\n noPadding,\n ...others\n}: ChartTooltipProps) => (\n <ChartTooltipWrapper\n py={noPadding ? 0 : 0.5}\n px={noPadding ? 0 : 1}\n {...others}\n >\n <Text variant=\"xs\">{title}</Text>\n\n <Text color=\"black60\" variant=\"xs\">\n {description}\n </Text>\n </ChartTooltipWrapper>\n)\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MousePositionContext.js","names":["_react","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","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","MousePositionContext","React","createContext","x","y","exports","ProvideMousePosition","_ref","children","_useState","useState","_useState2","state","setState","useEffect","setMousePosition","ev","clientX","clientY","window","addEventListener","removeEventListener","createElement","Provider","displayName"],"sources":["../../../src/elements/DataVis/MousePositionContext.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\n\n// tslint:disable-next-line:completed-docs\nexport const MousePositionContext = React.createContext({ x: 0, y: 0 })\n\n// tslint:disable-next-line:completed-docs\nexport const ProvideMousePosition: React.
|
|
1
|
+
{"version":3,"file":"MousePositionContext.js","names":["_react","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","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","MousePositionContext","React","createContext","x","y","exports","ProvideMousePosition","_ref","children","_useState","useState","_useState2","state","setState","useEffect","setMousePosition","ev","clientX","clientY","window","addEventListener","removeEventListener","createElement","Provider","displayName"],"sources":["../../../src/elements/DataVis/MousePositionContext.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\n\n// tslint:disable-next-line:completed-docs\nexport const MousePositionContext = React.createContext({ x: 0, y: 0 })\n\n// tslint:disable-next-line:completed-docs\nexport const ProvideMousePosition: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {\n const [state, setState] = useState({ x: 0, y: 0 })\n\n useEffect(() => {\n const setMousePosition = (ev: MouseEvent) => {\n setState({\n x: ev.clientX,\n y: ev.clientY,\n })\n }\n window.addEventListener(\"mousemove\", setMousePosition)\n return () => {\n window.removeEventListener(\"mousemove\", setMousePosition)\n }\n }, [false])\n\n return (\n <MousePositionContext.Provider value={state}>\n {children}\n </MousePositionContext.Provider>\n )\n}\n"],"mappings":"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"}
|
|
@@ -7,4 +7,4 @@ export interface DonutChartProps extends ChartProps {
|
|
|
7
7
|
* DonutChart is a component that displays data points with donut shaped arcs.
|
|
8
8
|
* Good for illustrating numerical proportions.
|
|
9
9
|
*/
|
|
10
|
-
export declare const DonutChart: React.FC<DonutChartProps
|
|
10
|
+
export declare const DonutChart: React.FC<React.PropsWithChildren<DonutChartProps>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DonutChart.js","names":["_palette","require","_d3Interpolate","_d3Shape","_react","_interopRequireWildcard","_styledComponents","_interopRequireDefault","_ChartHoverTooltip","_ChartTooltip","_MousePositionContext","_useWrapperWidth","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","colors","MIN_CHART_SIZE","DonutChart","_ref","points","_ref$margin","margin","space","_useState","useState","_useState2","hoverIndex","setHoverIndex","wrapperRef","useRef","width","Math","max","useWrapperWidth","donutWidth","donutLabelMargin","padAngel","atan","centerX","centerY","values","map","d","angelInterpolator","interpolate","PI","arc","d3_arc","innerRadius","outerRadius","padAngle","labelArc","pie","d3_pie","tooltip","point","index","hover","createElement","ChartHoverTooltip","concat","coerceTooltip","labels","_labelArc$centroid","centroid","_labelArc$centroid2","x","y","axisLabelX","DonutLabelContainer","center","Text","color","variant","coerceTooltipWithoutPadding","zeroStateArc","zeroState","stroke","fill","angle","endAngle","slices","datum","sortedIndex","arcColor","onMouseEnter","onMouseLeave","ProvideMousePosition","Box","ref","position","Fragment","height","transform","exports","displayName","computeLabelTranslate","dim","diffPercent","styled","div","withConfig","componentId","_ref2","_ref3","_ref4","_ref5"],"sources":["../../../src/elements/DonutChart/DonutChart.tsx"],"sourcesContent":["import { Box, color, Color, space, Text } from \"@artsy/palette\"\nimport { interpolate } from \"d3-interpolate\"\nimport { arc as d3_arc, pie as d3_pie } from \"d3-shape\"\nimport React, { useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { ChartHoverTooltip } from \"../DataVis/ChartHoverTooltip\"\nimport {\n coerceTooltip,\n coerceTooltipWithoutPadding,\n} from \"../DataVis/ChartTooltip\"\nimport { ProvideMousePosition } from \"../DataVis/MousePositionContext\"\nimport { ChartProps } from \"../DataVis/utils/SharedTypes\"\nimport { useWrapperWidth } from \"../DataVis/utils/useWrapperWidth\"\n\nconst colors: Color[] = [\"black10\", \"black30\", \"black60\"]\nconst MIN_CHART_SIZE = 30\n\nexport interface DonutChartProps extends ChartProps {\n margin?: number\n}\n\n/**\n * DonutChart is a component that displays data points with donut shaped arcs.\n * Good for illustrating numerical proportions.\n */\nexport const DonutChart: React.FC<DonutChartProps> = ({\n points,\n margin = space(2), // FIXME: This whole\n}) => {\n const [hoverIndex, setHoverIndex] = useState(-1)\n\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const width = Math.max(useWrapperWidth(wrapperRef), MIN_CHART_SIZE)\n\n // width of the arc is %12 of chart width\n const donutWidth = width * 0.12\n\n // margin between chart and labels step down to 10px when chart is smaller than 230px\n const donutLabelMargin = width > 230 ? space(2) : space(1)\n\n // 2px in radians\n const padAngel = Math.atan(2 / width)\n\n const centerX = width / 2 + margin\n const centerY = width / 2 + margin\n\n const values = points.map((d) => d.value)\n const angelInterpolator = interpolate(0, 2 * Math.PI)\n\n const arc = d3_arc()\n .innerRadius(width / 2 - margin - donutWidth)\n .outerRadius(width / 2 - margin)\n .padAngle(padAngel)\n\n // virtual donut to use its arc centroids to calculate label position\n const labelArc = d3_arc()\n .innerRadius(width / 2 - margin + donutLabelMargin)\n .outerRadius(width / 2 - margin + donutLabelMargin)\n\n const pie = d3_pie().value((d: any) => d.value)\n\n const tooltip = points.map((point, index) => {\n const hover = hoverIndex === index\n return hover ? (\n <ChartHoverTooltip key={`${index}-hover`}>\n {coerceTooltip(point.tooltip)}\n </ChartHoverTooltip>\n ) : null\n })\n\n const labels = pie(points as any).map((slice, index) => {\n const [x, y] = labelArc.centroid(slice as any)\n const axisLabelX = points[index].axisLabelX\n return (\n axisLabelX && (\n <DonutLabelContainer\n key={index}\n x={x + centerX}\n y={y + centerY}\n center={centerX}\n >\n <Text color=\"black60\" variant=\"xs\">\n {coerceTooltipWithoutPadding(axisLabelX)}\n </Text>\n </DonutLabelContainer>\n )\n )\n })\n\n const zeroStateArc = pie([{ value: 1 }] as any).map((zeroState) => (\n <path\n key=\"zero-state\"\n stroke=\"none\"\n fill={color(\"black5\")}\n d={arc(zeroState as any)}\n />\n ))\n\n const angle = angelInterpolator(1)\n pie.endAngle(angle)\n const slices = pie(points as any).map((datum: any, index) => {\n // d3 by default sorts slices by values. for color assignment we\n // need sorted index but for hover we need original order in points\n // to match with correct tooltip\n const sortedIndex = datum.index\n let arcColor: string = color(colors[sortedIndex % colors.length])\n // avoid the first and last arc ending up the same color\n if (\n sortedIndex === values.length - 1 &&\n sortedIndex % colors.length === 0\n ) {\n arcColor = color(colors[1])\n }\n return (\n <path\n key={index}\n fill={arcColor}\n d={arc(datum)}\n onMouseEnter={() => setHoverIndex(index)}\n onMouseLeave={() => setHoverIndex(-1)}\n />\n )\n })\n\n return (\n <ProvideMousePosition>\n <Box ref={wrapperRef as any} position=\"relative\">\n <>\n {tooltip}\n {width !== MIN_CHART_SIZE && labels}\n <svg key={\"svg\"} width={width + margin} height={width + margin}>\n <g transform={`translate(${centerX}, ${centerY})`}>\n {zeroStateArc}\n <g>{slices}</g>\n </g>\n </svg>\n </>\n </Box>\n </ProvideMousePosition>\n )\n}\n\ninterface DonutLabelContainerProps {\n x: number\n y: number\n center?: number\n}\n\n// to create a float:right effect for labels that are on left side (also top)\nconst computeLabelTranslate = (dim: number, center: number): string => {\n const diffPercent = (dim - center) / center\n if (diffPercent < -0.25) {\n return \"-100%\"\n } else if (diffPercent < -0 && diffPercent > -0.25) {\n return \"-50%\"\n } else {\n return \"0\"\n }\n}\n\nconst DonutLabelContainer = styled.div<DonutLabelContainerProps>`\n top: ${({ y }) => y}px;\n left: ${({ x }) => x}px;\n position: absolute;\n text-align: center;\n transform: translate(\n ${({ x, center }) => computeLabelTranslate(x, center)},\n ${({ y, center }) => computeLabelTranslate(y, center)}\n );\n white-space: nowrap;\n`\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DonutChart.js","names":["_palette","require","_d3Interpolate","_d3Shape","_react","_interopRequireWildcard","_styledComponents","_interopRequireDefault","_ChartHoverTooltip","_ChartTooltip","_MousePositionContext","_useWrapperWidth","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","colors","MIN_CHART_SIZE","DonutChart","_ref","points","_ref$margin","margin","space","_useState","useState","_useState2","hoverIndex","setHoverIndex","wrapperRef","useRef","width","Math","max","useWrapperWidth","donutWidth","donutLabelMargin","padAngel","atan","centerX","centerY","values","map","d","angelInterpolator","interpolate","PI","arc","d3_arc","innerRadius","outerRadius","padAngle","labelArc","pie","d3_pie","tooltip","point","index","hover","createElement","ChartHoverTooltip","concat","coerceTooltip","labels","_labelArc$centroid","centroid","_labelArc$centroid2","x","y","axisLabelX","DonutLabelContainer","center","Text","color","variant","coerceTooltipWithoutPadding","zeroStateArc","zeroState","stroke","fill","angle","endAngle","slices","datum","sortedIndex","arcColor","onMouseEnter","onMouseLeave","ProvideMousePosition","Box","ref","position","Fragment","height","transform","exports","displayName","computeLabelTranslate","dim","diffPercent","styled","div","withConfig","componentId","_ref2","_ref3","_ref4","_ref5"],"sources":["../../../src/elements/DonutChart/DonutChart.tsx"],"sourcesContent":["import { Box, color, Color, space, Text } from \"@artsy/palette\"\nimport { interpolate } from \"d3-interpolate\"\nimport { arc as d3_arc, pie as d3_pie } from \"d3-shape\"\nimport React, { useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { ChartHoverTooltip } from \"../DataVis/ChartHoverTooltip\"\nimport {\n coerceTooltip,\n coerceTooltipWithoutPadding,\n} from \"../DataVis/ChartTooltip\"\nimport { ProvideMousePosition } from \"../DataVis/MousePositionContext\"\nimport { ChartProps } from \"../DataVis/utils/SharedTypes\"\nimport { useWrapperWidth } from \"../DataVis/utils/useWrapperWidth\"\n\nconst colors: Color[] = [\"black10\", \"black30\", \"black60\"]\nconst MIN_CHART_SIZE = 30\n\nexport interface DonutChartProps extends ChartProps {\n margin?: number\n}\n\n/**\n * DonutChart is a component that displays data points with donut shaped arcs.\n * Good for illustrating numerical proportions.\n */\nexport const DonutChart: React.FC<React.PropsWithChildren<DonutChartProps>> = ({\n points,\n margin = space(2), // FIXME: This whole\n}) => {\n const [hoverIndex, setHoverIndex] = useState(-1)\n\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const width = Math.max(useWrapperWidth(wrapperRef), MIN_CHART_SIZE)\n\n // width of the arc is %12 of chart width\n const donutWidth = width * 0.12\n\n // margin between chart and labels step down to 10px when chart is smaller than 230px\n const donutLabelMargin = width > 230 ? space(2) : space(1)\n\n // 2px in radians\n const padAngel = Math.atan(2 / width)\n\n const centerX = width / 2 + margin\n const centerY = width / 2 + margin\n\n const values = points.map((d) => d.value)\n const angelInterpolator = interpolate(0, 2 * Math.PI)\n\n const arc = d3_arc()\n .innerRadius(width / 2 - margin - donutWidth)\n .outerRadius(width / 2 - margin)\n .padAngle(padAngel)\n\n // virtual donut to use its arc centroids to calculate label position\n const labelArc = d3_arc()\n .innerRadius(width / 2 - margin + donutLabelMargin)\n .outerRadius(width / 2 - margin + donutLabelMargin)\n\n const pie = d3_pie().value((d: any) => d.value)\n\n const tooltip = points.map((point, index) => {\n const hover = hoverIndex === index\n return hover ? (\n <ChartHoverTooltip key={`${index}-hover`}>\n {coerceTooltip(point.tooltip)}\n </ChartHoverTooltip>\n ) : null\n })\n\n const labels = pie(points as any).map((slice, index) => {\n const [x, y] = labelArc.centroid(slice as any)\n const axisLabelX = points[index].axisLabelX\n return (\n axisLabelX && (\n <DonutLabelContainer\n key={index}\n x={x + centerX}\n y={y + centerY}\n center={centerX}\n >\n <Text color=\"black60\" variant=\"xs\">\n {coerceTooltipWithoutPadding(axisLabelX)}\n </Text>\n </DonutLabelContainer>\n )\n )\n })\n\n const zeroStateArc = pie([{ value: 1 }] as any).map((zeroState) => (\n <path\n key=\"zero-state\"\n stroke=\"none\"\n fill={color(\"black5\")}\n d={arc(zeroState as any)}\n />\n ))\n\n const angle = angelInterpolator(1)\n pie.endAngle(angle)\n const slices = pie(points as any).map((datum: any, index) => {\n // d3 by default sorts slices by values. for color assignment we\n // need sorted index but for hover we need original order in points\n // to match with correct tooltip\n const sortedIndex = datum.index\n let arcColor: string = color(colors[sortedIndex % colors.length])\n // avoid the first and last arc ending up the same color\n if (\n sortedIndex === values.length - 1 &&\n sortedIndex % colors.length === 0\n ) {\n arcColor = color(colors[1])\n }\n return (\n <path\n key={index}\n fill={arcColor}\n d={arc(datum)}\n onMouseEnter={() => setHoverIndex(index)}\n onMouseLeave={() => setHoverIndex(-1)}\n />\n )\n })\n\n return (\n <ProvideMousePosition>\n <Box ref={wrapperRef as any} position=\"relative\">\n <>\n {tooltip}\n {width !== MIN_CHART_SIZE && labels}\n <svg key={\"svg\"} width={width + margin} height={width + margin}>\n <g transform={`translate(${centerX}, ${centerY})`}>\n {zeroStateArc}\n <g>{slices}</g>\n </g>\n </svg>\n </>\n </Box>\n </ProvideMousePosition>\n )\n}\n\ninterface DonutLabelContainerProps {\n x: number\n y: number\n center?: number\n}\n\n// to create a float:right effect for labels that are on left side (also top)\nconst computeLabelTranslate = (dim: number, center: number): string => {\n const diffPercent = (dim - center) / center\n if (diffPercent < -0.25) {\n return \"-100%\"\n } else if (diffPercent < -0 && diffPercent > -0.25) {\n return \"-50%\"\n } else {\n return \"0\"\n }\n}\n\nconst DonutLabelContainer = styled.div<DonutLabelContainerProps>`\n top: ${({ y }) => y}px;\n left: ${({ x }) => x}px;\n position: absolute;\n text-align: center;\n transform: translate(\n ${({ x, center }) => computeLabelTranslate(x, center)},\n ${({ y, center }) => computeLabelTranslate(y, center)}\n );\n white-space: nowrap;\n`\n"],"mappings":"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"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
/**
|
|
2
3
|
* Line is the component responsible for rendering a line that goes through all of the data points
|
|
3
4
|
* in a line chart.
|
|
4
5
|
*/
|
|
5
6
|
export declare const Line: ({ path }: {
|
|
6
7
|
path: string;
|
|
7
|
-
}) => JSX.Element;
|
|
8
|
+
}) => React.JSX.Element;
|
|
@@ -7,7 +7,7 @@ export interface LineChartProps extends ChartProps {
|
|
|
7
7
|
* LineChart is a component that displays some data points connected by lines.
|
|
8
8
|
* Useful for visualizing a time series, etc.
|
|
9
9
|
*/
|
|
10
|
-
export declare const LineChart: React.FC<LineChartProps
|
|
10
|
+
export declare const LineChart: React.FC<React.PropsWithChildren<LineChartProps>>;
|
|
11
11
|
/**
|
|
12
12
|
* The rectangle area around Dots which triggers mouseover for tooltip
|
|
13
13
|
*/
|
|
@@ -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<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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"}
|
|
1
|
+
{"version":3,"file":"LineChart.js","names":["_palette","require","_react","_interopRequireWildcard","_styledComponents","_interopRequireDefault","_ChartHoverTooltip","_ChartTooltip","_MousePositionContext","_useWrapperWidth","_LineChartSVG","_templateObject","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","err","return","isArray","margin","space","DEFAULT_HEIGHT","LineChart","_ref","points","_ref$height","height","_useState","useState","_useState2","hoverIndex","setHoverIndex","wrapperRef","useRef","width","useWrapperWidth","createElement","ProvideMousePosition","Flex","flexDirection","ref","Fragment","map","point","HoverHandler","index","coerceTooltip","tooltip","LineChartSVG","filter","bar","axisLabelX","px","_ref2","BarAxisLabelContainer","first","last","AxisLabelX","color","variant","exports","displayName","_ref3","children","hover","PointHoverArea","onMouseEnter","onMouseLeave","style","opacity","ChartHoverTooltip","styled","div","withConfig","componentId","_ref4","media","xs","_ref5","Text"],"sources":["../../../src/elements/LineChart/LineChart.tsx"],"sourcesContent":["import { Flex, media, space, Text } from \"@artsy/palette\"\nimport React, { useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { ChartHoverTooltip } from \"../DataVis/ChartHoverTooltip\"\nimport { coerceTooltip } from \"../DataVis/ChartTooltip\"\nimport { ProvideMousePosition } from \"../DataVis/MousePositionContext\"\nimport { ChartProps } from \"../DataVis/utils/SharedTypes\"\nimport { useWrapperWidth } from \"../DataVis/utils/useWrapperWidth\"\nimport { LineChartSVG } from \"./LineChartSVG\"\n\nconst margin = space(2)\nconst DEFAULT_HEIGHT = 87\n\nexport interface LineChartProps extends ChartProps {\n height?: number\n}\n\n/**\n * LineChart is a component that displays some data points connected by lines.\n * Useful for visualizing a time series, etc.\n */\nexport const LineChart: React.FC<React.PropsWithChildren<LineChartProps>> = ({\n points,\n height = DEFAULT_HEIGHT,\n}: LineChartProps) => {\n const [hoverIndex, setHoverIndex] = useState(-1)\n\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const width = useWrapperWidth(wrapperRef)\n\n return (\n <ProvideMousePosition>\n <Flex flexDirection=\"column\" ref={wrapperRef as any} width=\"100%\">\n {width && (\n <>\n <Flex height={height}>\n {points.map((point, i) => (\n <HoverHandler\n key={i}\n index={i}\n hoverIndex={hoverIndex}\n setHoverIndex={setHoverIndex}\n >\n {coerceTooltip(point.tooltip)}\n </HoverHandler>\n ))}\n </Flex>\n <LineChartSVG\n width={width}\n height={height}\n margin={margin}\n points={points}\n hoverIndex={hoverIndex}\n />\n {points.filter((bar) => bar.axisLabelX).length > 0 && (\n <Flex px=\"2\" width={width}>\n {points.map(({ axisLabelX }, i) => (\n <BarAxisLabelContainer\n key={i}\n first={i === 0}\n last={i === points.length - 1}\n >\n <AxisLabelX color=\"black60\" variant=\"xs\">\n {axisLabelX as any}\n </AxisLabelX>\n </BarAxisLabelContainer>\n ))}\n </Flex>\n )}\n </>\n )}\n </Flex>\n </ProvideMousePosition>\n )\n}\n\ninterface HoverHandlerProps {\n children: React.ReactNode\n index: number\n hoverIndex: number\n setHoverIndex: React.Dispatch<React.SetStateAction<number>>\n}\n\nconst HoverHandler: React.FC<React.PropsWithChildren<HoverHandlerProps>> = ({\n children,\n index,\n hoverIndex,\n setHoverIndex,\n}: HoverHandlerProps) => {\n const hover = hoverIndex === index\n return (\n <PointHoverArea\n onMouseEnter={() => setHoverIndex(index)}\n onMouseLeave={() => setHoverIndex(-1)}\n style={{ opacity: hover ? 1 : 0 }}\n >\n {hover && <ChartHoverTooltip>{children}</ChartHoverTooltip>}\n </PointHoverArea>\n )\n}\n\n/**\n * The rectangle area around Dots which triggers mouseover for tooltip\n */\nexport const PointHoverArea = styled.div`\n flex: 1;\n z-index: 1;\n margin: 0 1%; /* gap between area enabling tooptips */\n opacity: 0;\n transition: opacity 0.4s ease-in;\n`\n\ninterface AxisContainerProps {\n first: boolean\n last: boolean\n}\n\nconst BarAxisLabelContainer = styled.div<AxisContainerProps>`\n flex: ${({ last }) => (last ? 0 : 1)};\n min-height: ${space(2)}px;\n position: relative;\n ${media.xs<AxisContainerProps>`\n display: ${({ first, last }) => (first || last ? \"auto\" : \"none\")};;\n `};\n`\n\nconst AxisLabelX = styled(Text)`\n position: absolute;\n text-align: center;\n white-space: nowrap;\n transform: translateX(-33%);\n`\n"],"mappings":"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"}
|
|
@@ -11,5 +11,5 @@ interface LineChartSVGProps {
|
|
|
11
11
|
/**
|
|
12
12
|
* Component rendering the SVG part of the line chart (e.g line and points)
|
|
13
13
|
*/
|
|
14
|
-
export declare const LineChartSVG: React.FC<LineChartSVGProps
|
|
14
|
+
export declare const LineChartSVG: React.FC<React.PropsWithChildren<LineChartSVGProps>>;
|
|
15
15
|
export {};
|
|
@@ -1 +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<LineChartSVGProps
|
|
1
|
+
{"version":3,"file":"LineChartSVG.js","names":["_palette","require","_d3Interpolate","_d3Shape","_react","_interopRequireDefault","_styledComponents","_Line","_Point","obj","__esModule","default","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","o","minLen","_arrayLikeToArray","n","Object","prototype","toString","call","slice","constructor","name","Array","from","test","iter","Symbol","iterator","isArray","len","length","i","arr2","LineChartSVG","_ref","width","height","margin","points","hoverIndex","values","map","d","value","maxValue","Math","max","apply","_ref2","zeros","valuesInterpolator","interpolateArray","w","h","displayYPosition","displayXPosition","_d","line","d3Line","x","y","interpolatedValues","createElement","Svg","transform","concat","stroke","color","x1","x2","y1","y2","Fragment","Line","path","index","Point","hovered","key","opacity","cx","cy","exports","displayName","styled","svg","withConfig","componentId"],"sources":["../../../src/elements/LineChart/LineChartSVG.tsx"],"sourcesContent":["import { color } from \"@artsy/palette\"\nimport { interpolateArray } from \"d3-interpolate\"\nimport { line as d3Line } from \"d3-shape\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { PointDescriptor } from \"../DataVis/utils/SharedTypes\"\nimport { Line } from \"./Line\"\nimport { Point } from \"./Point\"\n\ninterface LineChartSVGProps {\n width: number\n height: number\n margin: number\n points: PointDescriptor[]\n hoverIndex: number\n hasEnteredViewport?: boolean\n}\n\n/**\n * Component rendering the SVG part of the line chart (e.g line and points)\n */\nexport const LineChartSVG: React.FC<React.PropsWithChildren<LineChartSVGProps>> = ({\n width,\n height,\n margin,\n points,\n hoverIndex,\n}: LineChartSVGProps) => {\n const values = points.map((d) => d.value)\n const maxValue = Math.max(...points.map(({ value }) => value))\n\n const zeros = values.map(() => 0)\n const valuesInterpolator = interpolateArray(zeros, values)\n\n const w = width - 2 * margin\n const h = height - 2 * margin\n\n // maps value to x/y position\n const displayYPosition = (d) => (maxValue ? h - (d * h) / maxValue : h)\n const displayXPosition = (_d, i) => (i / (points.length - 1)) * w\n\n const line = d3Line().x(displayXPosition).y(displayYPosition)\n\n const interpolatedValues: any = valuesInterpolator(1)\n return (\n <Svg width={width} height={height}>\n <g transform={`translate(0, ${margin})`}>\n <line stroke={color(\"black10\")} x1=\"0\" x2={width} y1={h} y2={h} />\n <g transform={`translate(${margin}, 0)`}>\n <>\n <Line path={line(interpolatedValues as any)} />\n {interpolatedValues.map((value, index) => {\n return (\n <Point\n hovered={hoverIndex === index}\n key={index}\n opacity={1}\n cx={displayXPosition(value, index)}\n cy={displayYPosition(value)}\n />\n )\n })}\n </>\n </g>\n </g>\n </Svg>\n )\n}\n\nconst Svg = styled.svg`\n position: absolute;\n`\n"],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
/**
|
|
2
3
|
* Point is the component responsible for rendering a data point
|
|
3
4
|
* in a line chart.
|
|
@@ -7,4 +8,4 @@ export declare const Point: ({ cx, cy, opacity, hovered, }: {
|
|
|
7
8
|
cy: number;
|
|
8
9
|
opacity: number;
|
|
9
10
|
hovered: boolean;
|
|
10
|
-
}) => JSX.Element;
|
|
11
|
+
}) => React.JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette-charts",
|
|
3
3
|
"sideEffects": false,
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "39.0.0-canary.1408.31244.0",
|
|
5
5
|
"description": "Design system library for react components",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"publishConfig": {
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"colors": "1.4.0"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
|
-
"react": "^
|
|
44
|
-
"react-dom": "^
|
|
43
|
+
"react": "^18",
|
|
44
|
+
"react-dom": "^18",
|
|
45
45
|
"styled-components": "^4"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
@@ -69,8 +69,8 @@
|
|
|
69
69
|
"@types/enzyme": "3.10.8",
|
|
70
70
|
"@types/jest": "^28.0.0",
|
|
71
71
|
"@types/node": "14.14.27",
|
|
72
|
-
"@types/react": "
|
|
73
|
-
"@types/react-dom": "
|
|
72
|
+
"@types/react": "^18.3.12",
|
|
73
|
+
"@types/react-dom": "^18.3.1",
|
|
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",
|
|
@@ -97,8 +97,8 @@
|
|
|
97
97
|
"lint-staged": "8.1.5",
|
|
98
98
|
"mock-raf": "1.0.1",
|
|
99
99
|
"prettier": "2.2.1",
|
|
100
|
-
"react": "
|
|
101
|
-
"react-dom": "
|
|
100
|
+
"react": "^18.3.1",
|
|
101
|
+
"react-dom": "^18.3.1",
|
|
102
102
|
"react-powerplug": "1.0.0",
|
|
103
103
|
"react-test-renderer": "16.8.6",
|
|
104
104
|
"regenerator-runtime": "0.13.5",
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
"typescript-styled-plugin": "0.10.0"
|
|
115
115
|
},
|
|
116
116
|
"dependencies": {
|
|
117
|
-
"@artsy/palette": "
|
|
117
|
+
"@artsy/palette": "40.0.0-canary.1408.31244.0",
|
|
118
118
|
"@seznam/compose-react-refs": "^1.0.6",
|
|
119
119
|
"@styled-system/theme-get": "^5.1.2",
|
|
120
120
|
"d3-interpolate": "^1.3.2",
|
|
@@ -154,7 +154,13 @@
|
|
|
154
154
|
"node_modules",
|
|
155
155
|
"<rootDir>/src"
|
|
156
156
|
],
|
|
157
|
+
"moduleNameMapper": {
|
|
158
|
+
"^react$": "react-17",
|
|
159
|
+
"^react-dom$": "react-dom-17",
|
|
160
|
+
"^react-dom/test-utils$": "react-dom-17/test-utils"
|
|
161
|
+
},
|
|
157
162
|
"setupFilesAfterEnv": [
|
|
163
|
+
"<rootDir>/src/jestShim.js",
|
|
158
164
|
"<rootDir>/setupTests.ts"
|
|
159
165
|
],
|
|
160
166
|
"snapshotSerializers": [
|
|
@@ -173,5 +179,5 @@
|
|
|
173
179
|
"url": "http://localhost"
|
|
174
180
|
}
|
|
175
181
|
},
|
|
176
|
-
"gitHead": "
|
|
182
|
+
"gitHead": "6c11516b357a45989d181aef2c23275cb6604009"
|
|
177
183
|
}
|