import { Component } from '@angular/core';
import { RangeNavigatorModule, AreaSeriesService, DateTimeService, RangeTooltipService } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RangeNavigatorModule],
  providers: [AreaSeriesService, DateTimeService, RangeTooltipService],
  template: `
    <ejs-rangenavigator 
      id="rn-container" 
      [tooltip]="{ enable: true }"
      valueType="DateTime">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          [dataSource]="chartData" 
          xName="date" 
          yName="value" 
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `
})
export class AppComponent {
  chartData = [
    { date: new Date(2023, 0, 1), value: 21 },
    { date: new Date(2023, 1, 1), value: 24 },
    { date: new Date(2023, 2, 1), value: 36 },
    { date: new Date(2023, 3, 1), value: 38 }
  ];
}

@Component({
  template: `
    <ejs-rangenavigator 
      id="range-navigator"
      [dataSource]="timeSeries" 
      valueType="DateTime"
      [intervalType]="'Months'">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          xName="date" 
          yName="value" 
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `
})
export class TimeSeriesComponent {
  timeSeries = [
    { date: new Date(2020, 0, 1), value: 40 },
    { date: new Date(2020, 1, 1), value: 50 },
    { date: new Date(2020, 2, 1), value: 60 }
  ];
}

@Component({
imports: [
         ChartModule, RangeNavigatorModule
    ],

providers: [ AreaSeriesService, DateTimeService, PeriodSelectorService ],
standalone: true,
    selector: 'app-container',
    template: `<ejs-rangenavigator id="rn-container" valueType='DateTime' [periodSelectorSettings]='periodSelectorConfig'>
            <e-rangenavigator-series-collection>
                <e-rangenavigator-series [dataSource]='chartData' type='Area' xName='x' yName='close' width=2>
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>`
})
export class PeriodSelectorComponent {
  chartData = [...]; // time series data

  periodSelectorConfig = {
    periods: [
      { text: '1M', interval: 1, intervalType: 'Months' },
      { text: '3M', interval: 3, intervalType: 'Months' },
      { text: '6M', interval: 6, intervalType: 'Months' },
      { text: '1Y', interval: 1, intervalType: 'Years' }
    ]
  };

  tooltipSettings = {
    enable: true,
    format: 'MMM dd, yyyy'
  };
}

@Component({
  template: `
    <ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value' [labelFormat]='labelFormat'[dataSource]='mobileData' xName='x' yName='y'>
    </ejs-rangenavigator>
  `
})
export class MobileOptimizedComponent {
  mobileData = [...]; // optimized dataset for mobile
}

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { 
  RangeNavigatorAllModule, 
  AreaSeriesService 
} from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-container',
  standalone: true,
  imports: [CommonModule, RangeNavigatorAllModule],
  providers: [AreaSeriesService],
  template: `
    <div style="padding: 20px;">
      <h2>Numeric Range Selector</h2>
      
      <ejs-rangenavigator 
        id="numericRange"
        [valueType]="rangeSettings.valueType"
        labelFormat="n0">
        <e-rangenavigator-series-collection>
          <e-rangenavigator-series 
            [dataSource]="data" 
            xName="index" 
            yName="value" 
            type="Area">
          </e-rangenavigator-series>
        </e-rangenavigator-series-collection>
      </ejs-rangenavigator>
    </div>
  `
})
export class AppComponent {
  public data = [
    { index: 0, value: 100 },
    { index: 10, value: 150 },
    { index: 20, value: 200 }
  ];

  public rangeSettings = {
    valueType: 'Double'
  };
}

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { 
  RangeNavigatorAllModule, 
  AreaSeriesService 
} from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-container',
  standalone: true,
  imports: [CommonModule, RangeNavigatorAllModule],
  providers: [AreaSeriesService],
  template: `
    <div style="padding: 20px;">
      <h2>Numeric Range Selector</h2>
      
      <ejs-rangenavigator 
        id="numericRange"
        [valueType]="rangeSettings.valueType"
        labelFormat="n0"
        [tooltip]='tooltipSettings'>
        <e-rangenavigator-series-collection>
          <e-rangenavigator-series 
            [dataSource]="data" 
            xName="index" 
            yName="value" 
            type="Area">
          </e-rangenavigator-series>
        </e-rangenavigator-series-collection>
      </ejs-rangenavigator>
    </div>
  `
})
export class CustomTooltipComponent {
  public data = [
    { index: 0, value: 100 },
    { index: 10, value: 150 },
    { index: 20, value: 200 }
  ];

  public rangeSettings = {
    valueType: 'Double'
  };
  tooltipSettings = {
    enable: true,
    template: '<div>${value}</div>',
    header: 'Stock Price'
  };
}