require 'daru/view'

Daru::View.plotting_library = :highcharts

# Area chart : basic
    opts = {
      chart: {
          type: 'area'
      },
      title: {
          text: 'US and USSR nuclear stockpiles'
      },
      subtitle: {
          text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
              'thebulletin.metapress.com</a>'
      },
      xAxis: {
          allowDecimals: false,
          labels: {
              formatter: "function () {
                                return this.value; // clean, unformatted number for year
                            }".js_code
          }
      },
      yAxis: {
          title: {
              text: 'Nuclear weapon states'
          },
          labels: {
              formatter: "function () {
                                return this.value / 1000 + 'k';
                            }".js_code
          }
      },
      tooltip: {
          pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
      },
      plotOptions: {
          area: {
              # pointStart: 1940, not working datetime kinda things
              marker: {
                  enabled: false,
                  symbol: 'circle',
                  radius: 2,
                  states: {
                      hover: {
                          enabled: true
                      }
                  }
              }
          }
      },
    }

    series_dt = [
      {
          name: 'USA',
          data: [nil, nil, nil, nil, nil, 6, 11, 32, 110, 235, 369, 640,
              1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
              27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
              26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
              24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
              22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
              10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
      }, {
          name: 'USSR/Russia',
          data: [nil, nil, nil, nil, nil, nil, nil, nil, nil, nil,
              5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
              4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
              15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
              33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
              35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
              21000, 20000, 19000, 18000, 18000, 17000, 16000]
      }
    ]
area_basic = Daru::View::Plot.new
area_basic.chart.options = opts;
area_basic.chart.series_data = series_dt
area_basic.show_in_iruby

# Area chart : negative values
    opts = {
      chart: {
          type: 'area'
      },
      title: {
          text: 'Area 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]
      }
    ]

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

    # Area chart : stacked area
    opts = {
      chart: {
          type: 'area'
      },
      title: {
          text: 'Historic and Estimated Worldwide Population Growth by Region'
      },
      subtitle: {
          text: 'Source: Wikipedia.org'
      },
      xAxis: {
          categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
          tickmarkPlacement: 'on',
          title: {
              enabled: false
          }
      },
      yAxis: {
          title: {
              text: 'Billions'
          },
          labels: {
              formatter: "function () {
                                return this.value / 1000;
                            }".js_code
          }
      },
      tooltip: {
          split: true,
          valueSuffix: ' millions'
      },
      plotOptions: {
          area: {
              stacking: 'normal',
              lineColor: '#666666',
              lineWidth: 1,
              marker: {
                  lineWidth: 1,
                  lineColor: '#666666'
              }
          }
      },

    }

    series_dt = [{
          name: 'Asia',
          data: [502, 635, 809, 947, 1402, 3634, 5268]
      }, {
          name: 'Africa',
          data: [106, 107, 111, 133, 221, 767, 1766]
      }, {
          name: 'Europe',
          data: [163, 203, 276, 408, 547, 729, 628]
      }, {
          name: 'America',
          data: [18, 31, 54, 156, 339, 818, 1201]
      }, {
          name: 'Oceania',
          data: [2, 2, 2, 6, 13, 30, 46]
      }]
area_stacked = Daru::View::Plot.new
area_stacked.chart.options = opts;
area_stacked.chart.series_data = series_dt
area_stacked.show_in_iruby

    # Area chart : percentage area
    opts = {
      chart: {
          type: 'area'
      },
      title: {
          text: 'Historic and Estimated Worldwide Population Distribution by Region'
      },
      subtitle: {
          text: 'Source: Wikipedia.org'
      },
      xAxis: {
          categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
          tickmarkPlacement: 'on',
          title: {
              enabled: false
          }
      },
      yAxis: {
          title: {
              text: 'Percent'
          }
      },
      tooltip: {
          pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
          split: true
      },
      plotOptions: {
          area: {
              stacking: 'percent',
              lineColor: '#ffffff',
              lineWidth: 1,
              marker: {
                  lineWidth: 1,
                  lineColor: '#ffffff'
              }
          }
      },
    }

    series_dt =  [{
        name: 'Asia',
        data: [502, 635, 809, 947, 1402, 3634, 5268]
    }, {
        name: 'Africa',
        data: [106, 107, 111, 133, 221, 767, 1766]
    }, {
        name: 'Europe',
        data: [163, 203, 276, 408, 547, 729, 628]
    }, {
        name: 'America',
        data: [18, 31, 54, 156, 339, 818, 1201]
    }, {
        name: 'Oceania',
        data: [2, 2, 2, 6, 13, 30, 46]
    }]
