From 98a331a1e42b31d1f37fa0e40954965fe8c3a0ea Mon Sep 17 00:00:00 2001
From: Cyprien P <cyprien.pindat@gmail.com>
Date: Tue, 11 Jan 2022 11:19:34 +0100
Subject: [PATCH] (core) Fix the name of the grouped data series when the value
 is blank

Summary:
When using the grouped data option with a column (A) that has some
blank values, all rows with blank values for A are grouped into one
series.

The issue is that the name that showed on the legend for that series
used to be the name of the yseries, and not the name of the value.

This diff fixes it by showing `[Blank]` instead.

Test Plan: Includes new test case.

Reviewers: alexmojaki

Reviewed By: alexmojaki

Differential Revision: https://phab.getgrist.com/D3210
---
 app/client/components/ChartView.ts | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/app/client/components/ChartView.ts b/app/client/components/ChartView.ts
index 8c67fc87..e5eb7fb7 100644
--- a/app/client/components/ChartView.ts
+++ b/app/client/components/ChartView.ts
@@ -76,12 +76,19 @@ interface Series {
 }
 
 function getSeriesName(series: Series, haveMultiple: boolean) {
-  if (!series.group) {
+  if (series.group === undefined) {
     return series.label;
-  } else if (haveMultiple) {
-    return `${series.group} \u2022 ${series.label}`;  // the unicode character is "black circle"
+  }
+
+  // Let's show [Blank] instead of leaving the name empty for that series. There is a possibility
+  // to confuse user between a blank cell and a cell holding the `[Blank]` value. But that is rare
+  // enough, and confusion can easily be removed by the chart creator by editing blank cells
+  // directly in the the table to put something more meaningful instead.
+  const groupName = series.group === '' ? '[Blank]' : series.group;
+  if (haveMultiple) {
+    return `${groupName} \u2022 ${series.label}`;  // the unicode character is "black circle"
   } else {
-    return String(series.group);
+    return String(groupName);
   }
 }
 
@@ -222,7 +229,7 @@ export class ChartView extends Disposable {
       };
     });
 
-    const startIndexForYAxis = this._options.prop('multiseries') ? 2 : 1;
+    const startIndexForYAxis = this._options.prop('multiseries').peek() ? 2 : 1;
     for (let i = 0; i < series.length; ++i) {
       if (i < fields.length && LIST_TYPES.includes(fields[i].column.peek().pureType.peek())) {
         if (i < startIndexForYAxis) {