th-highcharts-column.html

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

<!--
A component that sets WSJ default settings for the Highcharts bar chart

##### Example

    <th-highcharts-column></th-highcharts-column>

@element th-highcharts-column
@blurb A component that sets WSJ default settings for the Highcharts bar chart
@status alpha
@author Thelma team
@homepage http://thelmanews.github.io/th-highcharts-column
-->

<polymer-element extends="th-d3-chart" name="th-highcharts-column"  attributes="chartTitle chartSubtitle credits creditsURL series1Name series2Name series3Name yAxisTitle xAxisTitle legend legendTitle yAxisMin yAxisMax yAxisInterval valuePrefix valueSuffix valueDecimals thousandsSep seriesColors textColor backgroundColor xTickInterval yTickInterval gridLineColor stacking">
  
  <template>
    <style>
      :host {
        display: inline-block;
        width: 100%;
        height: 100%;
        position: relative;
      }
    </style>

    <th-highcharts id="chart"
      chartData="{{chartData}}" 
      chartType="{{chartType}}"
      chartWidth="{{chartWidth}}"
      chartHeight="{{chartHeight}}"
      chartTitle="{{chartTitle}}" 
      chartSubtitle="{{chartSubtitle}}" 
      series1Name="{{series1Name}}" 
      series2Name="{{series2Name}}" 
      series3Name="{{series3Name}}" 
      xAxisTitle="{{xAxisTitle}}"
      yAxisTitle="{{yAxisTitle}}"
      yAxisMin="{{yAxisMin}}"
      yAxisMax="{{yAxisMax}}"
      thousandsSep="{{thousandsSep}}"
      valueDecimals="{{valueDecimals}}"
      valuePrefix="{{valuePrefix}}"
      valueSuffix="{{valueSuffix}}"
      legend="{{legend}}"
      legendTitle="{{legendTitle}}"
      seriesColors="{{seriesColors}}"
      textColor="{{textColor}}"
      backgroundColor="{{backgroundColor}}"
      gridLineColor="{{gridLineColor}}"
      xTickInterval="{{xTickInterval}}"
      yTickInterval="{{yTickInterval}}"
      credits="{{credits}}"
      creditsURL="{{creditsURL}}"
      >
    </th-highcharts>

  </template>
  
  <script>
    Polymer('th-highcharts-column', {
      /**
       * 'chartData' allows for up to 3 series of data. It must follow this format with keys being: label, series1, series2, series3
       * @type {Array}
       */
      chartData: [
         {"label": "2012", "series1": "100000", "series2": "100000" },
            {"label": "2013", "series1": "50000", "series2": "150000" },
            {"label": "2014", "series1": "300000", "series2": "200000" },
            {"label": "2015", "series1": "200000", "series2": "110000" }
      ],
      /**
       * 'series1Name' is the actual name of 'series1' in chartDAta
       * @type {String}
       */
      series1Name: 'Germany',
      /**
       * 'series2Name' is the actual name of 'series2' in chartDAta
       * @type {String}
       */
      series2Name: 'France',
      /**
       * 'series3Name' is the actual name of 'series3' in chartDAta
       * @type {String}
       */
      series3Name: '',
      /**
       * 'valueDecimals' is the number of decimal places to display in values in the chart
       * @type {Number}
       */
      valueDecimals: 0,
      /**
       * 'legend' is a switch display or hide the legend
       * @type {Boolean}
       */
      legend: true,
      /**
       * 'seriesColors' is an array of colors  which follows the same order of the series
       * @type {Array}
       */
      seriesColors: [],
      /**
       * Stacking setting for charts. Options: 'none','normal','percent'
       * @type {String}
       */
      stacking: 'none',
      /**
       * 'chartType' is initialized as column by default
       * @type {String}
       */
      chartType: 'column',
      init: function(){
        // It's quicker to get dimensions here vs. in th-highcharts which is one level deeper into shadowDom
        this.chartHeight = this.computeHeight();
        this.chartWidth = this.computeWidth();
      
        //clone wsjOptions to avoid shared state
        this.$.chart.chartOptions = this.$.chart.clone(this.wsjOptions);

        if(this.stacking!=='none') {
          this.$.chart.chartOptions.plotOptions.column.stacking = this.stacking;
        }

        this._formatTooltipValues();
        this.$.chart._setupChart();
        this.$.chart._buildChart();
      },
      animate: function(){ 
        this.$.chart.animate();
      },
      reset: function(){ 
        this.$.chart.reset();
      },
      resize: function(){
        this.$.chart.resize();
      },
      /**
       * 'wsjOptions' are the defaults defined in the WSJ highcharts repo https://github.com/dowjones/custom-data-charts/blob/master/_js/defaults.types.column.js
       *
       * UPDATING INSTRUCTIONS:
       * 1) Copy/paste the object defined in defaults.types.column.js into the wsjOptions object
       * 2) Replace jQuery with vanilla JavaScript
       * 
       * @type {Object}
       */
      wsjOptions: {
        colors: ['#0098db', '#ce3139', '#edc639', '#727272', '#63bc51', '#bfbfbf'],
        chart: {
          type: 'column',
          height: 400,
          marginBottom: 60,
          // marginTop: 50,
          style: {
            maxWidth: '1275px',
            color: '#000000',
            fontFamily: "'Whitney SSm', 'Helvetica Neue', Helvetica, Arial, sans-serif",
            fontWeight: 'normal',
            fontStyle: 'normal',
            fontSize: 13
          },
            events: {
                load: function(e){

                  // make the tick that has the 0 value black
                  var chart = e.target;
                  var index = chart.yAxis[0].tickPositions.indexOf(0);
                  index = (index === 0) ? chart.yAxis[0].tickPositions.length - 1: index;

                // $chart.find('.highcharts-axis:eq(1) path:eq('+ index +')').attr('stroke', '#000');
              }
            },
            // marginTop: ($(window).width() > 500) ? 10 : 0,
            // marginLeft: 0,
        },
        legend: {
          title: {
              style: {
                  fontFamily: "'Whitney SSm', 'Helvetica Neue', Helvetica, Arial, sans-serif",
                  fontSize: '12px',
                  fontWeight: 800
              }
          },
          itemStyle: {
              fontSize: 12,
              fontFamily: "'Whitney SSm', 'Helvetica Neue', Helvetica, Arial, sans-serif",
              fontWeight: 400,
              fontStyle: 'normal',
              color: '#231F20'
          }
        },
        tooltip: {
          enabled: true,
          borderWidth: 1,
          borderRadius: 0,
          borderColor: '#ccc',
          useHTML: true,
          shared: true,
           formatter: function(){
              var html = '<div class="tooltip tooltip-table tooltip-narrow">';
                html += '<h6 style="margin-top: 0px;">' +this.points[0].key+'</h6>'
                html += '<table class="table"><tr><th>Name</th><th>Value</th></tr>';
              var points = this.points;

                var value = this.y;
                  var num_decimals      = points[0].series.chart.options.yAxisDecimal || null;
                  var num_decimals_base = 0;

                      value             = Highcharts.numberFormat(value, num_decimals, '.', '');

                  if(points[0].series.chart.options.yAxisUnitPlace1 == 'prefix'){
                    value = points[0].series.chart.options.yAxisUnit1 + value;
                  }
                  if(points[0].series.chart.options.yAxisUnitPlace2 == 'suffix'){
                    value = value + points[0].series.chart.options.yAxisUnit2;
                  }

                points.forEach(function(point, i){
                  html += '<tr><td style="color: ' + point.series.color + '">'+point.series.name+': </td>';
                  html += '<td>' + value + '</td></tr>';
                });

                html += '</table></div>';

              return html;
            },
        },
        plotOptions: {
            series: {
              events: {
                legendItemClick: function () {
                    var this_isVisible = this.visible;
                    // var chart   = $chart.highcharts();
                    var series  = this.chart.series;
                    var visible = [];
                    console.log(this);
                    // $.each(series, function(i, item){
                    //   if(item.visible === false){
                    //     visible.push(item.visible);
                    //   }
                    // });

                    // REPLACED ABOVE WITH THIS
                    series.forEach(function(item, i){
                      if(item.visible === false){
                        visible.push(item.visible);
                      }
                    })


                    if(visible.length + 1 === series.length){
                      if(!this_isVisible){
                        return;
                      }
                      return false;
                    }
                  }
                }
            },
            column: {
              allowPointSelect: true,
              point: {
                  events: {
                    select: function() {
                        newColor = prompt('Color?');
                        this.update({
                            color: newColor
                        })
                    }
                  }
              },
              stacking: false, 
              dataLabels: {
                softConnector: false,
              }
            }
        },
        xAxis: {
          reversed: false,
          minTickInterval: 1,
          lineColor: '#999999',
          tickLength: 8,
          tickColor: '#A8A7A5',
          tickWidth: 1,
          tickmarkPlacement: 'on',
          startOnTick: false,
          labels: {
              style: {
                  color: '#000000',
                  fontFamily: "'Whitney SSm', 'Helvetica Neue', Helvetica, Arial, sans-serif",
                  fontWeight: 'normal',
                  fontStyle: 'normal',
                  fontSize: 13
              }
          },
          title: {
              style: {
                  fontSize: '13px',
                  fontFamily: "'Whitney SSm', 'Helvetica Neue', Helvetica, Arial, sans-serif"
              }
          },
          type: 'category',
          categories: []
        },
        yAxis: {
              // offset: -10,
              labels: {
                allowDecimals: false,
                y: -4,
                x: 30,
                align: 'right',
                style: {
                    color: '#000000',
                    fontFamily: "'Whitney SSm', 'Helvetica Neue', Helvetica, Arial, sans-serif",
                    fontWeight: 'normal',
                    fontStyle: 'normal',
                    paddingRight: '25px',
                    fontSize: '13px'
                },
                formatter: function () {



                  var num_decimals      = this.chart.options.yAxisDecimal || null;
                  var num_decimals_base = 0;
                  var value             = this.value;
                      value             = Highcharts.numberFormat(value, num_decimals, '.', '');

                      if(this.chart.options.yAxisUnitPlace1 == 'prefix'){
                        value = (this.isLast) ? this.chart.options.yAxisUnit1 + value : '<span style="opacity: 0">'+ this.chart.options.yAxisUnit1 +'</span>' + value;
                      }
                      if(this.chart.options.yAxisUnitPlace2 == 'suffix'){
                        value = (this.isLast) ? value + this.chart.options.yAxisUnit2 : value + '<span style="opacity: 0">'+ this.chart.options.yAxisUnit2 +'</span>';
                      }

                      value = (this.isFirst) ? Highcharts.numberFormat(value, num_decimals_base, '.', '') : value;

                     return value;
                  }
              },
              reversed: false,
              gridLineColor: '#A8A7A5',
              tickColor: '#A8A7A5',
              tickWidth: 1,
              tickPosition: 'inside'
        },
        position: {
            align: 'left',
            x: 10
        }
      },
      /**
       * 'formatTooltipValues' reformats the tooltips that are initially formatted in 'wsjChartOptions'. 
       * This is necessary because number formats (valueDecimals, valuePrefix, valueSuffix) for the tooltip need to be 
       * passed into the function and a reference to self (the component) needs to be established in order to do so.
       *
       * UPDATING INSTRUCTIONS:
       * 1) Define a reference to self
       * 2) Redefine this.wsjOptions.tooltip.formatter by first copy/pasting the original
       * 3) Replace num_decimals with self.valueDecimals
       * 4) Replace jQuery loops with vanilla JavaScript forEach loops
       * 5) Add valuePrefix and valueSuffix to the value 
       */
      _formatTooltipValues: function(){
        // 1) Define reference to component
        var self = this; 
        
        // 2) Copy/paste tooltip formatter function from wsjOptions
        this.$.chart.chartOptions.tooltip.formatter = function(){
          var html = '<div class="tooltip tooltip-table tooltip-narrow">';
              html += '<h6 style="margin-top: 0px;">' +this.points[0].key+'</h6>'
              html += '<table class="table"><tr><th>Name</th><th>Value</th></tr>';
          var points = this.points; 

          var value = this.y;
          // 3) Redefine number of decimal places with component attribute
          var num_decimals = self.valueDecimals|| null;
          var num_decimals_base = 0;


            // REPLACED WITH BELOW
            // $.each(points, function(i, point){
            //   html += '<tr><td style="color: ' + point.series.color + '">'+point.series.name+': </td>';
            //   html += '<td>' + value + '</td></tr>';
            // });

            // REPLACED ABOVE WITH THIS
            points.forEach(function(point, i){
              // 4) Include thousandsSep attribute in format
              value = Highcharts.numberFormat(point.y, num_decimals, '.', self.thousandsSep);

              // 5) Include prefix in value foramt
              if(self.valuePrefix){
                value = self.valuePrefix + value;
              }

              // 6) Include suffix in value foramt
              if(self.valueSuffix){
                value = value + self.valueSuffix;
              }
              html += '<tr><td style="color: ' + point.series.color + '">'+point.series.name+': </td>';
              html += '<td>' + value + '</td></tr>';
            });


            html += '</table></div>';

          return html;
        }

      }
      
    });
  </script>
</polymer-element>