diff --git a/app/components/download-graph.js b/app/components/download-graph.js index 9078bbfcea..125e866729 100644 --- a/app/components/download-graph.js +++ b/app/components/download-graph.js @@ -1,22 +1,23 @@ import Component from '@ember/component'; -import $ from 'jquery'; // Colors by http://colorbrewer2.org/#type=diverging&scheme=RdBu&n=10 const COLORS = ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#92c5de', '#4393c3', '#2166ac', '#053061']; export default Component.extend({ classNames: 'graph-data', + resizeHandler: undefined, didInsertElement() { this._super(...arguments); - $(window).on('resize.chart', () => this.rerender()); - $(document).on('googleChartsLoaded', () => this.rerender()); + this.resizeHandler = () => this.rerender(); + window.addEventListener('resize', this.resizeHandler, false); + document.addEventListener('googleChartsLoaded', this.resizeHandler, false); }, willDestroyElement() { - $(window).off('resize.chart'); - $(document).off('googleChartsLoaded'); + window.removeEventListener('resize', this.resizeHandler); + document.removeEventListener('googleChartsLoaded', this.resizeHandler); }, didRender() { @@ -69,12 +70,8 @@ export default Component.extend({ } } - if (!data || !window.google || !window.googleChartsLoaded) { - this.$().hide(); - return; - } else { - this.$().show(); - } + let show = data && window.google && window.googleChartsLoaded; + this.element.style.display = show ? '' : 'none'; let myData = window.google.visualization.arrayToDataTable(data); diff --git a/app/components/google-jsapi.js b/app/components/google-jsapi.js index 646c5a2eec..db35067b8a 100644 --- a/app/components/google-jsapi.js +++ b/app/components/google-jsapi.js @@ -1,18 +1,26 @@ import Component from '@ember/component'; -import $ from 'jquery'; + +function createEvent(name) { + let event = document.createEvent('Event'); + event.initEvent(name, true, true); + return event; +} export default Component.extend({ tagName: '', didInsertElement() { - $.getScript('https://www.google.com/jsapi', function() { + let script = document.createElement('script'); + script.onload = () => { window.google.load('visualization', '1.0', { packages: ['corechart'], callback() { window.googleChartsLoaded = true; - $(document).trigger('googleChartsLoaded'); + document.dispatchEvent(createEvent('googleChartsLoaded')); }, }); - }); + }; + document.body.appendChild(script); + script.src = 'https://www.google.com/jsapi'; }, });