updated chartlegend.md

Author: Mash707

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

@@ -82,278 +82,16 @@ This demonstrates a standalone legend vs. using the `legendData` property.
 
 This demonstrates how to add an interactive legend using events such as `onMouseOver`, `onMouseOut`, and `onClick`.
 
-```js
-import { 
-  Chart, 
-  ChartArea, 
-  ChartAxis, 
-  ChartGroup, 
-  ChartLegend,
-  ChartLegendTooltip,
-  ChartScatter, 
-  ChartThemeColor,
-  createContainer, 
-  getInteractiveLegendEvents, 
-  getInteractiveLegendItemStyles,
-} from '@patternfly/react-charts/victory';
-import { getResizeObserver } from '@patternfly/react-core';
-// import '@patternfly/patternfly/patternfly-charts.css'; // For mixed blend mode
-
-const InteractiveLegendChart = () => {
-  const containerRef = useRef(null);
-  const [hiddenSeries, setHiddenSeries] = useState(new Set());
-  const [width, setWidth] = useState(0);
-
-  const series = [
-    {
-      datapoints: [
-        { x: '2015', y: 3 },
-        { x: '2016', y: 4 },
-        { x: '2017', y: 8 },
-        { x: '2018', y: 6 }
-      ],
-      legendItem: { name: 'Cats' }
-    },
-    {
-      datapoints: [
-        { x: '2015', y: 2 },
-        { x: '2016', y: 3 },
-        { x: '2017', y: 4 },
-        { x: '2018', y: 5 },
-        { x: '2019', y: 6 }
-      ],
-      legendItem: { name: 'Dogs' }
-    },
-    {
-      datapoints: [
-        { x: '2015', y: 1 },
-        { x: '2016', y: 2 },
-        { x: '2017', y: 3 },
-        { x: '2018', y: 2 },
-        { x: '2019', y: 4 }
-      ],
-      legendItem: { name: 'Birds' }
-    }
-  ];
-
-  // Returns groups of chart names associated with each data series
-  const getChartNames = () => series.map((_, index) => [`area-${index}`, `scatter-${index}`]);
-
-  // Handles legend click to toggle visibility of data series
-  const handleLegendClick = (props) => {
-    setHiddenSeries((prev) => {
-      const newHidden = new Set(prev);
-      if (!newHidden.delete(props.index)) {
-        newHidden.add(props.index);
-      }
-      return newHidden;
-    });
-  };
-
-  // Returns legend data styled per hiddenSeries
-  const getLegendData = () =>
-    series.map((s, index) => ({
-      childName: `area-${index}`,
-      ...s.legendItem,
-      ...getInteractiveLegendItemStyles(hiddenSeries.has(index))
-    }));
-
-  // Returns true if data series is hidden
-  const isHidden = (index) => hiddenSeries.has(index);
-
-  // Checks if any data series is visible
-  const isDataAvailable = () => hiddenSeries.size !== series.length;
-
-  // Set chart width per current window size
-  useEffect(() => {
-    const observer = getResizeObserver(containerRef.current, () => {
-      if (containerRef.current?.clientWidth) {
-        setWidth(containerRef.current.clientWidth);
-      }
-    });
-    return () => observer();
-  }, []);
-
-  // Note: Container order is important
-  const CursorVoronoiContainer = createContainer("voronoi", "cursor");
-  const container = (
-    <CursorVoronoiContainer
-      cursorDimension="x"
-      labels={({ datum }) => datum.childName.includes('area-') && datum.y !== null ? `${datum.y}` : null}
-      labelComponent={<ChartLegendTooltip legendData={getLegendData()} title={(datum) => datum.x} />}
-      mouseFollowTooltips
-      voronoiDimension="x"
-      voronoiPadding={50}
-      disable={!isDataAvailable()}
-    />
-  );
-
-  return (
-    <div ref={containerRef}>
-      <div className="area-chart-legend-bottom-responsive">
-        <Chart
-          ariaDesc="Average number of pets"
-          ariaTitle="Area chart example"
-          containerComponent={container}
-          events={getInteractiveLegendEvents({
-            chartNames: getChartNames(),
-            isHidden,
-            legendName: 'chart5-ChartLegend',
-            onLegendClick: handleLegendClick
-          })}
-          height={225}
-          legendComponent={<ChartLegend name={'chart5-ChartLegend'} data={getLegendData()} />}
-          legendPosition="bottom-left"
-          name="chart5"
-          padding={{ bottom: 75, left: 50, right: 50, top: 50 }}
-          maxDomain={{ y: 9 }}
-          themeColor={ChartThemeColor.multiUnordered}
-          width={width}
-        >
-          <ChartAxis tickValues={['2015', '2016', '2017', '2018']} />
-          <ChartAxis dependentAxis showGrid />
-          <ChartGroup>
-            {series.map((s, index) => (
-              <ChartScatter
-                key={`scatter-${index}`}
-                name={`scatter-${index}`}
-                data={!isHidden(index) ? s.datapoints : [{ y: null }]}
-                size={({ active }) => (active ? 5 : 3)}
-              />
-            ))}
-          </ChartGroup>
-          <ChartGroup>
-            {series.map((s, index) => (
-              <ChartArea
-                key={`area-${index}`}
-                name={`area-${index}`}
-                data={!isHidden(index) ? s.datapoints : [{ y: null }]}
-                interpolation="monotoneX"
-              />
-            ))}
-          </ChartGroup>
-        </Chart>
-      </div>
-    </div>
-  );
-};
+```ts file = "ChartLegendInteractive.tsx"
+
 ```
 
 ### Interactive legend with pie chart
 
 This demonstrates how to add an interactive legend to a pie chart using events such as `onMouseOver`, `onMouseOut`, and `onClick`.
 
-```js
-import { 
-  Chart,
-  ChartLegend,
-  ChartThemeColor,
-  ChartPie,
-  getInteractiveLegendEvents, 
-  getInteractiveLegendItemStyles 
-} from '@patternfly/react-charts/victory';
+```ts file = "ChartLegendInteractivePieChart.tsx"
 
-class InteractivePieLegendChart extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      hiddenSeries: new Set(),
-      width: 0
-    };
-    this.series = [{
-      datapoints: { x: 'Cats', y: 35 },
-      legendItem: { name: 'Cats: 35' }
-    }, {
-      datapoints: { x: 'Dogs', y: 55 },
-      legendItem: { name: 'Dogs: 55' }
-    }, {
-      datapoints: { x: 'Birds', y: 10 },
-      legendItem: { name: 'Birds: 10' }
-    }];
-
-    // Returns groups of chart names associated with each data series
-    this.getChartNames = () => {
-      const result = [];
-      this.series.map((_, index) => {
-        // Provide names for each series hidden / shown -- use the same name for a pie chart
-        result.push(['pie']);
-      });
-      return result;
-    };
-
-    // Returns onMouseOver, onMouseOut, and onClick events for the interactive legend
-    this.getEvents = () => getInteractiveLegendEvents({
-      chartNames: this.getChartNames(),
-      isHidden: this.isHidden,
-      legendName: 'chart6-ChartLegend',
-      onLegendClick: this.handleLegendClick
-    });
-
-    // Returns legend data styled per hiddenSeries
-    this.getLegendData = () => {
-      const { hiddenSeries } = this.state;
-      return this.series.map((s, index) => {
-        return {
-          ...s.legendItem, // name property
-          ...getInteractiveLegendItemStyles(hiddenSeries.has(index)) // hidden styles
-        };
-      });
-    };
-
-    // Hide each data series individually
-    this.handleLegendClick = (props) => {
-      if (!this.state.hiddenSeries.delete(props.index)) {
-        this.state.hiddenSeries.add(props.index);
-      }
-      this.setState({ hiddenSeries: new Set(this.state.hiddenSeries) });
-    };
-
-    // Returns true if data series is hidden
-    this.isHidden = (index) => {
-      const { hiddenSeries } = this.state; // Skip if already hidden                
-      return hiddenSeries.has(index);
-    };
-  };
-
-  render() {
-    const { hiddenSeries, width } = this.state;
-
-    const data = [];
-    this.series.map((s, index) => {
-      data.push(!hiddenSeries.has(index) ? s.datapoints : { y: null });
-    });
-
-    return (
-      <div style={{ height: '275px', width: '300px' }}>
-        <Chart
-          ariaDesc="Average number of pets"
-          ariaTitle="Pie chart example"
-          events={this.getEvents()}
-          height={275}
-          legendComponent={<ChartLegend name={'chart6-ChartLegend'} data={this.getLegendData()} />}
-          legendPosition="bottom"
-          name="chart6"
-          padding={{
-            bottom: 65,
-            left: 20,
-            right: 20,
-            top: 20
-          }}
-          showAxis={false}
-          themeColor={ChartThemeColor.multiUnordered}
-          width={300}
-        >
-          <ChartPie
-            constrainToVisibleArea
-            data={data}
-            labels={({ datum }) => `${datum.x}: ${datum.y}`}
-            name="pie"
-          />
-        </Chart>
-      </div>
-    );
-  }
-}
 ```
 
 ### Legend tooltips