controllers/dashboard/core_vitals_summary_controller.js

  1. import { Controller } from "@hotwired/stimulus"
  2. import { debounce } from "debounce"
  3. import { subscription } from "~/javascripts/store/mixins/subscription"
  4. import { 
  5.   targetLineValues, metricsInPercentile, axisMeasurementValues, percentage
  6. } from "~/javascripts/dashboard/utils"
  7. import SingleStackedBar from "~/javascripts/dashboard/SingleStackedBar"
  9. /**
  10.  * @class Dashboard.CoreVitalsSummaryController
  11.  * @classdesc Stimulus controller that populates the mean core vitals score per vital type.
  12.  * @extends Controller
  13.  **/
  14. export default class extends Controller {
  15.   static targets = [
  16.     "lcp", "fid", "cls", "lcpLoader", "fidLoader", "clsLoader", "lcpVis", "fidVis", "clsVis"
  17.   ]
  18.   static values = {
  19.     loading: String,
  20.     storeId: String
  21.   }
  22.   static classes = [ "success", "warning", "error", "unavailable" ]
  24.   /** 
  25.    * Subscribe to the store.
  26.    * 
  27.    * @instance
  28.    * @memberof Dashboard.CoreVitalsSummaryController
  29.    **/
  30.   connect() {
  31.     subscription(this)
  32.     this.subscribe()
  33.     this.reconnect()
  34.     this.resize = debounce(this.resize, 250).bind(this)
  35.   }
  37.   /** 
  38.    * Handles a repeated Turbo visit to the dashboard page.
  39.    * 
  40.    * @instance
  41.    * @memberof Dashboard.CoreVitalsSummaryController
  42.    **/
  43.   reconnect() {
  44.     if (this.store("selectedDataVizData")) {
  45.       this.storeUpdated("selectedDataVizData", this.storeIdValue)
  46.     }
  47.   }
  49.   /** 
  50.    * Handles a resize of the screen by width but ignores height changes. Deletes the current
  51.    * visualisation and the instances of the stacked bar charts so they will be created from scratch again.
  52.    * 
  53.    * @instance
  54.    * @memberof Dashboard.CoreVitalsSummaryController
  55.    **/
  56.   resize() {
  57.     if (window.innerWidth === this._windowWidth) return
  59.     this._windowWidth = window.innerWidth
  60.     this.destroySingleStackedBarDisplay();
  62.     ["lcp", "fid", "cls"].forEach((context) => {
  63.       console.log(this.contextData(context))
  64.       this.updateContextDistribution(context, this.contextData(context))
  65.     })
  66.   }
  68.   /** 
  69.    * Shows the loading indicator for the mean core vital values and hides the stacked bar charts and
  70.    * then destroys them so they can be created from scratch again when the new data is fetched from
  71.    * the database.
  72.    * 
  73.    * @instance
  74.    * @memberof Dashboard.CoreVitalsSummaryController
  75.    **/
  76.    loadSummary(target, text) {
  77.     target.innerHTML = `${text} ${this.loadingValue}`
  78.     this.removeAlertColors(target)
  80.     this.singleStackedBarDisplay(false)
  81.     this.destroySingleStackedBarDisplay()
  82.   }
  84.   /** 
  85.    * Remove all of the color classes for the given target
  86.    * 
  87.    * @instance
  88.    * @memberof Dashboard.CoreVitalsSummaryController
  89.    **/
  90.    removeAlertColors(target) {
  91.     target.classList.remove(this.successClass, this.warningClass, this.errorClass, this.unavailableClass)
  92.   }
  94.   /** 
  95.    * Changes the visibility of the stacked bar charts to either show the data vis or a loading indicator
  96.    * 
  97.    * @instance
  98.    * @memberof Dashboard.CoreVitalsSummaryController
  99.    **/
  100.    singleStackedBarDisplay(hasData=true) {
  101.     let dataVis = hasData ? "block" : "none"
  102.     let loader = hasData ? "none" : "block"
  104.     this.lcpVisTarget.style.display = dataVis
  105.     this.fidVisTarget.style.display = dataVis
  106.     this.clsVisTarget.style.display = dataVis
  107.     this.lcpLoaderTarget.style.display = loader
  108.     this.fidLoaderTarget.style.display = loader
  109.     this.clsLoaderTarget.style.display = loader
  110.   }
  112.   /** 
  113.    * Destroy stacked bar charts for each context and set them to undefined so they will be created from
  114.    * scratch again
  115.    * 
  116.    * @instance
  117.    * @memberof Dashboard.CoreVitalsSummaryController
  118.    **/
  119.    destroySingleStackedBarDisplay() {
  120.     ["lcp", "fid", "cls"].forEach((context) => {
  121.       this[`${context}VisTarget`].innerHTML = ""
  122.       this[`_singleStackedBar_${context}`] = undefined
  123.     })
  124.   }
  126.   /** 
  127.    * Update the summary details for the mean values and stacked bar charts
  128.    * 
  129.    * @instance
  130.    * @memberof Dashboard.CoreVitalsSummaryController
  131.    **/
  132.    updateSummary(target, text, context) {
  133.     let contextData = this.contextData(context)
  135.     this.updateMeanCoreVitalsValue(target, text, context, contextData)
  136.     this.singleStackedBarDisplay()
  137.     this.updateContextDistribution(context, contextData)
  138.   }
  140.   /** 
  141.    * Get the data within the 75th percentile of all current results for the given context
  142.    * 
  143.    * @instance
  144.    * @memberof Dashboard.CoreVitalsSummaryController
  145.    **/
  146.    contextData(context) {
  147.     let data = this.store("selectedDataVizData").filter(data => data.metric === context)
  148.     return metricsInPercentile(data, "data_float", 0.75)
  149.   }
  151.   /** 
  152.    * Sets the text for the mean core vital for the given context and alters to color to indicate whether
  153.    * it's good, needs improvement or poor.
  154.    * 
  155.    * @instance
  156.    * @memberof Dashboard.CoreVitalsSummaryController
  157.    **/
  158.    updateMeanCoreVitalsValue(target, text, context, contextData) {
  159.     const meanCoreVital = this.calculateMeanCoreVital(contextData)
  160.     target.innerHTML = `${text} ${meanCoreVital} ${axisMeasurementValues(context)}`
  161.     this.removeAlertColors(target)
  162.     target.classList.add(this.alertColor(meanCoreVital, context))
  163.   }
  165.   /** 
  166.    * @instance
  167.    * @memberof Dashboard.CoreVitalsSummaryController
  168.    **/
  169.    calculateMeanCoreVital(contextData) {
  170.     const totals = contextData.reduce((acc , data) => {
  171.       return { count: acc.count + 1, dataFloat: acc.dataFloat + data.data_float }
  172.     }, { count: 0, dataFloat: 0 })
  173.     return totals.count === 0 ? "N/A" :
  174.                                 Math.round(((totals.dataFloat / totals.count) + Number.EPSILON) * 10000) / 10000
  175.   }
  177.   /** 
  178.    * Return the color depending on the time in relation to the KPI
  179.    * 
  180.    * @instance
  181.    * @memberof Dashboard.CoreVitalsSummaryController
  182.    **/
  183.    alertColor(value, context) {
  184.     const lineValues = targetLineValues(context)
  186.     if (value == "N/A") return this.unavailableClass
  187.     if (value <= lineValues.successLineValue) return this.successClass
  188.     if (value <= lineValues.failLineValue) return this.warningClass
  189.     return this.errorClass
  190.   }
  192.   /** 
  193.    * Update the datavisualisation showing the split of good, okay, bad for the context
  194.    * 
  195.    * @instance
  196.    * @memberof Dashboard.CoreVitalsSummaryController
  197.    **/
  198.    updateContextDistribution(context, contextData) {
  199.     const grouped = this.coreVitalsGroupingCount(context, contextData)
  200.     const data = this.dataForStackedBarChart(grouped)
  202.     if(this.isDataVizEmpty(context)) {
  203.       this.singleStackedBar(data, context).createDataVis()
  204.     } else {
  205.       this.singleStackedBar(data, context).updateDataVis(data, context)
  206.     }
  207.   }
  209.   /** 
  210.    * Get the total count of results plus the number of results within each context.
  211.    * 
  212.    * @instance
  213.    * @memberof Dashboard.CoreVitalsSummaryController
  214.    **/
  215.    coreVitalsGroupingCount(context, contextData) {
  216.     let result
  217.     const target = targetLineValues(context)
  218.     
  219.     return contextData.reduce((acc , data) => {
  220.       if (data.data_float <= target.successLineValue) {
  221.         result = "good"
  222.       } else if (data.data_float >= target.failLineValue) {
  223.         result = "poor"
  224.       } else {
  225.         result = "needsImprovement"
  226.       }
  227.       let preUpdate = { 
  228.         count: acc.count + 1, good: acc.good, needsImprovement: acc.needsImprovement, poor: acc.poor
  229.       }
  230.       preUpdate[result] += 1 
  231.       return preUpdate
  232.     }, { count: 0, good: 0, needsImprovement: 0, poor: 0 })
  233.   }
  235.   /** 
  236.    * Get the percentage for each context. The cumulative value informs the data viz at which x axis value
  237.    * the bar should start at. The bar class modifier is used in the CSS to change the bar colour
  238.    * 
  239.    * @instance
  240.    * @memberof Dashboard.CoreVitalsSummaryController
  241.    **/
  242.   dataForStackedBarChart(groupedCounts) {
  243.     const good = percentage(groupedCounts.count, groupedCounts.good)
  244.     const needsImprovement = percentage(groupedCounts.count, groupedCounts.needsImprovement)
  245.     const poor = percentage(groupedCounts.count, groupedCounts.poor)
  246.     return [
  247.       { percentage: good, cumulative: 0, barClassModifier: "good" },
  248.       { percentage: needsImprovement, cumulative: good, barClassModifier: "needsImprovement" },
  249.       { percentage: poor, cumulative: (good + needsImprovement), barClassModifier: "poor" }
  250.     ]
  251.   }
  253.   /** 
  254.    * Checks if the visualisation has been created yet
  255.    * 
  256.    * @instance
  257.    * @memberof Dashboard.CoreVitalsSummaryController
  258.    **/
  259.    isDataVizEmpty(context) {
  260.     return document.querySelector(`[data-stacked-bar-${context}='wrapper']`).getElementsByTagName("svg").length === 0
  261.   }
  263.   /** 
  264.    * Creates a new instance of the SingleStackedBar class if not created, otherwise returns the instance
  265.    * of the class
  266.    * 
  267.    * @instance
  268.    * @memberof Dashboard.CoreVitalsSummaryController
  269.    **/
  270.    singleStackedBar(data, context) {
  271.     if (this[`_singleStackedBar_${context}`] === undefined) {
  272.       this._windowWidth = window.innerWidth
  273.       this[`_singleStackedBar_${context}`] = new SingleStackedBar(
  274.         data,
  275.         this.store("contextSelected"),
  276.         `[data-stacked-bar-${context}='wrapper']`
  277.       )
  278.     }
  279.     return this[`_singleStackedBar_${context}`]
  280.   }
  282.   /** 
  283.    * Triggered by the store whenever any store data changes.
  284.    * 
  285.    * @instance
  286.    * @memberof Dashboard.CoreVitalsSummaryController
  287.    **/
  288.   storeUpdated(prop, storeId) {
  289.     if (this.store("fetchingDataVizData")) {
  290.       this.loadSummary(this.lcpTarget, "LCP")
  291.       this.loadSummary(this.fidTarget, "FID")
  292.       this.loadSummary(this.clsTarget, "CLS")
  293.     }
  294.     if (prop === "selectedDataVizData" && storeId === this.storeIdValue) {
  295.       this.updateSummary(this.lcpTarget, "LCP ...", "lcp")
  296.       this.updateSummary(this.fidTarget, "FID ...", "fid")
  297.       this.updateSummary(this.clsTarget, "CLS ...", "cls")
  298.     }
  299.   }
  301.   /** 
  302.    * Unsubscribe from the store
  303.    * 
  304.    * @instance
  305.    * @memberof Dashboard.MeanBuildTimesController
  306.    **/
  307.   disconnect() {
  308.     this.unsubscribe()
  309.   }
  310. }