plotly-plot.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="plotly-plot-behavior.html">

<!--
Polymer element for the plotly.js library

Example: a hard-coded plot

```html
<plotly-plot data='[{"x": [1, 2, 3], "y": [4, 11, 23]}]'>
</plotly-plot>
```

Example: a dynamically-set plot

```html
<plotly-plot id="the-plot"></plotly-plot>
<script>
   var plotElement = document.getElementById('the-plot');
   plotElement.set('data.0', {x: [1, 2, 3], y: [19, 3, 11]});
</script>
```

If you are changing the parameters dynamically and want your changes reflected
immediately, make sure to use `.set` or the plot will not update. Conversely,
change several parameters, and then call `.redraw`.

See the [plotly.js docs](https://plot.ly/javascript/reference/) for a full explanation
of the `data`, `layout` and `config` properties.

### NOTE: The plotly.js library is incompatible with shadow DOM

Polymer elements, and web components in general, depend on being able to "hide"
their inner DOM from the rest of the page. This is accomplished through a
set of functionality known as the "shadow DOM."

Polymer has two kinds of shadow DOM implementations: native shadow DOM, and a
shim called "shady DOM." Native shadow DOM is newer and yields improved
performance, but it has incomplete support in browsers outside the newest Chrome
and can often cause problems with existing code. For this reason, shady DOM is
still the default implementation in Polymer 1.x.

Unfortunately, native shadow DOM is currently incompatible with plotly.js. The
icon toolbar layout code in the plotly.js library fails for all plotly plots
rendered inside a shadow DOM, whether by Polymer or any other means. The
element cannot tell that the library code has misrendered. It acts as if it
rendered correctly and responds to JavaScript normally.

This is a library-level issue between plotly.js and the DOM. It does not have
to do with this element itself, and `<plotly-plot>` can't do anything about it
until either plotly.js or the shadow DOM code change to accommodate one another.

In the mean time, if you're using `<plotly-plot>`, make sure you
_do not have `Polymer.dom = 'shadow'` in the global Polymer settings of your
project_.

@demo demo/index.html
-->

<dom-module id="plotly-plot">
  <template>
    <div id="plot" data=[[data]] layout=[[layout]] config=[[config]]>
      <content></content>
    </div>
  </template>

  <script>
    Polymer({
      is: 'plotly-plot',
      behaviors: [
        PlotlyPlot.PlotlyPlotBehavior,
      ],
    });
  </script>
</dom-module>