diff --git a/packages/react-charts/src/components/ChartArea/examples/ChartArea.md b/packages/react-charts/src/components/ChartArea/examples/ChartArea.md index cc14604a2bf..0de79c1c0ea 100644 --- a/packages/react-charts/src/components/ChartArea/examples/ChartArea.md +++ b/packages/react-charts/src/components/ChartArea/examples/ChartArea.md @@ -13,7 +13,7 @@ propComponents: [ hideDarkMode: true --- -import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThreshold, ChartThemeColor, ChartThemeVariant, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts'; +import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThreshold, ChartThemeColor, ChartLegendTooltip, ChartThemeVariant, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts'; import '@patternfly/patternfly/patternfly-charts.css'; ## Introduction @@ -90,13 +90,14 @@ BasicRightAlignedLegend = ( ```js title=Cyan-with-bottom-aligned-legend-and-axis-label import React from 'react'; -import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts'; +import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts'; // import '@patternfly/patternfly/patternfly-charts.css'; // Required for mix-blend-mode CSS property class BottomAlignedLegend extends React.Component { render() { // Note: Container order is important const CursorVoronoiContainer = createContainer("cursor", "voronoi"); + const legendData = [{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }]; return (
@@ -107,15 +108,15 @@ class BottomAlignedLegend extends React.Component { ariaTitle="Area chart example" containerComponent={ `${datum.name}: ${datum.y}`} + labels={({ datum }) => `${datum.y}`} + labelComponent={ datum.x}/>} mouseFollowTooltips voronoiDimension="x" voronoiPadding={50} /> } - legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]} + legendData={legendData} legendPosition="bottom" height={250} padding={{ diff --git a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.test.tsx b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.test.tsx new file mode 100644 index 00000000000..ad045717f9b --- /dev/null +++ b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.test.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import { shallow } from 'enzyme'; +import { ChartArea } from '../ChartArea'; +import { ChartGroup } from '../ChartGroup'; +import { ChartCursorContainer } from './ChartCursorContainer'; + +Object.values([true, false]).forEach(() => { + test('ChartVoronoiContainer', () => { + const view = shallow(); + expect(view).toMatchSnapshot(); + }); +}); + +test('renders container via ChartGroup', () => { + const view = shallow( + } height={200} width={200}> + + + + ); + expect(view).toMatchSnapshot(); +}); diff --git a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx new file mode 100644 index 00000000000..27cb128253b --- /dev/null +++ b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx @@ -0,0 +1,217 @@ +import * as React from 'react'; +import hoistNonReactStatics from 'hoist-non-react-statics'; +import { CoordinatesPropType, OriginType } from 'victory-core'; +import { VictoryCursorContainer, VictoryCursorContainerProps } from 'victory-cursor-container'; +import { ChartLabel } from '../ChartLabel'; +import { ChartThemeDefinition } from '../ChartTheme'; +import { ChartCursorTooltip } from '../ChartTooltip'; +import { getClassName, getTheme } from '../ChartUtils'; + +/** + * See https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/victory/index.d.ts + */ +export interface ChartCursorContainerProps extends VictoryCursorContainerProps { + /** + * he children prop specifies the child or children that will be rendered within the container. It will be set by + * whatever Victory component is rendering the container. + * + * **This prop should not be set manually.** + */ + children?: React.ReactElement | React.ReactElement[]; + /** + * The className prop specifies a className that will be applied to the outer-most div rendered by the container + */ + className?: string; + /** + * The containerId prop may be used to set a deterministic id for the container. When a containerId is not manually + * set, a unique id will be generated. It is usually necessary to set deterministic ids for automated testing. + */ + containerId?: number | string; + /** + * The cursorComponent prop takes a component instance which will be used to render a cursor element. The new element + * created will be supplied with x1, y1, x2 and y2 positioning props. + */ + cursorComponent?: React.ReactElement; + /** + * When the cursorDimension prop is set, the cursor will be a line to inspect the given dimension (either "x" or "y"). + * When this prop is not specified, the cursor will be a 2-dimensional crosshair. For example, if you would like to + * inspect the time of time-series data, set dimension={"x"}; the cursor will then be a vertical line that will + * inspect the time value of the current mouse position. + */ + cursorDimension?: 'x' | 'y'; + /** + * The cursorLabel prop defines the label that will appear next to the cursor. A label will only appear if cursorLabel + * is set. This prop should be given as a function of a point (an Object with x and y properties). + * + * example: cursorLabel={(point) => point.x} + */ + cursorLabel?: (point: CoordinatesPropType) => any | void; + /** + * The cursorLabelComponent prop takes a component instance which will be used to render a label for the cursor. The + * new element created from the passed cursorLabelComponent will be supplied with the following props: x, y, active, + * text. If cursorLabelComponent is omitted, a new ChartLabel will be created with the props described above. + */ + cursorLabelComponent?: React.ReactElement; + /** + * The cursorLabelOffset prop determines the pixel offset of the cursor label from the cursor point. This prop should + * be an Object with x and y properties, or a number to be used for both dimensions. + */ + cursorLabelOffset?: number | CoordinatesPropType; + /** + * Whenever the mouse is not over the chart, the cursor will not be displayed. If instead you would like to keep it + * displayed, use the defaultCursorValue prop to set the default value. The prop should be a point (an Object with x + * and y properties) for 2-dimensional cursors, or a number for 1-dimensional cursors. + * + * examples: defaultCursorValue={{x: 1, y: 1}}, defaultCursorValue={0} + */ + defaultCursorValue?: number | CoordinatesPropType; + /** + * The desc prop specifies the description of the chart/SVG to assist with + * accessibility for screen readers. The more info about the chart provided in + * the description, the more usable it will be for people using screen readers. + * This prop defaults to an empty string. + * + * @example "Golden retreivers make up 30%, Labs make up 25%, and other dog breeds are + * not represented above 5% each." + */ + desc?: string; + /** + * When the disable prop is set to true, ChartCursorContainer events will not fire. + */ + disable?: boolean; + /** + * The events prop attaches arbitrary event handlers to the container component. + * Event handlers passed from other Victory components are called with their + * corresponding events as well as scale, style, width, height, and data when + * applicable. Use the invert method to convert event coordinate information to + * data. `scale.x.invert(evt.offsetX)`. + * + * @example {{ onClick: (evt) => alert(`x: ${evt.clientX}, y: ${evt.clientY}`)}} + */ + events?: React.DOMAttributes; + /** + * The height props specifies the height the svg viewBox of the container. + * This value should be given as a number of pixels. If no height prop + * is given, the height prop from the child component passed will be used. + */ + height?: number; + /** + * The name prop is used to reference a component instance when defining shared events. + */ + name?: string; + /** + * If provided, the onCursorChange function will be called every time the cursor value changes. onCursorChange is + * called with value (the updated cursor value) and props (the props used by ChartCursorContainer). A common use for + * onCursorChange is to save the cursor value to state and use it in another part of the view. + * + * example: onCursorChange={(value, props) => this.setState({cursorValue: value})} + */ + onCursorChange?: (value: CoordinatesPropType, props: VictoryCursorContainerProps) => void; + /** + * Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts. + * + * **This prop should not be set manually.** + */ + origin?: OriginType; + /** + * Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart. + * + * **This prop should not be set manually.** + */ + polar?: boolean; + /** + * The portalComponent prop takes a component instance which will be used as a container for children that should + * render inside a top-level container so that they will always appear above other elements. ChartTooltip renders + * inside a portal so that tooltips always render above data. VictoryPortal is used to define elements that should + * render in the portal container. This prop defaults to Portal, and should only be overridden when changing rendered + * elements from SVG to another type of element e.g., react-native-svg elements. + */ + portalComponent?: React.ReactElement; + /** + * The portalZIndex prop determines the z-index of the div enclosing the portal component. If a portalZIndex prop is + * not set, the z-index of the enclosing div will be set to 99. + */ + portalZIndex?: number; + /** + * The responsive prop specifies whether the rendered container should be a responsive container + * with a viewBox attribute, or a static container with absolute width and height. + * + * @default true + */ + responsive?: boolean; + /** + * The style prop specifies styles for your ChartContainer. Any valid inline style properties + * will be applied. Height and width should be specified via the height + * and width props, as they are used to calculate the alignment of + * components within the container. Styles from the child component will + * also be passed, if any exist. + * + * @example {border: 1px solid red} + */ + style?: React.CSSProperties; + /** + * The tabIndex prop specifies the description of the chart/SVG to assist with accessibility. + */ + tabIndex?: number; + /** + * The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or + * props defined in theme may be overwritten by props specified on the component instance. + */ + theme?: ChartThemeDefinition; + /** + * Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. + * + * Note: Not compatible with theme prop + * + * @example themeColor={ChartThemeColor.blue} + */ + themeColor?: string; + /** + * Specifies the theme variant. Valid values are 'dark' or 'light' + * + * Note: Not compatible with theme prop + * + * @example themeVariant={ChartThemeVariant.light} + */ + themeVariant?: string; + /** + * The width props specifies the width of the svg viewBox of the container + * This value should be given as a number of pixels. If no width prop + * is given, the width prop from the child component passed will be used. + */ + width?: number; +} + +export const ChartCursorContainer: React.FunctionComponent = ({ + className, + themeColor, + themeVariant, + + // destructure last + theme = getTheme(themeColor, themeVariant), + cursorLabelComponent = , // Note that Victory provides its own label component here + ...rest +}: ChartCursorContainerProps) => { + const chartClassName = getClassName({ className }); + const chartCursorLabelComponent = React.cloneElement(cursorLabelComponent, { + theme, + ...cursorLabelComponent.props + }); + + // Note: theme is required by voronoiContainerMixin + return ( + // Note: className is valid, but Victory is missing a type + // eslint-disable-next-line @typescript-eslint/ban-ts-ignore + // @ts-ignore + + ); +}; +ChartCursorContainer.defaultProps = (VictoryCursorContainer as any).defaultProps; + +// Note: VictoryCursorContainer.defaultEvents & VictoryContainer.role must be hoisted +hoistNonReactStatics(ChartCursorContainer, VictoryCursorContainer); diff --git a/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.test.tsx.snap b/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.test.tsx.snap new file mode 100644 index 00000000000..140c70dba31 --- /dev/null +++ b/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.test.tsx.snap @@ -0,0 +1,2856 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartVoronoiContainer 1`] = ` +} + role="presentation" + shapeRendering="auto" + /> + } + cursorLabelComponent={ + } + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#06c", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } + tspanComponent={} + /> + } + cursorLabelOffset={ + Object { + "x": 5, + "y": -10, + } + } + portalComponent={} + portalZIndex={99} + responsive={true} + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#06c", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } +/> +`; + +exports[`ChartVoronoiContainer 2`] = ` +} + role="presentation" + shapeRendering="auto" + /> + } + cursorLabelComponent={ + } + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#06c", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } + tspanComponent={} + /> + } + cursorLabelOffset={ + Object { + "x": 5, + "y": -10, + } + } + portalComponent={} + portalZIndex={99} + responsive={true} + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#06c", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } +/> +`; + +exports[`renders container via ChartGroup 1`] = ` +} + role="presentation" + shapeRendering="auto" + /> + } + cursorLabelComponent={ + } + tspanComponent={} + /> + } + cursorLabelOffset={ + Object { + "x": 5, + "y": -10, + } + } + portalComponent={} + portalZIndex={99} + responsive={true} + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#06c", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } + /> + } + groupComponent={} + height={200} + samples={50} + sortOrder="ascending" + standalone={true} + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#06c", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } + width={200} +> + + + +`; diff --git a/packages/react-charts/src/components/ChartCursorContainer/index.ts b/packages/react-charts/src/components/ChartCursorContainer/index.ts new file mode 100644 index 00000000000..4771ace315f --- /dev/null +++ b/packages/react-charts/src/components/ChartCursorContainer/index.ts @@ -0,0 +1 @@ +export * from './ChartCursorContainer'; diff --git a/packages/react-charts/src/components/ChartLabel/ChartLabel.tsx b/packages/react-charts/src/components/ChartLabel/ChartLabel.tsx index 81b04f12105..ad47d35e49f 100644 --- a/packages/react-charts/src/components/ChartLabel/ChartLabel.tsx +++ b/packages/react-charts/src/components/ChartLabel/ChartLabel.tsx @@ -146,6 +146,7 @@ export interface ChartLabelProps extends VictoryLabelProps { text?: string[] | StringOrNumberOrCallback; /** * The textAnchor prop defines how the text is horizontally positioned relative to the given `x` and `y` coordinates. + * Options are "start", "middle" and "end". Note that this overrides the style prop. */ textAnchor?: TextAnchorType | (() => TextAnchorType); /** @@ -154,7 +155,8 @@ export interface ChartLabelProps extends VictoryLabelProps { */ transform?: string | {} | (() => string | {}); /** - * The verticalAnchor prop defines how the text is vertically positioned relative to the given `x` and `y` coordinates + * The verticalAnchor prop defines how the text is vertically positioned relative to the given `x` and `y` + * coordinates. Options are "start", "middle" and "end". */ verticalAnchor?: VerticalAnchorType | (() => VerticalAnchorType); /** @@ -174,15 +176,26 @@ export interface ChartLabelProps extends VictoryLabelProps { y?: number; } -export const ChartLabel: React.FunctionComponent = ({ style, ...rest }: ChartLabelProps) => { +export const ChartLabel: React.FunctionComponent = ({ + style, + textAnchor, + ...rest +}: ChartLabelProps) => { const applyDefaultStyle = (customStyle: React.CSSProperties) => - defaults(customStyle, { - fontFamily: ChartCommonStyles.label.fontFamily, - fontSize: ChartCommonStyles.label.fontSize, - letterSpacing: ChartCommonStyles.label.letterSpacing - }); + defaults( + { + ...customStyle, + textAnchor // textAnchor prop must override given theme styles + }, + { + fontFamily: ChartCommonStyles.label.fontFamily, + fontSize: ChartCommonStyles.label.fontSize, + letterSpacing: ChartCommonStyles.label.letterSpacing + } + ); const newStyle = Array.isArray(style) ? style.map(applyDefaultStyle) : applyDefaultStyle(style); - return ; + + return ; }; // Note: VictoryLabel.role must be hoisted diff --git a/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap b/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap index b324ec87369..54761a141c5 100644 --- a/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap @@ -10,6 +10,7 @@ exports[`ChartLabel 1`] = ` "fontFamily": "var(--pf-chart-global--FontFamily)", "fontSize": 14, "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "textAnchor": undefined, } } textComponent={} @@ -27,6 +28,7 @@ exports[`ChartLabel 2`] = ` "fontFamily": "var(--pf-chart-global--FontFamily)", "fontSize": 14, "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "textAnchor": undefined, } } textComponent={} @@ -44,6 +46,7 @@ exports[`renders component text 1`] = ` "fontFamily": "var(--pf-chart-global--FontFamily)", "fontSize": 14, "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "textAnchor": undefined, } } text="This is a test" diff --git a/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx b/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx index b6cb2431d54..251637c414e 100644 --- a/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx +++ b/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx @@ -300,9 +300,11 @@ export interface ChartLegendProps extends VictoryLegendProps { export const ChartLegend: React.FunctionComponent = ({ containerComponent = , dataComponent = , + labelComponent = , responsive = true, themeColor, themeVariant, + titleComponent = , // destructure last theme = getTheme(themeColor, themeVariant), @@ -316,7 +318,16 @@ export const ChartLegend: React.FunctionComponent = ({ }); // Note: containerComponent is required for theme - return ; + return ( + + ); }; // Note: VictoryLegend.role must be hoisted, but getBaseProps causes error with ChartVoronoiContainer diff --git a/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap b/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap index 8e53b4e95c1..067613b580b 100644 --- a/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap @@ -475,15 +475,7 @@ exports[`ChartLegend 1`] = ` } dataComponent={} groupComponent={} - labelComponent={ - } - tspanComponent={} - /> - } + labelComponent={} standalone={true} theme={ Object { @@ -934,15 +926,7 @@ exports[`ChartLegend 1`] = ` }, } } - titleComponent={ - } - tspanComponent={} - /> - } + titleComponent={} /> `; @@ -1421,15 +1405,7 @@ exports[`ChartLegend 2`] = ` } dataComponent={} groupComponent={} - labelComponent={ - } - tspanComponent={} - /> - } + labelComponent={} standalone={true} theme={ Object { @@ -1880,15 +1856,7 @@ exports[`ChartLegend 2`] = ` }, } } - titleComponent={ - } - tspanComponent={} - /> - } + titleComponent={} /> `; @@ -2368,15 +2336,7 @@ exports[`renders component data 1`] = ` dataComponent={} groupComponent={} height={50} - labelComponent={ - } - tspanComponent={} - /> - } + labelComponent={} standalone={true} theme={ Object { @@ -2828,15 +2788,7 @@ exports[`renders component data 1`] = ` } } title="Average number of pets" - titleComponent={ - } - tspanComponent={} - /> - } + titleComponent={} width={200} /> `; diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.test.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.test.tsx new file mode 100644 index 00000000000..23c76e18d35 --- /dev/null +++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.test.tsx @@ -0,0 +1,97 @@ +import * as React from 'react'; +import { shallow } from 'enzyme'; +import { Chart } from '../Chart'; +import { ChartAxis } from '../ChartAxis'; +import { ChartGroup } from '../ChartGroup'; +import { ChartLine } from '../ChartLine'; +import { ChartThemeColor } from '../ChartTheme'; +import { createContainer } from '../ChartUtils'; +import { ChartLegendTooltip } from './ChartLegendTooltip'; + +Object.values([true, false]).forEach(() => { + test('ChartLegendTooltip', () => { + const view = shallow(); + expect(view).toMatchSnapshot(); + }); +}); + +test('allows tooltip via container component', () => { + const CursorVoronoiContainer = createContainer('cursor', 'voronoi'); + const legendData = [ + { name: 'Cats' }, + { name: 'Dogs', symbol: { type: 'dash' } }, + { name: 'Birds' }, + { name: 'Mice' } + ]; + const view = shallow( + `${datum.y !== null ? datum.y : 'no data'}`} + labelComponent={ datum.x} />} + mouseFollowTooltips + voronoiDimension="x" + voronoiPadding={50} + /> + } + legendData={legendData} + legendPosition="bottom" + height={275} + maxDomain={{ y: 10 }} + minDomain={{ y: 0 }} + padding={{ + bottom: 75, // Adjusted to accommodate legend + left: 50, + right: 50, + top: 50 + }} + themeColor={ChartThemeColor.green} + width={450} + > + + + + + + + + + + ); + expect(view).toMatchSnapshot(); +}); diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx new file mode 100644 index 00000000000..950b9a5c085 --- /dev/null +++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx @@ -0,0 +1,313 @@ +import * as React from 'react'; +import hoistNonReactStatics from 'hoist-non-react-statics'; +import { + NumberOrCallback, + OrientationTypes, + StringOrNumberOrCallback, + TextAnchorType, + VictoryNumberCallback, + VictoryStyleObject +} from 'victory-core'; +import { VictoryTooltip } from 'victory-tooltip'; +import { ChartLegendTooltipLegend, defaultLegendProps } from './ChartLegendTooltipLegend'; +import { ChartLegendTooltipStyles, ChartThemeDefinition } from '../ChartTheme'; +import { ChartCursorTooltip, ChartCursorTooltipProps } from '../ChartTooltip'; +import { getLegendTooltipSize, getTheme } from '../ChartUtils'; + +/** + * See https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/victory/index.d.ts + */ +export interface ChartLegendTooltipProps extends ChartCursorTooltipProps { + /** + * The active prop specifies whether the tooltip component should be displayed. + */ + active?: boolean; + /** + * When true, tooltip events will set the active prop on both data and label elements. + */ + activateData?: boolean; + /** + * The angle prop specifies the angle to rotate the tooltip around its origin point. + */ + angle?: string | number; + /** + * The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object + * that describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for + * positioning the flyout of a tooltip independent from the pointer. When ChartTooltip is used with + * ChartVoronoiContainer, the center prop is what enables the mouseFollowTooltips option. When this prop is set, + * non-zero pointerLength values will no longer be respected. + */ + center?: { x: number; y: number }; + /** + * The centerOffset prop determines the position of the center of the tooltip flyout in relation to the flyout + * pointer. This prop should be given as an object of x and y, where each is either a numeric offset value or a + * function that returns a numeric value. When this prop is set, non-zero pointerLength values will no longer be + * respected. + */ + centerOffset?: { + x?: NumberOrCallback; + y?: NumberOrCallback; + }; + /** + * The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of + * the chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the + * center of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders. + */ + constrainToVisibleArea?: boolean; + /** + * The cornerRadius prop determines corner radius of the flyout container. This prop may be given as a positive number + * or a function of datum. + */ + cornerRadius?: NumberOrCallback; + /** + * Victory components can pass a data prop to their label component. This can be useful in custom components that need + * to make use of the entire dataset. + */ + data?: any[]; + /** + * Victory components can pass a datum prop to their label component. This can be used to calculate functional styles, + * and determine text. + */ + datum?: {}; + /** + * The dx prop defines a horizontal shift from the x coordinate. + */ + dx?: NumberOrCallback; + /** + * The dy prop defines a vertical shift from the y coordinate. + */ + dy?: NumberOrCallback; + /** + * The events prop attaches arbitrary event handlers to the label component. This prop should be given as an object of + * event names and corresponding event handlers. When events are provided via Victory’s event system, event handlers + * will be called with the event, the props of the component is attached to, and an eventKey. + * Examples: events={{onClick: (evt) => alert("x: " + evt.clientX)}} + */ + events?: { [key: string]: (event: React.SyntheticEvent) => void }; + /** + * The flyoutComponent prop takes a component instance which will be used to create the flyout path for each tooltip. + * The new element created from the passed flyoutComponent will be supplied with the following properties: x, y, dx, dy, + * index, datum, cornerRadius, pointerLength, pointerWidth, width, height, orientation, style, and events. + * Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within + * the custom component itself. If flyoutComponent is omitted, a default Flyout component will be created with props + * described above. + * Examples: flyoutComponent={}, flyoutComponent={} + */ + flyoutComponent?: React.ReactElement; + /** + * The flyoutHeight prop defines the height of the tooltip flyout. This prop may be given as a positive number or a function + * of datum. If this prop is not set, height will be determined based on an approximate text size calculated from the + * text and style props provided to ChartTooltip. + */ + flyoutHeight?: NumberOrCallback; + /** + * The style prop applies SVG style properties to the rendered flyout container. These props will be passed to the + * flyoutComponent. + */ + flyoutStyle?: VictoryStyleObject; + /** + * The flyoutWidth prop defines the width of the tooltip flyout. This prop may be given as a positive number or a + * function of datum. If this prop is not set, flyoutWidth will be determined based on an approximate text size + * calculated from the text and style props provided to VictoryTooltip. + */ + flyoutWidth?: NumberOrCallback; + /** + * The groupComponent prop takes a component instance which will be used to create group elements for use within + * container elements. This prop defaults to a tag.} + */ + groupComponent?: React.ReactElement; + /** + * This prop refers to the height of the svg that VictoryLabel is rendered within. This prop is passed from parents + * of VictoryLabel, and should not be set manually. In versions before ^33.0.0 this prop referred to the height of the + * tooltip flyout. Please use flyoutHeight instead + * + * **This prop should not be set manually.** + */ + height?: number; + /** + * The horizontal prop determines whether to plot the flyouts to the left / right of the (x, y) coordinate rather than top / bottom. + * This is useful when an orientation prop is not provided, and data will determine the default orientation. i.e. + * negative values result in a left orientation and positive values will result in a right orientation by default. + */ + horizontal?: boolean; + /** + * The index prop represents the index of the datum in the data array. + */ + index?: number | string; + /** + * The labelComponent prop takes a component instance which will be used to render each tooltip label. The new element + * created from the passed labelComponent will be supplied with the following properties: x, y, index, datum, + * verticalAnchor, textAnchor, style, text, and events. Any of these props may be overridden by passing in props to + * the supplied component, or modified or ignored within the custom component itself. If labelComponent is omitted, a + * new ChartLabel will be created with the props described above. + * Examples: labelComponent={}, labelComponent={} + */ + labelComponent?: React.ReactElement; + /** + * Defines how the labelComponent text is horizontally positioned relative to its `x` and `y` coordinates. Valid + * values are 'start', 'middle', 'end', and 'inherit'. + */ + labelTextAnchor?: TextAnchorType | (() => TextAnchorType); + /** + * Specify data via the data prop. ChartLegend expects data as an + * array of objects with name (required), symbol, and labels properties. + * The data prop must be given as an array. + * + * @example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]} + */ + legendData?: { + name?: string; + symbol?: { + fill?: string; + type?: string; + }; + }[]; + /** + * The orientation prop determines which side of the (x, y) coordinate the tooltip should be rendered on. + * This prop can be given as “top”, “bottom”, “left”, “right”, or as a function of datum that returns one of these + * values. If this prop is not provided it will be determined from the sign of the datum, and the value of the + * horizontal prop. + */ + orientation?: OrientationTypes | VictoryNumberCallback; + /** + * The pointerLength prop determines the length of the triangular pointer extending from the flyout. This prop may be + * given as a positive number or a function of datum. + */ + pointerLength?: NumberOrCallback; + /** + * This prop determines which side of the tooltip flyout the pointer should originate on. When this prop is not set, + * it will be determined based on the overall orientation of the flyout in relation to its data point, and any center + * or centerOffset values. Valid values are 'top', 'bottom', 'left' and 'right. + */ + pointerOrientation?: OrientationTypes | ((...args: any[]) => OrientationTypes); + /** + * The pointerWidth prop determines the width of the base of the triangular pointer extending from + * the flyout. This prop may be given as a positive number or a function of datum. + */ + pointerWidth?: NumberOrCallback; + /** + * When renderInPortal is true, rendered tooltips will be wrapped in VictoryPortal and rendered within the Portal element + * within ChartContainer. Note: This prop should not be set to true when using a custom container element. + */ + renderInPortal?: boolean; + /** + * The style prop applies CSS properties to the rendered `` element. + */ + style?: React.CSSProperties | React.CSSProperties[]; + /** + * The text prop defines the text ChartTooltip will render. The text prop may be given as a string, number, or + * function of datum. When ChartLabel is used as the labelComponent, strings may include newline characters, which + * ChartLabel will split in to separate elements. + */ + text?: StringOrNumberOrCallback | string[] | number[]; + /** + * The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or + * props defined in theme may be overwritten by props specified on the component instance. + */ + theme?: ChartThemeDefinition; + /** + * Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. + * + * Note: Not compatible with theme prop + * + * @example themeColor={ChartThemeColor.blue} + */ + themeColor?: string; + /** + * Specifies the theme variant. Valid values are 'dark' or 'light' + * + * Note: Not compatible with theme prop + * + * @example themeVariant={ChartThemeVariant.light} + */ + themeVariant?: string; + /** + * The title prop specifies a title to render with the legend. + * This prop should be given as a string, or an array of strings for multi-line titles. + * + * Example: title={(datum) => datum.x} + */ + title?: string | string[] | Function; + /** + * The x prop defines the x coordinate to use as a basis for horizontal positioning. + */ + x?: number; + /** + * The y prop defines the y coordinate to use as a basis for vertical positioning. + */ + y?: number; +} + +export const ChartLegendTooltip: React.FunctionComponent = ({ + datum, + labelComponent = , + legendData, + themeColor, + themeVariant, + title, + + // destructure last + theme = getTheme(themeColor, themeVariant), + ...rest +}: ChartLegendTooltipProps) => { + // Returns the tooltip legend component + const getTooltipLegendComponent = () => + React.cloneElement(labelComponent, { + data: legendData, + title, + ...labelComponent.props + }); + + // Returns legend dimensions + const getLegendDimensions = (props: any) => { + const legendComponent = getTooltipLegendComponent(); + const getKeyValue = (key: string) => + legendComponent.props[key] ? legendComponent.props[key] : (defaultLegendProps as any)[key]; + + const sizeProps = { + legendData, + legendProps: { + borderPadding: getKeyValue('borderPadding'), + gutter: getKeyValue('gutter'), + orientation: getKeyValue('orientation'), + padding: getKeyValue('padding'), + rowGutter: getKeyValue('rowGutter'), + standalone: getKeyValue('standalone'), + style: getKeyValue('style') + }, + theme, + ...props // text + }; + const legendDimensions = getLegendTooltipSize(sizeProps); + return legendDimensions; + }; + + // Returns flyout height based on legend size + const getFlyoutHeight = (props: any) => { + const legendComponent = getTooltipLegendComponent(); + const height = getLegendDimensions(props).height + ChartLegendTooltipStyles.flyout.padding; + return legendComponent.props.title ? height : height - 10; + }; + + // Returns flyout width based on legend size + const getFlyoutWidth = (props: any) => { + const legendComponent = getTooltipLegendComponent(); + return getLegendDimensions(props).width + ChartLegendTooltipStyles.flyout.padding; + }; + + return ( + + + + ); +}; + +// Note: VictoryTooltip.defaultEvents must be hoisted +hoistNonReactStatics(ChartLegendTooltip, VictoryTooltip); diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLabel.test.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLabel.test.tsx new file mode 100644 index 00000000000..8f9fe5af92c --- /dev/null +++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLabel.test.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { shallow } from 'enzyme'; +import { ChartLegendTooltipLabel } from './ChartLegendTooltipLabel'; + +Object.values([true, false]).forEach(() => { + test('ChartLegendTooltipLabel', () => { + const view = shallow(); + expect(view).toMatchSnapshot(); + }); +}); + +test('renders component text', () => { + const legendData = [ + { name: 'Cats' }, + { name: 'Dogs', symbol: { type: 'dash' } }, + { name: 'Birds' }, + { name: 'Mice' } + ]; + const view = shallow(); + expect(view).toMatchSnapshot(); +}); diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLabel.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLabel.tsx new file mode 100644 index 00000000000..3977bb55d13 --- /dev/null +++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLabel.tsx @@ -0,0 +1,242 @@ +import * as React from 'react'; +import hoistNonReactStatics from 'hoist-non-react-statics'; +import { defaults } from 'lodash'; +import { + Helpers, + LabelOrientationType, + OriginType, + StringOrNumberOrCallback, + TextAnchorType, + VerticalAnchorType +} from 'victory-core'; +import { VictoryLabel, VictoryLabelProps } from 'victory-core'; +import { ChartLabel } from '../ChartLabel'; +import { ChartLegendTooltipStyles } from '../ChartTheme'; + +/** + * See https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/victory/index.d.ts + */ +export interface ChartLegendLabelProps extends VictoryLabelProps { + /** + * The active prop specifies whether the label is active or not. The active prop is set by defaultEvents in components + * like ChartTooltip and VictorySelectionContainer. The active prop is used when evaluating functional styles and + * props. + */ + active?: boolean; + /** + * Specifies the angle to rotate the text by. + */ + angle?: string | number; + /** + * The capHeight prop defines a text metric for the font being used: the expected height of capital letters. + * This is necessary because of SVG, which (a) positions the *bottom* of the text at `y`, and (b) has no notion of + * line height. The value should ideally use the same units as `lineHeight` and `dy`, preferably ems. If given a + * unitless number, it is assumed to be ems. + */ + capHeight?: StringOrNumberOrCallback; + /** + * The children of this component define the content of the label. This makes using the component similar to normal + * HTML spans or labels. strings, numbers, and functions of data / value are supported. + */ + children?: StringOrNumberOrCallback; + /** + * The className prop specifies a class name that will be applied to the rendered text element. + */ + className?: string; + /** + * Labels that apply to an entire data series will recieve the entire series as `data` instead of an individual datum + * prop. + */ + data?: any[]; + /** + * Victory components can pass a datum prop to their label component. This can be used to calculate functional styles, + * and determine child text + */ + datum?: {}; + /** + * The desc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. The more + * descriptive this title is, the more useful it will be for people using screen readers. + */ + desc?: string; + /** + * The direction prop determines which text direction to apply to the rendered text element + */ + direction?: 'rtl' | 'ltr' | 'inherit'; + /** + * The dx prop defines a horizontal shift from the `x` coordinate. + */ + dx?: StringOrNumberOrCallback; + /** + * The dy prop defines a vertical shift from the `y` coordinate. Since this component already accounts for + * `capHeight`, `lineHeight`, and `verticalAnchor`, this will usually not be necessary. + */ + dy?: StringOrNumberOrCallback; + /** + * The events prop attaches arbitrary event handlers to the label component. + * Event handlers are currently only called with their corresponding events. + */ + events?: React.DOMAttributes; + /** + * The index prop represents the index of the datum in the data array. This prop should not be set manually. + */ + index?: string | number; + /** + * When the text property contains an array of strings, the inline property lets the elements lay out next + * to each other. If this property is not specified, the elements will stack vertically instead. + */ + inline?: boolean; + /** + * The labelPlacement prop is used to specify the placement of labels relative to the data point they represent. + * This prop may be given as “vertical”, “parallel” or “perpendicular”. This props is particularly useful in polar + * charts, where it may be desireable to position a label either parallel or perpendicular to its corresponding angle. + * When this prop is not set, perpendicular label placement will be used for polar charts, and vertical label + * placement will be used for cartesian charts. + */ + labelPlacement?: LabelOrientationType; + /** + * Specify data via the data prop. ChartLegend expects data as an + * array of objects with name (required), symbol, and labels properties. + * The data prop must be given as an array. + * + * @example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]} + */ + legendData?: { + name?: string; + symbol?: { + fill?: string; + type?: string; + }; + }[]; + /** + * The valueLabelComponent prop takes a component instance which will be used to render each legend tooltip. + */ + legendLabelComponent?: React.ReactElement; + /** + * The lineHeight prop defines how much space a single line of text should take up. + * Note that SVG has no notion of line-height, so the positioning may differ slightly from what you would expect with CSS, + * but the result is similar: a roughly equal amount of extra space is distributed above and below the line of text. + * The value should ideally use the same units as `capHeight` and `dy`, preferably ems. + * If given a unitless number, it is assumed to be ems. + */ + lineHeight?: StringOrNumberOrCallback; + /** + * Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts. + * + * **This prop should not be set manually.** + */ + origin?: OriginType; + /** + * Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart. + * + * **This prop should not be set manually.** + */ + polar?: boolean; + /** + * The renderInPortal prop specifies whether ChartLabel should render text in place or within a VictoryPortal. + * Setting renderInPortal to true is equivalent to wrapping ChartLabel in a VictoryPortal. This prop is false by default. + */ + renderInPortal?: boolean; + /** + * Victory components can pass a scale prop to their label component. This can be used to calculate the position of + * label elements from datum. This prop should not be set manually. + */ + scale?: { x?: any; y?: any }; + /** + * The style prop applies CSS properties to the rendered `` element. + */ + style?: React.CSSProperties | React.CSSProperties[]; + /** + * The text prop defines the text ChartLabel will render. The text prop may be given as a string, number, a function + * of datum, or an array of any of these. Strings may include newline characters, which ChartLabel will split into + * separate elements. When text is given as an array, separate elements will be created for each + * element in the array. + */ + text?: string[] | StringOrNumberOrCallback; + /** + * The textAnchor prop defines how the text is horizontally positioned relative to the given `x` and `y` coordinates. + * Options are "start", "middle" and "end". Note that this overrides the style prop. + */ + textAnchor?: TextAnchorType | (() => TextAnchorType); + /** + * The transform prop applies a transform to the rendered `` element. + * In addition to being a string, it can be an object containing transform definitions for easier authoring. + */ + transform?: string | {} | (() => string | {}); + /** + * The verticalAnchor prop defines how the text is vertically positioned relative to the given `x` and `y` + * coordinates. Options are "start", "middle" and "end". + */ + verticalAnchor?: VerticalAnchorType | (() => VerticalAnchorType); + /** + * This props refers to the width of the svg that VictoryLabel is rendered within. This prop is passed from parents + * of VictoryLabel. + * + * **This prop should not be set manually.** + */ + width?: number; + /** + * The x prop defines the x coordinate to use as a basis for horizontal positioning. + */ + x?: number; + /** + * The y prop defines the y coordinate to use as a basis for vertical positioning. + */ + y?: number; +} + +export const ChartLegendTooltipLabel: React.FunctionComponent = ({ + dx = 0, + index = 0, + legendData, + legendLabelComponent = , + style, + text, + textAnchor = 'end', + x, + y, + + // destructure last + ...rest +}: ChartLegendLabelProps) => { + const getStyle = (styles: any) => { + const applyDefaultStyle = (customStyle: React.CSSProperties) => + defaults( + { + ...customStyle + }, + { + fill: ChartLegendTooltipStyles.label.fill + } + ); + return Array.isArray(styles) ? styles.map(applyDefaultStyle) : applyDefaultStyle(styles); + }; + + const getLegendLabelComponent = () => { + const label = legendData && legendData.length ? legendData[index as any].name : undefined; + + return React.cloneElement(legendLabelComponent, { + style: getStyle({}), + text: label, + textAnchor: 'start', + x, + y + }); + }; + + const getValueLabelComponent = () => { + const _x = x + Helpers.evaluateProp(dx); + return ; + }; + + const legendLabel = getLegendLabelComponent(); + const valueLabel = getValueLabelComponent(); + return ( + + {legendLabel} + {valueLabel} + + ); +}; + +// Note: VictoryLabel.role must be hoisted +hoistNonReactStatics(ChartLegendTooltipLabel, VictoryLabel); diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLegend.test.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLegend.test.tsx new file mode 100644 index 00000000000..c85eb6569c6 --- /dev/null +++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLegend.test.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { shallow } from 'enzyme'; +import { ChartLegendTooltipLegend } from './ChartLegendTooltipLegend'; + +Object.values([true, false]).forEach(() => { + test('ChartLegendTooltipLegend', () => { + const view = shallow(); + expect(view).toMatchSnapshot(); + }); +}); + +test('renders component text', () => { + const legendData = [ + { name: 'Cats' }, + { name: 'Dogs', symbol: { type: 'dash' } }, + { name: 'Birds' }, + { name: 'Mice' } + ]; + const view = shallow(); + expect(view).toMatchSnapshot(); +}); diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLegend.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLegend.tsx new file mode 100644 index 00000000000..2ab21b31f2c --- /dev/null +++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLegend.tsx @@ -0,0 +1,437 @@ +import * as React from 'react'; +import hoistNonReactStatics from 'hoist-non-react-statics'; +import { + BlockProps, + ColorScalePropType, + EventCallbackInterface, + EventPropTypeInterface, + Helpers, + NumberOrCallback, + OrientationTypes, + PaddingProps, + StringOrNumberOrCallback, + StringOrNumberOrList, + VictoryStyleInterface, + VictoryStyleObject +} from 'victory-core'; +import { VictoryLegend, VictoryLegendOrientationType, VictoryLegendTTargetType } from 'victory-legend'; +import { ChartLabel } from '../ChartLabel'; +import { ChartLegend, ChartLegendProps } from '../ChartLegend'; +import { ChartLegendTooltipLabel } from './ChartLegendTooltipLabel'; +import { ChartLegendTooltipStyles, ChartThemeDefinition } from '../ChartTheme'; +import { getLegendTooltipSize, getTheme } from '../ChartUtils'; + +/** + * See https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/victory/index.d.ts + */ +// Overriding title prop +// eslint-disable-next-line @typescript-eslint/ban-ts-ignore +// @ts-ignore +export interface ChartLegendTooltipLegendProps extends ChartLegendProps { + /** + * The borderComponent prop takes a component instance which will be responsible + * for rendering a border around the legend. The new element created from the passed + * borderComponent will be provided with the following properties calculated by + * ChartLegend: x, y, width, height, and style. Any of these props may be + * overridden by passing in props to the supplied component, or modified or ignored + * within the custom component itself. If a borderComponent + * is not provided, ChartLegend will use its default Border component. + * Please note that the default width and height calculated + * for the border component is based on approximated + * text measurements, and may need to be adjusted. + */ + borderComponent?: React.ReactElement; + /** + * The borderPadding specifies the amount of padding that should + * be added between the legend items and the border. This prop may be given as + * a number, or asanobject with values specified for top, bottom, left, and right. + * Please note that the default width and height calculated for the border + * component is based on approximated text measurements, so padding may need to be adjusted. + */ + borderPadding?: PaddingProps; + /** + * The centerTitle boolean prop specifies whether a legend title should be centered. + */ + centerTitle?: boolean; + /** + * The colorScale prop defines a color scale to be applied to each data + * symbol in ChartLegend. This prop should be given as an array of CSS + * colors, or as a string corresponding to one of the built in color + * scales: "grayscale", "qualitative", "heatmap", "warm", "cool", "red", + * "green", "blue". ChartLegend will assign a color to each symbol by + * index, unless they are explicitly specified in the data object. + * Colors will repeat when there are more symbols than colors in the + * provided colorScale. + */ + colorScale?: ColorScalePropType; + /** + * The containerComponent prop takes an entire component which will be used to + * create a container element for standalone charts. + * The new element created from the passed containerComponent wil be provided with + * these props from ChartLegend: height, width, children + * (the chart itself) and style. Props that are not provided by the + * child chart component include title and desc, both of which + * are intended to add accessibility to Victory components. The more descriptive these props + * are, the more accessible your data will be for people using screen readers. + * Any of these props may be overridden by passing in props to the supplied component, + * or modified or ignored within the custom component itself. If a dataComponent is + * not provided, ChartLegend will use the default ChartContainer component. + * + * @example + */ + containerComponent?: React.ReactElement; + /** + * Specify data via the data prop. ChartLegend expects data as an + * array of objects with name (required), symbol, and labels properties. + * The data prop must be given as an array. + */ + data?: { + name?: string; + labels?: { + fill?: string; + }; + symbol?: { + fill?: string; + type?: string; + }; + }[]; + /** + * The dataComponent prop takes a component instance which will be + * responsible for rendering a data element used to associate a symbol + * or color with each data series. The new element created from the + * passed dataComponent will be provided with the following properties + * calculated by ChartLegend: x, y, size, style, and symbol. Any of + * these props may be overridden by passing in props to the supplied + * component, or modified or ignored within the custom component itself. + * If a dataComponent is not provided, ChartLegend will use its + * default Point component. + */ + dataComponent?: React.ReactElement; + /** + * Victory components can pass a datum prop to their label component. This can be used to calculate functional styles, + * and determine child text + */ + datum?: {}; + /** + * The dx prop defines a horizontal shift from the x coordinate. + */ + dx?: NumberOrCallback; + /** + * The dy prop defines a horizontal shift from the y coordinate. + */ + dy?: NumberOrCallback; + /** + * ChartLegend uses the standard eventKey prop to specify how event targets + * are addressed. This prop is not commonly used. + */ + eventKey?: StringOrNumberOrCallback | string[]; + /** + * ChartLegend uses the standard events prop. + */ + events?: EventPropTypeInterface[]; + /** + * ChartLegend uses the standard externalEventMutations prop. + */ + externalEventMutations?: EventCallbackInterface[]; + /** + * The groupComponent prop takes an entire component which will be used to + * create group elements for use within container elements. This prop defaults + * to a tag on web, and a react-native-svg tag on mobile + */ + groupComponent?: React.ReactElement; + /** + * The gutter prop defines the number of pixels between legend rows or + * columns, depending on orientation. When orientation is horizontal, + * gutters are between columns. When orientation is vertical, gutters + * are the space between rows. + */ + gutter?: number | { left: number; right: number }; + /** + * Specifies the height the svg viewBox of the chart container. This value should be given as a + * number of pixels. + * + * Because Victory renders responsive containers, the width and height props do not determine the width and + * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of + * pixels will depend on the size of the container the chart is rendered into. + */ + height?: number; + /** + * The itemsPerRow prop determines how many items to render in each row + * of a horizontal legend, or in each column of a vertical legend. This + * prop should be given as an integer. When this prop is not given, + * legend items will be rendered in a single row or column. + */ + itemsPerRow?: number; + /** + * The labelComponent prop takes a component instance which will be used + * to render each legend label. The new element created from the passed + * labelComponent will be supplied with the following properties: x, y, + * style, and text. Any of these props may be overridden by passing in + * props to the supplied component, or modified or ignored within the + * custom component itself. If labelComponent is omitted, a new + * ChartLabel will be created with the props described above. + */ + labelComponent?: React.ReactElement; + /** + * The orientation prop takes a string that defines whether legend data + * are displayed in a row or column. When orientation is "horizontal", + * legend items will be displayed in a single row. When orientation is + * "vertical", legend items will be displayed in a single column. Line + * and text-wrapping is not currently supported, so "vertical" + * orientation is both the default setting and recommended for + * displaying many series of data. + */ + orientation?: VictoryLegendOrientationType; + /** + * The padding props specifies the amount of padding in number of pixels between + * the edge of the chart and any rendered child components. This prop can be given + * as a number or as an object with padding specified for top, bottom, left + * and right. + */ + padding?: PaddingProps; + /** + * The responsive prop specifies whether the rendered container should be a responsive container with a viewBox + * attribute, or a static container with absolute width and height. + * + * Useful when legend is located inside a chart -- default is false. + * + * Note: Not compatible with containerComponent prop + */ + responsive?: boolean; + /** + * The rowGutter prop defines the number of pixels between legend rows. + * This prop may be given as a number, or as an object with values + * specified for “top” and “bottom” gutters. To set spacing between columns, + * use the gutter prop. + */ + rowGutter?: number | Omit; + /** + * The sharedEvents prop is used internally to coordinate events between components. + * + * **This prop should not be set manually.** + */ + sharedEvents?: { events: any[]; getEventState: Function }; + /** + * The standalone prop determines whether the component will render a standalone svg + * or a tag that will be included in an external svg. Set standalone to false to + * compose ChartLegend with other components within an enclosing tag. + */ + standalone?: boolean; + /** + * The style prop specifies styles for your pie. ChartLegend relies on Radium, + * so valid Radium style objects should work for this prop. Height, width, and + * padding should be specified via the height, width, and padding props. + * + * Note: this may be overridden when ChartLegendTooltip is used as a label component. + * + * @example {data: {stroke: "black"}, label: {fontSize: 10}} + */ + style?: VictoryStyleInterface & { title?: VictoryStyleObject }; + /** + * The symbolSpacer prop defines the number of pixels between data + * components and label components. + */ + symbolSpacer?: number; + /** + * The text prop defines the text ChartTooltip will render. The text prop may be given as a string, number, or + * function of datum. When ChartLabel is used as the labelComponent, strings may include newline characters, which + * ChartLabel will split in to separate elements. + */ + text?: StringOrNumberOrCallback | string[] | number[]; + /** + * The theme prop takes a style object with nested data, labels, and parent objects. + * You can create this object yourself, or you can use a theme provided by + * When using ChartLegend as a solo component, implement the theme directly on + * ChartLegend. If you are wrapping ChartLegend in ChartChart or + * ChartGroup, please call the theme on the outermost wrapper component instead. + */ + theme?: ChartThemeDefinition; + /** + * Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. + * + * Note: Not compatible with theme prop + * + * @example themeColor={ChartThemeColor.blue} + */ + themeColor?: string; + /** + * Specifies the theme variant. Valid values are 'dark' or 'light' + * + * Note: Not compatible with theme prop + * + * @example themeVariant={ChartThemeVariant.light} + */ + themeVariant?: string; + /** + * The title prop specifies a title to render with the legend. + * This prop should be given as a string, or an array of strings for multi-line titles. + * + * Valid types are string, string[], or Function + * + * Example: title={(datum) => datum.x} + */ + title?: string | string[] | Function; + /** + * The titleComponent prop takes a component instance which will be used to render + * a title for the component. The new element created from the passed + * labelComponent will be supplied with the following properties: x, y, index, data, + * datum, verticalAnchor, textAnchor, style, text, and events. Any of these props + * may be overridden by passing in props to the supplied component, or modified + * or ignored within the custom component itself. If labelComponent is omitted, + * a new ChartLabel will be created with the props described above. + */ + titleComponent?: React.ReactElement; + /** + * The titleOrientation prop specifies where the a title should be rendered + * in relation to the rest of the legend. Possible values + * for this prop are “top”, “bottom”, “left”, and “right”. + */ + titleOrientation?: OrientationTypes; + /** + * Specifies the width of the svg viewBox of the chart container. This value should be given as a + * number of pixels. + * + * Because Victory renders responsive containers, the width and height props do not determine the width and + * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of + * pixels will depend on the size of the container the chart is rendered into. + */ + width?: number; + /** + * The x and y props define the base position of the legend element. + */ + x?: number; + /** + * The x and y props define the base position of the legend element. + */ + y?: number; +} + +export const defaultLegendProps = { + borderPadding: 0, + gutter: 0, + orientation: 'vertical' as any, + padding: 0, + rowGutter: -10, + standalone: false, + style: { + labels: { + fill: ChartLegendTooltipStyles.label.fill, + padding: 0 + }, + title: { + fill: ChartLegendTooltipStyles.label.fill, + padding: 0 + } + } +}; + +export const ChartLegendTooltipLegend: React.FunctionComponent = ({ + borderPadding = defaultLegendProps.borderPadding, + data, + datum, + dx = 0, + dy = 0, + gutter = defaultLegendProps.gutter, + labelComponent = , + orientation = defaultLegendProps.orientation, + padding = defaultLegendProps.padding, + rowGutter = defaultLegendProps.rowGutter, + standalone = defaultLegendProps.standalone, + style = defaultLegendProps.style, + text, + themeColor, + themeVariant, + title, + titleComponent = , + x, + y, + + // destructure last + theme = getTheme(themeColor, themeVariant), + ...rest +}: ChartLegendTooltipLegendProps) => { + const offsetY = 10 * (Array.isArray(text) ? text.length : 1); + + // Component offsets + const legendOffsetX = -50; + const legendOffsetY = -offsetY + 5 + (title ? 0 : -10); + const titleOffsetX = -40; + const titleOffsetY = -offsetY; + + // Legend properties + const legendProps = { + borderPadding, + gutter, + orientation, + padding, + rowGutter, + standalone, + style: Array.isArray(style) ? defaultLegendProps.style : style + }; + const emptyLegendDimensions = getLegendTooltipSize({ + legendData: [{ name: '' }], + legendProps, + theme + }); + const maxLegendDimensions = getLegendTooltipSize({ + legendData: data, + legendProps, + text, + theme + }); + const minLegendDimensions = getLegendTooltipSize({ + legendData: data, + legendProps, + theme + }); + + // Returns text prop as legend data so y values can be passed individually to the label component + const getLegendData = () => { + const textEvaluated = Helpers.evaluateProp(text); + const _text = Array.isArray(textEvaluated) ? textEvaluated : [textEvaluated]; + return _text.map((name, index) => ({ name, symbol: data && data[index] ? data[index].symbol : undefined })); + }; + + // Returns the label component + const getLabelComponent = () => + React.cloneElement(labelComponent, { + dx: maxLegendDimensions.width - emptyLegendDimensions.width, + legendData: data, + ...labelComponent.props + }); + + // Returns the title component + const getTitleComponent = () => { + const _title = title instanceof Function ? title(datum) : title; + + return React.cloneElement(titleComponent, { + style: { + fill: ChartLegendTooltipStyles.label.fill, + fontWeight: ChartLegendTooltipStyles.label.fontWeight + }, + text: _title, + textAnchor: 'start', + x: x + titleOffsetX + Helpers.evaluateProp(dx), + y: y + titleOffsetY + Helpers.evaluateProp(dy), + ...titleComponent.props + }); + }; + + return ( + + {getTitleComponent()} + + + ); +}; + +// Note: VictoryLegend.role must be hoisted, but getBaseProps causes error with ChartVoronoiContainer +hoistNonReactStatics(ChartLegendTooltipLegend, VictoryLegend, { getBaseProps: true }); diff --git a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap new file mode 100644 index 00000000000..94ef7c7099b --- /dev/null +++ b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap @@ -0,0 +1,4802 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartLegendTooltip 1`] = ` + + } + text="This is a tooltip" + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#06c", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } + /> + +`; + +exports[`ChartLegendTooltip 2`] = ` + + } + text="This is a tooltip" + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#06c", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } + /> + +`; + +exports[`allows tooltip via container component 1`] = ` +} + rectComponent={} + role="presentation" + shapeRendering="auto" + /> + } + containerComponent={ + } + role="presentation" + shapeRendering="auto" + /> + } + cursorDimension="x" + cursorLabelComponent={ + + } + cursorLabelOffset={ + Object { + "x": 5, + "y": -10, + } + } + desc="Average number of pets" + labelComponent={ + + } + labels={[Function]} + mouseFollowTooltips={true} + portalComponent={} + portalZIndex={99} + responsive={true} + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#4cb140", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#4cb140", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#4cb140", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } + voronoiDimension="x" + voronoiPadding={50} + /> + } + defaultAxes={ + Object { + "dependent": } + role="presentation" + shapeRendering="auto" + type="axis" + /> + } + axisLabelComponent={ + } + tspanComponent={} + /> + } + containerComponent={ + } + portalZIndex={99} + responsive={true} + /> + } + dependentAxis={true} + fixLabelOverlap={false} + gridComponent={ + } + role="presentation" + shapeRendering="auto" + type="grid" + /> + } + groupComponent={ + + } + standalone={true} + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#252525", + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#252525", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 25, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + }, + "tickLabels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 1, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "bar": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#252525", + "padding": 8, + "strokeWidth": 0, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#252525", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#252525", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#252525", + "strokeWidth": 1, + }, + "minLabels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#969696", + "padding": 8, + }, + "q1Labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#969696", + "padding": 8, + }, + "q3Labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#252525", + "positive": "#ffffff", + }, + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#252525", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "#252525", + "strokeWidth": 2, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "histogram": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#969696", + "stroke": "#252525", + "strokeWidth": 2, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "gutter": 10, + "orientation": "vertical", + "style": Object { + "data": Object { + "type": "circle", + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 5, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "#252525", + "strokeWidth": 2, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 400, + "padding": 50, + "style": Object { + "data": Object { + "padding": 10, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 20, + "stroke": "transparent", + }, + }, + "width": 400, + }, + "scatter": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#252525", + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 5, + "flyoutStyle": Object { + "fill": "#f0f0f0", + "pointerEvents": "none", + "stroke": "#252525", + "strokeWidth": 1, + }, + "pointerLength": 10, + "style": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 5, + "pointerEvents": "none", + "stroke": "transparent", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#f0f0f0", + "pointerEvents": "none", + "stroke": "#252525", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 5, + "pointerEvents": "none", + "stroke": "transparent", + }, + }, + "width": 450, + }, + } + } + tickComponent={ + } + role="presentation" + shapeRendering="auto" + type="tick" + /> + } + tickLabelComponent={ + } + tspanComponent={} + /> + } + />, + "independent": } + role="presentation" + shapeRendering="auto" + type="axis" + /> + } + axisLabelComponent={ + } + tspanComponent={} + /> + } + containerComponent={ + } + portalZIndex={99} + responsive={true} + /> + } + fixLabelOverlap={false} + gridComponent={ + } + role="presentation" + shapeRendering="auto" + type="grid" + /> + } + groupComponent={ + + } + standalone={true} + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#252525", + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#252525", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 25, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + }, + "tickLabels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 1, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "bar": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#252525", + "padding": 8, + "strokeWidth": 0, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#252525", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#252525", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#252525", + "strokeWidth": 1, + }, + "minLabels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#969696", + "padding": 8, + }, + "q1Labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#969696", + "padding": 8, + }, + "q3Labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#252525", + "positive": "#ffffff", + }, + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#252525", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "#252525", + "strokeWidth": 2, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "histogram": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#969696", + "stroke": "#252525", + "strokeWidth": 2, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "gutter": 10, + "orientation": "vertical", + "style": Object { + "data": Object { + "type": "circle", + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 5, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "#252525", + "strokeWidth": 2, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 400, + "padding": 50, + "style": Object { + "data": Object { + "padding": 10, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 20, + "stroke": "transparent", + }, + }, + "width": 400, + }, + "scatter": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#252525", + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 5, + "flyoutStyle": Object { + "fill": "#f0f0f0", + "pointerEvents": "none", + "stroke": "#252525", + "strokeWidth": 1, + }, + "pointerLength": 10, + "style": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 5, + "pointerEvents": "none", + "stroke": "transparent", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#f0f0f0", + "pointerEvents": "none", + "stroke": "#252525", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 5, + "pointerEvents": "none", + "stroke": "transparent", + }, + }, + "width": 450, + }, + } + } + tickComponent={ + } + role="presentation" + shapeRendering="auto" + type="tick" + /> + } + tickLabelComponent={ + } + tspanComponent={} + /> + } + />, + } + } + defaultPolarAxes={ + Object { + "dependent": } + role="presentation" + shapeRendering="auto" + type="axis" + /> + } + axisLabelComponent={ + } + tspanComponent={} + /> + } + circularAxisComponent={ + } + role="presentation" + shapeRendering="auto" + type="axis" + /> + } + circularGridComponent={ + } + role="presentation" + shapeRendering="auto" + type="grid" + /> + } + containerComponent={ + } + portalZIndex={99} + responsive={true} + /> + } + dependentAxis={true} + endAngle={360} + gridComponent={ + } + role="presentation" + shapeRendering="auto" + type="grid" + /> + } + groupComponent={ + + } + labelPlacement="parallel" + standalone={true} + startAngle={0} + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#252525", + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#252525", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 25, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + }, + "tickLabels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 1, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "bar": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#252525", + "padding": 8, + "strokeWidth": 0, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#252525", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#252525", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#252525", + "strokeWidth": 1, + }, + "minLabels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#969696", + "padding": 8, + }, + "q1Labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#969696", + "padding": 8, + }, + "q3Labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#252525", + "positive": "#ffffff", + }, + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#252525", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "#252525", + "strokeWidth": 2, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "histogram": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#969696", + "stroke": "#252525", + "strokeWidth": 2, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "gutter": 10, + "orientation": "vertical", + "style": Object { + "data": Object { + "type": "circle", + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 5, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "#252525", + "strokeWidth": 2, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 400, + "padding": 50, + "style": Object { + "data": Object { + "padding": 10, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 20, + "stroke": "transparent", + }, + }, + "width": 400, + }, + "scatter": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#252525", + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 5, + "flyoutStyle": Object { + "fill": "#f0f0f0", + "pointerEvents": "none", + "stroke": "#252525", + "strokeWidth": 1, + }, + "pointerLength": 10, + "style": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 5, + "pointerEvents": "none", + "stroke": "transparent", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#f0f0f0", + "pointerEvents": "none", + "stroke": "#252525", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 5, + "pointerEvents": "none", + "stroke": "transparent", + }, + }, + "width": 450, + }, + } + } + tickComponent={ + } + role="presentation" + shapeRendering="auto" + type="tick" + /> + } + tickLabelComponent={ + } + tspanComponent={} + /> + } + />, + "independent": } + role="presentation" + shapeRendering="auto" + type="axis" + /> + } + axisLabelComponent={ + } + tspanComponent={} + /> + } + circularAxisComponent={ + } + role="presentation" + shapeRendering="auto" + type="axis" + /> + } + circularGridComponent={ + } + role="presentation" + shapeRendering="auto" + type="grid" + /> + } + containerComponent={ + } + portalZIndex={99} + responsive={true} + /> + } + endAngle={360} + gridComponent={ + } + role="presentation" + shapeRendering="auto" + type="grid" + /> + } + groupComponent={ + + } + labelPlacement="parallel" + standalone={true} + startAngle={0} + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#252525", + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#252525", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 25, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + }, + "tickLabels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 1, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "bar": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#252525", + "padding": 8, + "strokeWidth": 0, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#252525", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#252525", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#252525", + "strokeWidth": 1, + }, + "minLabels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#969696", + "padding": 8, + }, + "q1Labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#969696", + "padding": 8, + }, + "q3Labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#252525", + "positive": "#ffffff", + }, + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#252525", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "#252525", + "strokeWidth": 2, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "histogram": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#969696", + "stroke": "#252525", + "strokeWidth": 2, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "gutter": 10, + "orientation": "vertical", + "style": Object { + "data": Object { + "type": "circle", + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 5, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "#252525", + "strokeWidth": 2, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 400, + "padding": 50, + "style": Object { + "data": Object { + "padding": 10, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 20, + "stroke": "transparent", + }, + }, + "width": 400, + }, + "scatter": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#252525", + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 5, + "flyoutStyle": Object { + "fill": "#f0f0f0", + "pointerEvents": "none", + "stroke": "#252525", + "strokeWidth": 1, + }, + "pointerLength": 10, + "style": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 5, + "pointerEvents": "none", + "stroke": "transparent", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#252525", + "#525252", + "#737373", + "#969696", + "#bdbdbd", + "#d9d9d9", + "#f0f0f0", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#f0f0f0", + "pointerEvents": "none", + "stroke": "#252525", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#252525", + "fontFamily": "'Gill Sans', 'Gill Sans MT', 'Seravek', 'Trebuchet MS', sans-serif", + "fontSize": 14, + "letterSpacing": "normal", + "padding": 5, + "pointerEvents": "none", + "stroke": "transparent", + }, + }, + "width": 450, + }, + } + } + tickComponent={ + } + role="presentation" + shapeRendering="auto" + type="tick" + /> + } + tickLabelComponent={ + } + tspanComponent={} + /> + } + />, + } + } + groupComponent={} + height={275} + maxDomain={ + Object { + "y": 10, + } + } + minDomain={ + Object { + "y": 0, + } + } + padding={ + Object { + "bottom": 75, + "left": 50, + "right": 50, + "top": 50, + } + } + standalone={true} + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#4cb140", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#4cb140", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#4cb140", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#4cb140", + "#bde2b9", + "#23511e", + "#7cc674", + "#38812f", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } + width={450} +> + + + + + + + + + + +`; diff --git a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap new file mode 100644 index 00000000000..7a2d393dba4 --- /dev/null +++ b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap @@ -0,0 +1,73 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartLegendTooltipLabel 1`] = ` + + + + +`; + +exports[`ChartLegendTooltipLabel 2`] = ` + + + + +`; + +exports[`renders component text 1`] = ` + + + + +`; diff --git a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLegend.test.tsx.snap b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLegend.test.tsx.snap new file mode 100644 index 00000000000..d7740d748d2 --- /dev/null +++ b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLegend.test.tsx.snap @@ -0,0 +1,1520 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartLegendTooltipLegend 1`] = ` + + + + } + orientation="vertical" + padding={0} + rowGutter={-10} + standalone={false} + style={ + Object { + "labels": Object { + "fill": "#f0f0f0", + "padding": 0, + }, + "title": Object { + "fill": "#f0f0f0", + "padding": 0, + }, + } + } + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#06c", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } + x={NaN} + y={NaN} + /> + +`; + +exports[`ChartLegendTooltipLegend 2`] = ` + + + + } + orientation="vertical" + padding={0} + rowGutter={-10} + standalone={false} + style={ + Object { + "labels": Object { + "fill": "#f0f0f0", + "padding": 0, + }, + "title": Object { + "fill": "#f0f0f0", + "padding": 0, + }, + } + } + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#06c", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } + x={NaN} + y={NaN} + /> + +`; + +exports[`renders component text 1`] = ` + + + + } + orientation="vertical" + padding={0} + rowGutter={-10} + standalone={false} + style={ + Object { + "labels": Object { + "fill": "#f0f0f0", + "padding": 0, + }, + "title": Object { + "fill": "#f0f0f0", + "padding": 0, + }, + } + } + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#06c", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } + x={NaN} + y={NaN} + /> + +`; diff --git a/packages/react-charts/src/components/ChartLegendTooltip/index.ts b/packages/react-charts/src/components/ChartLegendTooltip/index.ts new file mode 100644 index 00000000000..7d1977c08b8 --- /dev/null +++ b/packages/react-charts/src/components/ChartLegendTooltip/index.ts @@ -0,0 +1,3 @@ +export * from './ChartLegendTooltip'; +export * from './ChartLegendTooltipLabel'; +export * from './ChartLegendTooltipLegend'; diff --git a/packages/react-charts/src/components/ChartLine/examples/ChartLine.md b/packages/react-charts/src/components/ChartLine/examples/ChartLine.md index 28754c1de96..7210dfecca5 100644 --- a/packages/react-charts/src/components/ChartLine/examples/ChartLine.md +++ b/packages/react-charts/src/components/ChartLine/examples/ChartLine.md @@ -12,7 +12,7 @@ propComponents: [ hideDarkMode: true --- -import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartThemeVariant, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts'; +import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartLegendTooltip, ChartThemeVariant, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts'; import { VictoryZoomContainer } from 'victory'; ## Introduction @@ -97,12 +97,13 @@ BasicRightAligned = ( ```js title=Green-with-bottom-aligned-legend import React from 'react'; -import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts'; +import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts'; class BottomAlignedLegend extends React.Component { render() { // Note: Container order is important const CursorVoronoiContainer = createContainer("cursor", "voronoi"); + const legendData = [{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }, { name: 'Mice' }]; return (
@@ -113,15 +114,15 @@ class BottomAlignedLegend extends React.Component { ariaTitle="Line chart example" containerComponent={ `${datum.name}: ${datum.y}`} + labels={({ datum }) => `${datum.y}`} + labelComponent={ datum.x}/>} mouseFollowTooltips voronoiDimension="x" voronoiPadding={50} /> } - legendData={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }, { name: 'Mice' }]} + legendData={legendData} legendPosition="bottom" height={275} maxDomain={{y: 10}} diff --git a/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap b/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap index 329e5e19835..0decacf723d 100644 --- a/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap +++ b/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap @@ -475,15 +475,7 @@ exports[`ChartPoint 1`] = ` } dataComponent={} groupComponent={} - labelComponent={ - } - tspanComponent={} - /> - } + labelComponent={} standalone={true} theme={ Object { @@ -934,15 +926,7 @@ exports[`ChartPoint 1`] = ` }, } } - titleComponent={ - } - tspanComponent={} - /> - } + titleComponent={} /> `; @@ -1421,15 +1405,7 @@ exports[`ChartPoint 2`] = ` } dataComponent={} groupComponent={} - labelComponent={ - } - tspanComponent={} - /> - } + labelComponent={} standalone={true} theme={ Object { @@ -1880,15 +1856,7 @@ exports[`ChartPoint 2`] = ` }, } } - titleComponent={ - } - tspanComponent={} - /> - } + titleComponent={} /> `; @@ -2371,15 +2339,7 @@ exports[`renders component data 1`] = ` dataComponent={} groupComponent={} height={50} - labelComponent={ - } - tspanComponent={} - /> - } + labelComponent={} standalone={true} theme={ Object { @@ -2831,15 +2791,7 @@ exports[`renders component data 1`] = ` } } title="Average number of pets" - titleComponent={ - } - tspanComponent={} - /> - } + titleComponent={} width={200} /> `; diff --git a/packages/react-charts/src/components/ChartTheme/ChartStyles.ts b/packages/react-charts/src/components/ChartTheme/ChartStyles.ts index bae0ec576d2..e88bf0b6828 100644 --- a/packages/react-charts/src/components/ChartTheme/ChartStyles.ts +++ b/packages/react-charts/src/components/ChartTheme/ChartStyles.ts @@ -2,10 +2,12 @@ import { CommonStyles } from './styles/common-styles'; import { BulletStyles } from './styles/bullet-styles'; import { DonutStyles } from './styles/donut-styles'; import { DonutUtilizationStyles } from './styles/donut-utilization-styles'; +import { LegendTooltipStyles } from './styles/legend-tooltip-styles'; import { ScatterStyles } from './styles/scatter-styles'; export const ChartCommonStyles = CommonStyles; export const ChartBulletStyles = BulletStyles; export const ChartDonutStyles = DonutStyles; export const ChartDonutUtilizationStyles = DonutUtilizationStyles; +export const ChartLegendTooltipStyles = LegendTooltipStyles; export const ChartScatterStyles = ScatterStyles; diff --git a/packages/react-charts/src/components/ChartTheme/styles/legend-tooltip-styles.ts b/packages/react-charts/src/components/ChartTheme/styles/legend-tooltip-styles.ts new file mode 100644 index 00000000000..2d76a53fc48 --- /dev/null +++ b/packages/react-charts/src/components/ChartTheme/styles/legend-tooltip-styles.ts @@ -0,0 +1,14 @@ +/* eslint-disable camelcase */ +import global_FontWeight_bold from '@patternfly/react-tokens/dist/js/global_FontWeight_bold'; +import chart_voronoi_labels_Fill from '@patternfly/react-tokens/dist/js/chart_voronoi_labels_Fill'; + +// Legend tooltip styles +export const LegendTooltipStyles = { + flyout: { + padding: 40 + }, + label: { + fill: chart_voronoi_labels_Fill.value, + fontWeight: global_FontWeight_bold.value + } as any +}; diff --git a/packages/react-charts/src/components/ChartTooltip/ChartCursorFlyout.test.tsx b/packages/react-charts/src/components/ChartTooltip/ChartCursorFlyout.test.tsx new file mode 100644 index 00000000000..61198f92b1e --- /dev/null +++ b/packages/react-charts/src/components/ChartTooltip/ChartCursorFlyout.test.tsx @@ -0,0 +1,49 @@ +import * as React from 'react'; +import { shallow } from 'enzyme'; +import { ChartArea } from '../ChartArea'; +import { ChartGroup } from '../ChartGroup'; +import { ChartCursorFlyout } from './ChartCursorFlyout'; +import { ChartCursorTooltip } from './ChartCursorTooltip'; +import { createContainer } from '../ChartUtils'; + +Object.values([true, false]).forEach(() => { + test('ChartTooltip', () => { + const view = shallow(} />); + expect(view).toMatchSnapshot(); + }); +}); + +test('allows tooltip via container component', () => { + const CursorVoronoiContainer = createContainer('cursor', 'voronoi'); + const view = shallow( + 'y: ' + point.y} + labelComponent={} />} + /> + } + height={200} + width={200} + > + + + + ); + expect(view).toMatchSnapshot(); +}); diff --git a/packages/react-charts/src/components/ChartTooltip/ChartCursorFlyout.tsx b/packages/react-charts/src/components/ChartTooltip/ChartCursorFlyout.tsx new file mode 100644 index 00000000000..8ca36e64d8f --- /dev/null +++ b/packages/react-charts/src/components/ChartTooltip/ChartCursorFlyout.tsx @@ -0,0 +1,131 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Helpers, CommonProps, Path } from 'victory-core'; +import { isPlainObject, assign } from 'lodash'; + +const getVerticalPath = (props: any) => { + const { pointerWidth, cornerRadius, orientation, width, height, center } = props; + const sign = orientation === 'bottom' ? 1 : -1; + const x = props.x + (props.dx || 0); + // const y = props.y + (props.dy || 0); + const centerX = isPlainObject(center) && center.x; + const centerY = isPlainObject(center) && center.y; + const pointerEdge = centerY + sign * (height / 2); + const oppositeEdge = centerY - sign * (height / 2); + const rightEdge = centerX + width / 2; + const leftEdge = centerX - width / 2; + + // This has been overridden so the pointer does not stick to data points -- want pointerLength to take precedence + const y = + orientation === 'bottom' + ? pointerEdge + props.pointerLength + (props.dy || 0) + : pointerEdge - props.pointerLength + (props.dy || 0); + + const pointerLength = sign * (y - pointerEdge) < 0 ? 0 : props.pointerLength; + const direction = orientation === 'bottom' ? '0 0 0' : '0 0 1'; + const arc = `${cornerRadius} ${cornerRadius} ${direction}`; + return `M ${centerX - pointerWidth / 2}, ${pointerEdge} + L ${pointerLength ? x : centerX + pointerWidth / 2}, ${pointerLength ? y : pointerEdge} + L ${centerX + pointerWidth / 2}, ${pointerEdge} + L ${rightEdge - cornerRadius}, ${pointerEdge} + A ${arc} ${rightEdge}, ${pointerEdge - sign * cornerRadius} + L ${rightEdge}, ${oppositeEdge + sign * cornerRadius} + A ${arc} ${rightEdge - cornerRadius}, ${oppositeEdge} + L ${leftEdge + cornerRadius}, ${oppositeEdge} + A ${arc} ${leftEdge}, ${oppositeEdge + sign * cornerRadius} + L ${leftEdge}, ${pointerEdge - sign * cornerRadius} + A ${arc} ${leftEdge + cornerRadius}, ${pointerEdge} + z`; +}; + +const getHorizontalPath = (props: any) => { + const { pointerWidth, cornerRadius, orientation, width, height, center } = props; + const sign = orientation === 'left' ? 1 : -1; + // const x = props.x + (props.dx || 0); + const y = props.y + (props.dy || 0); + const centerX = isPlainObject(center) && center.x; + const centerY = isPlainObject(center) && center.y; + const pointerEdge = centerX - sign * (width / 2); + const oppositeEdge = centerX + sign * (width / 2); + const bottomEdge = centerY + height / 2; + const topEdge = centerY - height / 2; + + // This has been overridden so the pointer does not stick to data points -- want pointerLength to take precedence + const x = + orientation === 'left' + ? pointerEdge - props.pointerLength + (props.dx || 0) + : pointerEdge + props.pointerLength + (props.dx || 0); + + const pointerLength = sign * (x - pointerEdge) > 0 ? 0 : props.pointerLength; + const direction = orientation === 'left' ? '0 0 0' : '0 0 1'; + const arc = `${cornerRadius} ${cornerRadius} ${direction}`; + return `M ${pointerEdge}, ${centerY - pointerWidth / 2} + L ${pointerLength ? x : pointerEdge}, ${pointerLength ? y : centerY + pointerWidth / 2} + L ${pointerEdge}, ${centerY + pointerWidth / 2} + L ${pointerEdge}, ${bottomEdge - cornerRadius} + A ${arc} ${pointerEdge + sign * cornerRadius}, ${bottomEdge} + L ${oppositeEdge - sign * cornerRadius}, ${bottomEdge} + A ${arc} ${oppositeEdge}, ${bottomEdge - cornerRadius} + L ${oppositeEdge}, ${topEdge + cornerRadius} + A ${arc} ${oppositeEdge - sign * cornerRadius}, ${topEdge} + L ${pointerEdge + sign * cornerRadius}, ${topEdge} + A ${arc} ${pointerEdge}, ${topEdge + cornerRadius} + z`; +}; + +const getFlyoutPath = (props: any) => { + const orientation = props.orientation || 'top'; + return orientation === 'left' || orientation === 'right' ? getHorizontalPath(props) : getVerticalPath(props); +}; + +const evaluateProps = (props: any) => { + /** + * Potential evaluated props are: + * `id` + * `style` + */ + const id = Helpers.evaluateProp(props.id, props); + const style = Helpers.evaluateStyle(props.style, props); + + return assign({}, props, { id, style }); +}; + +const ChartCursorFlyout = (props: any) => { + props = evaluateProps(props); + + return React.cloneElement(props.pathComponent, { + ...props.events, + style: props.style, + d: getFlyoutPath(props), + className: props.className, + shapeRendering: props.shapeRendering, + role: props.role, + transform: props.transform, + clipPath: props.clipPath + }); +}; + +ChartCursorFlyout.propTypes = { + ...CommonProps.primitiveProps, + center: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }), + cornerRadius: PropTypes.number, + datum: PropTypes.object, + dx: PropTypes.number, + dy: PropTypes.number, + height: PropTypes.number, + orientation: PropTypes.oneOf(['top', 'bottom', 'left', 'right']), + pathComponent: PropTypes.element, + pointerLength: PropTypes.number, + pointerWidth: PropTypes.number, + width: PropTypes.number, + x: PropTypes.number, + y: PropTypes.number +}; + +ChartCursorFlyout.defaultProps = { + pathComponent: , + role: 'presentation', + shapeRendering: 'auto' +}; + +export { ChartCursorFlyout }; diff --git a/packages/react-charts/src/components/ChartTooltip/ChartCursorTooltip.test.tsx b/packages/react-charts/src/components/ChartTooltip/ChartCursorTooltip.test.tsx new file mode 100644 index 00000000000..fd2d5079e18 --- /dev/null +++ b/packages/react-charts/src/components/ChartTooltip/ChartCursorTooltip.test.tsx @@ -0,0 +1,45 @@ +import * as React from 'react'; +import { shallow } from 'enzyme'; +import { ChartArea } from '../ChartArea'; +import { ChartGroup } from '../ChartGroup'; +import { ChartCursorTooltip } from './ChartCursorTooltip'; +import { createContainer } from '../ChartUtils'; + +Object.values([true, false]).forEach(() => { + test('ChartCursorTooltip', () => { + const view = shallow(); + expect(view).toMatchSnapshot(); + }); +}); + +test('allows tooltip via container component', () => { + const CursorVoronoiContainer = createContainer('cursor', 'voronoi'); + const view = shallow( + 'y: ' + point.y} labelComponent={} /> + } + height={200} + width={200} + > + + + + ); + expect(view).toMatchSnapshot(); +}); diff --git a/packages/react-charts/src/components/ChartTooltip/ChartCursorTooltip.tsx b/packages/react-charts/src/components/ChartTooltip/ChartCursorTooltip.tsx new file mode 100644 index 00000000000..07e59a0c751 --- /dev/null +++ b/packages/react-charts/src/components/ChartTooltip/ChartCursorTooltip.tsx @@ -0,0 +1,267 @@ +import * as React from 'react'; +import hoistNonReactStatics from 'hoist-non-react-statics'; +import { + NumberOrCallback, + OrientationTypes, + StringOrNumberOrCallback, + TextAnchorType, + VictoryNumberCallback, + VictoryStyleObject +} from 'victory-core'; +import { VictoryTooltip } from 'victory-tooltip'; +import { ChartLabel } from '../ChartLabel'; +import { ChartThemeDefinition } from '../ChartTheme'; +import { ChartTooltip, ChartTooltipProps } from '../ChartTooltip'; +import { getTheme, getCursorTooltipCenterOffset, getCursorTooltipPoniterOrientation } from '../ChartUtils'; +import { ChartCursorFlyout } from './ChartCursorFlyout'; + +/** + * This tooltip has default values intended for use with a cursor container. + * + * See https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/victory/index.d.ts + */ +export interface ChartCursorTooltipProps extends ChartTooltipProps { + /** + * The active prop specifies whether the tooltip component should be displayed. + */ + active?: boolean; + /** + * When true, tooltip events will set the active prop on both data and label elements. + */ + activateData?: boolean; + /** + * The angle prop specifies the angle to rotate the tooltip around its origin point. + */ + angle?: string | number; + /** + * The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object + * that describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for + * positioning the flyout of a tooltip independent from the pointer. When ChartTooltip is used with + * ChartVoronoiContainer, the center prop is what enables the mouseFollowTooltips option. When this prop is set, + * non-zero pointerLength values will no longer be respected. + */ + center?: { x: number; y: number }; + /** + * The centerOffset prop determines the position of the center of the tooltip flyout in relation to the flyout + * pointer. This prop should be given as an object of x and y, where each is either a numeric offset value or a + * function that returns a numeric value. When this prop is set, non-zero pointerLength values will no longer be + * respected. + */ + centerOffset?: { + x?: NumberOrCallback; + y?: NumberOrCallback; + }; + /** + * The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of + * the chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the + * center of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders. + */ + constrainToVisibleArea?: boolean; + /** + * The cornerRadius prop determines corner radius of the flyout container. This prop may be given as a positive number + * or a function of datum. + */ + cornerRadius?: NumberOrCallback; + /** + * Victory components can pass a data prop to their label component. This can be useful in custom components that need + * to make use of the entire dataset. + */ + data?: any[]; + /** + * Victory components can pass a datum prop to their label component. This can be used to calculate functional styles, + * and determine text. + */ + datum?: {}; + /** + * The dx prop defines a horizontal shift from the x coordinate. + */ + dx?: NumberOrCallback; + /** + * The dy prop defines a vertical shift from the y coordinate. + */ + dy?: NumberOrCallback; + /** + * The events prop attaches arbitrary event handlers to the label component. This prop should be given as an object of + * event names and corresponding event handlers. When events are provided via Victory’s event system, event handlers + * will be called with the event, the props of the component is attached to, and an eventKey. + * Examples: events={{onClick: (evt) => alert("x: " + evt.clientX)}} + */ + events?: { [key: string]: (event: React.SyntheticEvent) => void }; + /** + * The flyoutComponent prop takes a component instance which will be used to create the flyout path for each tooltip. + * The new element created from the passed flyoutComponent will be supplied with the following properties: x, y, dx, dy, + * index, datum, cornerRadius, pointerLength, pointerWidth, width, height, orientation, style, and events. + * Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within + * the custom component itself. If flyoutComponent is omitted, a default Flyout component will be created with props + * described above. + * Examples: flyoutComponent={}, flyoutComponent={} + */ + flyoutComponent?: React.ReactElement; + /** + * The flyoutHeight prop defines the height of the tooltip flyout. This prop may be given as a positive number or a function + * of datum. If this prop is not set, height will be determined based on an approximate text size calculated from the + * text and style props provided to ChartTooltip. + */ + flyoutHeight?: NumberOrCallback; + /** + * The style prop applies SVG style properties to the rendered flyout container. These props will be passed to the + * flyoutComponent. + */ + flyoutStyle?: VictoryStyleObject; + /** + * The flyoutWidth prop defines the width of the tooltip flyout. This prop may be given as a positive number or a + * function of datum. If this prop is not set, flyoutWidth will be determined based on an approximate text size + * calculated from the text and style props provided to VictoryTooltip. + */ + flyoutWidth?: NumberOrCallback; + /** + * The groupComponent prop takes a component instance which will be used to create group elements for use within + * container elements. This prop defaults to a tag.} + */ + groupComponent?: React.ReactElement; + /** + * This prop refers to the height of the svg that VictoryLabel is rendered within. This prop is passed from parents + * of VictoryLabel, and should not be set manually. In versions before ^33.0.0 this prop referred to the height of the + * tooltip flyout. Please use flyoutHeight instead + * + * **This prop should not be set manually.** + */ + height?: number; + /** + * The horizontal prop determines whether to plot the flyouts to the left / right of the (x, y) coordinate rather than top / bottom. + * This is useful when an orientation prop is not provided, and data will determine the default orientation. i.e. + * negative values result in a left orientation and positive values will result in a right orientation by default. + */ + horizontal?: boolean; + /** + * The index prop represents the index of the datum in the data array. + */ + index?: number | string; + /** + * The labelComponent prop takes a component instance which will be used to render each tooltip label. The new element + * created from the passed labelComponent will be supplied with the following properties: x, y, index, datum, + * verticalAnchor, textAnchor, style, text, and events. Any of these props may be overridden by passing in props to + * the supplied component, or modified or ignored within the custom component itself. If labelComponent is omitted, a + * new ChartLabel will be created with the props described above. + * Examples: labelComponent={}, labelComponent={} + */ + labelComponent?: React.ReactElement; + /** + * Defines how the labelComponent text is horizontally positioned relative to its `x` and `y` coordinates. Valid + * values are 'start' (default), 'middle', 'end', and 'inherit'. Note that this overrides the style prop. + */ + labelTextAnchor?: TextAnchorType | (() => TextAnchorType); + /** + * The orientation prop determines which side of the (x, y) coordinate the tooltip should be rendered on. + * This prop can be given as “top”, “bottom”, “left”, “right”, or as a function of datum that returns one of these + * values. If this prop is not provided it will be determined from the sign of the datum, and the value of the + * horizontal prop. + */ + orientation?: OrientationTypes | VictoryNumberCallback; + /** + * The pointerLength prop determines the length of the triangular pointer extending from the flyout. This prop may be + * given as a positive number or a function of datum. + */ + pointerLength?: NumberOrCallback; + /** + * This prop determines which side of the tooltip flyout the pointer should originate on. When this prop is not set, + * it will be determined based on the overall orientation of the flyout in relation to its data point, and any center + * or centerOffset values. Valid values are 'top', 'bottom', 'left' and 'right. + */ + pointerOrientation?: OrientationTypes | ((...args: any[]) => OrientationTypes); + /** + * The pointerWidth prop determines the width of the base of the triangular pointer extending from + * the flyout. This prop may be given as a positive number or a function of datum. + */ + pointerWidth?: NumberOrCallback; + /** + * When renderInPortal is true, rendered tooltips will be wrapped in VictoryPortal and rendered within the Portal element + * within ChartContainer. Note: This prop should not be set to true when using a custom container element. + */ + renderInPortal?: boolean; + /** + * The style prop applies CSS properties to the rendered `` element. + */ + style?: React.CSSProperties | React.CSSProperties[]; + /** + * The text prop defines the text ChartTooltip will render. The text prop may be given as a string, number, or + * function of datum. When ChartLabel is used as the labelComponent, strings may include newline characters, which + * ChartLabel will split in to separate elements. + */ + text?: StringOrNumberOrCallback | string[] | number[]; + /** + * The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or + * props defined in theme may be overwritten by props specified on the component instance. + */ + theme?: ChartThemeDefinition; + /** + * Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. + * + * Note: Not compatible with theme prop + * + * @example themeColor={ChartThemeColor.blue} + */ + themeColor?: string; + /** + * Specifies the theme variant. Valid values are 'dark' or 'light' + * + * Note: Not compatible with theme prop + * + * @example themeVariant={ChartThemeVariant.light} + */ + themeVariant?: string; + /** + * The x prop defines the x coordinate to use as a basis for horizontal positioning. + */ + x?: number; + /** + * The y prop defines the y coordinate to use as a basis for vertical positioning. + */ + y?: number; +} + +export const ChartCursorTooltip: React.FunctionComponent = ({ + constrainToVisibleArea = true, + labelComponent = , + labelTextAnchor = 'start', + style, + themeColor, + themeVariant, + + // destructure last + theme = getTheme(themeColor, themeVariant), + centerOffset = getCursorTooltipCenterOffset({ offsetCursorDimensionX: true, theme }), + pointerOrientation = getCursorTooltipPoniterOrientation({ horizontal: true, theme }), + pointerLength = theme.tooltip.pointerLength, + pointerWidth = (theme.tooltip as any).pointerWidth, + ...rest +}: ChartCursorTooltipProps) => { + // Apply text anchor style + const applyDefaultStyle = (customStyle: React.CSSProperties) => ({ + ...customStyle, + textAnchor: labelTextAnchor // Workaround for VictoryTooltip.getLabelProps referencing the theme style only + }); + const newStyle: any = Array.isArray(style) ? style.map(applyDefaultStyle) : applyDefaultStyle(style); + + return ( + 0 ? pointerLength : theme.tooltip.pointerLength} + pointerWidth={pointerWidth} + /> + } + labelComponent={labelComponent} + labelTextAnchor={labelTextAnchor} + pointerOrientation={pointerOrientation} + style={newStyle} + theme={theme} + {...rest} + /> + ); +}; + +// Note: VictoryTooltip.defaultEvents must be hoisted +hoistNonReactStatics(ChartCursorTooltip, VictoryTooltip); diff --git a/packages/react-charts/src/components/ChartTooltip/ChartTooltip.tsx b/packages/react-charts/src/components/ChartTooltip/ChartTooltip.tsx index 109a8b13aff..f657c8116f9 100644 --- a/packages/react-charts/src/components/ChartTooltip/ChartTooltip.tsx +++ b/packages/react-charts/src/components/ChartTooltip/ChartTooltip.tsx @@ -229,6 +229,7 @@ export const ChartTooltip: React.FunctionComponent = ({ }: ChartTooltipProps) => { const chartLabelComponent = React.cloneElement(labelComponent, { textAnchor: labelTextAnchor, + theme, ...labelComponent.props }); diff --git a/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap b/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap new file mode 100644 index 00000000000..08292be4643 --- /dev/null +++ b/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap @@ -0,0 +1,1963 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartTooltip 1`] = ` +} + role="presentation" + shapeRendering="auto" + /> + } + labelComponent={} + labelTextAnchor="start" + pointerOrientation={[Function]} + style={ + Object { + "textAnchor": "start", + } + } + text="This is a tooltip" + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#06c", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } +/> +`; + +exports[`ChartTooltip 2`] = ` +} + role="presentation" + shapeRendering="auto" + /> + } + labelComponent={} + labelTextAnchor="start" + pointerOrientation={[Function]} + style={ + Object { + "textAnchor": "start", + } + } + text="This is a tooltip" + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#06c", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } +/> +`; + +exports[`allows tooltip via container component 1`] = ` +} + role="presentation" + shapeRendering="auto" + /> + } + cursorLabelComponent={ + + } + cursorLabelOffset={ + Object { + "x": 5, + "y": -10, + } + } + labelComponent={ + } + role="presentation" + shapeRendering="auto" + /> + } + /> + } + labels={[Function]} + portalComponent={} + portalZIndex={99} + responsive={true} + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#06c", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } + voronoiPadding={5} + /> + } + groupComponent={} + height={200} + samples={50} + sortOrder="ascending" + standalone={true} + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#06c", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } + width={200} +> + + + +`; diff --git a/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap new file mode 100644 index 00000000000..d99e1a3de3d --- /dev/null +++ b/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap @@ -0,0 +1,1957 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartCursorTooltip 1`] = ` +} + pointerLength={10} + pointerWidth={20} + role="presentation" + shapeRendering="auto" + /> + } + labelComponent={} + labelTextAnchor="start" + pointerOrientation={[Function]} + style={ + Object { + "textAnchor": "start", + } + } + text="This is a tooltip" + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#06c", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } +/> +`; + +exports[`ChartCursorTooltip 2`] = ` +} + pointerLength={10} + pointerWidth={20} + role="presentation" + shapeRendering="auto" + /> + } + labelComponent={} + labelTextAnchor="start" + pointerOrientation={[Function]} + style={ + Object { + "textAnchor": "start", + } + } + text="This is a tooltip" + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#06c", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } +/> +`; + +exports[`allows tooltip via container component 1`] = ` +} + role="presentation" + shapeRendering="auto" + /> + } + cursorLabelComponent={ + + } + cursorLabelOffset={ + Object { + "x": 5, + "y": -10, + } + } + labelComponent={} + labels={[Function]} + portalComponent={} + portalZIndex={99} + responsive={true} + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#06c", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } + voronoiPadding={5} + /> + } + groupComponent={} + height={200} + samples={50} + sortOrder="ascending" + standalone={true} + theme={ + Object { + "area": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "fillOpacity": 0.3, + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "axis": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "axis": Object { + "fill": "transparent", + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + "axisLabel": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 40, + "stroke": "transparent", + "textAnchor": "middle", + }, + "grid": Object { + "fill": "none", + "pointerEvents": "painted", + "stroke": "none", + "strokeLinecap": "round", + "strokeLinejoin": "round", + }, + "tickLabels": Object { + "fill": "#4f5255", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "ticks": Object { + "fill": "transparent", + "size": 5, + "stroke": "#d2d2d2", + "strokeLinecap": "round", + "strokeLinejoin": "round", + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "bar": Object { + "barWidth": 10, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#06c", + "padding": 8, + "stroke": "none", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "boxplot": Object { + "boxWidth": 20, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "max": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "maxLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "median": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "medianLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "min": Object { + "padding": 8, + "stroke": "#151515", + "strokeWidth": 1, + }, + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "title": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 2, + "stroke": "transparent", + }, + }, + "titleOrientation": "top", + }, + "line": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#06c", + "strokeWidth": 2, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "pie": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, + }, + "scatter": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "#151515", + "opacity": 1, + "stroke": "transparent", + "strokeWidth": 0, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "stack": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, + "width": 450, + }, + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } + width={200} +> + + + +`; diff --git a/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap index 407389826d6..fda5e85155e 100644 --- a/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap +++ b/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap @@ -12,7 +12,459 @@ exports[`ChartTooltip 1`] = ` /> } groupComponent={} - labelComponent={} + labelComponent={ + + } renderInPortal={true} text="This is a tooltip" theme={ @@ -165,43 +617,153 @@ exports[`ChartTooltip 1`] = ` "stroke": "#151515", "strokeWidth": 1, }, - "minLabels": Object { + "minLabels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q1": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q1Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + "q3": Object { + "fill": "#8a8d90", + "padding": 8, + }, + "q3Labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + }, + }, + "width": 450, + }, + "candlestick": Object { + "candleColors": Object { + "negative": "#151515", + "positive": "#fff", + }, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 10, + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + "chart": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "errorbar": Object { + "borderWidth": 8, + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "style": Object { + "data": Object { + "fill": "transparent", + "opacity": 1, + "stroke": "#151515", + "strokeWidth": 2, + }, + "labels": Object { "fontFamily": "var(--pf-chart-global--FontFamily)", "fontSize": 14, "letterSpacing": "var(--pf-chart-global--letter-spacing)", "padding": 10, "stroke": "transparent", + "textAnchor": "middle", }, - "q1": Object { - "fill": "#8a8d90", - "padding": 8, + }, + "width": 450, + }, + "group": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "height": 300, + "padding": 50, + "width": 450, + }, + "legend": Object { + "colorScale": Array [ + "#06c", + "#8bc1f7", + "#002f5d", + "#519de9", + "#004b95", + ], + "gutter": 20, + "orientation": "horizontal", + "style": Object { + "data": Object { + "type": "square", }, - "q1Labels": Object { + "labels": Object { "fontFamily": "var(--pf-chart-global--FontFamily)", "fontSize": 14, "letterSpacing": "var(--pf-chart-global--letter-spacing)", "padding": 10, "stroke": "transparent", }, - "q3": Object { - "fill": "#8a8d90", - "padding": 8, - }, - "q3Labels": Object { + "title": Object { "fontFamily": "var(--pf-chart-global--FontFamily)", "fontSize": 14, "letterSpacing": "var(--pf-chart-global--letter-spacing)", - "padding": 10, + "padding": 2, "stroke": "transparent", }, }, - "width": 450, + "titleOrientation": "top", }, - "candlestick": Object { - "candleColors": Object { - "negative": "#151515", - "positive": "#fff", - }, + "line": Object { "colorScale": Array [ "#06c", "#8bc1f7", @@ -213,8 +775,10 @@ exports[`ChartTooltip 1`] = ` "padding": 50, "style": Object { "data": Object { - "stroke": "#151515", - "strokeWidth": 1, + "fill": "transparent", + "opacity": 1, + "stroke": "#06c", + "strokeWidth": 2, }, "labels": Object { "fontFamily": "var(--pf-chart-global--FontFamily)", @@ -227,7 +791,7 @@ exports[`ChartTooltip 1`] = ` }, "width": 450, }, - "chart": Object { + "pie": Object { "colorScale": Array [ "#06c", "#8bc1f7", @@ -235,12 +799,25 @@ exports[`ChartTooltip 1`] = ` "#519de9", "#004b95", ], - "height": 300, - "padding": 50, - "width": 450, + "height": 230, + "padding": 20, + "style": Object { + "data": Object { + "padding": 8, + "stroke": "transparent", + "strokeWidth": 1, + }, + "labels": Object { + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "stroke": "transparent", + }, + }, + "width": 230, }, - "errorbar": Object { - "borderWidth": 8, + "scatter": Object { "colorScale": Array [ "#06c", "#8bc1f7", @@ -252,10 +829,10 @@ exports[`ChartTooltip 1`] = ` "padding": 50, "style": Object { "data": Object { - "fill": "transparent", + "fill": "#151515", "opacity": 1, - "stroke": "#151515", - "strokeWidth": 2, + "stroke": "transparent", + "strokeWidth": 0, }, "labels": Object { "fontFamily": "var(--pf-chart-global--FontFamily)", @@ -268,7 +845,7 @@ exports[`ChartTooltip 1`] = ` }, "width": 450, }, - "group": Object { + "stack": Object { "colorScale": Array [ "#06c", "#8bc1f7", @@ -278,9 +855,31 @@ exports[`ChartTooltip 1`] = ` ], "height": 300, "padding": 50, + "style": Object { + "data": Object { + "strokeWidth": 1, + }, + }, "width": 450, }, - "legend": Object { + "tooltip": Object { + "cornerRadius": 0, + "flyoutStyle": Object { + "cornerRadius": 0, + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 0, + }, + "pointerLength": 10, + "pointerWidth": 20, + "style": Object { + "fill": "#f0f0f0", + "padding": 16, + "pointerEvents": "none", + }, + }, + "voronoi": Object { "colorScale": Array [ "#06c", "#8bc1f7", @@ -288,198 +887,503 @@ exports[`ChartTooltip 1`] = ` "#519de9", "#004b95", ], - "gutter": 20, - "orientation": "horizontal", + "height": 300, + "padding": 50, "style": Object { "data": Object { - "type": "square", + "fill": "transparent", + "stroke": "transparent", + "strokeWidth": 0, + }, + "flyout": Object { + "fill": "#151515", + "pointerEvents": "none", + "stroke": "#151515", + "strokeWidth": 1, + }, + "labels": Object { + "fill": "#f0f0f0", + "fontFamily": "var(--pf-chart-global--FontFamily)", + "fontSize": 14, + "letterSpacing": "var(--pf-chart-global--letter-spacing)", + "padding": 8, + "pointerEvents": "none", + "stroke": "transparent", + "textAnchor": "middle", + }, + }, + "width": 450, + }, + } + } +/> +`; + +exports[`ChartTooltip 2`] = ` +} + role="presentation" + shapeRendering="auto" + /> + } + groupComponent={} + labelComponent={ + -`; - -exports[`ChartTooltip 2`] = ` -} - role="presentation" - shapeRendering="auto" + } + } /> } - groupComponent={} - labelComponent={} renderInPortal={true} text="This is a tooltip" theme={ diff --git a/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md b/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md index 68b7fb7f293..d132ddfc7d3 100644 --- a/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md +++ b/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md @@ -6,10 +6,13 @@ propComponents: ['ChartTooltip'] hideDarkMode: true --- -import { Chart, ChartArea, ChartAxis, ChartBar, ChartDonut, ChartGroup, ChartLabel, ChartLine, ChartStack, ChartThemeColor, ChartTooltip, createContainer, getCustomTheme } from '@patternfly/react-charts'; +import { Chart, ChartArea, ChartAxis, ChartBar, ChartDonut, ChartGroup, ChartLabel, ChartLegend, ChartLegendTooltip, ChartLine, ChartStack, ChartThemeColor, ChartTooltip, createContainer, getCustomTheme } from '@patternfly/react-charts'; import { Button, Tooltip } from '@patternfly/react-core'; import './chart-tooltip.css'; +import chart_voronoi_labels_Fill from '@patternfly/react-tokens/dist/js/chart_voronoi_labels_Fill'; +import global_FontWeight_bold from '@patternfly/react-tokens/dist/js/global_FontWeight_bold'; + ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! @@ -92,14 +95,13 @@ class CombinedCursorVoronoiContainer extends React.Component { return (
-

