mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-04-07 08:58:49 +08:00
upgrade plotly.js version to 1.28
This commit is contained in:
taoqiufeng
655
types/plotly.js/index.d.ts
vendored
655
types/plotly.js/index.d.ts
vendored
@@ -1,298 +1,373 @@
|
||||
// Type definitions for plotly.js 1.27
|
||||
// Type definitions for plotly.js 1.28
|
||||
// Project: https://plot.ly/javascript/
|
||||
// Definitions by: Chris Gervang <https://github.com/chrisgervang>, Martin Duparc <https://github.com/martinduparc>
|
||||
// Definitions by: Chris Gervang <https://github.com/chrisgervang>, Martin Duparc <https://github.com/martinduparc>, taoqf <https://github.com/taoqf>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.2
|
||||
|
||||
declare namespace Plots {
|
||||
interface StaticPlots {
|
||||
resize(root: Plotly.Root): void;
|
||||
}
|
||||
/// <reference types="d3" />
|
||||
export as namespace Plotly;
|
||||
|
||||
export interface StaticPlots {
|
||||
resize(root: Root): void;
|
||||
}
|
||||
|
||||
declare namespace Plotly {
|
||||
type Root = string | HTMLElement;
|
||||
|
||||
interface PlotlyStatic {
|
||||
Plots: Plots.StaticPlots;
|
||||
newPlot(root: Root, data: Array<Partial<Data>>, layout?: Partial<Layout>, config?: Partial<Config>): void;
|
||||
relayout(root: Root, layout: Partial<Layout>): void;
|
||||
redraw(root: Root): void;
|
||||
purge(root: Root): void;
|
||||
d3: any;
|
||||
}
|
||||
|
||||
// Layout
|
||||
|
||||
interface Layout {
|
||||
autosize: boolean;
|
||||
showlegend: boolean;
|
||||
xaxis: Partial<Axis>;
|
||||
yaxis: Partial<Axis>;
|
||||
margin: Partial<Margin>;
|
||||
height: number;
|
||||
width: number;
|
||||
hovermode: "closest" | "x" | "y" | false;
|
||||
'xaxis.range': [Datum, Datum];
|
||||
'yaxis.range': [Datum, Datum];
|
||||
'yaxis.type': AxisType;
|
||||
'xaxis.type': AxisType;
|
||||
'xaxis.autorange': boolean;
|
||||
'yaxis.autorange': boolean;
|
||||
shapes: Array<Partial<Shape>>;
|
||||
legend: Partial<Legend>;
|
||||
}
|
||||
|
||||
interface Legend {
|
||||
traceorder: "grouped" | "normal" | "reversed";
|
||||
x: number;
|
||||
y: number;
|
||||
font: Partial<Font>;
|
||||
bgcolor: string;
|
||||
bordercolor: string;
|
||||
borderwidth: number;
|
||||
orientation: "v" | "h";
|
||||
tracegroupgap: number;
|
||||
xanchor: 'auto' | 'left' | 'center' | 'right';
|
||||
yanchor: 'auto' | 'top' | 'middle' | 'bottom';
|
||||
}
|
||||
|
||||
type AxisType = "date" | "log" | "linear";
|
||||
|
||||
interface Axis {
|
||||
title: string;
|
||||
showgrid: boolean;
|
||||
fixedrange: boolean;
|
||||
rangemode: "tozero" | 'normal' | 'nonnegative';
|
||||
type: AxisType;
|
||||
tickformat: string;
|
||||
hoverformat: string;
|
||||
rangeslider: Partial<RangeSlider>;
|
||||
rangeselector: Partial<RangeSelector>;
|
||||
range: [Datum, Datum];
|
||||
showticklabels: boolean;
|
||||
autotick: boolean;
|
||||
zeroline: boolean;
|
||||
autorange: boolean | 'reversed';
|
||||
}
|
||||
|
||||
interface ShapeLine {
|
||||
color: string;
|
||||
width: number;
|
||||
dash: Dash;
|
||||
}
|
||||
|
||||
interface Shape {
|
||||
visible: boolean;
|
||||
layer: 'below' | 'above';
|
||||
type: 'rect' | 'circle' | 'line' | 'path';
|
||||
path: string;
|
||||
// x-reference is assigned to the x-values
|
||||
xref: 'x' | 'paper';
|
||||
// y-reference is assigned to the plot paper [0,1]
|
||||
yref: 'paper' | 'y';
|
||||
x0: Datum;
|
||||
y0: Datum;
|
||||
x1: Datum;
|
||||
y1: Datum;
|
||||
fillcolor: string;
|
||||
opacity: number;
|
||||
line: Partial<ShapeLine>;
|
||||
}
|
||||
|
||||
interface Margin {
|
||||
t: number;
|
||||
b: number;
|
||||
l: number;
|
||||
r: number;
|
||||
}
|
||||
|
||||
type ModeBarButtons = 'lasso2d' | 'select2d' | 'sendDataToCloud' | 'autoScale2d' |
|
||||
'zoom2d' | 'pan2d' | 'zoomIn2d' | 'zoomOut2d' | 'autoScale2d' | 'resetScale2d' |
|
||||
'hoverClosestCartesian' | 'hoverCompareCartesian' | 'zoom3d' | 'pan3d' | 'orbitRotation' |
|
||||
'tableRotation' | 'resetCameraDefault3d' | 'resetCameraLastSave3d' | 'hoverClosest3d' |
|
||||
'zoomInGeo' | 'zoomOutGeo' | 'resetGeo' | 'hoverClosestGeo' | 'hoverClosestGl2d' |
|
||||
'hoverClosestPie' | 'toggleHover' | 'resetViews';
|
||||
|
||||
// Data
|
||||
|
||||
type Datum = string | number | Date;
|
||||
|
||||
type Dash = 'solid' | 'dot' | 'dash' | 'longdash' | 'dashdot' | 'longdashdot';
|
||||
|
||||
type Data = Partial<ScatterData> | Partial<BarData>;
|
||||
|
||||
// Bar
|
||||
interface BarData {
|
||||
type: 'bar';
|
||||
x: Datum[];
|
||||
y: Datum[];
|
||||
}
|
||||
|
||||
// Scatter
|
||||
interface ScatterData {
|
||||
type: 'scatter' | 'scattergl';
|
||||
x: Datum[];
|
||||
y: Datum[];
|
||||
text: string | string[];
|
||||
line: Partial<ScatterLine>;
|
||||
marker: Partial<ScatterMarker>;
|
||||
mode: "lines" | "markers" | "text" | "lines+markers" | "text+markers" | "text+lines" | "text+lines+markers" | "none";
|
||||
hoveron: "points" | "fills";
|
||||
hoverinfo: "text";
|
||||
fill: 'none' | 'tozeroy' | 'tozerox' | 'tonexty' | 'tonextx' | 'toself' | 'tonext';
|
||||
fillcolor: string;
|
||||
legendgroup: string;
|
||||
name: string;
|
||||
connectgaps: boolean;
|
||||
}
|
||||
|
||||
interface ScatterMarker {
|
||||
symbol: string | string[]; // Drawing.symbolList
|
||||
color: string | string[];
|
||||
opacity: number | number[];
|
||||
size: number | number[];
|
||||
maxdisplayed: number;
|
||||
sizeref: number;
|
||||
sizemin: number;
|
||||
sizemode: "diameter" | "area";
|
||||
showscale: boolean;
|
||||
line: {}; // TODO
|
||||
colorbar: {}; // TODO
|
||||
}
|
||||
|
||||
interface ScatterLine {
|
||||
color: string;
|
||||
width: number;
|
||||
dash: Dash;
|
||||
shape: 'linear' | 'spline' | 'hv' | 'vh' | 'hvh' | 'vhv';
|
||||
smoothing: number;
|
||||
simplify: boolean;
|
||||
}
|
||||
|
||||
interface Font {
|
||||
family: string;
|
||||
size: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface Config {
|
||||
// no interactivity, for export or image generation
|
||||
staticPlot: boolean;
|
||||
|
||||
// we can edit titles, move annotations, etc
|
||||
editable: boolean;
|
||||
|
||||
// DO autosize once regardless of layout.autosize
|
||||
// (use default width or height values otherwise)
|
||||
autosizable: boolean;
|
||||
|
||||
// set the length of the undo/redo queue
|
||||
queueLength: number;
|
||||
|
||||
// if we DO autosize, do we fill the container or the screen?
|
||||
fillFrame: boolean;
|
||||
|
||||
// if we DO autosize, set the frame margins in percents of plot size
|
||||
frameMargins: number;
|
||||
|
||||
// mousewheel or two-finger scroll zooms the plot
|
||||
scrollZoom: boolean;
|
||||
|
||||
// double click interaction (false, 'reset', 'autosize' or 'reset+autosize')
|
||||
doubleClick: 'reset+autosize' | 'reset' | 'autosize' | false;
|
||||
|
||||
// new users see some hints about interactivity
|
||||
showTips: boolean;
|
||||
|
||||
// link to open this plot in plotly
|
||||
showLink: boolean;
|
||||
|
||||
// if we show a link, does it contain data or just link to a plotly file?
|
||||
sendData: boolean;
|
||||
|
||||
// text appearing in the sendData link
|
||||
linkText: string;
|
||||
|
||||
// false or function adding source(s) to linkText <text>
|
||||
showSources: boolean;
|
||||
|
||||
// display the mode bar (true, false, or 'hover')
|
||||
displayModeBar: 'hover' | boolean;
|
||||
|
||||
// remove mode bar button by name
|
||||
// (see ./components/modebar/buttons.js for the list of names)
|
||||
modeBarButtonsToRemove: ModeBarButtons[];
|
||||
|
||||
// add mode bar button using config objects
|
||||
// (see ./components/modebar/buttons.js for list of arguments)
|
||||
modeBarButtonsToAdd: ModeBarButtons[];
|
||||
|
||||
// fully custom mode bar buttons as nested array,
|
||||
// where the outer arrays represents button groups, and
|
||||
// the inner arrays have buttons config objects or names of default buttons
|
||||
// (see ./components/modebar/buttons.js for more info)
|
||||
modeBarButtons: boolean;
|
||||
|
||||
// add the plotly logo on the end of the mode bar
|
||||
displaylogo: boolean;
|
||||
|
||||
// increase the pixel ratio for Gl plot images
|
||||
plotGlPixelRatio: number;
|
||||
|
||||
// function to add the background color to a different container
|
||||
// or 'opaque' to ensure there's white behind it
|
||||
setBackground: string | 'opaque';
|
||||
|
||||
// URL to topojson files used in geo charts
|
||||
topojsonURL: string;
|
||||
|
||||
// Mapbox access token (required to plot mapbox trace types)
|
||||
// If using an Mapbox Atlas server, set this option to '',
|
||||
// so that plotly.js won't attempt to authenticate to the public Mapbox server.
|
||||
mapboxAccessToken: string;
|
||||
|
||||
// Turn all console logging on or off (errors will be thrown)
|
||||
// This should ONLY be set via Plotly.setPlotConfig
|
||||
logging: boolean;
|
||||
|
||||
// Set global transform to be applied to all traces with no
|
||||
// specification needed
|
||||
globalTransforms: any[];
|
||||
}
|
||||
|
||||
// Components
|
||||
|
||||
interface RangeSlider {
|
||||
visible: boolean;
|
||||
thickness: number;
|
||||
range: [Datum, Datum];
|
||||
borderwidth: number;
|
||||
bordercolor: string;
|
||||
bgcolor: string;
|
||||
}
|
||||
|
||||
interface RangeSelectorButton {
|
||||
step: 'second' | 'minute' | 'hour' | 'day' | 'month' | 'year' | 'all';
|
||||
stepmode: 'backward' | 'todate';
|
||||
count: number;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface RangeSelector {
|
||||
buttons: Array<Partial<RangeSelectorButton>>;
|
||||
visible: boolean;
|
||||
x: number;
|
||||
xanchor: 'auto' | 'left' | 'center' | 'right';
|
||||
y: number;
|
||||
yanchor: 'auto' | 'top' | 'middle' | 'bottom';
|
||||
bgcolor: string;
|
||||
activecolor: string;
|
||||
bordercolor: string;
|
||||
borderwidth: number;
|
||||
font: Partial<Font>;
|
||||
}
|
||||
export interface Point {
|
||||
x: number;
|
||||
y: number;
|
||||
z: number;
|
||||
}
|
||||
|
||||
declare var Plotly: Plotly.PlotlyStatic;
|
||||
export = Plotly;
|
||||
export interface PlotlyHTMLElement extends HTMLElement {
|
||||
on(event: 'plotly_click' | 'plotly_hover' | 'plotly_unhover', callback: (data: {
|
||||
points: Array<{
|
||||
pointNumber: number;
|
||||
curveNumber: number;
|
||||
data: ScatterData;
|
||||
}>;
|
||||
}) => void): void;
|
||||
on(event: 'plotly_selecting' | 'plotly_selected', callback: (data: {
|
||||
points: Array<{
|
||||
x: number;
|
||||
y: number;
|
||||
pointNumber: number;
|
||||
}>;
|
||||
}) => void): void;
|
||||
on(event: 'plotly_restyle', callback: (data: [
|
||||
any, // update object -- attribute updated: new value
|
||||
number[] // array of traces updated
|
||||
]) => void): void;
|
||||
on(event: 'plotly_relayout', callback: (data: {
|
||||
xaxis: {
|
||||
range: [number, number];
|
||||
autorange: boolean;
|
||||
};
|
||||
yaxis: {
|
||||
range: [number, number];
|
||||
autorange: boolean;
|
||||
};
|
||||
scene: {
|
||||
center: Point;
|
||||
eye: Point;
|
||||
up: Point;
|
||||
};
|
||||
}) => void): void;
|
||||
on(event: 'plotly_event', callback: (data: any) => void): void;
|
||||
on(event: 'plotly_afterplot' | 'plotly_autosize' | 'plotly_deselect' | 'plotly_doubleclick' | 'plotly_redraw' | 'plotly_animated', callback: () => void): void;
|
||||
}
|
||||
|
||||
export interface ToImgopts {
|
||||
format: 'jpeg' | 'png' | 'webp' | 'svg';
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export interface DownloadImgopts {
|
||||
format: 'jpeg' | 'png' | 'webp' | 'svg';
|
||||
width: number;
|
||||
height: number;
|
||||
filename: string;
|
||||
}
|
||||
|
||||
export type Root = string | HTMLElement;
|
||||
|
||||
export function newPlot(root: Root, data: Array<Partial<Data>>, layout?: Partial<Layout>, config?: Partial<Config>): Promise<PlotlyHTMLElement>;
|
||||
export function plot(root: Root, data: Array<Partial<Data>>, layout?: Partial<Layout>, config?: Partial<Config>): Promise<PlotlyHTMLElement>;
|
||||
export function relayout(root: Root, layout: Partial<Layout>): Promise<PlotlyHTMLElement>;
|
||||
export function redraw(root: Root): Promise<PlotlyHTMLElement>;
|
||||
export function purge(root: Root): PlotlyHTMLElement;
|
||||
export const d3: any;
|
||||
export function restyle(root: Root, aobj: Partial<Data>, traces?: number[] | number): Promise<PlotlyHTMLElement>;
|
||||
export function update(root: Root, traceUpdate: Partial<Data>, layoutUpdate: Partial<Layout>, traces?: number[] | number): Promise<PlotlyHTMLElement>;
|
||||
export function addTraces(root: Root, traces: Partial<Data> | Array<Partial<Data>>, newIndices?: number[] | number): Promise<PlotlyHTMLElement>;
|
||||
export function deleteTraces(root: Root, indices: number[] | number): Promise<PlotlyHTMLElement>;
|
||||
export function moveTraces(root: Root, currentIndices: number[] | number, newIndices?: number[] | number): Promise<PlotlyHTMLElement>;
|
||||
export function extendTraces(root: Root, update: Partial<Data> | Array<Partial<Data>>, indices: number | number[]): Promise<PlotlyHTMLElement>;
|
||||
export function prependTraces(root: Root, update: Partial<Data> | Array<Partial<Data>>, indices: number | number[]): Promise<PlotlyHTMLElement>;
|
||||
export function toImage(root: Root, opts: ToImgopts): Promise<string>;
|
||||
export function downloadImage(root: Root, opts: DownloadImgopts): Promise<string>;
|
||||
|
||||
// Layout
|
||||
export interface Layout {
|
||||
title: string;
|
||||
autosize: boolean;
|
||||
showlegend: boolean;
|
||||
xaxis: Partial<Axis>;
|
||||
yaxis: Partial<Axis>;
|
||||
margin: Partial<Margin>;
|
||||
height: number;
|
||||
width: number;
|
||||
hovermode: "closest" | "x" | "y" | false;
|
||||
'xaxis.range': [Datum, Datum];
|
||||
'xaxis.range[0]': Datum;
|
||||
'xaxis.range[1]': Datum;
|
||||
'yaxis.range': [Datum, Datum];
|
||||
'yaxis.range[0]': Datum;
|
||||
'yaxis.range[1]': Datum;
|
||||
'yaxis.type': AxisType;
|
||||
'xaxis.type': AxisType;
|
||||
'xaxis.autorange': boolean;
|
||||
'yaxis.autorange': boolean;
|
||||
shapes: Array<Partial<Shape>>;
|
||||
legend: Partial<Legend>;
|
||||
}
|
||||
|
||||
export interface Legend {
|
||||
traceorder: "grouped" | "normal" | "reversed";
|
||||
x: number;
|
||||
y: number;
|
||||
font: Partial<Font>;
|
||||
bgcolor: string;
|
||||
bordercolor: string;
|
||||
borderwidth: number;
|
||||
orientation: "v" | "h";
|
||||
tracegroupgap: number;
|
||||
xanchor: 'auto' | 'left' | 'center' | 'right';
|
||||
yanchor: 'auto' | 'top' | 'middle' | 'bottom';
|
||||
}
|
||||
|
||||
export type AxisType = "date" | "log" | "linear";
|
||||
|
||||
export interface Axis {
|
||||
title: string;
|
||||
showgrid: boolean;
|
||||
fixedrange: boolean;
|
||||
rangemode: "tozero" | 'normal' | 'nonnegative';
|
||||
type: AxisType;
|
||||
tickformat: string;
|
||||
hoverformat: string;
|
||||
rangeslider: Partial<RangeSlider>;
|
||||
rangeselector: Partial<RangeSelector>;
|
||||
range: [Datum, Datum];
|
||||
showticklabels: boolean;
|
||||
autotick: boolean;
|
||||
zeroline: boolean;
|
||||
autorange: boolean | 'reversed';
|
||||
}
|
||||
|
||||
export interface ShapeLine {
|
||||
color: string;
|
||||
width: number;
|
||||
dash: Dash;
|
||||
}
|
||||
|
||||
export interface Shape {
|
||||
visible: boolean;
|
||||
layer: 'below' | 'above';
|
||||
type: 'rect' | 'circle' | 'line' | 'path';
|
||||
path: string;
|
||||
// x-reference is assigned to the x-values
|
||||
xref: 'x' | 'paper';
|
||||
// y-reference is assigned to the plot paper [0,1]
|
||||
yref: 'paper' | 'y';
|
||||
x0: Datum;
|
||||
y0: Datum;
|
||||
x1: Datum;
|
||||
y1: Datum;
|
||||
fillcolor: string;
|
||||
opacity: number;
|
||||
line: Partial<ShapeLine>;
|
||||
}
|
||||
|
||||
export interface Margin {
|
||||
t: number;
|
||||
b: number;
|
||||
l: number;
|
||||
r: number;
|
||||
}
|
||||
|
||||
export type ModeBarButtons = 'lasso2d' | 'select2d' | 'sendDataToCloud' | 'autoScale2d' |
|
||||
'zoom2d' | 'pan2d' | 'zoomIn2d' | 'zoomOut2d' | 'autoScale2d' | 'resetScale2d' |
|
||||
'hoverClosestCartesian' | 'hoverCompareCartesian' | 'zoom3d' | 'pan3d' | 'orbitRotation' |
|
||||
'tableRotation' | 'resetCameraDefault3d' | 'resetCameraLastSave3d' | 'hoverClosest3d' |
|
||||
'zoomInGeo' | 'zoomOutGeo' | 'resetGeo' | 'hoverClosestGeo' | 'hoverClosestGl2d' |
|
||||
'hoverClosestPie' | 'toggleHover' | 'resetViews';
|
||||
|
||||
// Data
|
||||
|
||||
export type Datum = string | number | Date;
|
||||
|
||||
export type Dash = 'solid' | 'dot' | 'dash' | 'longdash' | 'dashdot' | 'longdashdot';
|
||||
|
||||
export type Data = Partial<ScatterData>;
|
||||
export type Color = string | Array<string | undefined | null> | Array<Array<string | undefined | null>>;
|
||||
|
||||
// Bar Scatter
|
||||
export interface ScatterData {
|
||||
type: 'bar' | 'scatter' | 'scattergl';
|
||||
x: Datum[] | Datum[][];
|
||||
y: Datum[] | Datum[][];
|
||||
text: string | string[];
|
||||
line: Partial<ScatterLine>;
|
||||
'line.color': Color;
|
||||
'line.width': number;
|
||||
'line.dash': Dash;
|
||||
'line.shape': 'linear' | 'spline' | 'hv' | 'vh' | 'hvh' | 'vhv';
|
||||
'line.smoothing': number;
|
||||
'line.simplify': boolean;
|
||||
marker: Partial<ScatterMarker>;
|
||||
'marker.symbol': string | string[]; // Drawing.symbolList
|
||||
'marker.color': Color;
|
||||
'marker.opacity': number | number[];
|
||||
'marker.size': number | number[];
|
||||
'marker.maxdisplayed': number;
|
||||
'marker.sizeref': number;
|
||||
'marker.sizemin': number;
|
||||
'marker.sizemode': "diameter" | "area";
|
||||
'marker.showscale': boolean;
|
||||
'marker.line': {}; // TODO
|
||||
'marker.colorbar': {}; // TODO
|
||||
mode: "lines" | "markers" | "text" | "lines+markers" | "text+markers" | "text+lines" | "text+lines+markers" | "none";
|
||||
hoveron: "points" | "fills";
|
||||
hoverinfo: "text";
|
||||
fill: 'none' | 'tozeroy' | 'tozerox' | 'tonexty' | 'tonextx' | 'toself' | 'tonext';
|
||||
fillcolor: string;
|
||||
legendgroup: string;
|
||||
name: string;
|
||||
connectgaps: boolean;
|
||||
}
|
||||
|
||||
export interface ScatterMarker {
|
||||
symbol: string | string[]; // Drawing.symbolList
|
||||
color: Color;
|
||||
opacity: number | number[];
|
||||
size: number | number[];
|
||||
maxdisplayed: number;
|
||||
sizeref: number;
|
||||
sizemin: number;
|
||||
sizemode: "diameter" | "area";
|
||||
showscale: boolean;
|
||||
line: {}; // TODO
|
||||
colorbar: {}; // TODO
|
||||
}
|
||||
|
||||
export interface ScatterLine {
|
||||
color: Color;
|
||||
width: number;
|
||||
dash: Dash;
|
||||
shape: 'linear' | 'spline' | 'hv' | 'vh' | 'hvh' | 'vhv';
|
||||
smoothing: number;
|
||||
simplify: boolean;
|
||||
}
|
||||
|
||||
export interface Font {
|
||||
family: string;
|
||||
size: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export interface Config {
|
||||
// no interactivity, for export or image generation
|
||||
staticPlot: boolean;
|
||||
|
||||
// we can edit titles, move annotations, etc
|
||||
editable: boolean;
|
||||
|
||||
// DO autosize once regardless of layout.autosize
|
||||
// (use default width or height values otherwise)
|
||||
autosizable: boolean;
|
||||
|
||||
// set the length of the undo/redo queue
|
||||
queueLength: number;
|
||||
|
||||
// if we DO autosize, do we fill the container or the screen?
|
||||
fillFrame: boolean;
|
||||
|
||||
// if we DO autosize, set the frame margins in percents of plot size
|
||||
frameMargins: number;
|
||||
|
||||
// mousewheel or two-finger scroll zooms the plot
|
||||
scrollZoom: boolean;
|
||||
|
||||
// double click interaction (false, 'reset', 'autosize' or 'reset+autosize')
|
||||
doubleClick: 'reset+autosize' | 'reset' | 'autosize' | false;
|
||||
|
||||
// new users see some hints about interactivity
|
||||
showTips: boolean;
|
||||
|
||||
// link to open this plot in plotly
|
||||
showLink: boolean;
|
||||
|
||||
// if we show a link, does it contain data or just link to a plotly file?
|
||||
sendData: boolean;
|
||||
|
||||
// text appearing in the sendData link
|
||||
linkText: string;
|
||||
|
||||
// false or function adding source(s) to linkText <text>
|
||||
showSources: boolean;
|
||||
|
||||
// display the mode bar (true, false, or 'hover')
|
||||
displayModeBar: 'hover' | boolean;
|
||||
|
||||
// remove mode bar button by name
|
||||
// (see ./components/modebar/buttons.js for the list of names)
|
||||
modeBarButtonsToRemove: ModeBarButtons[];
|
||||
|
||||
// add mode bar button using config objects
|
||||
// (see ./components/modebar/buttons.js for list of arguments)
|
||||
modeBarButtonsToAdd: ModeBarButtons[];
|
||||
|
||||
// fully custom mode bar buttons as nested array,
|
||||
// where the outer arrays represents button groups, and
|
||||
// the inner arrays have buttons config objects or names of default buttons
|
||||
// (see ./components/modebar/buttons.js for more info)
|
||||
modeBarButtons: boolean;
|
||||
|
||||
// add the plotly logo on the end of the mode bar
|
||||
displaylogo: boolean;
|
||||
|
||||
// increase the pixel ratio for Gl plot images
|
||||
plotGlPixelRatio: number;
|
||||
|
||||
// function to add the background color to a different container
|
||||
// or 'opaque' to ensure there's white behind it
|
||||
setBackground: string | 'opaque';
|
||||
|
||||
// URL to topojson files used in geo charts
|
||||
topojsonURL: string;
|
||||
|
||||
// Mapbox access token (required to plot mapbox trace types)
|
||||
// If using an Mapbox Atlas server, set this option to '',
|
||||
// so that plotly.js won't attempt to authenticate to the public Mapbox server.
|
||||
mapboxAccessToken: string;
|
||||
|
||||
// Turn all console logging on or off (errors will be thrown)
|
||||
// This should ONLY be set via Plotly.setPlotConfig
|
||||
logging: boolean;
|
||||
|
||||
// Set global transform to be applied to all traces with no
|
||||
// specification needed
|
||||
globalTransforms: any[];
|
||||
}
|
||||
|
||||
// Components
|
||||
|
||||
export interface RangeSlider {
|
||||
visible: boolean;
|
||||
thickness: number;
|
||||
range: [Datum, Datum];
|
||||
borderwidth: number;
|
||||
bordercolor: string;
|
||||
bgcolor: string;
|
||||
}
|
||||
|
||||
export interface RangeSelectorButton {
|
||||
step: 'second' | 'minute' | 'hour' | 'day' | 'month' | 'year' | 'all';
|
||||
stepmode: 'backward' | 'todate';
|
||||
count: number;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface RangeSelector {
|
||||
buttons: Array<Partial<RangeSelectorButton>>;
|
||||
visible: boolean;
|
||||
x: number;
|
||||
xanchor: 'auto' | 'left' | 'center' | 'right';
|
||||
y: number;
|
||||
yanchor: 'auto' | 'top' | 'middle' | 'bottom';
|
||||
bgcolor: string;
|
||||
activecolor: string;
|
||||
bordercolor: string;
|
||||
borderwidth: number;
|
||||
font: Partial<Font>;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,347 @@
|
||||
import * as Plotly from 'plotly.js';
|
||||
import { ScatterData, Layout, PlotlyHTMLElement, newPlot } from 'plotly.js';
|
||||
|
||||
const data: Plotly.BarData[] = [
|
||||
{
|
||||
x: ['giraffes', 'orangutans', 'monkeys'],
|
||||
y: [20, 14, 23],
|
||||
type: 'bar'
|
||||
}
|
||||
];
|
||||
const graphDiv = '#test';
|
||||
|
||||
Plotly.newPlot('test', data);
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Plotly.newPlot
|
||||
(() => {
|
||||
const trace1 = {
|
||||
x: [1999, 2000, 2001, 2002],
|
||||
y: [10, 15, 13, 17],
|
||||
type: 'scatter'
|
||||
} as ScatterData;
|
||||
const trace2 = {
|
||||
x: [1999, 2000, 2001, 2002],
|
||||
y: [16, 5, 11, 9],
|
||||
type: 'scatter'
|
||||
} as ScatterData;
|
||||
const data = [trace1, trace2];
|
||||
const layout = {
|
||||
title: 'Sales Growth',
|
||||
xaxis: {
|
||||
title: 'Year',
|
||||
showgrid: false,
|
||||
zeroline: false
|
||||
},
|
||||
yaxis: {
|
||||
title: 'Percent',
|
||||
showline: false
|
||||
}
|
||||
};
|
||||
Plotly.newPlot(graphDiv, data, layout);
|
||||
})();
|
||||
(() => {
|
||||
// deprecated: calling plot again will add new trace(s) to the plot,
|
||||
// but will ignore new layout.
|
||||
const data2 = [{
|
||||
x: [1999, 2000, 2001, 2002],
|
||||
y: [10, 9, 8, 7],
|
||||
type: 'scatter'
|
||||
} as ScatterData];
|
||||
const layout2 = { title: 'Revenue' };
|
||||
Plotly.newPlot(graphDiv, data2, layout2);
|
||||
})();
|
||||
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Plotly.restyle
|
||||
// restyle a single trace using attribute strings
|
||||
(() => {
|
||||
const update = {
|
||||
opacity: 0.4,
|
||||
'marker.color': 'red'
|
||||
};
|
||||
Plotly.restyle(graphDiv, update, 0);
|
||||
})();
|
||||
|
||||
// restyle all traces using attribute strings
|
||||
(() => {
|
||||
const update = {
|
||||
opacity: 0.4,
|
||||
'marker.color': 'red'
|
||||
};
|
||||
Plotly.restyle(graphDiv, update);
|
||||
})();
|
||||
// restyle the first trace's marker color 'red' and the second's 'green'
|
||||
(() => {
|
||||
const update = {
|
||||
'marker.color': ['red', 'green']
|
||||
};
|
||||
Plotly.restyle(graphDiv, update, [0, 1]);
|
||||
})();
|
||||
|
||||
// alternate between red and green for all traces (note omission of traces)
|
||||
(() => {
|
||||
const update = {
|
||||
'marker.color': ['red', 'green']
|
||||
};
|
||||
Plotly.restyle(graphDiv, update);
|
||||
})();
|
||||
|
||||
// restyle two traces using attribute strings
|
||||
(() => {
|
||||
const update = {
|
||||
opacity: 0.4,
|
||||
'marker.color': 'red'
|
||||
};
|
||||
Plotly.restyle(graphDiv, update, [1, 2]);
|
||||
})();
|
||||
|
||||
// update the color attribute of the first trace so that the markers within the same trace
|
||||
// have different colors
|
||||
(() => {
|
||||
const update = {
|
||||
'marker.color': [['red', 'green']]
|
||||
};
|
||||
Plotly.restyle(graphDiv, update, [0]);
|
||||
})();
|
||||
|
||||
// update two traces with new z data
|
||||
(() => {
|
||||
const update = { z: [[[1, 2, 3], [2, 1, 2], [1, 1, 1]], [[0, 1, 1], [0, 2, 1], [3, 2, 1]]] };
|
||||
Plotly.restyle(graphDiv, update, [1, 2]);
|
||||
})();
|
||||
|
||||
// replace the entire marker object with the one provided
|
||||
(() => {
|
||||
const update = {
|
||||
marker: { color: 'red' }
|
||||
};
|
||||
Plotly.restyle(graphDiv, update, [0]);
|
||||
})();
|
||||
|
||||
// Set the first trace's line to red, the second to the default, and ignore the third
|
||||
(() => {
|
||||
Plotly.restyle(graphDiv, {
|
||||
'line.color': ['red', null, undefined]
|
||||
}, [0, 1, 2]);
|
||||
})();
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Plotly.relayout
|
||||
// update only values within nested objects
|
||||
(() => {
|
||||
const update = {
|
||||
title: 'some new title', // updates the title
|
||||
'xaxis.range': [0, 5], // updates the xaxis range
|
||||
'yaxis.range[1]': 15 // updates the end of the yaxis range
|
||||
} as Layout;
|
||||
Plotly.relayout(graphDiv, update);
|
||||
})();
|
||||
|
||||
(() => {
|
||||
const data_update = {
|
||||
marker: { color: 'red' }
|
||||
};
|
||||
const layout_update = {
|
||||
title: 'some new title', // updates the title
|
||||
};
|
||||
Plotly.update(graphDiv, data_update, layout_update);
|
||||
})();
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Plotly.update
|
||||
(() => {
|
||||
const data_update = {
|
||||
marker: { color: 'red' }
|
||||
};
|
||||
const layout_update = {
|
||||
title: 'some new title', // updates the title
|
||||
};
|
||||
Plotly.update(graphDiv, data_update, layout_update);
|
||||
})();
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Plotly.addTraces
|
||||
(() => {
|
||||
// add a single trace to an existing graphDiv
|
||||
Plotly.addTraces(graphDiv, { y: [2, 1, 2] });
|
||||
|
||||
// add two traces
|
||||
Plotly.addTraces(graphDiv, [{ y: [2, 1, 2] }, { y: [4, 5, 7] }]);
|
||||
|
||||
// add a trace at the beginning of the data array
|
||||
Plotly.addTraces(graphDiv, { y: [1, 5, 7] }, 0);
|
||||
})();
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Plotly.deleteTraces
|
||||
(() => {
|
||||
// remove the first trace
|
||||
Plotly.deleteTraces(graphDiv, 0);
|
||||
|
||||
// remove the last two traces
|
||||
Plotly.deleteTraces(graphDiv, [-2, -1]);
|
||||
})();
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Plotly.moveTraces
|
||||
(() => {
|
||||
// move the first trace (at index 0) the the end of the data array
|
||||
Plotly.moveTraces(graphDiv, 0);
|
||||
|
||||
// move selected traces (at indices [0, 3, 5]) to the end of the data array
|
||||
Plotly.moveTraces(graphDiv, [0, 3, 5]);
|
||||
|
||||
// move last trace (at index -1) to the beginning of the data array (index 0)
|
||||
Plotly.moveTraces(graphDiv, -1, 0);
|
||||
|
||||
// move selected traces (at indices [1, 4, 5]) to new indices [0, 3, 2]
|
||||
Plotly.moveTraces(graphDiv, [1, 4, 5], [0, 3, 2]);
|
||||
})();
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
|
||||
function rand() {
|
||||
return Math.random();
|
||||
}
|
||||
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Plotly.extendTraces
|
||||
(() => {
|
||||
// extend one trace
|
||||
Plotly.extendTraces(graphDiv, { y: [[rand()]] }, [0]);
|
||||
|
||||
// extend multiple traces
|
||||
Plotly.extendTraces(graphDiv, { y: [[rand()], [rand()]] }, [0, 1]);
|
||||
})();
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Plotly.prependTraces
|
||||
(() => {
|
||||
// prepend one trace
|
||||
Plotly.prependTraces(graphDiv, { y: [[rand()]] }, [0]);
|
||||
|
||||
// prepend multiple traces
|
||||
Plotly.prependTraces(graphDiv, { y: [[rand()], [rand()]] }, [0, 1]);
|
||||
})();
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Plotly.purge
|
||||
(() => {
|
||||
// purge will be used on the div that you wish clear of Plotly plots
|
||||
Plotly.purge(graphDiv);
|
||||
})();
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Plotly.toImage
|
||||
(() => {
|
||||
// Plotly.toImage will turn the plot in the given div into a data URL string
|
||||
// toImage takes the div as the first argument and an object specifying image properties as the other
|
||||
Plotly.toImage(graphDiv, { format: 'png', width: 800, height: 600 }).then((dataUrl) => {
|
||||
// use the dataUrl
|
||||
});
|
||||
})();
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Plotly.downloadImage
|
||||
(() => {
|
||||
// downloadImage will accept the div as the first argument and an object specifying image properties as the other
|
||||
Plotly.downloadImage(graphDiv, { format: 'png', width: 800, height: 600, filename: 'newplot' });
|
||||
})();
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Using events
|
||||
(async () => {
|
||||
const myPlot = await newPlot(graphDiv, [{
|
||||
x: [1999, 2000, 2001, 2002],
|
||||
y: [10, 9, 8, 7],
|
||||
type: 'scatter'
|
||||
}]);
|
||||
myPlot.on('plotly_click', (data) => {
|
||||
let pn = 0;
|
||||
let tn = 0;
|
||||
let colors = [] as string[];
|
||||
for (const pt of data.points) {
|
||||
pn = pt.pointNumber;
|
||||
tn = pt.curveNumber;
|
||||
colors = pt.data.marker.color as string[];
|
||||
}
|
||||
colors[pn] = '#C54C82';
|
||||
|
||||
const update = { marker: { color: colors, size: 16 } };
|
||||
Plotly.restyle('myDiv', update, [tn]);
|
||||
});
|
||||
|
||||
myPlot.on('plotly_hover', (data) => {
|
||||
let pn = 0;
|
||||
let tn = 0;
|
||||
let colors = [] as string[];
|
||||
for (const pt of data.points) {
|
||||
pn = pt.pointNumber;
|
||||
tn = pt.curveNumber;
|
||||
colors = pt.data.marker.color as string[];
|
||||
}
|
||||
colors[pn] = '#C54C82';
|
||||
|
||||
const update = { marker: { color: colors, size: 16 } };
|
||||
Plotly.restyle('myDiv', update, [tn]);
|
||||
});
|
||||
|
||||
myPlot.on('plotly_unhover', (data) => {
|
||||
let pn = 0;
|
||||
let tn = 0;
|
||||
let colors = [] as string[];
|
||||
for (const pt of data.points) {
|
||||
pn = pt.pointNumber;
|
||||
tn = pt.curveNumber;
|
||||
colors = pt.data.marker.color as string[];
|
||||
}
|
||||
colors[pn] = '#00000';
|
||||
|
||||
const update = { marker: { color: colors, size: 16 } };
|
||||
Plotly.restyle('myDiv', update, [tn]);
|
||||
});
|
||||
|
||||
myPlot.on('plotly_selected', (data) => {
|
||||
const x = [] as number[];
|
||||
const y = [] as number[];
|
||||
const N = 1000;
|
||||
const color1 = '#7b3294';
|
||||
const color1Light = '#c2a5cf';
|
||||
|
||||
const colors = [] as string[];
|
||||
for (let i = 0; i < N; i++) colors.push(color1Light);
|
||||
|
||||
data.points.forEach((pt) => {
|
||||
x.push(pt.x);
|
||||
y.push(pt.y);
|
||||
colors[pt.pointNumber] = color1;
|
||||
});
|
||||
|
||||
Plotly.restyle(myPlot, {
|
||||
x: [x, y]
|
||||
}, [1, 2]);
|
||||
|
||||
Plotly.restyle(myPlot, {
|
||||
'marker.color': [colors]
|
||||
}, [0]);
|
||||
});
|
||||
|
||||
myPlot.on('plotly_restyle', (data) => {
|
||||
console.log('restyling');
|
||||
});
|
||||
|
||||
myPlot.on('plotly_doubleclick', () => {
|
||||
const orgColors = ['#00000', '#00000', '#00000',
|
||||
'#00000', '#00000', '#00000'];
|
||||
const update = { marker: { color: orgColors, size: 16 } };
|
||||
Plotly.restyle('myDiv', update);
|
||||
});
|
||||
|
||||
myPlot.on('plotly_afterplot', () => {
|
||||
console.log('done plotting');
|
||||
});
|
||||
})();
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
|
||||
Reference in New Issue
Block a user