Support stacked bar series labels

[alxnddr]

Closes #41980 #13096

Description

Adds the ability to show data labels of individual series on stacked bar charts.

How to verify

• create a stacked bar/combo charts
• enable showing individual series labels using "Stack values to show"

Demo

Screen.Recording.2024-05-24.at.9.19.33.PM.mov

Checklist

• Tests have been added/updated to cover changes in this PR

[github-actions]

Codenotify: Notifying subscribers in CODENOTIFY files for diff 246f9b5...96f2cdb.

Notify	File(s)
@ranquild	frontend/src/metabase/lib/colors/palette.ts

[replay-io]

Status	Starting
Commit	96f2cdb

[EmmadUsmani]

Should use transformedDataset[ORIGINAL_INDEX_DATA_KEY] for consistency with buildEChartsStackLabelOptions, or in buildEChartsStackLabelOptions just use params.dataIndex for consistency with this function

[JesseSDevaney]

Hi Sasha! Nice work on this overall ❤️

This feels 99% of the way there, but there are still a couple things I think we should address before merging.

---

1. We should probably hide the Values to show setting in Stack - 100% WITHOUT a line series because it will not affect the individual labels for stacked series. Or does it? I could not find a space where it was affecting whether some inside labels were displayed or hidden.
   
2. Also, we no longer display the Auto formatting setting which still applies to these labels. See above and below for comparison. The setting is carried over but not adjustable in Stack - 100% mode.
   
   (assuming if we still want to display absolute values instead of relative percentages - relative percentages makes more sense to me considering the specified chart type)
3. (in auto formatting mode) if one series is compact, we should probably compact the labels for the rest of the series. a mix of compact and full feels wonky.
   
4. I also left some individual comments on other areas in the code.

[alxnddr]

@JesseSDevaney thanks for the review, I addressed your feedback here, please have a look 8ad8bed

[JesseSDevaney]

Sasha, thank you for addressing my comments! ❤️

There are a couple small things left to polish and then we should be good to go

[JesseSDevaney]

Similarly to the above comment about compact formatting, the stacked bar labels are full formatted but the line is compact formatted. We should probably have either all full or all compact displays. See my comments on the whole file as to the changes that I tested out.

Before

After

[JesseSDevaney]

Here are the code suggestions based on the above observations and suggestions

---

additional type imported (here)

  RawValueFormatter,

getSeriesLabelsFormattingInfo (here)

I added a type for use in the getSeriesLabelsFormatters function.

type SeriesLabelFormattingInfo = {
  dataKey: DataKey;
  fullFormatter: RawValueFormatter;
  compactFormatter: RawValueFormatter;
  isCompact: boolean;
};
const getSeriesLabelsFormattingInfo = (
  seriesModels: SeriesModel[],
  dataset: ChartDataset,
  settings: ComputedVisualizationSettings,
  renderingContext: RenderingContext,
): SeriesLabelFormattingInfo[] => {

getSeriesLabelsFormatters (here)

export const getSeriesLabelsFormatters = (
  seriesModels: SeriesModel[],
  stackModels: StackModel[],
  dataset: ChartDataset,
  settings: ComputedVisualizationSettings,
  renderingContext: RenderingContext,
): {
  formatters: SeriesFormatters;
  compactSeriesDataKeys: DataKey[];
} => {
  const formatters: SeriesFormatters = {};
  const compactSeriesDataKeys: DataKey[] = [];

  if (!settings["graph.show_values"]) {
    return { formatters, compactSeriesDataKeys };
  }

  const seriesModelsWithLabels = seriesModels.filter(seriesModel => {
    const seriesSettings =
      settings.series(seriesModel.legacySeriesSettingsObjectKey) ?? {};

    return !!seriesSettings["show_series_values"];
  });

  // Non-stacked series formatters
  const stackedSeriesKeys = new Set(
    stackModels.flatMap(stackModel => stackModel.seriesKeys),
  );
  const nonStackedSeries = seriesModelsWithLabels.filter(
    seriesModel => !stackedSeriesKeys.has(seriesModel.dataKey),
  );

  const seriesLabelFormattingInfo = getSeriesLabelsFormattingInfo(
    nonStackedSeries,
    dataset,
    settings,
    renderingContext,
  );

  // Bar stack series formatters
  let barSeriesLabelsFormattingInfo: SeriesLabelFormattingInfo[] = [];
  const shouldShowStackedBarSeriesLabels =
    settings["graph.show_stack_values"] === "series" ||
    settings["graph.show_stack_values"] === "all";
  if (shouldShowStackedBarSeriesLabels) {
    const barStackSeriesKeys = new Set(
      stackModels.find(stackModel => stackModel.display === "bar")
        ?.seriesKeys ?? [],
    );
    const barStackSeries = seriesModelsWithLabels.filter(seriesModel =>
      barStackSeriesKeys.has(seriesModel.dataKey),
    );
    barSeriesLabelsFormattingInfo = getSeriesLabelsFormattingInfo(
      barStackSeries,
      dataset,
      settings,
      renderingContext,
    );
  }

  const shouldFormattersBeCompact =
    seriesLabelFormattingInfo.some(({ isCompact }) => isCompact) ||
    barSeriesLabelsFormattingInfo.some(({ isCompact }) => isCompact);

  seriesLabelFormattingInfo.forEach(
    ({ compactFormatter, fullFormatter, dataKey }) => {
      formatters[dataKey] = shouldFormattersBeCompact
        ? compactFormatter
        : fullFormatter;
      shouldFormattersBeCompact && compactSeriesDataKeys.push(dataKey);
    },
  );

  barSeriesLabelsFormattingInfo.forEach(
    ({ compactFormatter, fullFormatter, dataKey }) => {
      formatters[dataKey] = shouldFormattersBeCompact
        ? compactFormatter
        : fullFormatter;
    },
  );

  return { formatters, compactSeriesDataKeys };
};