Realtime JS chart in LiveView with hooks - what do you think?

alvises · April 18, 2020, 5:05pm

Looking at the new Phoenix 1.5-rc0, the LiveDashboard seems to use a similar method

github.com/phoenixframework/phoenix_live_dashboard

assets/js/metrics_live/index.js

main


      
            // Increment the new overall totals
            dataset.agg.count++
            dataset.agg.total += y
          
            // Push the value
            dataset.data.push(y)
          
            // Push min/max/avg
            if (dataset.last.min === null || y < dataset.last.min) { dataset.last.min = y }
            dataset.agg.min.push(dataset.last.min)
          
            if (dataset.last.max === null || y > dataset.last.max) { dataset.last.max = y }
            dataset.agg.max.push(dataset.last.max)
          
            dataset.agg.avg.push((dataset.agg.total / dataset.agg.count))
          
            return dataset
          }
          
          __maybePruneDatasets() {
            let currentSize = this.datasets[0].data.length

https://github.com/phoenixframework/phoenix_live_dashboard/blob/master/lib/phoenix/live_dashboard/live/chart_component.ex#L34