@airplane/views
Version:
A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.
164 lines (163 loc) • 5.49 kB
TypeScript
import { Datum } from "plotly.js-basic-dist";
import { CommonLayoutProps } from "../../components/layout/layout.types";
import { CommonStylingProps } from "../../components/styling.types";
import { DefaultOutput, DefaultParams, ParamValues } from "../../client";
import { TaskQuery } from "../query";
export type ChartProps<TParams extends ParamValues | undefined = DefaultParams, TOutput = DefaultOutput> = ChartWithTaskProps<TParams, TOutput> | ConnectedChartProps;
export type ChartWithTaskProps<TParams extends ParamValues | undefined = DefaultParams, TOutput = DefaultOutput> = {
/**
* The task query to execute. The chart data will be populated by the task's output.
*/
task: TaskQuery<TParams, TOutput>;
/**
* Callback to transform the task output.
*/
outputTransform?: (output: TOutput) => ConnectedChartProps["data"];
} & SharedChartProps;
export type ConnectedChartProps = {
/**
* Data to render in the chart.
*
* Supports an array of objects:
* [{x: 0, y: 100}, {x: 1, y: 101}, ...]
* and also an object of arrays:
* {x: [0, 1], y: [100, 101]}
* Use `xAxis` and `datasets` to control which fields are rendered.
*/
data: ChartData<Datum>;
} & SharedChartProps;
export type SharedChartProps = {
/**
* Type of chart.
*/
type?: "scatter" | "line" | "bar" | "pie";
/**
* The ID referenced by the global component state.
*/
id?: string;
/**
* Renders an error message.
*/
error?: string;
/**
* Renders a loading indicator when true.
*/
loading?: boolean;
/**
* Title to show above the chart.
*/
title?: string;
/**
* Position of the legend.
* @default right
*/
legendPosition?: "left" | "right" | "top" | "bottom" | "hidden";
} & (ScatterProps | LineProps | BarProps | PieProps) & CommonLayoutProps & CommonStylingProps;
export type ChartData<T> = Record<string, T>[] | Record<string, T[]>;
export type AxisType = "auto" | "linear" | "log" | "date" | "category" | "multicategory";
type ScatterProps = {
type: "scatter";
} & SeriesPlotProps;
type LineProps = {
type: "line";
} & SeriesPlotProps;
export type BarProps = {
type: "bar";
/**
* The variant of the bar graph.
* @default group
*/
mode?: "group" | "stack";
} & SeriesPlotProps;
export type Range = [unknown, unknown] | "tozero";
interface SeriesPlotProps {
/**
* Which field of `data` to use for the chart's x-axis.
* @default First field found in `data`
*/
xAxis?: string;
/**
* Which fields of `data` to use in the chart. Each field is a separate series.
* @default All fields in `data` aside from xAxis
*/
datasets?: string[];
/**
* Override colors used to render datasets. Key is a dataset name and value is a supported color.
*
* Color can either be a built-in color:
* `"orange" | "yellow" | "lime" | "green" | "teal" | "cyan" | "blue" | "indigo" | "violet" | "grape" | "pink" | "red" | "gray" | "dark"`
* Or a custom CSS color:
* `"rgba(1, 2, 3, 0.5)" | "#efefef"`
*/
colors?: Record<string, string>;
/**
* Title for the x-axis.
*/
xAxisTitle?: string;
/**
* Formatting for x-axis values. Uses [d3-format](https://github.com/d3/d3-format) for numerical
* values and [d3-time-format](https://github.com/d3/d3-time-format) for date values.
*
* For example, use `.1%` to render `0.23` as `23%` or `%B %d, %Y` to render a date as
* `June 30, 2020`
*/
xAxisFormat?: string;
/**
* Type of x-axis.
* @default auto
*/
xAxisType?: AxisType;
/**
* A custom range for the x-axis from the first element to the second element.
* This can also be set to "tozero" which sets the start of the range to 0 and auto-calculates the end.
* If not set, the range is auto-calculated based on the extrema of the input data.
* @example [0, 100]
* @example ["2016-07-01","2016-12-31"]
* @example "tozero"
*/
xAxisRange?: Range;
/**
* Title for the y-axis.
*/
yAxisTitle?: string;
/**
* Formatting for y-axis values, similar to xAxisFormat. See xAxisFormat for details.
*/
yAxisFormat?: string;
/**
* Type of y-axis.
* @default auto
*/
yAxisType?: AxisType;
/**
* A custom range for the y-axis from the first element to the second element.
* This can also be set to "tozero" which sets the start of the range to 0 and auto-calculates the end.
* If not set, the range is auto-calculated based on the extrema of the input data.
* @example [0, 100]
* @example ["2016-07-01","2016-12-31"]
* @example "tozero"
*/
yAxisRange?: Range;
}
interface PieProps {
type: "pie";
/**
* Which field of `data` to use in the pie chart.
* @default First field found in `data`
*/
dataset?: string;
/**
* Override colors used to render `data`. Array of colors corresponding to value in `data`.
*
* Color can either be a built-in color:
* `"orange" | "yellow" | "lime" | "green" | "teal" | "cyan" | "blue" | "indigo" | "violet" | "grape" | "pink" | "red" | "gray" | "dark"`
* Or a custom CSS color:
* `"rgba(1, 2, 3, 0.5)" | "#efefef"`
*/
colors?: string[];
/**
* Labels for values in `data`.
*/
labels?: string[];
}
export {};