/** * @typedef {object} CollectibleConfig * @property {string} key Key of the component to collect from. * @property {string} [type] Shape type of the nodes to collect from the component. Only relevant for triggers with 'from' type 'dimension'. * @property {function:boolean} [if] Function returning if collectible should be collected or not. Defaults to a function returning 'true'. * @property {function(object):*} [major] Function returning the major value of the node. Only relevant for triggers with 'from' type 'dimension'. Defaults to function returning `data?.major?.value`. */ /** * @typedef {object} TriggerConfig * @property {string[]} keys Keys of components that will use the trigger config. * @property {number} distance Distance in pixels to use as radius when triggering nodes. Defaults to 0. * @property {function(object):object[]} filter Filter function applied on triggering nodes. * @property {object} collect Object containing properties describing how nodes for this trigger will be collected. * @property {string|function} collect.from Where to collect nodes from. Can be 'single', 'position', 'dimension', 'radius' or a custom function. * @property {function(object):*} [collect.by] Function returning value to use to match collectibles' major value. Only relevant for 'from' type 'dimension'. Defaults to function returning `data.value`. * @property {number} [collect.distance] Distance in pixels to use as radius when collecting nodes. Only relevant for 'from' type 'radius'. Defaults to size of the shape. * @property {function(object):object[]} [collect.filter] Filter function applied on collected nodes. Only relevant for 'from' type 'radius'. * @property {function(object):object[]} [collect.after] Post collection hook for modifying collected nodes. Only applied to 'from' type 'dimension'. Argument object will contain 'collected' and 'triggerer'. * @property {string|*[]} placement Configure tooltip placement for this trigger. Can be a string or an array. Strings can be 'trigger' or 'collectible'. Array can contain function or any of the supported strings. Array will be processed in order until truthy value is returned. */ /** * @typedef {object} TooltipServiceConfig * @property {boolean} [rtl] If should use RTL. Defaults to 'false'. * @property {function(object):boolean} [enable] Function returning if tooltips are enabled or not. Argument object will contain 'event' property. Defaults to a function returning 'false'. * @property {function} [getColorSettings] Function returning color settings. Defaults to a function returning an empty object. * @property {object} [style] Object containing styling properties. Will be used for both main and legend tooltip. * @property {string} [style.fontSize] Font size. * @property {string} [style.fontFamily] Font family. * @property {string} [style.color] Text color. * @property {string} [style.background] Background color. * @property {object} [delay] Object containing delay settings. * @property {number} [delay.hover] Time in milliseconds before the tooltip is shown after hovering. Defaults to 500. * @property {number} [delay.tap] Time in milliseconds before the tooltip is shown after tapping. Defaults to 0. * @property {number} [duration] Time in milliseconds before tooltip disappears. Defaults to 8000. * @property {object} [main] Configuration object with settings relevant only for the main tooltip. * @property {string} [main.key] Key to use for creating the main tooltip component. Defaults to 'undefined'. * @property {function(object):boolean} [main.suppress] Function returning if main tooltip should be suppressed. Argument object will contain 'event'. Defaults to a function returning 'false'. * @property {function(object):*} [main.getGroupByValue] Function returning the data value used for grouping nodes. Argument object will contain 'data'. Defaults to a function returning 'undefined'. * @property {CollectibleConfig[]} [main.collectibles] Array of collectibles. Defaults to empty array. * @property {TriggerConfig[]} [main.triggers] Array of triggers. Defaults to empty array. * @property {function} [main.placement] Function returning a PicassoJS tooltip placement config object. Defaults to a function returning '{ type: bounds }'. * @property {object} [main.placements] Object containing general placement configuration. * @property {string|function()} [main.placements.collectible] Determines how the 'collectible' placement should work. Can either be 'combine' or a custom function that should return bounds. Function argument will be an object containing the 'nodes' property. Defaults to 'combine'. * @property {boolean} [main.showDuplicateMeasures] If should show duplicate measures in the tooltip. * @property {object} [main.layout] Object containing general layout settings. * @property {number} [main.layout.rows] Limit of rows to show in the tooltip. Defaults to 7. * @property {number} [main.layout.grouping] If groups should be kept intact even after row limit has been reached. Defaults to false. * @property {boolean|function} [main.layout.single] If should force to only show the first group. Can be a boolean or a custom function. Argument object will contain 'meta' and 'sections'. Defaults to false. * @property {function(object):object[]} [main.section] Function returning section content items. Argument object will contain 'expando', 'h', 'nodes', 'dataset', 'formatter', 'meta', 'create' and 'util', where 'create' is the API used for creating section items. Defaults to a function returning an empty array. * @property {function(object):undefined} [main.sections] Function that can be used to mutate the array of section items. Argument object will contain 'chart', 'expando', 'h', 'nodes', 'dataset', 'formatter', 'meta', 'create', 'util' and 'sections' , where 'create' is the full API to create section items. Defaults to NOOP function. * @property {object} [main.events] Object containing event configurations. * @property {object} [main.events.tooltip] Object containing tooltip event functions. * @property {function(object):Promise} [main.events.tooltip.beforeShow] Function that will be called before 'show' will be triggered for the tooltip. Should return a promise. Argument object will contain 'expando', 'event', 'collectNodes' and 'meta'. Defaults to a function resolving undefined. * @property {function(object):undefined} [main.events.tooltip.afterShow] Function that will be called after the tooltip has been rendered. Argument object will contain 'expando', 'nodes' and 'meta'. * @property {function(object):undefined} [main.events.tooltip.afterHide] Function that will be called after the tooltip has been hidden. Argument object will contain 'expando', 'nodes' and 'meta'. * @property {object} [main.events.interaction] Object containing interaction event functions. * @property {function(object):undefined} [main.events.interaction.mouseleave] Function that will be called when mouse leaves chart. Argument object will contain 'expando'. * @property {object} [legend] Configuration object with settings relevant only for the legend tooltip. * @property {object} [legend.keys] Object containing legend keys. * @property {object} [legend.keys.tooltip] Key to use for creating the legend tooltip component. Defaults to 'undefined'. * @property {object} [legend.keys.component] Key of the legend component. Defaults to 'undefined'. */ /** * @typedef {object} TooltipService * @param {function():object[]} getComponents Gets the components. * @param {function():object} getInteractions Gets the interactions object containing the 'native' and 'gestures' properties. */ /** * Creates a tooltip-service. * * @param {object} args Arguments object. * @param {object} args.chart PicassoJS chart instance. * @param {object} [args.translator] Translator instance. * @param {TooltipServiceConfig} [args.config] Tooltip-service config object. * * @returns {TooltipService} The created tooltip-service. * * @example * * const service = createTooltipService({ * chart, * translator, * config, * }); * * const components = [...service.getComponents()]; * * const { gestures, native } = service.getInteractions(); */ export default function createTooltipService({ chart, translator, config }: { chart: object; translator?: object | undefined; config?: TooltipServiceConfig | undefined; }): TooltipService; export type CollectibleConfig = { /** * Key of the component to collect from. */ key: string; /** * Shape type of the nodes to collect from the component. Only relevant for triggers with 'from' type 'dimension'. */ type?: string | undefined; /** * :boolean} [if] Function returning if collectible should be collected or not. Defaults to a function returning 'true'. */ "": Function; /** * Function returning the major value of the node. Only relevant for triggers with 'from' type 'dimension'. Defaults to function returning `data?.major?.value`. */ major?: ((arg0: object) => any) | undefined; }; export type TriggerConfig = { /** * Keys of components that will use the trigger config. */ keys: string[]; /** * Distance in pixels to use as radius when triggering nodes. Defaults to 0. */ distance: number; /** * Filter function applied on triggering nodes. */ filter: (arg0: object) => object[]; /** * Object containing properties describing how nodes for this trigger will be collected. */ collect: { from: string | Function; by?: ((arg0: object) => any) | undefined; distance?: number | undefined; filter?: ((arg0: object) => object[]) | undefined; after?: ((arg0: object) => object[]) | undefined; }; /** * Configure tooltip placement for this trigger. Can be a string or an array. Strings can be 'trigger' or 'collectible'. Array can contain function or any of the supported strings. Array will be processed in order until truthy value is returned. */ placement: string | any[]; }; export type TooltipServiceConfig = { /** * If should use RTL. Defaults to 'false'. */ rtl?: boolean | undefined; /** * Function returning if tooltips are enabled or not. Argument object will contain 'event' property. Defaults to a function returning 'false'. */ enable?: ((arg0: object) => boolean) | undefined; /** * Function returning color settings. Defaults to a function returning an empty object. */ getColorSettings?: Function | undefined; /** * Object containing styling properties. Will be used for both main and legend tooltip. */ style?: { /** * Font size. */ fontSize?: string | undefined; /** * Font family. */ fontFamily?: string | undefined; /** * Text color. */ color?: string | undefined; /** * Background color. */ background?: string | undefined; } | undefined; /** * Object containing delay settings. */ delay?: { /** * Time in milliseconds before the tooltip is shown after hovering. Defaults to 500. */ hover?: number | undefined; /** * Time in milliseconds before the tooltip is shown after tapping. Defaults to 0. */ tap?: number | undefined; } | undefined; /** * Time in milliseconds before tooltip disappears. Defaults to 8000. */ duration?: number | undefined; /** * Configuration object with settings relevant only for the main tooltip. */ main?: { /** * Key to use for creating the main tooltip component. Defaults to 'undefined'. */ key?: string | undefined; /** * Function returning if main tooltip should be suppressed. Argument object will contain 'event'. Defaults to a function returning 'false'. */ suppress?: ((arg0: object) => boolean) | undefined; /** * Function returning the data value used for grouping nodes. Argument object will contain 'data'. Defaults to a function returning 'undefined'. */ getGroupByValue?: ((arg0: object) => any) | undefined; /** * Array of collectibles. Defaults to empty array. */ collectibles?: CollectibleConfig[] | undefined; /** * Array of triggers. Defaults to empty array. */ triggers?: TriggerConfig[] | undefined; /** * Function returning a PicassoJS tooltip placement config object. Defaults to a function returning '{ type: bounds }'. */ placement?: Function | undefined; /** * Object containing general placement configuration. */ placements?: { /** * Determines how the 'collectible' placement should work. Can either be 'combine' or a custom function that should return bounds. Function argument will be an object containing the 'nodes' property. Defaults to 'combine'. */ collectible?: string | (() => any) | undefined; } | undefined; /** * If should show duplicate measures in the tooltip. */ showDuplicateMeasures?: boolean | undefined; /** * Object containing general layout settings. */ layout?: { /** * Limit of rows to show in the tooltip. Defaults to 7. */ rows?: number | undefined; /** * If groups should be kept intact even after row limit has been reached. Defaults to false. */ grouping?: number | undefined; /** * If should force to only show the first group. Can be a boolean or a custom function. Argument object will contain 'meta' and 'sections'. Defaults to false. */ single?: boolean | Function | undefined; } | undefined; /** * Function returning section content items. Argument object will contain 'expando', 'h', 'nodes', 'dataset', 'formatter', 'meta', 'create' and 'util', where 'create' is the API used for creating section items. Defaults to a function returning an empty array. */ section?: ((arg0: object) => object[]) | undefined; /** * Function that can be used to mutate the array of section items. Argument object will contain 'chart', 'expando', 'h', 'nodes', 'dataset', 'formatter', 'meta', 'create', 'util' and 'sections' , where 'create' is the full API to create section items. Defaults to NOOP function. */ sections?: ((arg0: object) => undefined) | undefined; /** * Object containing event configurations. */ events?: { /** * Object containing tooltip event functions. */ tooltip?: { /** * Function that will be called before 'show' will be triggered for the tooltip. Should return a promise. Argument object will contain 'expando', 'event', 'collectNodes' and 'meta'. Defaults to a function resolving undefined. */ beforeShow?: ((arg0: object) => Promise) | undefined; /** * Function that will be called after the tooltip has been rendered. Argument object will contain 'expando', 'nodes' and 'meta'. */ afterShow?: ((arg0: object) => undefined) | undefined; /** * Function that will be called after the tooltip has been hidden. Argument object will contain 'expando', 'nodes' and 'meta'. */ afterHide?: ((arg0: object) => undefined) | undefined; } | undefined; /** * Object containing interaction event functions. */ interaction?: { /** * Function that will be called when mouse leaves chart. Argument object will contain 'expando'. */ mouseleave?: ((arg0: object) => undefined) | undefined; } | undefined; } | undefined; } | undefined; /** * Configuration object with settings relevant only for the legend tooltip. */ legend?: { /** * Object containing legend keys. */ keys?: { /** * Key to use for creating the legend tooltip component. Defaults to 'undefined'. */ tooltip?: object | undefined; /** * Key of the legend component. Defaults to 'undefined'. */ component?: object | undefined; } | undefined; } | undefined; }; export type TooltipService = object;