feat: add skeleton error states

packages/core/CHANGELOG.md

@@ -1,16 +1,12 @@
 # Change Log
 
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
 ## [0.34.8](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.7...v0.34.8) (2020-07-30)
 
 **Note:** Version bump only for package @carbon/charts
 
-
-
-
-
 # Change Log
 
 All notable changes to this project will be documented in this file. See

packages/core/demo/data/bar.ts

@@ -478,6 +478,25 @@ export const simpleBarSkeletonOptions = {
 	}
 };
 
+// simple bar - error
+export const simpleBarErrorData = [];
+export const simpleBarErrorOptions = {
+	title: "Simple bar (error)",
+	axes: {
+		left: {},
+		bottom: {
+			scaleType: "labels"
+		}
+	},
+	data: {
+		loading: false,
+		error: {
+			title: "No data available",
+			subtitle: "Lorem ipsum dolor sit."
+		}
+	}
+};
+
 // grouped bar - empty state
 export const groupedBarEmptyStateData = [];
 export const groupedBarEmptyStateOptions = {

packages/core/demo/data/donut.ts

@@ -54,3 +54,22 @@ export const donutSkeletonOptions = {
 		loading: true
 	}
 };
+
+// donut - error
+export const donutErrorData = [];
+export const donutErrorOptions = {
+	title: "Donut (error)",
+	resizable: true,
+	donut: {
+		center: {
+			label: "Browsers"
+		}
+	},
+	data: {
+		loading: false,
+		error: {
+			title: "No data available",
+			subtitle: "Lorem ipsum dolor sit."
+		}
+	}
+};

packages/core/demo/data/index.ts

@@ -194,6 +194,12 @@ let allDemoGroups = [
 				chartType: chartTypes.SimpleBarChart,
 				isDemoExample: false
 			},
+			{
+				options: barDemos.simpleBarErrorOptions,
+				data: barDemos.simpleBarErrorData,
+				chartType: chartTypes.SimpleBarChart,
+				isDemoExample: false
+			},
 			{
 				description:
 					"A grouped bar chart, also known as a clustered bar graph, multi-set bar chart, or grouped column chart, is a type of bar graph that is used to compare values across multiple categories.",
@@ -385,6 +391,12 @@ let allDemoGroups = [
 				data: donutDemos.donutSkeletonData,
 				chartType: chartTypes.DonutChart,
 				isDemoExample: false
+			},
+			{
+				options: donutDemos.donutErrorOptions,
+				data: donutDemos.donutErrorData,
+				chartType: chartTypes.DonutChart,
+				isDemoExample: false
 			}
 		]
 	},
@@ -467,6 +479,12 @@ let allDemoGroups = [
 				data: lineDemos.lineSkeletonData,
 				chartType: chartTypes.LineChart,
 				isDemoExample: false
+			},
+			{
+				options: lineDemos.lineErrorOptions,
+				data: lineDemos.lineErrorData,
+				chartType: chartTypes.LineChart,
+				isDemoExample: false
 			}
 		]
 	},
@@ -509,6 +527,12 @@ let allDemoGroups = [
 				data: pieDemos.pieSkeletonData,
 				chartType: chartTypes.PieChart,
 				isDemoExample: false
+			},
+			{
+				options: pieDemos.pieErrorOptions,
+				data: pieDemos.pieErrorData,
+				chartType: chartTypes.PieChart,
+				isDemoExample: false
 			}
 		]
 	},

packages/core/demo/data/line.ts

@@ -422,3 +422,29 @@ export const lineSkeletonOptions = {
 		loading: true
 	}
 };
+
+// line - error
+export const lineErrorData = [];
+export const lineErrorOptions = {
+	title: "Line (error)",
+	axes: {
+		bottom: {
+			title: "2019 Annual Sales Figures",
+			mapsTo: "date",
+			scaleType: "time"
+		},
+		left: {
+			mapsTo: "value",
+			title: "Conversion rate",
+			scaleType: "linear"
+		}
+	},
+	curve: "curveMonotoneX",
+	data: {
+		loading: false,
+		error: {
+			title: "No data available",
+			subtitle: "Lorem ipsum dolor sit."
+		}
+	}
+};

packages/core/demo/data/pie.ts

@@ -41,3 +41,17 @@ export const pieSkeletonOptions = {
 		loading: true
 	}
 };
+
+// pie - error
+export const pieErrorData = [];
+export const pieErrorOptions = {
+	title: "Pie (error)",
+	resizable: true,
+	data: {
+		loading: false,
+		error: {
+			title: "No data available",
+			subtitle: "Lorem ipsum dolor sit."
+		}
+	}
+};

packages/core/src/components/graphs/skeleton.ts

@@ -28,12 +28,27 @@ export class Skeleton extends Component {
 			"data",
 			"loading"
 		);
+		const error = Tools.getProperty(
+			this.model.getOptions(),
+			"data",
+			"error"
+		);
 
 		// display a skeleton if there is no chart data or the loading flag is set to true
 		if (isDataLoading) {
 			this.renderSkeleton(isDataLoading);
-		} else {
+		}
+
+		// if we're done loading, and there's an error, render the skeleton (no shimmer) with an error message
+		if (!isDataLoading && error) {
+			this.renderSkeleton(false);
+			this.renderErrorMesssage(error);
+		}
+
+		// if neither are true, clean up
+		if (!isDataLoading && !error) {
 			this.removeSkeleton();
+			this.removeErrorMessage();
 		}
 	}
 
