Add charge charts to Project page

hitier
1 parent f25c2405
Showing 4 changed files with 95 additions and 2 deletions Show diff stats
app/db_mgr.py
app/main/static/css/charges.css
app/main/static/js/charges.js
app/main/templates/project.html
@@ -113,7 +113,7 @@ def charges_by_project_stacked(project_id, category=&quot;service&quot;):
         # build the charges line for the current period
         category_charges = [period_name]
         for (category_rate,) in db.session.execute(charge_by_categorie_req):
-            category_rate = '0' if category_rate is None else str(category_rate)
+            category_rate = str(category_rate) if category_rate else '0'
             category_charges.append(category_rate)
         all_charges.append(category_charges)
  
+
 #charge_table,
 #charge_table th,
 #charge_table td {
@@ -11,7 +12,7 @@
     padding: 0.8em;
 }
  
-#charge_div {
+.charge_chart {
     background-color: #fAfAfA;
     border: 1pt solid black;
     display: inline-block;
@@ -0,0 +1,80 @@
+const margin = {top: 150, right: 40, bottom: 10, left: 40},
+    width = 1000 - margin.left - margin.right,
+    height = 500 - margin.top - margin.bottom;
+
+const tooltip_offset = {dx: 300, dy: 120}
+
+const x = d3.scaleBand()
+    .range([0, width])
+    .padding(0.2);
+
+const y = d3.scaleLinear()
+    .range([height, 0]);
+
+var color = d3.scaleOrdinal()
+    .range([
+        "#800000",
+        "#FFFF00",
+        "#808000",
+        "#00FF00",
+        "#008000",
+        "#00FFFF",
+        "#008080",
+        "#0000FF",
+        "#000080",
+        "#FF00FF",
+        "#800080",
+    ]);
+
+function build_chart(div_selector, data_url) {
+
+    const svg = d3.select(div_selector).append("svg")
+        .attr("id", "svg")
+        .attr("width", width + margin.left + margin.right)
+        .attr("height", height + margin.top + margin.bottom)
+        .append("g")
+        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+    d3.csv(data_url).then(data => {
+        var services = data.columns.slice(1)
+        var periods = d3.map(data, d => d.period)
+
+        console.log(data)
+
+        var stack = d3.stack()
+            .keys(services)
+        // .order(d3.stackOrderNone)
+        // .offset(d3.stackOffsetNone);
+        var stacked_data = stack(data)
+
+        // console.log(stacked_data)
+        const x = d3.scaleBand()
+            .domain(periods)
+            .range([0, width])
+            .padding(0.1);
+
+        const y = d3.scaleLinear()
+            .domain([0, 100])
+            .range([height, 0]);
+
+
+        let groups = svg.selectAll("g.category")
+            .data(stacked_data)
+            .enter()
+            .append("g")
+            .style("fill", (d) => color(d.key));
+
+        let rect = groups.selectAll("rect")
+            .data(d => d)
+            .enter()
+            .append("rect")
+            .attr("x", d => x(d.data.period))
+            .attr("width", x.bandwidth())
+            // .attr("width", 5)
+            .attr("y", d => y(d[1]))
+            .attr("height", d => height - y(d[1] - d[0]))
+            .attr("stroke", "black");
+
+    });
+
+}
@@ -5,6 +5,10 @@
 {% endblock %}
  
 {% block content %}
+<div id="project_services_chart" class="charge_chart"></div>
+<hr/>
+<div id="project_capacities_chart" class="charge_chart"></div>
+<hr/>
 <table id="charge_table">
   <thead>
   <tr>
@@ -26,4 +30,12 @@
 {% endblock %}
  
 {% block more_scripts %}
+{% include 'd3js-includes.html' %}
+<script src="{{ url_for('main.static', filename='js/charges.js') }}" type="text/javascript"></script>
+<script>
+  build_chart("#project_services_chart",
+              "{{url_for('main.charge_project_csv', project_id=project.id, category='service')}}");
+  build_chart("#project_capacities_chart",
+              "{{url_for('main.charge_project_csv', project_id=project.id, category='capacity')}}");
+</script>
 {% endblock %}