app-chart.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="chart-import.html">

<!--
Element for creating charts

##### Example

    <app-chart type="line"></app-chart>

@element app-chart
@blurb Element for creating charts
@status alpha
@homepage http://the-control-group.github.io/app-chart
-->
<dom-module id="app-chart">
  <style>
    :host {
      display: block;
    }
    #chart_container, #chartEl {
      height: 100%;
      width: calc(100% - 40px);
    }

    #chartEl {
      margin-left: 40px;
    }

    polyfill-next-selector { content: ':host label'; }
    ::content app-labels {
      display: none;
    }
  </style>

  <template>
    <content id="series" select="app-chart-series"></content>
    <div id="chart_container">
      <content id="options" select="*"></content>
      <div id="chartEl"></div>
    </div>
  </template>

  <script>

    function merge(obj1,obj2){
        var obj3 = {};
        for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
        for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
        return obj3;
    }

    Polymer({

      is: 'app-chart',

      properties: {
        /**
         * type of renderer for the chart
         *
         *  __renderers available__
         *  - stack
         *  - line
         *  - scatterplot
         *
         * @attribute type
         * @type String
         * @default 'line'
         */
        type: {
          type: String,
          value: 'line',
          notify: true
        },
        /**
         * this chart should be responsive to window size
         *
         * @attribute responsive
         * @type Boolean
         * @default 'false'
         */
        responsive: {
          type: Boolean,
          value: false,
          notify: true
        },

        /**
         * the chart series data
         *
         * @attribute series
         * @type Array
         * @default []
         */
        series: {
          type: Array,
          value: [],
          notify: true
        },

        /**
         * the chart height
         *
         * @attribute height
         * @type Number
         * @default null
         */
        height: Number,

        /**
         * the chart width
         *
         * @attribute width
         * @type Number
         * @default null
         */
        width: Number
      },

      ready: function(){
        this.series = [];
        this.chart = null;
        if(this.responsive){
          window.addEventListener('resize', this.updateSize.bind(this));
        }
      },

      attached: function(){
        this.async(this.updateDataSets.bind(this));
        this.async(this.updateOptions.bind(this));
      },

      setup: function(){
        if(!this.chart){
          this.chart = new Rickshaw.Graph({
            element: this.$.chartEl,
            width: this.width ? this.width : this.responsive ? this.clientWidth - 40 : 400,
            height: this.height ? this.height : this.responsive ? this.clientHeight : 350,
            renderer: this.type || 'stack',
            series: this.series
          });
        } else {
          this.chart.series = this.series;
        }

        this.chart.render();
      },

      updateSize: function(){
        var dims = {};
        dims.width = this.width ? this.width : this.responsive ? this.clientWidth - 40 : 400;
        dims.height = this.height ? this.height : this.responsive ? this.clientHeight : 350;


        this.chart.setSize(dims);
        this.chart.update();
      },

      updateOptions: function(){
        this.options = this.getContentChildren('#options');

        new MutationObserver(this.updateOptions).observe(this, {
          attributes: true,
          attributeOldValue: true
        });

        this.setup();

        this.options.forEach((function(option){
          option.chart = this.chart;
        }).bind(this));
      },

      updateDataSets: function(){
        this.series = this.getContentChildren('#series');

        new MutationObserver(this.updateDataSets).observe(this, {
          attributes: true,
          attributeOldValue: true
        });

        this.series.forEach((function(dataset, k){
          var newData = {};
          newData.name = dataset.name;
          newData.color = dataset.color;
          newData.data = dataset.data;
          this.series[k] = newData;
        }).bind(this))

        // console.log(this.series)
        this.setup();
      }
    });

  </script>

</dom-module>

<!--
The `app-chart-series` element represents a series of data.
It is used as a child of `app-chart`

##### Example

    <app-chart type="line">
      <app-chart-series name="MySeries">
        // data goes here
      </app-chart-series>
    </app-chart>

