fix(core): Show empty state for when there is no data

carbon-design-system · Apr 30, 2019 · b5db127 · b5db127
1 parent ef0a551
commit b5db127
Show file tree

Hide file tree

Showing 9 changed files with 120 additions and 82 deletions.
diff --git a/packages/core/src/bar-chart.ts b/packages/core/src/bar-chart.ts
@@ -159,7 +159,7 @@ export class BarChart extends BaseAxisChart {
 						.attr("stroke-opacity", d => this.options.accessibility ? 1 : 0);
 
 		// Hide the overlay
-		this.updateOverlay().hide();
+		this.chartOverlay.hide();
 
 		// Dispatch the load event
 		this.dispatchEvent("load");
@@ -237,7 +237,7 @@ export class BarChart extends BaseAxisChart {
 		this.addDataPointEventListener();
 
 		// Hide the overlay
-		this.updateOverlay().hide();
+		this.chartOverlay.hide();
 
 		// Dispatch the update event
 		this.dispatchEvent("update");

diff --git a/packages/core/src/base-chart.ts b/packages/core/src/base-chart.ts
@@ -13,6 +13,7 @@ import * as Configuration from "./configuration";
 import { ChartConfig, BaseChartOptions, ChartData } from "./configuration";
 import { Tools } from "./tools";
 import PatternsService from "./services/patterns";
+import { ChartOverlay } from "./components/index";
 
 // Misc
 import ResizeObserver from "resize-observer-polyfill";
@@ -47,6 +48,9 @@ export class BaseChart {
 		tooltips: null
 	};
 
+	// Misc
+	chartOverlay: ChartOverlay;
+
 	constructor(holder: Element, configs: ChartConfig<BaseChartOptions>) {
 		this.id = `chart-${BaseChart.chartCount++}`;
 		if (configs.options) {
@@ -114,7 +118,8 @@ export class BaseChart {
 		this.dispatchEvent("data-change");
 
 		if (initialDraw || newDataIsAPromise) {
-			this.updateOverlay().show();
+			this.chartOverlay = new ChartOverlay(this.holder, this.options.overlay);
+			this.chartOverlay.show();
 		}
 
 		// Hide current showing tooltip
@@ -129,37 +134,42 @@ export class BaseChart {
 			// Process data
 			// this.data = this.dataProcessor(Tools.clone(value));
 			this.data = Tools.clone(value);
-			this.displayData = this.dataProcessor(Tools.clone(value));
 
-			const keys = this.getKeysFromData();
+			if (this.data.datasets && this.data.datasets.length > 0) {
+				this.displayData = this.dataProcessor(Tools.clone(value));
 
-			// Grab the old legend items, the keys from the current data
-			// Compare the two, if there are any differences (additions/removals)
-			// Completely remove the legend and render again
-			const oldLegendItems = this.getActiveLegendItems();
-			const keysArray = Object.keys(keys);
-			const { missing: removedItems, added: newItems } = Tools.arrayDifferences(oldLegendItems, keysArray);
+				const keys = this.getKeysFromData();
 
-			// Update keys for legend use the latest data keys
-			this.options.keys = keys;
+				// Grab the old legend items, the keys from the current data
+				// Compare the two, if there are any differences (additions/removals)
+				// Completely remove the legend and render again
+				const oldLegendItems = this.getActiveLegendItems();
+				const keysArray = Object.keys(keys);
+				const { missing: removedItems, added: newItems } = Tools.arrayDifferences(oldLegendItems, keysArray);
 
-			// Set the color scale based on the keys present in the data
-			this.setColorScale();
+				// Update keys for legend use the latest data keys
+				this.options.keys = keys;
 
-			// Add patterns to page, set pattern scales
-			if (this.options.accessibility) {
-				this.setPatterns();
-			}
+				// Set the color scale based on the keys present in the data
+				this.setColorScale();
 
-			// Perform the draw or update chart
-			if (initialDraw) {
-				this.initialDraw();
-			} else {
-				if (removedItems.length > 0 || newItems.length > 0) {
-					this.addOrUpdateLegend();
+				// Add patterns to page, set pattern scales
+				if (this.options.accessibility) {
+					this.setPatterns();
 				}
 
-				this.update();
+				// Perform the draw or update chart
+				if (initialDraw) {
+					this.initialDraw();
+				} else {
+					if (removedItems.length > 0 || newItems.length > 0) {
+						this.addOrUpdateLegend();
+					}
+
+					this.update();
+				}
+			} else {
+				this.chartOverlay.show(Configuration.options.BASE.overlay.types.noData);
 			}
 		});
 	}
@@ -924,33 +934,6 @@ export class BaseChart {
 		return transition().duration(animate === false ? 0 : Configuration.transitions.default.duration);
 	}
 
-	// ================================================================================
-	// Loading overlay
-	// ================================================================================
-	updateOverlay() {
-		const overlayElement = <HTMLElement>this.holder.querySelector("div.chart-overlay");
-
-		return {
-			show: () => {
-				// If overlay element has already been added to the chart container
-				// Just show it
-				if (overlayElement) {
-					overlayElement.style.display = "block";
-				} else {
-					const loadingOverlay = document.createElement("div");
-
-					loadingOverlay.classList.add("chart-overlay");
-					loadingOverlay.innerHTML = this.options.loadingOverlay.innerHTML;
-
-					this.holder.appendChild(loadingOverlay);
-				}
-			},
-			hide: () => {
-				overlayElement.style.display = "none";
-			}
-		};
-	}
-
 	getBBox(selector: any) {
 		return this.innerWrap.select(selector).node().getBBox();
 	}

diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
@@ -0,0 +1 @@
+export * from "./overlay";
diff --git a/packages/core/src/components/overlay.ts b/packages/core/src/components/overlay.ts
@@ -0,0 +1,35 @@
+import * as Configuration from "../configuration";
+
+export class ChartOverlay {
+    holder: HTMLElement;
+    overlayElement: HTMLElement;
+    overlayOptions: Configuration.ChartOverlayOptions;
+
+	constructor(holder: Element, options: Configuration.ChartOverlayOptions) {
+        this.holder = <HTMLElement>holder;
+        this.overlayElement = this.holder.querySelector("div.chart-overlay");
+
+        if (options) {
+            this.overlayOptions = options;
+        } else {
+            this.overlayOptions = Configuration.options.BASE.overlay;
+        }
+    }
+
+    show(type?: string) {
+        if (this.overlayElement) {
+            this.overlayElement.parentNode.removeChild(this.overlayElement);
+        }
+
+        const overlay = document.createElement("div");
+
+        overlay.classList.add("chart-overlay");
+        overlay.innerHTML = this.overlayOptions.innerHTML[type ? type : "loading"];
+
+        this.overlayElement = this.holder.appendChild(overlay);
+    }
+
+    hide() {
+        this.overlayElement.style.display = "none";
+    }
+}
diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts
@@ -41,6 +41,22 @@ export enum ThresholdTheme {
  * User configurable options *
  *****************************
  */
+/**
+ * customize the overlay contents
+ */
+export interface ChartOverlayOptions {
+	types: {
+		loading: string;
+		noData: string;
+	}
+	/**
+	 * raw html to be injected into the overlay container
+	 */
+	innerHTML: {
+		loading: string;
+		noData: string;
+	};
+}
 
 /**
  * Base chart options common to any chart
@@ -83,15 +99,7 @@ export interface BaseChartOptions {
 		 */
 		formatter: Function;
 	};
-	/**
-	 * customize the loading overlay contents
-	 */
-	loadingOverlay?: {
-		/**
-		 * raw html to be injected into the loading container
-		 */
-		innerHTML: string;
-	};
+	overlay?: ChartOverlayOptions;
 	/**
 	 * Optional function to generate the fill color based on datasetLabel, label, and/or value
 	 */
@@ -130,19 +138,30 @@ const baseOptions: BaseChartOptions = {
 		size: TooltipSize.FULL,
 		formatter: null
 	},
-	loadingOverlay: {
-		innerHTML: `
-		<div class="loading-overlay-content">
-		  <div data-loading class="bx--loading bx--loading--small">
-			<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
-				<title>Loading</title>
-				<circle cx="0" cy="0" r="37.5" />
-			</svg>
-		  </div>
-
-		  <p>Loading</p>
-		</div>
-		`
+	overlay: {
+		types: {
+			loading: "loading",
+			noData: "noData"
+		},
+		innerHTML: {
+			loading: `
+			<div class="ccharts-overlay-content">
+				<div data-loading class="bx--loading bx--loading--small">
+					<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
+						<title>Loading</title>
+						<circle cx="0" cy="0" r="37.5" />
+					</svg>
+				</div>
+
+				<p>Loading</p>
+			</div>
+			`,
+			noData: `
+			<div class="ccharts-overlay-content">
+				No data available
+			</div>
+			`
+		}
 	}
 };
 

diff --git a/packages/core/src/pie-chart.ts b/packages/core/src/pie-chart.ts
@@ -163,7 +163,7 @@ export class PieChart extends BaseChart {
 			.attr("transform", function (d) { return self.deriveTransformString(this, d, radius); });
 
 		// Hide overlay
-		this.updateOverlay().hide();
+		this.chartOverlay.hide();
 	}
 
 	// Interpolated transitions for older data points to reflect the new data changes
@@ -263,7 +263,7 @@ export class PieChart extends BaseChart {
 		this.reduceOpacity();
 
 		// Hide the overlay
-		this.updateOverlay().hide();
+		this.chartOverlay.hide();
 	}
 
 	// TODO - Possible inherits from base-chart

diff --git a/packages/core/src/scatter-chart.ts b/packages/core/src/scatter-chart.ts
@@ -44,7 +44,7 @@ export class ScatterChart extends BaseAxisChart {
 				.attr("stroke", d => this.getStrokeColor(d.datasetLabel, d.label, d.value));
 
 		// Hide the overlay
-		this.updateOverlay().hide();
+		this.chartOverlay.hide();
 
 		// Dispatch the load event
 		this.dispatchEvent("load");
@@ -117,7 +117,7 @@ export class ScatterChart extends BaseAxisChart {
 		this.addDataPointEventListener();
 
 		// Hide the overlay
-		this.updateOverlay().hide();
+		this.chartOverlay.hide();
 
 		// Dispatch the update event
 		this.dispatchEvent("update");

diff --git a/packages/core/src/stacked-bar-chart.ts b/packages/core/src/stacked-bar-chart.ts
@@ -104,7 +104,7 @@ export class StackedBarChart extends BaseAxisChart {
 					.attr("stroke-opacity", d => this.options.accessibility ? 1 : 0);
 
 		// Hide the overlay
-		this.updateOverlay().hide();
+		this.chartOverlay.hide();
 
 		// Dispatch the load event
 		this.dispatchEvent("load");
@@ -168,7 +168,7 @@ export class StackedBarChart extends BaseAxisChart {
 		this.addDataPointEventListener();
 
 		// Hide the overlay
-		this.updateOverlay().hide();
+		this.chartOverlay.hide();
 
 		// Dispatch the update event
 		this.dispatchEvent("update");

diff --git a/packages/core/src/style.scss b/packages/core/src/style.scss
@@ -232,7 +232,7 @@ div.chart-overlay {
 		transform: translate(-50%, -50%);
 	}
 
-	div.loading-overlay-content {
+	div.ccharts-overlay-content {
 		position: absolute;
 		top: 50%;
 		left: 50%;