bar-pod/src/types.ts

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
  }
};