@element app-chart-series
@status alpha
@homepage http://the-control-group.github.io/app-chart
-->
<dom-module id="app-chart-series">
  <template>
    <content id="dataset" select="app-chart-data"></content>
  </template>
  <script>
  Polymer({
    is : 'app-chart-series',

    properties : {
      /**
       * name of the series
       *
       * @attribute name
       * @type String
       * @default ''
       */
      name : {
        type: String,
        notify: true,
      },

      /**
       * color of the series
       *
       * @attribute color
       * @type String
       * @default ''
       */
      color : {
        type: String,
        notify: true,
      },

      data: {
        type: Array,
        notify: true,
        reflectToAttribute: true
      }
    },

    attached: function(){
      this.updateDataSet();
    },

    updateDataSet: function(){
      this.data = Array.prototype.slice.call(this.getContentChildren('#dataset'));

      this.data.forEach((function(item, k){
        var newData = {};
        newData.x = item.x,
        newData.y = item.y
        this.data[k] = newData;
      }).bind(this));

      new MutationObserver(this.updateDataSet).observe(this, {
        attributes: true,
        attributeOldValue: true
      });
    }
  })
  </script>
</dom-module>

<!--
The `app-chart-data` element represents a point of data.
It is used as a child of `app-chart-series`

##### Example

    <app-chart type="line">
      <app-chart-series name="MySeries">
        <app-chart-data x="1902" y="12313141"></app-chart-data>
      </app-chart-series>
    </app-chart>

@element app-chart-data
@status alpha
@homepage http://the-control-group.github.io/app-chart
-->
<dom-module id="app-chart-data" attributes="x y message">
  <script>
  Polymer({
    is: 'app-chart-data',

    properties: {
      /**
       * x value for the data
       *
       * @attribute x
       * @type Number
       * @default 0
       */
      x: {
        type: Number,
        value: 0,
        notify: true
      },

      /**
       * y value for the data
       *
       * @attribute y
       * @type Number
       * @default 0
       */
       y: {
         type: Number,
         value: 0,
         notify: true
       },

      /**
       * message to annotate the data with.
       *
       * @attribute message
       * @type String
       * @default ''
       */
      message: {
        type: String,
        notify: true
      }
    }
  })
  </script>
</dom-module>

<!--
The `app-chart-axis` element represents an axis in which to render
tick marks

##### Example

    <app-chart type="line">
      <app-chart-axis type="time"></app-chart-axis>
      <app-chart-series name="MySeries">
        <app-chart-data x="1902" y="12313141"></app-chart-data>
      </app-chart-series>
    </app-chart>

@element app-chart-axis
@status alpha
@homepage http://the-control-group.github.io/app-chart
-->
<dom-module id="app-chart-axis">
  <style>
    :host {
      position: absolute;
      width: 40px;
      height: 100%;
    }
    .y_axis {
      height: 100%;
    }
  </style>
  <template>
    <div id="axis" class="{{ {y_axis: type == 'y'} | tokenList}}"></div>
  </template>
  <script>
  Polymer({
    is: 'app-chart-axis',
    properties: {
      /**
       * type of axis renderer
       *
       * @attribute type
       * @type String
       * @default time
       */
      type: {
        type: String,
        value: 'time',
        notify: true
      },

      /**
       * chart object to render to
       *
       * @attribute graph
       * @type Object
       * @default null
       */
       chart: {
         type: Object,
         notify: true,
         observer : 'setup'
       },

       element: {
         type: String,
         notify: true
       },

       orientation: {
         type: String,
         notify: true
       }
    },

    setup: function(){
      this.height = this.parentNode.height
      if(this.chart != null){
        if(this.type == 'time'){
          this.axis = new Rickshaw.Graph.Axis.Time( { graph: this.chart } );
        } else if(this.type == 'y') {
          this.axis = new Rickshaw.Graph.Axis.Y( {
            graph: this.chart,
            orientation: this.orientation || 'left',
            tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
            element: this.$.axis,
          } );
        } else if(this.type == 'x') {
          this.axis = new Rickshaw.Graph.Axis.X( {
            graph: this.chart,
            orientation: this.orientation || 'top',
            tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
            element: this.$.axis,
          } );
        }

        this.chart.update();
      }
    },

    ready: function(){
      this.async(this.setup);
    }
  })
  </script>
</dom-module>