File indexing completed on 2024-06-02 06:07:00 

0001 !(function (d3) {
0002 
0003   $("#payoutyear").empty();
0004   // new memeber project stati
0005   var parseTime = d3.timeParse("%Y%m");
0006   var svgLine = d3.select("#payoutyear")
0007     .append("svg")
0008     .attr("width", 1200)
0009     .attr("height", 250);
0010 
0011   var marginLine = { top: 30, right: 50, bottom: 50, left: 30 },
0012     widthLine = +svgLine.attr("width") - marginLine.left - marginLine.right,
0013     heightLine = +svgLine.attr("height") - marginLine.top - marginLine.bottom,
0014     labelPadding = 3;
0015 
0016   var xLine = d3.scaleTime().range([0, widthLine]);
0017   var g = svgLine.append("g")
0018     .attr("transform", "translate(" + marginLine.left + "," + marginLine.top + ")");
0019 
0020   d3.json("/backend/index/getpayoutyear", function (error, data) {
0021     if (error) throw error;
0022     data = data.results;
0023     data = data.slice(-20);
0024 
0025     // format the data
0026     data.forEach(function (d) {
0027       d.date = parseTime(d.yearmonth);
0028       d.amount = +d.amount;
0029     });
0030 
0031     data.columns = ['date', 'amount'];
0032     var series = data.columns.slice(1).map(function (key) {
0033       return data.map(function (d) {
0034         return {
0035           key: key,
0036           date: d.date,
0037           value: d[key]
0038         };
0039       });
0040     });
0041 
0042     xLine.domain([data[0].date, data[data.length - 1].date]);
0043     var yLine = d3.scaleLinear()
0044       .domain([d3.min(series, function (s) { return d3.min(s, function (d) { return d.value; }); }), d3.max(series, function (s) { return d3.max(s, function (d) { return d.value; }); })])
0045       .range([heightLine, 0]);
0046 
0047     var zLine = d3.scaleOrdinal(d3.schemeCategory10);
0048 
0049     g.append("g")
0050       .attr("class", "axis axis--x")
0051       .attr("transform", "translate(0," + heightLine + ")")
0052       .call(d3.axisBottom(xLine).ticks(data.length).tickFormat(d3.timeFormat("%Y-%m")))
0053       .selectAll("text")
0054       .style("text-anchor", "end")
0055       .attr("dx", "-.8em")
0056       .attr("dy", ".15em")
0057       .attr("transform", "rotate(-65)");
0058 
0059 
0060     var serie = g.selectAll(".serie")
0061       .data(series)
0062       .enter().append("g")
0063       .attr("class", "serie");
0064 
0065     serie.append("path")
0066       .attr("class", "line")
0067       .style("stroke", function (d) { return zLine(d[0].key); })
0068       .attr("d", d3.line()
0069         .x(function (d) { return xLine(d.date); })
0070         .y(function (d) { return yLine(d.value); }));
0071 
0072     var label = serie.selectAll(".label")
0073       .data(function (d) { return d; })
0074       .enter().append("g")
0075       .attr("class", "label")
0076       .attr("transform", function (d, i) { return "translate(" + xLine(d.date) + "," + yLine(d.value) + ")"; });
0077 
0078     label.append("text")
0079       .attr("dy", ".35em")
0080       .text(function (d) { return d.value; })
0081       .filter(function (d, i) { return i === data.length - 1; })
0082 
0083 
0084     const newText = label.selectAll('text');
0085     const bbox = newText.node().getBBox();
0086 
0087     label.append('rect', 'text')
0088       .datum(() => bbox)
0089       .attr('x', d => (d.x - labelPadding))
0090       .attr('y', d => (d.y - labelPadding))
0091       .attr('width', d => (d.width + (2 * labelPadding)))
0092       .attr('height', d => (d.height + (2 * labelPadding)));
0093 
0094     label.append("text")
0095       .attr("dy", ".35em")
0096       .text(function (d) { return d.value; })
0097       .filter(function (d, i) { return i === data.length - 1; })
0098       .append("tspan")
0099       .attr("class", "label-key")
0100       .text(function (d) { return " " + d.key; });
0101 
0102   });
0103 
0104 
0105 })(d3);