med 'indicator/static/javascripts/load_card.js' to 'card_chart.js

* set Highcharts global options in 'card_chart.js'
* 'indicator/templates/indicator/SheetDefault.html':
  added js function 'chart_getdata_draw()' to draw chart for card
* improved 'indicator.views.ajax_get_card_data_chart()'
* implemented drawing chart for 'FLOAT_TYPE' and 'RANGE_TYPE' indicators
* added datetime plugin 'momentjs':
  'indicator/static/plugins/moment/', version 2.1.0
* 'indicator/templates/indicator/NewDeleteIndex.html':
  added link button to goto 'indicator_status' SheetDefault.html page
* added option 'useHTML: true' for Highcharts; improved the display
  style of ylabels, if value >9999, then show in exponential notation
* improved drawing of 'detail_chart', and the 'detail_card_info'
* moved js global var to 'SheetDefault.html';
  renamed var 'card_detail_id' to 'detail_card_id'
* fixed js local variables problem; added 'var' keyword
* added check of 'date' for 'indicator.models.IndicatorRecord'
* ThickBox: removed param 'no1_title' from thickbox popup page's url
  placed the param 'card_id' before 'TB_iframe'
* changed to use 'ANNOTATION_TYPES' for 'sciblog.models.BlogAnnotation'
* improved 'indicator/templates/indicator/popup/IndexDesc.html'
  improved 'indicator.views.indicator_indexdesc()'
* added 'sympy' to 'env/requirements.pip'

TODO:
* BlogAnnotation: 'get_absolute_url()' -> 'IndexDesc: go_library_btn'
* detail_card_info: data table
* Data input/edit form, and validate & submit
* Highcharts xAxis labels problem ??

1 files changed, 272 insertions, 0 deletions

