require 'daru/view'

Daru::View.plotting_library = :highcharts


    # col-basic chart : basic
    opts = {
      chart: {
          type: 'column'
      },
      title: {
          text: 'Monthly Average Rainfall'
      },
      subtitle: {
          text: 'Source: WorldClimate.com'
      },
      xAxis: {
          categories: [
              'Jan',
              'Feb',
              'Mar',
              'Apr',
              'May',
              'Jun',
              'Jul',
              'Aug',
              'Sep',
              'Oct',
              'Nov',
              'Dec'
          ],
          crosshair: true
      },
      yAxis: {
          min: 0,
          title: {
              text: 'Rainfall (mm)'
          }
      },
      tooltip: {
          headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
          pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
              '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
          footerFormat: '</table>',
          shared: true,
          useHTML: true
      },
      plotOptions: {
          column: {
              pointPadding: 0.2,
              borderWidth: 0
          }
      },
    }

    series_dt = [

      {
          name: 'Tokyo',
          data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

      }, {
          name: 'New York',
          data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

      }, {
          name: 'London',
          data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

      }, {
          name: 'Berlin',
          data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

        }
    ]

col_basic = Daru::View::Plot.new
col_basic.chart.options = opts;
col_basic.chart.series_data = series_dt
col_basic.show_in_iruby

    # colmn-basic chart : column-negative
    opts = {
      chart: {
          type: 'column'
      },
      title: {
          text: 'Column chart with negative values'
      },
      xAxis: {
          categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
      },
      credits: {
          enabled: false
        }
    }

    series_dt = [
    {
        name: 'John',
        data: [5, 3, 4, 7, 2]
    }, {
        name: 'Jane',
        data: [2, -2, -3, 2, 1]
    }, {
        name: 'Joe',
        data: [3,4,4,-2,5]
      }
    ]

col_neg = Daru::View::Plot.new
col_neg.chart.options = opts;
col_neg.chart.series_data = series_dt
col_neg.show_in_iruby


    # bar-basic chart : column-stacked/
    opts = {
      chart: {
          type: 'column'
      },
      title: {
          text: 'Stacked column chart'
      },
      xAxis: {
          categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
      },
      yAxis: {
          min: 0,
          title: {
              text: 'Total fruit consumption'
          },
          stackLabels: {
              enabled: true,
              style: {
                  fontWeight: 'bold',
                  color: "(Highcharts.theme && Highcharts.theme.textColor) || 'gray'".js_code
              }
          }
      },
      legend: {
          align: 'right',
          x: -30,
          verticalAlign: 'top',
          y: 25,
          floating: true,
          backgroundColor:" (Highcharts.theme && Highcharts.theme.background2) || 'white'".js_code,
          borderColor: '#CCC',
          borderWidth: 1,
          shadow: false
      },
      tooltip: {
          headerFormat: '<b>{point.x}</b><br/>',
          pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
      },
      plotOptions: {
          column: {
              stacking: 'normal',
              dataLabels: {
                  enabled: true,
                  color:" (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'".js_code
              }
          }
      },
    }

    series_dt = [
     {
          name: 'John',
          data: [5, 3, 4, 7, 2]
      }, {
          name: 'Jane',
          data: [2, 2, 3, 2, 1]
      }, {
          name: 'Joe',
          data: [3, 4, 4, 2, 5]
      }
    ]

col_stacked = Daru::View::Plot.new
col_stacked.chart.options = opts;
col_stacked.chart.series_data = series_dt
col_stacked.show_in_iruby


    # bar-basic chart :column-stacked-and-grouped/
    opts = {
      chart: {
          type: 'column'
      },

      title: {
          text: 'Total fruit consumtion, grouped by gender'
      },

      xAxis: {
          categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
      },

      yAxis: {
          allowDecimals: false,
          min: 0,
          title: {
              text: 'Number of fruits'
          }
      },

      tooltip: {
          formatter: "function () {
                        return '<b>' + this.x + '</b><br/>' +
                            this.series.name + ': ' + this.y + '<br/>' +
                            'Total: ' + this.point.stackTotal;
                    }".js_code
      },

      plotOptions: {
          column: {
              stacking: 'normal'
          }
      },
    }

    series_dt = [
      {
          name: 'John',
          data: [5, 3, 4, 7, 2],
          stack: 'male'
      }, {
          name: 'Joe',
          data: [3, 4, 4, 2, 5],
          stack: 'male'
      }, {
          name: 'Jane',
          data: [2, 5, 6, 2, 1],
          stack: 'female'
      }, {
          name: 'Janet',
          data: [3, 0, 4, 4, 3],
          stack: 'female'
      }
    ]

