Merge pull request #1228 from buster-so/big-nate-bus-1985-colorby-tooltip-and-legend-defaults

logic for auto show with color by

apps/web/src/components/ui/charts-shared/useLegendAutoShow.ts

@@ -7,12 +7,14 @@ export const useLegendAutoShow = ({
   selectedChartType,
   showLegendProp = null,
   categoryAxisColumnNames,
+  colorByColumnNames,
   allYAxisColumnNames,
 }: {
   selectedChartType: BusterChartProps['selectedChartType'];
   showLegendProp: BusterChartProps['showLegend'];
   categoryAxisColumnNames: string[] | null | undefined;
   allYAxisColumnNames: string[];
+  colorByColumnNames: string[];
 }) => {
   const showLegend = useMemo(() => {
     if (UNSUPPORTED_CHART_TYPES.includes(selectedChartType)) {
@@ -38,10 +40,16 @@ export const useLegendAutoShow = ({
       return true;
     }
 
-    const defaultShowLegend = !!categoryAxisColumnNames?.length;
+    const defaultShowLegend = !!categoryAxisColumnNames?.length || !!colorByColumnNames?.length;
 
     return defaultShowLegend;
-  }, [selectedChartType, allYAxisColumnNames, categoryAxisColumnNames, showLegendProp]);
+  }, [
+    selectedChartType,
+    allYAxisColumnNames,
+    categoryAxisColumnNames,
+    showLegendProp,
+    colorByColumnNames,
+  ]);
 
   return showLegend;
 };

apps/web/src/components/ui/charts/BusterChartLegend/useBusterChartLegend.ts

@@ -1,4 +1,5 @@
 import type {
+  BarAndLineAxis,
   ChartEncodes,
   ChartType,
   ComboChartAxis,
@@ -52,11 +53,17 @@ export const useBusterChartLegend = ({
     [(selectedAxis as ScatterAxis)?.category?.join('')]
   );
 
+  const colorByColumnNames = useMemo(
+    () => (selectedAxis as BarAndLineAxis)?.colorBy ?? [],
+    [(selectedAxis as BarAndLineAxis)?.colorBy?.join('')]
+  );
+
   const showLegend = useLegendAutoShow({
     selectedChartType,
     showLegendProp,
     categoryAxisColumnNames,
     allYAxisColumnNames,
+    colorByColumnNames,
   });
 
   const renderLegend = useMemo(() => {