javascripts/dashboard/SingleStackedBar.js

  1. import d3 from "~/javascripts/dashboard/d3_modules"
  3. /**
  4.  * @class javascripts.dashboard.SingleStackedBar
  5.  * @classdesc d3.js single stacked bar chart
  6.  */
  7. export default class SingleStackedBar {
  8.   constructor(selectedData, selectedContext, wrapper) {
  9.     this.selectedData = selectedData
  10.     this.selectedContext = selectedContext
  11.     this.wrapper = d3.select(wrapper)
  12.     this.dv = {
  13.       xScale: null
  14.     }
  15.     this.dimensions = {
  16.       width: parseInt(this.wrapper.style("width"), 10),
  17.       height: 93,
  18.       margin: {
  19.         top: 0,
  20.         right: 0,
  21.         bottom: 0,
  22.         left: 0,
  23.       }
  24.     }
  25.     this.dimensions.boundedWidth = this.dimensions.width
  26.       - this.dimensions.margin.left
  27.       - this.dimensions.margin.right
  28.     this.dimensions.boundedHeight = this.dimensions.height
  29.       - this.dimensions.margin.top
  30.       - this.dimensions.margin.bottom
  31.   }
  33.   /** 
  34.    * Called the first time the page is loaded to setup the visualisation
  35.    *
  36.    * @instance
  37.    * @memberof javascripts.dashboard.SingleStackedBar
  38.    **/
  39.   createDataVis() {
  40.     this.setScales()
  41.     this.initialiseDataVis()
  42.     this.drawDataVis()
  43.   }
  45.   /** 
  46.    * When the data set is updated this will cause the visualisation to animate
  47.    *
  48.    * @instance
  49.    * @memberof javascripts.dashboard.SingleStackedBar
  50.    **/
  51.   updateDataVis(selectedData, selectedContext) {
  52.     this.selectedData = selectedData
  53.     this.selectedContext = selectedContext
  55.     this.redrawDataVis()
  56.   }
  58.   /** 
  59.    * Setup the scales for the visualisation
  60.    *
  61.    * @instance
  62.    * @memberof javascripts.dashboard.SingleStackedBar
  63.    **/
  64.   setScales() {
  65.     this.dv.xScale = d3.scaleLinear()
  66.       .domain([0, 100])
  67.       .range([0, this.dimensions.boundedWidth])
  68.   }
  70.   /** 
  71.    * Setup the wrapper and the bounds for the visualisation
  72.    *
  73.    * @instance
  74.    * @memberof javascripts.dashboard.SingleStackedBar
  75.    **/
  76.   initialiseDataVis() {
  77.     const wrapper = this.wrapper
  78.       .append("svg")
  79.         .attr("width", this.dimensions.width)
  80.         .attr("height", this.dimensions.height)
  82.     this.dv.bounds = wrapper.append("g")
  83.         .style(
  84.           "transform",
  85.           `translate(${this.dimensions.margin.left}px, ${this.dimensions.margin.top}px)`
  86.         )
  87.   }
  89.   /** 
  90.    * Animate the rendering of the stack bar chart, the legend and the percentage values within the
  91.    * legend
  92.    *
  93.    * @instance
  94.    * @memberof javascripts.dashboard.SingleStackedBar
  95.    **/
  96.   drawDataVis() { 
  97.     // Initially set bars in position with no width
  98.     this.dv.bounds.selectAll("rect")
  99.       .data(this.selectedData)
  100.       .enter().append("rect")
  101.       .attr("class", d => `single-stacked-bar--${d.barClassModifier}`)
  102.       .attr("x", d => this.dv.xScale(d.cumulative))
  103.       .attr("y", 0)
  104.       .attr("height", 53)
  105.       .attr("width", 0)
  107.     // Transition in the bar width 1 bar at a time with a delay set so the next bar waits for the
  108.     // preceeding bar to finish animating 
  109.     this.dv.bounds.selectAll("rect")
  110.       .data(this.selectedData)
  111.       .transition()
  112.       .ease(d3.easeLinear)
  113.       .delay(d => (d.cumulative / 100) * 250)
  114.       .duration(d => (d.percentage / 100) * 250)
  115.       .attr("width", d => this.dv.xScale(d.percentage))
  117.     this.dv.bounds.selectAll(".single-stacked-bar-legend")
  118.       .data(this.selectedData)
  119.       .enter().append("rect")
  120.       .attr("class", d => `single-stacked-bar-legend single-stacked-bar-legend--${d.barClassModifier}`)
  121.       .attr("x", (d, i) => i * 90)
  122.       .attr("y", 63)
  123.       .attr("height", 30)
  124.       .attr("width", 60)
  126.       this.dv.bounds.selectAll('.single-stacked-bar-percentage')
  127.       .data(this.selectedData)
  128.       .enter().append("text")
  129.       .attr("class", "single-stacked-bar-percentage")
  130.       .attr("x", (d, i) => (i * 90) + 30)
  131.       .attr("y", 82)
  132.       .text(d => `${d.percentage} %`)
  133.   }
  135.   /** 
  136.    * Animate the bars transitioning to the updated data set and change the percentage values in the
  137.    * legend
  138.    *
  139.    * @instance
  140.    * @memberof javascripts.dashboard.SingleStackedBar
  141.    **/
  142.   redrawDataVis() {
  143.     this.dv.bounds.selectAll("rect")
  144.       .data(this.selectedData)
  145.       .transition()
  146.       .duration(250)
  147.       .ease(d3.easeCubicInOut)
  148.       .attr("x", d => this.dv.xScale(d.cumulative))
  149.       .attr("width", d => this.dv.xScale(d.percentage))
  151.     this.dv.bounds.selectAll(".single-stacked-bar-percentage")
  152.       .data(this.selectedData)
  153.       .transition()
  154.       .duration(250)
  155.       .ease(d3.easeCubicInOut)
  156.       .text(d => `${d.percentage} %`)
  157.   }
  158. }