controllers/dashboard/select_context_controller.js

  1. import { Controller } from "@hotwired/stimulus"
  2. import { subscription } from "~/javascripts/store/mixins/subscription"
  3. import { metricsInPercentile } from "~/javascripts/dashboard/utils"
  5. /**
  6.  * @class Dashboard.SelectContextController
  7.  * @classdesc Stimulus controller that handles the buttons for the various contexts.
  8.  * @extends Controller
  9.  **/
  10. export default class extends Controller {
  11.   static targets = [ "button" ]
  12.   static values = {
  13.     contextKey: String,
  14.     defaultContext: String,
  15.     storeId: String
  16.   }
  18.   /** 
  19.    * Subscribe to the store.
  20.    * 
  21.    * @instance
  22.    * @memberof Dashboard.SelectContextController
  23.    **/
  24.   connect() {
  25.     subscription(this)
  26.     this.subscribe()
  27.     this.reconnect()
  28.   }
  30.   /** 
  31.    * Handles a repeated Turbo visit to the dashboard page.
  32.    * 
  33.    * @instance
  34.    * @memberof Dashboard.SelectContextController
  35.    **/
  36.   reconnect() {
  37.     if (this.store("selectedDataVizData")) {
  38.       this.storeUpdated("selectedDataVizData", this.storeIdValue)
  39.     }
  40.   }
  42.   /** 
  43.    * Sets the selected class on the clicked button and updates the store with the context clicked and
  44.    * the data for the context
  45.    * 
  46.    * @instance
  47.    * @memberof Dashboard.SelectContextController
  48.    **/
  49.   contextClicked(event) {    
  50.     this.buttonTargets.forEach(buttonTarget => buttonTarget.classList.remove("selected"))
  51.     event.target.classList.add("selected")
  52.     const buttonText = event.target.innerHTML
  53.     this.editStore("contextSelected", this.contextSelected(buttonText))
  54.     this.editStore("selectedContextData", this.selectContextData(this.contextSelected(buttonText)))
  55.   }
  57.   /** 
  58.    * Get the data for the selected context. Also set the value to be used on the x axis.
  59.    * If there is no data for the context then return a dummy object in an array.
  60.    * 
  61.    * @instance
  62.    * @memberof Dashboard.SelectContextController
  63.    **/
  64.   selectContextData(context) {
  65.     let selectedDataVizData = !this.store("selectedDataVizData") ? [] : this.store("selectedDataVizData") 
  66.     let contextData =  selectedDataVizData.filter(data => data[this.contextKeyValue] === context)
  67.     
  68.     if(this.storeIdValue === "builds_") {
  69.       if(contextData.length === 0) return [{ deploy_time: 0, build_number: 0 }]
  70.       return contextData.map((data, index) => Object.assign(data, { build_number: index + 1 }))
  71.     } else if (this.storeIdValue === "vitals_") {
  72.       if (this.store("frameSelected") === undefined) this.editStore("frameSelected", "daily")
  74.       contextData = metricsInPercentile(contextData, "data_float", 0.75)
  75.       if (this.store("frameSelected") === "daily") {
  76.         if(contextData.length === 0) return [{ value: 0, day: 0 }]
  78.         const groupSumCount = contextData.reduce((acc , data) => {
  79.           if (!acc.get(data.date)) {
  80.             acc.set(
  81.               data.date, { date: data.date, metric: data.metric, data_float: data.data_float, count: 1 }
  82.             )
  83.             return acc
  84.           }
  85.           const dateContent = acc.get(data.date)
  86.           dateContent.data_float += data.data_float
  87.           dateContent.count += 1
  88.           return acc
  89.         }, new Map())
  91.         for (let result of groupSumCount.values()) {
  92.           result.value = Math.round(((result.data_float/result.count) + Number.EPSILON) * 10000) / 10000
  93.         }
  95.         return [...groupSumCount.values()].map((data) => {
  96.           return Object.assign(data, { day: new Date(data.date).getDate() })
  97.         })
  98.       } else if (this.store("frameSelected") === "frequency") {
  99.         if(contextData.length === 0) return []
  100.         return contextData.map(data => { 
  101.           return { value: data.data_float }
  102.         })
  103.       }
  104.     }
  105.   }
  107.   /** 
  108.    * Use the button text to set the context.
  109.    * 
  110.    * @instance
  111.    * @memberof Dashboard.SelectContextController
  112.    **/
  113.   contextSelected(buttonText) {
  114.     return buttonText.toLowerCase().replace(" ", "-")
  115.   }
  117.   /** 
  118.    * Triggered by the store whenever any store data changes. In this case it checks for
  119.    * selectedDataVizData to be set and then sets production as the initially selected context
  120.    * button.
  121.    * 
  122.    * @instance
  123.    * @memberof Dashboard.SelectContextController
  124.    **/
  125.   storeUpdated(prop, storeId) {
  126.     if ((prop === "frameLoaded" || prop === "selectedDataVizData") && storeId === this.storeIdValue) {
  127.       this.editStore("contextSelected", this.contextSelected(this.defaultContextValue))
  128.       this.editStore("selectedContextData", this.selectContextData(this.defaultContextValue))
  129.       this.buttonTargets.forEach(buttonTarget => buttonTarget.classList.remove("selected"))
  130.       this.buttonTargets[0].classList.add("selected")
  131.     }
  132.   }
  134.   /** 
  135.    * Unsubscribe from the store
  136.    * 
  137.    * @instance
  138.    * @memberof Dashboard.SelectContextController
  139.    **/
  140.   disconnect() {
  141.     this.unsubscribe()
  142.   }
  143. }