Merge branch 'master' of https://github.com/carbon-design-system/carb…

…on-charts into pie-align-center

CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.34.3](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.2...v0.34.3) (2020-07-20)
+
+**Note:** Version bump only for package @carbon/charts-monorepo
+
+
+
+
+
 ## [0.34.2](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.1...v0.34.2) (2020-07-15)
 
 **Note:** Version bump only for package @carbon/charts-monorepo

lerna.json

@@ -12,5 +12,5 @@
 			]
 		}
 	},
-	"version": "0.34.2"
+	"version": "0.34.3"
 }

packages/angular/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.34.3](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.2...v0.34.3) (2020-07-20)
+
+**Note:** Version bump only for package @carbon/charts-angular
+
+
+
+
+
 ## [0.34.2](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.1...v0.34.2) (2020-07-15)
 
 **Note:** Version bump only for package @carbon/charts-angular

packages/angular/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@carbon/charts-angular",
-	"version": "0.34.2",
+	"version": "0.34.3",
 	"description": "Carbon charting components for Angular",
 	"main": "index.js",
 	"scripts": {
@@ -40,7 +40,7 @@
 		"scss"
 	],
 	"dependencies": {
-		"@carbon/charts": "^0.34.2"
+		"@carbon/charts": "^0.34.3"
 	},
 	"peerDependencies": {
 		"@angular/common": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",

packages/angular/src/charts.module.ts

@@ -13,6 +13,7 @@ import { GaugeChartComponent } from "./gauge-chart.component";
 import { LineChartComponent } from "./line-chart.component";
 import { PieChartComponent } from "./pie-chart.component";
 import { ScatterChartComponent } from "./scatter-chart.component";
+import { MeterChartComponent } from "./meter-chart.component";
 import { RadarChartComponent } from "./radar-chart.component";
 
 @NgModule({
@@ -32,6 +33,7 @@ import { RadarChartComponent } from "./radar-chart.component";
 		LineChartComponent,
 		PieChartComponent,
 		ScatterChartComponent,
+		MeterChartComponent,
 		RadarChartComponent
 	],
 	exports: [
@@ -47,6 +49,7 @@ import { RadarChartComponent } from "./radar-chart.component";
 		LineChartComponent,
 		PieChartComponent,
 		ScatterChartComponent,
+		MeterChartComponent,
 		RadarChartComponent
 	]
 })

packages/angular/src/index.ts

@@ -11,4 +11,5 @@ export * from "./gauge-chart.component";
 export * from "./line-chart.component";
 export * from "./pie-chart.component";
 export * from "./scatter-chart.component";
+export * from "./meter-chart.component";
 export * from "./radar-chart.component";

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

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

packages/core/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.34.3](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.2...v0.34.3) (2020-07-20)
+
+**Note:** Version bump only for package @carbon/charts
+
+
+
+
+
 ## [0.34.2](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.1...v0.34.2) (2020-07-15)
 
 **Note:** Version bump only for package @carbon/charts

packages/core/demo/data/index.ts

@@ -7,6 +7,7 @@ import * as pieDemos from "./pie";
 import * as gaugeDemos from "./gauge";
 import * as scatterDemos from "./scatter";
 import * as stepDemos from "./step";
+import * as meterDemos from "./meter";
 import * as timeSeriesAxisDemos from "./time-series-axis";
 import * as radarDemos from "./radar";
 
@@ -15,6 +16,7 @@ export * from "./bar";
 export * from "./bubble";
 export * from "./donut";
 export * from "./line";
+export * from "./meter";
 export * from "./pie";
 export * from "./gauge";
 export * from "./scatter";
@@ -88,6 +90,11 @@ export const chartTypes = {
 		angular: "ibm-donut-chart",
 		vue: "ccv-donut-chart"
 	},
+	MeterChart: {
+		vanilla: "MeterChart",
+		angular: "ibm-meter-chart",
+		vue: "ccv-meter-chart"
+	},
 	RadarChart: {
 		vanilla: "RadarChart",
 		angular: "ibm-radar-chart",
@@ -444,6 +451,21 @@ let allDemoGroups = [
 			}
 		]
 	},
+	{
+		title: "Area",
+		demos: [
+			{
+				options: areaDemos.stackedAreaTimeSeriesOptions,
+				data: areaDemos.stackedAreaTimeSeriesData,
+				chartType: chartTypes.StackedAreaChart
+			},
+			{
+				options: areaDemos.stackedAreaPercentageTimeSeriesOptions,
+				data: areaDemos.stackedAreaTimeSeriesData,
+				chartType: chartTypes.StackedAreaChart
+			}
+		]
+	},
 	{
 		title: "Pie",
 		demos: [
@@ -562,6 +584,29 @@ let allDemoGroups = [
 			}
 		]
 	},
