controllers/dashboard/data_visualisation_controller.js

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