From f95f0dcee00f24320ef3f96dc8801327bf5ad4f4 Mon Sep 17 00:00:00 2001
From: Souma Ghosh <103924539+souma-ghosh@users.noreply.github.com>
Date: Thu, 2 Feb 2023 19:47:09 +0530
Subject: [PATCH] fix: Multiseries chart data does not load completely (#20248)

## Description

When single series line chart data has 0 in one y axis value the chart
renders fine but when we add a series to the chart the 0 values were
being sent as null. This was because of an `if` condition which would
send null if the value is 0.
This PR fixes it so that 0 values are passed down to chart properly.

Fixes #20212

## Type of change

- Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

- Jest

### Test Case
> https://github.com/appsmithorg/TestSmith/issues/2174

### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)


## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [x] Test plan has been approved by relevant developers
- [x] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
---
 .../widgets/ChartWidget/component/index.tsx   | 25 ++--------------
 .../ChartWidget/component/utils.test.ts       | 29 +++++++++++++++++++
 .../widgets/ChartWidget/component/utils.ts    | 29 +++++++++++++++++++
 3 files changed, 60 insertions(+), 23 deletions(-)
 create mode 100644 app/client/src/widgets/ChartWidget/component/utils.test.ts
 create mode 100644 app/client/src/widgets/ChartWidget/component/utils.ts

diff --git a/app/client/src/widgets/ChartWidget/component/index.tsx b/app/client/src/widgets/ChartWidget/component/index.tsx
index c8bde55f49..88beccce1d 100644
--- a/app/client/src/widgets/ChartWidget/component/index.tsx
+++ b/app/client/src/widgets/ChartWidget/component/index.tsx
@@ -14,6 +14,7 @@ import {
   LabelOrientation,
   LABEL_ORIENTATION_COMPATIBLE_CHARTS,
 } from "../constants";
+import { getSeriesChartData } from "./utils";
 import log from "loglevel";
 import { Colors } from "constants/Colors";
 // Leaving this require here. Ref: https://stackoverflow.com/questions/41292559/could-not-find-a-declaration-file-for-module-module-name-path-to-module-nam/42505940#42505940
@@ -198,28 +199,6 @@ class ChartComponent extends React.Component<ChartComponentProps> {
     });
   };
 
-  getSeriesChartData = (data: ChartDataPoint[], categories: string[]) => {
-    const dataMap: { [key: string]: string } = {};
-
-    // if not array or (is array and array length is zero)
-    if (!Array.isArray(data) || (Array.isArray(data) && data.length === 0)) {
-      return [
-        {
-          value: "",
-        },
-      ];
-    }
-    for (let index = 0; index < data.length; index++) {
-      const item: ChartDataPoint = data[index];
-      dataMap[item.x] = item.y;
-    }
-    return categories.map((category: string) => {
-      return {
-        value: dataMap[category] ? dataMap[category] : null,
-      };
-    });
-  };
-
   /**
    * creates dataset need by fusion chart  from widget object-data
    *
@@ -235,7 +214,7 @@ class ChartComponent extends React.Component<ChartComponentProps> {
       const seriesChartData: Array<Record<
         string,
         unknown
-      >> = this.getSeriesChartData(get(item, "data", []), categories);
+      >> = getSeriesChartData(get(item, "data", []), categories);
       return {
         seriesName: item.seriesName,
         color: item.color
diff --git a/app/client/src/widgets/ChartWidget/component/utils.test.ts b/app/client/src/widgets/ChartWidget/component/utils.test.ts
new file mode 100644
index 0000000000..485b2e5862
--- /dev/null
+++ b/app/client/src/widgets/ChartWidget/component/utils.test.ts
@@ -0,0 +1,29 @@
+import { getSeriesChartData } from "./utils";
+
+describe("getSeriesChartData", () => {
+  it("should return 0 in value when some y axis inputs are 0", () => {
+    const data = [
+      { x: "Jul", y: 3 },
+      { x: "Aug", y: 2 },
+      { x: "Sep", y: 2 },
+      { x: "Oct", y: 0 },
+      { x: "Nov", y: 2 },
+      { x: "Dec", y: 0 },
+      { x: "Jan", y: 1 },
+    ];
+    const categories = ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan"];
+
+    const result = getSeriesChartData(data, categories);
+    const expected = [
+      { value: 3 },
+      { value: 2 },
+      { value: 2 },
+      { value: 0 },
+      { value: 2 },
+      { value: 0 },
+      { value: 1 },
+    ];
+
+    expect(result).toStrictEqual(expected);
+  });
+});
diff --git a/app/client/src/widgets/ChartWidget/component/utils.ts b/app/client/src/widgets/ChartWidget/component/utils.ts
new file mode 100644
index 0000000000..bd7ce95f54
--- /dev/null
+++ b/app/client/src/widgets/ChartWidget/component/utils.ts
@@ -0,0 +1,29 @@
+import { ChartDataPoint } from "../constants";
+
+export const getSeriesChartData = (
+  data: ChartDataPoint[],
+  categories: string[],
+) => {
+  const dataMap: { [key: string]: string } = {};
+
+  // if not array or (is array and array length is zero)
+  if (!Array.isArray(data) || (Array.isArray(data) && data.length === 0)) {
+    return [
+      {
+        value: "",
+      },
+    ];
+  }
+  for (let index = 0; index < data.length; index++) {
+    const item: ChartDataPoint = data[index];
+    dataMap[item.x] = item.y;
+  }
+  return categories.map((category: string) => {
+    return {
+      value:
+        dataMap[category] || dataMap[category]?.toString()
+          ? dataMap[category]
+          : null,
+    };
+  });
+};