Match static combo chart colors and legends with app viz colors (meta…

…base#26211)

* Match static combo chart colors with app viz colors

* Match colors when individual series color is set

* Remove tests that test colors

Since colors is now determined in FE

* Fix static viz Series type

* Match static progress bar colors with app viz colors

* Simplify Clojure code, makes it more idiomatic

* Fix certain combo charts don't respect whitelabel colors

* Make Clojure code more idiomatic

* Fix Series type

* Add colors back to static internal page

* Simplify type predicate

* fix colors matching for multiple series with mulitple metrics or dimensions

* Handle legends not formatted in static viz in some cases

* Fix failed BE tests after BE API changed

* Fix failed BE tests after BE API changed

* Add multiple series dashcard test to `getSeriesWithColors` test

* Add `getSeriesWithLegends` tests

* Fix URL `/_internal/static-viz` not loading due to API change

* Correctly render legend when having dashcard title set

* Simplify combo-chart API

don't really need `settings-seqs` yet

* Make static combo chart component type easier to understand

* Address review: refactor `render-multiple-lab-chart`

* Make variable names easier to understand

* Simplify color API

* Address review on `body.clj`

* Address review, make parameter name more consistent

* Fix multiple scalars not rendering

* Remove unused imports

frontend/src/metabase/lib/colors/charts.ts

@@ -1,23 +1,28 @@
 import { getAccentColors, getPreferredColor } from "./groups";
 import { ACCENT_COUNT } from "./palette";
+import { ColorPalette } from "./types";
 
 export const getColorsForValues = (
   keys: string[],
   existingMapping?: Record<string, string> | null,
+  palette?: ColorPalette,
 ) => {
   if (keys.length <= ACCENT_COUNT) {
     return getHashBasedMapping(
       keys,
-      getAccentColors({ light: false, dark: false }),
+      getAccentColors({ light: false, dark: false }, palette),
       existingMapping,
-      getPreferredColor,
+      (color: string) => getPreferredColor(color, palette),
     );
   } else {
     return getOrderBasedMapping(
       keys,
-      getAccentColors({ light: keys.length > ACCENT_COUNT * 2, harmony: true }),
+      getAccentColors(
+        { light: keys.length > ACCENT_COUNT * 2, harmony: true },
+        palette,
+      ),
       existingMapping,
-      getPreferredColor,
+      (color: string) => getPreferredColor(color, palette),
     );
   }
 };

frontend/src/metabase/lib/colors/groups.ts

@@ -1,31 +1,34 @@
 import _ from "underscore";
 import { ACCENT_COUNT, color } from "./palette";
-import { AccentColorOptions } from "./types";
+import { AccentColorOptions, ColorPalette } from "./types";
 
-export const getAccentColors = ({
-  main = true,
-  light = true,
-  dark = true,
-  harmony = false,
-}: AccentColorOptions = {}) => {
+export const getAccentColors = (
+  {
+    main = true,
+    light = true,
+    dark = true,
+    harmony = false,
+  }: AccentColorOptions = {},
+  palette?: ColorPalette,
+) => {
   const ranges = [];
-  main && ranges.push(getMainAccentColors());
-  light && ranges.push(getLightAccentColors());
-  dark && ranges.push(getDarkAccentColors());
+  main && ranges.push(getMainAccentColors(palette));
+  light && ranges.push(getLightAccentColors(palette));
+  dark && ranges.push(getDarkAccentColors(palette));
 
   return harmony ? _.unzip(ranges).flat() : ranges.flat();
 };
 
-export const getMainAccentColors = () => {
-  return _.times(ACCENT_COUNT, i => color(`accent${i}`));
+export const getMainAccentColors = (palette?: ColorPalette) => {
+  return _.times(ACCENT_COUNT, i => color(`accent${i}`, palette));
 };
 
-export const getLightAccentColors = () => {
-  return _.times(ACCENT_COUNT, i => color(`accent${i}-light`));
+export const getLightAccentColors = (palette?: ColorPalette) => {
+  return _.times(ACCENT_COUNT, i => color(`accent${i}-light`, palette));
 };
 
-export const getDarkAccentColors = () => {
-  return _.times(ACCENT_COUNT, i => color(`accent${i}-dark`));
+export const getDarkAccentColors = (palette?: ColorPalette) => {
+  return _.times(ACCENT_COUNT, i => color(`accent${i}-dark`, palette));
 };
 
 export const getStatusColorRanges = () => {
@@ -35,7 +38,7 @@ export const getStatusColorRanges = () => {
   ];
 };
 
-export const getPreferredColor = (key: string) => {
+export const getPreferredColor = (key: string, palette?: ColorPalette) => {
   switch (key.toLowerCase()) {
     case "success":
     case "succeeded":
@@ -47,7 +50,7 @@ export const getPreferredColor = (key: string) => {
     case "accepted":
     case "active":
     case "profit":
-      return color("success");
+      return color("success", palette);
     case "cancel":
     case "canceled":
     case "cancelled":
@@ -63,17 +66,17 @@ export const getPreferredColor = (key: string) => {
     case "cost":
     case "deleted":
     case "pending":
-      return color("error");
+      return color("error", palette);
     case "warn":
     case "warning":
     case "incomplete":
     case "unstable":
-      return color("warning");
+      return color("warning", palette);
     case "count":
-      return color("brand");
+      return color("brand", palette);
     case "sum":
-      return color("accent1");
+      return color("accent1", palette);
     case "average":
-      return color("accent2");
+      return color("accent2", palette);
   }
 };

frontend/src/metabase/static-viz/components/LineAreaBarChart/LineAreaBarChart.tsx

@@ -1,25 +1,31 @@
 import React from "react";
 import { ColorGetter } from "metabase/static-viz/lib/colors";
 import { XYChart } from "../XYChart";
-import { ChartSettings, ChartStyle, Series } from "../XYChart/types";
+import { CardSeries, ChartSettings, ChartStyle } from "../XYChart/types";
 import { Colors } from "./types";
 import {
   adjustSettings,
   calculateChartSize,
   getXValuesCount,
 } from "./utils/settings";
+import {
+  getSeriesWithColors,
+  getSeriesWithLegends,
+  removeNoneSeriesFields,
+} from "./utils/series";
 
 interface LineAreaBarChartProps {
-  series: Series[];
+  multipleSeries: CardSeries[];
   settings: ChartSettings;
   colors: Colors;
   getColor: ColorGetter;
 }
 
 const LineAreaBarChart = ({
-  series,
+  multipleSeries,
   settings,
   getColor,
+  colors: instanceColors,
 }: LineAreaBarChartProps) => {
   const chartStyle: ChartStyle = {
     fontFamily: "Lato, sans-serif",
@@ -50,6 +56,14 @@ const LineAreaBarChart = ({
     goalColor: getColor("text-medium"),
   };
 
+  const seriesWithColors = getSeriesWithColors(
+    multipleSeries,
+    settings,
+    instanceColors,
+  );
+  const seriesWithLegends = getSeriesWithLegends(seriesWithColors, settings);
+  const series = removeNoneSeriesFields(seriesWithLegends);
+
   const minTickSize = chartStyle.axes.ticks.fontSize * 1.5;
   const xValuesCount = getXValuesCount(series);
   const chartSize = calculateChartSize(settings, xValuesCount, minTickSize);