Xtykutl

I have this JPA query from which I want to generate Angular Barchart from Spring:

    public List<PaymentTransactionsDailyFacts> findPaymentTransactionsDailyFacts(LocalDateTime start_date, LocalDateTime end_date) {



        String hql = "SELECT SUM(amount) AS sum_volume, COUNT(*) AS sum_Transactions " + 

                " WHERE (created_at BETWEEN :start_date AND :end_date )" + 

                " GROUP BY DATE(created_at)";



        TypedQuery<PaymentTransactionsDailyFacts> query = entityManager.createQuery(hql,

                PaymentTransactionsDailyFacts.class).setParameter("start_date", start_date).setParameter("end_date", end_date);

        List<PaymentTransactionsDailyFacts> data = query.getResultList();

        return data;

    }

Expected query result:

Date       | Amount| Number of transactions per day |

11-11-2018 | 30    | 3                              |

11-12-2018 | 230   | 13                             |

Mapped Object from JPA query:

public class DashboardDTO {



    private Date date;



    private int sum_volume;



    private int sum_Transactions;



    ... getters and setters

}

Angular Service:

@Injectable({

  providedIn: 'root'

})

export class DashboardService {



  constructor(private http: HttpClient) {

  }



  getCurruncyList(): Observable<Array<CurruncyList>> {

    return this.http.get<Array<CurruncyList>>(environment.api.urls.dashboard.getVolumes);

  }

}

Interface

export interface CurruncyList {

  date: Date,

  amount: number,

  number_of_transactions: number

}

Dashboard component with Barchart:

  selector: 'app-dashboard',

  templateUrl: './dashboard.component.html',

  styleUrls: ['./dashboard.component.scss']

})

export class DashboardComponent implements OnInit {



  barData: any;



  constructor() {

  }



  ngOnInit() {

    this.barChart();

  }





  barChart() {

    this.barData = {

      labels: ['02-10-2018', '03-10-2018', '04-10-2018', '05-10-2018', '06-10-2018', '07-10-2018', '08-10-2018'],

      datasets: [

        {

          label: 'USD',

          backgroundColor: '#42A5F5',

          borderColor: '#1E88E5',

          data: [65, 59, 80, 81, 56, 55, 40]

        },

        {

          label: 'EUR',

          backgroundColor: '#9CCC65',

          borderColor: '#7CB342',

          data: [28, 48, 40, 19, 86, 27, 90]

        }   

      ]

    }

  }

}

How I can generate Barchant from <Array<CurruncyList>? I would like to take the data from database query listed above using the above code.

Update: tested example:

import {Component, OnInit} from '@angular/core';

import {DashboardService} from "../service/dashboard.service";



@Component({

  selector: 'app-dashboard',

  templateUrl: './dashboard.component.html',

  styleUrls: ['./dashboard.component.scss']

})

export class DashboardComponent implements OnInit {



  barData: any;



  constructor(private dashboardService: DashboardService) {

  }



  ngOnInit() {

    this.barChart();

  }



  barChart(){

this.dashboardService.getCurruncyList().subscribe(data => {

   this.barData = data.map(t => t.date);

   response.map(function (o) {

      return {

        data: 22,

        label: o.date

      };

   });

});

}
}

You need to subscribe in your component and generate the dataLabels using Array.map as follows,

constructor(private chartService : DashboardService)



renderChart(){

  this.chartService.getCurruncyList().subscribe(data=>{

       this.chartLables = data.map(t=>t.date);

       response.map(function (o) {

          return {

            data: push the transactions count

            label: o.date

          };

  });

}