feat(Chart): include series visibility (#196)

* feat(Chart): include series visibility

* feat(Switch): override color via prop

* feat(colors): loop over colors table

* fix(Chart): weaken visibility dependency to series

packages/core/web-reporter-ui/src/components/Charts/Chart.tsx

@@ -1,8 +1,34 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import ReactApexChart, { Props as ApexChartProps } from "react-apexcharts";
-import { ApexOptions } from "apexcharts";
+import ApexCharts, { ApexOptions } from "apexcharts";
 import { POLLING_INTERVAL } from "@perf-profiler/types";
-import { merge } from "lodash";
+import { merge, partition } from "lodash";
+
+function toggleSeriesVisibility(
+  chart: ApexCharts,
+  seriesNames: string[],
+  visibleSeriesNames?: string[]
+) {
+  const [seriesToShow, seriesToHide] = partition(seriesNames, (name) => {
+    if (!visibleSeriesNames) return true;
+    return visibleSeriesNames.includes(name);
+  });
+
+  seriesToHide.forEach((name) => {
+    try {
+      chart.hideSeries(name);
+    } catch (e) {
+      // don't do anything
+    }
+  });
+  seriesToShow.forEach((name) => {
+    try {
+      chart.showSeries(name);
+    } catch (e) {
+      // don't do anything
+    }
+  });
+}
 
 export const Chart = ({
   type,
@@ -11,13 +37,15 @@ export const Chart = ({
   options = {},
   height,
   colors,
+  visibleSeriesNames,
 }: {
   type: Exclude<ApexChartProps["type"], undefined>;
   title: string;
   series: ApexAxisChartSeries;
   options?: ApexOptions;
   height: number;
   colors?: string[];
+  visibleSeriesNames?: string[];
 }) => {
   const commonOptions: ApexOptions = useMemo(
     () => ({
@@ -74,5 +102,23 @@ export const Chart = ({
 
   const chartOptions = useMemo(() => merge(commonOptions, options), [commonOptions, options]);
 
-  return <ReactApexChart options={chartOptions} series={series} type={type} height={height} />;
+  const ref = useRef<ReactApexChart>(null);
+  const seriesRef = useRef(series);
+  seriesRef.current = series;
+
+  useEffect(() => {
+    //@ts-expect-error chart is not defined in the typings, but it exists!
+    const chart: ApexCharts | undefined = ref.current?.chart;
+    if (!chart) return;
+
+    toggleSeriesVisibility(
+      chart,
+      seriesRef.current.map((serie) => serie.name).filter((name): name is string => !!name),
+      visibleSeriesNames
+    );
+  }, [visibleSeriesNames]);
+
+  return (
+    <ReactApexChart ref={ref} options={chartOptions} series={series} type={type} height={height} />
+  );
 };

packages/core/web-reporter-ui/src/components/Switch.tsx

@@ -4,10 +4,12 @@ export const Switch = ({
   value,
   onChange,
   accessibilityLabel,
+  color,
 }: {
   accessibilityLabel: string;
   value: boolean;
   onChange: (value: boolean) => void;
+  color?: string;
 }) => (
   <label className="inline-flex relative items-center cursor-pointer">
     <input
@@ -17,6 +19,9 @@ export const Switch = ({
       onChange={() => onChange(!value)}
       aria-label={accessibilityLabel}
     />
-    <div className="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-theme-color" />
+    <div
+      className="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-theme-color"
+      style={{ backgroundColor: value ? color : undefined }}
+    />
   </label>
 );

packages/core/web-reporter-ui/src/theme/colors.ts

@@ -27,3 +27,8 @@ export const getThemeColorPalette = () => {
 };
 
 export const getColorPalette = () => COLOR_PALETTE;
+
+export const getColorFromIndex = (i: number): string => {
+  const colorPalette = getColorPalette();
+  return colorPalette[i % colorPalette.length];
+};