@spaced-out/ui-design-system/lib/types/charts.js.flow

Sense UI components library

// @flow strict

export type ChartOptions = {
  chart?: {
    polar?: boolean,
    type?: string,
    spacing?: Array<number>,
    margin?: Array<number>,
    style?: CSSObject,
    spacing?: [number, number, number, number],
    spacingBottom?: number,
    spacingLeft?: number,
    spacingRight?: number,
    spacingTop?: number,
    ...
  },
  title?: {
    align?: string,
    floating?: boolean,
    margin?: number,
    style?: {
      color?: string,
      fontWeight?: string,
    },
    text?: string | null,
    useHTML?: boolean,
    verticalAlign?: 'top' | 'middle' | 'bottom',
    widthAdjust?: number,
    x?: number,
    y?: number,
  },
  exporting?: {
    allowHTML?: boolean,
    allowTableSorting?: boolean,
    buttons?: {
      contextButton?: {
        enabled?: boolean,
      },
    },
    enabled?: boolean,
    filename?: string,
    showExportInProgress?: boolean,
    showTable?: boolean,
    sourceHeight?: number,
    sourceWidth?: number,
    useRowspanHeaders?: boolean,
    width?: number,
    ...
  },
  credits?: Credits,
  tooltip?: Tooltip,
  xAxis?: AxisOptions,
  yAxis?: AxisOptions,
  zAxis?: AxisOptions,
  drilldown?: Drilldown,
  legend?: LegendOptionsType,
  plotOptions?: PlotOptionsType,
  series?: Array<SeriesOptionsType>,
  subtitle?: {
    useHTML: boolean,
    text?: string,
    verticalAlign?: 'middle',
    align?: string,
    style?: CSSObject,
    x?: number,
    ...
  },
  pane?: {
    center?: [string, string],
    size?: string,
    ...
  },
  legend?: Legend,
  navigation?: Navigation,
  ...
};

export type AxisOptions = {
  categories?: Array<string>,
  gridLineInterpolation?: 'circle' | 'polygon',
  lineWidth?: number,
  tickmarkPlacement?: string,
  labels?: {
    align?: string,
    distance?: number,
    style?: CSSObject,
    ...
  },
  title?: {
    text?: string,
    margin?: number,
    style?: CSSObject,
    ...
  },
  type?: string,
  ...
};

export type BreadcrumbsOptions = {
  floating?: boolean,
  style?: CSSObject,
  ...
};

export type LegendOptionsType = {
  layout?: string,
  align?: string,
  verticalAlign?: string,
  itemMarginBottom?: number,
  padding?: number,
  itemStyle?: CSSObject,
  enabled?: boolean,
  symbolHeight?: number,
  symbolWidth?: number,
  ...
};

export type CSSObject = {
  alignItems?: string,
  color?: string,
  display?: string,
  fontFamily?: string,
  fontSize?: string,
  fontStyle?: string,
  fontWeight?: string,
  letterSpacing?: string,
  lineHeight?: string,
  margin?: number,
  textAlign?: string,
  minWidth?: string,
  maxWidth?: string,
  minHeight?: string,
  maxHeight?: string,
  alignContent?: string,
  overflow?: string,
  textOverflow?: string,
  zIndex?: number,
  ...
};

export type DataOptionsType = {
  y?: number,
  name?: string,
  color?: string,
  drilldown?: string,
  id?: string,
  ...
};

export type SeriesOptionsType = {
  id?: string,
  name?: string,
  data: Array<DataOptionsType>,
  ...
};

export type Drilldown = {
  activeAxisLabelStyle?: CSSObject,
  activeDataLabelStyle?: CSSObject,
  series?: Array<SeriesOptionsType>,
  breadcrumbs?: BreadcrumbsOptions,
  ...
};

export type PlotOptionsType = {
  ['pie' | 'line' | 'funnel']: {
    innerSize?: string,
    allowPointSelect?: boolean,
    cursor?: 'pointer',
    dataLabels?: {
      enabled?: boolean,
      distance?: number,
      connectorColor?: string,
      useHTML?: boolean,
      format?: string,
      style?: CSSObject,
    },
    showInLegend?: boolean,
    center?: [string, string],
    size?: string,
    minSize?: number | string,
    borderWidth?: number,
    borderRadius?: number,
    neckWidth?: string | number,
    neckHeight?: string | number,
    minSize?: string | number,
    width?: string | number,
    ...
  },
};

export type Tooltip = {
  useHTML?: boolean,
  followPointer?: boolean,
  backgroundColor?: string,
  style?: CSSObject,
  outside?: boolean,
  headerFormat?: string,
  pointFormat?: string,
  shared?: boolean,
  ...
};

export type Legend = {
  align?: 'left' | 'center' | 'right',
  alignColumns?: boolean,
  backgroundColor?: string,
  borderColor?: string,
  borderRadius?: number,
  borderWidth?: number,
  className?: string,
  enabled?: boolean,
  floating?: boolean,
  itemDistance?: number,
  itemMarginBottom?: number,
  itemMarginBottom?: number,
  itemMarginBottom?: number,
  labelFormat?: string,
  layout?: 'horizontal' | 'vertical' | 'proximate',
  margin?: number,
  maxHeight?: number,
  padding?: number,
  reversed?: boolean,
  x?: number,
  y?: number,
  ...
};

export type Credits = {
  enabled?: boolean,
  href?: string,
  position?: {
    align?: 'right' | 'left',
    verticalAlign?: 'bottom' | 'top',
    x?: number,
    y?: number,
  },
  ...
};

export type Navigation = {
  breadcrumbs?: Breadcrumbs,
  ...
};

export type Breadcrumbs = {
  position?: Position,
  style?: CSSObject,
  buttonTheme?: ButtonTheme,
  ...
};

export type ButtonTheme = {
  style?: CSSObject,
  ...
};

export type Position = {
  align?: string,
  verticalAlign?: string,
  x?: number,
  y?: number,
};