curve fitting on combo chart

projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts

@@ -93,6 +93,7 @@ import { isPlatformServer } from '@angular/common';
                 [activeEntries]="activeEntries"
                 [scaleType]="scaleType"
                 [curve]="curve"
+                [tension]="tension"
                 [rangeFillOpacity]="rangeFillOpacity"
                 [hasRange]="hasRange"
                 [animations]="animations"
@@ -236,6 +237,7 @@ export class LineChartComponent extends BaseChartComponent implements OnInit {
   @Input() yScaleMin: number;
   @Input() yScaleMax: number;
   @Input() wrapTicks = false;
+  @Input() tension: number;
 
   @Output() activate: EventEmitter<any> = new EventEmitter();
   @Output() deactivate: EventEmitter<any> = new EventEmitter();

projects/swimlane/ngx-charts/src/lib/line-chart/line-series.component.ts

@@ -1,6 +1,5 @@
 import { Component, Input, OnChanges, SimpleChanges, ChangeDetectionStrategy } from '@angular/core';
-import { area, line } from 'd3-shape';
-
+import { area, curveCardinal, curveCatmullRom, line } from 'd3-shape';
 import { id } from '../utils/id';
 import { sortLinear, sortByTime, sortByDomain } from '../utils/sort';
 import { ColorHelper } from '../common/color.helper';
@@ -69,6 +68,7 @@ export class LineSeriesComponent implements OnChanges {
   @Input() colors: ColorHelper;
   @Input() scaleType: ScaleType;
   @Input() curve: any;
+  @Input() tension: number;
   @Input() activeEntries: any[];
   @Input() rangeFillOpacity: number;
   @Input() hasRange: boolean;
@@ -120,21 +120,55 @@ export class LineSeriesComponent implements OnChanges {
   }
 
   getLineGenerator(): any {
-    return line<any>()
-      .x(d => {
-        const label = d.name;
-        let value;
-        if (this.scaleType === ScaleType.Time) {
-          value = this.xScale(label);
-        } else if (this.scaleType === ScaleType.Linear) {
-          value = this.xScale(Number(label));
-        } else {
-          value = this.xScale(label);
-        }
-        return value;
-      })
-      .y(d => this.yScale(d.value))
-      .curve(this.curve);
+    if (this.curve == curveCatmullRom) {
+      return line<any>()
+        .x(d => {
+          const label = d.name;
+          let value;
+          if (this.scaleType === ScaleType.Time) {
+            value = this.xScale(label);
+          } else if (this.scaleType === ScaleType.Linear) {
+            value = this.xScale(Number(label));
+          } else {
+            value = this.xScale(label);
+          }
+          return value;
+        })
+        .y(d => this.yScale(d.value))
+        .curve(this.curve.alpha(this.tension));
+    } else if (this.curve == curveCardinal) {
+      return line<any>()
+        .x(d => {
+          const label = d.name;
+          let value;
+          if (this.scaleType === ScaleType.Time) {
+            value = this.xScale(label);
+          } else if (this.scaleType === ScaleType.Linear) {
+            value = this.xScale(Number(label));
+          } else {
+            value = this.xScale(label);
+          }
+          return value;
+        })
+        .y(d => this.yScale(d.value))
+        .curve(this.curve.tension(this.tension));
+    } else {
+      return line<any>()
+        .x(d => {
+          const label = d.name;
+          let value;
+          if (this.scaleType === ScaleType.Time) {
+            value = this.xScale(label);
+          } else if (this.scaleType === ScaleType.Linear) {
+            value = this.xScale(Number(label));
+          } else {
+            value = this.xScale(label);
+          }
+          return value;
+        })
+        .y(d => this.yScale(d.value))
+        .curve(this.curve);
+    }
   }
 
   getRangeGenerator(): any {

src/app/app.component.html

@@ -371,6 +371,7 @@
         [timeline]="timeline"
         [showGridLines]="showGridLines"
         [curve]="curve"
+        [tension]="tension"
         [rangeFillOpacity]="rangeFillOpacity"
         [roundDomains]="roundDomains"
         [tooltipDisabled]="tooltipDisabled"
@@ -594,6 +595,8 @@
         [yAxisLabelRight]="yAxisLabelRight"
         [noBarWhenZero]="noBarWhenZero"
         [wrapTicks]="wrapTicks"
+        [curve]="curve"
+        [tension]="tension"
         (select)="onSelect($event)"
       >
       </combo-chart-component>
@@ -1449,6 +1452,11 @@ <h3 (click)="optsVisible = !optsVisible" style="cursor: pointer">
               {{ interpolationType }}
             </option>
           </select>
+          <div *ngIf="isTensionSliderRequired(curveType)">
+            <label for="tensionSlider">Degree of Curvature:</label>
+            <input id="tensionSlider" type="range" min="0" max="1" step="0.01" [(ngModel)]="tension">
+            <span>{{ tension }}</span>
+          </div>
         </div>
         <div *ngIf="chart.options.includes('curveClosed')">
           <label>Line Interpolation</label>

src/app/app.component.ts

@@ -154,6 +154,7 @@ export class AppComponent implements OnInit {
     'Step After',
     'Step Before'
   ];
+  tension: number = 0.5;
 
   closedCurveType: string = 'Linear Closed';
   closedCurve: any = this.curves[this.closedCurveType];
@@ -542,6 +543,11 @@ export class AppComponent implements OnInit {
     return this.curves[curveType] || this.curves['default'];
   }
 
+  isTensionSliderRequired(curveType) {
+    return this.curves[curveType] == this.curves['Cardinal'] ||
+      this.curves[curveType] == this.curves['Catmull Rom'];
+  }
+
   setColorScheme(name) {
     this.selectedColorScheme = name;
     this.colorScheme = this.colorSets.find(s => s.name === name);

src/app/chartTypes.ts

@@ -350,6 +350,7 @@ const chartGroups = [
           'timeline',
           'showGridLines',
           'curve',
+          'tension',
           'rangeFillOpacity',
           'roundDomains',
           'tooltipDisabled',
@@ -708,7 +709,9 @@ const chartGroups = [
           'yAxisLabel',
           'showGridLines',
           'roundDomains',
-          'tooltipDisabled'
+          'tooltipDisabled',
+          'curve',
+          'tension'
         ]
       },
       {

src/app/custom-charts/combo-chart/combo-chart.component.html

@@ -77,6 +77,7 @@
           [activeEntries]="activeEntries"
           [scaleType]="scaleType"
           [curve]="curve"
+          [tension]="tension"
           [rangeFillOpacity]="rangeFillOpacity"
           [animations]="animations"
         />

src/app/custom-charts/combo-chart/combo-chart.component.ts

@@ -32,6 +32,7 @@ import {
 })
 export class ComboChartComponent extends BaseChartComponent {
   @Input() curve: any = curveLinear;
+  @Input() tension: number;
   @Input() legend = false;
   @Input() legendTitle: string = 'Legend';
   @Input() legendPosition: string = 'right';