diff --git a/97suifangqa/apps/indicator/static/javascripts/card_chart.js b/97suifangqa/apps/indicator/static/javascripts/card_chart.js
new file mode 100644
index 0000000..42a5220
--- /dev/null
+++ b/97suifangqa/apps/indicator/static/javascripts/card_chart.js
@@ -0,0 +1,272 @@
+// set global options for hightcharts {{{
+$(function() {
+    Highcharts.setOptions ({
+        //chart: {
+        //    type: 'areaspline'
+        //    //marginLeft: 25,
+        //    //height: 223,
+        //    //spacingTop: 10,
+        //    //spacingBottom: 4
+        //    //overflow: false,
+        //    //zIndex: 5
+        //},
+        colors: ['#31B6AD'],
+        credits: {
+            enabled: false
+        },
+        legend: {
+            enabled: false
+        },
+        plotOptions: {
+            series: {
+                fillOpacity: 0.12,
+                lineWidth: 1,
+                marker: {
+                    enabled: true, //false false的时候就不会突出显示点
+                    lineColor: '#31B6AD',
+                    lineWidth: 1,
+                    radius: 3,  // 点的大小
+                    fillColor: '#FFFFFF' // 设置点中间填充的颜色
+                },
+                shadow: false
+                //threshold: null
+            }
+        },
+        title: {
+            text: null
+        },
+        tooltip: {
+            useHTML: true,
+            style: {
+                padding: '7px'
+            },
+            borderColor: '#EAEAEA'
+        },
+        xAxis: {
+            type: 'datetime',
+            dateTimeLabelFormats: {
+                day: '%m-%e',
+                month: '%Y-%m'
+            },
+            lineColor: '#CECECE',
+            gridLineColor: '#EFECEF',
+            gridLineWidth: 1,
+            tickWidth: 0,
+            labels: {
+                step: 2,
+                maxStaggerLines: 1
+            },
+            startOnTick: false,
+            endOnTick: false,
+            //tickInterval: (7 * 24 * 3600 * 1000),       // 7 days
+            tickInterval: null,
+            tickPixelInterval: 50,
+            tickColor: '#FFFFFF'
+        },
+        yAxis: {
+            title: {
+                text: null
+            },
+            min: null,
+            max: null,
+            //allowDecimals: false,
+            startOnTick: false,
+            endOnTick: false,
+            tickInterval: null,
+            tickPixelInterval: 40,
+            lineColor: '#CECECE',
+            lineWidth: 2,
+            gridLineColor: '#EFECEF',
+            gridLineWidth: 1,
+            minPadding: 0.3,
+            maxPadding: 1.2
+        }
+    });
+});
+// }}}
+
+$(document).ready(function(){
+    //详细历史记录
+    $(".detail_history").bind("click", function(){
+        // update 'detail_card_id'
+        detail_card_id = $(this).closest(".index_card").attr("id").replace('index_card_', '');
+        // check if this card has data
+        // if has no data, then exists div class="edit_icon_container"
+        if ($("#index_card_"+detail_card_id + " .edit_icon_container").length) {
+            $(".detail_card_info").hide();
+            return false;
+        }
+        // get the index title and set for the 'detail card'
+        var index_title = $("#index_card_"+detail_card_id + " .card_title").html();
+        $(".detail_card_info .card_title .title").html(index_title);
+        // set date for the 'shift_date' buttons
+        var date_fmt = 'YYYY-MM-DD';
+        var today_mm = moment();
+        var today_str = today_mm.format(date_fmt);
+        var three_month_ago_str = today_mm.clone().subtract('months', 3).format(date_fmt);
+        var six_month_ago_str = today_mm.clone().subtract('months', 6).format(date_fmt);
+        $(".recent_three_month").attr('end_date', today_str);
+        $(".recent_three_month").attr('begin_date', three_month_ago_str);
+        $(".recent_six_month").attr('end_date', today_str);
+        $(".recent_six_month").attr('begin_date', six_month_ago_str);
+        // draw chart
+        // pass default global var 'begin_date_str' and 'end_date_str'
+        // detail_chart global var: 'detail_chart'
+        // options for chart global var: 'options_chart_<id>'
+        // update global var 'detail_chart_options'
+        detail_chart_options = 'options_chart_' + detail_card_id;
+        redraw_chart(detail_chart_str, detail_chart_options,
+            begin_date_str, end_date_str
+        );
+        $(".act_card_container").addClass("move_div_2_left");
+        return false;
+    });
+
+    //切换日期
+    $(".shift_date").bind("click", function(){
+        $(".shift_date").addClass("unselected");
+        $(this).removeClass("unselected");
+        var begin_str = $(this).attr("begin_date");
+        var end_str = $(this).attr("end_date");
+        redraw_chart(detail_chart_str, detail_chart_options,
+            begin_str, end_str
+        );
+        return false;
+    });
+
+    //根据日期搜索
+    $("#search_begin_date, #search_end_date").bind("change", function(){
+        $(".shift_date").addClass("unselected");
+        var begin_str = $("#search_begin_date").val();
+        var end_str = $("#search_end_date").val();
+        redraw_chart(detail_chart_str, detail_chart_options,
+            begin_str, end_str
+        );
+        return false;
+    });
+
+    //浏览更多
+    $(".see_more_btn").bind("click", function(){
+        var btn = $(".see_more_btn");
+        var end_str = end_date_str;
+        get_card_data_table(null, end_str, false);
+        return false;
+    });
+
+    //收起历史记录
+    $(".collapse_btn").bind("click", function(){
+        // //删除图表数据
+        // var serieses = detail_chart.series;
+        // for (series_key in serieses){
+        //     serieses[series_key].remove();
+        // }
+        //删除图表
+        if (window[detail_chart_str] != null) {
+            window[detail_chart_str].destroy();
+            window[detail_chart_str] = null;
+        }
+        //删除表格数据
+        $("tr").not(".first_line").remove();
+        //隐藏div
+        $(".detail_card_info").hide();
+        //初始化详细卡片id
+        detail_card_id = "-1";
+        //添加删除div位置初始化
+        $(".act_card_container").removeClass("move_div_2_left");
+        return false;
+    });
+});
+
+// 重画历史记录图表
+// destroy the original chart and new.
+// chart_str: (string),
+//   name of global var of chart to draw;
+//   and the div id to contain the chart.
+// options_str: (string),
+//   name of global var of the chart options for drawing,
+//   used to draw the detail chart by updating its data.
+// begin, end: (string), 'YYYY-MM-DD'
+function redraw_chart(chart_str, options_str, begin, end){
+    var time = moment().valueOf();
+    $.ajax({
+        type: 'get',
+        url: indicator_url + 'ajax/get_card_data_chart',
+        data: 'card_id='+detail_card_id + '&begin='+begin + '&end='+end + '&time='+time,
+        dataType: 'json',
+        success: function(dataJson) {
+            // 设置默认起始结束时间
+            //console.log(begin);
+            //console.log(end);
+            var begin_date_js = $.datepicker.parseDate('yy-mm-dd', begin);
+            var end_date_js = $.datepicker.parseDate('yy-mm-dd', end);
+            $("#search_begin_date").datepicker("setDate", begin_date_js);
+            $("#search_end_date").datepicker("setDate", end_date_js);
+
+            //显示
+            $(".detail_card_info").show();
+
+            //删除chart已有数据
+            //var serieses = detail_chart.series;
+            //for (series_key in serieses){
+            //    serieses[series_key].remove();
+            //}
+            //更新chart数据
+            //detail_chart.addSeries({
+            //    data: dataJson,
+            //    pointStart: begin_date_log_UTC_time,
+            //    pointInterval: pointInterval
+            //});
+
+            // destroy original chart and
+            // redraw with new options and data
+            var begin_dt = moment(begin);
+            var end_dt = moment(end);
+            window[options_str].chart.renderTo = chart_str;
+            window[options_str].xAxis.min = begin_dt.valueOf();
+            window[options_str].xAxis.max = end_dt.valueOf();
+            window[options_str].series[0].data = dataJson;
+            // clickable data point
+            window[options_str].plotOptions = {
+                series: {
+                    cursor: 'pointer',
+                    point: {
+                        events: {
+                            click: function(event) {
+                                //console.log(event);
+                                //console.log(this);
+                                var date = moment(this.x).utc().format('YYYY-MM-DD');
+                                TB_show(false, indicator_url+'popup/edithistorydata?card_id='+detail_card_id+'&date='+date+'&TB_iframe=true&transfer_params&height=351&width=630', false);
+                            }
+                        }
+                    }
+                }
+            }
+            if (window[chart_str] != null) {
+                window[chart_str].destroy();
+                window[chart_str] = null;
+            }
+            window[chart_str] = new Highcharts.Chart(window[options_str]);
+
+            //更新table数据
+            //TODO
+            get_card_data_table(begin, end, true);
+        }
+    });
+}
+
+function get_card_data_table(begin, end, redraw){
+    var time = moment().valueOf();
+    $.ajax({
+        type: 'get',
+        url: indicator_url + 'ajax/get_card_data_table',
+        data: 'card_id='+detail_card_id + '&begin='+begin + '&end='+end + '&time='+time,
+        success: function(data) {
+            if(redraw){
+                $("tr").not(".first_line").remove();
+            }
+            $("table").append(data);
+        }
+    });
+}
+
+// vim: set ts=8 sw=4 tw=0 fenc=utf-8 ft=javascript: //