@devexpress/dx-react-chart/dist/dx-react-chart.d.ts

Composable plugin-based chart component for React

// Dependencies for this module:
//   ../../../../react

import * as React from 'react';

export const Chart: React.ComponentType<ChartProps>;

export const Legend: React.ComponentType<LegendProps>;

export const Title: React.ComponentType<TitleProps>;

export const ArgumentScale: React.ComponentType<ArgumentScaleProps>;
export const ValueScale: React.ComponentType<ValueScaleProps>;

export const Stack: React.ComponentType<StackProps>;

export const Palette: React.ComponentType<PaletteProps>;

export const Animation: React.ComponentType<AnimationProps>;

export const AreaSeries: React.ComponentType<AreaSeriesProps>;

export const BarSeries: React.ComponentType<BarSeriesProps>;

export const LineSeries: React.ComponentType<AreaSeriesProps>;

export const PieSeries: React.ComponentType<PieSeriesProps>;

export const ScatterSeries: React.ComponentType<ScatterSeriesProps>;

export const SplineSeries: React.ComponentType<AreaSeriesProps>;

export const ArgumentAxis: React.ComponentType<RawAxisProps>;
export const ValueAxis: React.ComponentType<RawAxisProps>;

export const Tooltip: React.ComponentType<TooltipProps>;

export const ZoomAndPan: React.ComponentType<ZoomAndPanProps>;

export const EventTracker: React.ComponentType<EventTrackerProps>;

export const HoverState: React.ComponentType<HoverStateProps>;

export const SelectionState: React.ComponentType<SelectionStateProps>;





export interface AnimationProps {
  /** Easing of animation */
  easing?: (progress: number) => number;
  /** Duratin of animation */
  duration?: number;
}

export interface RawAxisProps {
  /** The tick size */
  tickSize?: number;
  /** The indent from the axis */
  indentFromAxis?: number;
  /** The scale name */
  scaleName?: string;
  /** A component that renders the axis root layout */
  rootComponent: React.ComponentType<Axis.RootProps>;
  /** A component that renders a tick */
  tickComponent: React.ComponentType<Axis.LineProps>;
  /** A component that renders the axis label */
  labelComponent: React.ComponentType<Axis.LabelProps>;
  /** A component that renders the axis line */
  lineComponent: React.ComponentType<Axis.LineProps>;
  /** A component that renders the grid */
  gridComponent: React.ComponentType<Axis.LineProps>;
  /** The axis position */
  position?: 'left' | 'top' | 'right' | 'bottom';
  /** Specifies whether to render the grid */
  showGrid?: boolean;
  /** Specifies whether to render ticks */
  showTicks?: boolean;
  /** Specifies whether to render the axis’s line */
  showLine?: boolean;
  /** Specifies whether to render the axis’s labels */
  showLabels?: boolean;
  /** A function that returns a tick formatter function */
  tickFormat?: TickFormatFn;
}

export interface BasicDataProps {
  data: DataItems;
  rotated: boolean;
}

export interface EventTrackerProps {
  /** A function that is executed when the chart’s plot is clicked */
  onClick?: HandlerFn;
  /** A function that is executed when the pointer moves over the chart */
  onPointerMove?: HandlerFn;
}

export interface HoverStateProps {
  /** Specifies a series or point that is initially displayed hovered */
  defaultHover?: SeriesRef;
  /** Specifies a series or point that is hovered */
  hover?: SeriesRef;
  /** A function that is executed when the hover target is changed */
  onHoverChange?: NotifyPointerMoveFn;
}



