javascripts/dashboard/LineChart.js

  1. import d3 from "~/javascripts/dashboard/d3_modules"
  2. import { 
  3.   targetLineValues, minAxisValues, axisTextValues, axisMeasurementValues, allowClicks
  4. } from "~/javascripts/dashboard/utils"
  6. /**
  7.  * @class javascripts.dashboard.LineChart
  8.  * @classdesc d3.js line chart for Netlify build times
  9.  */
  10. export default class LineChart {
  11.   constructor(selectedData, selectedContext, yKey, xKey, dateKey, timeFormat, wrapper, tooltip) {
  12.     this.selectedData = selectedData
  13.     this.selectedContext = selectedContext
  14.     this.yKey = yKey
  15.     this.xKey = xKey
  16.     this.dateKey = dateKey
  17.     this.timeFormat = timeFormat
  18.     this.wrapper = d3.select(wrapper)
  19.     this.tooltip = d3.select(tooltip)
  20.     this.tooltipCircle = null
  21.     this.touchEvent = false
  22.     this.dv = {
  23.       yAccessor: null,
  24.       xAccessor: null,
  25.       dateAccessor: null,
  26.       deployIdAccessor: null,
  27.       yScale: null,
  28.       xScale: null,
  29.       yAxisGenerator: null,
  30.       xAxisGenerator: null,
  31.       lineGenerator: null,
  32.       bounds: null
  33.     }
  34.     this.dimensions = {
  35.       width: parseInt(this.wrapper.style("width"), 10),
  36.       height: 400,
  37.       margin: {
  38.         top: 15,
  39.         right: 10,
  40.         bottom: 40,
  41.         left: 35,
  42.       }
  43.     }
  44.     this.dimensions.boundedWidth = this.dimensions.width
  45.       - this.dimensions.margin.left
  46.       - this.dimensions.margin.right
  47.     this.dimensions.boundedHeight = this.dimensions.height
  48.       - this.dimensions.margin.top
  49.       - this.dimensions.margin.bottom
  50.   }
  52.   /** 
  53.    * Called the first time the page is loaded to setup the visualisation
  54.    *
  55.    * @instance
  56.    * @memberof javascripts.dashboard.LineChart
  57.    **/
  58.   createDataVis() {
  59.     this.initialiseAccessors()
  60.     this.setScales()
  61.     this.setGenerators()
  62.     this.initialiseDataVis()
  63.     this.kpiLineTransition()
  64.   }
  66.   /** 
  67.    * When the data set is updated this will cause the visualisation to animate
  68.    *
  69.    * @instance
  70.    * @memberof javascripts.dashboard.LineChart
  71.    **/
  72.   updateDataVis(selectedData, selectedContext) {
  73.     this.selectedData = selectedData
  74.     this.selectedContext = selectedContext
  76.     const data = this.selectedData
  77.     const updatedLine = this.dv.bounds.select("path").data(data)
  79.     this.setScales()
  80.     this.setGenerators()
  82.     updatedLine.attr("d", this.dv.lineGenerator(data))
  83.         .call(this.lineTransitionIn)
  84.     this.dv.bounds.select(".line-chart--y-axis")
  85.         .transition().duration(250)
  86.         .call(this.dv.yAxisGenerator)
  87.     this.dv.bounds.select(".line-chart--x-axis")
  88.         .transition().duration(250)
  89.         .call(this.dv.xAxisGenerator)
  90.     this.kpiLineTransition()
  91.   }
  93.   /** 
  94.    * Setup the accessors for the visualisation
  95.    *
  96.    * @instance
  97.    * @memberof javascripts.dashboard.LineChart
  98.    **/
  99.   initialiseAccessors() {
  100.     this.dv.yAccessor = d => d[this.yKey]
  101.     this.dv.xAccessor = d => d[this.xKey] 
  102.     this.dv.dateAccessor = d => new Date(d[this.dateKey])
  103.     this.dv.deployIdAccessor = d => d.deploy_id
  104.   }
  106.   /** 
  107.    * Setup the scales for the visualisation which can be updated as the data set changes
  108.    *
  109.    * @instance
  110.    * @memberof javascripts.dashboard.LineChart
  111.    **/
  112.   setScales() {
  113.     this.dv.yScale = d3.scaleLinear()
  114.       .domain([
  115.         0, d3.max(
  116.           [minAxisValues(this.selectedContext), d3.max(this.selectedData.map(data => data[this.yKey]))
  117.         ])
  118.       ])
  119.       .range([this.dimensions.boundedHeight, 0])
  120.       .nice()
  121.     this.dv.xScale = d3.scaleLinear()
  122.       .domain(d3.extent(this.selectedData, this.dv.xAccessor))
  123.       .range([0, this.dimensions.boundedWidth])
  124.   }
  126.   /** 
  127.    * Setup the generators for the visualisation which can be updated as the data set changes
  128.    *
  129.    * @instance
  130.    * @memberof javascripts.dashboard.LineChart
  131.    **/
  132.   setGenerators() {
  133.     this.dv.yAxisGenerator = d3.axisLeft()
  134.       .scale(this.dv.yScale)
  135.     this.dv.xAxisGenerator = d3.axisBottom()
  136.       .scale(this.dv.xScale)
  137.     if (this.selectedData.length < 10) {
  138.       this.dv.xAxisGenerator = this.dv.xAxisGenerator
  139.         .tickValues(this.selectedData.map(data => data[this.xKey]))
  140.         .tickFormat(d3.format(".0f"))
  141.     }
  142.     // Duration line generator with animation
  143.     this.dv.lineGenerator = d3.line()
  144.       .x(d => this.dv.xScale(this.dv.xAccessor(d)))
  145.       .y(d => this.dv.yScale(this.dv.yAccessor(d)))
  146.       .curve(d3.curveMonotoneX)
  147.   }
  149.   /** 
  150.    * Setup the structure of the visualisation
  151.    *
  152.    * @instance
  153.    * @memberof javascripts.dashboard.LineChart
  154.    **/
  155.   initialiseDataVis() {
  156.     // Draw canvas
  157.     const wrapperSvg = this.wrapper.append("svg")
  158.       .attr("width", this.dimensions.width)
  159.       .attr("height", this.dimensions.height)
  161.     // Draw the bounds
  162.     this.dv.bounds = wrapperSvg.append("g")
  163.         .style("transform", `translate(${
  164.           this.dimensions.margin.left
  165.         }px, ${
  166.           this.dimensions.margin.top
  167.         }px)`)
  169.     // Setup listener rect for mouse overs
  170.     const listeningRect = this.dv.bounds.append("rect")
  171.         .attr("class", "line-chart--listening-rect")
  172.         .attr("width", this.dimensions.boundedWidth)
  173.         .attr("height", this.dimensions.boundedHeight)
  174.         .on("touchstart", this.onTouchStart, { passive: false })
  175.         .on("mousemove touchmove", this.onMouseMove, { passive: true })
  176.         .on("mouseleave touchend", this.onMouseLeave)
  177.         .on("click", this.onClick)
  179.     // Setup tooltip when mousing over the listener rect
  180.     this.tooltipCircle = this.dv.bounds.append("circle")
  181.         .attr("class", "line-chart--tooltip-circle")
  182.         .attr("r", 4)
  184.     // Setup the data visualisation graph line
  185.     const line = this.dv.bounds.append("path")
  186.         .attr("class", "line-chart--path")
  187.         .attr("d", this.dv.lineGenerator(this.selectedData))
  188.         .call(this.lineTransitionIn)
  190.     // Setup axis
  191.     const yAxis = this.dv.bounds.append("g")
  192.         .attr("class", "line-chart--y-axis")
  193.         .call(this.dv.yAxisGenerator)
  195.     const xAxis = this.dv.bounds.append("g")
  196.         .attr("class", "line-chart--x-axis")
  197.         .call(this.dv.xAxisGenerator)
  198.           .style("transform", `translateY(${
  199.             this.dimensions.boundedHeight
  200.           }px)`)
  201.       .append("text")
  202.         .attr("class", "line-chart--x-axis-label")
  203.         .attr("x", this.dimensions.boundedWidth / 2)
  204.         .attr("y", this.dimensions.margin.bottom - 5)
  205.         .text(axisTextValues(this.selectedContext))
  207.     // Setup KPI lines to start from zero on y axis. These will animate into position with kpiLineTransition
  208.     const targetKpiLine = this.dv.bounds.append("line")
  209.         .attr("class", "line-chart--success-line")
  210.         .attr("x1", this.dv.xScale(this.dv.xAccessor(this.selectedData)))
  211.         .attr("x2", this.dimensions.boundedWidth)
  212.         .attr("y1", this.dv.yScale(0))
  213.         .attr("y2", this.dv.yScale(0))
  215.     const lowerBoundtKpiLine = this.dv.bounds.append("line")
  216.         .attr("class", "line-chart--fail-line")
  217.         .attr("x1", this.dv.xScale(this.dv.xAccessor(this.selectedData)))
  218.         .attr("x2", this.dimensions.boundedWidth)
  219.         .attr("y1", this.dv.yScale(0))
  220.         .attr("y2", this.dv.yScale(0))
  221.   }
  223.   /** 
  224.    * Animate new line drawing in
  225.    *
  226.    * @instance
  227.    * @memberof javascripts.dashboard.LineChart
  228.    **/
  229.   lineTransitionIn = path => {
  230.     path.transition().duration(500)
  231.         .attrTween("stroke-dasharray", this.tweenDashIn)
  232.   }
  234.   /** 
  235.    * Animate new line drawing in
  236.    *
  237.    * @instance
  238.    * @memberof javascripts.dashboard.LineChart
  239.    **/
  240.   tweenDashIn() {
  241.     const length = this.getTotalLength()
  242.     const i = d3.interpolateString(`0, ${length}`, `${length}, ${length}`)
  243.     return function (t) { return i(t) }
  244.   }
  246.   /** 
  247.    * Animate KPI lines
  248.    *
  249.    * @instance
  250.    * @memberof javascripts.dashboard.LineChart
  251.    **/
  252.   kpiLineTransition() {
  253.     const data = this.selectedData
  254.     const lineValues = targetLineValues(this.selectedContext)
  256.     this.dv.bounds.select(".line-chart--success-line")
  257.         .transition().duration(250)
  258.         .attr("x1", this.dv.xScale(this.dv.xAccessor(data)))
  259.         .attr("x2", this.dimensions.boundedWidth)
  260.         .attr("y1", this.dv.yScale(lineValues.successLineValue))
  261.         .attr("y2", this.dv.yScale(lineValues.successLineValue))
  263.     this.dv.bounds.select(".line-chart--fail-line")
  264.         .transition().duration(250)
  265.         .attr("x1", this.dv.xScale(this.dv.xAccessor(data)))
  266.         .attr("x2", this.dimensions.boundedWidth)
  267.         .attr("y1", this.dv.yScale(lineValues.failLineValue))
  268.         .attr("y2", this.dv.yScale(lineValues.failLineValue))
  269.   }
  271.   /** 
  272.    *  Prevent default on touch start which stops the entire page moving when a finger drags on the
  273.    * interface. On touch screens the tool tip stays on the screen after dragging but a brief touch will
  274.    * clear it.
  275.    *
  276.    * @instance
  277.    * @memberof javascripts.dashboard.LineChart
  278.    **/
  279.   onTouchStart = event => {
  280.     this.onMouseMove(event)
  281.     event.preventDefault()
  282.   }
  284.   /** 
  285.    *  Calculate which data point is selected on mouseover. Prevent when no builds present.
  286.    *
  287.    * @instance
  288.    * @memberof javascripts.dashboard.LineChart
  289.    **/
  290.   onMouseMove = event => {
  291.     if(this.selectedData[0].build_number === 0) return
  292.     
  293.     const closestDataset = this.closestDataPoint(event)
  294.     const closestXValue = this.dv.xAccessor(closestDataset)
  295.     const closestYValue = this.dv.yAccessor(closestDataset)
  297.     const formatDate = d3.timeFormat(this.timeFormat)
  298.     this.tooltip.select("[data-viz='date']")
  299.         .text(formatDate(this.dv.dateAccessor(closestDataset)))
  301.     this.tooltip.select("[data-viz='duration']")
  302.         .html(`${closestYValue}${axisMeasurementValues(this.selectedContext)}`)
  304.     const x = this.dv.xScale(closestXValue) + this.dimensions.margin.left
  305.     const y = this.dv.yScale(closestYValue) + this.dimensions.margin.top
  307.     this.tooltip.style("transform", `translate(`
  308.       + `calc( -50% + ${x}px),`
  309.       + `calc(-100% + ${y}px)`
  310.       + `)`)
  312.     this.tooltip.transition().duration(25)
  313.         .style("opacity", 1)
  315.     this.tooltipCircle.transition().duration(25)
  316.         .attr("cx", this.dv.xScale(closestXValue))
  317.         .attr("cy", this.dv.yScale(closestYValue))
  318.         .style("opacity", 1)
  319.   }
  321.   /** 
  322.    *  Handle mouse leave
  323.    *
  324.    * @instance
  325.    * @memberof javascripts.dashboard.LineChart
  326.    **/
  327.   onMouseLeave = () => {
  328.     this.tooltip.transition().duration(25)
  329.         .style("opacity", 0)
  330.     this.tooltipCircle.transition().duration(25)
  331.         .style("opacity", 0)
  332.   }
  334.   /** 
  335.    *  Open Netlify build logs for selected build. Prevent clicks when no builds present
  336.    *
  337.    * @instance
  338.    * @memberof javascripts.dashboard.LineChart
  339.    **/
  340.   onClick = event => {
  341.     if(this.selectedData[0].build_number === 0) return
  342.     if(!allowClicks(this.selectedContext)) return
  343.     
  344.     const deployId = this.dv.deployIdAccessor(this.closestDataPoint(event))
  345.     window.open(
  346.       `https://app.netlify.com/sites/jeffreyknox/deploys/${deployId}`, '_blank'
  347.     )
  348.   }
  350.   /** 
  351.    *  Get the closest data point based on mouse position in listening rect. Also handles a touch event
  352.    * for a finger dragging on the interface.
  353.    *
  354.    * @instance
  355.    * @memberof javascripts.dashboard.LineChart
  356.    **/
  357.   closestDataPoint(event) {
  358.     if (window.TouchEvent && event instanceof TouchEvent) event = event.touches[0];
  359.     const mousePosition = d3.pointer(event, event.target)
  360.     const hoveredDate = this.dv.xScale.invert(mousePosition[0])
  362.     const getDistanceFromHoveredDate = d => Math.abs(this.dv.xAccessor(d) - hoveredDate)
  363.     const closestIndex = d3.leastIndex(this.selectedData, (a, b) => (
  364.       getDistanceFromHoveredDate(a) - getDistanceFromHoveredDate(b)
  365.     ))
  366.     return this.selectedData[closestIndex]
  367.   }
  368. }