feat(scatter): Add Scatter to the Angular package and storybook

README.md

@@ -95,7 +95,8 @@ npm install @carbon/charts --save
 | Line        | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark:
 | Curved Line | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark:
 | Pie         | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark:
-| Step        | :white_check_mark: | :white_check_mark: | :white_check_mark: | :hourglass_flowing_sand:
+| Scatter     | :white_check_mark: | :white_check_mark: | :white_check_mark: | :hourglass_flowing_sand:
+| Step        | :white_check_mark: | :hourglass_flowing_sand: | - | -
 | Combo       | :hourglass_flowing_sand: | - | - | -
 | Area        | Soon | - | - | - |
 

package.json

@@ -54,4 +54,4 @@
 			"email": "iliadm@ca.ibm.com"
 		}
 	]
-}
+}

packages/angular/src/charts.module.ts

@@ -8,6 +8,7 @@ import { DonutChartComponent } from "./donut-chart.component";
 import { PieChartComponent } from "./pie-chart.component";
 import { BarChartComponent } from "./bar-chart.component";
 import { LineChartComponent } from "./line-chart.component";
+import { ScatterChartComponent } from "./scatter-chart.component";
 
 @NgModule({
 	imports: [
@@ -19,13 +20,15 @@ import { LineChartComponent } from "./line-chart.component";
 		DonutChartComponent,
 		PieChartComponent,
 		BarChartComponent,
-		LineChartComponent
+		LineChartComponent,
+		ScatterChartComponent
 	],
 	exports: [
 		DonutChartComponent,
 		PieChartComponent,
 		BarChartComponent,
-		LineChartComponent
+		LineChartComponent,
+		ScatterChartComponent
 	]
 })
 

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

@@ -0,0 +1,37 @@
+import {
+	Component,
+	AfterViewInit
+} from "@angular/core";
+
+import { BaseChart } from "./base-chart.component";
+
+import { ScatterChart } from "@carbon/charts";
+
+/**
+ * Wrapper around `ScatterChart` in carbon charts library
+ *
+ * Most functions just call their equivalent from the chart library.
+ */
+@Component({
+	selector: "n-scatter-chart",
+	template: `
+		<div #nChart class='n-chart-container'>
+		</div>
+	`
+})
+export class ScatterChartComponent extends BaseChart implements AfterViewInit {
+	/**
+	 * Runs after view init to create a chart, attach it to `chartRef` and draw it.
+	 */
+	ngAfterViewInit() {
+		this.chart = new ScatterChart(
+			this.chartRef.nativeElement,
+			{
+				data: this.data,
+				options: this.options
+			}
+		);
+
+		Object.assign(this, this.chart);
+	}
+}

packages/angular/stories/scatter.stories.ts

@@ -0,0 +1,31 @@
+import { storiesOf } from "@storybook/angular";
+
+import { colors } from "./helpers/commons";
+
+import { ChartsModule } from "../src/charts.module";
+import { ScatterComponent } from "./scatter/scatter.component";
+
+import { scatterData, lineOptions } from "./../../core/demo/demo-data/line";
+
+const pieStories = storiesOf("Scatter", module);
+pieStories.add("Basic", () => ({
+	component: ScatterComponent,
+	moduleMetadata: {
+		imports: [ChartsModule]
+	},
+	props: {
+		scatterData: scatterData,
+		scatterOptions: lineOptions
+	}
+}));
+
+pieStories.add("Accessible", () => ({
+	component: ScatterComponent,
+	moduleMetadata: {
+		imports: [ChartsModule]
+	},
+	props: {
+		scatterData: scatterData,
+		scatterOptions: Object.assign({}, lineOptions, {accessibility: true})
+	}
+}));

packages/angular/stories/scatter/scatter.component.html

@@ -0,0 +1,11 @@
+<div style="margin: 30px;">
+	<n-scatter-chart
+		class="n-chart"
+		[data]="scatterData"
+    [options]="scatterOptions"
+    style="height: 500px;"
+    #scatterChart>
+	</n-scatter-chart>
+
+	<button class="btn--primary" (click)="changeDemoData()">Change Data</button>
+</div>

packages/angular/stories/scatter/scatter.component.ts

@@ -0,0 +1,31 @@
+import { Component, ViewChild } from "@angular/core";
+
+import { colors, randomizeValue } from "../helpers/commons";
+import { Input } from "@angular/core";
+
+@Component({
+	selector: "app-scatter",
+	templateUrl: "./scatter.component.html"
+})
+export class ScatterComponent {
+	@ViewChild("scatterChart") scatterChart;
+
+	@Input() scatterOptions = {};
+	@Input() scatterData = {};
+
+	changeDemoData() {
+		const oldData = this.scatterChart.data;
+
+		// Randomize old data values
+		const newData = Object.assign({}, oldData);
+		newData.datasets = oldData.datasets.map(dataset => {
+			const datasetNewData = dataset.data.map(dataPoint => randomizeValue(dataPoint, false));
+
+			const newDataset = Object.assign({}, dataset, { data: datasetNewData });
+
+			return newDataset;
+		});
+
+		this.scatterData = newData;
+	}
+}