+	{
+		title: "Meter",
+		demos: [
+			{
+				options: meterDemos.meterOptionsWithStatus,
+				data: meterDemos.meterData,
+				chartType: chartTypes.MeterChart,
+				isDemoExample: true
+			},
+			{
+				options: meterDemos.meterOptionsCustomColor,
+				data: meterDemos.meterData,
+				chartType: chartTypes.MeterChart,
+				isDemoExample: true
+			},
+			{
+				options: meterDemos.meterOptionsNoStatus,
+				data: meterDemos.meterData,
+				chartType: chartTypes.MeterChart,
+				isDemoExample: true
+			}
+		]
+	},
 	{
 		title: "Time series axis",
 		demos: [
@@ -709,7 +754,9 @@ allDemoGroups = allDemoGroups.map((demoGroup) => {
 		demo.id = `${formatTitleString(demoGroup.title)}--${formatTitleString(
 			demo.options.title
 		)}`;
-		demo.options.height = "400px";
+
+		// if there isnt a height set in the chart options, use 400
+		demo.options.height = demo.options.height ?? "400px";
 
 		if (!demo.codesandbox) {
 			demo.codesandbox = {};

packages/core/demo/data/meter.ts

@@ -0,0 +1,50 @@
+export const meterData = [
+	{
+		group: "Dataset 1",
+		value: 56
+	}
+];
+
+export const meterOptionsWithStatus = {
+	title: "Meter Chart - with statuses",
+	meter: {
+		peak: 80,
+		status: {
+			ranges: [
+				{ range: [0, 50], status: "success" },
+				{ range: [50, 60], status: "warning" },
+				{ range: [60, 100], status: "danger" }
+			]
+		}
+	},
+	height: "100px"
+};
+
+export const meterOptionsCustomColor = {
+	title: "Meter Chart - statuses and custom color",
+	meter: {
+		peak: 70,
+		status: {
+			ranges: [
+				{ range: [0, 40], status: "success" },
+				{ range: [40, 60], status: "warning" },
+				{ range: [60, 100], status: "danger" }
+			]
+		}
+	},
+	color: {
+		scale: {
+			"Dataset 1": "#925699"
+		}
+	},
+	height: "100px"
+};
+
+
+export const meterOptionsNoStatus = {
+	title: "Meter Chart - no status",
+	meter: {
+		peak: 70
+	},
+	height: "100px"
+};

packages/core/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@carbon/charts",
-	"version": "0.34.2",
+	"version": "0.34.3",
 	"description": "Carbon charting components",
 	"main": "./bundle.js",
 	"module": "./index.js",

packages/core/src/charts/index.ts

@@ -8,5 +8,6 @@ export * from "./line";
 export * from "./scatter";
 export * from "./pie";
 export * from "./donut";
+export * from "./meter";
 export * from "./radar";
 export * from "./gauge";

packages/core/src/charts/meter.ts

@@ -0,0 +1,100 @@
+// Internal Imports
+import { MeterChartModel } from "../model-meter";
+import { Chart } from "../chart";
+import * as Configuration from "../configuration";
+import {
+	ChartConfig,
+	MeterChartOptions,
+	LayoutGrowth,
+	LayoutDirection
+} from "../interfaces/index";
+import { Tools } from "../tools";
+import { Meter } from "./../components/graphs/meter";
+
+// Components
+import {
+	Pie,
+	// the imports below are needed because of typescript bug (error TS4029)
+	Tooltip,
+	Legend,
+	LayoutComponent,
+	MeterTitle,
+	Spacer
+} from "../components/index";
+
+export class MeterChart extends Chart {
+	model = new MeterChartModel(this.services);
+
+	constructor(holder: Element, chartConfigs: ChartConfig<MeterChartOptions>) {
+		super(holder, chartConfigs);
+
+		// Merge the default options for this chart
+		// With the user provided options
+		this.model.setOptions(
+			Tools.merge(
+				Tools.clone(Configuration.options.meterChart),
+				chartConfigs.options
+			)
+		);
+
+		// Initialize data, services, components etc.
+		this.init(holder, chartConfigs);
+	}
+
+	getComponents() {
+		// Specify what to render inside the graph only
+		const graph = {
+			id: "meter-graph",
+			components: [
+				new Meter(this.model, this.services)
+			],
+			growth: {
+				x: LayoutGrowth.STRETCH,
+				y: LayoutGrowth.FIXED
+			}
+		};
+
+		// Meter has an unique dataset title within the graph
+		const titleComponent = {
+			id: "title",
+			components: [
+				new MeterTitle(this.model, this.services)
+			],
+			growth: {
+				x: LayoutGrowth.PREFERRED,
+				y: LayoutGrowth.FIXED
+			}
+		};
+
+		// create the title spacer
+		const titleSpacerComponent = {
+			id: "spacer",
+			components: [
+				new Spacer(this.model, this.services, {size: 8})
+			],
+			growth: {
+				x: LayoutGrowth.PREFERRED,
+				y: LayoutGrowth.FIXED
+			}
+		};
+
+		// the graph frame for meter includes the custom title (and spacer)
+		const graphFrame = [new LayoutComponent(
+			this.model,
+			this.services,
+			[
+				titleComponent,
+				titleSpacerComponent,
+				graph
+			],
+			{
+				direction: LayoutDirection.COLUMN
+			}
+		)];
+
+		// add the meter title as a top level component
+		const components: any[] = this.getChartComponents(graphFrame);
+
+		return components;
+	}
+}