Gauge

packages/angular/src/charts.module.ts

@@ -9,6 +9,7 @@ import { GroupedBarChartComponent } from "./bar-chart-grouped.component";
 import { StackedBarChartComponent } from "./bar-chart-stacked.component";
 import { BubbleChartComponent } from "./bubble-chart.component";
 import { DonutChartComponent } from "./donut-chart.component";
+import { GaugeChartComponent } from "./gauge-chart.component";
 import { LineChartComponent } from "./line-chart.component";
 import { PieChartComponent } from "./pie-chart.component";
 import { ScatterChartComponent } from "./scatter-chart.component";
@@ -27,6 +28,7 @@ import { RadarChartComponent } from "./radar-chart.component";
 		StackedBarChartComponent,
 		BubbleChartComponent,
 		DonutChartComponent,
+		GaugeChartComponent,
 		LineChartComponent,
 		PieChartComponent,
 		ScatterChartComponent,
@@ -41,6 +43,7 @@ import { RadarChartComponent } from "./radar-chart.component";
 		StackedBarChartComponent,
 		BubbleChartComponent,
 		DonutChartComponent,
+		GaugeChartComponent,
 		LineChartComponent,
 		PieChartComponent,
 		ScatterChartComponent,

packages/angular/src/gauge-chart.component.ts

@@ -0,0 +1,34 @@
+import {
+	Component,
+	AfterViewInit
+} from "@angular/core";
+
+import { BaseChart } from "./base-chart.component";
+
+import { GaugeChart } from "@carbon/charts";
+
+/**
+ * Wrapper around `GaugeChart` in carbon charts library
+ *
+ * Most functions just call their equivalent from the chart library.
+ */
+@Component({
+	selector: "ibm-gauge-chart",
+	template: ``
+})
+export class GaugeChartComponent extends BaseChart implements AfterViewInit {
+	/**
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
+	 */
+	ngAfterViewInit() {
+		this.chart = new GaugeChart(
+			this.elementRef.nativeElement,
+			{
+				data: this.data,
+				options: this.options
+			}
+		);
+
+		Object.assign(this, this.chart);
+	}
+}

packages/angular/src/index.ts

@@ -7,6 +7,7 @@ export * from "./bar-chart-grouped.component";
 export * from "./bar-chart-stacked.component";
 export * from "./bubble-chart.component";
 export * from "./donut-chart.component";
+export * from "./gauge-chart.component";
 export * from "./line-chart.component";
 export * from "./pie-chart.component";
 export * from "./scatter-chart.component";

packages/core/demo/data/area.ts

@@ -13,7 +13,7 @@ export const areaTimeSeriesData = [
 	{ group: "Dataset 3", date: new Date(2019, 0, 6), value: 37312 },
 	{ group: "Dataset 3", date: new Date(2019, 0, 8), value: 51432 },
 	{ group: "Dataset 3", date: new Date(2019, 0, 13), value: 40323 },
-	{ group: "Dataset 3", date: new Date(2019, 0, 19), value: 31300 },
+	{ group: "Dataset 3", date: new Date(2019, 0, 19), value: 31300 }
 ];
 
 export const areaTimeSeriesOptions = {
@@ -22,14 +22,14 @@ export const areaTimeSeriesOptions = {
 		bottom: {
 			title: "2019 Annual Sales Figures",
 			mapsTo: "date",
-			scaleType: "time",
+			scaleType: "time"
 		},
 		left: {
 			mapsTo: "value",
 			title: "Conversion rate",
-			scaleType: "linear",
-		},
-	},
+			scaleType: "linear"
+		}
+	}
 };
 
 export const areaTimeSeriesCurvedData = [
@@ -42,7 +42,7 @@ export const areaTimeSeriesCurvedData = [
 	{ group: "Dataset 2", date: new Date(2019, 0, 5), value: 14178 },
 	{ group: "Dataset 2", date: new Date(2019, 0, 8), value: 23094 },
 	{ group: "Dataset 2", date: new Date(2019, 0, 13), value: 45281 },
-	{ group: "Dataset 2", date: new Date(2019, 0, 19), value: -63954 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 19), value: -63954 }
 ];
 
 export const areaTimeSeriesCurvedOptions = {
@@ -51,14 +51,14 @@ export const areaTimeSeriesCurvedOptions = {
 		bottom: {
 			title: "2019 Annual Sales Figures",
 			mapsTo: "date",
-			scaleType: "time",
+			scaleType: "time"
 		},
 		left: {
 			mapsTo: "value",
-			scaleType: "linear",
-		},
+			scaleType: "linear"
+		}
 	},
