import { Component, OnInit } from '@angular/core';
import {
	ApexAxisChartSeries,
	ApexChart,
	ApexXAxis,
	ApexDataLabels,
	ApexStroke,
	ApexMarkers,
	ApexYAxis,
	ApexGrid,
	ApexTitleSubtitle,
	ApexTooltip,
	ApexLegend,
	ApexFill,
	ApexResponsive,
	ApexNonAxisChartSeries,
} from 'ng-apexcharts';

export type ChartOptions = {
	series: ApexAxisChartSeries;
	series2: ApexNonAxisChartSeries;
	chart: ApexChart;
	xaxis: ApexXAxis;
	stroke: ApexStroke;
	dataLabels: ApexDataLabels;
	markers: ApexMarkers;
	colors: string[];
	yaxis: ApexYAxis;
	grid: ApexGrid;
	legend: ApexLegend;
	tooltip: ApexTooltip;
	fill: ApexFill;
	title: ApexTitleSubtitle;
	responsive: ApexResponsive[];
	labels: string[];
};

@Component({
	selector: 'app-dashboard2',
	templateUrl: './dashboard2.component.html',
	styleUrls: ['./dashboard2.component.scss'],
})
export class Dashboard2Component implements OnInit {
	lineChartOptions!: Partial<ChartOptions>;
	pieChartOptions!: Partial<ChartOptions>;

	//  color: ["#3FA7DC", "#F6A025", "#9BC311"],
	constructor() {
		//constructor
	}

	ngOnInit() {
		this.chart1();
		this.chart2();
	}

	private chart1() {
		this.lineChartOptions = {
			series: [
				{
					name: 'Product 1',
					data: [70, 200, 80, 180, 170, 105, 210],
				},
				{
					name: 'Product 2',
					data: [80, 250, 30, 120, 260, 100, 180],
				},
				{
					name: 'Product 3',
					data: [85, 130, 85, 225, 80, 190, 120],
				},
			],
			chart: {
				height: 350,
				type: 'line',
				foreColor: '#9aa0ac',
				dropShadow: {
					enabled: true,
					color: '#000',
					top: 18,
					left: 7,
					blur: 10,
					opacity: 0.2,
				},
				toolbar: {
					show: false,
				},
			},
			colors: ['#00E396', '#775DD0', '#FEB019'],
			stroke: {
				curve: 'smooth',
			},
			grid: {
				show: true,
				borderColor: '#9aa0ac',
				strokeDashArray: 1,
			},
			markers: {
				size: 3,
			},
			xaxis: {
				categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
				title: {
					text: 'Month',
				},
			},
			yaxis: {
				// opposite: true,
				title: {
					text: 'Sales',
				},
			},
			legend: {
				position: 'top',
				horizontalAlign: 'right',
				floating: true,
				offsetY: -25,
				offsetX: -5,
			},
			tooltip: {
				theme: 'dark',
				marker: {
					show: true,
				},
				x: {
					show: true,
				},
			},
		};
	}

	private chart2() {
		this.pieChartOptions = {
			series2: [44, 55, 13, 43, 22],
			chart: {
				type: 'donut',
				width: 225,
			},
			legend: {
				show: false,
			},
			dataLabels: {
				enabled: false,
			},
			labels: ['Science', 'Mathes', 'Economics', 'History', 'Music'],
			responsive: [
				{
					breakpoint: 480,
					options: {},
				},
			],
		};
	}
}
