Merge pull request #623 from natashadecoste/guage

* created gauge chart - squashed * added to react * added to all packages * resized gauge, corrected colors * fixed tooltip * two stories for gauge: circular and semicircular * hidden legend * changed perc symbol size and position, also gauge size * distance between numbers * last fix for text size * carets with svgs * fixed pixel and dominant baseline for firefox * centers caret for firefox * fixed caret size and position * adapts number size with changing of the size of the chart itself * better handling of higher arcRatios * Remove arcRatio, add gauge "type" * Fix sizing and centering of gauge chart * Fix option typings for Gauge chart * Reorganize all sizing and positioning calculations, Simplify data format * Make Gauge colors customizable from options * Gauge: Optical centering of the center number for the presence of the % small symbol * Gauge: Add configuration option for arrow color * Gauge type is now defaulted in configuration.ts * Fixed data format, removed tooltip service * Gauge: Clamp the arc at 100% * Revert "Update CHANGELOG.md" This reverts commit cce62aa. * remove changelog diff * update guage * formatting * review changes * add status, arrow direction, theme & remove spacer * fix guage to work without delta * add enter/merge/exit for value and delta * Update packages/core/src/components/graphs/gauge.ts Co-authored-by: Eliad Moosavi <[email protected]> * Update packages/core/src/configuration.ts Co-authored-by: Donisius Wigie <[email protected]> * review changes * Update packages/core/src/components/graphs/gauge.ts Co-authored-by: Donisius Wigie <[email protected]> * review comments + prettier * review changes * update config names * feat(gauge chart): add gauge chart to carbon-charts re #554 * review changes Co-authored-by: Luca Mattiazzi <[email protected]> Co-authored-by: cesare.soldini <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]> Co-authored-by: Donisius Wigie <[email protected]>
carbon-design-system · Jun 23, 2020 · dab1d01 · dab1d01
1 parent 4ecd191
commit dab1d01
Show file tree

Hide file tree

Showing 23 changed files with 954 additions and 255 deletions.
diff --git a/packages/angular/src/charts.module.ts b/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,

diff --git a/packages/angular/src/gauge-chart.component.ts b/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);
+	}
+}
diff --git a/packages/angular/src/index.ts b/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";

diff --git a/packages/core/demo/data/area.ts b/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"
 };
diff --git a/packages/core/demo/data/donut.ts b/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
+	}
 };
diff --git a/packages/core/demo/data/gauge.ts b/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"
+		}
+	}
+};