From a9394b8436ae70e1abc775d145be8dff3e4c5674 Mon Sep 17 00:00:00 2001
From: Jon Freedman <jon.freedman@zoho.com>
Date: Sat, 21 Jul 2018 01:42:18 +0100
Subject: [PATCH] update plotly.js typing (#27355)

* update typing
- add missing event handlers from https://github.com/plotly/react-plotly.js/#event-handler-props
- add addFrames / deleteFrames functions
- use Font interface in ScatterMarker.colorbar
- change Font.color type from string to Color
- fix 'common mistakes': tabs to spaces

* fix linting errors

* use tab indentation and require in tslint
---
 types/plotly.js/index.d.ts          | 1123 +++++++++++++++++----------
 types/plotly.js/test/core-tests.ts  |   95 ++-
 types/plotly.js/test/index-tests.ts |   95 ++-
 types/plotly.js/tslint.json         |    3 +-
 4 files changed, 892 insertions(+), 424 deletions(-)

diff --git a/types/plotly.js/index.d.ts b/types/plotly.js/index.d.ts
index 39ecb64d37..b8532af0a6 100644
--- a/types/plotly.js/index.d.ts
+++ b/types/plotly.js/index.d.ts
@@ -1,13 +1,14 @@
 // Type definitions for plotly.js 1.38
 // Project: https://plot.ly/javascript/
 // Definitions by: Chris Gervang <https://github.com/chrisgervang>
-// 				Martin Duparc <https://github.com/martinduparc>
-// 				Frederik Aalund <https://github.com/frederikaalund>
-// 				taoqf <https://github.com/taoqf>
-// 				Dadstart <https://github.com/Dadstart>
-// 				Jared Szechy <https://github.com/szechyjs>
-// 				Drew Diamantoukos <https://github.com/MercifulCode>
-// 				Sooraj Pudiyadath <https://github.com/soorajpudiyadath>
+//                 Martin Duparc <https://github.com/martinduparc>
+//                 Frederik Aalund <https://github.com/frederikaalund>
+//                 taoqf <https://github.com/taoqf>
+//                 Dadstart <https://github.com/Dadstart>
+//                 Jared Szechy <https://github.com/szechyjs>
+//                 Drew Diamantoukos <https://github.com/MercifulCode>
+//                 Sooraj Pudiyadath <https://github.com/soorajpudiyadath>
+//                 Jon Freedman <https://github.com/jonfreedman>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.3
 
@@ -27,14 +28,14 @@ export interface Point {
 }
 
 export interface PlotScatterDataPoint {
-  curveNumber: number;
-  data: ScatterData;
-  pointIndex: number;
-  pointNumber: number;
-  x: number;
-  xaxis: LayoutAxis;
-  y: number;
-  yaxis: LayoutAxis;
+	curveNumber: number;
+	data: ScatterData;
+	pointIndex: number;
+	pointNumber: number;
+	x: number;
+	xaxis: LayoutAxis;
+	y: number;
+	yaxis: LayoutAxis;
 }
 
 export interface PlotMouseEvent {
@@ -53,8 +54,8 @@ export interface PlotSelectionEvent {
 }
 
 export type PlotRestyleEvent = [
-	any,  // update object -- attribute updated: new value
-	number[]       // array of traces updated
+	any,		// update object -- attribute updated: new value
+	number[]	// array of traces updated
 ];
 
 export interface PlotAxis {
@@ -81,14 +82,69 @@ export interface ClickAnnotationEvent {
 	event: MouseEvent;
 }
 
+export interface FrameAnimationEvent {
+	name: string;
+	frame: Frame;
+	animation: {
+		frame: {
+			duration: number;
+			redraw: boolean;
+		};
+		transition: Transition;
+	};
+}
+
+export interface LegendClickEvent {
+	event: MouseEvent;
+	node: PlotlyHTMLElement;
+	curveNumber: number;
+	expandedIndex: number;
+	data: Data[];
+	layout: Partial<Layout>;
+	frames: Frame[];
+	config: Partial<Config>;
+	fullData: Data[];
+	fullLayout: Partial<Layout>;
+}
+
+export interface SliderChangeEvent {
+	slider: Slider;
+	step: SliderStep;
+	interaction: boolean;
+	previousActive: number;
+}
+
+export interface SliderStartEvent {
+	slider: Slider;
+}
+
+export interface SliderEndEvent {
+	slider: Slider;
+	step: SliderStep;
+}
+
+export interface BeforePlotEvent {
+	data: Data[];
+	layout: Partial<Layout>;
+	config: Partial<Config>;
+}
+
 export interface PlotlyHTMLElement extends HTMLElement {
 	on(event: 'plotly_click' | 'plotly_hover' | 'plotly_unhover', callback: (event: PlotMouseEvent) => void): void;
 	on(event: 'plotly_selecting' | 'plotly_selected', callback: (event: PlotSelectionEvent) => void): void;
 	on(event: 'plotly_restyle', callback: (data: PlotRestyleEvent) => void): void;
 	on(event: 'plotly_relayout', callback: (event: PlotRelayoutEvent) => void): void;
 	on(event: 'plotly_clickannotation', callback: (event: ClickAnnotationEvent) => 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;
+	on(event: 'plotly_animatingframe', callback: (event: FrameAnimationEvent) => void): void;
+	on(event: 'plotly_legendclick' | 'plotly_legenddoubleclick', callback: (event: LegendClickEvent) => boolean): void;
+	on(event: 'plotly_sliderchange', callback: (event: SliderChangeEvent) => void): void;
+	on(event: 'plotly_sliderend', callback: (event: SliderEndEvent) => void): void;
+	on(event: 'plotly_sliderstart', callback: (event: SliderStartEvent) => void): void;
+	on(event: 'plotly_event', callback: (data: any) => void): void;
+	on(event: 'plotly_beforeplot' , callback: (event: BeforePlotEvent) => boolean): void;
+	on(event: 'plotly_afterexport' | 'plotly_afterplot' | 'plotly_animated' | 'plotly_animationinterrupted' | 'plotly_autosize' |
+		'plotly_beforeexport' | 'plotly_deselect' | 'plotly_doubleclick' | 'plotly_framework' | 'plotly_redraw' |
+		'plotly_transitioning' | 'plotly_transitioninterrupted' , callback: () => void): void;
 }
 
 export interface ToImgopts {
@@ -122,6 +178,8 @@ export function prependTraces(root: Root, update: Data | Data[], indices: number
 export function toImage(root: Root, opts: ToImgopts): Promise<string>;
 export function downloadImage(root: Root, opts: DownloadImgopts): Promise<string>;
 export function react(root: Root, data: Data[], layout?: Partial<Layout>, config?: Partial<Config>): Promise<PlotlyHTMLElement>;
+export function addFrames(root: Root, frames: Array<Partial<Frame>>): Promise<PlotlyHTMLElement>;
+export function deleteFrames(root: Root, frames: number[]): Promise<PlotlyHTMLElement>;
 
 // Layout
 export interface Layout {
@@ -129,11 +187,11 @@ export interface Layout {
 	titlefont: Partial<Font>;
 	autosize: boolean;
 	showlegend: boolean;
-    paper_bgcolor: Color;
-    plot_bgcolor: Color;
-    separators: string;
-    hidesources: boolean;
-    xaxis: Partial<LayoutAxis>;
+	paper_bgcolor: Color;
+	plot_bgcolor: Color;
+	separators: string;
+	hidesources: boolean;
+	xaxis: Partial<LayoutAxis>;
 	yaxis: Partial<LayoutAxis>;
 	yaxis2: Partial<LayoutAxis>;
 	yaxis3: Partial<LayoutAxis>;
@@ -148,8 +206,8 @@ export interface Layout {
 	width: number;
 	hovermode: 'closest' | 'x' | 'y' | false;
 	hoverlabel: Partial<Label>;
-    calendar: Calendar;
-    'xaxis.range': [Datum, Datum];
+	calendar: Calendar;
+	'xaxis.range': [Datum, Datum];
 	'xaxis.range[0]': Datum;
 	'xaxis.range[1]': Datum;
 	'yaxis.range': [Datum, Datum];
@@ -159,20 +217,20 @@ export interface Layout {
 	'xaxis.type': AxisType;
 	'xaxis.autorange': boolean;
 	'yaxis.autorange': boolean;
-    ternary: {}; // TODO
-    geo: {}; // TODO
-    mapbox: {}; // TODO
-    radialaxis: {}; // TODO
-    angularaxis: {}; // TODO
-    direction: 'clockwise' | 'counterclockwise';
-    dragmode: 'zoom' | 'pan' | 'select' | 'lasso' | 'orbit' | 'turntable';
-    orientation: number;
-    annotations: Array<Partial<Annotations>>;
-    shapes: Array<Partial<Shape>>;
-    images: Array<Partial<Image>>;
-    updatemenus: {}; // TODO
-    sliders: {}; // TODO
-    legend: Partial<Legend>;
+	ternary: {}; // TODO
+	geo: {}; // TODO
+	mapbox: {}; // TODO
+	radialaxis: {}; // TODO
+	angularaxis: {}; // TODO
+	direction: 'clockwise' | 'counterclockwise';
+	dragmode: 'zoom' | 'pan' | 'select' | 'lasso' | 'orbit' | 'turntable';
+	orientation: number;
+	annotations: Array<Partial<Annotations>>;
+	shapes: Array<Partial<Shape>>;
+	images: Array<Partial<Image>>;
+	updatemenus: {}; // TODO
+	sliders: Array<Partial<Slider>>;
+	legend: Partial<Legend>;
 	font: Partial<Font>;
 	scene: Partial<Scene>;
 }
@@ -191,80 +249,80 @@ export interface Legend extends Label {
 export type AxisType = '-' | 'linear' | 'log' | 'date' | 'category';
 
 export interface Axis {
-    visible: boolean;
-    color: Color;
-    title: string;
-    titlefont: Partial<Font>;
-    type: AxisType;
-    autorange: true | false | 'reversed';
-    rangemode: 'normal' | 'tozero' | 'nonnegative';
-    range: any[];
-    tickmode: 'auto' | 'linear' | 'array';
-    nticks: number;
-    tick0: number | string;
-    dtick: number | string;
-    tickvals: any[];
-    ticktext: string[];
-    ticks: 'outside' | 'inside' | '';
-    mirror: true | 'ticks' | false | 'all' | 'allticks';
-    ticklen: number;
-    tickwidth: number;
-    tickcolor: Color;
-    showticklabels: boolean;
-    showspikes: boolean;
-    spikecolor: Color;
-    spikethickness: number;
-    categoryorder: 'trace' | 'category ascending' | 'category descending' | 'array';
-    categoryarray: any[];
-    tickfont: Partial<Font>;
-    tickangle: number;
-    tickprefix: string;
-    showtickprefix: 'all' | 'first' | 'last' | 'none';
-    ticksuffix: string;
-    showticksuffix: 'all' | 'first' | 'last' | 'none';
-    showexponent: 'all' | 'first' | 'last' | 'none';
-    exponentformat: 'none' | 'e' | 'E' | 'power' | 'SI' | 'B';
-    separatethousands: boolean;
-    tickformat: string;
-    hoverformat: string;
-    showline: boolean;
-    linecolor: Color;
-    linewidth: number;
-    showgrid: boolean;
-    gridcolor: Color;
-    gridwidth: number;
-    zeroline: boolean;
-    zerolinecolor: Color;
-    zerolinewidth: number;
-    calendar: Calendar;
+	visible: boolean;
+	color: Color;
+	title: string;
+	titlefont: Partial<Font>;
+	type: AxisType;
+	autorange: true | false | 'reversed';
+	rangemode: 'normal' | 'tozero' | 'nonnegative';
+	range: any[];
+	tickmode: 'auto' | 'linear' | 'array';
+	nticks: number;
+	tick0: number | string;
+	dtick: number | string;
+	tickvals: any[];
+	ticktext: string[];
+	ticks: 'outside' | 'inside' | '';
+	mirror: true | 'ticks' | false | 'all' | 'allticks';
+	ticklen: number;
+	tickwidth: number;
+	tickcolor: Color;
+	showticklabels: boolean;
+	showspikes: boolean;
+	spikecolor: Color;
+	spikethickness: number;
+	categoryorder: 'trace' | 'category ascending' | 'category descending' | 'array';
+	categoryarray: any[];
+	tickfont: Partial<Font>;
+	tickangle: number;
+	tickprefix: string;
+	showtickprefix: 'all' | 'first' | 'last' | 'none';
+	ticksuffix: string;
+	showticksuffix: 'all' | 'first' | 'last' | 'none';
+	showexponent: 'all' | 'first' | 'last' | 'none';
+	exponentformat: 'none' | 'e' | 'E' | 'power' | 'SI' | 'B';
+	separatethousands: boolean;
+	tickformat: string;
+	hoverformat: string;
+	showline: boolean;
+	linecolor: Color;
+	linewidth: number;
+	showgrid: boolean;
+	gridcolor: Color;
+	gridwidth: number;
+	zeroline: boolean;
+	zerolinecolor: Color;
+	zerolinewidth: number;
+	calendar: Calendar;
 }
 
 export type Calendar = 'gregorian' | 'chinese' | 'coptic' | 'discworld' | 'ethiopian' | 'hebrew' | 'islamic' | 'julian' | 'mayan' |
-    'nanakshahi' | 'nepali' | 'persian' | 'jalali' | 'taiwan' | 'thai' | 'ummalqura';
+	'nanakshahi' | 'nepali' | 'persian' | 'jalali' | 'taiwan' | 'thai' | 'ummalqura';
 
 export interface LayoutAxis extends Axis {
-    fixedrange: boolean;
-    scaleanchor: '/^x([2-9]|[1-9][0-9]+)?$/' | '/^y([2-9]|[1-9][0-9]+)?$/';
-    scaleratio: number;
-    constrain: 'range' | 'domain';
-    constraintoward: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom';
-    spikedash: string;
-    spikemode: string;
-    anchor: 'free' | '/^x([2-9]|[1-9][0-9]+)?$/' | '/^y([2-9]|[1-9][0-9]+)?$/';
-    side: 'top' | 'bottom' | 'left' | 'right';
-    overlaying: 'free' | '/^x([2-9]|[1-9][0-9]+)?$/' | '/^y([2-9]|[1-9][0-9]+)?$/';
-    layer: 'above traces' | 'below traces';
-    domain: number[];
-    position: number;
-    rangeslider: Partial<RangeSlider>;
-    rangeselector: Partial<RangeSelector>;
+	fixedrange: boolean;
+	scaleanchor: '/^x([2-9]|[1-9][0-9]+)?$/' | '/^y([2-9]|[1-9][0-9]+)?$/';
+	scaleratio: number;
+	constrain: 'range' | 'domain';
+	constraintoward: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom';
+	spikedash: string;
+	spikemode: string;
+	anchor: 'free' | '/^x([2-9]|[1-9][0-9]+)?$/' | '/^y([2-9]|[1-9][0-9]+)?$/';
+	side: 'top' | 'bottom' | 'left' | 'right';
+	overlaying: 'free' | '/^x([2-9]|[1-9][0-9]+)?$/' | '/^y([2-9]|[1-9][0-9]+)?$/';
+	layer: 'above traces' | 'below traces';
+	domain: number[];
+	position: number;
+	rangeslider: Partial<RangeSlider>;
+	rangeselector: Partial<RangeSelector>;
 }
 
 export interface SceneAxis extends Axis {
-    spikesides: boolean;
-    showbackground: boolean;
-    backgroundcolor: Color;
-    showaxeslabels: boolean;
+	spikesides: boolean;
+	showbackground: boolean;
+	backgroundcolor: Color;
+	showaxeslabels: boolean;
 }
 
 export interface ShapeLine {
@@ -316,38 +374,38 @@ export interface Icon {
 
 export interface ModeBarButton {
 	/** name / id of the buttons (for tracking) */
-    name: string;
+	name: string;
 
 	/**
 	 * text that appears while hovering over the button,
 	 * enter null, false or '' for no hover text
 	 */
-    title: string;
+	title: string;
 
 	/**
 	 * svg icon object associated with the button
 	 * can be linked to Plotly.Icons to use the default plotly icons
 	 */
-    icon: string | Icon;
+	icon: string | Icon;
 
 	/** icon positioning */
-    gravity?: string;
+	gravity?: string;
 
 	/**
 	 * click handler associated with the button, a function of
 	 * 'gd' (the main graph object) and
 	 * 'ev' (the event object)
 	 */
-    click: ButtonClickEvent;
+	click: ButtonClickEvent;
 
 	/**
 	 * attribute associated with button,
 	 * use this with 'val' to keep track of the state
 	 */
-    attr?: string;
+	attr?: string;
 
 	/** initial 'attr' value, can be a function of gd */
-    val?: any;
+	val?: any;
 
 	/** is the button a toggle button? */
 	toggle?: boolean;
@@ -396,15 +454,15 @@ export interface ScatterData {
 	mode: 'lines' | 'markers' | 'text' | 'lines+markers' | 'text+markers' | 'text+lines' | 'text+lines+markers' | 'none';
 	hoveron: 'points' | 'fills';
 	hoverinfo: 'all' | 'name' | 'none' | 'skip' | 'text' |
-               'x' | 'x+text' | 'x+name' |
-               'x+y' | 'x+y+text' | 'x+y+name' |
-               'x+y+z' | 'x+y+z+text' | 'x+y+z+name' |
-               'y+x' | 'y+x+text' | 'y+x+name' |
-               'y+z' | 'y+z+text' | 'y+z+name' |
-               'y+x+z' | 'y+x+z+text' | 'y+x+z+name' |
-               'z+x' | 'z+x+text' | 'z+x+name' |
-               'z+y+x' | 'z+y+x+text' | 'z+y+x+name' |
-               'z+x+y' | 'z+x+y+text' | 'z+x+y+name';
+			'x' | 'x+text' | 'x+name' |
+			'x+y' | 'x+y+text' | 'x+y+name' |
+			'x+y+z' | 'x+y+z+text' | 'x+y+z+name' |
+			'y+x' | 'y+x+text' | 'y+x+name' |
+			'y+z' | 'y+z+text' | 'y+z+name' |
+			'y+x+z' | 'y+x+z+text' | 'y+x+z+name' |
+			'z+x' | 'z+x+text' | 'z+x+name' |
+			'z+y+x' | 'z+y+x+text' | 'z+y+x+name' |
+			'z+x+y' | 'z+x+y+text' | 'z+x+y+name';
 	hoverlabel: Partial<Label>;
 	fill: 'none' | 'tozeroy' | 'tozerox' | 'tonexty' | 'tonextx' | 'toself' | 'tonext';
 	fillcolor: string;
@@ -437,77 +495,69 @@ export interface ScatterMarker {
 	showscale: boolean;
 	line: Partial<ScatterMarkerLine>;
 	colorbar: {
-        thicknessmode: 'fraction' | 'pixels',
-        thickness: number,
-        lenmode: 'fraction' | 'pixels',
-        len: number,
-        x: number,
-        xanchor: 'left' | 'center' | 'right',
-        xpad: number,
-        y: number,
-        yanchor: 'top' | 'middle' | 'bottom',
-        ypad: number,
-        outlinecolor: Color,
-        outlinewidth: number,
-        bordercolor: Color,
-        borderwidth: Color,
-        bgcolor: Color,
-        tickmode: 'auto' | 'linear' | 'array',
-        nticks: number,
-        tick0: number | string,
-        dtick: number | string,
-        tickvals: Datum[] | Datum[][] | Datum[][][] | TypedArray,
-        ticktext: Datum[] | Datum[][] | Datum[][][] | TypedArray,
-        ticks: 'outside' | 'inside' | '',
-        ticklen: number,
-        tickwidth: number,
-        tickcolor: Color,
-        showticklabels: boolean,
-        tickfont: {
-            family: string,
-            size: number,
-            color: Color,
-        },
-        tickangle: number,
-        tickformat: string,
-        tickformatstops: {
-            dtickrange: any[],
-            value: string,
-        },
-        tickprefix: string,
-        showtickprefix: 'all' | 'first' | 'last' | 'none',
-        ticksuffix: string,
-        showticksuffix: 'all' | 'first' | 'last' | 'none',
-        separatethousands: boolean,
-        exponentformat: 'none' | 'e' | 'E' | 'power' | 'SI' | 'B',
-        showexponent: 'all' | 'first' | 'last' | 'none',
-        title: string,
-        titlefont: {
-            family: string,
-            size: number,
-            color: Color,
-        },
-        titleside: 'right' | 'top' | 'bottom',
-        tickvalssrc: any,
-        ticktextsrc: any,
-    };
+		thicknessmode: 'fraction' | 'pixels',
+		thickness: number,
+		lenmode: 'fraction' | 'pixels',
+		len: number,
+		x: number,
+		xanchor: 'left' | 'center' | 'right',
+		xpad: number,
+		y: number,
+		yanchor: 'top' | 'middle' | 'bottom',
+		ypad: number,
+		outlinecolor: Color,
+		outlinewidth: number,
+		bordercolor: Color,
+		borderwidth: Color,
+		bgcolor: Color,
+		tickmode: 'auto' | 'linear' | 'array',
+		nticks: number,
+		tick0: number | string,
+		dtick: number | string,
+		tickvals: Datum[] | Datum[][] | Datum[][][] | TypedArray,
+		ticktext: Datum[] | Datum[][] | Datum[][][] | TypedArray,
+		ticks: 'outside' | 'inside' | '',
+		ticklen: number,
+		tickwidth: number,
+		tickcolor: Color,
+		showticklabels: boolean,
+		tickfont: Font,
+		tickangle: number,
+		tickformat: string,
+		tickformatstops: {
+			dtickrange: any[],
+			value: string,
+		},
+		tickprefix: string,
+		showtickprefix: 'all' | 'first' | 'last' | 'none',
+		ticksuffix: string,
+		showticksuffix: 'all' | 'first' | 'last' | 'none',
+		separatethousands: boolean,
+		exponentformat: 'none' | 'e' | 'E' | 'power' | 'SI' | 'B',
+		showexponent: 'all' | 'first' | 'last' | 'none',
+		title: string,
+		titlefont: Font,
+		titleside: 'right' | 'top' | 'bottom',
+		tickvalssrc: any,
+		ticktextsrc: any,
+	};
 	gradient: {
-        type: 'radial' | 'horizontal' | 'vertical' | 'none',
-        color: Color,
-        typesrc: any,
-        colorsrc: any,
-    };
+		type: 'radial' | 'horizontal' | 'vertical' | 'none',
+		color: Color,
+		typesrc: any,
+		colorsrc: any,
+	};
 }
 
 export interface ScatterMarkerLine {
-    width: number | number[];
-    color: Color;
-    colorscale: string | string[];
-    cauto: boolean;
-    cmax: number;
-    cmin: number;
-    autocolorscale: boolean;
-    reversescale: boolean;
+	width: number | number[];
+	color: Color;
+	colorscale: string | string[];
+	cauto: boolean;
+	cmax: number;
+	cmin: number;
+	autocolorscale: boolean;
+	reversescale: boolean;
 }
 
 export interface ScatterLine {
@@ -520,9 +570,20 @@ export interface ScatterLine {
 }
 
 export interface Font {
+	/**
+	 * HTML font family - the typeface that will be applied by the web browser.
+	 * The web browser will only be able to apply a font if it is available on the system
+	 * which it operates. Provide multiple font families, separated by commas, to indicate
+	 * the preference in which to apply fonts if they aren't available on the system.
+	 * The plotly service (at https://plot.ly or on-premise) generates images on a server,
+	 * where only a select number of fonts are installed and supported.
+	 * These include *Arial*, *Balto*, *Courier New*, *Droid Sans*, *Droid Serif*,
+	 * *Droid Sans Mono*, *Gravitas One*, *Old Standard TT*, *Open Sans*, *Overpass*,
+	 * *PT Sans Narrow*, *Raleway*, *Times New Roman*.
+	 */
 	family: string;
 	size: number;
-	color: string;
+	color: Color;
 }
 
 export interface Edits {
@@ -679,276 +740,276 @@ export interface Label {
 }
 
 export interface Annotations extends Label {
-  /** Determines whether or not this annotation is visible. */
-  visible: boolean;
+	/** Determines whether or not this annotation is visible. */
+	visible: boolean;
 
-  /**
-   * Sets the text associated with this annotation.
-   * Plotly uses a subset of HTML tags to do things like
-   * newline (<br>), bold (<b></b>), italics (<i></i>),
-   * hyperlinks (<a href='...'></a>). Tags <em>, <sup>, <sub>
-   * <span> are also supported.
-   */
-  text: string;
+	/**
+	 * Sets the text associated with this annotation.
+	 * Plotly uses a subset of HTML tags to do things like
+	 * newline (<br>), bold (<b></b>), italics (<i></i>),
+	 * hyperlinks (<a href='...'></a>). Tags <em>, <sup>, <sub>
+	 * <span> are also supported.
+	 */
+	text: string;
 
-  /** Sets the angle at which the `text` is drawn with respect to the horizontal. */
-  textangle: string;
+	/** Sets the angle at which the `text` is drawn with respect to the horizontal. */
+	textangle: string;
 
-  /**
-   * Sets an explicit width for the text box. null (default) lets the
-   * text set the box width. Wider text will be clipped.
-   * There is no automatic wrapping; use <br> to start a new line.
-   */
-  width: number;
+	/**
+	 * Sets an explicit width for the text box. null (default) lets the
+	 * text set the box width. Wider text will be clipped.
+	 * There is no automatic wrapping; use <br> to start a new line.
+	 */
+	width: number;
 
-  /**
-   * Sets an explicit height for the text box. null (default) lets the
-   * text set the box height. Taller text will be clipped.
-   */
-  height: number;
+	/**
+	 * Sets an explicit height for the text box. null (default) lets the
+	 * text set the box height. Taller text will be clipped.
+	 */
+	height: number;
 
-  /** Sets the opacity of the annotation (text + arrow). */
-  opacity: number;
+	/** Sets the opacity of the annotation (text + arrow). */
+	opacity: number;
 
-  /**
-   * Sets the horizontal alignment of the `text` within the box.
-   * Has an effect only if `text` spans more two or more lines
-   * (i.e. `text` contains one or more <br> HTML tags) or if an
-   * explicit width is set to override the text width.
-   */
-  align: 'left' | 'center' | 'right';
+	/**
+	 * Sets the horizontal alignment of the `text` within the box.
+	 * Has an effect only if `text` spans more two or more lines
+	 * (i.e. `text` contains one or more <br> HTML tags) or if an
+	 * explicit width is set to override the text width.
+	 */
+	align: 'left' | 'center' | 'right';
 
-  /**
-   * Sets the vertical alignment of the `text` within the box.
-   * Has an effect only if an explicit height is set to override the text height.
-   */
-  valign: 'top' | 'middle' | 'bottom';
+	/**
+	 * Sets the vertical alignment of the `text` within the box.
+	 * Has an effect only if an explicit height is set to override the text height.
+	 */
+	valign: 'top' | 'middle' | 'bottom';
 
-  /** Sets the padding (in px) between the `text` and the enclosing border. */
-  borderpad: number;
+	/** Sets the padding (in px) between the `text` and the enclosing border. */
+	borderpad: number;
 
-  /** Sets the width (in px) of the border enclosing the annotation `text`. */
-  borderwidth: number;
+	/** Sets the width (in px) of the border enclosing the annotation `text`. */
+	borderwidth: number;
 
-  /**
-   * Determines whether or not the annotation is drawn with an arrow.
-   * If *true*, `text` is placed near the arrow's tail.
-   * If *false*, `text` lines up with the `x` and `y` provided.
-   */
-  showarrow: boolean;
+	/**
+	 * Determines whether or not the annotation is drawn with an arrow.
+	 * If *true*, `text` is placed near the arrow's tail.
+	 * If *false*, `text` lines up with the `x` and `y` provided.
+	 */
+	showarrow: boolean;
 
-  /** Sets the color of the annotation arrow. */
-  arrowcolor: string;
+	/** Sets the color of the annotation arrow. */
+	arrowcolor: string;
 
-  /** Sets the end annotation arrow head style. */
-  arrowhead: number;
+	/** Sets the end annotation arrow head style. */
+	arrowhead: number;
 
-  /** Sets the start annotation arrow head style. */
-  startarrowhead: number;
+	/** Sets the start annotation arrow head style. */
+	startarrowhead: number;
 
-  /** Sets the annotation arrow head position. */
-  arrowside: 'end' | 'start';
+	/** Sets the annotation arrow head position. */
+	arrowside: 'end' | 'start';
 
-  /**
-   * Sets the size of the end annotation arrow head, relative to `arrowwidth`.
-   * A value of 1 (default) gives a head about 3x as wide as the line.
-   */
-  arrowsize: number;
+	/**
+	 * Sets the size of the end annotation arrow head, relative to `arrowwidth`.
+	 * A value of 1 (default) gives a head about 3x as wide as the line.
+	 */
+	arrowsize: number;
 
-  /**
-   * Sets the size of the start annotation arrow head, relative to `arrowwidth`.
-   * A value of 1 (default) gives a head about 3x as wide as the line.
-   */
-  startarrowsize: number;
+	/**
+	 * Sets the size of the start annotation arrow head, relative to `arrowwidth`.
+	 * A value of 1 (default) gives a head about 3x as wide as the line.
+	 */
+	startarrowsize: number;
 
-  /** Sets the width (in px) of annotation arrow line. */
-  arrowwidth: number;
+	/** Sets the width (in px) of annotation arrow line. */
+	arrowwidth: number;
 
-  /**
-   * Sets a distance, in pixels, to move the end arrowhead away from the
-   * position it is pointing at, for example to point at the edge of
-   * a marker independent of zoom. Note that this shortens the arrow
-   * from the `ax` / `ay` vector, in contrast to `xshift` / `yshift`
-   * which moves everything by this amount.
-   */
-  standoff: number;
+	/**
+	 * Sets a distance, in pixels, to move the end arrowhead away from the
+	 * position it is pointing at, for example to point at the edge of
+	 * a marker independent of zoom. Note that this shortens the arrow
+	 * from the `ax` / `ay` vector, in contrast to `xshift` / `yshift`
+	 * which moves everything by this amount.
+	 */
+	standoff: number;
 
-  /**
-   * Sets a distance, in pixels, to move the start arrowhead away from the
-   * position it is pointing at, for example to point at the edge of
-   * a marker independent of zoom. Note that this shortens the arrow
-   * from the `ax` / `ay` vector, in contrast to `xshift` / `yshift`
-   * which moves everything by this amount.
-   */
-  startstandoff: number;
+	/**
+	 * Sets a distance, in pixels, to move the start arrowhead away from the
+	 * position it is pointing at, for example to point at the edge of
+	 * a marker independent of zoom. Note that this shortens the arrow
+	 * from the `ax` / `ay` vector, in contrast to `xshift` / `yshift`
+	 * which moves everything by this amount.
+	 */
+	startstandoff: number;
 
-  /**
-   * Sets the x component of the arrow tail about the arrow head.
-   * If `axref` is `pixel`, a positive (negative)
-   * component corresponds to an arrow pointing
-   * from right to left (left to right).
-   * If `axref` is an axis, this is an absolute value on that axis,
-   * like `x`, NOT a relative value.
-   */
-  ax: number;
+	/**
+	 * Sets the x component of the arrow tail about the arrow head.
+	 * If `axref` is `pixel`, a positive (negative)
+	 * component corresponds to an arrow pointing
+	 * from right to left (left to right).
+	 * If `axref` is an axis, this is an absolute value on that axis,
+	 * like `x`, NOT a relative value.
+	 */
+	ax: number;
 
-  /**
-   * Sets the y component of the arrow tail about the arrow head.
-   * If `ayref` is `pixel`, a positive (negative)
-   * component corresponds to an arrow pointing
-   * from bottom to top (top to bottom).
-   * If `ayref` is an axis, this is an absolute value on that axis,
-   * like `y`, NOT a relative value.
-   */
-  ay: number;
+	/**
+	 * Sets the y component of the arrow tail about the arrow head.
+	 * If `ayref` is `pixel`, a positive (negative)
+	 * component corresponds to an arrow pointing
+	 * from bottom to top (top to bottom).
+	 * If `ayref` is an axis, this is an absolute value on that axis,
+	 * like `y`, NOT a relative value.
+	 */
+	ay: number;
 
-  /**
-   * Indicates in what terms the tail of the annotation (ax,ay)
-   * is specified. If `pixel`, `ax` is a relative offset in pixels
-   * from `x`. If set to an x axis id (e.g. *x* or *x2*), `ax` is
-   * specified in the same terms as that axis. This is useful
-   * for trendline annotations which should continue to indicate
-   * the correct trend when zoomed.
-   */
-  axref: 'pixel';
+	/**
+	 * Indicates in what terms the tail of the annotation (ax,ay)
+	 * is specified. If `pixel`, `ax` is a relative offset in pixels
+	 * from `x`. If set to an x axis id (e.g. *x* or *x2*), `ax` is
+	 * specified in the same terms as that axis. This is useful
+	 * for trendline annotations which should continue to indicate
+	 * the correct trend when zoomed.
+	 */
+	axref: 'pixel';
 
-  /**
-   * Indicates in what terms the tail of the annotation (ax,ay)
-   * is specified. If `pixel`, `ay` is a relative offset in pixels
-   * from `y`. If set to a y axis id (e.g. *y* or *y2*), `ay` is
-   * specified in the same terms as that axis. This is useful
-   * for trendline annotations which should continue to indicate
-   * the correct trend when zoomed.
-   */
-  ayref: 'pixel';
+	/**
+	 * Indicates in what terms the tail of the annotation (ax,ay)
+	 * is specified. If `pixel`, `ay` is a relative offset in pixels
+	 * from `y`. If set to a y axis id (e.g. *y* or *y2*), `ay` is
+	 * specified in the same terms as that axis. This is useful
+	 * for trendline annotations which should continue to indicate
+	 * the correct trend when zoomed.
+	 */
+	ayref: 'pixel';
 
-  /**
-   * Sets the annotation's x coordinate axis.
-   * If set to an x axis id (e.g. *x* or *x2*), the `x` position refers to an x coordinate
-   * If set to *paper*, the `x` position refers to the distance from
-   * the left side of the plotting area in normalized coordinates
-   * where 0 (1) corresponds to the left (right) side.
-   */
-  xref: 'paper' | 'x';
+	/**
+	 * Sets the annotation's x coordinate axis.
+	 * If set to an x axis id (e.g. *x* or *x2*), the `x` position refers to an x coordinate
+	 * If set to *paper*, the `x` position refers to the distance from
+	 * the left side of the plotting area in normalized coordinates
+	 * where 0 (1) corresponds to the left (right) side.
+	 */
+	xref: 'paper' | 'x';
 
-  /**
-   * Sets the annotation's x position.
-   * If the axis `type` is *log*, then you must take the log of your desired range.
-   * If the axis `type` is *date*, it should be date strings, like date data,
-   * though Date objects and unix milliseconds will be accepted and converted to strings.
-   * If the axis `type` is *category*, it should be numbers, using the scale where each
-   * category is assigned a serial number from zero in the order it appears.
-   */
-  x: number | string;
+	/**
+	 * Sets the annotation's x position.
+	 * If the axis `type` is *log*, then you must take the log of your desired range.
+	 * If the axis `type` is *date*, it should be date strings, like date data,
+	 * though Date objects and unix milliseconds will be accepted and converted to strings.
+	 * If the axis `type` is *category*, it should be numbers, using the scale where each
+	 * category is assigned a serial number from zero in the order it appears.
+	 */
+	x: number | string;
 
-  /**
-   * Sets the text box's horizontal position anchor
-   * This anchor binds the `x` position to the *left*, *center* or *right* of the annotation.
-   * For example, if `x` is set to 1, `xref` to *paper* and `xanchor` to *right* then the
-   * right-most portion of the annotation lines up with the right-most edge of the plotting area.
-   * If *auto*, the anchor is equivalent to *center* for data-referenced annotations or if there
-   * is an arrow, whereas for paper-referenced with no arrow, the anchor picked corresponds to the closest side.
-   */
-  xanchor: 'auto' | 'left' | 'center' | 'right';
+	/**
+	 * Sets the text box's horizontal position anchor
+	 * This anchor binds the `x` position to the *left*, *center* or *right* of the annotation.
+	 * For example, if `x` is set to 1, `xref` to *paper* and `xanchor` to *right* then the
+	 * right-most portion of the annotation lines up with the right-most edge of the plotting area.
+	 * If *auto*, the anchor is equivalent to *center* for data-referenced annotations or if there
+	 * is an arrow, whereas for paper-referenced with no arrow, the anchor picked corresponds to the closest side.
+	 */
+	xanchor: 'auto' | 'left' | 'center' | 'right';
 
-  /**
-   * Shifts the position of the whole annotation and arrow to the
-   * right (positive) or left (negative) by this many pixels.
-   */
-  xshift: number;
+	/**
+	 * Shifts the position of the whole annotation and arrow to the
+	 * right (positive) or left (negative) by this many pixels.
+	 */
+	xshift: number;
 
-  /**
-   * Sets the annotation's y coordinate axis.
-   * If set to an y axis id (e.g. *y* or *y2*), the `y` position refers to an y coordinate
-   * If set to *paper*, the `y` position refers to the distance from
-   * the bottom of the plotting area in normalized coordinates
-   * where 0 (1) corresponds to the bottom (top).
-   */
-  yref: 'paper' | 'y';
+	/**
+	 * Sets the annotation's y coordinate axis.
+	 * If set to an y axis id (e.g. *y* or *y2*), the `y` position refers to an y coordinate
+	 * If set to *paper*, the `y` position refers to the distance from
+	 * the bottom of the plotting area in normalized coordinates
+	 * where 0 (1) corresponds to the bottom (top).
+	 */
+	yref: 'paper' | 'y';
 
-  /**
-   * Sets the annotation's y position.
-   * If the axis `type` is *log*, then you must take the log of your desired range.
-   * If the axis `type` is *date*, it should be date strings, like date data,
-   * though Date objects and unix milliseconds will be accepted and converted to strings.
-   * If the axis `type` is *category*, it should be numbers, using the scale where each
-   * category is assigned a serial number from zero in the order it appears.
-   */
-  y: number | string;
+	/**
+	 * Sets the annotation's y position.
+	 * If the axis `type` is *log*, then you must take the log of your desired range.
+	 * If the axis `type` is *date*, it should be date strings, like date data,
+	 * though Date objects and unix milliseconds will be accepted and converted to strings.
+	 * If the axis `type` is *category*, it should be numbers, using the scale where each
+	 * category is assigned a serial number from zero in the order it appears.
+	 */
+	y: number | string;
 
-  /**
-   * Sets the text box's vertical position anchor
-   * This anchor binds the `y` position to the *top*, *middle* or *bottom* of the annotation.
-   * For example, if `y` is set to 1, `yref` to *paper* and `yanchor` to *top* then the
-   * top-most portion of the annotation lines up with the top-most edge of the plotting area.
-   * If *auto*, the anchor is equivalent to *middle* for data-referenced annotations or if
-   * there is an arrow, whereas for paper-referenced with no arrow, the anchor picked
-   * corresponds to the closest side.
-   */
-  yanchor: 'auto' | 'top' | 'middle' | 'bottom';
+	/**
+	 * Sets the text box's vertical position anchor
+	 * This anchor binds the `y` position to the *top*, *middle* or *bottom* of the annotation.
+	 * For example, if `y` is set to 1, `yref` to *paper* and `yanchor` to *top* then the
+	 * top-most portion of the annotation lines up with the top-most edge of the plotting area.
+	 * If *auto*, the anchor is equivalent to *middle* for data-referenced annotations or if
+	 * there is an arrow, whereas for paper-referenced with no arrow, the anchor picked
+	 * corresponds to the closest side.
+	 */
+	yanchor: 'auto' | 'top' | 'middle' | 'bottom';
 
-  /**
-   * Shifts the position of the whole annotation and arrow up
-   * (positive) or down (negative) by this many pixels.
-   */
-  yshift: number;
+	/**
+	 * Shifts the position of the whole annotation and arrow up
+	 * (positive) or down (negative) by this many pixels.
+	 */
+	yshift: number;
 
-  /**
-   * Makes this annotation respond to clicks on the plot.
-   * If you click a data point that exactly matches the `x` and `y` values of this annotation,
-   * and it is hidden (visible: false), it will appear. In *onoff* mode, you must click the same
-   * point again to make it disappear, so if you click multiple points, you can show multiple
-   * annotations. In *onout* mode, a click anywhere else in the plot (on another data point or not)
-   * will hide this annotation. If you need to show/hide this annotation in response to different
-   * `x` or `y` values, you can set `xclick` and/or `yclick`. This is useful for example to label
-   * the side of a bar. To label markers though, `standoff` is preferred over `xclick` and `yclick`.
-   */
-  clicktoshow: false | 'onoff' | 'onout';
+	/**
+	 * Makes this annotation respond to clicks on the plot.
+	 * If you click a data point that exactly matches the `x` and `y` values of this annotation,
+	 * and it is hidden (visible: false), it will appear. In *onoff* mode, you must click the same
+	 * point again to make it disappear, so if you click multiple points, you can show multiple
+	 * annotations. In *onout* mode, a click anywhere else in the plot (on another data point or not)
+	 * will hide this annotation. If you need to show/hide this annotation in response to different
+	 * `x` or `y` values, you can set `xclick` and/or `yclick`. This is useful for example to label
+	 * the side of a bar. To label markers though, `standoff` is preferred over `xclick` and `yclick`.
+	 */
+	clicktoshow: false | 'onoff' | 'onout';
 
-  /**
-   * Toggle this annotation when clicking a data point whose `x` value
-   * is `xclick` rather than the annotation's `x` value.
-   */
-  xclick: any;
+	/**
+	 * Toggle this annotation when clicking a data point whose `x` value
+	 * is `xclick` rather than the annotation's `x` value.
+	 */
+	xclick: any;
 
-  /**
-   * Toggle this annotation when clicking a data point whose `y` value
-   * is `yclick` rather than the annotation's `y` value.
-   */
-  yclick: any;
+	/**
+	 * Toggle this annotation when clicking a data point whose `y` value
+	 * is `yclick` rather than the annotation's `y` value.
+	 */
+	yclick: any;
 
-  /**
-   * Sets text to appear when hovering over this annotation.
-   * If omitted or blank, no hover label will appear.
-   */
-  hovertext: string;
+	/**
+	 * Sets text to appear when hovering over this annotation.
+	 * If omitted or blank, no hover label will appear.
+	 */
+	hovertext: string;
 
-  hoverlabel: Partial<Label>;
+	hoverlabel: Partial<Label>;
 
-  /**
-   * Determines whether the annotation text box captures mouse move and click events,
-   * or allows those events to pass through to data points in the plot that may be
-   * behind the annotation. By default `captureevents` is *false* unless `hovertext`
-   * is provided. If you use the event `plotly_clickannotation` without `hovertext`
-   * you must explicitly enable `captureevents`.
-   */
+	/**
+	 * Determines whether the annotation text box captures mouse move and click events,
+	 * or allows those events to pass through to data points in the plot that may be
+	 * behind the annotation. By default `captureevents` is *false* unless `hovertext`
+	 * is provided. If you use the event `plotly_clickannotation` without `hovertext`
+	 * you must explicitly enable `captureevents`.
+	 */
 	captureevents: boolean;
 }
 
 export interface Image {
-  visible: boolean;
-  source: string;
-  layer: 'above' | 'below';
-  sizex: number;
-  sizey: number;
-  sizing: 'fill' | 'contain' | 'stretch';
-  opacity: number;
-  x: number | string;
-  y: number | string;
-  xanchor: 'left' | 'center' | 'right';
-  yanchor: 'top' | 'middle' | 'bottom';
-  xref: 'paper' | 'x';
-  yref: 'paper' | 'y';
+	visible: boolean;
+	source: string;
+	layer: 'above' | 'below';
+	sizex: number;
+	sizey: number;
+	sizing: 'fill' | 'contain' | 'stretch';
+	opacity: number;
+	x: number | string;
+	y: number | string;
+	xanchor: 'left' | 'center' | 'right';
+	yanchor: 'top' | 'middle' | 'bottom';
+	xref: 'paper' | 'x';
+	yref: 'paper' | 'y';
 }
 
 export interface Scene {
@@ -967,6 +1028,226 @@ export interface Scene {
 }
 
 export interface Domain {
-    x: number[];
-    y: number[];
+	x: number[];
+	y: number[];
+}
+
+export interface Frame {
+	/**
+	 * An identifier that specifies the group to which the frame belongs,
+	 * used by animate to select a subset of frames.
+	 */
+	group: string;
+	/**
+	 * A label by which to identify the frame
+	 */
+	name: string;
+	/**
+	 * A list of trace indices that identify the respective traces in the
+	 * data attribute
+	 */
+	traces: number[];
+	/**
+	 * The name of the frame into which this frame's properties are merged
+	 * before applying. This is used to unify properties and avoid needing
+	 * to specify the same values for the same properties in multiple frames.
+	 */
+	baseframe: string;
+	/**
+	 * A list of traces this frame modifies. The format is identical to the
+	 * normal trace definition.
+	 */
+	data: Data[];
+	/**
+	 * Layout properties which this frame modifies. The format is identical
+	 * to the normal layout definition.
+	 */
+	layout: Partial<Layout>;
+}
+
+export interface Transition {
+	/**
+	 * Sets the duration of the slider transition
+	 */
+	duration: number;
+	/**
+	 * Sets the easing function of the slider transition
+	 */
+	easing: 'linear' | 'quad' | 'cubic' | 'sin' | 'exp' | 'circle' | 'elastic' | 'back' | 'bounce' | 'linear-in' |
+		'quad-in' | 'cubic-in' | 'sin-in' | 'exp-in' | 'circle-in' | 'elastic-in' | 'back-in' | 'bounce-in' |
+		'linear-out' | 'quad-out' | 'cubic-out' | 'sin-out' | 'exp-out' | 'circle-out' | 'elastic-out' | 'back-out' |
+		'bounce-out' | 'linear-in-out' | 'quad-in-out' | 'cubic-in-out' | 'sin-in-out' | 'exp-in-out' |
+		'circle-in-out' | 'elastic-in-out' | 'back-in-out' | 'bounce-in-out';
+}
+
+export interface SliderStep {
+	/**
+	 * Determines whether or not this step is included in the slider.
+	 */
+	visible: boolean;
+	/**
+	 * Sets the Plotly method to be called when the slider value is changed.
+	 * If the `skip` method is used, the API slider will function as normal
+	 * but will perform no API calls and will not bind automatically to state
+	 * updates. This may be used to create a component interface and attach to
+	 * slider events manually via JavaScript.
+	 */
+	method: 'animate' | 'relayout' | 'restyle' | 'skip' | 'update';
+	/**
+	 * Sets the arguments values to be passed to the Plotly
+	 * method set in `method` on slide.
+	 */
+	args: any[];
+	/**
+	 * Sets the text label to appear on the slider
+	 */
+	label: string;
+	/**
+	 * Sets the value of the slider step, used to refer to the step programatically.
+	 * Defaults to the slider label if not provided.
+	 */
+	value: string;
+	/**
+	 * When true, the API method is executed. When false, all other behaviors are the same
+	 * and command execution is skipped. This may be useful when hooking into, for example,
+	 * the `plotly_sliderchange` method and executing the API command manually without losing
+	 * the benefit of the slider automatically binding to the state of the plot through the
+	 * specification of `method` and `args`.
+	 */
+	execute: boolean;
+}
+
+export interface Padding {
+	/**
+	 * The amount of padding (in px) along the top of the component.
+	 */
+	t: number;
+	/**
+	 * The amount of padding (in px) on the right side of the component.
+	 */
+	r: number;
+	/**
+	 * The amount of padding (in px) along the bottom of the component.
+	 */
+	b: number;
+	/**
+	 * The amount of padding (in px) on the left side of the component.
+	 */
+	l: number;
+	editType: 'arraydraw';
+}
+
+export interface Slider {
+	/**
+	 * Determines whether or not the slider is visible.
+	 */
+	visible: boolean;
+	/**
+	 * Determines which button (by index starting from 0) is
+	 * considered active.
+	 */
+	active: number;
+	steps: Array<Partial<SliderStep>>;
+	/**
+	 * Determines whether this slider length
+	 * is set in units of plot *fraction* or in *pixels.
+	 * Use `len` to set the value.
+	 */
+	lenmode: 'fraction' | 'pixels';
+	/**
+	 * Sets the length of the slider
+	 * This measure excludes the padding of both ends.
+	 * That is, the slider's length is this length minus the
+	 * padding on both ends.
+	 */
+	len: number;
+	/**
+	 * Sets the x position (in normalized coordinates) of the slider.
+	 */
+	x: number;
+	/**
+	 * Sets the y position (in normalized coordinates) of the slider.
+	 */
+	y: number;
+	/**
+	 * Set the padding of the slider component along each side.
+	 */
+	pad: Partial<Padding>;
+	/**
+	 * Sets the slider's horizontal position anchor.
+	 * This anchor binds the `x` position to the *left*, *center*
+	 * or *right* of the range selector.
+	 */
+	xanchor: 'auto' | 'left' | 'center' | 'right';
+	/**
+	 * Sets the slider's vertical position anchor
+	 * This anchor binds the `y` position to the *top*, *middle*
+	 * or *bottom* of the range selector.
+	 */
+	yanchor: 'auto' | 'top' | 'middle' | 'bottom';
+	transition: Transition;
+	currentvalue: {
+		/**
+		 * Shows the currently-selected value above the slider.
+		 */
+		visible: boolean;
+		/**
+		 * The alignment of the value readout relative to the length of the slider.
+		 */
+		xanchor: 'left' | 'center' | 'right';
+		/**
+		 * The amount of space, in pixels, between the current value label
+		 * and the slider.
+		 */
+		offset: number;
+		/**
+		 * When currentvalue.visible is true, this sets the prefix of the label.
+		 */
+		prefix: string;
+		/**
+		 * When currentvalue.visible is true, this sets the suffix of the label.
+		 */
+		suffix: string;
+		/**
+		 * Sets the font of the current value label text.
+		 */
+		font: Partial<Font>;
+	};
+	/**
+	 * Sets the font of the slider step labels.
+	 */
+	font: Font;
+	/**
+	 * Sets the background color of the slider grip
+	 * while dragging.
+	 */
+	activebgcolor: Color;
+	/**
+	 * Sets the background color of the slider.
+	 */
+	bgcolor: Color;
+	/**
+	 * Sets the color of the border enclosing the slider.
+	 */
+	bordercolor: Color;
+	/**
+	 * Sets the width (in px) of the border enclosing the slider.
+	 */
+	borderwidth: number;
+	/**
+	 * Sets the length in pixels of step tick marks
+	 */
+	ticklen: number;
+	/**
+	 * Sets the color of the border enclosing the slider.
+	 */
+	tickcolor: Color;
+	/**
+	 * Sets the tick width (in px).
+	 */
+	tickwidth: number;
+	/**
+	 * Sets the length in pixels of minor step tick marks
+	 */
+	minorticklen: number;
 }
diff --git a/types/plotly.js/test/core-tests.ts b/types/plotly.js/test/core-tests.ts
index 21e7396d9b..6e35de55c6 100644
--- a/types/plotly.js/test/core-tests.ts
+++ b/types/plotly.js/test/core-tests.ts
@@ -127,7 +127,7 @@ const graphDiv = '#test';
 	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
+		'yaxis.range[1]': 15	 // updates the end of the yaxis range
 	} as Layout;
 	Plotly.relayout(graphDiv, update);
 })();
@@ -251,6 +251,37 @@ function rand() {
 })();
 //////////////////////////////////////////////////////////////////////
 
+//////////////////////////////////////////////////////////////////////
+// Plotly.addFrames + Plotly.deleteFrames as per https://plot.ly/javascript/animations/
+(() => {
+	const n = 100;
+	const frames = [
+		{name: 'sine', data: [{x: new Array<number>(100), y: new Array<number>(n)}]},
+		{name: 'cosine', data: [{x: new Array<number>(100), y: new Array<number>(n)}]},
+		{name: 'circle', data: [{x: new Array<number>(100), y: new Array<number>(n)}]},
+	];
+
+	for (let i = 0; i < n; i++) {
+		const t = i / (n - 1) * 2 - 1;
+
+		// A sine wave:
+		frames[0].data[0].x[i] = t * Math.PI;
+		frames[0].data[0].y[i] = Math.sin(t * Math.PI);
+
+		// A cosine wave:
+		frames[1].data[0].x[i] = t * Math.PI;
+		frames[1].data[0].y[i] = Math.cos(t * Math.PI);
+
+		// A circle:
+		frames[2].data[0].x[i] = Math.sin(t * Math.PI);
+		frames[2].data[0].y[i] = Math.cos(t * Math.PI);
+	}
+	Plotly.addFrames(graphDiv, frames);
+
+	Plotly.deleteFrames(graphDiv, [2]);
+})();
+//////////////////////////////////////////////////////////////////////
+
 //////////////////////////////////////////////////////////////////////
 // Using events
 (async () => {
@@ -340,8 +371,70 @@ function rand() {
 		Plotly.restyle('myDiv', update);
 	});
 
+	myPlot.on('plotly_beforeplot', (event) => {
+		console.log('plotting');
+		const okToPlot = true;
+		return okToPlot;
+	});
+
 	myPlot.on('plotly_afterplot', () => {
 		console.log('done plotting');
 	});
+
+	myPlot.on('plotly_animatingframe', (event) => {
+		console.log(`animating ${event.frame.name} with ${event.animation.transition.easing}`);
+	});
+
+	myPlot.on('plotly_legendclick', (event) => {
+		console.log('clicked on legend');
+		const clickVal = true;
+		return clickVal;
+	});
+
+	myPlot.on('plotly_legenddoubleclick', (event) => {
+		console.log('dbl clicked on legend');
+		const dblClickVal = true;
+		return dblClickVal;
+	});
+
+	myPlot.on('plotly_sliderchange', (event) => {
+		console.log(`Slider at [${event.slider.x},${event.slider.y} with ${event.step.method}`);
+	});
+
+	myPlot.on('plotly_sliderstart', (event) => {
+		console.log(`Slider at [${event.slider.x},${event.slider.y}`);
+	});
+
+	myPlot.on('plotly_sliderend', (event) => {
+		console.log(`Slider at [${event.slider.x},${event.slider.y} with ${event.step.method}`);
+	});
+
+	myPlot.on('plotly_beforeexport', () => {
+		console.log('starting export');
+	});
+
+	myPlot.on('plotly_afterexport', () => {
+		console.log('done exporting');
+	});
+
+	myPlot.on('plotly_animated', () => {
+		console.log('done animation');
+	});
+
+	myPlot.on('plotly_animationinterrupted', () => {
+		console.log('animation interrupted');
+	});
+
+	myPlot.on('plotly_framework', () => {
+		console.log('framework');
+	});
+
+	myPlot.on('plotly_transitioning', () => {
+		console.log('starting transition');
+	});
+
+	myPlot.on('plotly_transitioninterrupted', () => {
+		console.log('transition interrupted');
+	});
 })();
 //////////////////////////////////////////////////////////////////////
diff --git a/types/plotly.js/test/index-tests.ts b/types/plotly.js/test/index-tests.ts
index f33886d841..71025975c1 100644
--- a/types/plotly.js/test/index-tests.ts
+++ b/types/plotly.js/test/index-tests.ts
@@ -127,7 +127,7 @@ const graphDiv = '#test';
 	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
+		'yaxis.range[1]': 15	 // updates the end of the yaxis range
 	} as Layout;
 	Plotly.relayout(graphDiv, update);
 })();
@@ -251,6 +251,37 @@ function rand() {
 })();
 //////////////////////////////////////////////////////////////////////
 
+//////////////////////////////////////////////////////////////////////
+// Plotly.addFrames + Plotly.deleteFrames as per https://plot.ly/javascript/animations/
+(() => {
+	const n = 100;
+	const frames = [
+		{name: 'sine', data: [{x: new Array<number>(100), y: new Array<number>(n)}]},
+		{name: 'cosine', data: [{x: new Array<number>(100), y: new Array<number>(n)}]},
+		{name: 'circle', data: [{x: new Array<number>(100), y: new Array<number>(n)}]},
+	];
+
+	for (let i = 0; i < n; i++) {
+		const t = i / (n - 1) * 2 - 1;
+
+		// A sine wave:
+		frames[0].data[0].x[i] = t * Math.PI;
+		frames[0].data[0].y[i] = Math.sin(t * Math.PI);
+
+		// A cosine wave:
+		frames[1].data[0].x[i] = t * Math.PI;
+		frames[1].data[0].y[i] = Math.cos(t * Math.PI);
+
+		// A circle:
+		frames[2].data[0].x[i] = Math.sin(t * Math.PI);
+		frames[2].data[0].y[i] = Math.cos(t * Math.PI);
+	}
+	Plotly.addFrames(graphDiv, frames);
+
+	Plotly.deleteFrames(graphDiv, [2]);
+})();
+//////////////////////////////////////////////////////////////////////
+
 //////////////////////////////////////////////////////////////////////
 // Using events
 (async () => {
@@ -340,8 +371,70 @@ function rand() {
 		Plotly.restyle('myDiv', update);
 	});
 
+	myPlot.on('plotly_beforeplot', (event) => {
+		console.log('plotting');
+		const okToPlot = true;
+		return okToPlot;
+	});
+
 	myPlot.on('plotly_afterplot', () => {
 		console.log('done plotting');
 	});
+
+	myPlot.on('plotly_animatingframe', (event) => {
+		console.log(`animating ${event.frame.name} with ${event.animation.transition.easing}`);
+	});
+
+	myPlot.on('plotly_legendclick', (event) => {
+		console.log('clicked on legend');
+		const clickVal = true;
+		return clickVal;
+	});
+
+	myPlot.on('plotly_legenddoubleclick', (event) => {
+		console.log('dbl clicked on legend');
+		const dblClickVal = true;
+		return dblClickVal;
+	});
+
+	myPlot.on('plotly_sliderchange', (event) => {
+		console.log(`Slider at [${event.slider.x},${event.slider.y} with ${event.step.method}`);
+	});
+
+	myPlot.on('plotly_sliderstart', (event) => {
+		console.log(`Slider at [${event.slider.x},${event.slider.y}`);
+	});
+
+	myPlot.on('plotly_sliderend', (event) => {
+		console.log(`Slider at [${event.slider.x},${event.slider.y} with ${event.step.method}`);
+	});
+
+	myPlot.on('plotly_beforeexport', () => {
+		console.log('starting export');
+	});
+
+	myPlot.on('plotly_afterexport', () => {
+		console.log('done exporting');
+	});
+
+	myPlot.on('plotly_animated', () => {
+		console.log('done animation');
+	});
+
+	myPlot.on('plotly_animationinterrupted', () => {
+		console.log('animation interrupted');
+	});
+
+	myPlot.on('plotly_framework', () => {
+		console.log('framework');
+	});
+
+	myPlot.on('plotly_transitioning', () => {
+		console.log('starting transition');
+	});
+
+	myPlot.on('plotly_transitioninterrupted', () => {
+		console.log('transition interrupted');
+	});
 })();
 //////////////////////////////////////////////////////////////////////
diff --git a/types/plotly.js/tslint.json b/types/plotly.js/tslint.json
index 993aa8344b..fe603cb969 100644
--- a/types/plotly.js/tslint.json
+++ b/types/plotly.js/tslint.json
@@ -3,6 +3,7 @@
 	"rules": {
 		// TODOs
 		"no-duplicate-imports": false,
-		"no-object-literal-type-assertion": false
+		"no-object-literal-type-assertion": false,
+		"indent": [true, "tabs", 1]
 	}
 }