{% extends base.html %}

{% block title %}<title>{{ title }}</title>{% end %}

{% block content %}

{% if handler.request.path == '/chart' %}

{% if handler.application.db %}
<div class="alert alert-success">
  <div>
    <p>POST /chart/name, 其中name是chart的名字</p>
    <p>body为json格式字符串，为一个list，每个成员都是一张图表</p>
    <p>支持3种格式的图表，分别为折线图(line)、直方图(column)、饼图(pie)</p>
  </div>
  <pre class="layui-code">
curl -XDELETE http://{{ handler.request.host }}/chart/test

curl -XPOST http://{{ handler.request.host }}/chart/test -d '[
    {
        "type": "line",
        "title": "line chart",
        "xAxis": ["一月", "二月", "三月", "四月", "五月", "六月"],
        "series": [
            {
                "name": "东京",
                "visible": true,
                "data": [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
            },
            {
                "name": "纽约",
                "visible": false,
                "data": [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0]
            }
        ]
    },
    {
        "type": "column",
        "title": "column chart",
        "xAxis": ["一月", "二月", "三月", "四月", "五月", "六月"],
        "series": [
            {
                "name": "东京",
                "visible": true,
                "data": [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
            },
            {
                "name": "纽约",
                "visible": false,
                "data": [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0]
            }
        ]
    },
    {
        "type": "pie",
        "title": "pie chart",
        "series": [
            {
                "name": "day money",
                "data": [
                    ["one", 1.0],
                    ["two", 2.0],
                    ["three", 3.0]
                ]
            }
        ]
    }
]'</pre>
  <pre></pre>
</div>

{% else %}
<div class="alert alert-danger">请先安装mongodb用于数据存储(./install.sh mongo)</div>
{% end %}

{% end %}

{% end %}

{% block js %}
<script src="{{ static_url('js/highcharts.min.js') }}"></script>
<script>
  layui.use('code', function(){
    layui.code({
      skin: 'notepad'
    });
  });

  $(function () {
    $(document).on('click', '.hide-all', function(){
      var chart = $(this).parents('.chart-wrap').children('.chart-container').highcharts();
      for (var i = 0; i < chart.series.length; i++)
        chart.series[i].hide();
    });
    $(document).on('click', '.show-all', function(){
      var chart = $(this).parents('.chart-wrap').children('.chart-container').highcharts();
      for (var i = 0; i < chart.series.length; i++)
        chart.series[i].show();
    });

    $.get(location.pathname + '?f=json', function(ret){
      for(var i in ret.containers){
        $('#content').append('<div class="chart-wrap"><div class="chart-container" id="container-{0}" style="margin: 50px;"></div></div>'.format(i));
        $('#container-{0}'.format(i)).highcharts( ret.containers[i] );
      }
    });
  })
</script>
{% end %}
