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,10 @@ <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>
+        <label *ngIf="chart.inputFormat === 'linePieCombo'">Pie Chart Data</label>
+        <pre *ngIf="chart.inputFormat === 'linePieCombo'">{{ pieTempData | json }}</pre>
+        <label *ngIf="chart.inputFormat === 'linePieCombo'">Line Chart Data</label>
+        <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();
   }
@@ -480,6 +483,7 @@ export class AppComponent implements OnInit {
     this.dateDataWithRange = generateData(2, true);
 
     if (this.chart.inputFormat === 'calendarData') this.calendarData = this.getCalendarData();
+    if (this.chart.inputFormat === 'linePieCombo') this.pieTempData = this.getPieTempData();
   }
 
   applyDimensions() {
@@ -538,6 +542,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 +645,41 @@ 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',