From 3b6ee1231b3cad4b6660bc5de3fe1a30ebc0289d Mon Sep 17 00:00:00 2001 From: Chris Gervang Date: Fri, 24 Mar 2017 20:49:44 -0700 Subject: [PATCH 1/7] Additions Plotly.js Type Definition --- types/plotly.js/index.d.ts | 294 +++++++++++++++++++++++++++++++++---- 1 file changed, 264 insertions(+), 30 deletions(-) diff --git a/types/plotly.js/index.d.ts b/types/plotly.js/index.d.ts index 863c708abb..0907914965 100644 --- a/types/plotly.js/index.d.ts +++ b/types/plotly.js/index.d.ts @@ -1,39 +1,273 @@ // Type definitions for plotly.js +// Version: 1.22 // Project: https://plot.ly/javascript/ -// Definitions by: Martin Duparc +// Definitions by: Chris Gervang , Martin Duparc // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -interface PlotlyConfig { - staticPlot?: boolean, - editable?: boolean, - autosizable?: boolean, - fillFrame?: boolean, - frameMargins?: number, - scrollZoom?: boolean, - doubleClick?: string, - showTips?: boolean, - showLink?: boolean, - sendData?: boolean, - linkText?: string, - showSources?: boolean, - displayModeBar?: string|boolean, - modeBarButtonsToRemove?: any[], - modeBarButtonsToAdd?: any[], - modeBarButtons?: boolean, - displaylogo?: boolean, - plotGlPixelRatio?: number, - setBackground?: any, - topojsonURL?: string, - mapboxAccessToken?: string, - logging?: boolean +declare module 'plotly' { + var Plotly: Plotly.PlotlyStatic; + export = Plotly; + } -interface PlotlyStatic { - newPlot(divid:string | HTMLElement, data:any[], layout?:any, config?:PlotlyConfig):void; +declare var Plotly: Plotly.PlotlyStatic; + +declare namespace Plots { + interface StaticPlots { + resize: (root: Plotly.Root) => void + } } -declare module "plotly.js" { - export = plotly; -} +declare namespace Plotly { + interface PlotlyStatic { + Plots: Plots.StaticPlots + newPlot: (root: Root, data: Partial[], layout: Partial, config: Partial) => void + relayout: (root: Root, layout: Partial) => void + redraw: (root: Root) => void + purge: (root: Root) => void + d3: any + } -declare var plotly:PlotlyStatic; + type Root = string | HTMLElement + + type Data = ScatterData + + 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 Font { + family: string + size: number + color: string + } + + interface RangeSelector { + buttons: Partial[] + 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 + } + + type AxisType = "date" | "log" | "linear" + + interface Axis { + 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 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: Partial[] + } + + 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' + + type Datum = string | number | Date + + 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: "" //Drawing.symbolList + opacity: number + size: number + maxdisplayed: number + sizeref: number + sizemin: number + sizemode: "diameter" | "area" + showscale: boolean + line: {} //TODO + colorbar: {} //TODO + } + + type Dash = 'solid' | 'dot' | 'dash' | 'longdash' | 'dashdot' | 'longdashdot' + + interface ScatterLine { + color: string + width: number + dash: Dash + shape: 'linear' | 'spline' | 'hv' | 'vh' | 'hvh' | 'vhv' + smoothing: number + simplify: boolean + } + + 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[] + + } +} From bfa2fe98076167020492579dbeb86db98eba59e0 Mon Sep 17 00:00:00 2001 From: Chris Gervang Date: Fri, 24 Mar 2017 21:40:56 -0700 Subject: [PATCH 2/7] Added a basic bar data type, and updated the test code. --- types/plotly.js/index.d.ts | 146 ++++++++++++++++------------- types/plotly.js/plotly.js-tests.ts | 4 +- 2 files changed, 82 insertions(+), 68 deletions(-) diff --git a/types/plotly.js/index.d.ts b/types/plotly.js/index.d.ts index 0907914965..51a184e70d 100644 --- a/types/plotly.js/index.d.ts +++ b/types/plotly.js/index.d.ts @@ -4,14 +4,6 @@ // Definitions by: Chris Gervang , Martin Duparc // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -declare module 'plotly' { - var Plotly: Plotly.PlotlyStatic; - export = Plotly; - -} - -declare var Plotly: Plotly.PlotlyStatic; - declare namespace Plots { interface StaticPlots { resize: (root: Plotly.Root) => void @@ -19,53 +11,35 @@ declare namespace Plots { } declare namespace Plotly { + type Root = string | HTMLElement + interface PlotlyStatic { Plots: Plots.StaticPlots - newPlot: (root: Root, data: Partial[], layout: Partial, config: Partial) => void + newPlot: (root: Root, data: Partial[], layout?: Partial, config?: Partial) => void relayout: (root: Root, layout: Partial) => void redraw: (root: Root) => void purge: (root: Root) => void d3: any } - type Root = string | HTMLElement + // Layout - type Data = ScatterData - - 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 Font { - family: string - size: number - color: string - } - - interface RangeSelector { - buttons: Partial[] - 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 + 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: Partial[] } type AxisType = "date" | "log" | "linear" @@ -86,24 +60,6 @@ declare namespace Plotly { autorange: boolean | 'reversed' } - 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: Partial[] - } - interface ShapeLine { color: string width: number @@ -142,8 +98,22 @@ declare namespace Plotly { 'zoomInGeo' | 'zoomOutGeo' | 'resetGeo' | 'hoverClosestGeo' | 'hoverClosestGl2d' | 'hoverClosestPie' | 'toggleHover' | 'resetViews' + // Data + type Datum = string | number | Date + type Dash = 'solid' | 'dot' | 'dash' | 'longdash' | 'dashdot' | 'longdashdot' + + type Data = ScatterData | BarData + + // Bar + interface BarData { + type: 'bar' + x: Datum[] + y: Datum[] + } + + // Scatter interface ScatterData { type: 'scatter' | 'scattergl' x: Datum[] @@ -174,8 +144,6 @@ declare namespace Plotly { colorbar: {} //TODO } - type Dash = 'solid' | 'dot' | 'dash' | 'longdash' | 'dashdot' | 'longdashdot' - interface ScatterLine { color: string width: number @@ -185,6 +153,12 @@ declare namespace Plotly { simplify: boolean } + interface Font { + family: string + size: number + color: string + } + interface Config { // no interactivity, for export or image generation staticPlot: boolean @@ -270,4 +244,44 @@ declare namespace Plotly { 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: Partial[] + 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 + } } + +declare module 'plotly' { + var Plotly: Plotly.PlotlyStatic; + export = Plotly; + +} + +declare var Plotly: Plotly.PlotlyStatic; diff --git a/types/plotly.js/plotly.js-tests.ts b/types/plotly.js/plotly.js-tests.ts index 57fc92d8a9..ede3248eb7 100644 --- a/types/plotly.js/plotly.js-tests.ts +++ b/types/plotly.js/plotly.js-tests.ts @@ -1,6 +1,6 @@ -import * as Plotly from 'plotly.js'; +import * as Plotly from 'plotly'; -var data = [ +var data: Plotly.BarData[] = [ { x: ['giraffes', 'orangutans', 'monkeys'], y: [20, 14, 23], From 53955a935ad26a5f7c141be398fe6bdca14b27c6 Mon Sep 17 00:00:00 2001 From: Chris Gervang Date: Fri, 24 Mar 2017 21:45:29 -0700 Subject: [PATCH 3/7] Adding tslint --- types/plotly.js/tslint.json | 1 + 1 file changed, 1 insertion(+) create mode 100644 types/plotly.js/tslint.json diff --git a/types/plotly.js/tslint.json b/types/plotly.js/tslint.json new file mode 100644 index 0000000000..2221e40e4a --- /dev/null +++ b/types/plotly.js/tslint.json @@ -0,0 +1 @@ +{ "extends": "../tslint.json" } \ No newline at end of file From 0070f246f5b068dbb8ecec7749da8668e68f834b Mon Sep 17 00:00:00 2001 From: Chris Gervang Date: Fri, 24 Mar 2017 22:01:44 -0700 Subject: [PATCH 4/7] Version formatting --- types/plotly.js/index.d.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/types/plotly.js/index.d.ts b/types/plotly.js/index.d.ts index 51a184e70d..3ee0440844 100644 --- a/types/plotly.js/index.d.ts +++ b/types/plotly.js/index.d.ts @@ -1,5 +1,4 @@ -// Type definitions for plotly.js -// Version: 1.22 +// Type definitions for plotly.js 1.22 // Project: https://plot.ly/javascript/ // Definitions by: Chris Gervang , Martin Duparc // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped From aab2ca4331f7162c905b3faaa97aada6978c3823 Mon Sep 17 00:00:00 2001 From: Chris Gervang Date: Fri, 24 Mar 2017 22:04:42 -0700 Subject: [PATCH 5/7] Typescript version 2.2 --- types/plotly.js/index.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/types/plotly.js/index.d.ts b/types/plotly.js/index.d.ts index 3ee0440844..6cd34bc4ef 100644 --- a/types/plotly.js/index.d.ts +++ b/types/plotly.js/index.d.ts @@ -2,6 +2,7 @@ // Project: https://plot.ly/javascript/ // Definitions by: Chris Gervang , Martin Duparc // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.2 declare namespace Plots { interface StaticPlots { From b9ce3fc309b428cd903d904277b48cb688765fc3 Mon Sep 17 00:00:00 2001 From: Chris Gervang Date: Fri, 24 Mar 2017 22:11:40 -0700 Subject: [PATCH 6/7] strictNullChecks --- types/plotly.js/tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/plotly.js/tsconfig.json b/types/plotly.js/tsconfig.json index 94a19223ed..776f3e5a66 100644 --- a/types/plotly.js/tsconfig.json +++ b/types/plotly.js/tsconfig.json @@ -7,7 +7,7 @@ ], "noImplicitAny": true, "noImplicitThis": true, - "strictNullChecks": false, + "strictNullChecks": true, "baseUrl": "../", "typeRoots": [ "../" From 144f0dd6727c922e3209966fd75050c4c8eeb331 Mon Sep 17 00:00:00 2001 From: Chris Gervang Date: Sat, 25 Mar 2017 01:17:11 -0700 Subject: [PATCH 7/7] =?UTF-8?q?The=20package=20is=20actually=20called=20pl?= =?UTF-8?q?otly.js=20rather=20than=20just=20plotly=20=F0=9F=98=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- types/plotly.js/index.d.ts | 9 ++------- types/plotly.js/plotly.js-tests.ts | 2 +- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/types/plotly.js/index.d.ts b/types/plotly.js/index.d.ts index 6cd34bc4ef..1fbdf3942c 100644 --- a/types/plotly.js/index.d.ts +++ b/types/plotly.js/index.d.ts @@ -278,10 +278,5 @@ declare namespace Plotly { } } -declare module 'plotly' { - var Plotly: Plotly.PlotlyStatic; - export = Plotly; - -} - -declare var Plotly: Plotly.PlotlyStatic; +declare var Plotly: Plotly.PlotlyStatic +export = Plotly \ No newline at end of file diff --git a/types/plotly.js/plotly.js-tests.ts b/types/plotly.js/plotly.js-tests.ts index ede3248eb7..293c5ade6a 100644 --- a/types/plotly.js/plotly.js-tests.ts +++ b/types/plotly.js/plotly.js-tests.ts @@ -1,4 +1,4 @@ -import * as Plotly from 'plotly'; +import * as Plotly from 'plotly.js'; var data: Plotly.BarData[] = [ {