From 2aac8508d3bbf0b05ec56bf1dfeae827c3b400e9 Mon Sep 17 00:00:00 2001 From: Stanislav Georgiev Date: Tue, 9 Jul 2019 15:59:24 -0400 Subject: [PATCH 1/3] feat(scatter): Add Scatter to the Angular package and storybook --- README.md | 3 +- package.json | 2 +- packages/angular/src/charts.module.ts | 7 +++- .../angular/src/scatter-chart.component.ts | 37 +++++++++++++++++++ packages/angular/stories/scatter.stories.ts | 31 ++++++++++++++++ .../stories/scatter/scatter.component.html | 11 ++++++ .../stories/scatter/scatter.component.ts | 31 ++++++++++++++++ 7 files changed, 118 insertions(+), 4 deletions(-) create mode 100644 packages/angular/src/scatter-chart.component.ts create mode 100644 packages/angular/stories/scatter.stories.ts create mode 100644 packages/angular/stories/scatter/scatter.component.html create mode 100644 packages/angular/stories/scatter/scatter.component.ts diff --git a/README.md b/README.md index b4dda63898..de1fed36cf 100644 --- a/README.md +++ b/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 | - | - | - | diff --git a/package.json b/package.json index f58dae2a56..b0f6b92bb1 100644 --- a/package.json +++ b/package.json @@ -54,4 +54,4 @@ "email": "iliadm@ca.ibm.com" } ] -} \ No newline at end of file +} diff --git a/packages/angular/src/charts.module.ts b/packages/angular/src/charts.module.ts index 6bd7b53e10..756730882f 100644 --- a/packages/angular/src/charts.module.ts +++ b/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 ] }) diff --git a/packages/angular/src/scatter-chart.component.ts b/packages/angular/src/scatter-chart.component.ts new file mode 100644 index 0000000000..8833c38d39 --- /dev/null +++ b/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: ` +
+
+ ` +}) +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); + } +} diff --git a/packages/angular/stories/scatter.stories.ts b/packages/angular/stories/scatter.stories.ts new file mode 100644 index 0000000000..8341df50fe --- /dev/null +++ b/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}) + } +})); diff --git a/packages/angular/stories/scatter/scatter.component.html b/packages/angular/stories/scatter/scatter.component.html new file mode 100644 index 0000000000..133a057318 --- /dev/null +++ b/packages/angular/stories/scatter/scatter.component.html @@ -0,0 +1,11 @@ +
+ + + + +
diff --git a/packages/angular/stories/scatter/scatter.component.ts b/packages/angular/stories/scatter/scatter.component.ts new file mode 100644 index 0000000000..25914a9db2 --- /dev/null +++ b/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; + } +} From 3f62714cb688bd3c6421d2e5b36a02e3baf2cafc Mon Sep 17 00:00:00 2001 From: Stanislav Georgiev Date: Wed, 10 Jul 2019 09:28:11 -0400 Subject: [PATCH 2/3] feat(Angular): Add Scatter to the Angular package, storybook and readme 300 --- README.md | 4 ++-- packages/angular/stories/scatter.stories.ts | 15 ++------------- 2 files changed, 4 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index de1fed36cf..efcc91ffd3 100644 --- a/README.md +++ b/README.md @@ -95,8 +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: -| Scatter | :white_check_mark: | :white_check_mark: | :white_check_mark: | :hourglass_flowing_sand: -| Step | :white_check_mark: | :hourglass_flowing_sand: | - | - +| Step | :white_check_mark: | :white_check_mark: | :white_check_mark: | :hourglass_flowing_sand: +| Scatter | :white_check_mark: | :hourglass_flowing_sand: | - | - | Combo | :hourglass_flowing_sand: | - | - | - | Area | Soon | - | - | - | diff --git a/packages/angular/stories/scatter.stories.ts b/packages/angular/stories/scatter.stories.ts index 8341df50fe..3b568e40ec 100644 --- a/packages/angular/stories/scatter.stories.ts +++ b/packages/angular/stories/scatter.stories.ts @@ -7,8 +7,8 @@ import { ScatterComponent } from "./scatter/scatter.component"; import { scatterData, lineOptions } from "./../../core/demo/demo-data/line"; -const pieStories = storiesOf("Scatter", module); -pieStories.add("Basic", () => ({ +const scatterStories = storiesOf("Scatter", module); +scatterStories.add("Basic", () => ({ component: ScatterComponent, moduleMetadata: { imports: [ChartsModule] @@ -18,14 +18,3 @@ pieStories.add("Basic", () => ({ scatterOptions: lineOptions } })); - -pieStories.add("Accessible", () => ({ - component: ScatterComponent, - moduleMetadata: { - imports: [ChartsModule] - }, - props: { - scatterData: scatterData, - scatterOptions: Object.assign({}, lineOptions, {accessibility: true}) - } -})); From c6f268c92e12ee4a8e0317cb84a9700c1412ca9c Mon Sep 17 00:00:00 2001 From: Stanislav Georgiev Date: Wed, 10 Jul 2019 10:42:56 -0400 Subject: [PATCH 3/3] chore(readme): Updated component status --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index efcc91ffd3..f35e896ab2 100644 --- a/README.md +++ b/README.md @@ -95,7 +95,7 @@ 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: +| Step | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | Scatter | :white_check_mark: | :hourglass_flowing_sand: | - | - | Combo | :hourglass_flowing_sand: | - | - | - | Area | Soon | - | - | - |