import { Theme } from "../core/Theme"; import type { Root } from "../core/Root"; import { MultiDisposer } from "../core/util/Disposer"; import type { Template } from "../core/util/Template"; /** * A responsive rule: settings for matching elements that apply while the * chart's size meets a condition. * * @see {@link https://www.amcharts.com/docs/v5/concepts/responsive/} for more info * @important */ export interface IResponsiveRule { /** * Class name of the elements the rule applies to, such as `"AxisLabel"`. */ name?: string; /** * Theme tags the elements must also have. */ tags?: string | string[]; /** * Settings for the elements while the rule applies. Needs `name`. */ settings?: any; /** * Returns `true` while the rule should apply. Gets the root's width and * height in pixels; the breakpoint functions of [[ResponsiveTheme]], such * as `ResponsiveTheme.widthM`, fit here. */ relevant: (width: number, height: number) => boolean; /** * Called when the rule starts to apply. */ applying?: () => void; /** * Called when the rule stops applying. */ removing?: () => void; /** * Whether the rule currently applies. * @readonly */ applied?: boolean; /** * The theme rule's [[Template]] that `settings` are set on. * @readonly */ template?: Template; /** * @ignore */ _dp?: MultiDisposer; } /** * A theme that changes chart settings as the chart's size changes, so charts * fit small spaces. `new()` comes with built-in rules for the common chart * types; `newEmpty()` starts with none, for rules of your own. * * @see {@link https://www.amcharts.com/docs/v5/concepts/responsive/} for more info */ export declare class ResponsiveTheme extends Theme { /** * Breakpoint of 100 pixels. */ static XXS: number; /** * Breakpoint of 200 pixels. */ static XS: number; /** * Breakpoint of 300 pixels. */ static S: number; /** * Breakpoint of 400 pixels. */ static M: number; /** * Breakpoint of 600 pixels. */ static L: number; /** * Breakpoint of 800 pixels. */ static XL: number; /** * Breakpoint of 1000 pixels. */ static XXL: number; /** * `true` when the width is at most `XXS` (100 pixels). */ static widthXXS(width: number, _height: number): boolean; /** * `true` when the width is at most `XS` (200 pixels). */ static widthXS(width: number, _height: number): boolean; /** * `true` when the width is at most `S` (300 pixels). */ static widthS(width: number, _height: number): boolean; /** * `true` when the width is at most `M` (400 pixels). */ static widthM(width: number, _height: number): boolean; /** * `true` when the width is at most `L` (600 pixels). */ static widthL(width: number, _height: number): boolean; /** * `true` when the width is at most `XL` (800 pixels). */ static widthXL(width: number, _height: number): boolean; /** * `true` when the width is at most `XXL` (1000 pixels). */ static widthXXL(width: number, _height: number): boolean; /** * `true` when the height is at most `XXS` (100 pixels). */ static heightXXS(_width: number, height: number): boolean; /** * `true` when the height is at most `XS` (200 pixels). */ static heightXS(_width: number, height: number): boolean; /** * `true` when the height is at most `S` (300 pixels). */ static heightS(_width: number, height: number): boolean; /** * `true` when the height is at most `M` (400 pixels). */ static heightM(_width: number, height: number): boolean; /** * `true` when the height is at most `L` (600 pixels). */ static heightL(_width: number, height: number): boolean; /** * `true` when the height is at most `XL` (800 pixels). */ static heightXL(_width: number, height: number): boolean; /** * `true` when the height is at most `XXL` (1000 pixels). */ static heightXXL(_width: number, height: number): boolean; /** * `true` when both the width and the height are at most `XXS` (100 pixels). */ static isXXS(width: number, height: number): boolean; /** * `true` when both the width and the height are at most `XS` (200 pixels). */ static isXS(width: number, height: number): boolean; /** * `true` when both the width and the height are at most `S` (300 pixels). */ static isS(width: number, height: number): boolean; /** * `true` when both the width and the height are at most `M` (400 pixels). */ static isM(width: number, height: number): boolean; /** * `true` when both the width and the height are at most `L` (600 pixels). */ static isL(width: number, height: number): boolean; /** * `true` when both the width and the height are at most `XL` (800 pixels). */ static isXL(width: number, height: number): boolean; /** * `true` when both the width and the height are at most `XXL` (1000 * pixels). */ static isXXL(width: number, height: number): boolean; /** * `true` when the width or the height is at most `XXS` (100 pixels). */ static maybeXXS(width: number, height: number): boolean; /** * `true` when the width or the height is at most `XS` (200 pixels). */ static maybeXS(width: number, height: number): boolean; /** * `true` when the width or the height is at most `S` (300 pixels). */ static maybeS(width: number, height: number): boolean; /** * `true` when the width or the height is at most `M` (400 pixels). */ static maybeM(width: number, height: number): boolean; /** * `true` when the width or the height is at most `L` (600 pixels). */ static maybeL(width: number, height: number): boolean; /** * `true` when the width or the height is at most `XL` (800 pixels). */ static maybeXL(width: number, height: number): boolean; /** * `true` when the width or the height is at most `XXL` (1000 pixels). */ static maybeXXL(width: number, height: number): boolean; private _dp?; constructor(root: Root, isReal: boolean); /** * Rules added to the theme. */ responsiveRules: IResponsiveRule[]; /** * Creates the theme without its built-in rules, for rules of your own. */ static newEmpty(this: T, root: Root): InstanceType; /** * Adds a responsive rule and returns it. It applies at once if it is * relevant. * * @see {@link https://www.amcharts.com/docs/v5/concepts/responsive/} for more info * @param rule Responsive rule * @return Responsive rule */ addRule(rule: IResponsiveRule): IResponsiveRule; /** * Removes a responsive rule from the theme. * * @param rule Responsive rule */ removeRule(rule: IResponsiveRule): void; dispose(): void; protected _isUsed(): boolean; protected _maybeApplyRules(): void; protected _maybeApplyRule(rule: IResponsiveRule): void; protected _maybeUnapplyRule(rule: IResponsiveRule): void; /** * Adds default rules for various chart types and most standard scenarios. */ protected setupDefaultRules(): void; } //# sourceMappingURL=ResponsiveTheme.d.ts.map