/**
* @Author Sean
* @Date 2019/5/8
*/
<template>
    <h-view class="public-style" style="height: 100%">
        <h-content>
          <div class="aws-container aws-absolute">
            <div class="aws-content">
              <nav>
                <div class="aws-button" style="float: left;">
        <span data-btn-chart="webVisit" class="aws-active">
          Web Visit
        </span>
                </div>
                <div class="aws-button" style="float: right;">
        <span data-btn-chart="fileDownload">
          File Download
        </span>
                </div>
              </nav>
              <div class="aws-chart">
                <canvas id="statsChart" height="125"></canvas>
              </div>
            </div>
            <!--<p class="tip" style="color: #fff;">Refering to
              <a style="color: #ccc;" href="https://codepen.io/novalagung/pen/yNgPNV" target="blank">https://codepen.io/novalagung/pen/yNgPNV</a>
            </p>-->
            <div class="clearfix"></div>
            <div class="aws-tooltip">
              <span> </span>
              <span> </span>
            </div>
          </div>
        </h-content>
    </h-view>
</template>

<script>
    export default {
        data() {
            return {}
        },
        created: function () {
        },
        mounted: function () {
          this.guideArc();
        },
        updated: function () {
        },
        destroyed: function () {
        },
        methods: {
          guideArc(){
            var canvasOffsetTop = $('#statsChart').position().top;
            var canvasOffsetLeft = $('#statsChart').position().left;

            var chartData = {
              webVisit: {
                title: 'Web Visits',
                prevTotalDataPoints: 3000,
                dataPoints: [{
                  'date': '2015-01-01T17:00:00.000Z',
                  'value': 570
                }, {
                  'date': '2015-01-05T17:00:00.000Z',
                  'value': 525
                }, {
                  'date': '2015-01-09T17:00:00.000Z',
                  'value': 560
                }, {
                  'date': '2015-01-13T17:00:00.000Z',
                  'value': 550
                }, {
                  'date': '2015-01-17T17:00:00.000Z',
                  'value': 555
                }, {
                  'date': '2015-01-21T17:00:00.000Z',
                  'value': 580
                }, {
                  'date': '2015-01-25T17:00:00.000Z',
                  'value': 560
                }, {
                  'date': '2015-01-29T17:00:00.000Z',
                  'value': 560
                }]
              },
              fileDownload: {
                title: 'File Downloads',
                prevTotalDataPoints: 1200,
                dataPoints: [{
                  'date': '2015-01-01T17:00:00.000Z',
                  'value': 110
                }, {
                  'date': '2015-01-05T17:00:00.000Z',
                  'value': 130
                }, {
                  'date': '2015-01-09T17:00:00.000Z',
                  'value': 105
                }, {
                  'date': '2015-01-13T17:00:00.000Z',
                  'value': 115
                }, {
                  'date': '2015-01-17T17:00:00.000Z',
                  'value': 85
                }, {
                  'date': '2015-01-21T17:00:00.000Z',
                  'value': 120
                }, {
                  'date': '2015-01-25T17:00:00.000Z',
                  'value': 135
                }, {
                  'date': '2015-01-29T17:00:00.000Z',
                  'value': 110
                }]
              }
            };
            _.each(chartData, function(e) {
              e.value = _.reduce(e.dataPoints, function(p, f) {
                return p + f.value;
              }, 0);
              e.percentage = (e.value - e.prevTotalDataPoints) / e.prevTotalDataPoints * 100;
              e.status = e.value > e.prevTotalDataPoints ? 'up' : 'down';
            });

            var chart = new F2.Chart({
              id: 'statsChart',
              pixelRatio: window.devicePixelRatio,
              padding: [5, 'auto', 30]
            });
            chart.source(chartData.webVisit.dataPoints, {
              date: {
                type: 'timeCat',
                mask: 'D.MMM',
                range: [0, 1],
                tickCount: 8
              },
              value: {
                tickCount: 5
              }
            });
            chart.axis('date', {
              label: {
                fill: '#fefefe'
              },
              tickLine: {
                length: 5,
                stroke: '#9ec3b8',
                lineWidth: 1
              },
              line: {
                stroke: '#9ec3b8'
              }
            });
            chart.axis('value', {
              label: {
                fill: '#fefefe'
              },
              line: {
                stroke: '#9ec3b8'
              },
              grid: {
                lineDash: null,
                stroke: '#54b858'
              }
            });
            chart.tooltip({
              custom: true,
              onChange: function onChange(ev) {
                var tooltipEl = $('.aws-tooltip'),
                  whichChart = $("[data-btn-chart].aws-active").attr('data-btn-chart'),
                  currentData,
                  text;

                currentData = ev.items[0];
                tooltipEl.removeClass('above below aws-for-file');

                text = currentData.value;

                if (chartData[whichChart].title.toLowerCase().indexOf('web') == -1) tooltipEl.addClass('aws-for-file');

                tooltipEl.html(['<span>' + moment(currentData.date).format("ddd, MMM DD, YYYY") + '</span>', '<span>' + chartData[whichChart].title + ': <b>' + text + '</b></span>'].join(''));
                tooltipEl.css({
                  opacity: 1,
                  left: canvasOffsetLeft + currentData.x - parseInt(tooltipEl.css('width').replace('px', ''), 0) / 2.0 + 'px',
                  top: canvasOffsetTop + currentData.y - tooltipEl.outerHeight() - 15 + 'px'
                });
              },
              onHide: function onHide() {
                var tooltipEl = $('.aws-tooltip');
                tooltipEl.css({
                  opacity: 0
                });
              }
            });
            chart.line().position('date*value').color('#fff').shape('smooth').size(4);
            chart.area().position('date*value').color('#3d9e40').shape('smooth').style({
              fillOpacity: 1
            });
            chart.render();

            $('[data-btn-chart]').on('click', function() {
              var $self = $(this),
                dataBtnChart = $self.attr('data-btn-chart'),
                whichChartData = chartData[dataBtnChart],
                targetDataPoints = whichChartData.dataPoints;

              if ($self.hasClass('aws-active')) return;

              $self.closest('nav').find('.aws-active').removeClass('aws-active');
              $self.addClass('aws-active');

              chart.changeData(targetDataPoints);
            });
          }
        }
    }