export namespace Legend {
  /** Describes properties passed to a component that renders the labe */
  interface LabelProps {
    /** Item text */
    text: string | number;
  }
  /** Describes properties passed to a component that renders the legend’s root layout */
  interface RootProps {
    /** A React node used to render the legend’s root layout */
    children: React.ReactNode;
  }
  /** Describes properties passed to a component that renders a legend item */
  interface ItemProps {
    /** A React node used to render an item */
    children: React.ReactNode;
  }
  interface MarkerProps {
    [key: string]: unknown;
  }
}
export interface LegendProps {
  /** The legend position */
  position?: 'left' | 'right' | 'top' | 'bottom';
  /** A component that renders a marker */
  markerComponent: React.ComponentType<Legend.MarkerProps>;
  /** A component that renders the legend label */
  labelComponent: React.ComponentType<Legend.LabelProps>;
  /** A component that renders the legend’s root layout */
  rootComponent: React.ComponentType<Legend.RootProps>;
  /** A component that renders a legend item */
  itemComponent: React.ComponentType<Legend.ItemProps>;
}

export interface PaletteProps {
  /** An array of colors */
  scheme: Colors;
}

export interface ScaleProps {
  /** The scale’s name */
  name?: string;
  /** A function that constructs a custom scale */
  factory?: FactoryFn;
  /** A function that modifies the scale domain */
  modifyDomain?: ModifyDomainFn;
}
export interface ValueScaleProps extends ScaleProps {
}
export interface ArgumentScaleProps extends ScaleProps {
}

export interface SelectionStateProps {
  /** An array of selected series and points */
  selection?: TargetList;
}



export interface StackProps {
  /** A list of stacks */
  stacks?: StackList;
  /** A function that gets an array of series data and returns the series order */
  offset?: OffsetFn;
  /** A function that adds offsets to series data array depending on the series order */
  order?: OrderFn;
}

export namespace Title {
  /** Describes properties passed to a component that renders the title */
  interface TextProps {
    /** The title text */
    text: string;
  }
}
export interface TitleProps {
  /** The title text */
  text: string;
  /** A component that renders the title */
  textComponent: React.ComponentType<Title.TextProps>;
  /** The title position */
  position?: 'top' | 'bottom';
}

export interface TooltipProps {
  /** An item for which the tooltip is displayed initially */
  defaultTargetItem?: SeriesRef;
  /** An item for which the tooltip is displayed */
  targetItem?: SeriesRef;
  /** A function that is executed when the target item changes */
  onTargetItemChange?: NotifyPointerMoveFn;
  /** A component that renders the tooltip */
  overlayComponent: React.ComponentType<Tooltip.OverlayProps>;
  /** A component that renders the tooltip content */
  contentComponent: React.ComponentType<Tooltip.ContentProps>;
  /** A component that renders the tooltip arrow */
  arrowComponent: React.ComponentType<Tooltip.ArrowProps>;
  /** A component that renders the tooltip sheet */
  sheetComponent: React.ComponentType<Tooltip.SheetProps>;
}
export namespace Tooltip {
  /** Describes properties passed to a component that renders the tooltip */
  interface OverlayProps {
    /** A function that returns an HTML element that is used to position the tooltip */
    target: TooltipReference;
    /** A React node used to render the tooltip */
    children: React.ReactNode;
    /** Set orientation for tooltip */
    rotated: boolean;
    /** A component that renders the tooltip arrow */
    arrowComponent: React.ComponentType<Tooltip.ArrowProps>;
  }
  /** Describes properties passed to a component that renders the tooltip’s content */
  interface ContentProps {
    /** The component’s text */
    text: string;
    /** An item for which the tooltip is displayed */
    targetItem: SeriesRef;
  }
  /** Describes properties passed to a component that renders the tooltip’s arrow */
  interface ArrowProps {
    /** the tooltip's placement */
    placement: 'right' | 'top';
  }
  /** Describes properties passed to a component that renders the tooltip’s sheet */
  interface SheetProps {
    /** The sheet's children */
    children: React.ReactNode;
  }
}

