|
|
|
import { Serie, Options } from '@chartwerk/core';
|
|
|
|
import { DataRow } from 'models/data_processor';
|
|
|
|
|
|
|
|
export type ValueX = (number | string);
|
|
|
|
export type ValueY = number;
|
|
|
|
export type Datapoint = [ValueX, ...ValueY[]]; // [x, y, y, y, ..., y], multiple y values as stacked bars
|
|
|
|
export type ColorFormatter = (data: { value: ValueY, key: ValueX, barIndex: number, target: string }) => string;
|
|
|
|
export type OpacityFormatter = (data: { value: ValueY, key: ValueX, barIndex: number, target: string }) => number;
|
|
|
|
export type Color = string | string[] | ColorFormatter;
|
|
|
|
export type Opacity = number | number[] | OpacityFormatter;
|
|
|
|
|
|
|
|
export type BarSerieAdditionalParams = {
|
|
|
|
datapoints: Datapoint[];
|
|
|
|
// TODO add absolute/stacked type for y values. datapoint can be [x: 0, y1: 10, y2: 20] (absolute) === [x: 0, y1: 10, y2: 10] (stacked)
|
|
|
|
annotation?: {
|
|
|
|
// only for non_discrete type for now
|
|
|
|
enable: boolean;
|
|
|
|
color?: string;
|
|
|
|
size?: {
|
|
|
|
esimated: { value: number, type?: SizeType.PERCENT | SizeType.PX };
|
|
|
|
max?: number; // type always SizeType.PX
|
|
|
|
min?: number; // type always SizeType.PX
|
|
|
|
}
|
|
|
|
};
|
|
|
|
color?: Color;
|
|
|
|
opacity?: Opacity;
|
|
|
|
}
|
|
|
|
export type BarSerie = Serie & BarSerieAdditionalParams;
|
|
|
|
|
|
|
|
export type CallbackEvent = {
|
|
|
|
position: {
|
|
|
|
eventX: number,
|
|
|
|
eventY: number,
|
|
|
|
pageX: number,
|
|
|
|
pageY: number,
|
|
|
|
valueX: number,
|
|
|
|
valueY: number,
|
|
|
|
},
|
|
|
|
data: DataRow,
|
|
|
|
}
|
|
|
|
|
|
|
|
export type BarAdditionalOptions = {
|
|
|
|
type: { // BarPodType.DISCRETE or BarPodType.NON_DISCRETE. Cant be both
|
|
|
|
[BarPodType.DISCRETE]: DiscreteConfig;
|
|
|
|
[BarPodType.NON_DISCRETE]: NonDiscreteConfig;
|
|
|
|
}
|
|
|
|
eventsCallbacks?: {
|
|
|
|
contextMenu?: (data: CallbackEvent) => void;
|
|
|
|
};
|
|
|
|
}
|
|
|
|
export type BarOptions = Options & Partial<BarAdditionalOptions>;
|
|
|
|
|
|
|
|
export enum SizeType {
|
|
|
|
UNIT = 'unit', // in units of X or Y values
|
|
|
|
PX = 'px',
|
|
|
|
PERCENT = 'percent', // from 0 to 100
|
|
|
|
}
|
|
|
|
|
|
|
|
export enum BarPodType {
|
|
|
|
DISCRETE = 'discrete', // render bars as groups
|
|
|
|
NON_DISCRETE = 'non-discrete', // render bars as time chart
|
|
|
|
}
|
|
|
|
|
|
|
|
export type DiscreteConfig = {
|
|
|
|
// union bars as one group, see examples/demo-group-by.html
|
|
|
|
enable: boolean;
|
|
|
|
step?: number; // X axis interval between two bars, type always SizeType.UNIT
|
|
|
|
groupSize?: {
|
|
|
|
width: { value: number, type?: SizeType.PERCENT | SizeType.PX, },
|
|
|
|
max?: number, // type always SizeType.PX
|
|
|
|
min?: number, // type always SizeType.PX
|
|
|
|
// TODO: margin between bars
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
export type NonDiscreteConfig = {
|
|
|
|
enable: boolean;
|
|
|
|
barWidth?: {
|
|
|
|
estimated?: { value: number, type?: SizeType.UNIT | SizeType.PX };
|
|
|
|
max?: number; // type always SizeType.PX
|
|
|
|
min?: number; // type always SizeType.PX
|
|
|
|
}
|
|
|
|
};
|