@ux-aspects/ux-aspects/components/nested-donut-chart/nested-donut-chart.component.d.ts

Open source user interface framework for building modern, responsive, mobile big data applications

import { ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, TemplateRef } from '@angular/core';
import { AnchorPlacement } from '../../common/overlay/index';
import { ThemeColor } from '../../services/color/index';
import * as i0 from "@angular/core";
export declare class NestedDonutChartComponent implements OnInit, OnChanges, OnDestroy {
    private readonly _colorService;
    private readonly _changeDetector;
    private readonly _elementRef;
    private readonly _resizeService;
    /** Define a the dataset to display */
    dataset: ReadonlyArray<NestedDonutChartData>;
    /** Define the maximum range of the arcs */
    max: number;
    /** Define the thickness of each arc */
    thickness: number;
    /** Define the spacing of each arc */
    spacing: number;
    /** Define the track color */
    trackColor: string | ThemeColor;
    /** Determine if we should show the hover effect */
    disableHover: boolean;
    /** Determine if we should show a tooltip on arc hover */
    disableTooltip: boolean;
    /** Determine the position of the tooltip */
    tooltipPlacement: AnchorPlacement;
    /** Set the duration of the animation */
    animationDuration: number;
    /** Emit whenever an arc is clicked */
    itemClick: EventEmitter<NestedDonutChartData>;
    /** Access the SVG element */
    _chartElement: ElementRef;
    /** Allow custom tooltip template */
    _customTooltip: TemplateRef<NestedDonutChartData>;
    /** Indicate if the tooltip should be visible */
    _tooltipVisible: boolean;
    /** Store the tooltip x position */
    _tooltipX: number;
    /** Store the tooltip y position */
    _tooltipY: number;
    /** Store the context to provide to the tooltip */
    _tooltipContext: NestedDonutChartData;
    /** Determine the radius of the chart based on the specified size */
    get _radius(): number;
    /**
     * Get the size of the chart. The chart will always be square to
     * the size will be the smaller of the width/height properties
     */
    get _size(): number;
    /** Store the selection when the arcs will be drawn */
    private _arcLayer;
    /** Store the selection when the tracks will be drawn */
    private _trackLayer;
    /** Store the arc selection */
    private _arcs;
    /** Store the tracks selection */
    private _tracks;
    /** Store the previously processed data */
    private _arcData;
    /** Determine if the intial render has taken place */
    private _isInitialized;
    /** Unsubscribe from all observables automatically */
    private readonly _onDestroy;
    /** Perform the initial render */
    ngOnInit(): void;
    /** Any time an input changes we must re-render the chart */
    ngOnChanges(): void;
    ngOnDestroy(): void;
    /** Inset the content so it never overlaps the arcs */
    _getContentInset(): number;
    /** Get the dimensions of the content area */
    _getContentSize(): number;
    /** Get the dataset formated in an accessible manner */
    _getAriaLabel(): string;
    /**
     * Display the tracks and arcs defined by the dataset.
     * We also provide the transition configuration so anytime the dataset
     * changes we will animate the update.
     */
    private render;
    /** Get the interpolation function based on the new and previous angle */
    private getArcTween;
    /** Get the arc layout for a specific item in the dataset */
    private getArc;
    /**
     * Get the track arc layout for a specific item in the dataset.
     * This will match the arc of that represents the actual data
     * however the endAngle will always be a complete circle
     */
    private getTrackArc;
    /**
     * Get the radius of an arc. This is calculated
     * based on the chart radius that has been defined,
     * minus the thickness defined, then taking into account
     * the depth of the arc and the spacing between each arc.
     */
    private getArcRadius;
    /**
     * Map the dataset to the NestedDonutChartArc interface
     */
    private getChartData;
    /** Convert the data value to radians */
    private getAngle;
    /**
     * Get the color of the arc, this may be a CSS color value, the name of a color
     * from the color set or a ThemeColor object. We return this as a rgba color to
     * support the alpha channel
     */
    private getColor;
    /** If no track color is specified then default to a specific color based on the active colorset */
    private getTrackColor;
    /** Define the on hover event */
    private onArcMouseEnter;
    /** Update the tooltip position on mouse move */
    private onArcMouseMove;
    /** Define the on hover out event */
    private onArcMouseLeave;
    static ɵfac: i0.ɵɵFactoryDeclaration<NestedDonutChartComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<NestedDonutChartComponent, "ux-nested-donut-chart", never, { "dataset": { "alias": "dataset"; "required": false; }; "max": { "alias": "max"; "required": false; }; "thickness": { "alias": "thickness"; "required": false; }; "spacing": { "alias": "spacing"; "required": false; }; "trackColor": { "alias": "trackColor"; "required": false; }; "disableHover": { "alias": "disableHover"; "required": false; }; "disableTooltip": { "alias": "disableTooltip"; "required": false; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, { "itemClick": "itemClick"; }, ["_customTooltip"], ["*"], false, never>;
}
export interface NestedDonutChartData {
    name: string;
    value: number;
    color: ThemeColor | string;
    data?: {
        [key: string]: unknown;
    };
}
export interface NestedDonutChartArc extends NestedDonutChartData {
    index: number;
    startAngle: number;
    endAngle: number;
    previousEndAngle: number;
}