col_stacked_grp = Daru::View::Plot.new
col_stacked_grp.chart.options = opts;
col_stacked_grp.chart.series_data = series_dt
col_stacked_grp.show_in_iruby

   # bar-basic chart : column-stacked-percent/
    opts = {
     chart: {
          type: 'column'
      },
      title: {
          text: 'Stacked column chart'
      },
      xAxis: {
          categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
      },
      yAxis: {
          min: 0,
          title: {
              text: 'Total fruit consumption'
          }
      },
      tooltip: {
          pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
          shared: true
      },
      plotOptions: {
          column: {
              stacking: 'percent'
          }
        }
    }

    series_dt = [
      {
          name: 'John',
          data: [5, 3, 4, 7, 2]
      }, {
          name: 'Jane',
          data: [2, 2, 3, 2, 1]
      }, {
          name: 'Joe',
          data: [3, 4, 4, 2, 5]
      }
    ]

col_stacked_per = Daru::View::Plot.new
col_stacked_per.chart.options = opts;
col_stacked_per.chart.series_data = series_dt
col_stacked_per.show_in_iruby

  # bar-basic chart : column-rotated-labels
    opts = {
      chart: {
          type: 'column'
      },
      title: {
          text: 'World\'s largest cities per 2014'
      },
      subtitle: {
          text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
      },
      xAxis: {
          type: 'category',
          labels: {
              rotation: -45,
              style: {
                  fontSize: '13px',
                  fontFamily: 'Verdana, sans-serif'
              }
          }
      },
      yAxis: {
          min: 0,
          title: {
              text: 'Population (millions)'
          }
      },
      legend: {
          enabled: false
      },
      tooltip: {
          pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
      },
    }

    series_dt = [
      {
          name: 'Population',
          data: [
              ['Shanghai', 23.7],
              ['Lagos', 16.1],
              ['Istanbul', 14.2],
              ['Karachi', 14.0],
              ['Mumbai', 12.5],
              ['Moscow', 12.1],
              ['São Paulo', 11.8],
              ['Beijing', 11.7],
              ['Guangzhou', 11.1],
              ['Delhi', 11.1],
              ['Shenzhen', 10.5],
              ['Seoul', 10.4],
              ['Jakarta', 10.0],
              ['Kinshasa', 9.3],
              ['Tianjin', 9.3],
              ['Tokyo', 9.0],
              ['Cairo', 8.9],
              ['Dhaka', 8.9],
              ['Mexico City', 8.9],
              ['Lima', 8.9]
          ],
          dataLabels: {
              enabled: true,
              rotation: -90,
              color: '#FFFFFF',
              align: 'right',
              format: '{point.y:.1f}',# one decimal
              y: 10, # 10 pixels down from the top
              style: {
                  fontSize: '13px',
                  fontFamily: 'Verdana, sans-serif'
              }
          }
      }
    ]

col_rotated_label = Daru::View::Plot.new
col_rotated_label.chart.options = opts;
col_rotated_label.chart.series_data = series_dt
col_rotated_label.show_in_iruby