This demonstrates how to combine cursor and voronoi containers to display tooltips along with a cursor

+

This demonstrates how to combine cursor and voronoi containers to display tooltips along with a vertical cursor

`${datum.name}: ${datum.y}`} mouseFollowTooltips @@ -118,7 +120,7 @@ class CombinedCursorVoronoiContainer extends React.Component { right: 50, top: 50 }} - themeColor={ChartThemeColor.green} + themeColor={ChartThemeColor.orange} width={450} > @@ -170,6 +172,98 @@ class CombinedCursorVoronoiContainer extends React.Component { } ``` +```js title=Embedded-legend +import React from 'react'; +import { Chart, ChartAxis, ChartGroup, ChartLegendTooltip, ChartLine, ChartThemeColor, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts'; + +import chart_voronoi_labels_Fill from '@patternfly/react-tokens/dist/js/chart_voronoi_labels_Fill'; +import global_FontWeight_bold from '@patternfly/react-tokens/dist/js/global_FontWeight_bold'; + +class CombinedCursorVoronoiContainer extends React.Component { + render() { + // Note: Container order is important + const CursorVoronoiContainer = createContainer("cursor", "voronoi"); + const legendData = [{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }, { name: 'Mice' }]; + + return ( +
+

This demonstrates how to embed a legend within a tooltip. Combining cursor and voronoi containers is required to display tooltips with a vertical cursor.

+
+ `${datum.y !== null ? datum.y : 'no data'}`} + labelComponent={ datum.x}/>} + mouseFollowTooltips + voronoiDimension="x" + voronoiPadding={50} + /> + } + legendData={legendData} + legendPosition="bottom" + height={275} + maxDomain={{y: 10}} + minDomain={{y: 0}} + padding={{ + bottom: 75, // Adjusted to accommodate legend + left: 50, + right: 50, + top: 50 + }} + themeColor={ChartThemeColor.green} + width={450} + > + + + + + + + + + +
+
+ ); + } +} +``` + ```js title=Data-label import React from 'react'; import { Chart, ChartAxis, ChartBar, ChartStack, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts'; diff --git a/packages/react-charts/src/components/ChartTooltip/index.ts b/packages/react-charts/src/components/ChartTooltip/index.ts index 00b811322db..6d59d282372 100644 --- a/packages/react-charts/src/components/ChartTooltip/index.ts +++ b/packages/react-charts/src/components/ChartTooltip/index.ts @@ -1 +1,3 @@ +export * from './ChartCursorFlyout'; +export * from './ChartCursorTooltip'; export * from './ChartTooltip'; diff --git a/packages/react-charts/src/components/ChartUtils/chart-container.tsx b/packages/react-charts/src/components/ChartUtils/chart-container.tsx index 0f3a3c8696e..16368b82d68 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-container.tsx +++ b/packages/react-charts/src/components/ChartUtils/chart-container.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; import { ContainerType, createContainer as victoryCreateContainer } from 'victory-create-container'; +import { ChartCursorTooltip } from '../ChartTooltip'; import { ChartLabel } from '../ChartLabel'; -import { ChartTooltip } from '../ChartTooltip'; -import { getTooltipCenterOffset } from './chart-tooltip'; /** * Makes a container component with multiple behaviors. It allows you to effectively combine any two @@ -27,15 +26,10 @@ export const createContainer = (behaviorA: ContainerType, behaviorB: ContainerTy const isVoronoi = behaviorA === 'voronoi' || behaviorB === 'voronoi'; if (isCursor) { - container.defaultProps.cursorLabelComponent = ; + container.defaultProps.cursorLabelComponent = ; } if (isVoronoi) { - const labelTextAnchor = isCursor ? 'start' : undefined; // Left align tooltip text - const centerOffset = isCursor ? getTooltipCenterOffset(true) : undefined; - - container.defaultProps.labelComponent = ( - - ); + container.defaultProps.labelComponent = ; } return container; }; diff --git a/packages/react-charts/src/components/ChartUtils/chart-legend.ts b/packages/react-charts/src/components/ChartUtils/chart-legend.ts index 7dabc5bacd0..340ce0bb25f 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-legend.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-legend.ts @@ -42,6 +42,11 @@ interface ChartLegendPositionInterface { width?: number; // Overall width of SVG } +interface ChartLegendTextMaxSizeInterface { + legendData: any[]; // The legend data used to determine width + theme: ChartThemeDefinition; // The theme that will be applied to the chart +} + interface ChartLegendTextSizeInterface { legendData: any[]; // The legend data used to determine width legendOrientation?: 'horizontal' | 'vertical'; // Orientation of legend @@ -425,11 +430,34 @@ export const getPieLegendY = ({ } }; +// Returns an approximation of longest text width based on legend styles +export const getMaxLegendTextSize = ({ legendData, theme }: ChartLegendTextMaxSizeInterface) => { + const style: any = theme && theme.legend && theme.legend.style ? theme.legend.style.labels : undefined; + if (!(legendData && legendData.length)) { + return 0; + } + + let result = ''; + legendData.forEach(data => { + if (data.name && data.name.length > result.length) { + result = data.name; + } + }); + + // The approximateTextSize function returns height and width, but Victory incorrectly typed it as number + const adjustedTextSize: any = TextSize.approximateTextSize(result, { + ...style, + characterConstant: overpassFontCharacterConstant + }); + + return adjustedTextSize.width; +}; + // Returns an approximation of over-sized text width due to growing character count // // See https://github.com/FormidableLabs/victory/issues/864 const getTextSizeWorkAround = ({ legendData, legendOrientation, theme }: ChartLegendTextSizeInterface) => { - const style: any = theme.legend.style.labels; + const style: any = theme && theme.legend && theme.legend.style ? theme.legend.style.labels : undefined; if (!(legendData && legendData.length)) { return 0; } diff --git a/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts b/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts index 99355c8e327..7e11f21a61b 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts @@ -1,16 +1,131 @@ +import { Helpers, OrientationTypes, StringOrNumberOrCallback } from 'victory-core'; +import { ChartThemeDefinition } from '../ChartTheme'; +import { getLegendDimensions } from './chart-legend'; + +interface ChartCursorTooltipCenterOffsetInterface { + offsetCursorDimensionX?: boolean; // Adjust the tooltip to appear to the right of the vertical cursor + offsetCursorDimensionY?: boolean; // Adjust the tooltip to appear above the horizontal cursor + theme?: ChartThemeDefinition; +} + +interface ChartCursorTooltipPoniterOrientationInterface { + horizontal?: boolean; + theme?: ChartThemeDefinition; +} + +interface ChartLegendTooltipFlyoutInterface { + legendData: any; + legendOrientation?: 'horizontal' | 'vertical'; + legendProps?: any; + text?: StringOrNumberOrCallback | string[] | number[]; + theme: ChartThemeDefinition; +} + /** - * When using a cursor container, the tooltip can be offset from the cursor point. If true, the tooltip - * will appear to the right of the vertical cursor. - * - * @param {boolean} offsetCursorDimensionX If true, the tooltip will appear to the right of the vertical cursor - * @param {boolean} offsetCursorDimensionY If true, the tooltip will appear above the horizontal cursor + * When using a cursor container, the tooltip can be offset from the cursor point. If offsetCursorDimensionX is true, + * the tooltip will appear to the right the vertical cursor. If offsetCursorDimensionY is true, the tooltip will appear + * above the vertical cursor. */ -export const getTooltipCenterOffset = (offsetCursorDimensionX = false, offsetCursorDimensionY = false) => { - const offsetX = (props: any) => props.flyoutWidth / 2 + 5; - const offsetY = (props: any) => -(props.flyoutHeight / 2 + 5); - +export const getCursorTooltipCenterOffset = ({ + offsetCursorDimensionX = false, + offsetCursorDimensionY = false, + theme +}: ChartCursorTooltipCenterOffsetInterface) => { + const pointerLength = theme && theme.tooltip ? theme.tooltip.pointerLength : 10; + const offsetX = ({ flyoutWidth, width, x }: any) => { + const offset = flyoutWidth / 2 + pointerLength; + return width > flyoutWidth + x ? offset : -offset; + }; + const offsetY = ({ flyoutHeight, width, y }: any) => { + const offset = flyoutHeight / 2 + pointerLength; + return width > flyoutHeight + y ? -offset : offset; + }; return { x: offsetCursorDimensionX ? offsetX : 0, y: offsetCursorDimensionY ? offsetY : 0 }; }; + +/** + * When using a cursor container, the tooltip pointer orientation can be adjusted as the cursor approaches the edge of + * the chart. If horizontal is true, the tooltip pointer will either be 'left' or 'right'. If horizontal is true, the + * tooltip pointer will either be 'top' or 'bottom'. + */ +export const getCursorTooltipPoniterOrientation = ({ + horizontal = true, + theme +}: ChartCursorTooltipPoniterOrientationInterface): ((props: any) => OrientationTypes) => { + const pointerLength = theme && theme.tooltip ? theme.tooltip.pointerLength : 10; + const orientationX = ({ flyoutWidth, width, x }: any): OrientationTypes => + width > flyoutWidth + pointerLength + x ? 'left' : 'right'; + const orientationY = ({ flyoutHeight, height, y }: any): OrientationTypes => + height > flyoutHeight + pointerLength + y ? 'top' : 'bottom'; + return horizontal ? orientationX : orientationY; +}; + +// Returns the legend height and width +export const getLegendTooltipSize = ({ + legendData, + legendOrientation = 'vertical', + legendProps, + text = '', + theme +}: ChartLegendTooltipFlyoutInterface) => { + const textEvaluated = Helpers.evaluateProp(text); + const _text = Array.isArray(textEvaluated) ? textEvaluated : [textEvaluated]; + + // Find max data char length + let maxDataLength = 0; + if (legendData) { + legendData.map((data: any) => { + if (data.name && data.name.length > maxDataLength) { + maxDataLength = data.name.length; + } + }); + } + + // Find max text char length + let maxTextLength = 0; + _text.map((name: string) => { + if (name && name.length > maxTextLength) { + maxTextLength = name.length; + } + }); + + // Adds spacing to help align legend labels and text values + const maxLength = maxDataLength + maxTextLength; + const getSpacer = (chars: number) => { + let spacer = ''; + if (maxLength === 0) { + return spacer; + } + const charsToAppend = (_text && _text.length !== 0 ? 2 : 0) + maxLength - chars; + while (spacer.length < charsToAppend) { + spacer = ` ${spacer}`; + } + return spacer; + }; + + // Format all text (as shown below) to help determine overall legend length. + // + // {name: "Cats no data"} + // {name: "Dogs 1"} + // {name: "Birds 4"} + // {name: "Mice 3"} + const data = _text.map((label: string, index: number) => { + const hasLegendData = legendData && legendData[index] && legendData[index].name; + const dataLength = hasLegendData ? legendData[index].name.length : 0; + const chars = dataLength + label.length; + return { + name: `${hasLegendData ? legendData[index].name : ''}${getSpacer(chars)}${label}` + }; + }); + + const legendDimensions = getLegendDimensions({ + legendData: data, + legendOrientation, + legendProps, + theme + }); + return legendDimensions; +}; diff --git a/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx b/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx index 6ba1211b914..abfe2fcff33 100644 --- a/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx +++ b/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import hoistNonReactStatics from 'hoist-non-react-statics'; import { OriginType } from 'victory-core'; import { VictoryVoronoiContainer, VictoryVoronoiContainerProps } from 'victory-voronoi-container'; +import { ChartLabel } from '../ChartLabel'; import { ChartThemeDefinition } from '../ChartTheme'; import { ChartTooltip } from '../ChartTooltip'; import { getClassName, getTheme } from '../ChartUtils'; diff --git a/packages/react-charts/src/components/index.ts b/packages/react-charts/src/components/index.ts index f3779fb51f0..6cc8d9cdbe8 100644 --- a/packages/react-charts/src/components/index.ts +++ b/packages/react-charts/src/components/index.ts @@ -5,11 +5,13 @@ export * from './ChartAxis'; export * from './ChartBar'; export * from './ChartBullet'; export * from './ChartContainer'; +export * from './ChartCursorContainer'; export * from './ChartDonut'; export * from './ChartDonutUtilization'; export * from './ChartGroup'; export * from './ChartLabel'; export * from './ChartLegend'; +export * from './ChartLegendTooltip'; export * from './ChartLine'; export * from './ChartPie'; export * from './ChartPoint'; diff --git a/packages/react-charts/src/typings/victory.d.ts b/packages/react-charts/src/typings/victory.d.ts index bef413b38d0..15f0c3aa270 100644 --- a/packages/react-charts/src/typings/victory.d.ts +++ b/packages/react-charts/src/typings/victory.d.ts @@ -1,6 +1,7 @@ import 'victory-core'; declare module 'victory-core' { + export const CommonProps: any; export const Data: any; export const Helpers: any; export const Line: any;