controllers/dashboard/histogram_controller.js

  1. import { Controller } from "@hotwired/stimulus"
  2. import { debounce } from "debounce"
  3. import { subscription } from "~/javascripts/store/mixins/subscription"
  4. import Histogram from "~/javascripts/dashboard/Histogram"
  6. /**
  7.  * @class Dashboard.HistogramController
  8.  * @classdesc Stimulus controller that handles the histogram data visualisation.
  9.  * @extends Controller
  10.  **/
  11. export default class extends Controller {
  12.   static targets = [ "loading", "visualisation" ]
  13.   static values = {
  14.     storeId: String,
  15.     xAxis: String,
  16.     yAxis: String
  17.   }
  19.   /** 
  20.    * Subscribe to the store. Debounces the method for handling window resizes
  21.    * 
  22.    * @instance
  23.    * @memberof Dashboard.HistogramController
  24.    **/
  25.   connect() {
  26.     subscription(this)
  27.     this.subscribe()
  28.     this.editStore("frameLoaded", true)
  29.     this.reconnect()
  30.     this.resize = debounce(this.resize, 250).bind(this)
  31.   }
  33.   /** 
  34.    * Handles a repeated Turbo visit to the dashboard page.
  35.    * 
  36.    * @instance
  37.    * @memberof Dashboard.HistogramController
  38.    **/
  39.   reconnect() {
  40.     if (this.store("selectedContextData")) {
  41.       this.storeUpdated("selectedContextData", this.storeIdValue)
  42.     }
  43.   }
  45.   /** 
  46.    * Checks if the visualisation has been created yet
  47.    * 
  48.    * @instance
  49.    * @memberof Dashboard.HistogramController
  50.    **/
  51.   isDataVizEmpty() {
  52.     return document.querySelector("[data-histogram='wrapper']").getElementsByTagName("svg").length === 0
  53.   }
  55.   /** 
  56.    * Creates a new instance of the Histogram class if not created, otherwise returns the instance of
  57.    * the class
  58.    * 
  59.    * @instance
  60.    * @memberof Dashboard.HistogramController
  61.    **/
  62.    histogram() {
  63.     if (this._histogram === undefined) {
  64.       this._windowWidth = window.innerWidth
  65.       this._histogram = new Histogram(
  66.         this.store("selectedContextData"),
  67.         this.store("contextSelected"),
  68.         "value",
  69.         "[data-histogram='wrapper']"
  70.       )
  71.     }
  72.     return this._histogram
  73.   }
  75.   /** 
  76.    * Handles a resize of the screen by width but ignores height changes. Deletes the current
  77.    * visualisation and the instance of the Histogram class so it will be created from scratch again.
  78.    * 
  79.    * @instance
  80.    * @memberof Dashboard.HistogramController
  81.    **/
  82.   resize() {
  83.     if (window.innerWidth === this._windowWidth) return
  85.     this._windowWidth = window.innerWidth
  86.     this._histogram = undefined
  87.     const wrapper = document.querySelector("[data-histogram='wrapper']")
  88.     wrapper.removeChild(wrapper.lastChild)
  89.     this.histogram().createDataVis()
  90.   }
  92.   /** 
  93.    * When the context is selected the data visualisation will either be creted or updated
  94.    * 
  95.    * @instance
  96.    * @memberof Dashboard.HistogramController
  97.    **/
  98.   storeUpdated(prop, storeId) {
  99.     if (this.store("fetchingDataVizData")) {
  100.       this.loadingTarget.style.display = "block"
  101.       this.visualisationTarget.style.display = "none"
  102.     } else {
  103.       if (prop !== "selectedContextData" && storeId === this.storeIdValue) return
  104.       this.loadingTarget.style.display = "none"
  105.       this.visualisationTarget.style.display = "block"
  106.       if(this.isDataVizEmpty()) {
  107.         this.histogram().createDataVis()
  108.       } else {
  109.         this.histogram().updateDataVis(this.store("selectedContextData"), this.store("contextSelected"))
  110.       }
  111.     }
  112.   }
  114.   /** 
  115.    * Unsubscribe from the store
  116.    * 
  117.    * @instance
  118.    * @memberof Dashboard.HistogramController
  119.    **/
  120.   disconnect() {
  121.     this.unsubscribe()
  122.   }
  123. }