@eclipse-scout/chart/dist/d.ts/src/chart/ChartJsRenderer.d.ts

Eclipse Scout chart

/// <reference types="jquery" />
import { AbstractChartRenderer, CartesianChartScale, Chart, ChartAxis, ChartConfig, ChartData, ChartType, NumberFormatter, RadialChartScale } from '../index';
import { ActiveElement, BubbleDataPoint, CartesianScaleOptions, Chart as ChartJs, ChartArea, ChartDataset, ChartEvent, ChartType as ChartJsType, Color, DefaultDataPoint, LegendElement, LegendItem, Scale, ScatterDataPoint, Scriptable, ScriptableContext, TooltipItem, TooltipLabelStyle, TooltipModel } from 'chart.js';
import 'chart.js/auto';
import { SomeRequired, Tooltip } from '@eclipse-scout/core';
import { Context } from 'chartjs-plugin-datalabels';
export declare class ChartJsRenderer extends AbstractChartRenderer {
    static ARROW_LEFT_RIGHT: string;
    static ARROW_UP_DOWN: string;
    chartJs: ChartJsChart;
    onlyIntegers: boolean;
    maxXAxesTicksHeight: number;
    numSupportedColors: number;
    colorSchemeCssClass: string;
    minRadialChartDatalabelSpace: number;
    resetDatasetAfterHover: boolean;
    legendHoverDatasets: number[];
    removing: boolean;
    $canvas: JQuery<HTMLCanvasElement>;
    protected _labelFormatter: LabelFormatter;
    protected _xLabelFormatter: LabelFormatter;
    protected _yLabelFormatter: LabelFormatter;
    protected _xAxisFitter: AxisFitter;
    protected _yAxisFitter: AxisFitter;
    protected _radialChartDatalabelsDisplayHandler: DatalabelsDisplayHandler;
    protected _radialChartDatalabelsFormatter: RadialChartDatalabelsFormatter;
    protected _datalabelsFormatter: DatalabelsFormatter;
    protected _datalabelBackgroundColorHandler: DatalabelBackgroundColorHandler;
    protected _legendLabelGenerator: LegendLabelGenerator;
    protected _clickHandler: ChartEventHandler;
    protected _hoverHandler: ChartEventHandler;
    protected _pointerHoverHandler: ChartEventHandler;
    protected _legendClickHandler: LegendEventHandler;
    protected _legendHoverHandler: LegendEventHandler;
    protected _legendPointerHoverHandler: LegendEventHandler;
    protected _legendLeaveHandler: LegendEventHandler;
    protected _legendPointerLeaveHandler: LegendEventHandler;
    protected _resizeHandler: ResizeHandler;
    protected _tooltipTitleGenerator: TooltipTitleGenerator;
    protected _tooltipItemsGenerator: TooltipItemsGenerator;
    protected _tooltipLabelGenerator: TooltipLabelGenerator;
    protected _tooltipLabelValueGenerator: TooltipLabelValueGenerator;
    protected _tooltipLabelColorGenerator: TooltipLabelColorGenerator;
    protected _tooltipRenderer: TooltipRenderer;
    protected _tooltip: Tooltip;
    protected _tooltipTimeoutId: number;
    protected _updatingDatalabels: boolean;
    protected _hoveringClickableElement: boolean;
    constructor(chart: Chart);
    protected _validateChartData(): boolean;
    protected _render(): void;
    protected _renderChart(config: ChartConfig): void;
    protected _updateData(): void;
    isDataUpdatable(): boolean;
    isDetachSupported(): boolean;
    refresh(): void;
    protected _renderAnimationDuration(): void;
    protected _renderCheckedItems(): void;
    protected _checkItems(config: ChartConfig): boolean;
    stopAnimations(): void;
    protected _adjustConfig(config: ChartConfig): void;
    protected _adjustType(config: ChartConfig): void;
    protected _computeDatasets(chartData: ChartData, config: ChartConfig): void;
    protected _isHorizontalBar(config: ChartConfig): boolean;
    protected _computeLabelMap(axis: ChartAxis[]): Record<number, string>;
    protected _adjustData(config: ChartConfig): void;
    protected _adjustBarBorderWidth(config: ChartConfig): void;
    protected _adjustDatasetBorderWidths(dataset: ChartDataset): void;
    /**
     * Sets the borderWidth to 0 if the backgroundColor and the borderColor are identical and backups the original value.
     * This method is idempotent as it restores the original state first and then applies its logic.
     *
     * @param hover whether hoverBorderWidth, hoverBackgroundColor and hoverBorderColor should be considered instead of borderWidth, backgroundColor and borderColor
     */
    protected _adjustDatasetBorderWidth(dataset: ChartDataset, hover?: boolean): void;
    protected _adjustMaxSegments(config: ChartConfig): void;
    protected _isMaxSegmentsExceeded(config: ChartConfig, index: number): boolean;
    /**
     *  Fill temporary variable z for every bubble, if not yet set, and set bubble radius temporary to 1.
     *  This allows the chart to render itself with correct dimensions and with no interfering from bubbles (very large bubbles make the chart grid itself smaller).
     *  Later on in {@link _adjustBubbleSizes}, the bubble sizes will be calculated relative to the chart dimensions and the configured min/max sizes.
     */
    protected _adjustBubbleRadii(config: ChartConfig): void;
    protected _adjustOnlyIntegers(config: ChartConfig): void;
    protected _adjustLegend(config: ChartConfig): void;
    protected _adjustTooltip(config: ChartConfig): void;
    protected _generateTooltipTitle(tooltipItems: TooltipItem<any>[]): string | string[];
    protected _getAxisLabels(config: ChartConfig): {
        x: string;
        y: string;
    };
    protected _resolveAxisLabel(axisLabel: string | (() => string), defaultLabel?: string): string;
    protected _generateTooltipItems(tooltipItems: TooltipItem<any>[], tooltipLabel: TooltipLabelGenerator, tooltipLabelValue: TooltipLabelValueGenerator, tooltipColor: TooltipLabelColorGenerator): string;
    protected _getItemDetails(tooltipItem: TooltipItem<any>, tooltipLabel: TooltipLabelGenerator, tooltipLabelValue: TooltipLabelValueGenerator, tooltipColor: TooltipLabelColorGenerator): {
        label: string;
        labelValue: string | {
            x: string;
            y: string;
        };
        labelColor: string;
    };
    protected _generateTooltipLabel(tooltipItem: TooltipItem<any>): string;
    protected _generateTooltipLabelValue(tooltipItem: TooltipItem<any>): string | {
        x: string;
        y: string;
    };
    protected _generateTooltipLabelColor(tooltipItem: TooltipItem<any>): TooltipLabelStyle;
    protected _createTooltipAttribute(label: string, value: string, isTitle: boolean, color?: string): string;
    protected _createTooltipScatterAttribute(label: string, xValue: string, yValue: string, isTitle: boolean, color?: string): string;
    protected _renderTooltip(context: {
        chart: ChartJs;
        tooltip: TooltipModel<any>;
    }): void;
    protected _renderTooltipLater(context: {
        chart: ChartJs;
        tooltip: TooltipModel<any>;
    }): void;
    protected _computeTooltipPositionAndOffset(tooltipItem: TooltipItem<any>): {
        tooltipPosition: 'top' | 'bottom';
        tooltipDirection: 'left' | 'right';
        offsetX: number;
        offsetY: number;
        height: number;
    };
    protected _adjustGrid(config: ChartConfig): void;
    protected _adjustScalesR(config: ChartConfig): void;
    protected _adjustScalesXY(config: ChartConfig): void;
    protected _adjustXAxis(config: ChartConfig): void;
    protected _adjustYAxis(config: ChartConfig): void;
    protected _adjustPlugins(config: ChartConfig): void;
    protected _adjustPluginsDatalabels(config: ChartConfig): void;
    protected _getNumberFormatter(): NumberFormatter;
    /**
     * Creates an unbound function that calls the given formatter on this {@link ChartJsRenderer}. The context of this
     * unbound function is passed to the formatter as argument.
     */
    protected _createLabelFormatter(formatter: LabelFormatter): LabelFormatter;
    protected _formatLabel(label: number | string, scale?: Scale): string;
    protected _formatXLabel(label: number | string, scale?: Scale): string;
    protected _formatYLabel(label: number | string, scale?: Scale): string;
    /**
     * Uses the given scale to format the given label iff it is a {@link CategoryScale}.
     */
    protected _formatCategory(label: number | string, scale?: Scale): number | string;
    protected _getXLabelMap(): Record<number | string, string>;
    protected _getYLabelMap(): Record<number | string, string>;
    protected _getLabelMap(identifier: any): Record<number | string, string>;
    protected _formatLabelMap(label: number | string, labelMap: Record<string, string>, numberFormatter: NumberFormatter): string;
    protected _formatNumberLabel(label: number | string): string;
    protected _fitXAxis(xAxis: Scale<CartesianScaleOptions>): void;
    protected _fitYAxis(yAxis: Scale<CartesianScaleOptions>): void;
    protected _displayDatalabelsOnRadialChart(context: Context): boolean;
    protected _formatDatalabelsOnRadialChart(value: number, context: Context): string;
    protected _computeSumOfVisibleElements(context: Context): number;
    protected _formatDatalabels(value: number | ScatterDataPoint | BubbleDataPoint, context: Context): string;
    protected _getBackgroundColorOfDataset(context: Context): Color;
    protected _adjustColors(config: ChartConfig): void;
    protected _adjustColorSchemeCssClass(config: ChartConfig): void;
    protected _adjustDatasetColors(config: ChartConfig): void;
    protected _computeDatasetColors(config: ChartConfig, multipleColorsPerDataset: boolean): DatasetColors;
    protected _computeDatasetColorsAutoColor(config: ChartConfig, multipleColorsPerDataset: boolean): DatasetColors;
    protected _computeBackgroundColor(type: ChartType, index: number, checkable: boolean): string;
    protected _computeBorderColor(type: ChartType, index: number): string;
    protected _computeHoverBackgroundColor(type: ChartType, index: number, checkable: boolean): string;
    protected _computeHoverBorderColor(type: ChartType, index: number): string;
    protected _computeCheckedBackgroundColor(type: ChartType, index: number, checkable: boolean): string;
    protected _computeCheckedHoverBackgroundColor(type: ChartType, index: number, checkable: boolean): string;
    protected _computeLegendColor(type: ChartType, index: number): string;
    protected _computePointHoverColor(type: ChartType, index: number): string;
    protected _computeDatasetColorsChartValueGroups(config: ChartConfig, multipleColorsPerDataset: boolean): DatasetColors;
    protected _adjustColorOpacity(color: string, opacity?: number): string;
    protected _adjustRgbColorOpacity(rgbColor: string, opacity?: number): string;
    protected _adjustHexColorOpacity(hexColor: string, opacity?: number): string;
    protected _adjustLegendColors(config: ChartConfig): void;
    protected _computeLabelColor(type: ChartType): string;
    protected _generateLegendLabels(chart: ChartJsChart): LegendItem[];
    protected _adjustScalesRColors(config: ChartConfig): void;
    protected _computeLabelBackdropColor(type: ChartType): string;
    protected _computeGridColor(type: ChartType): string;
    protected _computeScaleTicksColor(type: ChartType): string;
    protected _adjustScalesXYColors(config: ChartConfig): void;
    protected _computeAxisLabelColor(type: ChartType): string;
    protected _adjustPluginColors(config: ChartConfig): void;
    protected _adjustPluginsDatalabelColors(config: ChartConfig): void;
    protected _computeDatalabelColor(type: ChartType): string;
    protected _adjustClickHandler(config: ChartConfig): void;
    protected _onCanvasClick(event: JQuery.ClickEvent): void;
    protected _onClick(event: ChartEvent, items: ActiveElement[]): void;
    /**
     * Selects the most relevant item. Default is the first item.
     */
    protected _selectRelevantItem(items: ActiveElement[]): ActiveElement;
    protected _onHover(event: ChartEvent, items: ActiveElement[]): void;
    protected _onHoverPointer(event: ChartEvent, items: ActiveElement[]): void;
    protected _onLegendClick(e: ChartEvent, legendItem: LegendItem, legend: LegendElement<any>): void;
    protected _onLegendHover(e: ChartEvent, legendItem: LegendItem, legend: LegendElement<any>): void;
    protected _onLegendHoverPointer(e: ChartEvent, legendItem: LegendItem, legend: LegendElement<any>): void;
    protected _onLegendLeave(e: ChartEvent, legendItem: LegendItem, legend: LegendElement<any>): void;
    /**
     * Sets the hover background color as the datasets background color.
     * This little workaround is necessary for the line chart, which does not support a native hover effect.
     * The previous background color will be backed up on the dataset property "backgroundColorBackup"
     * and can be restored with {@link _restoreBackgroundColor}.
     */
    protected _setHoverBackgroundColor(dataset: ChartDataset): void;
    /**
     * Restores the background color of a dataset or of all datasets,
     * if they were previously overwritten by {@link _setHoverBackgroundColor}.
     */
    protected _restoreBackgroundColor(dataset?: ChartDataset): void;
    protected _onLegendLeavePointer(e: ChartEvent, legendItem: LegendItem, legend: LegendElement<any>): void;
    protected _updateHoverStyle(datasetIndex: number, enabled: boolean): void;
    protected _adjustResizeHandler(config: ChartConfig): void;
    protected _onResize(chart: ChartJsChart, size: {
        width: number;
        height: number;
    }): void;
    protected _adjustSize(config: ChartConfig, chartArea: ChartArea, options?: ChartJsRendererAdjustSizeOptions): void;
    protected _adjustBubbleSizes(config: ChartConfig, chartArea: ChartArea, options?: ChartJsRendererAdjustSizeOptions): ChartArea;
    protected _computeMaxMinValue(config: ChartConfig, datasets: ChartDataset[], options?: ChartJsRendererComputeMaxMinValueOptions): Boundary;
    protected _calculateBoundary(value: number, roundingFunctionPositive: (number: any) => number, roundingFunctionNegative: (number: any) => number): number;
    protected _calculateBoundaryPositive(value: number, roundingFunction: (number: any) => number): number;
    protected _adjustGridMaxMin(config: ChartConfig, chartArea: ChartArea, options?: ChartJsRendererAdjustSizeOptions): void;
    protected _computeBoundaryPointElement(config: ChartConfig, options: SomeRequired<ChartJsRendererComputeBoundaryWithIdentifierOptions, 'identifier' | 'space'>): Boundary;
    protected _computeXBoundaryPointElement(config: ChartConfig, options: SomeRequired<ChartJsRendererComputeBoundaryOptions, 'space'>): Boundary;
    protected _computeYBoundaryPointElement(config: ChartConfig, options: SomeRequired<ChartJsRendererComputeBoundaryOptions, 'space'>): Boundary;
    protected _computeYBoundaries(config: ChartConfig, options: SomeRequired<ChartJsRendererComputeBoundaryOptions, 'space'>): {
        yBoundary?: Boundary;
        yBoundaryDiffType?: Boundary;
    };
    protected _adjustYAxisDiffType(config: ChartConfig, datasets: ChartDataset[], datasetsDiffType: ChartDataset[]): void;
    protected _adjustAxisMaxMin(axis: AxisWithMaxMin, maxTicks: number, maxMinValue: Boundary): void;
    protected _remove(afterRemoveFunc: (chartAnimationStopping?: boolean) => void): void;
}
export type LabelFormatter = (label: number | string, scale?: Scale) => string;
export type AxisFitter = (axis: Scale<CartesianScaleOptions>) => void;
export type DatalabelsDisplayHandler = (context: Context) => boolean;
export type DatalabelsFormatter = (value: number | ScatterDataPoint | BubbleDataPoint, context: Context) => string;
export type DatalabelBackgroundColorHandler = (context: Context) => Color;
export type RadialChartDatalabelsFormatter = (value: number, context: Context) => string;
export type LegendLabelGenerator = (chart: ChartJsChart) => LegendItem[];
export type ChartEventHandler = (event: ChartEvent, items: ActiveElement[]) => void;
export type LegendEventHandler = (e: ChartEvent, legendItem: LegendItem, legend: LegendElement<any>) => void;
export type ResizeHandler = (chart: ChartJsChart | ChartJs, size: {
    width: number;
    height: number;
}) => void;
export type TooltipTitleGenerator = (tooltipItems: TooltipItem<any>[]) => string | string[] | void;
export type TooltipItemsGenerator = (tooltipItems: TooltipItem<any>[], tooltipLabel: TooltipLabelGenerator, tooltipLabelValue: TooltipLabelValueGenerator, tooltipColor: TooltipLabelColorGenerator) => string;
export type TooltipLabelGenerator = (tooltipItem: TooltipItem<any>) => string | string[] | void;
export type TooltipLabelValueGenerator = (tooltipItem: TooltipItem<any>) => string | {
    x: string;
    y: string;
};
export type TooltipLabelColorGenerator = (tooltipItem: TooltipItem<any>) => TooltipLabelStyle | void;
export type TooltipRenderer = (context: {
    chart: ChartJs;
    tooltip: TooltipModel<any>;
}) => void;
export type ChartJsRendererAdjustSizeOptions = {
    isDatasetVisible?: (number: any) => boolean;
};
export type ChartJsRendererComputeBoundaryOptions = ChartJsRendererAdjustSizeOptions & {
    space?: number;
};
export type ChartJsRendererComputeBoundaryWithIdentifierOptions = ChartJsRendererComputeBoundaryOptions & {
    identifier?: string;
};
export type ChartJsRendererComputeMaxMinValueOptions = ChartJsRendererComputeBoundaryWithIdentifierOptions & {
    exact?: boolean;
    boundRange?: boolean;
    padding?: number;
    offset?: boolean;
};
export type DatasetColors = {
    backgroundColors?: (string | string[])[];
    borderColors?: (string | string[])[];
    hoverBackgroundColors?: (string | string[])[];
    hoverBorderColors?: (string | string[])[];
    checkedBackgroundColors?: (string | string[])[];
    checkedHoverBackgroundColors?: (string | string[])[];
    legendColors?: (string | string[])[];
    pointHoverColors?: (string | string[])[];
    datalabelColor?: string;
};
export type Boundary = {
    maxValue: number;
    minValue: number;
};
export type AxisWithMaxMin = (CartesianChartScale | RadialChartScale) & {
    ticks?: (CartesianChartScale | RadialChartScale)['ticks'] & {
        stepSize?: number;
    };
};
export type ChartJsChart = Omit<ChartJs, 'config'> & {
    config: ChartConfig;
    legend?: LegendElement<any>;
};
declare module 'chart.js' {
    interface ChartData<TType extends ChartJsType = ChartJsType, TData = DefaultDataPoint<TType>, TLabel = unknown> {
        maxSegmentsExceeded?: boolean;
    }
    interface ChartDatasetProperties<TType extends ChartJsType, TData> {
        datasetId?: string;
        yAxisID?: 'y' | 'yDiffType';
        pointBackgroundColor?: Scriptable<Color, ScriptableContext<TType>>;
        pointHoverBackgroundColor?: Scriptable<Color, ScriptableContext<TType>>;
        pointRadius?: Scriptable<number, ScriptableContext<TType>>;
        legendColor?: Scriptable<Color, number>;
        checkedBackgroundColor?: Color;
        checkedHoverBackgroundColor?: Color;
        checkedPointBackgroundColor?: Color;
        checkedPointHoverBackgroundColor?: Color;
        checkedPointRadius?: number;
        uncheckedBackgroundColor?: Color;
        uncheckedHoverBackgroundColor?: Color;
        uncheckedPointBackgroundColor?: Color;
        uncheckedPointHoverBackgroundColor?: Color;
        uncheckedPointRadius?: number;
        backgroundColorBackup?: Color;
    }
    interface BubbleDataPoint {
        z: number;
    }
    interface TooltipOptions<TType extends ChartJsType = ChartJsType> {
        cssClass?: string;
    }
    interface TooltipCallbacks<TType extends ChartJsType, Model = TooltipModel<TType>, Item = TooltipItem<TType>> {
        items: TooltipItemsGenerator;
        labelValue: TooltipLabelValueGenerator;
    }
}
//# sourceMappingURL=ChartJsRenderer.d.ts.map