Binding options

[adben]

Hi Rob,

My binding for the data is working, but it does not updates the options (as in Chart.js), what can be the issue?

<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="line-chart-visualization-xxx">
  <template>
    <style>
      :host {
        display: inline-block;
      }

      chart-line {
        width: 100%;
        height: 100%;
      }
    </style>
    <chart-line data="[[data]]" options="[[options]]"></chart-line>
  </template>
</dom-module>
<script>
  (function() {
    'use strict';
    Polymer({
      is: 'line-chart-visualization-xxx',
      properties: {
        visualizationName: {
          type: String,
          notify: true
        },
        visualizationData: {
          type: Object,
          notify: true
        },
        data: {
          type: Object,
          computed: 'computeLineData(visualizationName,visualizationData)'
        },
        options: {
          type: Object,
          computed: 'computeOptions()'
        }
      },
      computeOptions: function computeOptions() {
        return {
          scaleShowGridLines: true,
          scaleGridLineColor: "rgba(0,0,0,.05)",
          scaleGridLineWidth: 1,
          scaleShowHorizontalLines: true,
          scaleShowVerticalLines: true,
          bezierCurve: false,
          pointDot: false,
           datasetStroke: true,
           datasetStrokeWidth: 20,
           datasetFill: true 
        };
      },
      computeLineData: function computeLineData(vname, vdata) {
        var keys = Object.keys(vdata);
        var values = keys.map(function formatData(key) {
          return vdata[key];
        });
        return {
          labels: keys,
          datasets: [{
            label: vname,
            fillColor: 'rgba(151,187,205,0.2)',
            strokeColor: 'rgba(151,187,205,1)',
            pointColor: 'rgba(151,187,205,1)',
            pointStrokeColor: '#fff',
            pointHighlightFill: '#fff',
            pointHighlightStroke: 'rgba(220,220,220,1)',
            data: values
          }]
        };
      }
    });
  })();
</script>

Thank you in advance for your attention to this matter.

[trading-peter]

If you define a computed property, you have to supply at least one depending property to the function string like so:

options: {
  type: Object,
  computed: 'computeOptions(someProperty)'
}

Otherwise the computeOptions function is never called, because there is simply no "input" to compute the value. But I assume from your code that options is not dependent of any other value, so it doesn't need to be computed. That means, what you probably need is the following definition:

options: {
  type: Object,
  value: function() {
    return {
      scaleShowGridLines: true,
        scaleGridLineColor: "rgba(0,0,0,.05)",
        scaleGridLineWidth: 1,
        scaleShowHorizontalLines: true,
        scaleShowVerticalLines: true,
        bezierCurve: false,
        pointDot: false,
        datasetStroke: true,
        datasetStrokeWidth: 20,
        datasetFill: true 
    };
  }
}

The function is called at creation time of the element and sets the options property with the object.

Also syntax like computeOptions: function computeOptions() { seems strange to me. Maybe you meant to write computeOptions: function() {?

Let me know if this helps.

[Stormsys]

@adben how are you getting on? is this still considered an issue?