From aed4b781e7796715cf67b09139d4734f0634778b Mon Sep 17 00:00:00 2001 From: Syrena12 <1029982427@qq.com> Date: Fri, 12 Apr 2024 16:46:30 +0800 Subject: [PATCH 1/4] feat: Add line transparency --- src/app/app.component.html | 10 ++++++++++ src/app/app.component.ts | 2 ++ .../combo-chart/combo-chart.component.html | 2 ++ .../custom-charts/combo-chart/combo-chart.component.ts | 8 ++++++++ 4 files changed, 22 insertions(+) diff --git a/src/app/app.component.html b/src/app/app.component.html index a68efd1e8..5d38848cd 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -582,6 +582,8 @@ [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" + [lineTransparency]="lineTransparency" + [chartTransparency]="chartTransparency" [legend]="showLegend" [legendTitle]="legendTitle" [legendPosition]="legendPosition" @@ -1334,6 +1336,14 @@


+
+
+
+
+
+
+
+


diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 3d06e3ff6..d17d91e3b 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -87,6 +87,8 @@ export class AppComponent implements OnInit { gradient = false; showLegend = true; legendTitle = 'Legend'; + lineTransparency = 0; + chartTransparency = 0; legendPosition = LegendPosition.Right; showXAxisLabel = true; tooltipDisabled = false; 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..e78a79e3e 100644 --- a/src/app/custom-charts/combo-chart/combo-chart.component.html +++ b/src/app/custom-charts/combo-chart/combo-chart.component.html @@ -51,6 +51,7 @@ [xScale]="xScale" [yScale]="yScale" [colors]="colors" + [ngStyle]="getStyle(chartTransparency)" [series]="results" [seriesLine]="lineChart" [dims]="dims" @@ -73,6 +74,7 @@ [xScale]="xScaleLine" [yScale]="yScaleLine" [colors]="colorsLine" + [ngStyle]="getStyle(lineTransparency)" [data]="series" [activeEntries]="activeEntries" [scaleType]="scaleType" 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..e27bd96a9 100644 --- a/src/app/custom-charts/combo-chart/combo-chart.component.ts +++ b/src/app/custom-charts/combo-chart/combo-chart.component.ts @@ -35,6 +35,8 @@ export class ComboChartComponent extends BaseChartComponent { @Input() legend = false; @Input() legendTitle: string = 'Legend'; @Input() legendPosition: string = 'right'; + @Input() lineTransparency: number = 0; + @Input() chartTransparency: number = 0; @Input() xAxis; @Input() yAxis; @Input() showXAxisLabel; @@ -355,6 +357,12 @@ export class ComboChartComponent extends BaseChartComponent { this.colorsLine = new ColorHelper(this.colorSchemeLine, this.schemeType, domain, this.customColors); } + getStyle(transparency: number): object { + return { + opacity: 1 - transparency / 100 + }; + } + getLegendOptions() { const opts = { scaleType: this.schemeType, From 6ab1264ff026cd61b1fe5667a789fd9899c3ed34 Mon Sep 17 00:00:00 2001 From: Syrena12 <1029982427@qq.com> Date: Mon, 15 Apr 2024 14:43:53 +0800 Subject: [PATCH 2/4] feat: Add line transparency into line chart and add chart transparency into combo chart. --- .../src/lib/line-chart/line-chart.component.ts | 8 ++++++++ src/app/app.component.html | 16 ++++++++++------ src/app/app.component.ts | 2 ++ src/app/chartTypes.ts | 3 +++ 4 files changed, 23 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..8737c3e7b 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 @@ -89,6 +89,7 @@ import { isPlatformServer } from '@angular/common'; [xScale]="xScale" [yScale]="yScale" [colors]="colors" + [ngStyle]="getStyle(lineTransparency)" [data]="series" [activeEntries]="activeEntries" [scaleType]="scaleType" @@ -207,6 +208,7 @@ export class LineChartComponent extends BaseChartComponent implements OnInit { @Input() yAxis: boolean; @Input() showXAxisLabel: boolean; @Input() showYAxisLabel: boolean; + @Input() lineTransparency: number; @Input() xAxisLabel: string; @Input() yAxisLabel: string; @Input() autoScale: boolean; @@ -333,6 +335,12 @@ export class LineChartComponent extends BaseChartComponent implements OnInit { } } + getStyle(transparency: number): object { + return { + opacity: 1 - transparency / 100 + }; + } + getXDomain(): any[] { let values = getUniqueXDomainValues(this.results); diff --git a/src/app/app.component.html b/src/app/app.component.html index 5d38848cd..74b95789a 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -353,6 +353,7 @@ [schemeType]="schemeType" [results]="dateDataWithOrWithoutRange" [animations]="animations" + [lineTransparency]="lineTransparency" [legend]="showLegend" [legendTitle]="legendTitle" [legendPosition]="legendPosition" @@ -822,6 +823,7 @@ [schemeType]="schemeType" [results]="plotData" [animations]="animations" + [lineTransparency]="lineTransparency" [legend]="false" [legendTitle]="legendTitle" [legendPosition]="legendPosition" @@ -1336,13 +1338,15 @@


-
-
-
+
+ + + {{ lineTransparency }}
-
-
-
+
+ + + {{ chartTransparency }}

diff --git a/src/app/app.component.ts b/src/app/app.component.ts index d17d91e3b..dd6914327 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -511,6 +511,8 @@ export class AppComponent implements OnInit { this.width = 700; this.height = 300; + this.lineTransparency = 0; + this.chartTransparency = 0; Object.assign(this, this.chart.defaults); diff --git a/src/app/chartTypes.ts b/src/app/chartTypes.ts index 6806edf3d..6899ccb3e 100644 --- a/src/app/chartTypes.ts +++ b/src/app/chartTypes.ts @@ -339,6 +339,7 @@ const chartGroups = [ 'showXAxis', 'showYAxis', 'gradient', + 'lineTransparency', 'showLegend', 'legendTitle', 'legendPosition', @@ -700,6 +701,8 @@ const chartGroups = [ 'gradient', 'showLegend', 'noBarWhenZero', + 'lineTransparency', + 'chartTransparency', 'legendTitle', 'legendPosition', 'showXAxisLabel', From cbb4a4ab7174da6983824e5a0130baca9ad462c7 Mon Sep 17 00:00:00 2001 From: Syrena12 <1029982427@qq.com> Date: Wed, 17 Apr 2024 14:28:14 +0800 Subject: [PATCH 3/4] feature: style optimize --- src/app/app.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 74b95789a..0a0cab40f 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1338,12 +1338,12 @@


-
+
{{ lineTransparency }}
-
+
{{ chartTransparency }}
From 4a9c2b1d43cd7bb24b5c77ffabba57d700147e6f Mon Sep 17 00:00:00 2001 From: Syrena12 <1029982427@qq.com> Date: Wed, 24 Apr 2024 14:42:35 +0800 Subject: [PATCH 4/4] feat : Add bar transparency into bar chats and add layer choice into combo chart. --- .../bar-chart/bar-horizontal-2d.component.ts | 9 +++++++ .../bar-horizontal-normalized.component.ts | 8 ++++++ .../bar-horizontal-stacked.component.ts | 8 ++++++ .../lib/bar-chart/bar-horizontal.component.ts | 8 ++++++ .../bar-chart/bar-vertical-2d.component.ts | 8 ++++++ .../bar-vertical-normalized.component.ts | 8 ++++++ .../bar-vertical-stacked.component.ts | 8 ++++++ .../lib/bar-chart/bar-vertical.component.ts | 8 ++++++ src/app/app.component.html | 14 +++++++++++ src/app/app.component.ts | 1 + src/app/chartTypes.ts | 25 +++++++++++++------ .../combo-chart/combo-chart.component.ts | 21 ++++++++++++++++ 12 files changed, 118 insertions(+), 8 deletions(-) diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-2d.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-2d.component.ts index 1a2a604d8..e00aa9ceb 100644 --- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-2d.component.ts +++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-2d.component.ts @@ -88,6 +88,7 @@ import { BarOrientation } from '../common/types/bar-orientation.enum'; ngx-charts-series-horizontal [xScale]="valueScale" [activeEntries]="activeEntries" + [ngStyle]="getStyle(chartTransparency)" [yScale]="innerScale" [colors]="colors" [series]="group.series" @@ -117,6 +118,7 @@ import { BarOrientation } from '../common/types/bar-orientation.enum'; ngx-charts-series-horizontal [xScale]="valueScale" [activeEntries]="activeEntries" + [ngStyle]="getStyle(chartTransparency)" [yScale]="innerScale" [colors]="colors" [series]="group.series" @@ -156,6 +158,7 @@ import { BarOrientation } from '../common/types/bar-orientation.enum'; ] }) export class BarHorizontal2DComponent extends BaseChartComponent { + @Input() chartTransparency: number = 0; @Input() legend: boolean = false; @Input() legendTitle: string = 'Legend'; @Input() legendPosition: LegendPosition = LegendPosition.Right; @@ -293,6 +296,12 @@ export class BarHorizontal2DComponent extends BaseChartComponent { return domain; } + getStyle(transparency: number): object { + return { + opacity: 1 - transparency / 100 + }; + } + getInnerDomain(): string[] { const domain = []; diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-normalized.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-normalized.component.ts index ee86e60d0..3f8927bbb 100644 --- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-normalized.component.ts +++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-normalized.component.ts @@ -80,6 +80,7 @@ import { isPlatformServer } from '@angular/common'; [xScale]="xScale" [yScale]="yScale" [activeEntries]="activeEntries" + [ngStyle]="getStyle(chartTransparency)" [colors]="colors" [series]="group.series" [dims]="dims" @@ -137,6 +138,7 @@ import { isPlatformServer } from '@angular/common'; ] }) export class BarHorizontalNormalizedComponent extends BaseChartComponent { + @Input() chartTransparency: number = 0; @Input() legend: boolean = false; @Input() legendTitle: string = 'Legend'; @Input() legendPosition: LegendPosition = LegendPosition.Right; @@ -249,6 +251,12 @@ export class BarHorizontalNormalizedComponent extends BaseChartComponent { return domain; } + getStyle(transparency: number): object { + return { + opacity: 1 - transparency / 100 + }; + } + getYScale(): any { const spacing = this.groupDomain.length / (this.dims.height / this.barPadding + 1); diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-stacked.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-stacked.component.ts index ab1350940..d9d21bd45 100644 --- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-stacked.component.ts +++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-stacked.component.ts @@ -80,6 +80,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface'; [xScale]="xScale" [yScale]="yScale" [colors]="colors" + [ngStyle]="getStyle(chartTransparency)" [series]="group.series" [activeEntries]="activeEntries" [dims]="dims" @@ -146,6 +147,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface'; ] }) export class BarHorizontalStackedComponent extends BaseChartComponent { + @Input() chartTransparency = 0; @Input() legend: boolean = false; @Input() legendTitle: string = 'Legend'; @Input() legendPosition: LegendPosition = LegendPosition.Right; @@ -270,6 +272,12 @@ export class BarHorizontalStackedComponent extends BaseChartComponent { return domain; } + getStyle(transparency: number): object { + return { + opacity: 1 - transparency / 100 + }; + } + getValueDomain(): [number, number] { const domain = []; let smallest = 0; diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts index 9b398f410..6eaed913a 100644 --- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts +++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts @@ -67,6 +67,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface'; [xScale]="xScale" [yScale]="yScale" [colors]="colors" + [ngStyle]="getStyle(chartTransparency)" [series]="results" [dims]="dims" [gradient]="gradient" @@ -91,6 +92,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface'; encapsulation: ViewEncapsulation.None }) export class BarHorizontalComponent extends BaseChartComponent { + @Input() chartTransparency: number = 0; @Input() legend = false; @Input() legendTitle: string = 'Legend'; @Input() legendPosition: LegendPosition = LegendPosition.Right; @@ -219,6 +221,12 @@ export class BarHorizontalComponent extends BaseChartComponent { this.colors = new ColorHelper(this.scheme, this.schemeType, domain, this.customColors); } + getStyle(transparency: number): object { + return { + opacity: 1 - transparency / 100 + }; + } + getLegendOptions(): LegendOptions { const opts = { scaleType: this.schemeType as any, diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-2d.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-2d.component.ts index 56fddd87c..14477b2ee 100644 --- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-2d.component.ts +++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-2d.component.ts @@ -83,6 +83,7 @@ import { isPlatformServer } from '@angular/common'; [@animationState]="'active'" [attr.transform]="groupTransform(group)" [activeEntries]="activeEntries" + [ngStyle]="getStyle(chartTransparency)" [xScale]="innerScale" [yScale]="valueScale" [colors]="colors" @@ -148,6 +149,7 @@ import { isPlatformServer } from '@angular/common'; ] }) export class BarVertical2DComponent extends BaseChartComponent { + @Input() chartTransparency: number = 0; @Input() legend: boolean = false; @Input() legendTitle: string = 'Legend'; @Input() legendPosition: LegendPosition = LegendPosition.Right; @@ -264,6 +266,12 @@ export class BarVertical2DComponent extends BaseChartComponent { } } + getStyle(transparency: number): object { + return { + opacity: 1 - transparency / 100 + }; + } + getGroupScale(): any { const spacing = this.groupDomain.length / (this.dims.height / this.groupPadding + 1); diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-normalized.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-normalized.component.ts index d1e9e1b2f..e362c3193 100644 --- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-normalized.component.ts +++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-normalized.component.ts @@ -78,6 +78,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface'; [xScale]="xScale" [yScale]="yScale" [activeEntries]="activeEntries" + [ngStyle]="getStyle(chartTransparency)" [colors]="colors" [series]="group.series" [dims]="dims" @@ -135,6 +136,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface'; ] }) export class BarVerticalNormalizedComponent extends BaseChartComponent { + @Input() chartTransparency: number = 0; @Input() legend: boolean = false; @Input() legendTitle: string = 'Legend'; @Input() legendPosition: LegendPosition = LegendPosition.Right; @@ -233,6 +235,12 @@ export class BarVerticalNormalizedComponent extends BaseChartComponent { return domain; } + getStyle(transparency: number): object { + return { + opacity: 1 - transparency / 100 + }; + } + getInnerDomain(): string[] { const domain = []; for (const group of this.results) { diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-stacked.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-stacked.component.ts index c13c0b50b..3e21a1e44 100644 --- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-stacked.component.ts +++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-stacked.component.ts @@ -80,6 +80,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface'; [yScale]="yScale" [activeEntries]="activeEntries" [colors]="colors" + [ngStyle]="getStyle(chartTransparency)" [series]="group.series" [dims]="dims" [gradient]="gradient" @@ -145,6 +146,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface'; ] }) export class BarVerticalStackedComponent extends BaseChartComponent { + @Input() chartTransparency: number = 0; @Input() legend: boolean = false; @Input() legendTitle: string = 'Legend'; @Input() legendPosition: LegendPosition = LegendPosition.Right; @@ -269,6 +271,12 @@ export class BarVerticalStackedComponent extends BaseChartComponent { return domain; } + getStyle(transparency: number): object { + return { + opacity: 1 - transparency / 100 + }; + } + getValueDomain(): [number, number] { const domain = []; let smallest = 0; diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts index cf2e9e353..63c105097 100644 --- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts +++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts @@ -80,6 +80,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface'; [roundEdges]="roundEdges" [animations]="animations" [noBarWhenZero]="noBarWhenZero" + [ngStyle]="getStyle(chartTransparency)" (activate)="onActivate($event)" (deactivate)="onDeactivate($event)" (select)="onClick($event)" @@ -93,6 +94,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface'; encapsulation: ViewEncapsulation.None }) export class BarVerticalComponent extends BaseChartComponent { + @Input() chartTransparency : number = 0; @Input() legend = false; @Input() legendTitle: string = 'Legend'; @Input() legendPosition: LegendPosition = LegendPosition.Right; @@ -212,6 +214,12 @@ export class BarVerticalComponent extends BaseChartComponent { return [min, max]; } + getStyle(transparency: number): object { + return { + opacity: 1 - transparency / 100 + }; + } + onClick(data: DataItem | string) { this.select.emit(data); } diff --git a/src/app/app.component.html b/src/app/app.component.html index 0a0cab40f..e5f0287d6 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -13,6 +13,7 @@ [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" + [chartTransparency]="chartTransparency" [legend]="showLegend" [legendTitle]="legendTitle" [legendPosition]="legendPosition" @@ -50,6 +51,7 @@ [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" + [chartTransparency]="chartTransparency" [legend]="showLegend" [legendTitle]="legendTitle" [legendPosition]="legendPosition" @@ -87,6 +89,7 @@ [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" + [chartTransparency]="chartTransparency" [legend]="showLegend" [legendTitle]="legendTitle" [legendPosition]="legendPosition" @@ -126,6 +129,7 @@ [tooltipDisabled]="tooltipDisabled" [xAxis]="showXAxis" [yAxis]="showYAxis" + [chartTransparency]="chartTransparency" [legend]="showLegend" [legendTitle]="legendTitle" [legendPosition]="legendPosition" @@ -164,6 +168,7 @@ [tooltipDisabled]="tooltipDisabled" [xAxis]="showXAxis" [yAxis]="showYAxis" + [chartTransparency]="chartTransparency" [legend]="showLegend" [legendTitle]="legendTitle" [legendPosition]="legendPosition" @@ -200,6 +205,7 @@ [tooltipDisabled]="tooltipDisabled" [xAxis]="showXAxis" [yAxis]="showYAxis" + [chartTransparency]="chartTransparency" [legend]="showLegend" [legendTitle]="legendTitle" [legendPosition]="legendPosition" @@ -236,6 +242,7 @@ [tooltipDisabled]="tooltipDisabled" [xAxis]="showXAxis" [yAxis]="showYAxis" + [chartTransparency]="chartTransparency" [legend]="showLegend" [legendTitle]="legendTitle" [legendPosition]="legendPosition" @@ -270,6 +277,7 @@ [tooltipDisabled]="tooltipDisabled" [xAxis]="showXAxis" [yAxis]="showYAxis" + [chartTransparency]="chartTransparency" [legend]="showLegend" [legendTitle]="legendTitle" [legendPosition]="legendPosition" @@ -585,6 +593,7 @@ [yAxis]="showYAxis" [lineTransparency]="lineTransparency" [chartTransparency]="chartTransparency" + [flag]="flag" [legend]="showLegend" [legendTitle]="legendTitle" [legendPosition]="legendPosition" @@ -1348,6 +1357,11 @@

{{ chartTransparency }}

+
+ + + +


diff --git a/src/app/app.component.ts b/src/app/app.component.ts index dd6914327..19a5826b2 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -89,6 +89,7 @@ export class AppComponent implements OnInit { legendTitle = 'Legend'; lineTransparency = 0; chartTransparency = 0; + flag = 0; legendPosition = LegendPosition.Right; showXAxisLabel = true; tooltipDisabled = false; diff --git a/src/app/chartTypes.ts b/src/app/chartTypes.ts index 6899ccb3e..2e33ee148 100644 --- a/src/app/chartTypes.ts +++ b/src/app/chartTypes.ts @@ -33,7 +33,8 @@ const chartGroups = [ 'rotateXAxisTicks', 'maxXAxisTickLength', 'maxYAxisTickLength', - 'wrapTicks' + 'wrapTicks', + 'chartTransparency' ] }, { @@ -67,7 +68,8 @@ const chartGroups = [ 'rotateXAxisTicks', 'maxXAxisTickLength', 'maxYAxisTickLength', - 'wrapTicks' + 'wrapTicks', + 'chartTransparency' ], defaults: { yAxisLabel: 'Country', @@ -106,7 +108,8 @@ const chartGroups = [ 'rotateXAxisTicks', 'maxXAxisTickLength', 'maxYAxisTickLength', - 'wrapTicks' + 'wrapTicks', + 'chartTransparency' ] }, { @@ -141,7 +144,8 @@ const chartGroups = [ 'rotateXAxisTicks', 'maxXAxisTickLength', 'maxYAxisTickLength', - 'wrapTicks' + 'wrapTicks', + 'chartTransparency' ], defaults: { yAxisLabel: 'Country', @@ -178,7 +182,8 @@ const chartGroups = [ 'rotateXAxisTicks', 'maxXAxisTickLength', 'maxYAxisTickLength', - 'wrapTicks' + 'wrapTicks', + 'chartTransparency' ] }, { @@ -211,7 +216,8 @@ const chartGroups = [ 'rotateXAxisTicks', 'maxXAxisTickLength', 'maxYAxisTickLength', - 'wrapTicks' + 'wrapTicks', + 'chartTransparency' ], defaults: { yAxisLabel: 'Country', @@ -246,7 +252,8 @@ const chartGroups = [ 'rotateXAxisTicks', 'maxXAxisTickLength', 'maxYAxisTickLength', - 'wrapTicks' + 'wrapTicks', + 'chartTransparency' ], defaults: { yAxisLabel: 'Normalized GDP Per Capita', @@ -281,7 +288,8 @@ const chartGroups = [ 'rotateXAxisTicks', 'maxXAxisTickLength', 'maxYAxisTickLength', - 'wrapTicks' + 'wrapTicks', + 'chartTransparency' ], defaults: { yAxisLabel: 'Country', @@ -703,6 +711,7 @@ const chartGroups = [ 'noBarWhenZero', 'lineTransparency', 'chartTransparency', + 'flag', 'legendTitle', 'legendPosition', 'showXAxisLabel', 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 e27bd96a9..13ca1a2bb 100644 --- a/src/app/custom-charts/combo-chart/combo-chart.component.ts +++ b/src/app/custom-charts/combo-chart/combo-chart.component.ts @@ -37,6 +37,7 @@ export class ComboChartComponent extends BaseChartComponent { @Input() legendPosition: string = 'right'; @Input() lineTransparency: number = 0; @Input() chartTransparency: number = 0; + @Input() flag: number = 0; @Input() xAxis; @Input() yAxis; @Input() showXAxisLabel; @@ -147,6 +148,8 @@ export class ComboChartComponent extends BaseChartComponent { this.legendOptions = this.getLegendOptions(); this.transform = `translate(${this.dims.xOffset} , ${this.margin[0]})`; + + this.toggleLayerOrder(); } deactivateAll() { @@ -419,4 +422,22 @@ export class ComboChartComponent extends BaseChartComponent { this.deactivate.emit({ value: item, entries: this.activeEntries }); } + + toggleLayerOrder(): void{ + const chartContainer = document.querySelector('.ngx-charts-outer'); + const lineChartElement = chartContainer?.querySelector('.line-chart'); + const barChartElement = chartContainer?.querySelector('.bar-chart'); + if (lineChartElement && barChartElement && lineChartElement.parentNode === barChartElement.parentNode) { + const lineparent = lineChartElement.parentNode; + const chartparent = barChartElement.parentNode; + if (this.flag) { + lineparent.removeChild(lineChartElement); + lineparent.insertBefore(lineChartElement, barChartElement); + } else { + chartparent.removeChild(barChartElement); + chartparent.insertBefore(barChartElement, lineChartElement); + } + } + this.flag === 0 ? 0 : 1; + } }