@@ -301,4 +316,113 @@ export class Skeleton extends Component {
 		const container = this.parent.select(".chart-skeleton");
 		container.remove();
 	}
+
+	renderErrorMesssage(error) {
+		const skeleton = this.parent.select(".chart-skeleton");
+		const height = skeleton.attr("height");
+		const width = skeleton.attr("width");
+
+		const errorContainer = DOMUtils.appendOrSelect(
+			skeleton,
+			"svg.bx--cc--error-message"
+		)
+			.attr("width", width)
+			.attr("height", height);
+
+		// Error icon
+		const errorIcon = errorContainer
+			.selectAll("circle.bx--cc--error-message__icon")
+			.data([
+				{
+					cx: "1em",
+					cy: height / 2 - 5,
+					r: ".625em"
+				}
+			]);
+
+		errorIcon
+			.enter()
+			.append("circle")
+			.classed("bx--cc--error-message__icon", true)
+			.merge(errorIcon)
+			.attr("cx", (d) => d.cx)
+			.attr("cy", (d) => d.cy)
+			.attr("r", (d) => d.r);
+
+		DOMUtils.appendOrSelect(
+			errorContainer,
+			"circle.bx--cc--error-message__icon"
+		);
+
+		errorIcon.exit().remove();
+
+		// Exclamation point
+
+		const exclamationPoint = errorContainer
+			.selectAll("text.bx--cc--error-message__exclamation-point")
+			.data(["!"]);
+
+		exclamationPoint
+			.enter()
+			.append("text")
+			.classed("bx--cc--error-message__exclamation-point", true)
+			.merge(exclamationPoint)
+			.attr("x", ".75em")
+			.attr("y", height / 2 + 1)
+			.html((d) => d);
+
+		DOMUtils.appendOrSelect(
+			errorContainer,
+			"text.bx--cc--error-message__exclamation-point"
+		);
+
+		exclamationPoint.exit().remove();
+
+		// Title
+		const errorTitle = errorContainer
+			.selectAll("text.bx--cc--error-message__title")
+			.data([error.title]);
+
+		errorTitle
+			.enter()
+			.append("text")
+			.classed("bx--cc--error-message__title", true)
+			.merge(errorTitle)
+			.attr("x", "2.25em")
+			.attr("y", height / 2)
+			.html((d) => d);
+
+		DOMUtils.appendOrSelect(
+			errorContainer,
+			"text.bx--cc--error-message__title"
+		);
+
+		errorTitle.exit().remove();
+
+		// Subtitle
+		const errorSubtitle = errorContainer
+			.selectAll("text.bx--cc--error-message__subtitle")
+			.data([error.subtitle]);
+
+		errorSubtitle
+			.enter()
+			.append("text")
+			.classed("bx--cc--error-message__subtitle", true)
+			.merge(errorSubtitle)
+			.attr("x", "2.65em")
+			.attr("y", height / 2 + 18)
+			.html((d) => d);
+
+		DOMUtils.appendOrSelect(
+			errorContainer,
+			"text.bx--cc--error-message__subtitle"
+		);
+
+		errorSubtitle.exit().remove();
+	}
+
+	removeErrorMessage() {
+		const container = this.parent.select(".bx--cc--error-message");
+		container.remove();
+	}
 }

packages/core/src/interfaces/charts.ts

@@ -89,6 +89,13 @@ export interface BaseChartOptions {
 		 * used to simulate data loading
 		 */
 		loading?: Boolean;
+		/**
+		 * a message to be rendered when data is unavailable for whatever reason
+		 */
+		error?: {
+			title: string;
+			subtitle: string;
+		};
 		/**
 		 * options related to pre-selected data groups
 		 * Remains empty if every legend item is active or dataset doesn't have the data groups.

packages/core/src/styles/components/_error-message.scss

@@ -0,0 +1,22 @@
+svg.#{$prefix}--#{$charts-prefix}--error-message {
+	circle.#{$prefix}--#{$charts-prefix}--error-message__icon {
+		fill: $support-03;
+
+		&.hovered  {
+			fill: $support-03;
+		}
+	}
+
+	text.#{$prefix}--#{$charts-prefix}--error-message__exclamation-point {
+		fill: black;
+		font-size: 1.125rem;
+	}
+
+	text.#{$prefix}--#{$charts-prefix}--error-message__title {
+		@include carbon--type-style("productive-heading-01");
+	}
+
+	text.#{$prefix}--#{$charts-prefix}--error-message__subtitle {
+		@include carbon--type-style("helper-text-01");
+	}
+}

packages/core/src/styles/components/index.scss

@@ -1,5 +1,6 @@
 @import "./axis";
 @import "./callouts";
+@import "./error-message";
 @import "./grid-brush";
 @import "./grid";
 @import "./ruler";

packages/vue/CHANGELOG.md

@@ -7,10 +7,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 **Note:** Version bump only for package @carbon/charts-vue
 
-
-
-
-
 ## [0.34.7](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.6...v0.34.7) (2020-07-29)
 
 **Note:** Version bump only for package @carbon/charts-vue