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; }