You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

242 lines
5.5 KiB

4 months ago
import { BasePlugin } from './base-plugin';
import type { RuntimeContext } from '../runtime/types';
import type { ElementDatum, ElementType, Padding } from '../types';
import type { BasePluginOptions } from './base-plugin';
/**
* <zh/> Timebar
* <en/> The options of the Timebar.
*/
export interface TimebarOptions extends BasePluginOptions {
/**
* <zh/> DOM 便
*
* <en/> The class name appended to the menu DOM for custom styles
* @defaultValue 'g6-timebar'
*/
className?: string;
/**
* <zh/> X
*
* <en/> X position
* @remarks
* <zh/> `position`
*
* <en/> `position` will be invalidated after setting `x`
*/
x?: number;
/**
* <zh/> Y
*
* <en/> Y position
* @remarks
* <zh/> `position`
*
* <en/> `position` will be invalidated after setting `y`
*/
y?: number;
/**
* <zh/>
*
* <en/> Timebar width
* @defaultValue 450
*/
width?: number;
/**
* <zh/>
*
* <en/> Timebar height
* @defaultValue 60
*/
height?: number;
/**
* <zh/> Timebar
*
* <en/> Timebar location
* @defaultValue 'bottom'
*/
position?: 'bottom' | 'top';
/**
* <zh/>
*
* <en/> Padding
*/
padding?: Padding;
/**
* <zh/>
*
* <en/> Get element time
*/
getTime?: (datum: ElementDatum) => number;
/**
* <zh/>
*
* <en/> Time data
* @remarks
* <zh/> `timebarType` `'chart'` `value`
*
* <en/> When `timebarType` is `'chart'`, you need to pass in the `value` field as chart data
*/
data: number[] | {
time: number;
value: number;
}[];
/**
* <zh/> Timebar
* - `'time'`:
* - `'chart'`:
*
* <en/> Timebar Displays the type
* - `'time'`: Display as a timeline
* - `'chart'`: Display as a trend chart
* @defaultValue 'time'
*/
timebarType?: 'time' | 'chart';
/**
* <zh/>
*
* <en/> Filter element types
*/
elementTypes?: ElementType[];
/**
* <zh/>
* - `'modify'`:
* - `'visibility'`:
*
* <en/> Filter mode
* - `'modify'`: Filter by modifying the graph data.
* - `'visibility'`: Filter by modifying element visibility
* @defaultValue 'modify'
*/
mode?: 'modify' | 'visibility';
/**
* <zh/>
*
* <en/> Current time value
*/
values?: number | [number, number] | Date | [Date, Date];
/**
* <zh/>
*
* <en/> Custom time formatting in chart mode
*/
labelFormatter?: (time: number | Date) => string;
/**
* <zh/>
*
* <en/> Whether to loop
* @defaultValue false
*/
loop?: boolean;
/**
* <zh/>
*
* <en/> Callback executed when the time interval changes
*/
onChange?: (values: number | [number, number]) => void;
/**
* <zh/>
*
* <en/> Callback executed when reset
*/
onReset?: () => void;
/**
* <zh/>
*
* <en/> Callback executed when the playback speed changes
*/
onSpeedChange?: (speed: number) => void;
/**
* <zh/>
*
* <en/> Callback executed when playback starts
*/
onPlay?: () => void;
/**
* <zh/>
*
* <en/> Callback executed when paused
*/
onPause?: () => void;
/**
* <zh/> 退
*
* <en/> Callback executed when backward
*/
onBackward?: () => void;
/**
* <zh/>
*
* <en/> Callback executed when forward
*/
onForward?: () => void;
}
/**
* <zh/>
*
* <en/> Timebar
*/
export declare class Timebar extends BasePlugin<TimebarOptions> {
static defaultOptions: Partial<TimebarOptions>;
private timebar?;
private canvas?;
private container?;
private originalData?;
private get padding();
constructor(context: RuntimeContext, options: TimebarOptions);
/**
* <zh/>
*
* <en/> Play
*/
play(): void;
/**
* <zh/>
*
* <en/> Pause
*/
pause(): void;
/**
* <zh/>
*
* <en/> Forward
*/
forward(): void;
/**
* <zh/> 退
*
* <en/> Backward
*/
backward(): void;
/**
* <zh/>
*
* <en/> Reset
*/
reset(): void;
/**
* <zh/>
*
* <en/> Update timebar configuration options
* @param options - <zh/> | <en/> Options
* @internal
*/
update(options: Partial<TimebarOptions>): void;
/**
* <zh/>
*
* <en/> Backup data
*/
private backup;
private upsertTimebar;
private upsertCanvas;
private filterElements;
private hiddenElements;
/**
* <zh/>
*
* <en/> Destroy the timebar
* @internal
*/
destroy(): void;
}