ralphsmith80
commented
7 years ago @iSuslov I was able to get this working in 2.0, but I could not get the class mixin functionality to work which lead me here. I have no experience with Polymer 1.0 so it took a bit of digging and trial to find that 1.0 syntax works. In any case here's an element that wraps google-chart to make it responsive.
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="../bower_components/google-chart/google-chart.html">
<link rel="import" href="shared-styles.html">
<dom-module id="google-chart-responsive">
<template>
<style include="shared-styles">
#googleChart {
height: 500px;
width: 100%;
}
</style>
<google-chart
type='area'
id='googleChart'
options='{"title": "Distribution of days in 2001Q1"}'
data="[[data]]">
</google-chart>
</template>
<script>
let tm = null
Polymer({
is: 'google-chart-responsive',
behaviors: [
Polymer.IronResizableBehavior
],
properties: {
data: {
type: Array,
value: [],
},
},
listeners: {
'iron-resize': '_onIronResize'
},
attached: function() {
this.async(this.notifyResize, 1);
},
get parent() {
if (this.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
return this.parentNode.host;
}
return this.parentNode;
},
_onIronResize: function() {
if (tm) { return }
tm = setTimeout(() => {
this.$.googleChart.redraw()
clearTimeout(tm)
tm = null
}, 50)
}
});
</script>
</dom-module>
iSuslov
esd100
BootsSiR
yebrahim
galanovnick
SirJackovich
onlinerahul
Polymer.IronResizableBehavior not working. No documentation. App crashes when use it like this:
Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)