@opitzconsulting/pie-chart/lib/pie-chart.component.d.ts

animated pie chart component

import { OnChanges, DoCheck, ElementRef, SimpleChanges, OnInit, EventEmitter } from '@angular/core';
import * as d3 from 'd3';
/** chart item properties */
export interface PieChartData {
    /** value of item */
    value: number;
    /** caption of item (must be unique) */
    caption: string;
    /** optional color of item (if not set, generated automatically) */
    color?: string;
}
/** internal chart item properties */
export interface InternalPieChartData extends PieChartData {
    /** svg path for item */
    path?: string;
    /** delete flag for removing after transition */
    deleted?: boolean;
}
/** internal type for optimization */
export declare type PieArcData = d3.PieArcDatum<InternalPieChartData> & d3.DefaultArcObject;
export declare class PieChartComponent implements OnInit, OnChanges, DoCheck {
    private element;
    /** chart data, which should be displayed */
    data: Array<PieChartData>;
    /** chart width in pixel */
    width: number;
    /** chart height in pixel */
    height: number;
    /** duration of animation transition */
    duration: number;
    /** inner spacing in pixel, if greater than 0 it defines the radius of the empty circle in the middle */
    innerSpacing: number;
    /** outer spacing in pixel */
    outerSpacing: number;
    /** fired when user clicks on a chart entry */
    chartClick: EventEmitter<PieChartData>;
    /** fired when user hovers a chart entry */
    chartHover: EventEmitter<PieChartData>;
    /** pie chart radius in pixel */
    radius: number;
    /** transform-attribute to center chart vertical and horizontal */
    center: string;
    /** current chart data with angle and path definitions, it will be consistent to the representation */
    curData: PieArcData[];
    /** end chart data with angle and path definitions, it will representate the end state and used only for interpolation */
    private endData;
    /** path generator function (internal use only) */
    protected pathGenerator: d3.Arc<any, d3.DefaultArcObject>;
    /** copy of last processed data, used to identify changes in ngDoCheck that Angular overlooked */
    private lastData;
    /**
     * Creates a deep copy of an variable. Do not use this function with recursive objects or
     * browser objects like window or document.
     * ToDo: should be outsourced.
     * @param v
     */
    protected deepCopy<T>(v: T): T;
    /**
     * constructor
     * @param element
     */
    constructor(element: ElementRef);
    ngOnInit(): void;
    /**
     * Fired when Angular (re-)sets data-bound properties. This function does not fire when changed data in bound objects or arrays.
     * Angular only checks references.
     * @param changes
     */
    ngOnChanges(changes: SimpleChanges): void;
    /**
     * Fired during every change detection run to detect and act upon changes that Angular can't or won't detect on its own.
     */
    ngDoCheck(): void;
    /**
     * Checks whether the data property has changed. This function also check whether only an item property has
     * changed. In case of change the chart will be rendered.
     */
    protected detectDataChange(): void;
    /**
     * Generates a random color for a chart item.
     */
    protected generateRandomColor(value: number): string;
    /**
     * generates a pie chart item definition
     * @param item
     * @param index
     * @param value
     * @param startAngle
     * @param endAngle
     */
    protected generatePieArcData(item: PieChartData, index: number, value: number, startAngle: number, endAngle: number): PieArcData;
    /**
     * Checks whether items were deleted and initiate delete transition for these items.
     */
    protected detectDeletedEntries(): void;
    /**
     * Checks whether items were inserted and initiate insert transition for these items.
     */
    protected detectInsertedEntries(): void;
    /**
     * Checks whether items were moved and initiate transition for these items.
     */
    protected detectMovedEntries(): void;
    /**
     * Synchronize state arrays (curData / endData) with given items (data).
     */
    protected syncItems(): void;
    /**
     * Function for interrupt a running chart animation. Necessary because if transition is still active
     * when a new transition is started, tween factory function from previos transition will still be fired
     * until end of transition is reached. For entries which have a started transition the tween factory
     * function will be fired multiple times with different tween interpolation range!
     */
    protected interrupt: Function;
    /**
     * will be triggerd to animate chart changes.
     * important! this method musst be called within a setTimeout function because of angulars
     * rendering cycle.
     */
    protected animateChanges(): void;
    /**
     * Must be called after transition ends to remove entries in curData and endData which are marked
     * as deleted.
     */
    protected cleanStateItems(): void;
    /**
     * Checks whether all items have assigned color values and if necessary completes colors in given data array.
     */
    protected initColors(): void;
    /**
     * Returns maximal angle of current state items.
     */
    protected getMaxAngle(): number;
    /**
     * Calculates angles for current and end state items.
     * @param maxAngle last maximal angle in current state to avoid "jumping" transitions
     */
    protected calculateAngles(maxAngle: number): void;
    /** reference to tooltip div element */
    private tooltip;
    /**
     * fired when mouse enters a pie chart path element and shows tooltip
     * @param event
     */
    overPath(event: MouseEvent): void;
    /**
     * fired when mouse moves over a pie chart path element and adjusts tooltip
     * @param event
     */
    movePath(event: MouseEvent): void;
    /**
     * fired when mouse leaves a pie chart path element and hides tooltip
     * @param event
     */
    outPath(event: MouseEvent): void;
    /**
     * fired when user clicks on a pie chart path element
     * @param event
     */
    clickPath(event: MouseEvent): void;
    /**
     * main rendering function
     */
    protected render(): void;
}