From 908084832938179638cfaf4be13330b634746c74 Mon Sep 17 00:00:00 2001 From: Charlie Brown Date: Tue, 19 Nov 2024 08:31:19 -0600 Subject: [PATCH] Migrate events, labels, and legends demos to docs (#2977) --- demo/ts/app.tsx | 61 +--- demo/ts/components/events-demo.tsx | 291 ---------------- demo/ts/components/external-events-demo.tsx | 313 ----------------- demo/ts/components/victory-label-demo.tsx | 323 ------------------ demo/ts/components/victory-legend-demo.tsx | 252 -------------- .../components/victory-shared-events-demo.tsx | 111 ------ package.json | 2 +- website/docs/charts/scatter.mdx | 30 ++ website/docs/guides/events.mdx | 149 +++++++- website/docs/guides/legends.mdx | 28 +- 10 files changed, 205 insertions(+), 1355 deletions(-) delete mode 100644 demo/ts/components/events-demo.tsx delete mode 100644 demo/ts/components/external-events-demo.tsx delete mode 100644 demo/ts/components/victory-label-demo.tsx delete mode 100644 demo/ts/components/victory-legend-demo.tsx delete mode 100644 demo/ts/components/victory-shared-events-demo.tsx diff --git a/demo/ts/app.tsx b/demo/ts/app.tsx index 596008a4d..97bec1bbb 100644 --- a/demo/ts/app.tsx +++ b/demo/ts/app.tsx @@ -2,44 +2,17 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import AccessibilityDemo from "./components/accessibility-demo"; -import AnimationDemo from "./components/animation-demo"; -import AreaDemo from "./components/victory-area-demo"; -import AxisDemo from "./components/victory-axis-demo"; -import BarDemo from "./components/victory-bar-demo"; -import BoxPlotDemo from "./components/victory-box-plot-demo"; import BrushContainerDemo from "./components/victory-brush-container-demo"; import BrushLineDemo from "./components/victory-brush-line-demo"; -import CandlestickDemo from "./components/victory-candlestick-demo"; -import CanvasDemo from "./components/canvas-demo"; -import ChartDemo from "./components/victory-chart-demo"; import CreateContainerDemo from "./components/create-container-demo"; import CursorContainerDemo from "./components/victory-cursor-container-demo"; import DraggableDemo from "./components/draggable-demo"; -import ErrorBarDemo from "./components/victory-errorbar-demo"; -import EventsDemo from "./components/events-demo"; -import ExternalEventsDemo from "./components/external-events-demo"; -import GroupDemo from "./components/group-demo"; -import HistogramDemo from "./components/victory-histogram-demo"; -import HorizontalDemo from "./components/horizontal-demo"; -import ImmutableDemo from "./components/immutable-demo"; -import LabelDemo from "./components/victory-label-demo"; -import LegendDemo from "./components/victory-legend-demo"; -import LineDemo from "./components/victory-line-demo"; -import PieDemo from "./components/victory-pie-demo"; import PolarAxisDemo from "./components/victory-polar-axis-demo"; -import PrimitivesDemo from "./components/primitives-demo"; -import ScatterDemo from "./components/victory-scatter-demo"; import SelectionDemo from "./components/selection-demo"; -import StackDemo from "./components/victory-stack-demo"; import StackedThemeDemos from "./components/stacked-theme-demo"; -import TooltipDemo from "./components/victory-tooltip-demo"; -import VictoryDemo from "./components/victory-demo"; import VictorySelectionContainerDemo from "./components/victory-selection-container-demo"; -import VictorySharedEventsDemo from "./components/victory-shared-events-demo"; import VoronoiContainerDemo from "./components/victory-voronoi-container-demo"; -import VoronoiDemo from "./components/victory-voronoi-demo"; import ZoomContainerDemo from "./components/victory-zoom-container-demo"; -import OuiaDemo from "./components/ouia-demo"; import ThemeBuilder from "./components/theme-builder"; const DEMO_ROUTES = { @@ -47,22 +20,12 @@ const DEMO_ROUTES = { component: AccessibilityDemo, name: "AccessibilityDemo", }, - "/demo/animation": { component: AnimationDemo, name: "AnimationDemo" }, - "/demo/area": { component: AreaDemo, name: "AreaDemo" }, - "/demo/axis": { component: AxisDemo, name: "AxisDemo" }, - "/demo/bar": { component: BarDemo, name: "BarDemo" }, - "/demo/box-plot": { component: BoxPlotDemo, name: "BoxPlotDemo" }, "/demo/brush-container": { component: BrushContainerDemo, name: "BrushContainerDemo", }, "/demo/brush-line": { component: BrushLineDemo, name: "BrushLineDemo" }, - "/demo/group": { component: GroupDemo, name: "GroupDemo" }, - "/demo/horizontal": { component: HorizontalDemo, name: "HorizontalDemo" }, - "/demo/histogram": { component: HistogramDemo, name: "HistogramDemo" }, - "/demo/candlestick": { component: CandlestickDemo, name: "CandlestickDemo" }, - "/demo/canvas": { component: CanvasDemo, name: "CanvasDemo" }, - "/demo/chart": { component: ChartDemo, name: "ChartDemo" }, + "/demo/create-container": { component: CreateContainerDemo, name: "CreateContainerDemo", @@ -72,37 +35,16 @@ const DEMO_ROUTES = { name: "CursorContainerDemo", }, "/demo/draggable": { component: DraggableDemo, name: "DraggableDemo" }, - "/demo/error-bar": { component: ErrorBarDemo, name: "ErrorBarDemo" }, - "/demo/events": { component: EventsDemo, name: "EventsDemo" }, - "/demo/external-events": { - component: ExternalEventsDemo, - name: "ExternalEventsDemo", - }, - "/demo/immutable": { component: ImmutableDemo, name: "ImmutableDemo" }, - "/demo/label": { component: LabelDemo, name: "LabelDemo" }, - "/demo/legend": { component: LegendDemo, name: "LegendDemo" }, - "/demo/line": { component: LineDemo, name: "LineDemo" }, - "/demo/pie": { component: PieDemo, name: "PieDemo" }, "/demo/polar-axis": { component: PolarAxisDemo, name: "PolarAxisDemo" }, - "/demo/primitives": { component: PrimitivesDemo, name: "PrimitivesDemo" }, - "/demo/scatter": { component: ScatterDemo, name: "ScatterDemo" }, "/demo/selection": { component: SelectionDemo, name: "SelectionDemo" }, - "/demo/stack": { component: StackDemo, name: "StackDemo" }, "/demo/stacked-theme": { component: StackedThemeDemos, name: "StackedThemeDemos", }, - "/demo/tooltip": { component: TooltipDemo, name: "TooltipDemo" }, - "/demo/victory": { component: VictoryDemo, name: "VictoryDemo" }, "/demo/victory-selection-container": { component: VictorySelectionContainerDemo, name: "VictorySelectionContainerDemo", }, - "/demo/victory-shared-events": { - component: VictorySharedEventsDemo, - name: "VictorySharedEventsDemo", - }, - "/demo/voronoi": { component: VoronoiDemo, name: "VoronoiDemo" }, "/demo/voronoi-container": { component: VoronoiContainerDemo, name: "VoronoiContainerDemo", @@ -111,7 +53,6 @@ const DEMO_ROUTES = { component: ZoomContainerDemo, name: "ZoomContainerDemo", }, - "/demo/ouia": { component: OuiaDemo, name: "OuiaDemo" }, }; class Home extends React.Component { diff --git a/demo/ts/components/events-demo.tsx b/demo/ts/components/events-demo.tsx deleted file mode 100644 index c07b0b804..000000000 --- a/demo/ts/components/events-demo.tsx +++ /dev/null @@ -1,291 +0,0 @@ -import React from "react"; -import { VictoryChart } from "victory-chart"; -import { VictoryStack } from "victory-stack"; -import { VictoryArea } from "victory-area"; -import { VictoryBar, VictoryBarTTargetType } from "victory-bar"; -import { VictoryLine } from "victory-line"; -import { VictoryTheme, VictoryLabel, VictoryThemePalette } from "victory-core"; - -class EventsDemo extends React.Component { - render() { - const containerStyle: React.CSSProperties = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - const chartStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, - }; - const barTarget: VictoryBarTTargetType = "data"; - const themeColors: VictoryThemePalette = - VictoryTheme.clean.palette?.colors || {}; - - return ( -
-
- { - evt.stopPropagation(); - return [ - { - mutation: (props) => { - return { - style: { ...props.style, fill: themeColors.teal }, - }; - }, - }, - { - target: "labels", - eventKey: 3, - mutation: (props) => { - return { ...props.style, text: "now click me" }; - }, - }, - ]; - }, - }, - }, - { - target: "parent", - eventHandlers: { - onClick: () => { - return [ - { - target: "data", - mutation: (props) => { - return { - style: { - ...props.style, - fill: themeColors.red, - }, - }; - }, - }, - ]; - }, - }, - }, - ]} - /> - - { - return [ - { - target: "labels", - eventKey: [3, 4, 5], - mutation: () => { - return { text: "o shit" }; - }, - }, - { - childName: "line", - target: "data", - mutation: (props) => { - return { - style: { ...props.style, stroke: themeColors.teal }, - }; - }, - }, - { - childName: "line", - target: "labels", - mutation: (props) => { - return { - style: { ...props.style, fill: themeColors.purple }, - text: "waddup", - }; - }, - }, - ]; - }, - }, - }, - ]} - > - null} - data={[ - { x: 1, y: 1 }, - { x: 2, y: 2 }, - { x: 3, y: 3 }, - { x: 4, y: 2 }, - { x: 5, y: 1 }, - { x: 6, y: 2 }, - { x: 7, y: 3 }, - { x: 8, y: 2 }, - { x: 9, y: 1 }, - { x: 10, y: 2 }, - { x: 11, y: 3 }, - { x: 12, y: 2 }, - { x: 13, y: 1 }, - ]} - /> - 0.5} - style={{ data: { stroke: themeColors.purple } }} - /> - - - { - evt.stopPropagation(); - return [ - { - mutation: (props) => { - return { - style: { ...props.style, fill: themeColors.yellow }, - }; - }, - }, - ]; - }, - }, - }, - { - target: "parent", - eventHandlers: { - onClick: () => { - return [ - { - childName: "bar", - target: "labels", - mutation: () => { - return { text: "o shit" }; - }, - }, - ]; - }, - }, - }, - ]} - > - - null} /> - - - { - return [ - { - childName: ["area-3", "area-4"], - target: "data", - mutation: (props) => { - const fill = props.style && props.style.fill; - return fill === themeColors.yellow - ? null - : { - style: { - ...props.style, - fill: themeColors.yellow, - }, - }; - }, - }, - ]; - }, - }, - }, - ]} - > - - - - - - - -
-
- ); - } -} - -export default EventsDemo; diff --git a/demo/ts/components/external-events-demo.tsx b/demo/ts/components/external-events-demo.tsx deleted file mode 100644 index ea860c14a..000000000 --- a/demo/ts/components/external-events-demo.tsx +++ /dev/null @@ -1,313 +0,0 @@ -import React from "react"; -import { VictoryChart } from "victory-chart"; -import { VictoryStack } from "victory-stack"; -import { VictoryArea } from "victory-area"; -import { VictoryBar } from "victory-bar"; -import { VictoryLine } from "victory-line"; -import { VictoryZoomContainer } from "victory-zoom-container"; -import { VictoryVoronoiContainer } from "victory-voronoi-container"; -import range from "lodash/range"; -import { VictoryTheme, VictoryThemePalette } from "victory-core"; - -const themeColors: VictoryThemePalette = - VictoryTheme.clean.palette?.colors || {}; -class App extends React.Component { - constructor(props) { - super(props); - - this.state = { - data: this.getData(), - }; - } - - componentDidMount() { - window.setInterval(() => { - this.setState({ - data: this.getData(), - }); - }, 3000); - } - - getData() { - return range(10).map((i) => { - return { - x: i, - y: Math.random(), - }; - }); - } - - removeMutation() { - this.setState({ - externalMutation: undefined, - }); - } - - handleClick() { - const callback = this.removeMutation.bind(this); - this.setState({ - externalMutation: [ - { - childName: "data", - target: ["data", "labels"], - eventKey: "all", - mutation: (props) => { - const fill = props.style && props.style.fill; - return fill === themeColors.green - ? { - style: { ...props.style, fill: themeColors.red }, - } - : { - style: { ...props.style, fill: themeColors.green }, - }; - }, - callback, - }, - ], - }); - } - - clearMutation() { - const callback = this.removeMutation.bind(this); - this.setState({ - externalMutation: [ - { - childName: "data", - target: "all", - eventKey: "all", - mutation: () => ({ style: undefined }), - callback, - }, - ], - }); - } - - render() { - const containerStyle: React.CSSProperties = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - const chartStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "35%" }, - }; - return ( -
-

Debug

-
-
    -
  • - -
    • -
  • - -
    • -
- { - return [ - { - mutation: (props) => { - return { - style: { ...props.style, fill: themeColors.orange }, - }; - }, - }, - { - target: "labels", - mutation: (props) => { - return props.text === "clicked" - ? { text: "unclicked" } - : { text: "clicked" }; - }, - }, - ]; - }, - }, - }, - ]} - > - null} - data={this.state.data} - /> - - - { - return [ - { - mutation: (props) => { - return { - style: { ...props.style, fill: themeColors.orange }, - }; - }, - }, - { - target: "labels", - mutation: (props) => { - return props.text === "clicked" - ? { text: "unclicked" } - : { text: "clicked" }; - }, - }, - ]; - }, - }, - }, - ]} - /> - { - return [ - { - mutation: (props) => { - return { - style: { - ...props.style, - fill: - props.style.fill === themeColors.green - ? themeColors.teal - : themeColors.green, - }, - }; - }, - }, - { - target: "labels", - mutation: (props) => { - return props.text === "clicked" - ? { text: "unclicked" } - : { text: "clicked" }; - }, - }, - ]; - }, - }, - }, - ]} - > - - - - - - - } - > - (active ? "black" : "none"), - }, - }} - barWidth={({ active }) => (active ? 22 : 20)} - data={[ - { x: 1, y: -5 }, - { x: 2, y: 4 }, - { x: 3, y: 2 }, - { x: 4, y: 3 }, - { x: 5, y: 1 }, - { x: 6, y: -3 }, - { x: 7, y: 3 }, - ]} - /> - (active ? "black" : "none"), - }, - }} - barWidth={({ active }) => (active ? 22 : 20)} - data={[ - { x: 1, y: -3 }, - { x: 2, y: 5 }, - { x: 3, y: 3 }, - { x: 4, y: 0 }, - { x: 5, y: -2 }, - { x: 6, y: -2 }, - { x: 7, y: 5 }, - ]} - /> - - } - externalEventMutations={this.state.externalMutation} - > - - - -
-
- ); - } -} - -export default App; diff --git a/demo/ts/components/victory-label-demo.tsx b/demo/ts/components/victory-label-demo.tsx deleted file mode 100644 index 4e4f5d0e0..000000000 --- a/demo/ts/components/victory-label-demo.tsx +++ /dev/null @@ -1,323 +0,0 @@ -import React from "react"; -import { VictoryLabel, VictoryTheme } from "victory-core"; -import { VictoryScatter, VictoryScatterProps } from "victory-scatter"; - -const containerStyle: React.CSSProperties = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", -}; - -const style = { - parent: { border: "1px solid #ccc", margin: "1%", maxWidth: "25%" }, -}; - -const themeColors = VictoryTheme.clean.palette?.colors || {}; - -const defaultScatterProps: VictoryScatterProps = { - style, - width: 400, - height: 400, - domain: [-10, 10], - data: [{ x: 0, y: 0 }], - labels: () => "Label", - size: 5, -}; -export default class App extends React.Component { - render() { - return ( -
- } - /> - - - } - /> - - - } - /> - - - } - /> - - - } - /> - - - } - /> - - - } - /> - - - } - /> - - - } - /> - - - } - /> - - - } - /> - - - } - /> - - - } - /> - - - } - /> - - {/* examples for inlining VictoryLabel with mutlitple labels */} - - } - /> - - - } - /> - - - } - /> - - {/** - * example for passing an array of lineHeights. - * lineHeight prop can accept a number[] or string[]. - */} - - } - /> - - {/* example for guarding against empty style and lineHeight arrays */} - - } - /> -
- ); - } -} diff --git a/demo/ts/components/victory-legend-demo.tsx b/demo/ts/components/victory-legend-demo.tsx deleted file mode 100644 index 1a50b07e9..000000000 --- a/demo/ts/components/victory-legend-demo.tsx +++ /dev/null @@ -1,252 +0,0 @@ -import React, { useState } from "react"; -import { VictoryLabel, Border, VictoryTheme } from "victory-core"; -import { VictoryLegend } from "victory-legend"; -import { FaMoon, FaSun, FaStar } from "react-icons/fa"; - -const symbolSize = 5; -const symbolSpacer = 10; -const data = [ - { - name: "Series 1", - symbol: { - size: symbolSize, - type: "circle", - fill: "green", - }, - }, - { - name: "Long Series Name -- so long", - symbol: { - size: symbolSize, - type: "triangleUp", - fill: "blue", - }, - }, - { - name: "Series 3", - symbol: { - size: symbolSize, - type: "diamond", - fill: "pink", - }, - }, - { - name: "Series 4", - symbol: { - size: symbolSize, - type: "plus", - }, - }, - { - name: "Series 4: minus", - symbol: { - size: symbolSize, - type: "minus", - }, - }, - { - name: "Series 5", - symbol: { - size: symbolSize, - type: "star", - fill: "red", - }, - labels: { - fill: "purple", - }, - }, - { - name: "Series 6: also quite long", - symbol: { - size: symbolSize, - type: "circle", - fill: "orange", - }, - labels: { - fill: "blue", - }, - }, -]; - -const customIconData = [ - { - name: "Series 1", - symbol: { - size: symbolSize, - fill: "green", - }, - }, - { - name: "Long Series Name -- so long", - symbol: { - size: symbolSize, - fill: "blue", - }, - }, - { - name: "Series 3", - symbol: { - size: symbolSize, - fill: "pink", - }, - }, -]; - -const CustomSun = (props) => { - return ; -}; - -const CustomMoon = (props) => { - const [iconColor, setIconColor] = useState(props?.style?.fill || "green"); - const [icon, setIcon] = useState("moon"); - if (icon === "moon") { - return ( - { - setIcon("star"); - setIconColor("red"); - }} - /> - ); - } - return ( - { - setIcon("moon"); - setIconColor("blue"); - }} - /> - ); -}; - -const LegendDemo = () => ( -
-
- - } - events={[ - { - target: "data", - eventHandlers: { - onClick: () => { - return [ - { - mutation: () => ({ symbol: "star" }), - }, - ]; - }, - }, - }, - ]} - /> - -
-
- - - -
- - - - - - - - - - - } - x={25} - y={20} - standalone={false} - title={["TITLE"]} - symbolSpacer={symbolSpacer} - itemsPerRow={3} - data={data} - /> - - {/* CustomIcon */} - - } - data={customIconData} - /> - - {/* CustomIcon with events*/} - - } - symbolSpacer={symbolSpacer} - titleComponent={ - - } - /> - -
-); - -export default LegendDemo; diff --git a/demo/ts/components/victory-shared-events-demo.tsx b/demo/ts/components/victory-shared-events-demo.tsx deleted file mode 100644 index f633a2d7c..000000000 --- a/demo/ts/components/victory-shared-events-demo.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import React from "react"; -import { VictoryBar } from "victory-bar"; -import { VictoryTheme } from "victory-core"; -import { VictorySharedEvents } from "victory-shared-events"; - -const themeColors = VictoryTheme.clean.palette?.colors || {}; -export default class VictorySharedEventsDemo extends React.Component { - render() { - const containerStyle: React.CSSProperties = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - return ( -
- - { - return { - childName: "secondBar", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { - fill: themeColors.blue, - }), - }; - }, - }; - }, - }, - }, - { - childName: "secondBar", - target: "data", - eventKey: 0, - eventHandlers: { - onClick: () => { - return [ - { - childName: "firstBar", - mutation: (props) => { - return props.style.fill === themeColors.cyan - ? null - : { - style: Object.assign({}, props.style, { - fill: themeColors.cyan, - }), - }; - }, - }, - { - mutation: (props) => { - return { - style: Object.assign({}, props.style, { - fill: themeColors.orange, - }), - }; - }, - }, - { - target: "labels", - eventKey: 1, - mutation: () => { - return { text: "CLICKED" }; - }, - }, - ]; - }, - }, - }, - ]} - > - - datum.y} - data={[ - { x: "a", y: 2 }, - { x: "b", y: 3 }, - { x: "c", y: 4 }, - ]} - /> - - -
- ); - } -} diff --git a/package.json b/package.json index cdc7cab09..c9834d9bb 100644 --- a/package.json +++ b/package.json @@ -129,7 +129,7 @@ "version": "pnpm changeset version && pnpm install --no-frozen-lockfile", "publish": "nps git:tag && pnpm changeset publish --no-git-tag", "changeset": "changeset", - "start": "concurrently --raw \"pnpm:build:typescript --watch\" \"webpack serve --config ./config/webpack/demo/webpack.config.dev.js --static demo/ts --entry ./demo/ts/app\"", + "start": "webpack serve --config ./config/webpack/demo/webpack.config.dev.js --static demo/ts --entry ./demo/ts/app", "start:docs": "wireit", "check": "wireit", "check:debug": "cross-env WIREIT_PARALLEL=1 pnpm check", diff --git a/website/docs/charts/scatter.mdx b/website/docs/charts/scatter.mdx index c74e31af7..f4f0ed4ca 100644 --- a/website/docs/charts/scatter.mdx +++ b/website/docs/charts/scatter.mdx @@ -49,6 +49,36 @@ Add labels to charts by setting the `labels` prop to the name of a property in t ``` +#### Custom Labels + +Custom labels can be rendered by using the `labelComponent` prop. See the [VictoryLabel](/docs/api/victory-label) API for more information. + +```jsx live + + datum.y} + labelComponent={ + + } + /> + +``` + ## Scatter Charts - Tooltips Tooltips can be added by using a [`VictoryTooltip`](/docs/api/victory-tooltip) component as the `labelComponent`. diff --git a/website/docs/guides/events.mdx b/website/docs/guides/events.mdx index 569a079c6..d9c4edb57 100644 --- a/website/docs/guides/events.mdx +++ b/website/docs/guides/events.mdx @@ -6,7 +6,7 @@ Victory uses a flexible event system that is agnostic of event type. Browser eve This guide will demonstrate how to use Victory's event system within a single component, between several components nested within wrapper components like `VictoryChart` or `VictoryGroup`, and between several components using the `VictorySharedEvents` wrapper. This guide will also explain how to bypass Victory's event system entirely, and attach simple events directly to rendered components. -## Single Component Events +## Component Events Events within a single component like `VictoryBar` may be defined by the `events` prop of the component. The component will be responsible for storing event-driven mutations on its state object. The `events` prop should be given as an array of event objects. Each object defines an event or set of events to attach to a particular target element, or set of target elements. @@ -51,7 +51,7 @@ Return values from event handlers are used to define mutations affecting rendere /> ``` -## Nested Component Events +## Nested Events Wrapper components like `VictoryChart`, `VictoryGroup`, and `VictoryStack` may define events for their children. Component events defined by wrappers operate much the same as single component events, except that the events are defined on the parent component, and event-driven mutations are stored in the parent's state. Events on child components are specified with the `childName` property. Components that have a `name` prop specified will be referenced by name. If child components do not have a `name` specified they will be referenced by index. In the example below, clicking on either of the bottom two areas in the stack will change the color of the top area. @@ -126,7 +126,150 @@ Wrapper components like `VictoryChart`, `VictoryGroup`, and `VictoryStack` may d ``` -## VictorySharedEvents +## Target Events + +Events can target specific elements within a component by using the `eventKey` property. The `eventKey` is a zero indexed integer that specifies the index of the element to target. The `eventKey` may also be given as an array of integers to target multiple elements. In the example below, clicking on the first bar will change the color of the second bar. + +```jsx live + { + evt.stopPropagation(); + return [ + { + mutation: (props) => { + return { + style: { + ...props.style, + fill: VictoryTheme + .clean.palette + ?.colors.teal, + }, + }; + }, + }, + { + target: "labels", + eventKey: 3, + mutation: (props) => { + return { + ...props.style, + text: "now click me", + }; + }, + }, + ]; + }, + }, + }, + { + target: "parent", + eventHandlers: { + onClick: () => { + return [ + { + target: "data", + mutation: (props) => { + return { + style: { + ...props.style, + fill: VictoryTheme + .clean.palette + ?.colors.red, + }, + }; + }, + }, + ]; + }, + }, + }, + ]} +/> +``` + +## Parent Events + +Wrapper components like `VictoryChart`, `VictoryGroup`, and `VictoryStack` may also define events for themselves which can target child components for mutation. + +```jsx live + { + evt.stopPropagation(); + return [ + { + mutation: (props) => { + return { + style: { + ...props.style, + fill: VictoryTheme + .clean.palette + ?.colors.yellow, + }, + }; + }, + }, + ]; + }, + }, + }, + { + target: "parent", + eventHandlers: { + onClick: () => { + return [ + { + childName: "bar", + target: "labels", + mutation: () => { + return { + text: "You Clicked Me!", + }; + }, + }, + ]; + }, + }, + }, + ]} +> + + null} + /> + +``` + +## Shared Events Components like `VictoryChart` use the `VictorySharedEvents` wrapper automatically, but the wrapper may also be used on its own. Nest child components within the `VictorySharedEvents` wrapper, and reference them as you would when using `VictoryChart` diff --git a/website/docs/guides/legends.mdx b/website/docs/guides/legends.mdx index 1f62a165c..4a5c89fb9 100644 --- a/website/docs/guides/legends.mdx +++ b/website/docs/guides/legends.mdx @@ -16,7 +16,6 @@ See the [full API here](/docs/api/victory-legend). ``` +## Legend - Titles + +The legend can include multiline title by setting the `title` prop to an array. + +```jsx live + +``` + ## Legend - Symbols Victory includes basic symbols for legend items. The `symbol` prop can be used to specify the symbol type and fill color.