mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-07-01 15:50:13 +00:00
upgrade plotly.js version to 1.28
This commit is contained in:
taoqiufeng
@@ -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');
|
||||
});
|
||||
})();
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
|
||||
Reference in New Issue
Block a user