</script>

<style scoped lang="less" rel="stylesheet">
    .public-style {
      .content{
        .aws-absolute {
          position: absolute;
        }

        .aws-container {
          overflow: hidden;
          position: relative;
          margin: 0px auto;
          width: 100vw;
          background-color: #4dae50;
          -moz-box-shadow: 1px 1px 0.5px 0.5px #e1e1e1;
          -webkit-box-shadow: 1px 1px 0.5px 0.5px #e1e1e1;
          box-shadow: 1px 1px 0.5px 0.5px #e1e1e1;
        }
        .aws-container .aws-content {
          padding: 8.53vw;
        }
        .aws-container .aws-content nav {
          font-size: 3.73vw;
          margin-bottom: 16vw;
        }

        .aws-container .aws-content nav {
          font-size: 3.73vw;
          margin-bottom: 16vw;
        }

        .aws-container .aws-content nav span {
          color: #87c98a;
          cursor: pointer;
          text-transform: uppercase;
        }
        .aws-container .aws-content nav span.aws-active {
          color: #f2f2f2;
        }
        .aws-container .aws-tooltip {
          -moz-box-shadow: 1px 1px 0.5px 0.5px rgba(0, 0, 0, 0.3);
          -webkit-box-shadow: 1px 1px 0.5px 0.5px rgba(0, 0, 0, 0.3);
          box-shadow: 1px 1px 0.5px 0.5px rgba(0, 0, 0, 0.3);
          position: absolute;
          z-index: 99;
          background-color: rgba(255, 255, 255, 0.8);
          padding: 2.4vw;
          border-radius: 3px;
          text-align: center;
          width: 32vw;
        }
        .aws-container .aws-tooltip.aws-for-file {
          width: 42.67vw;
        }
        .aws-container .aws-tooltip:after {
          content: " ";
          width: 0;
          height: 0;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-top: 8px solid rgba(255, 255, 255, 0.8);
          position: absolute;
          left: 50%;
          margin-left: -6px;
          bottom: -8px;
        }
        .aws-container .aws-tooltip span {
          display: block;
        }
        .aws-container .aws-tooltip span:nth-child(1) {
          font-size: 11px !important;
        }
        .aws-container .aws-tooltip span:nth-child(2) {
          font-size: 13px !important;
        }
        .aws-container #statsChart {
          width: 100%;
          height: 40vw;
        }
      }
    }
</style>
