Saturday, 10 November 2018

Generate Barchart from List

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.



from Generate Barchart from List

No comments:

Post a Comment