From 29bdb0cede20052d3511c1fcf593b015ea527916 Mon Sep 17 00:00:00 2001
From: RobinDeeCee <robindecock@gmail.com>
Date: Fri, 8 Sep 2023 16:46:48 +0200
Subject: [PATCH] feat(plugin): Add nullString option

Add option how null value to be shown on table

Fix #3412
Close #3413
---
 AUTHORS.txt                             |  1 +
 src/Plugin/tableview/Options.ts         | 13 +++++-
 src/Plugin/tableview/index.ts           |  5 +-
 test/plugin/tableview/tableview-spec.ts | 62 +++++++++++++++++++++++++
 types/plugin/tableview/options.d.ts     |  5 ++
 5 files changed, 83 insertions(+), 3 deletions(-)

diff --git a/AUTHORS.txt b/AUTHORS.txt
index a8b383306..d90d296ba 100644
--- a/AUTHORS.txt
+++ b/AUTHORS.txt
@@ -62,3 +62,4 @@ jongwooo <jongwooo.han@gmail.com>
 Jørn Andre Sundt <jorn.andre.sundt@jasmin.no>
 Erik Hopp <me@erikhopp.com>
 Do Yoon Kim <doyoonkim1002@gmail.com>
+RobinDeeCee <robindecock@gmail.com>
diff --git a/src/Plugin/tableview/Options.ts b/src/Plugin/tableview/Options.ts
index 4d48845d0..1468246c1 100644
--- a/src/Plugin/tableview/Options.ts
+++ b/src/Plugin/tableview/Options.ts
@@ -101,7 +101,18 @@ export default class Options {
 			 * @example
 			 *   legendToggleUpdate: false
 			 */
-			updateOnToggle: true
+			updateOnToggle: true,
+
+			/**
+			 * Set how null value to be shown.
+			 * @name showNulls
+			 * @memberof plugin-tableview
+			 * @type {string}
+			 * @default "-"
+			 * @example
+			 *   nullString: "N/A"
+			 */
+			nullString: "-"
 		};
 	}
 }
diff --git a/src/Plugin/tableview/index.ts b/src/Plugin/tableview/index.ts
index df9f89094..afe60ae32 100644
--- a/src/Plugin/tableview/index.ts
+++ b/src/Plugin/tableview/index.ts
@@ -36,7 +36,8 @@ import {isNumber, tplProcess} from "../../module/util";
  *          class: "my-class-name",
  *          style: true,
  *          title: "My Data List",
- *          updateOnToggle: false
+ *          updateOnToggle: false,
+ *          nullString: "N/A"
  *        }),
  *     ]
  *  });
@@ -134,7 +135,7 @@ export default class TableView extends Plugin {
 				v.map((d, i) => tplProcess(i ? tpl.tbody : tpl.tbodyHeader, {
 					value: i === 0 ?
 						config.categoryFormat.bind(this)(d) :
-						(isNumber(d) ? d.toLocaleString() : "")
+						(isNumber(d) ? d.toLocaleString() : config.nullString)
 				})).join("")
 			}</tr>`;
 		});
diff --git a/test/plugin/tableview/tableview-spec.ts b/test/plugin/tableview/tableview-spec.ts
index 14774fe8e..78a79f93e 100644
--- a/test/plugin/tableview/tableview-spec.ts
+++ b/test/plugin/tableview/tableview-spec.ts
@@ -267,4 +267,66 @@ describe("PLUGIN: TABLE-VIEW", () => {
 			expect(document.querySelector(`#${defaultStyle.id}`)).to.be.null;
 		});
 	});
+
+	describe("nullString option", () => {
+		before(() => {
+			args = {
+				data: {
+					x: "x",
+					columns: [
+						["x", "2023", "2024", "2025", "2026"],
+						["data1", 1230, null, null, 1238],
+						["data2", 500, 120, 100, null]
+					],
+				},
+				axis: {
+					x: {
+					  type: "category"
+					}
+				},
+				plugins: [
+					new TableView({
+						title: "My Yearly Data List",
+						categoryTitle: "Year",
+						style: true
+					})
+				]
+			};
+		});
+
+		it("check default nullString value: '-'", () => {
+			const tr = document.querySelectorAll(".bb-tableview tr");
+
+			[].slice.call(tr).forEach(v => {
+				const x = v.querySelector("th").textContent;
+
+				if (/202(4|5|6)/.test(x)) {
+					expect(v.querySelectorAll("td")[x === "2026" ? 1 : 0].textContent).to.be.equal("-");
+				}
+			});
+		});
+
+		it("set options: nullString='N/A'", () => {
+			args.plugins = [
+				new TableView({
+					title: "My Yearly Data List",
+					categoryTitle: "Year",
+					style: true,
+					nullString: "N/A"
+				})
+			];
+		});
+
+		it("when nullString value is specified: 'N/A'", () => {
+			const tr = document.querySelectorAll(".bb-tableview tr");
+
+			[].slice.call(tr).forEach(v => {
+				const x = v.querySelector("th").textContent;
+
+				if (/202(4|5|6)/.test(x)) {
+					expect(v.querySelectorAll("td")[x === "2026" ? 1 : 0].textContent).to.be.equal("N/A");
+				}
+			});
+		});
+	});
 });
diff --git a/types/plugin/tableview/options.d.ts b/types/plugin/tableview/options.d.ts
index 83d2bf4e3..9ac2c12e7 100644
--- a/types/plugin/tableview/options.d.ts
+++ b/types/plugin/tableview/options.d.ts
@@ -35,4 +35,9 @@ export interface TableViewOptions {
 	 * Update tableview from data visibility update(ex. legend toggle).
 	 */
 	updateOnToggle?: boolean;
+
+	/**
+	 * Set how null value to be shown.
+	 */
+	nullString?: string;
 }