export interface ZoomAndPanProps {
  /** A default viewport */
  defaultViewport?: Viewport;
  /** A viewport */
  viewport?: Viewport;
  /** A function that is executed when viewport changes */
  onViewportChange?: OnViewportChangeFn;
  /** Interaction with arguments */
  interactionWithArguments?: Interaction;
  /** Interaction with values */
  interactionWithValues?: Interaction;
  /** A component that renders the drag box */
  dragBoxComponent: React.ComponentType<ZoomAndPan.DragBoxProps>;
  /** Specifies the key that enables panning */
  zoomRegionKey?: 'shift' | 'alt' | 'ctrl';
}
type Rect = {
  x: number;
  y: number;
  width: number;
  height: number;
};
export namespace ZoomAndPan {
  interface DragBoxProps {
    /** The rect’s coordinate */
    rect: Rect;
  }
}





export namespace Axis {
  interface LabelProps {
    /** The label text */
    text: string | number;
    /** The x coordinate of the label’s top left corner */
    x: number;
    /** The y coordinate of the label’s top left corner */
    y: number;
    /** The label's offset from the baseline in CSS units */
    dy: string;
    /** The label’s text alignment */
    textAnchor: string;
  }
  interface LineProps {
    /** The line start’s x coordinate */
    x1: number;
    /** The line end’s x coordinate */
    x2: number;
    /** The line start’s y coordinate */
    y1: number;
    /** The line end’s y coordinate */
    y2: number;
  }
  interface RootProps {
    /** The x coordinate of the top left corner of the axis’ rendering area */
    dx: number;
    /** The y coordinate of the top left corner of the series’ rendering area */
    dy: number;
    /** A React node used to render the axis. */
    children: React.ReactNode;
  }
}
export namespace ValueAxis {
  interface LabelProps extends Axis.LabelProps {
  }
  interface LineProps extends Axis.LineProps {
  }
  interface RootProps extends Axis.RootProps {
  }
}
export namespace ArgumentAxis {
  interface LabelProps extends Axis.LabelProps {
  }
  interface LineProps extends Axis.LineProps {
  }
  interface RootProps extends Axis.RootProps {
  }
}



export type ChartProps = React.PropsWithChildren<{
  /** An array containing custom data */
  data: DataItems;
  /** A component that renders the chart root layout */
  rootComponent: React.ComponentType<Chart.RootProps>;
  /** Chart height */
  height?: number;
  /** Chart width */
  width?: number;
  /** Chart rotation */
  rotated?: boolean;
}>;
export namespace Chart {
  interface LabelProps {
    /** The label text */
    children: string | number;
    /** The x coordinate of the label’s top left corner */
    x: number;
    /** The y coordinate of the label’s top left corner */
    y: number;
  }
  interface RootProps {
    /** A React node to be placed in the root layout */
    children: React.ReactNode;
  }
}





















export declare const scaleBand: FactoryFn;













