@eclipse-scout/chart
Version:
Eclipse Scout chart
191 lines • 6.39 kB
TypeScript
import { AbstractChartRenderer, ChartEventMap, ChartModel } from '../index';
import { ColorScheme, DeepPartial, EnumObject, InitModelOf, Widget } from '@eclipse-scout/core';
import { GreenAreaPosition } from './SpeedoChartRenderer';
import { CategoryScaleOptions, ChartConfiguration, ChartOptions, LinearScaleOptions, LogarithmicScaleOptions, RadialLinearScaleOptions, ScaleType, TimeScaleOptions as ChartJsTimeScaleOptions } from 'chart.js';
export declare class Chart extends Widget implements ChartModel {
model: ChartModel;
eventMap: ChartEventMap;
self: Chart;
data: ChartData;
config: ChartConfig;
checkedItems: ClickObject[];
chartRenderer: AbstractChartRenderer;
/** @internal */
_updatedOnce: boolean;
protected _updateChartTimeoutId: number;
protected _updateChartOpts: UpdateChartOptions;
protected _updateChartOptsWhileNotAttached: UpdateChartOptions[];
constructor();
static Type: {
readonly PIE: "pie";
readonly LINE: "line";
readonly BAR: "bar";
readonly BAR_HORIZONTAL: "horizontalBar";
readonly COMBO_BAR_LINE: "comboBarLine";
readonly FULFILLMENT: "fulfillment";
readonly SPEEDO: "speedo";
readonly SALESFUNNEL: "salesfunnel";
readonly VENN: "venn";
readonly DOUGHNUT: "doughnut";
readonly POLAR_AREA: "polarArea";
readonly RADAR: "radar";
readonly BUBBLE: "bubble";
readonly SCATTER: "scatter";
};
static Position: {
readonly TOP: "top";
readonly BOTTOM: "bottom";
readonly LEFT: "left";
readonly RIGHT: "right";
readonly CENTER: "center";
};
static DEFAULT_ANIMATION_DURATION: number;
static DEFAULT_DEBOUNCE_TIMEOUT: number;
protected _init(model: InitModelOf<this>): void;
protected _render(): void;
protected _renderProperties(): void;
protected _renderOnAttach(): void;
protected _remove(): void;
setData(data: ChartData): void;
protected _setData(data: ChartData): void;
protected _renderData(): void;
setConfig(config: ChartConfig): void;
protected _renderConfig(onlyUpdateData: boolean): void;
setCheckedItems(checkedItems: ClickObject[]): void;
protected _filterCheckedItems(checkedItems: ClickObject[]): ClickObject[];
protected _renderCheckedItems(): void;
protected _renderEnabled(): void;
protected _renderClickable(): void;
protected _renderCheckable(): void;
protected _renderChartType(): void;
protected _renderColorScheme(): void;
updateChart(opts?: UpdateChartOptions): void;
protected _resolveChartRenderer(): AbstractChartRenderer;
protected _updateChartRenderer(): void;
handleValueClick(clickedItem: ClickObject, originalEvent?: Event): void;
handleNonValueClick(originalEvent?: Event): void;
handleLegendClick(legentItemIndex: number, originalEvent?: Event): void;
}
export type ChartData = {
axes: ChartAxis[][];
chartValueGroups: ChartValueGroup[];
};
export type ChartAxis = {
label: string;
};
export type ChartValueGroup = {
type?: string;
groupName?: string;
values: number[] | Record<string, number>[];
colorHexValue?: string | string[];
cssClass?: string;
};
export type ChartConfig = Partial<Omit<ChartConfiguration, 'type' | 'options'>> & {
type: ChartType;
options?: ChartConfigOptions;
};
export type ChartConfigOptions = Omit<ChartOptions, 'scales'> & {
autoColor?: boolean;
colorMode?: ChartColorMode;
colorScheme?: ColorScheme | string;
transparent?: boolean;
maxSegments?: number;
otherSegmentClickable?: boolean;
adjustGridMaxMin?: boolean;
clickable?: boolean;
checkable?: boolean;
scaleLabelByTypeMap?: Record<ChartType, Record<string, string>>;
numberFormatter?: NumberFormatter;
reformatLabels?: boolean;
handleResize?: boolean;
animation?: {
duration?: number;
};
scales?: {
x?: CartesianChartScale;
y?: CartesianChartScale;
yDiffType?: CartesianChartScale;
r?: RadialChartScale;
};
bubble?: {
sizeOfLargestBubble?: number;
minBubbleSize?: number;
};
fulfillment?: {
startValue?: number;
};
salesfunnel?: {
normalized?: boolean;
calcConversionRate?: boolean;
};
speedo?: {
greenAreaPosition?: GreenAreaPosition;
};
venn?: {
numberOfCircles?: 1 | 2 | 3;
};
plugins?: {
legend?: {
clickable?: boolean;
pointsVisible?: boolean;
};
};
};
export type RadialChartScale = DeepPartial<RadialLinearScaleOptions> & {
type?: ScaleType;
minSpaceBetweenTicks?: number;
};
export type CartesianChartScale = DeepPartial<LinearScaleOptions | CategoryScaleOptions | TimeScaleOptions | LogarithmicScaleOptions> & {
type?: ScaleType;
minSpaceBetweenTicks?: number;
};
export type TimeScaleOptions = Omit<ChartJsTimeScaleOptions, 'min' | 'max'> & {
min?: string | number | Date | (() => string | number | Date);
max?: string | number | Date | (() => string | number | Date);
};
export type ChartType = EnumObject<typeof Chart.Type>;
export type ChartPosition = EnumObject<typeof Chart.Position>;
export type NumberFormatter = (label: number | string, defaultFormatter: (label: number | string) => string) => string;
/**
* Determines what parts of the chart data is colored with the same colors.
*/
export declare enum ChartColorMode {
/**
* Uses one of the other options depending on the chart type.
*/
AUTO = "auto",
/**
* Uses a different color for each dataset.
*/
DATASET = "dataset",
/**
* Uses a different color for each datapoint in a dataset but the n-th datapoint in each dataset will be colored using the same color.
*/
DATA = "data"
}
export type ClickObject = {
datasetIndex: number;
dataIndex: number;
xIndex?: number;
yIndex?: number;
};
export type UpdateChartOptions = {
/**
* Default is false.
*/
requestAnimation?: boolean;
/**
* Default is 0.
*/
debounce?: number | boolean;
/**
* Default is false.
*/
onlyUpdateData?: boolean;
/**
* Default is false.
*/
onlyRefresh?: boolean;
enforceRerender?: boolean;
};
//# sourceMappingURL=Chart.d.ts.map