mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-06-02 06:29:40 +08:00
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
This commit is contained in:
Jon Freedman
committed by
Wesley Wigham
Wesley Wigham
parent
ce73aaf4ab
commit
a9394b8436
1123
types/plotly.js/index.d.ts
vendored
1123
types/plotly.js/index.d.ts
vendored
File diff suppressed because it is too large
Load Diff
@@ -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');
|
||||
});
|
||||
})();
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
|
||||
@@ -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');
|
||||
});
|
||||
})();
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
|
||||
@@ -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]
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user