From cbeefd9b606df7f56381d4a0a8c979100e336076 Mon Sep 17 00:00:00 2001 From: kedi Date: Wed, 18 Oct 2023 22:21:00 -0400 Subject: [PATCH 1/7] curve fitting on combo chart --- src/app/app.component.html | 1 + src/app/chartTypes.ts | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 6dd4b53cc..dca03c463 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -594,6 +594,7 @@ [yAxisLabelRight]="yAxisLabelRight" [noBarWhenZero]="noBarWhenZero" [wrapTicks]="wrapTicks" + [curve]="curve" (select)="onSelect($event)" > diff --git a/src/app/chartTypes.ts b/src/app/chartTypes.ts index 5e902dddd..4c1b3d8fd 100644 --- a/src/app/chartTypes.ts +++ b/src/app/chartTypes.ts @@ -701,7 +701,8 @@ const chartGroups = [ 'yAxisLabel', 'showGridLines', 'roundDomains', - 'tooltipDisabled' + 'tooltipDisabled', + 'curve' ] }, { From 290ac956ede9996d50aab55cd7a2fbf3ff5b3233 Mon Sep 17 00:00:00 2001 From: kedi Date: Wed, 25 Oct 2023 21:49:32 -0400 Subject: [PATCH 2/7] added slidebar to change tension of curve --- .../lib/line-chart/line-chart.component.ts | 4 +- .../lib/line-chart/line-series.component.ts | 41 +++++++++++++++++-- src/app/app.component.html | 7 ++++ src/app/app.component.ts | 6 ++- src/app/chartTypes.ts | 4 +- .../combo-chart/combo-chart.component.html | 1 + .../combo-chart/combo-chart.component.ts | 1 + 7 files changed, 58 insertions(+), 6 deletions(-) diff --git a/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts b/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts index 3d714c233..26b6d7f6e 100644 --- a/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts +++ b/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts @@ -11,7 +11,7 @@ import { OnInit } from '@angular/core'; import { trigger, style, animate, transition } from '@angular/animations'; -import { scaleLinear, scaleTime, scalePoint } from 'd3-scale'; +import { scaleLinear, scaleTime, scalePoint, NumberValue } from 'd3-scale'; import { curveLinear } from 'd3-shape'; import { calculateViewDimensions } from '../common/view-dimensions.helper'; @@ -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 = new EventEmitter(); @Output() deactivate: EventEmitter = new EventEmitter(); diff --git a/projects/swimlane/ngx-charts/src/lib/line-chart/line-series.component.ts b/projects/swimlane/ngx-charts/src/lib/line-chart/line-series.component.ts index 15e5921c8..626086192 100644 --- a/projects/swimlane/ngx-charts/src/lib/line-chart/line-series.component.ts +++ b/projects/swimlane/ngx-charts/src/lib/line-chart/line-series.component.ts @@ -1,6 +1,6 @@ import { Component, Input, OnChanges, SimpleChanges, ChangeDetectionStrategy } from '@angular/core'; -import { area, line } from 'd3-shape'; - +import { area, curveBundle, curveCardinal, curveCatmullRom, line } from 'd3-shape'; +import { curveLinear } from 'd3-shape'; import { id } from '../utils/id'; import { sortLinear, sortByTime, sortByDomain } from '../utils/sort'; import { ColorHelper } from '../common/color.helper'; @@ -69,6 +69,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,7 +121,40 @@ export class LineSeriesComponent implements OnChanges { } getLineGenerator(): any { - return line() + if (this.curve == curveCatmullRom) { + return line() + .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() + .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() .x(d => { const label = d.name; let value; @@ -135,6 +169,7 @@ export class LineSeriesComponent implements OnChanges { }) .y(d => this.yScale(d.value)) .curve(this.curve); + } } getRangeGenerator(): any { diff --git a/src/app/app.component.html b/src/app/app.component.html index dca03c463..8c7b4f4f8 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -371,6 +371,7 @@ [timeline]="timeline" [showGridLines]="showGridLines" [curve]="curve" + [tension]="tension" [rangeFillOpacity]="rangeFillOpacity" [roundDomains]="roundDomains" [tooltipDisabled]="tooltipDisabled" @@ -595,6 +596,7 @@ [noBarWhenZero]="noBarWhenZero" [wrapTicks]="wrapTicks" [curve]="curve" + [tension]="tension" (select)="onSelect($event)" > @@ -1434,6 +1436,11 @@

{{ interpolationType }} +
+ + + {{ tension }} +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9e4084f74..814a6e418 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -153,6 +153,7 @@ export class AppComponent implements OnInit { 'Step After', 'Step Before' ]; + tension: number = 0.5; closedCurveType: string = 'Linear Closed'; closedCurve: any = this.curves[this.closedCurveType]; @@ -537,7 +538,10 @@ export class AppComponent implements OnInit { getInterpolationType(curveType) { 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); diff --git a/src/app/chartTypes.ts b/src/app/chartTypes.ts index 4c1b3d8fd..6f8ec0f64 100644 --- a/src/app/chartTypes.ts +++ b/src/app/chartTypes.ts @@ -350,6 +350,7 @@ const chartGroups = [ 'timeline', 'showGridLines', 'curve', + 'tension', 'rangeFillOpacity', 'roundDomains', 'tooltipDisabled', @@ -702,7 +703,8 @@ const chartGroups = [ 'showGridLines', 'roundDomains', 'tooltipDisabled', - 'curve' + 'curve', + 'tension' ] }, { diff --git a/src/app/custom-charts/combo-chart/combo-chart.component.html b/src/app/custom-charts/combo-chart/combo-chart.component.html index 7e5732575..1a5335837 100644 --- a/src/app/custom-charts/combo-chart/combo-chart.component.html +++ b/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" /> diff --git a/src/app/custom-charts/combo-chart/combo-chart.component.ts b/src/app/custom-charts/combo-chart/combo-chart.component.ts index 03e24d2b9..d53aef920 100644 --- a/src/app/custom-charts/combo-chart/combo-chart.component.ts +++ b/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'; From ea8abd34f78a49166b2845853d7629ba6a5d5e6a Mon Sep 17 00:00:00 2001 From: kedi Date: Wed, 25 Oct 2023 22:17:58 -0400 Subject: [PATCH 3/7] small fix --- .../ngx-charts/src/lib/line-chart/line-chart.component.ts | 2 +- .../ngx-charts/src/lib/line-chart/line-series.component.ts | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts b/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts index 26b6d7f6e..42969cd42 100644 --- a/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts +++ b/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts @@ -11,7 +11,7 @@ import { OnInit } from '@angular/core'; import { trigger, style, animate, transition } from '@angular/animations'; -import { scaleLinear, scaleTime, scalePoint, NumberValue } from 'd3-scale'; +import { scaleLinear, scaleTime, scalePoint } from 'd3-scale'; import { curveLinear } from 'd3-shape'; import { calculateViewDimensions } from '../common/view-dimensions.helper'; diff --git a/projects/swimlane/ngx-charts/src/lib/line-chart/line-series.component.ts b/projects/swimlane/ngx-charts/src/lib/line-chart/line-series.component.ts index 626086192..50663760e 100644 --- a/projects/swimlane/ngx-charts/src/lib/line-chart/line-series.component.ts +++ b/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, curveBundle, curveCardinal, curveCatmullRom, line } from 'd3-shape'; -import { curveLinear } 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'; From 0094ec78fb689f44a70ff256357bbbca689b33b8 Mon Sep 17 00:00:00 2001 From: kedij777 <98619414+kedij777@users.noreply.github.com> Date: Sun, 7 Jan 2024 17:53:46 -0500 Subject: [PATCH 4/7] Update src/app/app.component.ts Co-authored-by: Yuqing Liu <47932418+Lyq322@users.noreply.github.com> --- src/app/app.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 814a6e418..6a2bec2e0 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -542,6 +542,7 @@ export class AppComponent implements OnInit { 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); From 3caa22d6649d0b08ca631757c6e0a2c4398bbfde Mon Sep 17 00:00:00 2001 From: kedij777 <98619414+kedij777@users.noreply.github.com> Date: Sun, 7 Jan 2024 17:54:08 -0500 Subject: [PATCH 5/7] Update src/app/app.component.ts Co-authored-by: Yuqing Liu <47932418+Lyq322@users.noreply.github.com> --- src/app/app.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 6a2bec2e0..c580916c2 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -540,7 +540,7 @@ export class AppComponent implements OnInit { } isTensionSliderRequired(curveType) { return this.curves[curveType] == this.curves['Cardinal'] || - this.curves[curveType] == this.curves['Catmull Rom']; + this.curves[curveType] == this.curves['Catmull Rom']; } setColorScheme(name) { From 529c2647e342037deb1118db443862eb757d66c3 Mon Sep 17 00:00:00 2001 From: kedij777 <98619414+kedij777@users.noreply.github.com> Date: Sun, 7 Jan 2024 17:54:20 -0500 Subject: [PATCH 6/7] Update projects/swimlane/ngx-charts/src/lib/line-chart/line-series.component.ts Co-authored-by: Yuqing Liu <47932418+Lyq322@users.noreply.github.com> --- .../lib/line-chart/line-series.component.ts | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/projects/swimlane/ngx-charts/src/lib/line-chart/line-series.component.ts b/projects/swimlane/ngx-charts/src/lib/line-chart/line-series.component.ts index 50663760e..fcc92eb5d 100644 --- a/projects/swimlane/ngx-charts/src/lib/line-chart/line-series.component.ts +++ b/projects/swimlane/ngx-charts/src/lib/line-chart/line-series.component.ts @@ -138,20 +138,20 @@ export class LineSeriesComponent implements OnChanges { .curve(this.curve.alpha(this.tension)); } else if (this.curve == curveCardinal) { return line() - .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)); + .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() .x(d => { From 216a6143e9854537bcb720f4fe3f5c2c32a0a9ea Mon Sep 17 00:00:00 2001 From: kedij777 <98619414+kedij777@users.noreply.github.com> Date: Sun, 7 Jan 2024 17:54:42 -0500 Subject: [PATCH 7/7] Update projects/swimlane/ngx-charts/src/lib/line-chart/line-series.component.ts Co-authored-by: Yuqing Liu <47932418+Lyq322@users.noreply.github.com> --- .../lib/line-chart/line-series.component.ts | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/projects/swimlane/ngx-charts/src/lib/line-chart/line-series.component.ts b/projects/swimlane/ngx-charts/src/lib/line-chart/line-series.component.ts index fcc92eb5d..795d9deac 100644 --- a/projects/swimlane/ngx-charts/src/lib/line-chart/line-series.component.ts +++ b/projects/swimlane/ngx-charts/src/lib/line-chart/line-series.component.ts @@ -122,20 +122,20 @@ export class LineSeriesComponent implements OnChanges { getLineGenerator(): any { if (this.curve == curveCatmullRom) { return line() - .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)); + .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() .x(d => {