bar-pod/src/types.ts

import { Serie, Options } from '@chartwerk/core';

export type ValueX = (number | string);
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 BarSerieAdditionalParams = {
  datapoints: Datapoint[];
  annotation?: {
    color: string;
    size: {
      max?:  number; // type always SizeType.PX
      min?: number; // type always SizeType.PX
    }
  };
  color: Color;
  opacityFormatter?: OpacityFormatter;
}
export type BarSerie = Serie & BarSerieAdditionalParams;


export type BarAdditionalOptions = {
  type: { // BarPodType.DISCRETE or BarPodType.NON_DISCRETE. Cant be both
    [BarPodType.DISCRETE]: {
      groupBy: { x: ValueX[] }; // union bars as one group, see examples/demo-group-by.html
      innerSize: { value: number, type?: SizeType.PERCENT | SizeType.PX }; // size of bars inside one group
      groupSize: { value: number, type?: SizeType.PERCENT | SizeType.PX };
    };
    [BarPodType.NON_DISCRETE]: {
      barWidth: {
        estimated?: { value: number, type?: SizeType.UNIT | SizeType.PX };
        max?: number; // type always SizeType.PX
        min?: number; // type always SizeType.PX
      }
    }
  }
  eventsCallbacks?: {
    contextMenu?: (data: any) => 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
}