updated usage of hooks and fixed the tooltip example

Author: Mash707

packages/react-charts/src/victory/components/ChartLegend/examples/ChartLegend.md

@@ -20,7 +20,7 @@ propComponents: [
 hideDarkMode: true
 ---
 
-import { cloneElement, createRef, useEffect, useRef, useState } from 'react';
+import { cloneElement, useEffect, useRef, useState } from 'react';
 import { 
   Chart,
   ChartArea,

packages/react-charts/src/victory/components/ChartLegend/examples/ChartLegendInteractive.tsx

@@ -12,11 +12,12 @@ import {
   getInteractiveLegendItemStyles
 } from '@patternfly/react-charts/victory';
 import { getResizeObserver } from '@patternfly/react-core';
+import { useRef, useState, useEffect } from 'react';
 
 export const ChartLegendInteractive: React.FunctionComponent = () => {
-  const containerRef = React.useRef(null);
-  const [hiddenSeries, setHiddenSeries] = React.useState(new Set());
-  const [width, setWidth] = React.useState(0);
+  const containerRef = useRef(null);
+  const [hiddenSeries, setHiddenSeries] = useState(new Set());
+  const [width, setWidth] = useState(0);
 
   const series = [
     {

packages/react-charts/src/victory/components/ChartLegend/examples/ChartLegendInteractivePieChart.tsx

@@ -6,9 +6,10 @@ import {
   getInteractiveLegendEvents,
   getInteractiveLegendItemStyles
 } from '@patternfly/react-charts/victory';
+import { useState } from 'react';
 
 export const ChartLegendInteractivePieChart: React.FunctionComponent = () => {
-  const [hiddenSeries, setHiddenSeries] = React.useState<Set<number>>(new Set());
+  const [hiddenSeries, setHiddenSeries] = useState<Set<number>>(new Set());
 
   const series = [
     {

packages/react-charts/src/victory/components/ChartLegend/examples/ChartLegendResponsiveBottomLeft.tsx

@@ -1,15 +1,16 @@
 import { ChartBullet } from '@patternfly/react-charts/victory';
 import { getResizeObserver } from '@patternfly/react-core';
+import { useRef, useState, useEffect } from 'react';
 
 interface Data {
   name?: string;
   y?: number;
 }
 
 export const ChartLegendResponsiveBottomLeft: React.FunctionComponent = () => {
-  const containerRef = React.useRef<HTMLDivElement>(null);
-  const [extraHeight, setExtraHeight] = React.useState(0);
-  const [width, setWidth] = React.useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [extraHeight, setExtraHeight] = useState(0);
+  const [width, setWidth] = useState(0);
 
   const handleResize = () => {
     if (containerRef.current && containerRef.current.clientWidth) {
@@ -25,7 +26,7 @@ export const ChartLegendResponsiveBottomLeft: React.FunctionComponent = () => {
 
   const getHeight = (baseHeight: number) => baseHeight + extraHeight;
 
-  React.useEffect(() => {
+  useEffect(() => {
     const observer = getResizeObserver(containerRef.current, handleResize);
     handleResize();
 

packages/react-charts/src/victory/components/ChartLegend/examples/ChartLegendTooltips.tsx

@@ -1,5 +1,6 @@
 import { ChartLabel, ChartLegend, ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory';
 import { Tooltip } from '@patternfly/react-core';
+import { useRef } from 'react';
 
 interface PetData {
   x: string;
@@ -12,15 +13,18 @@ export const ChartLegendTooltips: React.FunctionComponent = () => {
     { x: 'Dogs', y: 55 },
     { x: 'Birds', y: 10 }
   ];
-  const ref = React.useRef(null);
+
   // Custom legend label component
   // Note: Tooltip wraps children with a div tag, so we use a reference to ChartLabel instead
-  const LegendLabel = ({ datum, ...rest }) => (
-    <g ref={ref}>
-      <ChartLabel {...rest} />
-      <Tooltip content={datum.name} enableFlip triggerRef={ref} />
-    </g>
-  );
+  const LegendLabel = ({ datum, ...rest }) => {
+    const ref = useRef(null);
+    return (
+      <g ref={ref}>
+        <ChartLabel {...rest} />
+        <Tooltip content={datum.name} enableFlip triggerRef={ref} />
+      </g>
+    );
+  };
 
   // Custom legend component
   const getLegend = (legendData) => <ChartLegend data={legendData} labelComponent={<LegendLabel />} />;