pie chart tweaks (#25202)

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

-export {
-  color,
-  alpha,
-  lighten,
-  darken,
-  tint,
-  shade,
-  hueRotate,
-  isLight,
-  isDark,
-  getTextColorForBackground,
-} from "./palette";
+export * from "./palette";

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

@@ -155,25 +155,13 @@ const LIGHT_HSL_RANGES = [
 ];
 
 export const getTextColorForBackground = (backgroundColor: string) => {
-  const colorObject = Color(color(backgroundColor));
-  const hslColor = [
-    colorObject.hue(),
-    colorObject.saturationl(),
-    colorObject.lightness(),
-  ];
-
-  if (
-    LIGHT_HSL_RANGES.some(hslRanges => {
-      return hslRanges.every((range, index) => {
-        const [start, end] = range;
-        const colorComponentValue = hslColor[index];
-
-        return colorComponentValue >= start && colorComponentValue <= end;
-      });
-    })
-  ) {
-    return color("text-dark");
-  }
-
-  return color("white");
+  const whiteTextContrast = Color(color(backgroundColor)).contrast(
+    Color(color("white")),
+  );
+  const darkTextContrast = Color(color(backgroundColor)).contrast(
+    Color(color("text-dark")),
+  );
+  return whiteTextContrast > darkTextContrast
+    ? color("white")
+    : color("text-dark");
 };

frontend/src/metabase/visualizations/components/ChartWithLegend.jsx

@@ -82,7 +82,7 @@ class ChartWithLegend extends Component {
       type = "vertical";
       LegendComponent = LegendHorizontal;
       legendTitles = legendTitles.map(title =>
-        Array.isArray(title) ? title[0] : title,
+        Array.isArray(title) ? title.join(" – ") : title,
       );
       const desiredHeight = width * (1 / aspectRatio);
       if (desiredHeight > height * (3 / 4)) {

frontend/src/metabase/visualizations/visualizations/PieChart/PieChart.jsx

@@ -121,6 +121,7 @@ export default class PieChart extends Component {
       section: t`Display`,
       title: t`Show legend`,
       widget: "toggle",
+      default: true,
     },
     "pie.show_legend_perecent": {
       section: t`Display`,
@@ -233,7 +234,8 @@ export default class PieChart extends Component {
   };
 
   updateChartViewportSize = () => {
-    requestAnimationFrame(() => {
+    // Measure chart viewport dimensions in the next tick to wait for DOM elements to resize
+    setTimeout(() => {
       if (!this.chartContainer.current) {
         return;
       }