# note: for drilldown charts drilldown.js needed
# bar-basic chart : column-drilldown

    opts = {
      chart: {
          type: 'column'
      },
      title: {
          text: 'Browser market shares. January, 2015 to May, 2015'
      },
      subtitle: {
          text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.'
      },
      xAxis: {
          type: 'category'
      },
      yAxis: {
          title: {
              text: 'Total percent market share'
          }

      },
      legend: {
          enabled: false
      },
      plotOptions: {
          series: {
              borderWidth: 0,
              dataLabels: {
                  enabled: true,
                  format: '{point.y:.1f}%'
              }
          }
      },

      tooltip: {
          headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
          pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
      },
    drilldown: {
        series: [{
            name: 'Microsoft Internet Explorer',
            id: 'Microsoft Internet Explorer',
            data: [
                [
                    'v11.0',
                    24.13
                ],
                [
                    'v8.0',
                    17.2
                ],
                [
                    'v9.0',
                    8.11
                ],
                [
                    'v10.0',
                    5.33
                ],
                [
                    'v6.0',
                    1.06
                ],
                [
                    'v7.0',
                    0.5
                ]
            ]
        }, {
            name: 'Chrome',
            id: 'Chrome',
            data: [
                [
                    'v40.0',
                    5
                ],
                [
                    'v41.0',
                    4.32
                ],
                [
                    'v42.0',
                    3.68
                ],
                [
                    'v39.0',
                    2.96
                ],
                [
                    'v36.0',
                    2.53
                ],
                [
                    'v43.0',
                    1.45
                ],
                [
                    'v31.0',
                    1.24
                ],
                [
                    'v35.0',
                    0.85
                ],
                [
                    'v38.0',
                    0.6
                ],
                [
                    'v32.0',
                    0.55
                ],
                [
                    'v37.0',
                    0.38
                ],
                [
                    'v33.0',
                    0.19
                ],
                [
                    'v34.0',
                    0.14
                ],
                [
                    'v30.0',
                    0.14
                ]
            ]
        }, {
            name: 'Firefox',
            id: 'Firefox',
            data: [
                [
                    'v35',
                    2.76
                ],
                [
                    'v36',
                    2.32
                ],
                [
                    'v37',
                    2.31
                ],
                [
                    'v34',
                    1.27
                ],
                [
                    'v38',
                    1.02
                ],
                [
                    'v31',
                    0.33
                ],
                [
                    'v33',
                    0.22
                ],
                [
                    'v32',
                    0.15
                ]
            ]
        }, {
            name: 'Safari',
            id: 'Safari',
            data: [
                [
                    'v8.0',
                    2.56
                ],
                [
                    'v7.1',
                    0.77
                ],
                [
                    'v5.1',
                    0.42
                ],
                [
                    'v5.0',
                    0.3
                ],
                [
                    'v6.1',
                    0.29
                ],
                [
                    'v7.0',
                    0.26
                ],
                [
                    'v6.2',
                    0.17
                ]
            ]
        }, {
            name: 'Opera',
            id: 'Opera',
            data: [
                [
                    'v12.x',
                    0.34
                ],
                [
                    'v28',
                    0.24
                ],
                [
                    'v27',
                    0.17
                ],
                [
                    'v29',
                    0.16
                ]
            ]
        }]
     }
    }

    series_dt = [
    {
        name: 'Brands',
        colorByPoint: true,
        data: [{
            name: 'Microsoft Internet Explorer',
            y: 56.33,
            drilldown: 'Microsoft Internet Explorer'
        }, {
            name: 'Chrome',
            y: 24.03,
            drilldown: 'Chrome'
        }, {
            name: 'Firefox',
            y: 10.38,
            drilldown: 'Firefox'
        }, {
            name: 'Safari',
            y: 4.77,
            drilldown: 'Safari'
        }, {
            name: 'Opera',
            y: 0.91,
            drilldown: 'Opera'
        }, {
            name: 'Proprietary or Undetectable',
            y: 0.2,
            drilldown: nil
        }]
    }]

col_drill = Daru::View::Plot.new
col_drill.chart.options = opts;
col_drill.chart.series_data = series_dt
col_drill.show_in_iruby

   # bar-basic chart :column-placement/
    opts = {
      chart: {
          type: 'column'
      },
      title: {
          text: 'Efficiency Optimization by Branch'
      },
      xAxis: {
          categories: [
              'Seattle HQ',
              'San Francisco',
              'Tokyo'
          ]
      },
      yAxis: [{
          min: 0,
          title: {
              text: 'Employees'
          }
      }, {
          title: {
              text: 'Profit (millions)'
          },
          opposite: true
      }],
      legend: {
          shadow: false
      },
      tooltip: {
          shared: true
      },
      plotOptions: {
          column: {
              grouping: true,
              shadow: false,
              borderWidth: 0
          }
      },

    }

    series_dt = [
      {
          name: 'Employees',
          color: 'rgba(165,170,217,1)',
          data: [150, 73, 20],
          pointPadding: 0.3,
          pointPlacement: -0.2
      }, {
          name: 'Employees Optimized',
          color: 'rgba(126,86,134,.9)',
          data: [140, 90, 40],
          pointPadding: 0.4,
          pointPlacement: -0.2
      }, {
          name: 'Profit',
          color: 'rgba(248,161,63,1)',
          data: [183.6, 178.8, 198.5],
          tooltip: {
              valuePrefix: '$',
              valueSuffix: ' M'
          },
          pointPadding: 0.3,
          pointPlacement: 0.2,
          yAxis: 1
      }, {
          name: 'Profit Optimized',
          color: 'rgba(186,60,61,.9)',
          data: [203.6, 198.8, 208.5],
          tooltip: {
              valuePrefix: '$',
              valueSuffix: ' M'
          },
          pointPadding: 0.4,
          pointPlacement: 0.2,
          yAxis: 1
      }
    ]
col_place = Daru::View::Plot.new
col_place.chart.options = opts;
col_place.chart.series_data = series_dt
col_place.show_in_iruby

# todo:  column-parsed/ (getting data from the html table)

# todo :columnrange chart example