import { Component } from "@angular/core";
import { NgbDropdownModule } from "@ng-bootstrap/ng-bootstrap";
import * as ApexCharts from "apexcharts";
import {
  ChartComponent,
  ApexAxisChartSeries,
  ApexChart,
  ApexXAxis,
  ApexDataLabels,
  ApexTitleSubtitle,
  ApexStroke,
  ApexGrid,
  NgApexchartsModule,
  ApexFill,
  ApexResponsive,
} from "ng-apexcharts";

export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  xaxis: ApexXAxis;
  stroke: ApexStroke;
  dataLabels: ApexDataLabels;
  yaxis: ApexYAxis;
  title: ApexTitleSubtitle;
  labels: string[];
  legend: ApexLegend;
  subtitle: ApexTitleSubtitle;
};

@Component({
  selector: "app-grafik-laporan",
  standalone: true,
  imports: [NgbDropdownModule, NgApexchartsModule],
  templateUrl: "./grafik-laporan.component.html",
  styleUrls: ["./grafik-laporan.component.scss"],
})
export class GrafikLaporanComponent {
  public chartOptions: ChartOptions;

  constructor() {
    this.chartOptions = {
      series: [
        {
          name: "Series 1",
          data: [30, 40, 25, 50, 49, 21, 70, 51, 10, 98, 10, 50],
        },
      ],
      chart: {
        toolbar: { show: false },
        height: 350,
        type: "area",
      },
      xaxis: {
        categories: [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "Mei",
          "Jun",
          "Jul",
          "Agu",
          "Sep",
          "Okt",
          "Nov",
          "Des",
        ],
      },
      stroke: {
        curve: "smooth",
      },
      dataLabels: {
        enabled: false,
      },

      yaxis: {},
      title: {},
      labels: [],
      legend: {},
      subtitle: {},
    };
  }
}