declare type DataItem = {
  readonly [field: string]: any;
};
export declare type DataItems = ReadonlyArray<DataItem>;
export declare type DomainItems = ReadonlyArray<any>;
export declare type NumberArray = number[];
export interface ScaleObject {
  (value: any): number;
  /** A function that returns an array of ticks  */
  ticks?(ticks?: number): DomainItems;
  /** A function that sets the current domain */
  domain(domain: DomainItems): this;
  /** A function that gets the current domain */
  domain(): DomainItems;
  /** A function that returns a tick formatter function */
  tickFormat?(count?: number, format?: string): GetFormatFn;
  /** A function that returns each band’s width */
  bandwidth?(): number;
  /** A function that sets the current range */
  range(range: NumberArray): this;
  /** A function that gets the current range */
  range(): NumberArray;
  /** Returns an exact copy of this scale */
  copy(): this;
  /** Enables or disables clamping */
  clamp?(clamp: boolean): this;
  /** A function that sets a scale’s inner padding and returns the current scale */
  paddingInner?(arg: number): this;
  /** A function that sets a scale’s outer padding and returns the current scale */
  paddingOuter?(arg: number): this;
  /** A function that returns the corresponding value from the domain */
  invert?(value: number): any;
}
export declare type ScalesCache = {
  readonly [key: string]: ScaleObject;
};
export interface Point {
  /** Point value  */
  readonly value: any;
  /** Point index */
  readonly index: number;
  /** Point color */
  readonly color: string;
}
export interface TransformedPoint extends Point {
  /** The point's translated argument */
  readonly arg: number;
  /** The point's translated value */
  readonly val: number;
  /** The point's translated start value */
  readonly startVal?: number;
}
/** The object that points at a clicked series */
export interface SeriesRef {
  /** Series name */
  readonly series: string;
  /** The point’s index within the data array */
  readonly point: number;
}
export declare type TargetList = ReadonlyArray<SeriesRef>;
export declare type GetFormatFn = (tick: any) => string;
export declare type Colors = ReadonlyArray<string>;
export declare type PointDistance = {
  readonly index: number;
  readonly distance: number;
};
export declare type Location = Readonly<NumberArray>;
declare type HitTestResult = {
  readonly points: ReadonlyArray<PointDistance>;
} | null;
export declare type HitTestFn = (location: Location) => HitTestResult;

export interface TooltipReference {
  readonly clientWidth: number;
  readonly clientHeight: number;
  getBoundingClientRect(): Partial<DOMRect>;
}

export interface Stack {
  /** A list of series names */
  readonly series: string[];
}
export declare type StackData = ReadonlyArray<ReadonlyArray<number>>;
export declare type OrderFn = (series: StackData) => number[];
export declare type OffsetFn = (series: StackData, order: Iterable<number>) => void;
export declare type StackList = ReadonlyArray<Stack>;
export declare type StacksOptions = {
  stacks: StackList;
  offset: OffsetFn;
  order: OrderFn;
};

