converted interactive examples

Author: Mash707

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

@@ -0,0 +1,153 @@
+import {
+  Chart,
+  ChartArea,
+  ChartAxis,
+  ChartGroup,
+  ChartLegend,
+  ChartLegendTooltip,
+  ChartScatter,
+  ChartThemeColor,
+  createContainer,
+  getInteractiveLegendEvents,
+  getInteractiveLegendItemStyles
+} from '@patternfly/react-charts/victory';
+import { getResizeObserver } from '@patternfly/react-core';
+
+export const ChartLegendInteractive: React.FunctionComponent = () => {
+  const containerRef = React.useRef(null);
+  const [hiddenSeries, setHiddenSeries] = React.useState(new Set());
+  const [width, setWidth] = React.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>
+  );
+};

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

@@ -0,0 +1,94 @@
+import {
+  Chart,
+  ChartLegend,
+  ChartThemeColor,
+  ChartPie,
+  getInteractiveLegendEvents,
+  getInteractiveLegendItemStyles
+} from '@patternfly/react-charts/victory';
+
+export const ChartLegendInteractivePieChart: React.FunctionComponent = () => {
+  const [hiddenSeries, setHiddenSeries] = React.useState<Set<number>>(new Set());
+
+  const 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
+  const getChartNames = () => {
+    const result = [];
+    series.map((_, _index) => {
+      // Provide names for each series hidden / shown -- use the same name for a pie chart
+      result.push(['pie']);
+    });
+    return result;
+  };
+
+  // Returns legend data styled per hiddenSeries
+  const getLegendData = () =>
+    series.map((s, index) => ({
+      ...s.legendItem, // name property
+      ...getInteractiveLegendItemStyles(hiddenSeries.has(index)) // hidden styles
+    }));
+
+  // Hide each data series individually
+  const handleLegendClick = (props: { index: number }) => {
+    const newHiddenSeries = new Set(hiddenSeries);
+    if (newHiddenSeries.delete(props.index)) {
+      newHiddenSeries.add(props.index);
+    }
+    setHiddenSeries(newHiddenSeries);
+  };
+
+  // Returns true if data series is hidden
+  const isHidden = (index: number) => hiddenSeries.has(index);
+  // Returns onMouseOver, onMouseOut, and onClick events for the interactive legend
+  const getEvents = () =>
+    getInteractiveLegendEvents({
+      chartNames: getChartNames(),
+      isHidden,
+      legendName: 'chart6-ChartLegend',
+      onLegendClick: handleLegendClick
+    });
+
+  const data = [];
+  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={getEvents()}
+        height={275}
+        legendComponent={<ChartLegend name={'chart6-ChartLegend'} data={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>
+  );
+};