UNPKG

@nova-ui/charts

Version:

Nova Charts is a library created to provide potential consumers with solutions for various data visualizations that conform with the Nova Design Language. It's designed to solve common patterns identified by UX designers, but also be very flexible so that

1,381 lines (1,358 loc) 166 kB
import * as i14 from '@angular/cdk/overlay'; import { ConnectedPosition, Overlay, OverlayPositionBuilder, ScrollStrategyOptions } from '@angular/cdk/overlay'; import * as i0 from '@angular/core'; import { OnInit, OnDestroy, ElementRef, TemplateRef, OnChanges, SimpleChanges, QueryList, ChangeDetectorRef, InjectionToken, EventEmitter, AfterViewInit, AfterContentInit, NgZone } from '@angular/core'; import * as rxjs from 'rxjs'; import { Subject, Observable, BehaviorSubject } from 'rxjs'; import { ScaleLinear } from 'd3-scale'; import { Selection } from 'd3-selection'; import { ValueMap } from 'd3-selection-multi'; import { AxisScale, Axis } from 'd3-axis'; import * as i13 from '@nova-ui/bits'; import { UnitOption, PopoverComponent, LoggerService } from '@nova-ui/bits'; import { CurveFactory, Arc, DefaultArcObject } from 'd3-shape'; import { BaseType, DefaultArcObject as DefaultArcObject$1 } from 'd3'; import moment, { Duration } from 'moment/moment'; import { Numeric } from 'd3-array'; /** @ignore */ declare class ChartTooltipDirective implements OnInit, OnDestroy { private overlay; private overlayPositionBuilder; private scrollStrategyOptions; elementRef: ElementRef<HTMLElement>; template: TemplateRef<any>; openRemoteControl: Subject<void>; closeRemoteControl: Subject<void>; positions: ConnectedPosition[]; private overlayRef; private openSubscription; private closeSubscription; private positionStrategy; constructor(overlay: Overlay, overlayPositionBuilder: OverlayPositionBuilder, scrollStrategyOptions: ScrollStrategyOptions, elementRef: ElementRef<HTMLElement>); ngOnInit(): void; show(): void; hide(): void; ngOnDestroy(): void; getOverlayElement(): HTMLElement; static ɵfac: i0.ɵɵFactoryDeclaration<ChartTooltipDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<ChartTooltipDirective, "[nuiChartTooltip]", never, { "template": { "alias": "template"; "required": false; }; "openRemoteControl": { "alias": "openRemoteControl"; "required": false; }; "closeRemoteControl": { "alias": "closeRemoteControl"; "required": false; }; "positions": { "alias": "positions"; "required": false; }; }, {}, never, never, false, never>; } declare class ChartTooltipComponent { template: TemplateRef<any>; static ɵfac: i0.ɵɵFactoryDeclaration<ChartTooltipComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<ChartTooltipComponent, "nui-chart-tooltip", never, { "template": { "alias": "template"; "required": false; }; }, {}, never, never, false, never>; } declare abstract class ChartPlugin implements IChartPlugin { constructor(); chart: IChart; initialize(): void; update(): void; updateDimensions(): void; destroy(): void; } /** Domain for series with empty or null data */ declare const EMPTY_CONTINUOUS_DOMAIN: number[]; /** A reasonable non-data-driven domain for charts */ declare const NORMALIZED_DOMAIN: number[]; /** Signature for domain calculator */ type DomainCalculator = (chartSeriesSet: IChartSeries<IAccessors>[], scaleId: string, scale: IScale<any>) => any[]; /** Signature for a specific domain calculator that rounds domain to the closes tick */ interface IDomainWithTicksCalculator extends DomainCalculator { domainWithTicks?: true; } /** Type guard for the domain calculator with ticks */ declare function isDomainWithTicksCalculator(obj: any): obj is IDomainWithTicksCalculator; /** Interface for scale formatters */ interface IFormatters<T> { /** Formatter for tick labels */ tick?: Formatter<T>; /** Additional formatters */ [p: string]: Formatter<T> | undefined; } /** Signature for label formatters */ type Formatter<T> = (value: T) => string; /** Dictionary of scale collections in index and array form */ interface ScalesIndex { [key: string]: { /** Scale collection as an index */ index: { [scaleId: string]: IScale<any>; }; /** Scale collection as an array */ list: IScale<any>[]; }; } /** Dictionary of scales */ type Scales = Record<string, IScale<any>>; interface IXYScales extends Scales { x: IScale<any>; y: IScale<any>; } interface IRadialScales extends Scales { r: IScale<number>; } /** Interface for a scale */ interface IScale<T> { /** The scale identifier */ readonly id: string; readonly d3Scale: AxisScale<T>; fixDomainValues?: T[]; /** If this flag is enabled, the domain of this scale is not recalculated */ isDomainFixed?: boolean; /** Method used to calculate the scale's domain */ domainCalculator?: DomainCalculator; /** The scales formatters */ formatters: IFormatters<T>; /** If this flag is enabled, the domain has been recalculated with ticks in mind */ __domainCalculatedWithTicks?: boolean; scaleUnits?: UnitOption; /** If this flag is enabled, the label generated by InteractionLabelPlugin will be shown only on a chart that is beeing hovered */ isTimeseriesScale?: boolean; /** * Sets fix domain to the first and last value and assigns values to fixDomainValues property */ setFixDomainValues?(values: T[]): void; /** * Determines if the scale's domain is continuous * * @returns {boolean} true if the scale's domain is continuous (numeric), false otherwise */ isContinuous(): boolean; /** * Determines if the scale's domain is valid * * @returns {boolean} true if the scale's domain is valid, false otherwise */ isDomainValid(): boolean; /** * Converts a value to its corresponding coordinate * * @param {T} value The value to be converted * @returns {number} The coordinate corresponding to the specified value */ convert(value: T): number; /** * Converts a coordinate to its corresponding value * * @param {number} coordinate The coordinate to be converted * @returns {T} The value corresponding to the specified coordinate */ invert(coordinate: number): T | undefined; /** * Gets the scale's range * * @returns {[number, number]} The scale's range */ range(): [number, number]; /** * Sets the scale's range * * @param {[number, number]} range The scale's new range */ range(range: [number, number]): this; /** * Gets the scale's domain * * @returns {T[]} The scale's domain */ domain(): T[]; /** * Sets the scale's domain * * @param {T[]} domain The scale's new domain */ domain(domain: T[]): this; /** * Shorthand method for setting the domain and isDomainFixed at once * * @param {T[]} domain The scale's fixed domain */ fixDomain(domain: T[]): void; /** * Reverse the scale orientation by toggling the reversed flag */ reverse(): this; /** * Getter for the reversed flag (see #reverse) */ reversed(): boolean; /** * Setter for the reversed flag (see #reverse) * * @param reversed */ reversed(reversed: boolean): this; } interface IBandScale<T> extends IScale<T> { bandwidth(): number; } declare function isBandScale(scale: any): scale is IBandScale<any>; interface IHasInnerScale<T> extends IScale<T> { innerScale: IScale<any>; } declare function hasInnerScale(scale: any): scale is IHasInnerScale<any>; /** * @ignore * * Manages data and their domains */ declare class DataManager { private chart?; private _chartSeriesSet; private dataIndex; private _scalesIndexByKey; private _scalesIndexById; get chartSeriesSet(): IChartSeries<IAccessors>[]; get scalesIndexByKey(): ScalesIndex; get scalesIndexById(): { [scaleId: string]: IScale<any>; }; constructor(chart?: IChart | undefined); update(seriesSet: IChartSeries<IAccessors>[]): void; getChartSeries(seriesId: string): IChartSeries<IAccessors>; private updateScaleDomain; private buildScalesIndex; updateScaleDomains(): void; } declare class EventBus<T> { private streams; getStream(streamId: string): Subject<T>; destroy(): void; } /** @ignore */ declare class Lasagna { private readonly clipPath; static CONTAINER_CLASS: string; static LAYER_CLASS: string; layers: ILasagnaLayer[]; private readonly container; constructor(target: D3Selection<SVGSVGElement>, clipPath: string); addLayer(layer: ILasagnaLayer): D3Selection; removeLayer(layerName: string): void; getLayerContainer(name: string): D3Selection; getContainer(): D3Selection<SVGGElement>; private update; } /** * @ignore * * Manages and executes drawing and data point highlighting for each data series renderer and handles the setting of series display states */ declare class RenderEngine { private lasagna; private dataManager; /** Subject for emitting events to the outside world about data points closest to an interaction on the chart */ interactionDataPointsSubject: Subject<IInteractionDataPointsEvent>; /** Subject passed to the renderer for triggering events regarding a data point */ rendererSubject: Subject<IRendererEventPayload<any>>; private highlightDataPointSubscription; private highlightedDataPoints; private renderLayers; private layerIndex; constructor(lasagna: Lasagna, dataManager: DataManager); /** * Invokes the draw method on each of the series renderers */ update(): void; /** * Updates the lasagna layers and series containers based on the current series set */ updateSeriesContainers(): void; /** * Emits the HIGHLIGHT_DATA_POINT_EVENT if the highlighted index changes for a particular series. * Emits an event with information about all of the highlighted data points if the highlighted index changes for any series. * * @param {IHighlightXYPayload} highlightedValues The highlighted values for each scale */ emitInteractionDataPoints(payload: IInteractionValuesPayload): void; /** * Invokes the renderer highlightDataPoint method for the specified series * * @param {string} seriesId The series on which to highlight a data point * @param {number} index The data point index to highlight */ highlightDataPoint(seriesId: string, index: number): void; /** * Sets attributes specified in each state data object to the appropriate the series containers. * Invokes a renderer's setSeriesState method when the state of its series container has been updated. * * @param {IRenderStateData[]} stateDataSet A collection of series states */ setSeriesStates(stateDataSet: IRenderStateData[]): void; destroy(): void; private buildLayerIndex; private removeUnusedLayers; private addNeededLayers; private updateLayerContents; private getSeriesChildContainers; private getChildContainerId; } interface IStartEndRangeAccessors extends IDataAccessors { start: DataAccessor; end: DataAccessor; } interface IValueThicknessAccessors extends IDataAccessors { value: DataAccessor; thickness: DataAccessor; } interface IRectangleDataAccessors extends IDataAccessors { startX?: DataAccessor; endX?: DataAccessor; thicknessX?: DataAccessor; startY?: DataAccessor; endY?: DataAccessor; thicknessY?: DataAccessor; } interface IRectangleSeriesAccessors extends ISeriesAccessors { color?: SeriesAccessor; marker?: SeriesAccessor; } interface IRectangleAccessors extends IAccessors { data: IRectangleDataAccessors; series: IRectangleSeriesAccessors; } declare class RectangleAccessors implements IRectangleAccessors { data: IRectangleDataAccessors; series: IRectangleSeriesAccessors; constructor(); } declare class XYRenderer<TA extends IAccessors> extends Renderer<TA> { /** See {@link Renderer#draw} */ draw(renderSeries: IRenderSeries<TA>, rendererSubject: Subject<IRendererEventPayload>): void; /** See {@link Renderer#getDataPointPosition} */ getDataPointPosition(dataSeries: IDataSeries<TA>, index: number, scales: Scales): IPosition | undefined; /** See {@link Renderer#getDataPointIndex} */ getDataPointIndex(series: IDataSeries<TA>, values: { [p: string]: any; }, scales: Scales): number; } /** * Renderer that is able to draw bar chart */ declare class BarRenderer extends XYRenderer<IRectangleAccessors> { config: IBarRendererConfig; /** * Creates an instance of BarRenderer. * @param {IBarRendererConfig} [config] Renderer configuration object */ constructor(config?: IBarRendererConfig); static THICK: number; static THIN: number; static MIN_BAR_SIZE_FOR_ICON: number; static MIN_BAR_THICKNESS: number; static readonly BAR_RECT_CLASS = "bar"; DEFAULT_CONFIG: IBarRendererConfig; readonly barContainerClass = "bar-container"; /** See {@link Renderer#draw} */ draw(renderSeries: IRenderSeries<IRectangleAccessors>, rendererSubject: Subject<IRendererEventPayload>): void; /** See {@link Renderer#getDataPointIndex} */ getDataPointIndex(series: IDataSeries<IRectangleAccessors>, values: { [p: string]: any; }, scales: Scales): number; /** See {@link Renderer#highlightDataPoint} */ highlightDataPoint(renderSeries: IRenderSeries<IRectangleAccessors>, dataPointIndex: number, rendererSubject: Subject<IRendererEventPayload>): void; /** See {@link Renderer#getDataPointPosition} */ getDataPointPosition(dataSeries: IDataSeries<IRectangleAccessors>, index: number, scales: Scales): IPosition; getDataPoint(renderSeries: IRenderSeries<IRectangleAccessors>, data: any, i: number): IDataPoint; filterDataByDomain(data: any[]): any[]; getDomain(data: any[], dataSeries: IDataSeries<IRectangleAccessors>, scaleKey: string, scale: IScale<any>): any[]; protected emitBarClick(renderSeries: IRenderSeries<IRectangleAccessors>, data: any, i: number, rendererSubject: Subject<IRendererEventPayload>): void; /** * Returns function to generate attributes to draw bar from dataSeries that typically comes from preprocessor with help of accessors that * are aware of how to access renderParameters to draw individual bars * @param dataSeries Series to draw * @param scales Scales used to draw bars * Except of bars this is also used for highlights (which may have a bit different values) */ protected getAttrsGenerator(dataSeries: IDataSeries<IRectangleAccessors>, scales: Scales): (d: any, i: number) => IPosition; private getDimensions; } interface IXYDataAccessors { /** Accessor for value plotted on the <code>x</code> coordinate */ x: DataAccessor; /** Accessor for value plotted on the <code>y</code> coordinate */ y: DataAccessor; /** Additional custom keys to match the base interface */ [key: string]: DataAccessor | undefined; } declare class XYAccessors implements IAccessors { /** The default data accessors for using with renderers deriving from XYRenderer */ data: IXYDataAccessors; } interface ILineDataAccessors extends IXYDataAccessors { defined?: DataAccessor<any, boolean>; } /** * Series accessors used in {@link LineAccessors}. */ interface ILineSeriesAccessors { /** Color of the series */ color?: SeriesAccessor; /** Marker for the series */ marker?: SeriesAccessor; /** Additional custom keys to match the base interface */ [key: string]: SeriesAccessor | undefined; } interface ILineAccessors extends IAccessors { data: ILineDataAccessors; /** Series level accessors - e.g. for colors, markers, etc. */ series: ILineSeriesAccessors; } /** * Accessor class supporting the {@link LineRenderer}, that defines required inputs acquired from data points. * This class includes default behavior for all required fields. It's using properties of the same name for data accessors. * <p> * If colorProvider or markerProvider is not defined in the constructor, every new instance of LineAccessors will instantiate it's own, so that has to be * kept in mind when configuring charts as it could cause potential color synchronization problems. * * <p>See referenced <code>data</code> and <code>series</code> interfaces for required properties.</p> */ declare class LineAccessors extends XYAccessors implements ILineAccessors { colorProvider: IValueProvider<string>; markerProvider: IValueProvider<IChartMarker>; data: ILineDataAccessors; series: ILineSeriesAccessors; constructor(colorProvider?: IValueProvider<string>, markerProvider?: IValueProvider<IChartMarker>); } /** * Renderer that is able to draw line chart */ declare class LineRenderer extends XYRenderer<ILineAccessors> { readonly config: ILineRendererConfig; static UNCLIPPED_DATA_LAYER_NAME: string; static LINE_CAP_CLASS_NAME: string; static getStrokeStyleDashed(width: number): string; static getStrokeStyleDotted(width: number): string; private DEFAULT_CONFIG; /** * Creates an instance of LineRenderer. * @param {ILineRendererConfig} [config={}] Renderer configuration object */ constructor(config?: ILineRendererConfig); /** See {@link Renderer#draw} */ draw(renderSeries: IRenderSeries<ILineAccessors>, rendererSubject: Subject<IRendererEventPayload>): void; /** * When the data contains only one data point with undefined 'x' value, it is considered an infinite line and special approach is applied * * @param renderSeries */ isInfiniteLineData(renderSeries: IRenderSeries<ILineAccessors>): boolean; /** * Renders the line in prepared <path> element * * @param {IRenderSeries<ILineAccessors>} renderSeries * @param {D3Selection} path D3 Selection with <path> element pre-created and pre-styled */ drawLine(renderSeries: IRenderSeries<ILineAccessors>, path: D3Selection<SVGPathElement>): void; /** See {@link Renderer#highlightDataPoint} */ highlightDataPoint(renderSeries: IRenderSeries<ILineAccessors>, dataPointIndex: number, rendererSubject: Subject<IRendererEventPayload>): void; /** See {@link Renderer#getRequiredLayers} */ getRequiredLayers(): ILasagnaLayer[]; /** See {@link Renderer#getDataPointPosition} */ getDataPointPosition(dataSeries: IDataSeries<ILineAccessors>, index: number, scales: Scales): IPosition | undefined; private drawStandardLine; private drawInfiniteLine; private updateLineCaps; } declare enum RenderState { hidden = "hidden", deemphasized = "deemphasized", emphasized = "emphasized", default = "default" } declare enum RenderLayerName { background = "background", data = "data", unclippedData = "unclipped-data", foreground = "foreground" } /** The configuration interface for marker interaction */ interface IMarkerInteractionConfig { /** Enables mouse events on data point markers */ enabled: boolean; /** Enables the pointer style mouse cursor when data point markers are hovered */ clickable?: boolean; } /** The configuration interface for the enhanced line caps */ interface IEnhancedLineCapConfig { /** Set the stroke color */ stroke?: string; /** Set the stroke width in pixels */ strokeWidth?: number; /** Set the fill color */ fill?: string; /** Set the radius in pixels */ radius?: number; } /** The configuration interface for the line renderer */ interface ILineRendererConfig extends IRendererConfig { /** Set the width of the line in pixels */ strokeWidth?: number; /** Set the stroke-dasharray of the line, e.g. "1,1", "2,2", etc. */ strokeStyle?: string; /** Set the stroke-linecap of the line, e.g. "round" */ strokeLinecap?: string; /** Set the d3 curve algorithm to be used for drawing the lines */ curveType?: CurveFactory; /** Set the strategy for determining the behavior of the chart resulting from user interaction, e.g. LineSelectSeriesInteractionStrategy */ interactionStrategy?: IHighlightStrategy<ILineAccessors, LineRenderer>; /** Configure the interaction behavior for markers */ markerInteraction?: IMarkerInteractionConfig; /** Set whether enhanced line caps should be displayed */ useEnhancedLineCaps?: boolean; /** Optionally configure enhanced line caps. Prerequisite: 'useEnhancedLineCaps' is set to true */ enhancedLineCap?: IEnhancedLineCapConfig; } /** The configuration interface for the bar renderer */ interface IBarRendererConfig extends IRendererConfig { /** Set the padding on both sides of each bar */ padding?: number; /** Set the class name to apply custom styles to the bars */ barClass?: string; /** Set the strategy for determining the behavior of the chart resulting from user interaction, e.g. BarHighlightStrategy */ highlightStrategy?: IHighlightStrategy<IRectangleAccessors, BarRenderer>; /** Set the mouse cursor style to use when hovering over individual bars */ cursor?: string; /** Enables pointer events on the bars */ pointerEvents?: boolean; /** Set the stroke width in pixels */ strokeWidth?: number; /** Enable the minimum bar thickness (BarRenderer.MIN_BAR_THICKNESS) */ enableMinBarThickness?: boolean; } /** The configuration interface for the area renderer */ interface IAreaRendererConfig extends IRendererConfig { /** Set the d3 curve algorithm to be used for drawing the area boundaries */ curveType?: CurveFactory; /** Set the class name to apply custom styles to the areas */ areaClass?: string; /** Enables the pointer cursor when data point markers are hovered */ markerInteraction?: IMarkerInteractionConfig; /** The width of the area path's stroke in pixels. Default is 1. */ strokeWidth?: number; } interface IRenderSeries<TA extends IAccessors> { dataSeries: IDataSeries<TA>; containers: IRenderContainers; scales: Scales; parentContainer?: D3Selection<SVGElement>; } interface IHighlightStrategy<TA extends IAccessors<any>, T = Renderer<TA>> { getDataPointIndex(renderer: T, series: IDataSeries<TA>, values: { [p: string]: any; }, scales: Scales): number; highlightDataPoint(renderer: T, renderSeries: IRenderSeries<TA>, dataPointIndex: number, rendererSubject: Subject<IRendererEventPayload>): void; draw(renderer: T, renderSeries: IRenderSeries<TA>, rendererSubject: Subject<IRendererEventPayload>): void; } /** * The abstract base class for chart renderers with some limited default functionality */ declare abstract class Renderer<TA extends IAccessors> { config: IRendererConfig; static readonly DEFAULT_CONFIG: IRendererConfig; constructor(config?: IRendererConfig); interaction: Record<string, any>; /** * Draw the visual representation of the provided data series * * @param {IRenderSeries} renderSeries The series to render * @param {Subject<IRendererEventPayload>} rendererSubject A subject to optionally invoke for emitting events regarding a data point */ abstract draw(renderSeries: IRenderSeries<TA>, rendererSubject: Subject<IRendererEventPayload>): void; /** * Return position of a specified datapoint * * @param {IDataSeries} dataSeries * @param {number} index * @param {Scales} scales * @returns {IPosition} */ abstract getDataPointPosition(dataSeries: IDataSeries<TA>, index: number, scales: Scales): IPosition | undefined; /** * Based on provided values, return the nearest data point that the given coordinates represent. This is used for mouse hover behavior * * @param {IDataSeries} series series from which to determine the index corresponding to the specified values * @param {{ [axis: string]: any }} values the values from which a data point index can be determined * @param {Scales} scales the scales to be used in the index calculation * * @returns {number} negative value means that index is not found */ getDataPointIndex(series: IDataSeries<TA>, values: { [axis: string]: any; }, scales: Scales): number; /** * Highlight the data point corresponding to the specified data point index * * @param {IRenderSeries} renderSeries The series on which to render the data point highlight * @param {number} dataPointIndex index of the highlighted point within the data series (pass -1 to remove the highlight marker) * @param {Subject<IRendererEventPayload>} rendererSubject A subject to optionally invoke for emitting events regarding a data point */ highlightDataPoint(renderSeries: IRenderSeries<TA>, dataPointIndex: number, rendererSubject: Subject<IRendererEventPayload>): void; /** * Get the style attributes for the specified state that we need to apply to a series container * * @param {RenderState} state the state for which to retrieve container styles * * @returns {ValueMap<any, any>} the container styles for the specified state */ getContainerStateStyles: (state: RenderState) => ValueMap<any, any>; /** * Set the RenderState of the target data series * * @param {IRenderContainers} renderContainers the render containers of the series * @param {RenderState} state The new state for the target series */ setSeriesState(renderContainers: IRenderContainers, state: RenderState): void; /** * Set the RenderState of the target data point * * @param {D3Selection} target the target data point * @param {RenderState} state The new state for the target data point */ setDataPointState(target: D3Selection, state: RenderState): void; /** * Calculate domain for data filtered by given filterScales * * @param dataSeries * @param filterScales * @param scaleKey * @param scale * @returns array of datapoints from <code>dataSeries</code> filtered by domains of given <code>filterScale</code>s */ getDomainOfFilteredData(dataSeries: IDataSeries<TA>, filterScales: Record<string, IScale<any>>, scaleKey: string, scale: IScale<any>): any[]; /** * Calculate the domain using the data of a series * * @param {any[]} data source data, can be filtered * @param dataSeries related data series * @param {string} scaleName name of the scale for which domain calculation is needed * @param scale * * @returns {[any, any]} min and max values as an array */ getDomain(data: any[], dataSeries: IDataSeries<TA>, scaleName: string, scale: IScale<any>): any[]; /** * Filters given dataset by domain of provided scale * * @param data * @param dataSeries * @param scaleName * @param domain */ filterDataByDomain(data: any[], dataSeries: IDataSeries<TA>, scaleName: string, domain: any[]): any[]; /** * Get the definitions of lasagna layers required for visualizing data * * @returns {ILasagnaLayer[]} lasagna layer definitions */ getRequiredLayers(): ILasagnaLayer[]; protected setupInteraction(path: string[], nativeEvent: string, target: Selection<any, any, any, any>, dataPointSubject: Subject<IRendererEventPayload>, dataPoint: Partial<IDataPoint>): void; } /** * Interface for defining aspects of the top, right, bottom, and left sides of a grid */ interface IAllAround<T> { /** Object defining aspects of the top of an entity */ top: T; /** Object defining aspects of the right side of an entity */ right: T; /** Object defining aspects of the bottom of an entity */ bottom: T; /** Object defining aspects of the left side of an entity */ left: T; } /** * The width and height of an grid */ interface IDimensions { width: number; height: number; } /** * Configuration of grid dimensions */ interface IDimensionConfig { /** The top, right, bottom, and left margin sizes in pixels */ margin: IAllAround<number>; /** The top, right, bottom, and left padding sizes in pixels */ padding: IAllAround<number>; /** Sets whether the grid uses the chart's container to determine its width */ autoWidth: boolean; /** Sets whether the grid uses the chart's container to determine its height */ autoHeight: boolean; /** Set of booleans indicating whether a specific margin will be recalculated on chart dimension updates */ marginLocked?: IAllAround<boolean>; /** * Sets the grid's width. Note: 'autoWidth' must be set to false for this setting to have an effect. * * @param {number} value The new grid width * @returns {IDimensionConfig} The resulting dimension config */ width(value: number): IDimensionConfig; /** * Gets the grid's width -- excluding margins. * * @returns {number} The grid's width */ width(): number; /** * Sets the grid's height. Note: 'autoHeight' must be set to false for this setting to have an effect. * * @param {number} value The new grid height * @returns {IDimensionConfig} The resulting dimension config */ height(value: number): IDimensionConfig; /** * Gets the grid's height -- excluding margins. * * @returns {number} The grid's height */ height(): number; /** * Sets the grid's width by subtracting the grid's horizontal margins from the specified value. * Note: 'autoWidth' must be set to false for this setting to have an effect. * * @param {number} value The new width plus the grid's horizontal margins * @returns {IDimensionConfig} The resulting dimension config */ outerWidth(value: number): IDimensionConfig; /** * Gets the grid's width -- including horizontal margins. * * @returns {number} The grid's width plus horizontal margins */ outerWidth(): number; /** * Sets the grid's height by subtracting the grid's vertical margins from the specified value. * Note: 'autoWidth' must be set to false for this setting to have an effect. * * @param {number} value The new height plus the grid's vertical margins * * @returns {IDimensionConfig} The resulting dimension config */ outerHeight(value: number): IDimensionConfig; /** * Gets the grid's height -- including vertical margins. * * @returns {number} The grid's height plus vertical margins */ outerHeight(): number; } /** * Interface for defining the SVGElements forming the top, right, bottom, and left borders of an entity */ type IBorders = IAllAround<SVGElement>; /** * Configuration of grid borders */ interface IBorderConfig { /** The stroke color */ color?: string; /** The thickness of the border */ width?: number; /** The class name */ className?: string; /** Boolean indicating whether the border should be visible */ visible?: boolean; } interface ITextOverflowArgs { widthLimit: number; horizontalPadding: number; ellipsisWidth: number; } /** Type for tick overflow handler */ type TextOverflowHandler = (textSelection: Selection<BaseType, unknown, null, undefined>, args: ITextOverflowArgs) => void; /** Interface representing the configuration for tick labels */ interface ITickLabelConfig { /** * Padding for left and right sides of label used for calculating text overflow limits * (number represents the padding on each side) */ horizontalPadding: number; /** Handler for text overflow. Set to 'undefined' to disable overflow handling */ overflowHandler?: TextOverflowHandler; /** * Setting this insures the label's width is smaller or equal to the provided number */ maxWidth?: number; } /** Configuration of a grid axis */ interface IAxisConfig { /** Boolean indicating whether the axis should be visible */ visible: boolean; /** The approximate number of ticks to display */ approximateTicks: number; /** Boolean indicating whether grid ticks should be displayed */ gridTicks: boolean; /** The length of the ticks in pixels */ tickSize: number; /** Configuration for the tick labels */ tickLabel: ITickLabelConfig; /** Sets whether to fit the grid margins to the axis labels */ fit: boolean; /** Sets the axis padding */ padding: number; } /** * Basic grid configuration */ interface IGridConfig { /** Boolean indicating whether the grid will respond to mouse events */ interactive: boolean; /** Configuration for the grid's dimensions */ dimension: IDimensionConfig; /** Configuration for the grid's borders */ borders: IAllAround<IBorderConfig>; /** String indicating the desired cursor style */ cursor: string; /** Set to true to disable the render area height correction */ disableRenderAreaHeightCorrection?: boolean; /** Set to true to disable the render area width correction */ disableRenderAreaWidthCorrection?: boolean; } /** * Configuration for an XYGrid */ interface IXYGridConfig extends IGridConfig { /** The IAllAround value for the grid's axis configurations */ axis: IAllAround<IAxisConfig>; /** * Add interaction line and label plugins automatically * Note: This was added to prevent a breaking change. We should avoid this kind of option in future * versions of IXYGridConfig because ideally all plugins should be added manually (NUI-3304). */ interactionPlugins: boolean; } /** * The basic interface for a grid's dimensions, scaling, interaction, and borders * * @interface */ interface IGrid { /** The grid scales * * @type {ScalesIndex} */ scales: ScalesIndex; /** * Subject for indicating that the chart's dimensions should be updated */ updateChartDimensionsSubject?: Subject<void>; /** * Chart event bus */ eventBus: EventBus<IChartEvent>; /** * Provides access to the grid's layering mechanism * * @returns {Lasagna} The grid's layering mechanism */ getLasagna(): Lasagna; /** * Provides access to the grid's interactive area * * @returns {D3Selection} The grid's interactive area */ getInteractiveArea(): D3Selection<SVGRectElement>; /** * getter for the grid's target d3 selection * * @returns {D3Selection} The grid's target d3 selection */ target(): D3Selection<SVGSVGElement>; /** * setter for the grid's target d3 selection * * @param {D3Selection} [target] The grid's new target d3 selection * @returns {IGrid} The grid instance */ target(target: D3Selection<SVGSVGElement>): IGrid; target(target: D3Selection<SVGSVGElement>): D3Selection<SVGSVGElement> | IGrid; /** * getter for the grid configuration * * @returns {IGridConfig} The grid configuration */ config(): IGridConfig; /** * setter for the grid configuration * * @param {IGridConfig} config The new grid configuration * @returns {this} The grid instance */ config(config: IGridConfig): this; /** * Builds the grid's rendered elements * * @returns {IGrid} The grid instance */ build(): IGrid; /** * Updates the grid's rendered elements based on the current scales and configuration * * @returns {IGrid} The grid instance */ update(): IGrid; /** * Updates the grid's dimensions as specified * * @param {Partial<IDimensions>} dimensions The new grid dimensions * @returns {IGrid} The grid instance */ updateDimensions(dimensions: Partial<IDimensions>): IGrid; /** * Updates the ranges on the grid's scales based on the grid's configured dimensions * * @returns {IGrid} The grid instance */ updateRanges(): IGrid; /** * Builds the grid's plugins * * @returns {IChartPlugin[]} The set of generated plugins */ buildPlugins(chart: IChart): IChartPlugin[]; } /** * Interface for a d3 axis entity */ interface IAxis { /** The d3 group element for the axis label */ labelGroup: D3Selection<SVGGElement>; /** The d3 group element for the axis ticks */ tickGroup: D3Selection<SVGGElement>; /** The d3 group element for the axis */ group: D3Selection<SVGGElement>; /** The d3 axis */ axis: Axis<any>; } declare const GAUGE_QUANTITY_SERIES_ID = "quantity"; declare const GAUGE_REMAINDER_SERIES_ID = "remainder"; declare const GAUGE_THRESHOLD_MARKERS_SERIES_ID = "threshold-markers"; /** * The visualization modes for a gauge */ declare enum GaugeMode { Donut = "donut", Horizontal = "horizontal", Vertical = "vertical" } /** * Standard thicknesses for the linear gauge */ declare enum StandardLinearGaugeThickness { Small = 10, Large = 15 } /** * Standard values for gauge threshold marker radii */ declare enum StandardGaugeThresholdMarkerRadius { Small = 3, Large = 4 } /** * Standard values for gauge threshold marker radii */ declare enum StandardGaugeThresholdId { Warning = "warning", Critical = "critical" } /** * Standard gauge colors */ declare enum StandardGaugeColor { /** Standard color for the part of the gauge that's not filled in */ Remainder = "var(--nui-color-semantic-unknown-bg-hover)", /** Standard color for the value part of the gauge when the value represents an ok status */ Ok = "var(--nui-color-chart-one)", /** Standard color for the value part of the gauge when the value has a warning status */ Warning = "var(--nui-color-semantic-warning)", /** Standard color for the value part of the gauge when the value has a critical status */ Critical = "var(--nui-color-semantic-critical)" } /** * Default donut gauge margin for label clearance */ declare const DONUT_GAUGE_LABEL_CLEARANCE_DEFAULT = 30; /** * Default linear gauge margins for label clearance */ declare const LINEAR_GAUGE_LABEL_CLEARANCE_DEFAULTS: IAllAround<number>; /** * Short-form alias for the most commonly used generic D3 Selection type */ type D3Selection<T extends SVGElement = SVGElement> = Selection<T, any, SVGElement, any>; /** * Signature for data accessors * * @param d data point * @param i index * @param series the whole data series */ type DataAccessor<D = any, T = any> = (d: D, i: number, series: D[], dataSeries: IDataSeries<IAccessors>) => T; /** * Signature for series accessors */ type SeriesAccessor = (seriesId: string, series: IDataSeries<IAccessors>) => any; /** @ignore */ interface ILasagnaLayer { name: string; order: number; clipped: boolean; } /** Mouse interaction types */ declare enum InteractionType { /** Indicates that an element has been clicked */ Click = "click", /** Indicates that an element is hovered */ Hover = "hover", /** Indicates a 'mousedown' event */ MouseDown = "mousedown", /** Indicates that the mouse has entered the bounds of an element */ MouseEnter = "mouseenter", /** Indicates that the mouse has left the bounds of an element */ MouseLeave = "mouseleave", /** Indicates a movement of the mouse across the chart */ MouseMove = "mousemove", /** Indicates a 'mouseup' event */ MouseUp = "mouseup" } /** @ignore */ interface ICoordinates { x: number; y: number; } /** @ignore */ interface IInteractionEvent { type: InteractionType; coordinates: ICoordinates; } /** * Information about the render state of a series */ interface IRenderStateData { /** Series identifier */ seriesId: string; /** Series render state */ state: RenderState; /** Series */ series?: IChartSeries<IAccessors>; } /** @ignore */ interface IDomainLimits<T> { min: T; max: T; } interface IRendererConfig { stateStyles?: Record<RenderState, ValueMap<any, any>>; transitionDuration?: number; interactive?: boolean; /** Excludes series from scale domain calculations */ ignoreForDomainCalculation?: boolean; } interface IRadialRendererConfig extends IRendererConfig { annularWidth?: number; annularPadding?: number; /** annularGrowth is a percentage value to define annular width automatically. * It will grow until it reaches maxThickness. * Set one to 0 to use annularWidth constant value instead */ maxThickness?: number; annularGrowth?: number; cursor?: string; strokeWidth?: number; enableSeriesHighlighting?: boolean; enableDataPointHighlighting?: boolean; } /** * Standard configuration for gauge threshold renderers */ interface IGaugeThresholdsRendererConfig { /** The radius of each threshold marker */ markerRadius?: StandardGaugeThresholdMarkerRadius | number; /** Boolean indicating whether the renderer is enabled */ enabled?: boolean; } /** * Configuration for the DonutGaugeThresholdsRenderer */ interface IDonutGaugeThresholdsRendererConfig extends IRadialRendererConfig, IGaugeThresholdsRendererConfig { } /** * Configuration for the LinearGaugeThresholdsRenderer */ interface ILinearGaugeThresholdsRendererConfig extends IRendererConfig, IGaugeThresholdsRendererConfig { } interface ILinearScales { x: ScaleLinear<number, number>; y: ScaleLinear<number, number>; } interface IDataAccessors<D = any> { [key: string]: DataAccessor<D> | undefined; } interface ISeriesAccessors { [key: string]: SeriesAccessor | undefined; } /** * Accessors describe the data for the consumers. */ interface IAccessors<D = any> { /** Data point level accessors for defining what part of a datum is used for visualizations */ data?: IDataAccessors<D>; /** Series level accessors - e.g. for colors, markers, etc. */ series?: ISeriesAccessors; } /** * A set of data to visualize on the chart */ interface IDataSeries<A extends IAccessors<D>, D = any> { /** The series identifier */ id: string; /** * The series data. It is an array of arbitrary objects, the structure of which is prescribed by the consumer of this data series. Specific * renderers require specific accessor keys that are used to access values on data points. The renderers and other consumers rarely access * data point properties directly, but usually through accessors. */ data: D[]; /** Accessors describing the data */ accessors: A; /** Allow any properties to be stored on this object to facilitate the transfer of data from APIs */ [key: string]: any; } /** * The set of elements required for a chart to visualize some data */ interface IChartSeries<A extends IAccessors> extends IDataSeries<A> { /** The renderer to be used for visualizing the data */ renderer: Renderer<A>; /** * Information about how chart data should conform to the drawable area. * Grids expect certain scale keys to be used depending on the type of grid, for example an x-y grid * uses 'x' and 'y' as the keys for its scales. */ scales: Scales; /** * Represents an emphasis/visibility state of this series */ renderState?: RenderState; } interface IChartAssistSeries<A extends IAccessors> extends IChartSeries<A> { /** * Whether this series should be shown in the legend */ showInLegend?: boolean; /** * Whether this series should be preprocessed in the chart assist */ preprocess?: boolean; } interface IChartMarker { getSvg(): string; setColor(color: string): void; } interface IChart { target?: D3Selection<SVGSVGElement>; configuration?: IChartConfiguration; getEventBus(): EventBus<IChartEvent>; getDataManager(): DataManager; getRenderEngine(): RenderEngine; getGrid(): IGrid; addPlugin(plugin: IChartPlugin): void; removePlugin?(classRef: typeof ChartPlugin): void; build(element: HTMLElement): void; update(seriesSet: IChartSeries<IAccessors>[]): void; updateDimensions(): void; setSeriesStates(renderStateData: IRenderStateData[]): void; destroy(): void; } interface IChartConfiguration { updateDomainForEmptySeries?: boolean; } /** @ignore */ interface IChartComponent { chart: IChart; } /** Interface defining a chart plugin */ interface IChartPlugin { /** * Associated chart - set automatically on chart initialization */ chart: IChart; /** Initialize the plugin - Invoked automatically on chart initialization */ initialize(): void; /** Update the plugin - Invoked automatically on chart update */ update(): void; /** Update the plugin's dimensions - Invoked automatically on update of the chart's dimensions */ updateDimensions(): void; /** Perform plugin cleanup - Invoked automatically on chart destruction */ destroy(): void; } interface IChartEvent<T = any> { broadcast?: boolean; data: T; } /** @ignore */ interface IChartCollectionEvent { chartIndex: string; event: IChartEvent; } /** * Dictionary of render container name to render container */ interface IRenderContainers { /** Container name as key to render container */ [name: string]: D3Selection<SVGGElement>; } /** * Position on the chart */ interface IPosition { x: number; y: number; width?: number; height?: number; } /** * A point at which a data series enters or exits a threshold zone */ interface IZoneCrossPoint extends IPosition { /** Indicates whether the cross point is on the edge of a threshold zone */ isZoneEdge?: boolean; } /** * Information about a data point */ interface IDataPoint { /** Series identifier */ seriesId: string; /** Series */ dataSeries: IDataSeries<IAccessors>; /** Data index */ index: number; /** Data */ data: any; /** Position */ position?: IPosition; } /** * Payload for the chart's visibility status in relation to the nearest scrollable parent */ interface IChartViewStatusEventPayload { /** * Indicates whether at least one pixel of the chart's parent element has * intersected with the visible area of its nearest scrollable parent */ isChartInView: boolean; } /** * Payload for events regarding a data point */ interface IRendererEventPayload<T = any> { /** Name of the event */ eventName: string; /** Information about the data point */ data: T; } /** * Collection of one or more data points as a dictionary of seriesId to IDataPoint */ interface IDataPointsPayload { /** Series id as key to highlighted data point */ [seriesId: string]: IDataPoint; } /** * Payload for interaction events */ interface IInteractionPayload { interactionType: InteractionType; } /** * Payload for interaction events regarding a single data point */ interface IInteractionDataPointEvent extends IInteractionPayload { dataPoint: IDataPoint; } /** * Payload for axes style change when emphasizing series on grid */ type IAxesStyleChangeEventPayload = Record<string, Record<string, any>>; /** * Payload for interaction events regarding one or more data points */ interface IInteractionDataPointsEvent extends IInteractionPayload { dataPoints: IDataPointsPayload; } interface ISetDomainEventPayload { [scaleId: string]: any[]; } interface IValueProvider<T> { get(entityId: string): T | undefined; reset(): void; } interface IChartPalette { readonly standardColors: IValueProvider<string>; readonly backgroundColors: IValueProvider<string>; readonly textColors: IValueProvider<string>; } /** * Interface used for interaction values with scaleKey as key to a dictionary of scaleId to value. Typical scale keys are "x" and "y" */ interface IInteractionValues { [scaleKey: string]: { [scaleId: string]: any; }; } /** * Payload for an INTERACTION_VALUES_EVENT */ interface IInteractionValuesPayload extends IInteractionPayload { /** The values of the interaction */ values: IInteractionValues; } /** * Payload for an INTERACTION_COORDINATES_EVENT */ interface IInteractionCoordinatesPayload extends IInteractionPayload { /** The coordinates of an interaction */ coordinates: ICoordinates; } /** Interface for defining an element's position */ interface IElementPosition { top: number; left: number; width: number; height: number; } /** * This plugin calculates new size and position for content inside donut chart */ declare class ChartDonutContentPlugin extends ChartPlugin { /** Subject for getting updates on the content position */ contentPositionUpdateSubject: Subject<IElementPosition>; /** The current content position */ contentPosition: IElementPosition; updateDimensions(): void; destroy(): void; private getContentPosition; } declare class ChartDonutContentComponent implements OnDestroy, OnChanges { /** The plugin instance */ plugin: ChartDonutContentPlugin; /** The current content position */ contentPosition: IElementPosition; private contentPositionUpdateSubscription; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration<ChartDonutContentComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<ChartDonutContentComponent, "nui-chart-donut-content", never, { "plugin": { "alias": "plugin"; "required": false; }; }, {}, never, ["*"], false, never>; } /** Position with extended information for positioning a tooltip */ interface ITooltipPosition extends IPosition { overlayPositions: ConnectedPosition[]; } /** How far away from the data point position will the tooltip be positioned */ declare const TOOLTIP_POSITION_OFFSET = 10; /** @ignore * Used for charts where tooltips should be placed aside of some vertical line */ declare const getVerticalSetup: (offset: number) => ConnectedPosition[]; /** @ignore * Used for charts where t