add three charts

2023-07-05 07:12:43 +05:30
parent 5950bd9584
commit ba5ef28a2f
10 changed files with 2791 additions and 80 deletions
--- a/src/RegistraionChart.js
+++ b/src/RegistraionChart.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react'
+import * as d3 from 'd3'
+
+
+class RegistraionChart extends Component {
+
+    componentDidMount() {
+        this.drawChart();
+    }
+
+    drawChart() {
+        // const data = this.props.data;
+        // const margin = { left: 10, top: 10 };
+
+        // const svg = d3.select("body")
+        //     .append("svg")
+        //     .attr("width", 700)
+        //     .attr("height", 300);
+
+        // svg.selectAll("rect")
+        //     .data(data.map(x => x - 1970))
+        //     .enter()
+        //     .append("rect")
+        //     .attr("x", (d, i) => i * 40)
+        //     .attr("y", (d, i) => 300 - 10 * d)
+        //     .attr("width", 65)
+        //     .attr("height", (d, i) => d * 10)
+        //     .attr("fill", "#9338FF")
+        //     .on('click', function (x) {
+        //         // console.log(x.srcElement);
+        //         // alert(x);
+        //     });
+
+        // var xScale = d3.scaleBand().range([0, this.props.width]).padding(0.4),
+        //     yScale = d3.scaleLinear().range([this.props.height, 0]);
+
+        const data =
+            [
+                {
+                    "type": "Registration",
+                    "count": 60,
+                }
+            ];
+        // d3.select("#gender").append("div")
+        //     .attr("class", "chart").selectAll(".bar").data(data).enter()
+        //     .append("div")
+        //     .attr("class", "bar")
+        //     .style("width", function (d) { return d.count + "px" }).style("outline", "1px solid black").text(function (d) { return Math.round(d.count) });
+
+        d3.select("#registration").append("div").attr("class", "chart").selectAll("div.line").data(data)
+            .enter()
+            .append("div").attr("class", "line");
+        d3.selectAll("div.line").append("div")
+            .attr("class", "label").text(function (d) { return d.type });
+        d3.selectAll("div.line").append("div")
+            .attr("class", "bar")
+            .style("width", function (d) { return d.count + "px" }).text(function (d) { return Math.round(d.count) });
+    }
+
+    render() {
+        return <div id={"#" + this.props.id} style={{ margin: '1em' }}></div>
+    }
+}
+export default RegistraionChart;