Browse Source

new data and options formats

pull/1/head
vargburz 2 years ago
parent
commit
032d80188e
  1. 10
      examples/demo.html
  2. 0
      src/models/data_processor.ts
  3. 55
      src/types.ts

10
examples/demo.html

@ -14,9 +14,9 @@
document.getElementById('chart'),
[
{ target: 'test11', datapoints: getData(), matchedKey: 'm-1', color: 'red', colorFormatter: (data) => ['green', 'yellow'][data.rowIndex] },
// { target: 'test12', datapoints: [[100, 10], [200, 20], [300, 10]], matchedKey: 'm-1', color: 'green' },
// { target: 'test21', datapoints: [[130, 10], [230, 26], [330, 15]], matchedKey: 'm-2', color: 'yellow'},
// { target: 'test22', datapoints: [[130, 10], [230, 27], [330, 10]], matchedKey: 'm-2', color: 'blue' },
{ target: 'test12', datapoints: [[100, 10], [200, 20], [300, 10]], matchedKey: 'm-1', color: 'green' },
{ target: 'test21', datapoints: [[130, 10], [230, 26], [330, 15]], matchedKey: 'm-2', color: 'yellow'},
{ target: 'test22', datapoints: [[130, 10], [230, 27], [330, 10]], matchedKey: 'm-2', color: 'blue' },
],
{
usePanning: false,
@ -24,8 +24,8 @@
x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; } },
y: { format: 'custom', invert: false, range: [0, 30], valueFormatter: (value) => { return value + '%'; } }
},
stacked: false,
matching: false,
stacked: true,
matching: true,
maxBarWidth: 20,
minBarWidth: 4,
zoomEvents: {

0
src/models/data_processor.ts

55
src/types.ts

@ -1,28 +1,39 @@
import { Serie, Options } from '@chartwerk/core';
export type BarSerieParams = {
matchedKey: string;
colorFormatter: (serie: BarSerie) => string;
type ValueX = (number | string);
type ValueY = number;
export type BarSerieAdditionalParams = {
datapoints: [ValueX, ...ValueY[]]; // [x, y, y, y, ..., y], multiple y values as stacked bars
annotation?: {
color: string;
size: {
max?: number; // type always SizeType.PX
min?: number; // type always SizeType.PX
}
}
export type BarSerie = Serie & Partial<BarSerieParams>;
export type BarAdditionalOptions = {
renderBarLabels?: boolean;
stacked?: boolean;
barWidth?: number; // width in x axis unit
maxBarWidth?: number; // in px
minBarWidth?: number; // in px
maxAnnotationSize?: number; // in px TODO: move to annotaions
minAnnotationSize?: number; // in px
matching?: boolean;
opacityFormatter?: (data: RowValues) => number;
annotations?: {
key: string, // matchedKey from series
// TODO: add enum with "triangle" option
color: string,
}[];
colorFormatter?: (data: any) => string;
}
export type BarSerie = Serie & BarSerieAdditionalParams;
export type BarAdditionalOptions = {
group: { // for more than 1 serie and discrete.enable == true
by: { x: ValueX[] }; // union bars as one group, see examples/demo-group-by.html
size: number; // type always SizeType.PERCENT
};
discrete: {
enable: boolean; // if false -> render bars as time chart | group will not work, see examples/demo-non-discrete.html
barWidth: {
estimated?: { value: number, type?: SizeType };
max?: number; // type always SizeType.PX
min?: number; // type always SizeType.PX
}
};
eventsCallbacks?: {
contextMenu?: (data: any) => void;
}
};
}
export type BarOptions = Options & Partial<BarAdditionalOptions>;
export type RowValues = {
@ -32,3 +43,9 @@ export type RowValues = {
colors: (string | ((data: any) => string))[],
serieTarget: string[],
}
export enum SizeType {
UNIT = 'unit', // in units of X or Y values
PX = 'px',
PERCENT = 'percent', // from 0 to 100
}

Loading…
Cancel
Save