import { BasePlugin } from './base-plugin';
import type { RuntimeContext } from '../runtime/types';
import type { ElementDatum, ElementType, Padding } from '../types';
import type { BasePluginOptions } from './base-plugin';
/**
* Timebar 时间条的配置项。
* The options of the Timebar.
*/
export interface TimebarOptions extends BasePluginOptions {
/**
* 给工具栏的 DOM 追加的类名,便于自定义样式
*
* The class name appended to the menu DOM for custom styles
* @defaultValue 'g6-timebar'
*/
className?: string;
/**
* X 位置
*
* X position
* @remarks
* 设置后 `position` 会失效
*
* `position` will be invalidated after setting `x`
*/
x?: number;
/**
* Y 位置
*
* Y position
* @remarks
* 设置后 `position` 会失效
*
* `position` will be invalidated after setting `y`
*/
y?: number;
/**
* 时间条宽度
*
* Timebar width
* @defaultValue 450
*/
width?: number;
/**
* 时间条高度
*
* Timebar height
* @defaultValue 60
*/
height?: number;
/**
* Timebar 的位置
*
* Timebar location
* @defaultValue 'bottom'
*/
position?: 'bottom' | 'top';
/**
* 边距
*
* Padding
*/
padding?: Padding;
/**
* 获取元素时间
*
* Get element time
*/
getTime?: (datum: ElementDatum) => number;
/**
* 时间数据
*
* Time data
* @remarks
* `timebarType` 为 `'chart'` 时,需要额外传入 `value` 字段作为图表数据
*
* When `timebarType` is `'chart'`, you need to pass in the `value` field as chart data
*/
data: number[] | {
time: number;
value: number;
}[];
/**
* Timebar 展示类型
* - `'time'`: 显示为时间轴
* - `'chart'`: 显示为趋势图
*
* Timebar Displays the type
* - `'time'`: Display as a timeline
* - `'chart'`: Display as a trend chart
* @defaultValue 'time'
*/
timebarType?: 'time' | 'chart';
/**
* 筛选类型
*
* Filter element types
*/
elementTypes?: ElementType[];
/**
* 筛选模式
* - `'modify'`: 通过修改图数据进行筛选
* - `'visibility'`: 通过修改元素可见性进行筛选
*
* Filter mode
* - `'modify'`: Filter by modifying the graph data.
* - `'visibility'`: Filter by modifying element visibility
* @defaultValue 'modify'
*/
mode?: 'modify' | 'visibility';
/**
* 当前时间值
*
* Current time value
*/
values?: number | [number, number] | Date | [Date, Date];
/**
* 图表模式下自定义时间格式化
*
* Custom time formatting in chart mode
*/
labelFormatter?: (time: number | Date) => string;
/**
* 是否循环播放
*
* Whether to loop
* @defaultValue false
*/
loop?: boolean;
/**
* 时间区间变化时执行的回调
*
* Callback executed when the time interval changes
*/
onChange?: (values: number | [number, number]) => void;
/**
* 重置时执行的回调
*
* Callback executed when reset
*/
onReset?: () => void;
/**
* 播放速度变化时执行的回调
*
* Callback executed when the playback speed changes
*/
onSpeedChange?: (speed: number) => void;
/**
* 开始播放时执行的回调
*
* Callback executed when playback starts
*/
onPlay?: () => void;
/**
* 暂停时执行的回调
*
* Callback executed when paused
*/
onPause?: () => void;
/**
* 后退时执行的回调
*
* Callback executed when backward
*/
onBackward?: () => void;
/**
* 前进时执行的回调
*
* Callback executed when forward
*/
onForward?: () => void;
}
/**
* 时间组件
*
* Timebar
*/
export declare class Timebar extends BasePlugin {
static defaultOptions: Partial;
private timebar?;
private canvas?;
private container?;
private originalData?;
private get padding();
constructor(context: RuntimeContext, options: TimebarOptions);
/**
* 播放
*
* Play
*/
play(): void;
/**
* 暂停
*
* Pause
*/
pause(): void;
/**
* 前进
*
* Forward
*/
forward(): void;
/**
* 后退
*
* Backward
*/
backward(): void;
/**
* 重置
*
* Reset
*/
reset(): void;
/**
* 更新时间条配置项
*
* Update timebar configuration options
* @param options - 配置项 | Options
* @internal
*/
update(options: Partial): void;
/**
* 备份数据
*
* Backup data
*/
private backup;
private upsertTimebar;
private upsertCanvas;
private filterElements;
private hiddenElements;
/**
* 销毁时间条
*
* Destroy the timebar
* @internal
*/
destroy(): void;
}