update documentation to pass customIcons (#2904)

Co-authored-by: Charlie Brown <[email protected]>

demo/ts/components/victory-legend-demo.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+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 legendStyle = {
   labels: { fontSize: 14, fontFamily: "Palatino" },
@@ -73,6 +74,65 @@ const data = [
   },
 ];
 
+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 <FaSun {...props} x={props.x - 7} y={props.y - 7} size={15} />;
+};
+
+const CustomMoon = (props) => {
+  const [iconColor, setIconColor] = useState(props?.style?.fill || "green");
+  const [icon, setIcon] = useState("moon");
+  if (icon === "moon") {
+    return (
+      <FaMoon
+        fill={iconColor}
+        x={props.x - 7}
+        y={props.y - 7}
+        size={15}
+        onClick={() => {
+          setIcon("star");
+          setIconColor("red");
+        }}
+      />
+    );
+  }
+  return (
+    <FaStar
+      fill={iconColor}
+      x={props.x - 7}
+      y={props.y - 7}
+      size={15}
+      onClick={() => {
+        setIcon("moon");
+        setIconColor("blue");
+      }}
+    />
+  );
+};
+
+
 const LegendDemo = () => (
   <div className="demo">
     <div>
@@ -176,16 +236,52 @@ const LegendDemo = () => (
     </svg>
     <svg height={200} width={1000}>
       <VictoryLegend
-        borderComponent={<Border width={430} height={110} />}
+        borderComponent={<Border width={630} height={110} />}
         centerTitle
+        x={25}
+        y={20}
+        standalone={false}
         title={["TITLE"]}
         gutter={30}
         symbolSpacer={symbolSpacer}
         itemsPerRow={3}
         data={data}
         style={legendStyle}
       />
-    </svg> 
+    </svg>
+    {/* CustomIcon */}
+    <svg height={200} width={1000}>
+      <VictoryLegend
+        centerTitle
+        title={["TITLE"]}
+        gutter={30}
+        x={25}
+        y={20}
+        standalone={false}
+        symbolSpacer={symbolSpacer}
+        itemsPerRow={3}
+        dataComponent={<CustomSun />}
+        data={customIconData}
+        style={legendStyle}
+      />
+    </svg>
+    {/* CustomIcon with events*/}
+    <svg height={200} width={1000}>
+      <VictoryLegend
+        theme={VictoryTheme.clean}
+        standalone={false}
+        x={25}
+        y={20}
+        itemsPerRow={2}
+        title={["My Legend title"]}
+        data={customIconData}
+        dataComponent={<CustomMoon />}
+        symbolSpacer={symbolSpacer}
+        titleComponent={
+          <VictoryLabel style={[{ fontSize: 20 }, { fontSize: 14 }]} />
+        }
+      />
+    </svg>
   </div>
 );
 

demo/ts/components/victory-scatter-demo.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-magic-numbers,react/no-multi-comp */
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { random, range } from "lodash";
 import { VictoryScatter } from "victory-scatter";
@@ -11,6 +11,11 @@ import {
 } from "victory-core";
 import bubbleData from "./bubble-data";
 import symbolData from "./symbol-data";
+import {
+  FaMoon,
+  FaFootballBall,
+  FaSun,
+} from "react-icons/fa";
 
 type DataType = {
   x?: string | number;
@@ -94,6 +99,41 @@ const symbolStyle = {
     fill: "grey",
   },
 };
+const CustomSunIcon = (props) => (
+  <FaSun x={props.x - 25} y={props.y - 25} {...props} />
+);
+
+const CustomCustomIconWithEvents = (props) => {
+  const [iconColor, setIconColor] = useState(props?.style?.fill || "green");
+  const [icon, setIcon] = useState("moon");
+  if (icon === "moon") {
+    return (
+      <FaMoon
+        fill={iconColor}
+        x={props.x - 7}
+        y={props.y - 7}
+        size={15}
+        onClick={() => {
+          setIcon("star");
+          setIconColor("red");
+        }}
+      />
+    );
+  }
+  return (
+    <FaFootballBall
+      fill={iconColor}
+      x={props.x - 7}
+      y={props.y - 7}
+      size={15}
+      onClick={() => {
+        setIcon("moon");
+        setIconColor("blue");
+      }}
+    />
+  );
+};
+
 
 class CatPoint extends React.Component<any, CatPointInterface> {
   static propTypes = {
@@ -289,6 +329,28 @@ export default class VictoryScatterDemo extends React.Component<
           x="a.x"
           y="a.b[0]y"
         />
+        {/* custom icons */}
+        <VictoryScatter
+          style={{
+            parent: style.parent
+          }}
+          data={[
+            { x: 1, y: 45 },
+            { x: 2, y: 85 },
+            { x: 3, y: 55 },
+            { x: 4, y: 25 },
+            { x: 5, y: 65 }
+          ]}
+          dataComponent={<CustomCustomIconWithEvents />}
+        />
+        <VictoryScatter
+          style={{
+            parent: style.parent
+          }}
+          dataComponent={<CustomSunIcon />}
+          size={25}
+          samples={10}
+        />
       </div>
     );
   }

docs/package.json

@@ -42,6 +42,7 @@
     "prism-react-renderer": "^2.3.1",
     "react-cool-inview": "^3.0.1",
     "react-copy-to-clipboard": "^5.1.0",
+    "react-icons": "^5.3.0",
     "react-inlinesvg": "^4.1.1",
     "react-live": "^4.1.6",
     "react-markdown": "^9.0.1",

docs/src/content/docs/victory-legend.md

@@ -3,7 +3,8 @@ id: 16
 title: VictoryLegend
 category: more
 type: docs
-scope: null
+scope: 
+  - reactIconsFa
 ---
 
 # VictoryLegend
@@ -112,7 +113,7 @@ containerComponent={<VictoryContainer responsive={false}/>}
 
 `type: array[{ name, symbol, labels }]`
 
-Specify data via the `data` prop. `VictoryLegend` expects data as an array of objects with `name` (required), `symbol`, and `labels` properties. The `data` prop must be given as an array. The symbol rendered may be changed by altering the `type` property of the `symbol` object. Valid types include: circle", "diamond", "plus", "minus", "square", "star", "triangleDown", and "triangleUp"
+Specify data via the `data` prop. `VictoryLegend` expects data as an array of objects with `name` (required), `symbol`, and `labels` properties. The `data` prop must be given as an array. The symbol rendered may be changed by altering the `type` property of the `symbol` object. Valid types include: circle", "diamond", "plus", "minus", "square", "star", "triangleDown", and "triangleUp".If you want to use SVG icons from a custom component or an SVG based icon library like [react-icons](https://react-icons.github.io/react-icons/) use `dataComponent` property.[Read about it here](#datacomponent)
 
 _default:_ `data={[{ name: "Series 1" }, { name: "Series 2" }]}`
 
@@ -135,6 +136,99 @@ _default:_ `data={[{ name: "Series 1" }, { name: "Series 2" }]}`
 
 `VictoryLegend` uses the standard `dataComponent` prop. [Read about it here](/docs/common-props#datacomponent)
 
+An example of using Custom icons as `dataComponent` in `VictoryLegend`.
+
+```playground_norender
+const { FaSun, FaMoon } = reactIconsFa;
+
+const CustomMoon = (props) => {
+  const [iconColor, setIconColor] = React.useState(
+    props?.style?.fill || "green",
+  );
+  const [icon, setIcon] = React.useState("moon");
+  if (icon === "moon") {
+    return (
+      <FaMoon
+        fill={iconColor}
+        x={props.x - 7}
+        y={props.y - 7}
+        size={15}
+        onClick={() => {
+          setIcon("sun");
+          setIconColor("red");
+        }}
+      />
+    );
+  }
+  return (
+    <FaSun
+      fill={iconColor}
+      x={props.x - 7}
+      y={props.y - 7}
+      size={15}
+      onClick={() => {
+        setIcon("moon");
+        setIconColor("blue");
+      }}
+    />
+  );
+};
+
+function App() {
+  return (
+    <VictoryChart>
+      <VictoryLegend
+        orientation={"horizontal"}
+        x={65}
+        y={50}
+        data={[
+          { name: "One", symbol: { fill: "orange" } },
+          { name: "Two", symbol: { fill: "blue" } },
+          { name: "Three" },
+        ]}
+        dataComponent={<CustomMoon />}
+      />
+    </VictoryChart>
+  );
+}
+
+render(<App />);
+```
+
+An example of using multiple Custom icons as `dataComponent` in `VictoryLegend`.
+
+```playground_norender
+const { FaSun, FaMoon, FaStar } = reactIconsFa;
+
+const CustomMultipleIcon = (props) => {
+  const { x, y, datum } = props;
+  if (datum.name === "One") {
+    return <FaMoon fill={"red"} x={props.x - 7} y={props.y - 7} size={15} />;
+  }
+  if (datum.name === "Two") {
+    return <FaSun fill={"orange"} x={props.x - 7} y={props.y - 7} size={15} />;
+  }
+  return <FaStar fill={"blue"} x={props.x - 7} y={props.y - 7} size={15} />;
+};
+
+function App() {
+  return (
+    <VictoryChart>
+      <VictoryLegend
+        orientation={"horizontal"}
+        x={65}
+        y={50}
+        data={[{ name: "One" }, { name: "Two" }, { name: "Three" }]}
+        dataComponent={<CustomMultipleIcon />}
+      />
+    </VictoryChart>
+  );
+}
+ 
+render(<App />);
+
+```
+
 `VictoryLegend` supplies the following props to its `dataComponent`: `data`, `datum`, `events`, `index`, `x`, `y`, `size`, `style`, and `symbol`. `VictoryLegend` renders a [Point component][] by default.
 
 See the [Custom Components Guide][] for more detail on creating your own `dataComponents`