New Line-Pie Combo Chart

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

@@ -239,6 +239,7 @@ export class LineChartComponent extends BaseChartComponent implements OnInit {
 
   @Output() activate: EventEmitter<any> = new EventEmitter();
   @Output() deactivate: EventEmitter<any> = new EventEmitter();
+  @Output() tooltipCurrent: EventEmitter<any> = new EventEmitter();
 
   @ContentChild('tooltipTemplate') tooltipTemplate: TemplateRef<any>;
   @ContentChild('seriesTooltipTemplate') seriesTooltipTemplate: TemplateRef<any>;
@@ -442,6 +443,7 @@ export class LineChartComponent extends BaseChartComponent implements OnInit {
 
   updateHoveredVertical(item): void {
     this.hoveredVertical = item.value;
+    this.tooltipCurrent.emit(this.hoveredVertical)
     this.deactivateAll();
   }
 

src/app/app.component.html

@@ -597,6 +597,72 @@
         (select)="onSelect($event)"
       >
       </combo-chart-component>
+
+      <div *ngIf="chartType === 'combo-chart-line-pie-component'">
+        <div class = "top-pie-chart">
+          <ngx-charts-pie-chart
+            class="chart-container"
+            [view]="view"
+            [scheme]="colorScheme"
+            [results]="pieTempData"
+            [animations]="animations"
+            [explodeSlices]="explodeSlices"
+            [labels]="showLabels"
+            [doughnut]="doughnut"
+            [arcWidth]="arcWidth"
+            [gradient]="gradient"
+            [tooltipDisabled]="tooltipDisabled"
+            [tooltipText]="pieTooltipText"
+            (dblclick)="dblclick($event)"
+            (select)="select($event)"
+            (activate)="activate($event)"
+            (deactivate)="deactivate($event)"
+          >
+          </ngx-charts-pie-chart>
+        </div>
+        <div class = "bottom-line-chart">
+          <ngx-charts-line-chart
+          [view]="view"
+          class="chart-container"
+          [scheme]="colorScheme"
+          [schemeType]="schemeType"
+          [results]="dateDataWithOrWithoutRange"
+          [animations]="animations"
+          [legend]="showLegend"
+          [legendTitle]="legendTitle"
+          [legendPosition]="legendPosition"
+          [gradient]="gradient"
+          [xAxis]="showXAxis"
+          [yAxis]="showYAxis"
+          [showXAxisLabel]="showXAxisLabel"
+          [showYAxisLabel]="showYAxisLabel"
+          [xAxisLabel]="xAxisLabel"
+          [yAxisLabel]="yAxisLabel"
+          [autoScale]="autoScale"
+          [xScaleMin]="xScaleMin"
+          [xScaleMax]="xScaleMax"
+          [yScaleMin]="yScaleMin"
+          [yScaleMax]="yScaleMax"
+          [timeline]="timeline"
+          [showGridLines]="showGridLines"
+          [curve]="curve"
+          [rangeFillOpacity]="rangeFillOpacity"
+          [roundDomains]="roundDomains"
+          [tooltipDisabled]="tooltipDisabled"
+          [trimXAxisTicks]="trimXAxisTicks"
+          [trimYAxisTicks]="trimYAxisTicks"
+          [maxXAxisTickLength]="maxXAxisTickLength"
+          [maxYAxisTickLength]="maxYAxisTickLength"
+          [wrapTicks]="wrapTicks"
+          (select)="select($event)"
+          (activate)="activate($event)"
+          (deactivate)="deactivate($event)"
+          (tooltipCurrent)="getTooltipCurrent($event)"
+        >
+        </ngx-charts-line-chart>
+        </div>
+      </div>
+
       <ngx-charts-heat-map
         *ngIf="chartType === 'heat-map'"
         class="chart-container"
@@ -1158,6 +1224,8 @@ <h3 (click)="dataVisible = !dataVisible" style="cursor: pointer">
         <pre *ngIf="chart.inputFormat === 'bubbleInteractive'">{{ bubbleDemoTempData | json }}</pre>
         <pre *ngIf="chart.inputFormat === 'comboChart'">{{ barChart | json }}</pre>
         <pre *ngIf="chart.inputFormat === 'comboChart'">{{ lineChartSeries | json }}</pre>
+        <pre *ngIf="chart.inputFormat === 'linePieCombo'">{{ pieTempData | json }}</pre>
+        <pre *ngIf="chart.inputFormat === 'linePieCombo'">{{ dateDataWithOrWithoutRange | json }}</pre>
         <pre *ngIf="chart.inputFormat === 'timelineFilter'">{{ timelineFilterBarData | json }}</pre>
         <div>
           <label>

src/app/app.component.scss

@@ -331,3 +331,20 @@ main {
     color: $color-text-med;
   }
 }
+
+.top-pie-chart {
+  position: absolute;
+  top: 30%;
+  left: 50%;
+  width: 100%;
+  transform: translate(-50%, -50%);
+}
+
+.bottom-line-chart {
+  position: absolute;
+  bottom: 30%;
+  left: 50%;
+  width: 100%;
+  transform: translate(-50%, -50%);
+}
+

src/app/app.component.ts

@@ -69,6 +69,7 @@ export class AppComponent implements OnInit {
   dateDataWithRange: any[];
   calendarData: any[];
   statusData: any[];
+  pieTempData: any[];
   sparklineData: any[];
   timelineFilterBarData: any[];
   graph: { links: any[]; nodes: any[] };
@@ -118,6 +119,7 @@ export class AppComponent implements OnInit {
   strokeColor: string = '#FFFFFF';
   strokeWidth: number = 2;
   wrapTicks = false;
+  tempXValueForComboPie: any;
 
   curves = {
     Basis: shape.curveBasis,
@@ -297,6 +299,7 @@ export class AppComponent implements OnInit {
     this.setColorScheme('cool');
     this.calendarData = this.getCalendarData();
     this.statusData = this.getStatusData();
+    this.pieTempData = this.getPieTempData();
     this.sparklineData = generateData(1, false, 30);
     this.timelineFilterBarData = timelineFilterBarData();
   }
@@ -538,6 +541,11 @@ export class AppComponent implements OnInit {
     console.log('Deactivate', JSON.parse(JSON.stringify(data)));
   }
 
+  getTooltipCurrent(data) {
+    this.tempXValueForComboPie = data;
+    this.pieTempData = this.getPieTempData();
+  }
+
   getInterpolationType(curveType) {
     return this.curves[curveType] || this.curves['default'];
   }
@@ -636,6 +644,39 @@ export class AppComponent implements OnInit {
     return this.calcStatusData(sales, dur);
   }
 
+  getPieTempData() {
+    if (this.tempXValueForComboPie){
+      let data = [];
+      this.dateDataWithOrWithoutRange.forEach(item => {
+        const dataPoint = item.series.find(data => data.name === this.tempXValueForComboPie);
+        data.push({ name: item.name,
+                    value: dataPoint.value,
+                    extra: {
+                      code: item.name.toLowerCase()
+                    }});
+      })
+      return data;
+    } else {
+      let sumResult = []
+      this.dateDataWithOrWithoutRange.forEach(countryData => {
+        const countryName = countryData.name;
+        let sum = 0;
+        countryData.series.forEach(seriesItem => {
+            sum += seriesItem.value;
+        });
+        const resultItem = {
+            name: countryName,
+            value: sum,
+            extra: {
+                code: countryName.toLowerCase().replace(/\s/g, '_') // Convert spaces to underscores
+            }
+        };
+        sumResult.push(resultItem);
+      });
+      return sumResult;
+    }
+  }
+
   calcStatusData(sales = this.statusData[0].value, dur = this.statusData[2].value) {
     const ret = sales * this.salePrice;
     const cost = ((sales * dur) / 60 / 60 / 1000) * this.personnelCost;

src/app/chartTypes.ts

@@ -711,6 +711,46 @@ const chartGroups = [
           'tooltipDisabled'
         ]
       },
+      {
+        name: 'Line Pie Combo Chart',
+        selector: 'combo-chart-line-pie-component',
+        inputFormat: 'linePieCombo',
+        options: [
+          'animations',
+          'colorScheme',
+          'schemeType',
+          'showXAxis',
+          'showYAxis',
+          'gradient',
+          'showLegend',
+          'legendTitle',
+          'legendPosition',
+          'showXAxisLabel',
+          'xAxisLabel',
+          'showYAxisLabel',
+          'yAxisLabel',
+          'autoScale',
+          'timeline',
+          'showGridLines',
+          'curve',
+          'rangeFillOpacity',
+          'roundDomains',
+          'tooltipDisabled',
+          'xScaleMin',
+          'xScaleMax',
+          'yScaleMin',
+          'yScaleMax',
+          'trimXAxisTicks',
+          'trimYAxisTicks',
+          'rotateXAxisTicks',
+          'maxXAxisTickLength',
+          'maxYAxisTickLength',
+          'wrapTicks',
+          'doughnut',
+          'arcWidth',
+          'explodeSlices'
+        ]
+      },
       {
         name: 'Heat Map - Calendar',
         selector: 'calendar',