add multiple icons example

FormidableLabs · Oct 1, 2024 · e6c1e51 · e6c1e51
1 parent 93e425b
commit e6c1e51
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 88 deletions.
diff --git a/demo/ts/components/victory-legend-demo.tsx b/demo/ts/components/victory-legend-demo.tsx
@@ -98,29 +98,40 @@ const customIconData = [
   }]
 
 const CustomSun = (props) => {
-  return (
-    <FaSun {...props} x={props.x - 7} y={props.y - 7} size={15} />)
-}
+  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}
+  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('star');
-        setIconColor('red');
-      }} />
-  }
-  return <FaStar fill={iconColor} x={props.x - 7} y={props.y - 7}
-    size={15}
-    onClick={() => {
-      setIcon('moon');
-      setIconColor('blue');
-    }} />
+        setIcon("moon");
+        setIconColor("blue");
+      }}
+    />
+  );
+};
 
-}
 
 const LegendDemo = () => (
   <div className="demo">

diff --git a/demo/ts/components/victory-scatter-demo.tsx b/demo/ts/components/victory-scatter-demo.tsx
@@ -99,26 +99,41 @@ const symbolStyle = {
     fill: "grey",
   },
 };
-const CustomSunIcon = (props) => <FaSun x={props.x - 25} y={props.y - 25} {...props} />
+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}
+  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('star');
-        setIconColor('red');
-      }} />
-  }
-  return <FaFootballBall fill={iconColor} x={props.x - 7} y={props.y - 7}
-    size={15}
-    onClick={() => {
-      setIcon('moon');
-      setIconColor('blue');
-    }} />
-}
+        setIcon("moon");
+        setIconColor("blue");
+      }}
+    />
+  );
+};
+
 
 class CatPoint extends React.Component<any, CatPointInterface> {
   static propTypes = {

diff --git a/docs/src/content/docs/victory-legend.md b/docs/src/content/docs/victory-legend.md
@@ -139,50 +139,104 @@ _default:_ `data={[{ name: "Series 1" }, { name: "Series 2" }]}`
 An example of using Custom icons as `dataComponent` in `VictoryLegend`.
 
 ```playground_norender
-const {FaSun,FaMoon} = reactIconsFa;
+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}
+  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('sun');
-        setIconColor('red');
-      }} />
-  }
-  return <FaSun fill={iconColor} x={props.x - 7} y={props.y - 7}
-    size={15}
-    onClick={() => {
-      setIcon('moon');
-      setIconColor('blue');
-    }} />
+        setIcon("moon");
+        setIconColor("blue");
+      }}
+    />
+  );
+};
+
+function App() {
+  const legendStyle = {
+    labels: { fontSize: 14, fontFamily: "Palatino" },
+    border: { stroke: "black", strokeWidth: 2 },
+  };
 
+  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() {
   const legendStyle = {
     labels: { fontSize: 14, fontFamily: "Palatino" },
     border: { stroke: "black", strokeWidth: 2 },
-    };
+  };
 
   return (
-      <VictoryChart>
+    <VictoryChart>
       <VictoryLegend
-        orientation={'horizontal'}
+        orientation={"horizontal"}
         x={65}
         y={50}
-        data={[{ name: "One" ,symbol:{fill:'orange'}},
-              { name: "Two",symbol:{fill:'blue'} },
-              { name: "Three" }
-             ]}
-        dataComponent={<CustomMoon />}/>
-      </VictoryChart> 
+        data={[{ name: "One" }, { name: "Two" }, { name: "Three" }]}
+        dataComponent={<CustomMultipleIcon />}
+      />
+    </VictoryChart>
   );
 }
+ 
+render(<App />);
 
-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.

diff --git a/docs/src/content/docs/victory-scatter.md b/docs/src/content/docs/victory-scatter.md
@@ -154,24 +154,24 @@ render(<App/>);
 An example of using Custom icons as `dataComponent` in `VictoryScatter`.
 
 ```playground_norender
-const {FaCat} = reactIconsFa;
+const { FaCat, FaStar } = reactIconsFa;
 
-const CustomCatIcon = (props)=>{
-  const {x, y} = props;
-  return <FaCat x={x-3} y={y-15} size={15}/>
-}
+const CustomCatStarIcon = (props) => {
+  const { x, y, datum } = props;
+  if (datum._y >= 0.5) {
+    return <FaStar x={x - 3} y={y - 15} size={15} />;
+  }
+  return <FaCat x={x - 3} y={y - 15} size={15} />;
+};
 
 function App() {
   return (
     <VictoryChart>
-      <VictoryScatter
-        dataComponent={<CustomCatIcon/>}
-        samples={15}
-      />
+      <VictoryScatter dataComponent={<CustomCatStarIcon />} samples={15} />
     </VictoryChart>
   );
 }
-render(<App/>);
+render(<App />);
 ```
 ## domain
 

diff --git a/docs/src/content/guides/custom-components.md b/docs/src/content/guides/custom-components.md
@@ -111,32 +111,35 @@ render(<App/>);
 An example of using Custom icons as `dataComponent` in `VictoryScatter`.
 
 ```playground_norender
-const {FaCat} = reactIconsFa;
-
-const CustomCatIcon = (props)=>{
-  const {x, y} = props;
-  const [iconColor, setIconColor] = React.useState(props?.style?.fill || 'black');
-  return <FaCat x={x-3} 
-          y={y-15} 
-          fill={iconColor}
-          size={15}
-          onClick={() => {
-            setIconColor('orange');
-          }}
-        />
-}
+const { FaCat } = reactIconsFa;
+
+const CustomCatIcon = (props) => {
+  const { x, y } = props;
+  const [iconColor, setIconColor] = React.useState(
+    props?.style?.fill || "black",
+  );
+  return (
+    <FaCat
+      x={x - 3}
+      y={y - 15}
+      fill={iconColor}
+      size={15}
+      onClick={() => {
+        setIconColor("orange");
+      }}
+    />
+  );
+};
 
 function App() {
   return (
     <VictoryChart>
-      <VictoryScatter
-        dataComponent={<CustomCatIcon/>}
-        samples={15}
-      />
+      <VictoryScatter dataComponent={<CustomCatIcon />} samples={15} />
     </VictoryChart>
   );
 }
-render(<App/>);
+render(<App />);
+
 ```
 
 More complex components may be supplied as direct children of `VictoryChart`. These components will have access to shared chart props such as `scale`. In the example below, the custom `Polygon` components draws a polygon based on a collection of points. The scale provided by `VictoryChart` is used to correctly position the points within the chart.