feat(plugin): Add nullString option

Add option how null value to be shown on table

Fix #3412
Close #3413

AUTHORS.txt

@@ -62,3 +62,4 @@ jongwooo <[email protected]>
 Jørn Andre Sundt <[email protected]>
 Erik Hopp <[email protected]>
 Do Yoon Kim <[email protected]>
+RobinDeeCee <[email protected]>

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: "-"
 		};
 	}
 }

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>`;
 		});

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");
+				}
+			});
+		});
+	});
 });

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;
 }