Add properties xlabel and ylabel to Scatter-Chart

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add property `title` to Pie-Chart
 - Add properties `xlabel` and `ylabel` to Line-Chart
 - Add properties `xlabel` and `ylabel` to Histogram
+- Add properties `xlabel` and `ylabel` to Scatter-Chart
 
 ## [0.2.2] - 2019-10-06
 

projects/ng-charts/src/lib/components/scatterChart.ts

@@ -12,15 +12,19 @@ export class NgScatterChartComponent implements OnInit {
   $
   @Input() data
   @Input() title
+  @Input() xlabel
+  @Input() ylabel
 
   constructor() { }
 
   ngOnInit() {
     const data = this.data
     const svg = d3.select('svg')
     const title = this.title
+    const xlabel = this.xlabel
+    const ylabel = this.ylabel
 
-    const margin = {top: 25, right: 10, bottom: 10, left: 20}
+    const margin = {top: 25, right: 10, bottom: 30, left: 30}
     const width = +document.querySelector('svg').clientWidth - margin.left - margin.right
     const height = +document.querySelector('svg').clientHeight - margin.top - margin.bottom
 
@@ -41,10 +45,30 @@ export class NgScatterChartComponent implements OnInit {
     g.append('g')
       .attr('transform', `translate(0, ${height - margin.bottom})`)
       .call(d3.axisBottom(xScale))
+
+    if (xlabel) {
+      g.append('text')
+        .attr('transform',
+              'translate(' + (width / 2) + ' ,' +
+                              (height + margin.top) + ')')
+        .style('text-anchor', 'middle')
+        .text(xlabel)
+    }
+
     g.append('g')
       .attr('transform', `translate(${margin.left}, 0)`)
       .call(d3.axisLeft(yScale))
 
+    if (ylabel) {
+      g.append('text')
+        .attr('transform', 'rotate(-90)')
+        .attr('y', 0 - margin.left)
+        .attr('x', 0 - (height / 2))
+        .attr('dy', '1em')
+        .style('text-anchor', 'middle')
+        .text(ylabel)
+    }
+
     g.append('g')
       .attr('stroke', '#000')
       .attr('stroke-opacity', 0.2)

src/app/app.module.ts

@@ -28,6 +28,8 @@ const appRoutes: Routes = [
       data: Array.from({length: 3}, () => ({x: Math.random(), y: Math.pow(Math.random(), 2)})),
       properties: [
         {name: 'title', type: 'String', desc: 'Title of the plot'},
+        {name: 'xlabel', type: 'String', desc: 'Label which should be shown along the x-achses'},
+        {name: 'ylabel', type: 'String', desc: 'Label which should be shown along the y-achses'}
       ]
     }
   },

src/app/components/component/component.component.html

@@ -43,6 +43,8 @@ <h1>{{ name }}</h1>
           *ngSwitchCase="'/components/scatterchart'"
           [data]="data"
           title="Title"
+          xlabel="Keys"
+          ylabel="Values"
         ></lib-scatter-chart>
       </div>
     </div>