area_per = Daru::View::Plot.new
area_per.chart.options = opts;
area_per.chart.series_data = series_dt
area_per.show_in_iruby

    # Area chart : with missing points
    opts = {
      chart: {
          type: 'area',
          spacingBottom: 30
      },
      title: {
          text: 'Fruit consumption *'
      },
      subtitle: {
          text: '* Jane\'s banana consumption is unknown',
          floating: true,
          align: 'right',
          verticalAlign: 'bottom',
          y: 15
      },
      legend: {
          layout: 'vertical',
          align: 'left',
          verticalAlign: 'top',
          x: 150,
          y: 100,
          floating: true,
          borderWidth: 1,

      },
      xAxis: {
          categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
      },
      yAxis: {
          title: {
              text: 'Y-Axis'
          },
          labels: {
              formatter: "function () {
                                return this.value;
                            }".js_code
          }
      },
      tooltip: {
          formatter: "function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                            this.x + ': ' + this.y;
                    }".js_code
      },
      plotOptions: {
          area: {
              fillOpacity: 0.5
          }
      },
      credits: {
          enabled: false
      }
    }
    series_dt = [{
          name: 'John',
          data: [0, 1, 4, 4, 5, 2, 3, 7]
      }, {
          name: 'Jane',
          data: [1,0,3,nil,3,1,2,1]
        }
    ]
area_nil = Daru::View::Plot.new
area_nil.chart.options = opts;
area_nil.chart.series_data = series_dt
area_nil.show_in_iruby

   # Area chart : area-inverted/
    opts = {
      chart: {
          type: 'area',
          inverted: true
      },
      title: {
          text: 'Average fruit consumption during one week'
      },
      subtitle: {
          style: {
              position: 'absolute',
              right: '0px',
              bottom: '10px'
          }
      },
      legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'top',
          x: -150,
          y: 100,
          floating: true,
          borderWidth: 1,
          # backgroundColor: "(Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'".js_code
          # or directly give the color code
          backgroundColor: "#FF2343"
      },
      xAxis: {
          categories: [
              'Monday',
              'Tuesday',
              'Wednesday',
              'Thursday',
              'Friday',
              'Saturday',
              'Sunday'
          ]
      },
      yAxis: {
          title: {
              text: 'Number of units'
          },
          labels: {
              formatter: "function () {
                                return this.value;
                            }".js_code
          },
          min: 0
      },
      plotOptions: {
          area: {
              fillOpacity: 0.5
          }
      }
    }

    series_dt = [
      {
        name: 'John',
        data: [3, 4, 3, 5, 4, 10, 12]
      }, {
          name: 'Jane',
          data: [1, 3, 4, 3, 3, 5, 4]
      }
    ]
area_invert = Daru::View::Plot.new
area_invert.chart.options = opts;
area_invert.chart.series_data = series_dt
area_invert.show_in_iruby

   # Area chart : areaspline
    opts = {
      chart: {
          type: 'areaspline'
      },
      title: {
          text: 'Average fruit consumption during one week'
      },
      legend: {
          layout: 'vertical',
          align: 'left',
          verticalAlign: 'top',
          x: 150,
          y: 100,
          floating: true,
          borderWidth: 1,
          backgroundColor: '#FFFFFF'
      },
      xAxis: {
          categories: [
              'Monday',
              'Tuesday',
              'Wednesday',
              'Thursday',
              'Friday',
              'Saturday',
              'Sunday'
          ],
          plotBands: [{ #visualize the weekend
              from: 4.5,
              to: 6.5,
              color: 'rgba(68, 170, 213, .2)'
          }]
      },
      yAxis: {
          title: {
              text: 'Fruit units'
          }
      },
      tooltip: {
          shared: true,
          valueSuffix: ' units'
      },
      credits: {
          enabled: false
      },
      plotOptions: {
          areaspline: {
              fillOpacity: 0.5
          }
      }
    }

    series_dt = [
      {
        name: 'John',
        data: [3, 4, 3, 5, 4, 10, 12]
      }, {
        name: 'Jane',
        data: [1, 3, 4, 3, 3, 5, 4]
      }
    ]
area_spline = Daru::View::Plot.new
area_spline.chart.options = opts;
area_spline.chart.series_data = series_dt
area_spline.show_in_iruby

# todo: arearange example. For arearange highcharts-more.js needed