import { Component } from '@angular/core';
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective],
  template: `
    <ejs-chart3d [primaryXAxis]="xAxis" [primaryYAxis]="yAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="chartData" xName="month" yName="sales" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class AppComponent {
  chartData = [
    { month: 'Jan', sales: 35 },
    { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 },
    { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 }
  ];

  xAxis = { valueType: 'Category' };
  yAxis = { labelFormat: '{value}%' };
}

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]="xAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="dynamicData" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class DynamicChartComponent {
  dynamicData: any[] = [];

  constructor() {
    this.loadData();
    setInterval(() => this.loadData(), 5000); // Update every 5 seconds
  }

  loadData() {
    this.dynamicData = this.generateData();
  }

  private generateData() {
    return [
      { x: 'A', y: Math.random() * 100 },
      { x: 'B', y: Math.random() * 100 }
    ];
  }
}

export class MultiTypeChartComponent {
  chartType: string = 'Column';

  switchChartType(type: string) {
    this.chartType = type; // Changes 'type' in series
  }
}

@Component({
  template: `
    <ejs-chart3d [palettes]="customPalette">
      ...
    </ejs-chart3d>
  `
})
export class CustomPaletteComponent {
  customPalette = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8'];
}