[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 | import {Line} from "../../model/Line";
|
---|
| 5 |
|
---|
| 6 | export interface CommutesByHour {
|
---|
| 7 | id: number,
|
---|
| 8 | line: Line,
|
---|
| 9 | interval: string,
|
---|
| 10 | numberOfCommutes: number,
|
---|
| 11 | }
|
---|
| 12 |
|
---|
| 13 | @Component({
|
---|
| 14 | selector: 'app-line-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 LineChartComponent implements OnInit, OnDestroy {
|
---|
| 33 | @Input() dataFn!: Observable<CommutesByHour[]>; // 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 |
|
---|
| 44 | this.dataFn.subscribe(data => {
|
---|
| 45 | console.log(data)
|
---|
| 46 | this.chartOptions = {
|
---|
| 47 | title: {
|
---|
| 48 | text: 'Number of Activities per Hour',
|
---|
| 49 | left: 'center'
|
---|
| 50 | },
|
---|
| 51 | tooltip: {
|
---|
| 52 | trigger: 'axis'
|
---|
| 53 | },
|
---|
| 54 | legend: {
|
---|
| 55 | data: ['Number of Activities'],
|
---|
| 56 | left: 'left'
|
---|
| 57 | },
|
---|
| 58 | xAxis: {
|
---|
| 59 | type: 'category',
|
---|
| 60 | data: data.sort((x, y) => Number(x.interval.slice(0,3)) - Number(y.interval.slice(0,3))).map(d => d.interval),
|
---|
| 61 | axisLabel: {
|
---|
| 62 | rotate: 45
|
---|
| 63 | }
|
---|
| 64 | },
|
---|
| 65 | yAxis: {
|
---|
| 66 | type: 'value',
|
---|
| 67 | name: 'Number of Activities'
|
---|
| 68 | },
|
---|
| 69 | series: [
|
---|
| 70 | {
|
---|
| 71 | name: 'Number of Activities',
|
---|
| 72 | type: 'line',
|
---|
| 73 | data: data.map(d => d.numberOfCommutes),
|
---|
| 74 | smooth: true,
|
---|
| 75 | lineStyle: {
|
---|
| 76 | color: '#ff6f61'
|
---|
| 77 | },
|
---|
| 78 | itemStyle: {
|
---|
| 79 | color: '#ff6f61'
|
---|
| 80 | }
|
---|
| 81 | }
|
---|
| 82 | ]
|
---|
| 83 | };
|
---|
| 84 | }
|
---|
| 85 | );
|
---|
| 86 | }
|
---|
| 87 |
|
---|
| 88 | ngOnDestroy(): void {
|
---|
| 89 | }
|
---|
| 90 | }
|
---|