fix

2023-08-03 08:58:53 +03:00
parent c82f8e3537
commit ad31d3ffce
30 changed files with 697 additions and 24 deletions
@@ -0,0 +1,148 @@
+// angular
+import { Component } from '@angular/core';
+import { OnInit } from '@angular/core';
+import { ViewChild } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { HttpParams } from '@angular/common/http';
+import { DecimalPipe } from '@angular/common';
+import { UntypedFormBuilder } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
+import { Validators } from '@angular/forms';
+import { Inject } from '@angular/core';
+
+// libs
+import {
+	ChartComponent,
+	ApexAxisChartSeries,
+	ApexTitleSubtitle,
+	ApexDataLabels,
+	ApexChart,
+	ApexPlotOptions,
+	ApexLegend
+} from "ng-apexcharts";
+import * as moment from 'moment'
+import { MAT_DATE_FORMATS } from '@angular/material/core';
+
+// app
+import { ApiRoutes } from '../../api-routes';
+import { DashboardInOutModel } from '../../model/dashboard.model';
+
+export type ChartOptions = {
+	series: ApexAxisChartSeries;
+	chart: ApexChart;
+	dataLabels: ApexDataLabels;
+	title: ApexTitleSubtitle;
+	plotOptions: ApexPlotOptions;
+	legend: ApexLegend;
+};
+
+@Component({
+	selector: 'app-dashboard-outcome',
+	templateUrl: './dashboard.component.html',
+	styleUrls: ['./dashboard.component.scss'],
+})
+export class DashboardOutcomeComponent implements OnInit {
+
+	@ViewChild("chart") chart!: ChartComponent;
+	public chartOptions!: Partial<ChartOptions>;
+	dashboardModel?: DashboardInOutModel;
+	public form!: UntypedFormGroup;
+	public dateFrom: Date = moment(new Date).add(-30, 'days').toDate();
+	public dateTo: Date = moment(new Date).add(0, 'days').toDate();
+
+	colors: string[] = ["#fd7f6f", "#7eb0d5", "#b2e061", "#bd7ebe", "#ffb55a", "#ffee65", "#beb9db", "#fdcce5", "#8bd3c7"];
+
+	constructor(
+		private fb: UntypedFormBuilder,
+		private httpClient: HttpClient,
+		private _decimalPipe: DecimalPipe
+	) {
+	}
+
+	ngOnInit() {
+		this.form = this.fb.group({
+			dateFrom: [
+				this.dateFrom,
+				[Validators.required],
+			],
+			dateTo: [
+				this.dateTo,
+				[Validators.required],
+			],
+		});
+
+		this.loadData();
+	}
+
+	onSubmitClick() {
+
+	}
+
+	private loadData(update?: boolean, category?: string) {
+		let params = new HttpParams()
+			.set('from', '2023-07-01')
+			.set('to', '2023-08-01')
+			.set('category', category || '')
+			;
+
+		this.httpClient
+			.get<DashboardInOutModel>(ApiRoutes.DashboardOutcome, { params: params })
+			.subscribe(response => {
+				this.dashboardModel = response;
+
+				var series = response.data.map(x => ({
+					x: x.name + ' (' + (this._decimalPipe.transform(x.value, '1.2-2') || '') + ')',
+					y: x.value
+				}));
+				var min = Math.min(...response.data.map(x => x.value));
+				var max = Math.max(...response.data.map(x => x.value));
+				var step = max / 10;
+				var ranges = [];
+				for (var i = 0; i < this.colors.length; i++) {
+					ranges.push({
+						from: i === 0 ? min : step * i,
+						to: i === this.colors.length - 1 ? max + 10 : step * (i + 1),
+						color: this.colors[this.colors.length - i - 1],
+					});
+				}
+				if (update) {
+					this.chart.updateSeries([{
+						data: series
+					}]);
+				} else {
+					this.setChartOptions(series, ranges);
+				}
+			});
+	}
+
+	private setChartOptions(data: any[], ranges: any[]) {
+		var self = this;
+
+		this.chartOptions = {
+			series: [{
+				data: data
+			}],
+			chart: {
+				type: 'treemap',
+				width: 600,
+				height: 600,
+				events: {
+					click: function (event, chartContext, config) {
+						var data = self.dashboardModel!.data[config.dataPointIndex];
+						self.loadData(true, data.id);
+					}
+				}
+			},
+			plotOptions: {
+				treemap: {
+					enableShades: true,
+					shadeIntensity: 0.5,
+					reverseNegativeShade: true,
+					colorScale: {
+						ranges: ranges
+					}
+				}
+			},
+		};
+	}
+}