fix(plugin): fix stanford tooltip formatting

Fix formatting tooltip for timeseries type chart Fix naver#2657
mpietrobo · May 5, 2022 · 9a87464 · 9a87464
1 parent 3091677
commit 9a87464
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 8 deletions.
diff --git a/src/Plugin/stanford/index.ts b/src/Plugin/stanford/index.ts
@@ -228,20 +228,23 @@ export default class Stanford extends Plugin {
 
 		if (isEmpty(config.tooltip_contents)) {
 			config.tooltip_contents = function(d, defaultTitleFormat, defaultValueFormat, color) {
+				const {data_x} = config;
 				let html = `<table class="${$TOOLTIP.tooltip}"><tbody>`;
 
 				d.forEach(v => {
+					const {id = "", value = 0, epochs = 0, x = ""} = v;
+
 					html += `<tr>
-							<th>${defaultTitleFormat(config.data_x)}</th>
-							<th class="value">${defaultValueFormat(v.x)}</th>
+							<th>${data_x || ""}</th>
+							<th class="value">${defaultTitleFormat(x)}</th>
 						</tr>
 						<tr>
-							<th>${defaultTitleFormat(v.id)}</th>
-							<th class="value">${defaultValueFormat(v.value)}</th>
+							<th>${v.id}</th>
+							<th class="value">${defaultValueFormat(value)}</th>
 						</tr>
-						<tr class="${$TOOLTIP.tooltipName}-${v.id}">
-							<td class="name"><span style="background-color:${color(v)}"></span>${defaultTitleFormat("Epochs")}</td>
-							<td class="value">${defaultValueFormat(v.epochs)}</td>
+						<tr class="${$TOOLTIP.tooltipName}-${id}">
+							<td class="name"><span style="background-color:${color(v)}"></span>Epochs</td>
+							<td class="value">${defaultValueFormat(epochs)}</td>
 						</tr>`;
 				});
 

diff --git a/test/plugin/stanford/stanford-spec.ts b/test/plugin/stanford/stanford-spec.ts
@@ -12,7 +12,7 @@ import {compareEpochs, getCentroid, getRegionArea, pointInRegion} from "../../..
 describe("PLUGIN: STANFORD", () => {
 	let chart;
 	let stanford = new Stanford({ epochs: [30, 35] });
-	let args = {
+	let args: any = {
 		data: {
 			x: "x",
 			columns: [
@@ -177,4 +177,74 @@ describe("PLUGIN: STANFORD", () => {
 			});
 		});
 	});
+
+	describe("tooltip", () => {
+		before(() => {
+			args = {
+				data: {
+					x: "Datetime",
+					columns: [
+					  [
+						"Datetime",
+						1650965572,
+						1650965572,
+						1650965572
+					  ],
+					  [
+						"Pressure",
+						1,
+						2.04,
+						2.96
+					  ],
+					],
+					type: "scatter"
+				},
+				axis: {
+					x: {
+						label: "Datetime",
+						tick: {
+							fit: true,
+							count: 30,
+							format: '%d/%m/%y',
+							culling: {
+								max: 6
+							}
+						},
+						type: 'timeseries'
+					}
+				},
+				plugins: [
+					new Stanford({
+						epochs: [
+							34.794, 34.787, 34.791
+						],
+						scale: {
+							min: 34.79,
+							max: 35.139,
+							width: 10
+						}
+					})
+				]
+			};
+		});
+
+		it("sholud tooltip name and value display correctly for timeseries.", () => {
+			const {tooltip} = chart.$;
+
+			chart.tooltip.show({
+				data: {
+					x: new Date(1650965572),  // x Axis value
+					id: "Pressure",
+					value: 1
+				}
+			});
+
+			tooltip.selectAll("th:first-child").each(function(d, i) {
+				expect(this.textContent).to.be.equal(args.data.columns[i][0]);
+			});
+
+			expect(tooltip.select(".value").text()).to.be.equal("20/01/70");
+			expect(tooltip.select(".name").text()).to.be.equal("Epochs");
+		});
+	});
 });