File size: 1,985 Bytes
ccefd0b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
//@ts-ignore
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,
}}
/>
);
}
|