| <!DOCTYPE html> |
| <!-- |
| Copyright 2016 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| |
| <polymer-element name="base-chart" attributes="chartTitle units flotData"> |
| <script> |
| 'use strict'; |
| Polymer('base-chart', { |
| getChartOptions: function() { |
| return {}; |
| }, |
| |
| /** |
| * Initializes the summary-chart element and its properties. |
| * This is a custom element lifecycle callback that's called when an |
| * instance of the element is "ready". |
| */ |
| ready: function() { |
| console.debug('ready', this.chartTitle, Date.now()); |
| this.chartOptions = this.getChartOptions(); |
| // Set up chart resize handler. |
| this.resizeHandler = this.onResize.bind(this); |
| this.resizeTimer = null; |
| this.drawable = true; |
| window.addEventListener('resize', this.resizeHandler); |
| }, |
| |
| /** |
| * Initializes the chart when it's actually attached to the DOM. |
| * This is a custom element lifecycle callback. |
| */ |
| attached: function() { |
| console.debug('attached', this.chartTitle, Date.now()); |
| if (this.flotData) { |
| this.updateChart(); |
| } else { |
| console.debug('attached', this.chartTitle, '!this.flotData'); |
| } |
| }, |
| |
| /** |
| * Updates the state if the chart is removed from view. |
| */ |
| leftView: function() { |
| console.debug('leftView', this.chartTitle, Date.now()); |
| this.drawable = false; |
| window.removeEventListener('resize', this.resizeHandler); |
| }, |
| |
| /** |
| * Plots the data on the chart. |
| */ |
| updateChart: function() { |
| if (!this.drawable) { |
| console.debug('updateChart', this.chartTitle, '!drawable'); |
| return; |
| } |
| this.chart = $.plot(this.$.plot, this.flotData, this.chartOptions); |
| }, |
| |
| /** |
| * Updates the state when the flotData property is changed. |
| */ |
| flotDataChanged: function() { |
| this.updateChart(); |
| }, |
| |
| /** |
| * Sets a timer to resize the chart after certain time delay. |
| * The resize timer variable and timeout are used because we want to |
| * void resizing graph until the user has stopped resizing. |
| * @param {Event} event |
| */ |
| onResize: function(event) { |
| clearTimeout(this.resizeTimer); |
| this.resizeTimer = setTimeout(this.resizeGraph.bind(this), 100); |
| }, |
| |
| /** |
| * Resizes the chart if it's present. |
| */ |
| resizeGraph: function() { |
| if (!this.chart) { |
| return; |
| } |
| this.updateChart(); |
| } |
| }); |
| </script> |
| </polymer-element> |
