slate/components/stats/HardChart.js

164 lines
4.7 KiB
JavaScript
Raw Normal View History

2020-08-10 01:40:03 +03:00
import React from "react";
2020-08-10 02:18:51 +03:00
const STYLES_CONTAINER = {
2020-08-10 01:40:03 +03:00
width: "100%",
height: "auto",
};
2020-08-10 02:18:51 +03:00
const STYLES_GRAPH = {
viewBox: "0 0 600 600",
2020-08-10 01:40:03 +03:00
// backgroundColor: "#f7f7f7",
borderRadius: "4px",
height: "600px",
width: "600px",
};
2020-08-10 02:18:51 +03:00
const STYLES_XLINE = {
2020-08-10 01:40:03 +03:00
stroke: "#b2b2b2",
srokeWidth: "1",
fill: "none",
};
2020-08-10 02:18:51 +03:00
const STYLES_LINE1 = {
2020-08-10 01:40:03 +03:00
position: "relative",
stroke: "#0047ff",
fill: "none",
};
2020-08-10 02:18:51 +03:00
const STYLES_LINE2 = {
2020-08-10 01:40:03 +03:00
position: "relative",
stroke: "#1b1f23",
fill: "none",
};
2020-08-10 02:18:51 +03:00
const STYLES_LINE3 = {
2020-08-10 01:40:03 +03:00
position: "relative",
stroke: "#ffc940",
fill: "none",
};
2020-08-10 02:18:51 +03:00
const STYLES_CAT1 = {
2020-08-10 01:40:03 +03:00
fontSize: "0.75em",
fill: "#0047ff",
stroke: "none",
};
2020-08-10 02:18:51 +03:00
const STYLES_CAT2 = {
2020-08-10 01:40:03 +03:00
fontSize: "0.75em",
fill: "#1b1f23",
stroke: "none",
};
2020-08-10 02:18:51 +03:00
const STYLES_CAT3 = {
2020-08-10 01:40:03 +03:00
fontSize: "0.75em",
fill: "#ffc940",
stroke: "none",
};
function HardChart() {
return (
2020-08-10 02:18:51 +03:00
<div style={STYLES_CONTAINER}>
<svg style={STYLES_GRAPH}>
2020-08-10 01:40:03 +03:00
{/*Circle Plots*/}
<g>
2020-08-10 02:18:51 +03:00
<circle cx="25" cy="540" r="2" style={STYLES_CAT1} />
<circle cx="150" cy="500" r="2" style={STYLES_CAT1} />
<circle cx="300" cy="490" r="2" style={STYLES_CAT1} />
<circle cx="375" cy="350" r="2" style={STYLES_CAT1} />
<circle cx="520" cy="200" r="2" style={STYLES_CAT1} />
<circle cx="560" cy="10" r="2" style={STYLES_CAT1} />
<circle cx="25" cy="480" r="2" style={STYLES_CAT2} />
<circle cx="150" cy="420" r="2" style={STYLES_CAT2} />
<circle cx="300" cy="300" r="2" style={STYLES_CAT2} />
<circle cx="375" cy="250" r="2" style={STYLES_CAT2} />
<circle cx="520" cy="275" r="2" style={STYLES_CAT2} />
<circle cx="560" cy="300" r="2" style={STYLES_CAT2} />
<circle cx="25" cy="300" r="2" style={STYLES_CAT3} />
<circle cx="150" cy="350" r="2" style={STYLES_CAT3} />
<circle cx="300" cy="325" r="2" style={STYLES_CAT3} />
<circle cx="375" cy="375" r="2" style={STYLES_CAT3} />
<circle cx="520" cy="400" r="2" style={STYLES_CAT3} />
<circle cx="560" cy="420" r="2" style={STYLES_CAT3} />
2020-08-10 01:40:03 +03:00
</g>
{/*Connected Line Plots*/}
<g>
<polyline
2020-08-10 02:18:51 +03:00
style={STYLES_LINE1}
2020-08-10 01:40:03 +03:00
points="25,540 150,500 300,490 375,350 520,200 560,10"
>
<title>Category 1</title>
</polyline>
<polyline
2020-08-10 02:18:51 +03:00
style={STYLES_LINE2}
2020-08-10 01:40:03 +03:00
points="25,480 150,420 300,300 375,250 520,275 560,300"
>
<title>Category 2</title>
</polyline>
<polyline
2020-08-10 02:18:51 +03:00
style={STYLES_LINE3}
2020-08-10 01:40:03 +03:00
points="25,300 150,350 300,325 375,375 520,400 560,420"
>
<title>Category 3</title>
</polyline>
</g>
{/* Alt Configuration - Show Straight Lines connecting first/last plots
<g>
<line x1="10" y1="90" x2="190" y2="10" stroke="gray" />
<line x1="10" y1="20" x2="190" y2="70" stroke="gray" />
<line x1="10" y1="50" x2="190" y2="30" stroke="gray" />
</g>
*/}
{/*X Axis Line*/}
<g>
2020-08-10 02:18:51 +03:00
<line style={STYLES_XLINE} x1="25" y1="550" x2="575" y2="550" />
2020-08-10 01:40:03 +03:00
</g>
{/*X Axis Tick Marks*/}
<g>
2020-08-10 02:18:51 +03:00
<line style={STYLES_XLINE} x1="75" y1="550" x2="75" y2="560" />
2020-08-10 01:40:03 +03:00
<text className="chart-text" textAnchor="middle" x="75" y="575">
Sep 2017
</text>
2020-08-10 02:18:51 +03:00
<line style={STYLES_XLINE} x1="225" y1="550" x2="225" y2="560" />
2020-08-10 01:40:03 +03:00
<text className="chart-text" textAnchor="middle" x="225" y="575">
Jun 2018
</text>
2020-08-10 02:18:51 +03:00
<line style={STYLES_XLINE} x1="375" y1="550" x2="375" y2="560" />
2020-08-10 01:40:03 +03:00
<text className="chart-text" textAnchor="middle" x="375" y="575">
Mar 2019
</text>
2020-08-10 02:18:51 +03:00
<line style={STYLES_XLINE} x1="525" y1="550" x2="525" y2="560" />
2020-08-10 01:40:03 +03:00
<text className="chart-text" textAnchor="middle" x="525" y="575">
Dec 2019
</text>
</g>
{/* Alt Configuration - Show Legend
<g>
<polyline
points=" 215,100 215,40 285,40 285,100 215,100"
stroke="#b2b2b2"
fill="none"
/>
2020-08-10 02:18:51 +03:00
<text className="STYLES_CAT1" text-anchor="middle" x="250" y="60">
2020-08-10 01:40:03 +03:00
Category 1
</text>
2020-08-10 02:18:51 +03:00
<text className="STYLES_CAT2" text-anchor="middle" x="250" y="75">
2020-08-10 01:40:03 +03:00
Category 2
</text>
2020-08-10 02:18:51 +03:00
<text className="STYLES_CAT3" text-anchor="middle" x="250" y="90">
2020-08-10 01:40:03 +03:00
Category 3
</text>
</g>
*/}
</svg>
</div>
);
}
// const chartText = {
// fontSize: "0.9em",
// fill: "#b2b2b2",
// stroke: "none",
// };
export default HardChart;