Merge pull request #15379 from chrisgervang/patch-2

Additions Plotly.js Type Definition

types/plotly.js/index.d.ts

@@ -1,39 +1,282 @@
-// Type definitions for plotly.js
+// Type definitions for plotly.js 1.22
 // Project: https://plot.ly/javascript/
-// Definitions by: Martin Duparc <https://github.com/martinduparc>
+// Definitions by: Chris Gervang <https://github.com/chrisgervang>, Martin Duparc <https://github.com/martinduparc>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.2
 
-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 namespace Plots {
+    interface StaticPlots {
+        resize: (root: Plotly.Root) => void
+    }
 }
 
-interface PlotlyStatic {
-    newPlot(divid:string | HTMLElement, data:any[], layout?:any, config?:PlotlyConfig):void;
+declare namespace Plotly {
+    type Root = string | HTMLElement
+
+    interface PlotlyStatic {
+        Plots: Plots.StaticPlots
+        newPlot: (root: Root, data: 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: Partial<Shape>[]
+    }
+
+    type AxisType = "date" | "log" | "linear"
+
+    interface Axis {
+        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 = ScatterData | 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: "" //Drawing.symbolList
+        opacity: number
+        size: 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: 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>
+    }
 }
 
-declare module "plotly.js" {    
-    export = plotly;
-}
-
-declare var plotly:PlotlyStatic;
+declare var Plotly: Plotly.PlotlyStatic
+export = Plotly

types/plotly.js/plotly.js-tests.ts

@@ -1,6 +1,6 @@
 import * as Plotly from 'plotly.js';
 
-var data = [
+var data: Plotly.BarData[] = [
   {
     x: ['giraffes', 'orangutans', 'monkeys'],
     y: [20, 14, 23],

types/plotly.js/tsconfig.json

@@ -7,7 +7,7 @@
         ],
         "noImplicitAny": true,
         "noImplicitThis": true,
-        "strictNullChecks": false,
+        "strictNullChecks": true,
         "baseUrl": "../",
         "typeRoots": [
             "../"

types/plotly.js/tslint.json

@@ -0,0 +1 @@
+{ "extends": "../tslint.json" }