style(charts): refactoring components hierarchy

2025-12-20 01:10:13 +01:00 · 2017-07-26 19:59:47 +03:00 · 2017-07-26 19:59:47 +03:00 · cf9ccf1850
commit cf9ccf1850
parent 2d16bad88f
25 changed files with 179 additions and 44 deletions
--- a/src/app/pages/charts/d3/d3-line.component.ts
+++ b/src/app/pages/charts/d3/d3-line.component.ts
@ -0,0 +1,73 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-d3-line',
+  template: `
+    <ngx-charts-line-chart
+      [view]="view"
+      [scheme]="colorScheme"
+      [results]="multi"
+      [xAxis]="showXAxis"
+      [yAxis]="showYAxis"
+      [legend]="showLegend"
+      [showXAxisLabel]="showXAxisLabel"
+      [showYAxisLabel]="showYAxisLabel"
+      [xAxisLabel]="xAxisLabel"
+      [yAxisLabel]="yAxisLabel">
+    </ngx-charts-line-chart>
+  `,
+})
+export class D3LineComponent {
+
+  multi = [{
+    name: 'Germany',
+    series: [{
+      name: '2010',
+      value: 7300000,
+    }, {
+      name: '2011',
+      value: 8940000,
+    }],
+  }, {
+    name: 'USA',
+    series: [{
+      name: '2010',
+      value: 7870000,
+    }, {
+      name: '2011',
+      value: 8270000,
+    }],
+  }, {
+    name: 'France',
+    series: [{
+      name: '2010',
+      value: 5000002,
+    }, {
+      name: '2011',
+      value: 5800000,
+    }],
+  }];
+
+  view: any[] = [700, 400];
+
+  showLegend = true;
+
+  colorScheme = {
+    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
+  };
+
+  showXAxis = true;
+
+  showYAxis = true;
+
+  showLabels = true;
+
+  showXAxisLabel = true;
+
+  xAxisLabel = 'Country';
+
+  showYAxisLabel = true;
+
+  yAxisLabel = 'Population';
+
+}