From d2dc473186e861ff7461a62a94ee09fc6bf992d2 Mon Sep 17 00:00:00 2001 From: taoqiufeng Date: Fri, 30 Jun 2017 16:53:15 +0800 Subject: [PATCH] upgrade plotly.js version to 1.28 --- types/plotly.js/index.d.ts | 655 ++++++++++++++++------------- types/plotly.js/plotly.js-tests.ts | 352 +++++++++++++++- 2 files changed, 709 insertions(+), 298 deletions(-) diff --git a/types/plotly.js/index.d.ts b/types/plotly.js/index.d.ts index 04de340c22..82b7e622da 100644 --- a/types/plotly.js/index.d.ts +++ b/types/plotly.js/index.d.ts @@ -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 , Martin Duparc +// Definitions by: Chris Gervang , Martin Duparc , taoqf // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.2 -declare namespace Plots { - interface StaticPlots { - resize(root: Plotly.Root): void; - } +/// +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>, layout?: Partial, config?: Partial): void; - relayout(root: Root, layout: Partial): void; - redraw(root: Root): void; - purge(root: Root): void; - d3: any; - } - - // Layout - - interface Layout { - autosize: boolean; - showlegend: boolean; - xaxis: Partial; - yaxis: Partial; - margin: Partial; - 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>; - legend: Partial; - } - - interface Legend { - traceorder: "grouped" | "normal" | "reversed"; - x: number; - y: number; - font: Partial; - 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; - rangeselector: Partial; - 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; - } - - 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 | Partial; - - // Bar - interface BarData { - type: 'bar'; - x: Datum[]; - y: Datum[]; - } - - // Scatter - interface ScatterData { - type: 'scatter' | 'scattergl'; - x: Datum[]; - y: Datum[]; - text: string | string[]; - line: Partial; - marker: Partial; - 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 - 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>; - 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; - } +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>, layout?: Partial, config?: Partial): Promise; +export function plot(root: Root, data: Array>, layout?: Partial, config?: Partial): Promise; +export function relayout(root: Root, layout: Partial): Promise; +export function redraw(root: Root): Promise; +export function purge(root: Root): PlotlyHTMLElement; +export const d3: any; +export function restyle(root: Root, aobj: Partial, traces?: number[] | number): Promise; +export function update(root: Root, traceUpdate: Partial, layoutUpdate: Partial, traces?: number[] | number): Promise; +export function addTraces(root: Root, traces: Partial | Array>, newIndices?: number[] | number): Promise; +export function deleteTraces(root: Root, indices: number[] | number): Promise; +export function moveTraces(root: Root, currentIndices: number[] | number, newIndices?: number[] | number): Promise; +export function extendTraces(root: Root, update: Partial | Array>, indices: number | number[]): Promise; +export function prependTraces(root: Root, update: Partial | Array>, indices: number | number[]): Promise; +export function toImage(root: Root, opts: ToImgopts): Promise; +export function downloadImage(root: Root, opts: DownloadImgopts): Promise; + +// Layout +export interface Layout { + title: string; + autosize: boolean; + showlegend: boolean; + xaxis: Partial; + yaxis: Partial; + margin: Partial; + 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>; + legend: Partial; +} + +export interface Legend { + traceorder: "grouped" | "normal" | "reversed"; + x: number; + y: number; + font: Partial; + 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; + rangeselector: Partial; + 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; +} + +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; +export type Color = string | Array | Array>; + +// Bar Scatter +export interface ScatterData { + type: 'bar' | 'scatter' | 'scattergl'; + x: Datum[] | Datum[][]; + y: Datum[] | Datum[][]; + text: string | string[]; + line: Partial; + '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; + '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 + 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>; + 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; +} diff --git a/types/plotly.js/plotly.js-tests.ts b/types/plotly.js/plotly.js-tests.ts index ab71c73e7d..f33886d841 100644 --- a/types/plotly.js/plotly.js-tests.ts +++ b/types/plotly.js/plotly.js-tests.ts @@ -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'); + }); +})(); +//////////////////////////////////////////////////////////////////////