export declare type PathPoints = ReadonlyArray<PointComponentProps>;
export declare type GetPointFieldFn = (point: PointComponentProps) => number;
export interface PathFn {
  (points: PathPoints): string;
  x(): GetPointFieldFn;
  x(f: GetPointFieldFn): this;
  y(): GetPointFieldFn;
  y(f: GetPointFieldFn): this;
  y0?(): GetPointFieldFn;
  y0?(f: GetPointFieldFn): this;
  y1?(): GetPointFieldFn;
  y1?(f: GetPointFieldFn): this;
  x0?(): GetPointFieldFn;
  x0?(f: GetPointFieldFn): this;
  x1?(): GetPointFieldFn;
  x1?(f: GetPointFieldFn): this;
  curve?(): any;
  curve?(c: any): this;
  context(ctx: any): this;
}
export interface CommonComponentProps {
  /** A color */
  color: string;
}
export interface PathComponentProps extends CommonComponentProps {
  /** Coordinates of the series' points */
  coordinates: PathPoints;
}
export interface PointComponentProps extends CommonComponentProps {
  /** Point index */
  index: number;
  /** Point argument */
  argument: any;
  /** Point value */
  value: any;
  /** coordinate on argument axis */
  arg: number;
  /** coordinate on value axis */
  val: number;
  /** start coordinate on value axis  */
  startVal: number;
}
export interface SeriesProps {
  /** A series argument field */
  argumentField: string;
  /** A series value field */
  valueField: string;
  /** A series name */
  name?: string;
  /** A series scale name */
  scaleName?: string;
  /** A series color */
  color?: string;
}
export interface PathComponentPathProps extends PathComponentProps {
  /** A function used to calculate the series’ path */
  path?: PathFn;
}
export interface AreaSeriesProps extends SeriesProps {
  /** A component that renders series */
  seriesComponent?: React.ComponentType<AreaSeries.SeriesProps>;
}
export declare namespace AreaSeries {
  /** Describes properties passed to a component that renders the series */
  interface SeriesProps extends PathComponentPathProps {
  }
  /** Describes properties of a component that renders series */
  interface PathSeriesProps extends SeriesProps {
  }
}
export interface LineSeriesProps extends SeriesProps {
  /** A component that renders series */
  seriesComponent?: React.ComponentType<LineSeries.SeriesProps>;
}
export declare namespace LineSeries {
  /** Describes properties passed to a component that renders the series */
  interface SeriesProps extends PathComponentPathProps {
  }
  /** Describes properties of a component that renders series */
  interface PathSeriesProps extends SeriesProps {
  }
}
export interface SplineSeriesProps extends SeriesProps {
  /** A component that renders series */
  seriesComponent?: React.ComponentType<SplineSeries.SeriesProps>;
}
export declare namespace SplineSeries {
  /** Describes properties passed to a component that renders the series */
  interface SeriesProps extends PathComponentPathProps {
  }
  /** Describes properties of a component that renders series */
  interface PathSeriesProps extends SeriesProps {
  }
}
export declare namespace BarSeries {
  /** Describes properties passed to a component that renders a bar */
  interface PointProps extends PointComponentProps {
    /** The bar width in relative units */
    barWidth: number;
    /** The maximum width that the bar can occupy, measured in pixels */
    maxBarWidth: number;
  }
}
export interface BarSeriesProps extends SeriesProps {
  /** The bar width in relative units */
  barWidth?: number;
  /** A component that renders a bar */
  pointComponent?: React.ComponentType<BarSeries.PointProps>;
}
export declare namespace PieSeries {
  /** Describes properties passed to a component that renders the slice */
  interface PointProps extends PointComponentProps {
    /** The slice's maximum radius in pixels */
    maxRadius: number;
    /** The inner radius in relative units */
    innerRadius: number;
    /** The outer radius in relative units */
    outerRadius: number;
    /** The slice's start angle */
    startAngle: number;
    /** The slice's end angle */
    endAngle: number;
  }
}
export interface PieSeriesProps extends SeriesProps {
  /** The inner radius in relative units */
  innerRadius?: number;
  /** The outer radius in relative units */
  outerRadius?: number;
  /** A component that renders point */
  pointComponent?: React.ComponentType<PieSeries.PointProps>;
}
export declare namespace ScatterSeries {
  /** Describes point options */
  type PointOptions = {
    size: number;
  };
  /** Describes properties passed to a component that renders the point */
  interface PointProps extends PointComponentProps {
    /** Point options */
    point: PointOptions;
  }
  /** Describes properties passed to a component that renders the series */
  interface SeriesProps extends PathComponentProps {
  }
}
export interface ScatterSeriesProps extends SeriesProps {
  /** Point options */
  point?: ScatterSeries.PointOptions;
  /** A component that renders point */
  pointComponent?: React.ComponentType<ScatterSeries.PointProps>;
}

export declare type FactoryFn = () => ScaleObject;
export declare type ModifyDomainFn = (domain: DomainItems) => DomainItems;



export declare type TickFormatFn = (scale: ScaleObject, count?: number) => GetFormatFn;



export declare type Viewport = {
  readonly argumentStart?: any;
  readonly argumentEnd?: any;
  readonly scaleName?: string;
  readonly valueStart?: any;
  readonly valueEnd?: any;
};
export declare type OnViewportChangeFn = (viewport: Viewport) => void;
export declare type Interaction = 'none' | 'pan' | 'zoom' | 'both';

/** The click event data */
export interface TargetData {
  /** The clicked point’s coordinates [x, y] (relative to the chart’s plot) */
  readonly location: Location;
  /** An array of clicked series */
  readonly targets: TargetList;
  /** The event data */
  readonly event?: any;
}
export declare type HandlerFn = (arg: TargetData) => void;
export declare type HandlerFnList = ReadonlyArray<HandlerFn>;

export declare type NotifyPointerMoveFn = (target: SeriesRef | null) => void;