Add switch to make taxation evolution graph proportional to gross

Author: PLPeeters

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

@@ -431,14 +431,13 @@ <h1>{{ t('title') }}</h1>
     </mat-card-content>
   </mat-card>
 
-  <mat-card *ngIf="chartData" class="charts-card">
+  <mat-card *ngIf="averageTaxRateChartData" class="charts-card">
     <mat-card-header>
       <mat-card-title>{{ t('average_tax_rate_evolution') }}</mat-card-title>
     </mat-card-header>
 
     <mat-card-content #ContainerRef>
       <ngx-charts-line-chart
-        *ngIf="averageTaxRateChartData"
         [view]="[ContainerRef.offsetWidth - 32, max(min(400, window.innerHeight - 16), 300)]"
         [scheme]="'vivid'"
         [results]="averageTaxRateChartData"
@@ -479,7 +478,7 @@ <h1>{{ t('title') }}</h1>
     </mat-card-content>
   </mat-card>
 
-  <mat-card *ngIf="chartData" class="charts-card">
+  <mat-card *ngIf="relativeChartData" class="charts-card">
     <mat-card-header>
       <mat-card-title>{{ t('relative_net_increase_title', {amount: formatAmount(graphsStep) }) }}</mat-card-title>
       <mat-card-subtitle>
@@ -490,7 +489,6 @@ <h1>{{ t('title') }}</h1>
 
     <mat-card-content #ContainerRef>
       <ngx-charts-line-chart
-        *ngIf="relativeChartData"
         [view]="[ContainerRef.offsetWidth - 32, max(min(400, window.innerHeight - 16), 300)]"
         [scheme]="'vivid'"
         [results]="relativeChartData"
@@ -539,11 +537,18 @@ <h1>{{ t('title') }}</h1>
     </mat-card-header>
 
     <mat-card-content #ContainerRef>
+      <mat-slide-toggle
+        class="m-b"
+        [checked]="showTaxDataAsProportionalToGross"
+        (change)="showTaxDataAsProportionalToGross = $event.checked">
+          {{ t('proportional_to_gross' ) }}
+      </mat-slide-toggle>
+
       <ngx-charts-area-chart-stacked
         *ngIf="taxData"
         [view]="[ContainerRef.offsetWidth - 32, max(min(400, window.innerHeight - 16), 300)]"
         [scheme]="'vivid'"
-        [results]="taxData"
+        [results]="showTaxDataAsProportionalToGross ? taxDataProportionalToGross : taxData"
         [xAxis]="true"
         [yAxis]="true"
         [legend]="true"
@@ -553,7 +558,7 @@ <h1>{{ t('title') }}</h1>
         [showGridLines]="true"
         [roundDomains]="true"
         [xAxisTickFormatting]="formatAmountTickFormattingFn"
-        [yAxisTickFormatting]="formatAmountTickFormattingFn"
+        [yAxisTickFormatting]="showTaxDataAsProportionalToGross ? formatPctTickFormattingFn : formatAmountTickFormattingFn"
         [legendPosition]="legendPosition"
         [legendTitle]="''"
         [ngClass]="{'legend-below': legendPosition === LegendPosition.Below}"
@@ -562,7 +567,12 @@ <h1>{{ t('title') }}</h1>
         [tooltipDisabled]="false">
         <ng-template #tooltipTemplate let-model="model">
           <div class="tooltip-label">{{formatAmount(model.name)}}</div>
-          <div class="tooltip-val">{{ model.series }}: {{formatAmount(model.value)}}</div>
+
+          @if (showTaxDataAsProportionalToGross) {
+            <div class="tooltip-val">{{ model.series }}: {{formatPct(model.value)}}</div>
+          } @else {
+            <div class="tooltip-val">{{ model.series }}: {{formatAmount(model.value)}}</div>
+          }
         </ng-template>
 
         <ng-template #seriesTooltipTemplate let-series="model">
