UNPKG

echarts

Version:

Apache ECharts is a powerful, interactive charting and data visualization library for browser

1,341 lines 56.5 kB
/** * [Notice]: * Consider custom bundle on demand, chart specified * or component specified types and constants should * not put here. Only common types and constants can * be put in this file. */ import Group from 'zrender/lib/graphic/Group.js'; import Element, { ElementEvent, ElementTextConfig } from 'zrender/lib/Element.js'; import { DataFormatMixin } from '../model/mixin/dataFormat.js'; import GlobalModel from '../model/Global.js'; import ExtensionAPI from '../core/ExtensionAPI.js'; import SeriesModel from '../model/Series.js'; import { HashMap } from 'zrender/lib/core/util.js'; import { TaskPlanCallbackReturn, TaskProgressParams } from '../core/task.js'; import SeriesData from '../data/SeriesData.js'; import { Dictionary, ElementEventName, ImageLike, TextAlign, TextVerticalAlign } from 'zrender/lib/core/types.js'; import { PatternObject } from 'zrender/lib/graphic/Pattern.js'; import { TooltipMarker } from './format.js'; import { AnimationEasing } from 'zrender/lib/animation/easing.js'; import { LinearGradientObject } from 'zrender/lib/graphic/LinearGradient.js'; import { RadialGradientObject } from 'zrender/lib/graphic/RadialGradient.js'; import { RectLike } from 'zrender/lib/core/BoundingRect.js'; import { TSpanStyleProps } from 'zrender/lib/graphic/TSpan.js'; import { PathStyleProps } from 'zrender/lib/graphic/Path.js'; import { ImageStyleProps } from 'zrender/lib/graphic/Image.js'; import ZRText, { TextStyleProps } from 'zrender/lib/graphic/Text.js'; import { Source } from '../data/Source.js'; import Model from '../model/Model.js'; import { DataStoreDimensionType } from '../data/DataStore.js'; import { DimensionUserOuputEncode } from '../data/helper/dimensionHelper.js'; import { PrimaryTimeUnit } from './time.js'; export { Dictionary }; export declare type RendererType = 'canvas' | 'svg'; export declare type NullUndefined = null | undefined; export declare type LayoutOrient = 'vertical' | 'horizontal'; export declare type HorizontalAlign = 'left' | 'center' | 'right'; export declare type VerticalAlign = 'top' | 'middle' | 'bottom'; export declare type ColorString = string; export declare type ZRColor = ColorString | LinearGradientObject | RadialGradientObject | PatternObject; export declare type ZRLineType = 'solid' | 'dotted' | 'dashed' | number | number[]; export declare type ZRFontStyle = 'normal' | 'italic' | 'oblique'; export declare type ZRFontWeight = 'normal' | 'bold' | 'bolder' | 'lighter' | number; export declare type ZREasing = AnimationEasing; export declare type ZRTextAlign = TextAlign; export declare type ZRTextVerticalAlign = TextVerticalAlign; export declare type ZRElementEvent = ElementEvent; export declare type ZRRectLike = RectLike; export declare type ZRStyleProps = PathStyleProps | ImageStyleProps | TSpanStyleProps | TextStyleProps; export declare type ZRElementEventName = ElementEventName | 'globalout'; export declare type ComponentFullType = string; export declare type ComponentMainType = keyof ECUnitOption & string; export declare type ComponentSubType = Exclude<ComponentOption['type'], undefined>; /** * Use `parseClassType` to parse componentType declaration to componentTypeInfo. * For example: * componentType declaration: 'a.b', get componentTypeInfo {main: 'a', sub: 'b'}. * componentType declaration: '', get componentTypeInfo {main: '', sub: ''}. */ export interface ComponentTypeInfo { main: ComponentMainType; sub: ComponentSubType; } export interface ECElement extends Element { highDownSilentOnTouch?: boolean; onHoverStateChange?: (toState: DisplayState) => void; hoverState?: 0 | 1 | 2; selected?: boolean; z2EmphasisLift?: number; z2SelectLift?: number; /** * Force enable animation. * This property is useful when an ignored/invisible/removed element * should have label animation, like the case in the bar-racing charts. * `forceLabelAnimation` has higher priority than `disableLabelAnimation`. */ forceLabelAnimation?: boolean; /** * Force disable animation. * `forceLabelAnimation` has higher priority than `disableLabelAnimation`. */ disableLabelAnimation?: boolean; /** * Force disable overall layout */ disableLabelLayout?: boolean; /** * Force disable morphing */ disableMorphing?: boolean; /** * Force disable triggering tooltip */ tooltipDisabled?: boolean; } export interface DataHost { getData(dataType?: SeriesDataType): SeriesData; } export interface DataModel extends Model<unknown>, DataHost, DataFormatMixin { getDataParams(dataIndex: number, dataType?: SeriesDataType, el?: Element): CallbackDataParams; } interface PayloadItem { excludeSeriesId?: OptionId | OptionId[]; animation?: PayloadAnimationPart; [other: string]: any; } export interface Payload extends PayloadItem { type: string; escapeConnect?: boolean; batch?: PayloadItem[]; } export interface HighlightPayload extends Payload { type: 'highlight'; notBlur?: boolean; } export interface DownplayPayload extends Payload { type: 'downplay'; notBlur?: boolean; } export interface PayloadAnimationPart { duration?: number; easing?: AnimationEasing; delay?: number; } export interface SelectChangedEvent extends ECActionRefinedEvent { type: 'selectchanged'; isFromClick: boolean; fromAction: 'select' | 'unselect' | 'toggleSelected'; fromActionPayload: Payload; selected: { seriesIndex: number; dataType?: SeriesDataType; dataIndex: number[]; }[]; } /** * @deprecated Backward compat. */ export interface SelectChangedPayload extends Payload { type: 'selectchanged'; isFromClick: boolean; fromAction: 'select' | 'unselect' | 'toggleSelected'; fromActionPayload: Payload; selected: { seriesIndex: number; dataType?: SeriesDataType; dataIndex: number[]; }[]; } export interface ViewRootGroup extends Group { __ecComponentInfo?: { mainType: string; index: number; }; } export interface ECElementEvent extends ECEventData, CallbackDataParams { type: ZRElementEventName; event?: ElementEvent; } /** * The echarts event type to user. * Also known as packedEvent. */ export interface ECActionEvent extends ECEventData { type: string; componentType?: string; componentIndex?: number; seriesIndex?: number; escapeConnect?: boolean; batch?: ECEventData[]; } /** * TODO: not applicable in `ECEventProcessor` yet. */ export interface ECActionRefinedEvent extends ECActionEvent { type: string; fromAction: string; fromActionPayload: Payload; } export declare type ECActionRefinedEventContent<TRefinedEvent extends ECActionRefinedEvent> = Omit<TRefinedEvent, 'type' | 'fromAction' | 'fromActionPayload'>; export interface ECEventData { [key: string]: any; } export interface EventQueryItem { [key: string]: any; } export interface NormalizedEventQuery { cptQuery: EventQueryItem; dataQuery: EventQueryItem; otherQuery: EventQueryItem; } /** * The rule of creating "public event" and "event for connect": * - If `refineEvent` provided, * `refineEvent` creates the "public event", * and "event for connect" is created internally by replicating the payload. * This is because `makeActionFromEvent` requires the content of event to be * the same as the original payload, while `refineEvent` creates a user-friend * event that differs from the original payload. * - Else if `ActionHandler` returns an object, * it is both the "public event" and the "event for connect". * (@deprecated, but keep this mechanism for backward compatibility). * - Else, * replicate the payload as both the "public event" and "event for connect". */ export interface ActionInfo { type: string; event?: string; update?: string; action?: ActionHandler; refineEvent?: ActionRefineEvent; publishNonRefinedEvent?: boolean; } export interface ActionHandler { (payload: Payload, ecModel: GlobalModel, api: ExtensionAPI): void | ECEventData; } export interface ActionRefineEvent { (actionResultBatch: ECEventData[], payload: Payload, ecModel: GlobalModel, api: ExtensionAPI): { eventContent: ECActionRefinedEventContent<ECActionRefinedEvent>; }; } export interface OptionPreprocessor { (option: ECUnitOption, isTheme: boolean): void; } export interface PostUpdater { (ecModel: GlobalModel, api: ExtensionAPI): void; } export interface StageHandlerReset { (seriesModel: SeriesModel, ecModel: GlobalModel, api: ExtensionAPI, payload?: Payload): StageHandlerProgressExecutor | StageHandlerProgressExecutor[] | void; } export interface StageHandlerOverallReset { (ecModel: GlobalModel, api: ExtensionAPI, payload?: Payload): void; } export interface StageHandler { /** * Indicate that the task will be piped all series * (`performRawSeries` indicate whether includes filtered series). */ createOnAllSeries?: boolean; /** * Indicate that the task will be only piped in the pipeline of this type of series. * (`performRawSeries` indicate whether includes filtered series). */ seriesType?: string; /** * Indicate that the task will be only piped in the pipeline of the returned series. */ getTargetSeries?: (ecModel: GlobalModel, api: ExtensionAPI) => HashMap<SeriesModel>; /** * If `true`, filtered series will also be "performed". */ performRawSeries?: boolean; /** * Called only when this task in a pipeline. */ plan?: StageHandlerPlan; /** * If `overallReset` specified, an "overall task" will be created. * "overall task" does not belong to a certain pipeline. * They always be "performed" in certain phase (depends on when they declared). * They has "stub"s to connect with pipelines (one stub for one pipeline), * delivering info like "dirty" and "output end". */ overallReset?: StageHandlerOverallReset; /** * Called only when this task in a pipeline, and "dirty". */ reset?: StageHandlerReset; } export interface StageHandlerInternal extends StageHandler { uid: string; visualType?: 'layout' | 'visual'; __prio: number; __raw: StageHandler | StageHandlerOverallReset; isVisual?: boolean; isLayout?: boolean; } export declare type StageHandlerProgressParams = TaskProgressParams; export interface StageHandlerProgressExecutor { dataEach?: (data: SeriesData, idx: number) => void; progress?: (params: StageHandlerProgressParams, data: SeriesData) => void; } export declare type StageHandlerPlanReturn = TaskPlanCallbackReturn; export interface StageHandlerPlan { (seriesModel: SeriesModel, ecModel: GlobalModel, api: ExtensionAPI, payload?: Payload): StageHandlerPlanReturn; } export interface LoadingEffectCreator { (api: ExtensionAPI, cfg: object): LoadingEffect; } export interface LoadingEffect extends Element { resize: () => void; } /** * 'html' is used for rendering tooltip in extra DOM form, and the result * string is used as DOM HTML content. * 'richText' is used for rendering tooltip in rich text form, for those where * DOM operation is not supported. */ export declare type TooltipRenderMode = 'html' | 'richText'; export declare type TooltipOrderMode = 'valueAsc' | 'valueDesc' | 'seriesAsc' | 'seriesDesc'; export declare type OrdinalRawValue = string | number; export declare type OrdinalNumber = number; /** * @usage For example, * ```js * { ordinalNumbers: [2, 5, 3, 4] } * ``` * means that ordinal 2 should be displayed on tick 0, * ordinal 5 should be displayed on tick 1, ... */ export declare type OrdinalSortInfo = { ordinalNumbers: OrdinalNumber[]; }; /** * `OptionDataValue` is the primitive value in `series.data` or `dataset.source`. * `OptionDataValue` are parsed (see `src/data/helper/dataValueHelper.parseDataValue`) * into `ParsedValue` and stored into `data/SeriesData` storage. * Note: * (1) The term "parse" does not mean `src/scale/Scale['parse']`(@see `ScaleDataValue`). * (2) If a category dimension is not mapped to any axis, its raw value will NOT be * parsed to `OrdinalNumber` but keep the original `OrdinalRawValue` in `src/data/SeriesData` storage. */ export declare type ParsedValue = ParsedValueNumeric | OrdinalRawValue; export declare type ParsedValueNumeric = number | OrdinalNumber; /** * `ScaleDataValue` represents the user input axis value in echarts API. * (For example, used `axis.min`/`axis.max` in echarts option, `convertToPixel`). * NOTICE: * `ScaleDataValue` is slightly different from `OptionDataValue` for historical reason. * `ScaleDataValue` should be parsed by `src/scale/Scale['parse']`. * `OptionDataValue` should be parsed by `src/data/helper/dataValueHelper.parseDataValue`. * FIXME: * Make `ScaleDataValue` `OptionDataValue` consistent? Since numeric string (like `'123'`) is accepted * in `series.data` and is effectively accepted in some axis relevant option (e.g., `axis.min/max`), * `type ScaleDataValue` should also include it for consistency. But it might bring some breaking in * TS interface (user callback) and need comprehensive checks for all of the parsing of `ScaleDataValue`. */ export declare type ScaleDataValue = ParsedValueNumeric | OrdinalRawValue | Date; /** * - `ScaleDataValue`: * e.g. geo accept that primitive input, like `convertToPixel('some_place')`; * Some coord sys, such as 'cartesian2d', also supports that for only query only a single axis. * - `ScaleDataValue[]`: * This is the most common case, each array item represent each data in * every dimension required by the coord sys. e.g., `[12, 98]` represents `[xData, yData]`. * - `(ScaleDataValue[])[]`: * represents `[data_range_x, data_range_y]`. e.g., `dataToPoint([[5, 600], [8889, 9000]])`, * represents data range `[5, 600]` in x, and `[8889, 9000]` in y. * Can be also `[5, [8999, 9000]]`. */ export declare type CoordinateSystemDataCoord = (ScaleDataValue | NullUndefined) | (ScaleDataValue | NullUndefined)[] | (ScaleDataValue | ScaleDataValue[] | NullUndefined)[]; export declare type AxisBreakOption = { start: ScaleDataValue; end: ScaleDataValue; gap?: number | string; isExpanded?: boolean; }; export declare type AxisBreakOptionIdentifierInAxis = Pick<AxisBreakOption, 'start' | 'end'>; export declare type ParsedAxisBreakList = ParsedAxisBreak[]; export declare type ParsedAxisBreak = { breakOption: AxisBreakOption; vmin: number; vmax: number; gapParsed: { type: 'tpAbs' | 'tpPrct'; val: number; }; gapReal: number | NullUndefined; }; export declare type VisualAxisBreak = { type: 'vmin' | 'vmax'; parsedBreak: ParsedAxisBreak; }; export declare type AxisLabelFormatterExtraBreakPart = { break?: { type: 'start' | 'end'; start: ParsedAxisBreak['vmin']; end: ParsedAxisBreak['vmax']; }; }; export interface ScaleTick { value: number; break?: VisualAxisBreak; time?: TimeScaleTick['time']; } export interface TimeScaleTick extends ScaleTick { time: { /** * Level information is used for label formatting. * `level` is 0 or undefined by default, with higher value indicating greater significant. * For example, a time axis may contain labels like: Jan, 8th, 16th, 23th, Feb, and etc. * In this case, month labels like Jan and Feb should be displayed in a more significant * way than days. The tick labels are: * labels: `Jan 8th 16th 23th Feb` * levels: `1 0 0 0 1 ` * The label formatter can be configured as `{[timeUnit]: string | string[]}`, where the * timeUnit is determined by the tick value itself by `time.ts#getUnitFromValue`, while * the `level` is the index under that time unit. (i.e., `formatter[timeUnit][level]`). */ level: number; /** * An upper and lower time unit that is suggested to be displayed. * Terms upper/lower means, such as 'year' is "upper" and 'month' is "lower". * This is just suggestion. Time units that are out of this range can also be displayed. */ upperTimeUnit: PrimaryTimeUnit; lowerTimeUnit: PrimaryTimeUnit; }; } export interface OrdinalScaleTick extends ScaleTick { /** * Represents where the tick will be placed visually. * Notice: * The value is not the raw ordinal value. And do not changed * after ordinal scale sorted. * We need to: * ```js * const coord = dataToCoord(ordinalScale.getRawOrdinalNumber(tick.value)). * ``` * Why place the tick value here rather than the raw ordinal value (like LogScale did)? * Because ordinal scale sort is the different case from LogScale, where * axis tick, splitArea should better not to be sorted, especially in * anid(animation id) when `boundaryGap: true`. * Only axis label are sorted. */ value: number; } /** * Return type of API `CoordinateSystem['dataToLayout']`, expose to users. */ export interface CoordinateSystemDataLayout { rect?: RectLike; contentRect?: RectLike; matrixXYLocatorRange?: number[][]; } export declare type DimensionIndex = number; export declare type DimensionIndexLoose = DimensionIndex | string; export declare type DimensionName = string; export declare type DimensionLoose = DimensionName | DimensionIndexLoose; export declare type DimensionType = DataStoreDimensionType; export declare const VISUAL_DIMENSIONS: HashMap<number, keyof DataVisualDimensions>; export interface DataVisualDimensions { tooltip?: DimensionIndex | false; label?: DimensionIndex; itemName?: DimensionIndex; itemId?: DimensionIndex; itemGroupId?: DimensionIndex; itemChildGroupId?: DimensionIndex; seriesName?: DimensionIndex; } export declare type DimensionDefinition = { type?: DataStoreDimensionType; name?: DimensionName; displayName?: string; }; export declare type DimensionDefinitionLoose = DimensionDefinition['name'] | DimensionDefinition; export declare const SOURCE_FORMAT_ORIGINAL: "original"; export declare const SOURCE_FORMAT_ARRAY_ROWS: "arrayRows"; export declare const SOURCE_FORMAT_OBJECT_ROWS: "objectRows"; export declare const SOURCE_FORMAT_KEYED_COLUMNS: "keyedColumns"; export declare const SOURCE_FORMAT_TYPED_ARRAY: "typedArray"; export declare const SOURCE_FORMAT_UNKNOWN: "unknown"; export declare type SourceFormat = typeof SOURCE_FORMAT_ORIGINAL | typeof SOURCE_FORMAT_ARRAY_ROWS | typeof SOURCE_FORMAT_OBJECT_ROWS | typeof SOURCE_FORMAT_KEYED_COLUMNS | typeof SOURCE_FORMAT_TYPED_ARRAY | typeof SOURCE_FORMAT_UNKNOWN; export declare const SERIES_LAYOUT_BY_COLUMN: "column"; export declare const SERIES_LAYOUT_BY_ROW: "row"; export declare type SeriesLayoutBy = typeof SERIES_LAYOUT_BY_COLUMN | typeof SERIES_LAYOUT_BY_ROW; export declare type OptionSourceHeader = boolean | 'auto' | number; export declare type SeriesDataType = 'main' | 'node' | 'edge'; /** * [ECUnitOption]: * An object that contains definitions of components * and other properties. For example: * * ```ts * let option: ECUnitOption = { * * // Single `title` component: * title: {...}, * * // Two `visualMap` components: * visualMap: [{...}, {...}], * * // Two `series.bar` components * // and one `series.pie` component: * series: [ * {type: 'bar', data: [...]}, * {type: 'bar', data: [...]}, * {type: 'pie', data: [...]} * ], * * // A property: * backgroundColor: '#421ae4' * * // A property object: * textStyle: { * color: 'red', * fontSize: 20 * } * }; * ``` */ export declare type ECUnitOption = { baseOption?: unknown; options?: unknown; media?: unknown; timeline?: ComponentOption | ComponentOption[]; backgroundColor?: ZRColor; darkMode?: boolean | 'auto'; textStyle?: GlobalTextStyleOption; useUTC?: boolean; hoverLayerThreshold?: number; legacyViewCoordSysCenterBase?: boolean; [key: string]: ComponentOption | ComponentOption[] | Dictionary<unknown> | unknown; stateAnimation?: AnimationOption; } & AnimationOptionMixin & ColorPaletteOptionMixin; /** * [ECOption]: * An object input to echarts.setOption(option). * May be an 'option: ECUnitOption', * or may be an object contains multi-options. For example: * * ```ts * let option: ECOption = { * baseOption: { * title: {...}, * legend: {...}, * series: [ * {data: [...]}, * {data: [...]}, * ... * ] * }, * timeline: {...}, * options: [ * {title: {...}, series: {data: [...]}}, * {title: {...}, series: {data: [...]}}, * ... * ], * media: [ * { * query: {maxWidth: 320}, * option: {series: {x: 20}, visualMap: {show: false}} * }, * { * query: {minWidth: 320, maxWidth: 720}, * option: {series: {x: 500}, visualMap: {show: true}} * }, * { * option: {series: {x: 1200}, visualMap: {show: true}} * } * ] * }; * ``` */ export interface ECBasicOption extends ECUnitOption { baseOption?: ECUnitOption; timeline?: ComponentOption | ComponentOption[]; options?: ECUnitOption[]; media?: MediaUnit[]; } export declare type OptionSourceData<VAL extends OptionDataValue = OptionDataValue, ORIITEM extends OptionDataItemOriginal<VAL> = OptionDataItemOriginal<VAL>> = OptionSourceDataOriginal<VAL, ORIITEM> | OptionSourceDataObjectRows<VAL> | OptionSourceDataArrayRows<VAL> | OptionSourceDataKeyedColumns<VAL> | OptionSourceDataTypedArray; export declare type OptionDataItemOriginal<VAL extends OptionDataValue = OptionDataValue> = VAL | VAL[] | OptionDataItemObject<VAL>; export declare type OptionSourceDataOriginal<VAL extends OptionDataValue = OptionDataValue, ORIITEM extends OptionDataItemOriginal<VAL> = OptionDataItemOriginal<VAL>> = ArrayLike<ORIITEM>; export declare type OptionSourceDataObjectRows<VAL extends OptionDataValue = OptionDataValue> = Array<Dictionary<VAL>>; export declare type OptionSourceDataArrayRows<VAL extends OptionDataValue = OptionDataValue> = Array<Array<VAL>>; export declare type OptionSourceDataKeyedColumns<VAL extends OptionDataValue = OptionDataValue> = Dictionary<ArrayLike<VAL>>; export declare type OptionSourceDataTypedArray = ArrayLike<number>; export declare type OptionDataItem = OptionDataValue | Dictionary<OptionDataValue> | OptionDataValue[] | OptionDataItemObject<OptionDataValue>; export declare type OptionDataItemObject<T> = { id?: OptionId; name?: OptionName; groupId?: OptionId; childGroupId?: OptionId; value?: T[] | T; selected?: boolean; }; export declare type OptionId = string | number; export declare type OptionName = string | number; export interface GraphEdgeItemObject<VAL extends OptionDataValue> extends OptionDataItemObject<VAL> { /** * Name or index of source node. */ source?: string | number; /** * Name or index of target node. */ target?: string | number; } export declare type OptionDataValue = string | number | Date | null | undefined; export declare type OptionDataValueNumeric = number | '-'; export declare type OptionDataValueCategory = string; export declare type OptionDataValueDate = Date | string | number; export declare type ModelOption = any; export declare type ThemeOption = Dictionary<any>; export declare type DisplayState = 'normal' | 'emphasis' | 'blur' | 'select'; export declare type DisplayStateNonNormal = Exclude<DisplayState, 'normal'>; export declare type DisplayStateHostOption = { emphasis?: Dictionary<any>; [key: string]: any; }; export interface OptionEncodeVisualDimensions { tooltip?: OptionEncodeValue; label?: OptionEncodeValue; itemName?: OptionEncodeValue; itemId?: OptionEncodeValue; seriesName?: OptionEncodeValue; itemGroupId?: OptionEncodeValue; childGroupdId?: OptionEncodeValue; } export interface OptionEncode extends OptionEncodeVisualDimensions { [coordDim: string]: OptionEncodeValue | undefined; } export declare type OptionEncodeValue = DimensionLoose | DimensionLoose[]; export declare type EncodeDefaulter = (source: Source, dimCount: number) => OptionEncode; export interface CallbackDataParams { componentType: string; componentSubType: string; componentIndex: number; seriesType?: string; seriesIndex?: number; seriesId?: string; seriesName?: string; name: string; dataIndex: number; data: OptionDataItem; dataType?: SeriesDataType; value: OptionDataItem | OptionDataValue; color?: ZRColor; borderColor?: string; dimensionNames?: DimensionName[]; encode?: DimensionUserOuputEncode; marker?: TooltipMarker; status?: DisplayState; dimensionIndex?: number; percent?: number; $vars: string[]; } export declare type InterpolatableValue = ParsedValue | ParsedValue[]; export declare type DecalDashArrayX = number | (number | number[])[]; export declare type DecalDashArrayY = number | number[]; export interface DecalObject { symbol?: string | string[]; symbolSize?: number; symbolKeepAspect?: boolean; color?: string; backgroundColor?: string; dashArrayX?: DecalDashArrayX; dashArrayY?: DecalDashArrayY; rotation?: number; maxTileWidth?: number; maxTileHeight?: number; } export interface InnerDecalObject extends DecalObject { dirty?: boolean; } export interface MediaQuery { minWidth?: number; maxWidth?: number; minHeight?: number; maxHeight?: number; minAspectRatio?: number; maxAspectRatio?: number; } export declare type MediaUnit = { query?: MediaQuery; option: ECUnitOption; }; export declare type ComponentLayoutMode = { type?: 'box'; ignoreSize?: boolean | boolean[]; }; export declare type PaletteOptionMixin = ColorPaletteOptionMixin; export interface ColorPaletteOptionMixin { color?: ZRColor | ZRColor[]; colorLayer?: ZRColor[][]; } /** * Mixin of option set to control the box layout of each component. */ export interface BoxLayoutOptionMixin { width?: PositionSizeOption; height?: PositionSizeOption; top?: PositionSizeOption; right?: PositionSizeOption; bottom?: PositionSizeOption; left?: PositionSizeOption; } /** * Need to be parsed by `parsePositionOption` or `parsePositionSizeOption`. * Accept number, or numeric string (`'123'`), or percentage ('100%'), as x/y/width/height pixel number. * If null/undefined or invalid, return NaN. */ export declare type PositionSizeOption = number | string; export interface CircleLayoutOptionMixin<TNuance extends { centerExtra: unknown; } = { centerExtra: never; }> { center?: (number | string)[] | TNuance['centerExtra']; radius?: (number | string)[] | number | string; } export interface ShadowOptionMixin { shadowBlur?: number; shadowColor?: ColorString; shadowOffsetX?: number; shadowOffsetY?: number; } export interface BorderOptionMixin { borderColor?: ZRColor; borderWidth?: number; borderType?: ZRLineType; borderCap?: CanvasLineCap; borderJoin?: CanvasLineJoin; borderDashOffset?: number; borderMiterLimit?: number; } export declare type ColorBy = 'series' | 'data'; export interface SunburstColorByMixin { colorBy?: ColorBy; } export declare type AnimationDelayCallbackParam = { count: number; index: number; }; export declare type AnimationDurationCallback = (idx: number) => number; export declare type AnimationDelayCallback = (idx: number, params?: AnimationDelayCallbackParam) => number; export interface AnimationOption { duration?: number; easing?: AnimationEasing; delay?: number; } /** * Mixin of option set to control the animation of series. */ export interface AnimationOptionMixin { /** * If enable animation */ animation?: boolean; /** * Disable animation when the number of elements exceeds the threshold */ animationThreshold?: number; /** * Duration of initialize animation. * Can be a callback to specify duration of each element */ animationDuration?: number | AnimationDurationCallback; /** * Easing of initialize animation */ animationEasing?: AnimationEasing; /** * Delay of initialize animation * Can be a callback to specify duration of each element */ animationDelay?: number | AnimationDelayCallback; /** * Delay of data update animation. * Can be a callback to specify duration of each element */ animationDurationUpdate?: number | AnimationDurationCallback; /** * Easing of data update animation. */ animationEasingUpdate?: AnimationEasing; /** * Delay of data update animation. * Can be a callback to specify duration of each element */ animationDelayUpdate?: number | AnimationDelayCallback; } export interface RoamOptionMixin { /** * If enable roam. can be specified 'scale' or 'move' */ roam?: boolean | 'pan' | 'move' | 'zoom' | 'scale'; /** * Hover over an area where roaming is triggered. * - if `null`/`undefined`, the trigger area is * the intersection of "self bounding rect" and "clipping rect (if any)". * - if 'global', the trigger area is * the intersection of "the entire canvas" and "clipping rect (if any)". * NOTE: * The clipping rect, which can be enabled by `clip: true`, is typically the layout rect. * The layout rect is typically determined by option `left`/`right`/`top`/`bottom`/`width`/`height`, some * components/series, such as `geo` and `series.map` can also be determined by `layoutCenter`/`layoutSize`, * and may modified by `preserveAspect`. * * PENDING: do we need to support to only trigger roaming on the shapes themselves, * rather than the bounding rect? * PENDING: do we need to support to check by the laytout rect? But in this case, * `roamTrigger: 'global', clip: true` is more reasonable. */ roamTrigger?: 'global' | 'selfRect' | NullUndefined; /** * Current center position. */ center?: (number | string)[]; /** * Current zoom level. Default is 1 */ zoom?: number; scaleLimit?: { min?: number; max?: number; }; } export interface PreserveAspectMixin { preserveAspect?: boolean | 'contain' | 'cover'; preserveAspectAlign?: 'left' | 'right' | 'center'; preserveAspectVerticalAlign?: 'top' | 'bottom' | 'middle'; } export declare type SymbolSizeCallback<T> = (rawValue: any, params: T) => number | number[]; export declare type SymbolCallback<T> = (rawValue: any, params: T) => string; export declare type SymbolRotateCallback<T> = (rawValue: any, params: T) => number; export declare type SymbolOffsetCallback<T> = (rawValue: any, params: T) => string | number | (string | number)[]; /** * Mixin of option set to control the element symbol. * Include type of symbol, and size of symbol. */ export interface SymbolOptionMixin<T = never> { /** * type of symbol, like `cirlce`, `rect`, or custom path and image. */ symbol?: string | (T extends never ? never : SymbolCallback<T>); /** * Size of symbol. */ symbolSize?: number | number[] | (T extends never ? never : SymbolSizeCallback<T>); symbolRotate?: number | (T extends never ? never : SymbolRotateCallback<T>); symbolKeepAspect?: boolean; symbolOffset?: string | number | (string | number)[] | (T extends never ? never : SymbolOffsetCallback<T>); } /** * ItemStyleOption is a most common used set to config element styles. * It includes both fill and stroke style. */ export interface ItemStyleOption<TCbParams = never> extends ShadowOptionMixin, BorderOptionMixin { color?: ZRColor | (TCbParams extends never ? never : ((params: TCbParams) => ZRColor)); opacity?: number; decal?: DecalObject | 'none'; borderRadius?: (number | string)[] | number | string; } /** * ItemStyleOption is a option set to control styles on lines. * Used in the components or series like `line`, `axis` * It includes stroke style. */ export interface LineStyleOption<Clr = ZRColor> extends ShadowOptionMixin { width?: number; color?: Clr; opacity?: number; type?: ZRLineType; cap?: CanvasLineCap; join?: CanvasLineJoin; dashOffset?: number; miterLimit?: number; } /** * ItemStyleOption is a option set to control styles on an area, like polygon, rectangle. * It only include fill style. */ export interface AreaStyleOption<Clr = ZRColor> extends ShadowOptionMixin { color?: Clr; opacity?: number; } declare type Arrayable<T extends Dictionary<any>> = { [key in keyof T]: T[key] | T[key][]; }; declare type Dictionaryable<T extends Dictionary<any>> = { [key in keyof T]: T[key] | Dictionary<T[key]>; }; export interface VisualOptionUnit { symbol?: string; symbolSize?: number; color?: ColorString; colorAlpha?: number; opacity?: number; colorLightness?: number; colorSaturation?: number; colorHue?: number; decal?: DecalObject; liftZ?: number; } export declare type VisualOptionFixed = VisualOptionUnit; /** * Option about visual properties used in piecewise mapping * Used in each piece. */ export declare type VisualOptionPiecewise = VisualOptionUnit; /** * Option about visual properties used in linear mapping */ export declare type VisualOptionLinear = Arrayable<VisualOptionUnit>; /** * Option about visual properties can be encoded from ordinal categories. * Each value can either be a dictionary to lookup with category name, or * be an array to lookup with category index. In this case the array length should * be same with categories. */ export declare type VisualOptionCategory = Arrayable<VisualOptionUnit> | Dictionaryable<VisualOptionUnit>; /** * All visual properties can be encoded. */ export declare type BuiltinVisualProperty = keyof VisualOptionUnit; export declare type TextCommonOptionNuanceBase = Record<string, unknown>; export declare type TextCommonOptionNuanceDefault = {}; declare type LabelStyleColorString = ColorString | 'inherit' | 'auto'; export interface TextCommonOption<TNuance extends TextCommonOptionNuanceBase = TextCommonOptionNuanceDefault> extends ShadowOptionMixin { color?: 'color' extends keyof TNuance ? (TNuance['color'] | LabelStyleColorString) : LabelStyleColorString; fontStyle?: ZRFontStyle; fontWeight?: ZRFontWeight; fontFamily?: string; fontSize?: number | string; align?: HorizontalAlign; verticalAlign?: VerticalAlign; baseline?: VerticalAlign; opacity?: number; lineHeight?: number; backgroundColor?: ColorString | { image: ImageLike | string; }; borderColor?: string; borderWidth?: number; borderType?: ZRLineType; borderDashOffset?: number; borderRadius?: number | number[]; padding?: number | number[]; /** * Currently margin related options are not declared here. They are not supported in rich text. * @see {LabelCommonOption} */ width?: number | string; height?: number; textBorderColor?: string; textBorderWidth?: number; textBorderType?: ZRLineType; textBorderDashOffset?: number; textShadowBlur?: number; textShadowColor?: string; textShadowOffsetX?: number; textShadowOffsetY?: number; tag?: string; } export declare type GlobalTextStyleOption = Pick<TextCommonOption, 'color' | 'opacity' | 'fontStyle' | 'fontWeight' | 'fontSize' | 'fontFamily' | 'textShadowColor' | 'textShadowBlur' | 'textShadowOffsetX' | 'textShadowOffsetY' | 'textBorderColor' | 'textBorderWidth' | 'textBorderType' | 'textBorderDashOffset'>; export interface RichTextOption extends Dictionary<TextCommonOption> { } export interface LabelFormatterCallback<T = CallbackDataParams> { (params: T): string; } /** * LabelOption is an option set to control the style of labels. * Include color, background, shadow, truncate, rotation, distance, etc.. */ export interface LabelOption<TNuance extends { positionExtra: unknown; } = { positionExtra: never; }> extends LabelCommonOption { /** * If show label */ show?: boolean; position?: ElementTextConfig['position'] | TNuance['positionExtra']; distance?: number; rotate?: number; offset?: number[]; silent?: boolean; precision?: number | 'auto'; valueAnimation?: boolean; } /** * Common options for both `axis.axisLabel`, `axis.nameTextStyle and other `label`s. * Historically, they have had some nuances in options. */ export interface LabelCommonOption<TNuanceOption extends TextCommonOptionNuanceBase = TextCommonOptionNuanceDefault> extends TextCommonOption<TNuanceOption> { /** * Min margin between labels. Used when label has layout. * PENDING: @see {LabelMarginType} * It's `minMargin` instead of `margin` is for not breaking the previous code using `margin`. * See the summary in `textMargin`. * * [CAUTION]: do not set `minMargin` in `defaultOption`, otherwise users have to explicitly * clear the `minMargin` to use `textMargin`. */ minMargin?: number; /** * The space around the label to escape from overlapping. * Applied on the label local rect (rather than rotated enlarged rect) * Follow the format defined by `format.ts#normalizeCssArray`. * * Introduce the name `textMargin` rather than reuse the existing names to avoid breaking change: * - `margin` historically have been used to indicate the distance from `label.x/.y` to something: * - `axisLabel.margin` & `axisPointer.label.margin`: to the axis line. * - `calendar.dayLabel/monthLabel/yearLabel.margin`: * - `series-pie.label.margin`: to pie body (deprecated, replaced by `edgeDistance`) * - `series-themeRiver.label.margin`: to the shape edge * - `minMargin` conveys the same meaning as this `textMargin` but has a different nuance, * it works like CSS margin collapse (gap = label1.minMargin/2 + label2.minMargin/2), * and `minMargin` applied on the global bounding rect (parallel to screen x and y) rather * than the original local bounding rect (can be rotated, smaller and more presice). * PENDING: @see {LabelMarginType} */ textMargin?: number | number[]; overflow?: TextStyleProps['overflow']; lineOverflow?: TextStyleProps['lineOverflow']; ellipsis?: TextStyleProps['ellipsis']; rich?: RichTextOption; } export interface SeriesLabelOption<TCallbackDataParams extends CallbackDataParams = CallbackDataParams, TNuance extends { positionExtra: unknown; } = { positionExtra: never; }> extends LabelOption<TNuance> { formatter?: string | LabelFormatterCallback<TCallbackDataParams>; } /** * Option for labels on line, like markLine, lines */ export interface LineLabelOption extends Omit<LabelOption, 'distance' | 'position'> { position?: 'start' | 'middle' | 'end' | 'insideStart' | 'insideStartTop' | 'insideStartBottom' | 'insideMiddle' | 'insideMiddleTop' | 'insideMiddleBottom' | 'insideEnd' | 'insideEndTop' | 'insideEndBottom' | 'insideMiddleBottom'; /** * Distance can be an array. * Which will specify horizontal and vertical distance respectively */ distance?: number | number[]; } export interface LabelLineOption { show?: boolean; /** * If displayed above other elements */ showAbove?: boolean; length?: number; length2?: number; smooth?: boolean | number; minTurnAngle?: number; lineStyle?: LineStyleOption; } export interface SeriesLineLabelOption extends LineLabelOption { formatter?: string | LabelFormatterCallback<CallbackDataParams>; } export interface LabelLayoutOptionCallbackParams { /** * Index of data which the label represents. * It can be null if label doesn't represent any data. */ dataIndex?: number; /** * Type of data which the label represents. * It can be null if label doesn't represent any data. */ dataType?: SeriesDataType; seriesIndex: number; text: string; align: ZRTextAlign; verticalAlign: ZRTextVerticalAlign; rect: RectLike; labelRect: RectLike; labelLinePoints?: number[][]; } export interface LabelLayoutOption { /** * If move the overlapped label. If label is still overlapped after moved. * It will determine if to hide this label with `hideOverlap` policy. * * shiftX/Y will keep the order on x/y * shuffleX/y will move the label around the original position randomly. */ moveOverlap?: 'shiftX' | 'shiftY' | 'shuffleX' | 'shuffleY'; /** * If hide the overlapped label. It will be handled after move. * @default 'none' */ hideOverlap?: boolean; /** * If label is draggable. */ draggable?: boolean; /** * Can be absolute px number or percent string. */ x?: number | string; y?: number | string; /** * offset on x based on the original position. */ dx?: number; /** * offset on y based on the original position. */ dy?: number; rotate?: number; align?: ZRTextAlign; verticalAlign?: ZRTextVerticalAlign; width?: number; height?: number; fontSize?: number; labelLinePoints?: number[][]; } export declare type LabelLayoutOptionCallback = (params: LabelLayoutOptionCallbackParams) => LabelLayoutOption; export interface TooltipFormatterCallback<T> { /** * For sync callback * params will be an array on axis trigger. */ (params: T, asyncTicket: string): string | HTMLElement | HTMLElement[]; /** * For async callback. * Returned html string will be a placeholder when callback is not invoked. */ (params: T, asyncTicket: string, callback: (cbTicket: string, htmlOrDomNodes: string | HTMLElement | HTMLElement[]) => void): string | HTMLElement | HTMLElement[]; } declare type TooltipBuiltinPosition = 'inside' | 'top' | 'left' | 'right' | 'bottom'; declare type TooltipBoxLayoutOption = Pick<BoxLayoutOptionMixin, 'top' | 'left' | 'right' | 'bottom'>; export declare type TooltipPositionCallbackParams = CallbackDataParams | CallbackDataParams[]; /** * Position relative to the hoverred element. Only available when trigger is item. */ export interface TooltipPositionCallback { (point: [number, number], /** * params will be an array on axis trigger. */ params: TooltipPositionCallbackParams, /** * Will be HTMLDivElement when renderMode is html * Otherwise it's graphic.Text */ el: HTMLDivElement | ZRText | null, /** * Rect of hover elements. Will be null if not hovered */ rect: RectLike | null, size: { /** * Size of popup content */ contentSize: [number, number]; /** * Size of the chart view */ viewSize: [number, number]; }): Array<number | string> | TooltipBuiltinPosition | TooltipBoxLayoutOption; } /** * Common tooltip option * Can be configured on series, graphic elements */ export interface CommonTooltipOption<FormatterParams> { show?: boolean; /** * When to trigger */ triggerOn?: 'mousemove' | 'click' | 'none' | 'mousemove|click'; /** * Whether to not hide popup content automatically */ alwaysShowContent?: boolean; formatter?: string | TooltipFormatterCallback<FormatterParams>; /** * Formatter of value. * * Will be ignored if tooltip.formatter is specified. */ valueFormatter?: (value: OptionDataValue | OptionDataValue[], dataIndex: number) => string; /** * Absolution pixel [x, y] array. Or relative percent string [x, y] array. * If trigger is 'item'. position can be set to 'inside' / 'top' / 'left' / 'right' / 'bottom', * which is relative to the hovered element. * * Support to be a callback */ position?: (number | string)[] | TooltipBuiltinPosition | TooltipPositionCallback | TooltipBoxLayoutOption; confine?: boolean; /** * Consider triggered from axisPointer handle, verticalAlign should be 'middle' */ align?: HorizontalAlign; verticalAlign?: VerticalAlign; /** * Delay of show. milesecond. */ showDelay?: number; /** * Delay of hide. milesecond. */ hideDelay?: number; transitionDuration?: number; /** * Whether mouse is allowed to enter the floating layer of tooltip * If you need to interact in the tooltip like with links or buttons, it can be set as true. */ enterable?: boolean; /** * Whether enable display transition when show/hide tooltip. * Defaults to `true` for backward compatibility. * If set to `false`, the tooltip 'display' will be set to 'none' when hidden. * @default true * @since v6.0.0 */ displayTransition?: boolean; backgroundColor?: ColorString; borderColor?: ColorString; borderRadius?: number; borderWidth?: number; shadowBlur?: number; shadowColor?: string; shadowOffsetX?: number; shadowOffsetY?: number; /** * Padding between tooltip content and tooltip border. */ padding?: number | number[]; /** * Available when renderMode is 'html' */ extraCssText?: string; textStyle?: Pick<LabelOption, 'color' | 'fontStyle' | 'fontWeight' | 'fontFamily' | 'fontSize' | 'lineHeight' | 'width' | 'height' | 'textBorderColor' | 'textBorderWidth' | 'textShadowColor' | 'textShadowBlur' | 'textShadowOffsetX' | 'textShadowOffsetY' | 'align'> & { decoration?: string; }; } export declare type ComponentItemTooltipOption<T> = CommonTooltipOption<T> & { content?: string; /** * Whether to encode HTML content according to `tooltip.renderMode`. * * e.g. renderMode 'html' needs to encode but 'richText' does not. */ encodeHTMLContent?: boolean; formatterParams?: ComponentItemTooltipLabelFormatterParams; }; export declare type ComponentItemTooltipLabelFormatterParams = { componentType: string; name: string; $vars: string[]; } & { [key in string]: unknown; }; /** * Tooltip option configured on each series */ export declare type SeriesTooltipOption = CommonTooltipOption<CallbackDataParams> & { trigger?: 'item' | 'axis' | boolean | 'none'; }; declare type LabelFormatterParams = { value: ScaleDataValue; axisDimension: string; axisIndex: number; seriesData: CallbackDataParams[]; }; /** * Common axis option. can be configured on each axis */ export interface CommonAxisPointerOption { show?: boolean | 'auto'; z?: number; zlevel?: number; triggerOn?: 'click' | 'mousemove' | 'none' | 'mousemove|click'; type?: 'line' | 'shadow' | 'none'; snap?: boolean; triggerTooltip?: boolean; triggerEmphasis?: boolean; /** * current value. When using axisPointer.handle, value can be set to define the initial position of axisPointer. */ value?: ScaleDataValue; status?: 'show' | 'hide'; label?: LabelOption & { precision?: 'auto' | number; margin?: number; /** * String template include variable {value} or callback function */ formatter?: string | ((params: LabelFormatterParams) => string); }; animation?: boolean | 'auto'; animationDurationUpdate?: number; animationEasingUpdate?: ZREasing; /** * Available when type is 'line' */ lineStyle?: LineStyleOption; /** * Available when type is 'shadow' */ shadowStyle?: AreaStyleOption; handle?: { show?: boolean; icon?: string; /** * The size of the handle */ size?: number | number[]; /** * Distance from handle center to axis. */ margin?: number; color?: ColorString; /** * Throttle for mobile performance */ throttle?: number; } & ShadowOptionMixin; seriesDataIndices?: { seriesIndex: number; dataIndex: number; dataIndexInside: number; }[]; } export interface ComponentOption { mainType?: string; type?: string; id?: OptionId; name?: OptionName; z?: number; zlevel?: number; coordinateSystem?: string; coordinateSystemUsage?: CoordinateSystemUsageOption; coord?: CoordinateSystemDataCoord; } /** * - "data": Use it as "dataCoordSys", each data item is laid out based on a coord sys. * - "box": Use it as "boxCoordSys", the overall bounding rect or anchor point is calculated based on a coord sys. * e.g., * grid rect (cartesian rect) is calculate based on matrix/calendar coord sys; * pie center is calculated based on calendar/cartesian; * * The default value (if not declared in option `coordinateSystemUsage`): * For series, be "data", since this is the most case and backward compatible. * For non-series components, be "box", since "data" is not applicable. */ export declare type CoordinateSystemUsageOption = 'data' | 'box'; export declare type BlurScope = 'coordinateSystem' | 'series' | 'global'; /** * can be array of data indices. * Or may be an dictionary if have different types of data like in graph. */ export declare type InnerFocus = DefaultEmphasisFocus | ArrayLike<number> | Dictionary<ArrayLike<number>>; export interface DefaultStatesMixin { emphas