@metrostar/comet-data-viz/dist/index.d.ts

A set of Victory Chart components provided as a Comet wrapper

import React from 'react';
import { ForAxes, DomainTuple } from 'victory';

type EventHandler = () => void;
interface ChartProps {
    title: string;
    height?: number;
    width?: number;
    domain?: ForAxes<DomainTuple>;
    horizontal?: boolean;
    polar?: boolean;
    style?: {
        [attribute: string]: any;
    };
    backgroundComponent?: React.ReactElement;
    eventHandlers?: {
        [eventName: string]: EventHandler;
    };
    children?: React.ReactElement | React.ReactElement[];
}

interface BarGraphProps {
    /**
     * An object providing chart specific attributes
     */
    chart: ChartProps;
    /**
     * An string value used to colorize chart sections
     */
    color?: string;
    /**
     * A string value indicating how to justify chart data
     */
    alignment?: 'start' | 'middle' | 'end';
    /**
     * A number value indicating the width ratio of the bar to display
     */
    barRatio?: number;
    /**
     * An array of data points
     */
    data: Array<{
        x: string;
        y: number;
    }>;
}
/**
 * Renders a dataset as series of bars.
 */
declare const BarGraph: React.FC<BarGraphProps>;

interface LineGraphProps {
    /**
     * An object providing chart specific attributes
     */
    chart: ChartProps;
    /**
     * An string array of color values used to colorize chart sections
     */
    colors?: string[];
    /**
     * Whether or not to display smooth chart lines
     */
    smooth?: boolean;
    /**
     * An array of data points
     */
    data: Array<Array<{
        x: number;
        y: number;
    }>>;
}
/**
 * Renders a dataset as a single line path.
 */
declare const LineGraph: React.FC<LineGraphProps>;

interface AreaGraphProps {
    /**
     * An object providing chart specific attributes
     */
    chart: ChartProps;
    /**
     * An string array of color values used to colorize chart sections
     */
    colors?: string[];
    /**
     * Whether or not to display smooth chart lines
     */
    smooth?: boolean;
    /**
     * An array of data points
     */
    data: Array<Array<{
        x: number;
        y: number;
    }>>;
}
/**
 * Renders a dataset as a single area path.
 */
declare const AreaGraph: React.FC<AreaGraphProps>;

interface PolarAxisProps {
    /**
     * An object providing chart specific attributes
     */
    chart: ChartProps;
    /**
     * An string array of color values used to colorize chart sections
     */
    color?: string;
    /**
     * An number array of labels for the chart
     */
    ticks?: number[];
    /**
     * An array of data values
     */
    data: number[];
}
/**
 * Renders a single axis polar axis chart with fill.
 */
declare const PolarAxis: React.FC<PolarAxisProps>;

interface PieChartProps {
    /**
     * Applies a title attribute to the outer svg element.
     */
    title: string;
    /**
     * A height value to apply to the chart
     */
    height?: number;
    /**
     * A width value to apply to the chart
     */
    width?: number;
    /**
     * An string color scale or array of hex values used to colorize chart sections
     */
    colors?: 'grayscale' | 'qualitative' | 'heatmap' | 'warm' | 'cool' | 'red' | 'green' | 'blue' | string[];
    /**
     * A number of pixels between the center of the chart and the inner edge of a donut chart
     */
    innerRadius?: number;
    /**
     * An array of data values
     */
    data: Array<{
        x: string;
        y: number;
    }>;
}
/**
 * Renders a dataset as a pie chart.
 */
declare const PieChart: React.FC<PieChartProps>;

interface ScatterGraphProps {
    /**
     * An object providing chart specific attributes
     */
    chart: ChartProps;
    /**
     * Determines how to scale each data point
     */
    size?: number;
    /**
     * An string array of color values used to colorize chart sections
     */
    colors?: string[];
    /**
     * An array of data points
     */
    data: Array<Array<{
        x: number;
        y: number;
    }>>;
}
/**
 * Renders a dataset as a series of points.
 */
declare const ScatterGraph: React.FC<ScatterGraphProps>;

interface StackGraphProps {
    /**
     * An object providing chart specific attributes
     */
    chart: ChartProps;
    /**
     * An string array of color values used to colorize chart sections
     */
    colors?: string[];
    /**
     * Whether or not to display smooth chart lines
     */
    smooth?: boolean;
    /**
     * An array of data points
     */
    data: Array<Array<{
        x: number;
        y: number;
    }>>;
}
/**
 * Renders a given set of children in a stacked layout.
 */
declare const StackGraph: React.FC<StackGraphProps>;

export { AreaGraph, BarGraph, LineGraph, PieChart, PolarAxis, ScatterGraph, StackGraph };