[baf4cc4] | 1 | import { Component, Input, OnInit, OnDestroy } from '@angular/core';
|
---|
| 2 | import { Observable, Subscription } from 'rxjs';
|
---|
| 3 | import {NGX_ECHARTS_CONFIG, NgxEchartsModule} from "ngx-echarts";
|
---|
| 4 |
|
---|
| 5 | export interface IncomeData {
|
---|
| 6 | id: number;
|
---|
| 7 | year: string;
|
---|
| 8 | finesIncome: number;
|
---|
| 9 | ticketIncome: number;
|
---|
| 10 | totalIncome: number;
|
---|
| 11 | }
|
---|
| 12 |
|
---|
| 13 | @Component({
|
---|
| 14 | selector: 'app-income-chart',
|
---|
| 15 | template: `
|
---|
| 16 | <div echarts [options]="chartOptions" class="chart"></div>`,
|
---|
| 17 | standalone: true,
|
---|
| 18 | imports: [NgxEchartsModule],
|
---|
| 19 | providers: [
|
---|
| 20 | {
|
---|
| 21 | provide: NGX_ECHARTS_CONFIG,
|
---|
| 22 | useFactory: () => ({ echarts: () => import('echarts') }),
|
---|
| 23 | },
|
---|
| 24 | ],
|
---|
| 25 | styles: [`
|
---|
| 26 | .chart {
|
---|
| 27 | width: 100%;
|
---|
| 28 | height: 400px;
|
---|
| 29 | }
|
---|
| 30 | `]
|
---|
| 31 | })
|
---|
| 32 | export class IncomeChartComponent implements OnInit, OnDestroy {
|
---|
| 33 | @Input() dataFn!: Observable<IncomeData[]>; // Required input
|
---|
| 34 |
|
---|
| 35 | chartOptions: any;
|
---|
| 36 |
|
---|
| 37 | ngOnInit(): void {
|
---|
| 38 | if (!this.dataFn) {
|
---|
| 39 | console.error('Input dataFn is required');
|
---|
| 40 | return;
|
---|
| 41 | }
|
---|
| 42 |
|
---|
| 43 | this.dataFn.subscribe(data => {
|
---|
| 44 | console.log(data)
|
---|
| 45 | this.chartOptions = {
|
---|
| 46 | title: {
|
---|
| 47 | text: 'Yearly Income from Fines and Tickets',
|
---|
| 48 | left: 'center'
|
---|
| 49 | },
|
---|
| 50 | tooltip: {
|
---|
| 51 | trigger: 'axis',
|
---|
| 52 | axisPointer: { type: 'shadow' }
|
---|
| 53 | },
|
---|
| 54 | legend: {
|
---|
| 55 | data: ['Fines Income', 'Ticket Income', 'Total Income'],
|
---|
| 56 | left: 'left'
|
---|
| 57 | },
|
---|
| 58 | xAxis: {
|
---|
| 59 | type: 'category',
|
---|
| 60 | data: data.sort((x, y) => Number(x.year) - Number(y.year)).map(d => d.year)
|
---|
| 61 | },
|
---|
| 62 | yAxis: {
|
---|
| 63 | type: 'value',
|
---|
| 64 | name: 'Income'
|
---|
| 65 | },
|
---|
| 66 | series: [
|
---|
| 67 | {
|
---|
| 68 | name: 'Fines Income',
|
---|
| 69 | type: 'bar',
|
---|
| 70 | stack: 'total',
|
---|
| 71 | data: data.map(d => d.finesIncome),
|
---|
| 72 | itemStyle: {
|
---|
| 73 | color: '#ff6f61'
|
---|
| 74 | }
|
---|
| 75 | },
|
---|
| 76 | {
|
---|
| 77 | name: 'Ticket Income',
|
---|
| 78 | type: 'bar',
|
---|
| 79 | stack: 'total',
|
---|
| 80 | data: data.map(d => d.ticketIncome),
|
---|
| 81 | itemStyle: {
|
---|
| 82 | color: '#61a0a8'
|
---|
| 83 | }
|
---|
| 84 | },
|
---|
| 85 | {
|
---|
| 86 | name: 'Total Income',
|
---|
| 87 | type: 'bar',
|
---|
| 88 | data: data.map(d => d.totalIncome),
|
---|
| 89 | itemStyle: {
|
---|
| 90 | color: '#c23531'
|
---|
| 91 | }
|
---|
| 92 | }
|
---|
| 93 | ]
|
---|
| 94 | };
|
---|
| 95 | }
|
---|
| 96 | );
|
---|
| 97 | }
|
---|
| 98 |
|
---|
| 99 | ngOnDestroy(): void {
|
---|
| 100 | }
|
---|
| 101 | }
|
---|