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;
|