|
|
|
|
|
import Plot from "react-plotly.js"; |
|
|
|
|
|
const COLORS = [ |
|
|
"rgb(31,119,180)", |
|
|
"rgb(255,127,14)", |
|
|
"rgb(44,160,44)", |
|
|
"rgb(214,39,40)", |
|
|
"rgb(148,103,189)", |
|
|
"rgb(140,86,75)", |
|
|
"rgb(227,119,194)", |
|
|
"rgb(127,127,127)", |
|
|
]; |
|
|
|
|
|
const plot_layout = { |
|
|
height: window.innerHeight * 0.7, |
|
|
width: window.innerWidth * 0.8, |
|
|
font: { |
|
|
color: "#F5EFF3", |
|
|
size: 16, |
|
|
}, |
|
|
annotationdefaults: { |
|
|
showarrow: false, |
|
|
}, |
|
|
autotypenumbers: "strict", |
|
|
colorway: [ |
|
|
"#ffed00", |
|
|
"#ef7d00", |
|
|
"#e4003a", |
|
|
"#c13246", |
|
|
"#822661", |
|
|
"#48277c", |
|
|
"#005ca9", |
|
|
"#00aaff", |
|
|
"#9b30d9", |
|
|
"#af005f", |
|
|
"#5f00af", |
|
|
"#af87ff", |
|
|
], |
|
|
xaxis: { |
|
|
automargin: true, |
|
|
autorange: true, |
|
|
rangeslider: { |
|
|
visible: false, |
|
|
}, |
|
|
showgrid: true, |
|
|
showline: true, |
|
|
tickfont: { |
|
|
size: 14, |
|
|
}, |
|
|
zeroline: false, |
|
|
tick0: 1, |
|
|
title: { |
|
|
standoff: 20, |
|
|
}, |
|
|
linecolor: "#F5EFF3", |
|
|
mirror: true, |
|
|
ticks: "outside", |
|
|
}, |
|
|
yaxis: { |
|
|
anchor: "x", |
|
|
automargin: true, |
|
|
fixedrange: false, |
|
|
zeroline: false, |
|
|
showgrid: true, |
|
|
showline: true, |
|
|
side: "right", |
|
|
tick0: 0.5, |
|
|
title: { |
|
|
standoff: 20, |
|
|
}, |
|
|
gridcolor: "#283442", |
|
|
linecolor: "#F5EFF3", |
|
|
mirror: true, |
|
|
ticks: "outside", |
|
|
}, |
|
|
plot_bgcolor: "rgba(0,0,0,1)", |
|
|
paper_bgcolor: "rgba(0,0,0,1)", |
|
|
dragmode: "pan", |
|
|
}; |
|
|
|
|
|
|
|
|
export default function Chart({ values }: { values: number[][] }) { |
|
|
if (!values) return null; |
|
|
console.log(values); |
|
|
const data = values.map((value, idx) => ({ |
|
|
x: value.map((_, i) => i), |
|
|
y: value, |
|
|
type: "bar", |
|
|
showlegend: false, |
|
|
marker: { |
|
|
color: COLORS[idx], |
|
|
opacity: 0.6, |
|
|
line: { |
|
|
color: COLORS[idx], |
|
|
width: 1.5, |
|
|
}, |
|
|
}, |
|
|
})); |
|
|
console.log(data); |
|
|
return ( |
|
|
<Plot |
|
|
data={data} |
|
|
layout={plot_layout} |
|
|
config={{ |
|
|
displaylogo: false, |
|
|
responsive: true, |
|
|
scrollZoom: true, |
|
|
}} |
|
|
/> |
|
|
); |
|
|
} |
|
|
|