-	curve: "curveNatural",
+	curve: "curveNatural"
 };
 
 export const stackedAreaTimeSeriesData = [
@@ -76,20 +76,20 @@ export const stackedAreaTimeSeriesData = [
 	{ group: "Dataset 3", date: new Date(2019, 0, 5), value: 20000 },
 	{ group: "Dataset 3", date: new Date(2019, 0, 8), value: 40000 },
 	{ group: "Dataset 3", date: new Date(2019, 0, 13), value: 60213 },
-	{ group: "Dataset 3", date: new Date(2019, 0, 17), value: 25213 },
+	{ group: "Dataset 3", date: new Date(2019, 0, 17), value: 25213 }
 ];
 
 export const stackedAreaTimeSeriesOptions = {
 	title: "Stacked area (time series)",
 	axes: {
 		left: {
-			stacked: true,
+			stacked: true
 		},
 		bottom: {
-			scaleType: "time",
-		},
+			scaleType: "time"
+		}
 	},
-	curve: "curveMonotoneX",
+	curve: "curveMonotoneX"
 };
 
 export const stackedAreaPercentageTimeSeriesOptions = {
@@ -99,12 +99,12 @@ export const stackedAreaPercentageTimeSeriesOptions = {
 			stacked: true,
 			percentage: true,
 			ticks: {
-				formatter: (d) => `${d}%`,
-			},
+				formatter: (d) => `${d}%`
+			}
 		},
 		bottom: {
-			scaleType: "time",
-		},
+			scaleType: "time"
+		}
 	},
-	curve: "curveMonotoneX",
+	curve: "curveMonotoneX"
 };

packages/core/demo/data/donut.ts

@@ -7,9 +7,9 @@ export const donutOptions = {
 	resizable: true,
 	donut: {
 		center: {
-			label: "Browsers",
-		},
-	},
+			label: "Browsers"
+		}
+	}
 };
 
 // donut - empty state
@@ -19,9 +19,9 @@ export const donutEmptyStateOptions = {
 	resizable: true,
 	donut: {
 		center: {
-			label: "Browsers",
-		},
-	},
+			label: "Browsers"
+		}
+	}
 };
 
 // donut - skeleton
@@ -31,10 +31,10 @@ export const donutSkeletonOptions = {
 	resizable: true,
 	donut: {
 		center: {
-			label: "Browsers",
-		},
+			label: "Browsers"
+		}
 	},
 	data: {
-		loading: true,
-	},
+		loading: true
+	}
 };

packages/core/demo/data/gauge.ts

@@ -0,0 +1,44 @@
+export const gaugeData = [
+	{ group: "value", value: 42 },
+	{ group: "delta", value: -13.37 }
+];
+
+export const gaugeDataNoDelta = [{ group: "value", value: 67 }];
+
+// guage no custom color
+export const gaugeOptionsSemi = {
+	title: "Gauge semicircular -- danger status",
+	resizable: true,
+	height: "250px",
+	width: "100%",
+	gauge: {
+		type: "semi",
+		status: "danger"
+	}
+};
+
+// guage with custom color
+export const gaugeOptionsCircular = {
+	title: "Gauge circular -- warning status",
+	resizable: true,
+	height: "250px",
+	gauge: {
+		status: "warning",
+		type: "full"
+	}
+};
+
+// guage with custom color
+export const gaugeOptionsCircularNoDelta = {
+	title: "Gauge circular without delta",
+	resizable: true,
+	height: "250px",
+	gauge: {
+		type: "full"
+	},
+	color: {
+		scale: {
+			value: "#891EE8"
+		}
+	}
+};