@@ -573,7 +583,12 @@ <h1>{{ t('title') }}</h1>
             @for (singleSeries of series; track $index) {
               <div class="tooltip-item">
                 <div class="tooltip-item-color" [style]="{'background-color': singleSeries.color}"></div>
-                <span>{{singleSeries.series}}: {{formatAmount(singleSeries.value)}}</span>
+
+                @if (showTaxDataAsProportionalToGross) {
+                  <span>{{singleSeries.series}}: {{formatPct(singleSeries.value)}}</span>
+                } @else {
+                  <span>{{singleSeries.series}}: {{formatAmount(singleSeries.value)}}</span>
+                }
               </div>
             }
         </ng-template>
@@ -588,7 +603,6 @@ <h1>{{ t('title') }}</h1>
 
     <mat-card-content #ContainerRef>
       <ngx-charts-area-chart-stacked
-        *ngIf="taxDataProportional"
         [view]="[ContainerRef.offsetWidth - 32, max(min(400, window.innerHeight - 16), 300)]"
         [scheme]="'vivid'"
         [results]="taxDataProportional"

src/app/components/main/main.component.scss

@@ -158,6 +158,10 @@ mat-list-item mat-list {
   margin-top: 16px;
 }
 
+.m-b {
+  margin-bottom: 16px;
+}
+
 .p-t {
   padding-top: 16px;
 }

src/app/components/main/main.component.ts

@@ -25,6 +25,7 @@ import { FamilySituation, FuelType, SalaryCalculationInput, Status, taxationInfo
 import { FormComponent } from "./form/form.component";
 import { getDateFromMonthString } from './month-validator';
 import { WithholdingTaxBreakdownComponent } from "./withholding-tax-breakdown/withholding-tax-breakdown.component";
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 
 interface RevenueYear {
@@ -59,6 +60,7 @@ export enum Mode {
     MatSelectModule,
     MatOptionModule,
     MatTabsModule,
+    MatSlideToggleModule,
     TranslocoModule,
     DisableScrollDirective,
     FormComponent,
@@ -83,6 +85,8 @@ export class MainComponent implements OnInit {
   relativeChartData: any[] = [];
   averageTaxRateChartData: any[] = [];
   taxData: any[] = [];
+  taxDataProportionalToGross: any[] = [];
+  showTaxDataAsProportionalToGross = false;
   taxDataProportional: any[] = [];
   showWithHoldingTaxBreakdown = false;
   periodTabIndex = 0;
@@ -487,26 +491,50 @@ export class MainComponent implements OnInit {
       },
     ];
 
+    this.taxDataProportionalToGross = [
+      {
+        name: this.socialCotisationsString,
+        series: salaries.map(salary => ({
+          name: salary.gross,
+          value: salary.taxation.socialCotisationsAfterReductionsProportionOfGross,
+        }))
+      },
+      {
+        name: this.professionalWithholdingTaxString,
+        series: salaries.map(salary => ({
+          name: salary.gross,
+          value: salary.taxation.professionalWithholdingTaxesAfterReductionsProportionOfGross,
+        }))
+      },
+      {
+        name: this.specialSocialCotisationString,
+        series: salaries.map(salary => ({
+          name: salary.gross,
+          value: salary.taxation.specialSocialCotisationsProportionOfGross,
+        }))
+      },
+    ];
+
     this.taxDataProportional = [
       {
         name: this.socialCotisationsString,
         series: salaries.map(salary => ({
           name: salary.gross,
-          value: salary.taxation.socialCotisationsAfterReductionsProportion,
+          value: salary.taxation.socialCotisationsAfterReductionsProportionOfTaxes,
         }))
       },
       {
         name: this.professionalWithholdingTaxString,
         series: salaries.map(salary => ({
           name: salary.gross,
-          value: salary.taxation.professionalWithholdingTaxesAfterReductionsProportion,
+          value: salary.taxation.professionalWithholdingTaxesAfterReductionsProportionOfTaxes,
         }))
       },
       {
         name: this.specialSocialCotisationString,
         series: salaries.map(salary => ({
           name: salary.gross,
-          value: salary.taxation.specialSocialCotisationsProportion,
+          value: salary.taxation.specialSocialCotisationsProportionOfTaxes,
         }))
       },
     ];