Charts Mynd

component.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ChartConfiguration, ChartData, ChartType } from 'chart.js';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  loading = true;
  public doughnutChartLabels: string[] = ['Impressões', 'Likes', 'Comentários'];
  public doughnutChartDatasets!: ChartConfiguration<'doughnut'>['data']['datasets'];

  public doughnutChartOptions: ChartConfiguration<'doughnut'>['options'] = {
    responsive: false,
  };

  public doughnutChartLabels2: string[] = ['Mulheres', 'Homens', 'Não identificado'];
  public doughnutChartDatasets2!: ChartConfiguration<'doughnut'>['data']['datasets'];

  public doughnutChartOptions2: ChartConfiguration<'doughnut'>['options'] = {
    responsive: false,
  };

  ///////////////////// LINE CHART
  public lineChartData!: ChartConfiguration['data'];

  public lineChartType: ChartType = 'line';


  /// BAR CHART

  public barChartOptions: ChartConfiguration['options'] = {
    responsive: true,
  };

  public barChartType: ChartType = 'bar';

  public barChartData!: ChartData<'bar'>;


  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http
      .get(`${environment.baseUrl}/campaignAccountAnalytics`, {
        params: {
          campaign_id: '9hTP8tdHs7aqACDRMjSf',
          account_id: 'PRzWzTHPV67CByLhMpOP',
        },
      })
      .subscribe((res: any) => {
        this.loading = false;

        this.doughnutChartDatasets = [
          {
            data: [
              res.insights.total_impressions,
              res.insights.total_likes,
              res.insights.total_comments,
            ],
            label: 'Series A',
            backgroundColor: ['#0D2535', '#4014FA', '#FAE439'],
            borderColor: 'transparent',
          },
        ];

        this.lineChartData = {
          datasets: [
            {
              data: res.snapshots.map(
                (snapshot: any) => snapshot.total_impressions
              ),
              label: 'Series A',
              backgroundColor: '#FB4220',
              borderColor: '#FB4220',
              pointBorderColor: '#FB4220',
              pointBackgroundColor: 'white',
            },
          ],
          labels: res.snapshots.map((snapshot: any) =>
            new Date(snapshot.timestamp * 1000).toLocaleDateString('pt-BR', {
              day: '2-digit',
              month: 'short',
            })
          ),
        };

        this.doughnutChartDatasets2 = [
          {
            data: [
              res.account.audience.audience_gender.find((aud: any) => aud.gender === "M").value,
              res.account.audience.audience_gender.find((aud: any) => aud.gender === "F").value,
              res.account.audience.audience_gender.find((aud: any) => aud.gender === "U").value,
            ],
            label: 'Series A',
            backgroundColor: ['#4014FA', '#FAE439', '#0D2535'],
            borderColor: 'transparent',
          },
        ]

        this.barChartData = {
          labels: ['13-17','18-24', '25-34', '35-44', '45-54', '55-64', '65+'], 
          datasets: [
            { data: res.account.audience.audience_gender_age.filter((aud: any) => aud.gender === "F").map((aud: any) => aud.value), label: 'Feminino', stack: '1' , backgroundColor: '#FAE439'},
            { data: res.account.audience.audience_gender_age.filter((aud: any) => aud.gender === "M").map((aud: any) => aud.value), label: 'Masculino', stack: '1', backgroundColor: '#4014FA' },
            { data: res.account.audience.audience_gender_age.filter((aud: any) => aud.gender === "U").map((aud: any) => aud.value), label: 'Outros', stack: '1', backgroundColor: '#0D2535' },
          ],
        };
      });

    
  }
}

index.html

<canvas baseChart
        [labels]="doughnutChartLabels"
        [datasets]="doughnutChartDatasets"
        [options]="doughnutChartOptions"
        [legend]="true"
        [type]="'doughnut'">
</canvas>


<hr>

<canvas
  baseChart
  class="chart"
  [data]="lineChartData"
  [type]="lineChartType"
></canvas>

<hr>

<canvas baseChart
        [labels]="doughnutChartLabels2"
        [datasets]="doughnutChartDatasets2"
        [options]="doughnutChartOptions2"
        [legend]="true"
        [type]="'doughnut'">
</canvas>

<hr>

<canvas
  baseChart
  class="chart"
  [data]="barChartData"
  [options]="barChartOptions"
  [type]="barChartType"
>
</canvas>