function x_axis_qtr(data, svg, { width, height, xDomain, fontSize, marginLeft, marginRight, marginTop = 40, marginBottom, xRange = [marginLeft, (width - marginRight)], add_silent = false, nolabels = false, silentRange = [marginLeft, (width - marginRight)] //sharedRange = } = {}, contg) { //let numvals = d3.map() console.log(`QTR: H: ${height} | W: ${width} | R0: ${xRange[0]} | R1: ${xRange[1]} | MR: ${marginRight} | ML ${marginLeft} | NL ${nolabels}`) //// Constructor //// let self = this; if(contg == undefined) contg = svg; self.xRange = xRange self.marginLeft = marginLeft self.height = height if (xDomain === undefined) this.xDomain = d3.extent(data, d => d.xd) const random_id = Math.floor(Math.random()*1000); const gname = `labelsg_${random_id}` self.xg = contg.append("g").classed("xaxis", true).attr("name", gname) //// Accessor functions //// self.setWidth = function(ww) { self.width = ww; self.xRange = [self.marginLeft, (width - marginRight)] } self.setSharedRange = function(rr) { self.xRange = rr self.draw() } self.getSharedRange = function() { return self.xRange } self.getDomain = function() { return xDomain; } self.setMargins = function(t, r, b, l) { if(t !== undefined) marginTop = t; if(r !== undefined) marginRight = r; //if(b !== undefined) marginTop = b; if(l !== undefined) marginLeft = l; self.xRange = [marginLeft, ((width - marginRight))] } self.setHeight = function(h) { height = h; } self.setMarginTop = function(mt) { marginTop = mt } self.set_max_domain = function(newmax) { xDomain[1] = newmax; } //// Draw //// self.draw = function() { let ggql, ggq, tVal, lVal, qheight = 0; self.xg.selectAll("*").remove() self.xScale = d3.scaleUtc(self.xDomain, self.xRange); if(add_silent) { let silentdomain = data.map(d => d.dtid) self.silentScale = d3.scaleBand(silentdomain, self.xRange).align(0).paddingOuter(0) } let t1Y = +d3.timeFormat("%Y")(self.xDomain[0]) let wdth = self.xScale(d3.timeParse("%Y-%m-%d")(`${t1Y}-04-01`)) - self.xScale(d3.timeParse("%Y-%m-%d")(`${t1Y}-01-01`)) self.xg.append("g").attr("class", "gridxq") if(wdth > 30) { const tickVals = ["01-01", "04-01", "07-01", "09-30"] const labelVals = ["02-15", "05-17", "08-16", "11-16"] tVal = [] lVal = [] for(let y = +d3.timeFormat("%Y")(this.xDomain[0]); +y <= d3.timeFormat("%Y")(this.xDomain[1]); y++ ) { for(let i = 0; i < labelVals.length; i++) { let tckdate = d3.timeParse("%Y-%m-%d")(`${y}-${tickVals[i]}`); let labdate = d3.timeParse("%Y-%m-%d")(`${y}-${labelVals[i]}`); if(labdate >= this.xDomain[0] && tckdate <= this.xDomain[1]) { if(tckdate < this.xDomain[0]) this.xDomain[0] = tckdate if(labdate > this.xDomain[1]) this.xDomain[1] = labdate tVal.push(tckdate); lVal.push(labdate) } } } let xAxisQt; xAxisQt = d3.axisBottom(self.xScale) .tickValues(tVal) .tickSizeOuter(0) .tickSizeInner(10) .tickFormat("") ggq = this.xg.append("g") .attr("name", "ggq") .classed("qtrs", true) .call(xAxisQt); ggq.selectAll(".tick line") .attr("y2", (d, i) => { let md = +d3.timeFormat("%m-%d")(d) return (md == "01-01" ? 18 : 8) }) .style("stroke", "#BCBCBC") let xAxisQl if(nolabels) { xAxisQl = d3.axisBottom(self.xScale).tickValues([]) } else { xAxisQl = d3.axisBottom(self.xScale) .tickValues(lVal) .tickSize(0) .tickFormat((d) => { let mm = (+d3.timeFormat("%m")(d)+1)/3 return `Q${mm}` }) } ggql = self.xg.append("g") .attr("name", `ggql_${random_id}`) .classed("qtrsl", true) .call(xAxisQl); ggql.selectAll(".tick text") .style("font-family", "Arial") .style("font-size", "11pt") .style("fill", "#ABABAB") ggq.selectAll(".qtrs>.tick line") .style("stroke", "#BCBCBC") ggq.select(".domain").style("stroke", "#888888") ggql.select(".domain").remove(); const qbox = get_bbox(svg, `ggql_${random_id}`) qheight = qbox.height } const lastyear = d3.timeFormat("%Y")(this.xDomain[1]) const lastmonth = d3.timeFormat("%m")(this.xDomain[1]) let xAxisY, xAxisY2, xAxisY3; if(nolabels) { xAxisY = d3.axisBottom(self.xScale).tickValues([]) } else { xAxisY = d3.axisBottom(self.xScale) .ticks(d3.timeMonth.every(1), "%Y") .tickSize(qheight * 2) .tickFormat((d) => { let yy = d3.timeFormat("%Y")(d) let mm = d3.timeFormat("%m")(d) let labpos = (yy == lastyear ? (lastmonth > 2 & lastmonth < 6 ? `0${lastmonth}` : "06" ) : "06") return (mm == labpos ? d3.timeFormat("%Y")(d) : "") }) let t1 = data[0].xd let tlast = data[data.length-1].xd let m1 = +d3.timeFormat("%m")(t1) let mlast = +d3.timeFormat("%m")(tlast) let y1 = d3.timeFormat("%Y")(t1) let ylast = d3.timeFormat("%Y")(tlast) xAxisY2 = d3.axisBottom(self.xScale) .ticks(d3.timeYear.every(1), "%Y") .tickSizeInner(qheight * 2) .tickSizeOuter(0) .tickFormat((d) => { let yrstring = d3.timeFormat("%Y")(d) let mm = d3.timeFormat("%m")(d) return (yrstring == ylast && mlast < 4 ? "" : yrstring) }) if(m1 < 10) { let xt1 = d3.timeParse("%Y-%m-%d")(`${y1}-${(m1 <= 7 ? "07" : m1)}-02`) xAxisY3 = d3.axisBottom(self.xScale) .tickValues([xt1]) .tickFormat(d => d3.timeFormat("%Y")(d)) .tickSize(qheight * 2) let ggy3 = self.xg.append("g") .attr("name", `ggxyrs3_${random_id}`) .classed("yrs", true) .call(xAxisY3); ggy3.selectAll(".tick line") .style("opacity", 0) ggy3.selectAll(".tick text") .attr("transform", (d) => { return `translate(0, ${qheight * -1})` }) .style("font-family", "Arial") .style("font-size", "14pt") .style("fill", "#ABABAB") .style("stroke-opacity", "0.4") .attr('text-anchor', "middle") ggy3.select(".domain").remove(); ggy3.attr("transform", `translate(0, ${height - self.lheight})`) } } let w6m = self.xScale(d3.timeParse("%Y-%m-%d")(`${t1Y}-07-02`)) - self.xScale(d3.timeParse("%Y-%m-%d")(`${t1Y}-01-01`)) let ggy2 = self.xg.append("g") .attr("name", `ggxyrs2_${random_id}`) .classed("yrs", true) .call(xAxisY2) ggy2.selectAll(".tick text") .attr("transform", (d) => { let pos1 = self.xScale(d) let rmax = self.xScale.range()[1] let mv = ((pos1 + w6m) < rmax ? w6m : rmax - pos1) return `translate(${mv }, ${qheight * -1})` }) .style("font-family", "Arial") .style("font-size", "14pt") .style("fill", "#ABABAB") .style("stroke-opacity", (d) => { return "0.4" }) .attr('text-anchor', (d) => { let pos1 = self.xScale(d) let rmax = self.xScale.range()[1] return ((pos1 + w6m) < rmax ? "middle": "end") }) ggy2.selectAll(".tick line") .style("stroke", "#BCBCBC") .style("stroke-width", d => (wdth > 30 ? 4 : 1) ) //ggy2.select(".domain").remove(); const ybox = get_bbox(svg, `ggxyrs2_${random_id}`) // const xaxbox = get_bbox(svg, gname) self.lheight = qheight + ybox.height //ggy.attr("transform", `translate(0, ${height - self.lheight})`) ggy2.attr("transform", `translate(0, ${height - self.lheight})`) if(wdth > 30) { ggql.attr("transform", `translate(0, ${height - self.lheight})`) ggq.attr("transform", `translate(0, ${height - self.lheight})`) let gridq = self.xg.selectAll(".gridxq") .call(d3.axisBottom(self.xScale) .tickValues(tVal) .tickSizeInner(height - self.lheight - marginTop) .tickSizeOuter(0) .tickFormat("") ) .attr("transform", `translate(0, ${marginTop})`); } else { console.log(`WIDTH LESS THAN 30: ${wdth}`) let gridq = self.xg.selectAll(".gridxq") .call(d3.axisBottom(self.xScale) .ticks(d3.timeYear.every(1), "%Y") .tickSizeInner(height - self.lheight - marginTop) .tickSizeOuter(0) .tickFormat("") ) .attr("transform", `translate(0, ${marginTop})`); } self.xg.select(".gridxq .domain").remove(); self.xg.selectAll(".gridxq line") .style("stroke", "#BCBCBC") .style("stroke-opacity", "0.4") .style("stroke-width", (d) => { let mm = d3.timeFormat("%m")(d) let ww; if(wdth < 30){ return 2; } else { return (mm == 1 && wdth > 30 ? 4 : 0.5) } }) .style("shape-rendering", "crispEdges") } }