import QtQuick 2.0

Rectangle {
   id: root
   width: 360
   height: 360
   state: "month"

   ListModel {
       id: dayData
       Component.onCompleted: {
           var data_points = [50,0,7,2,6,2,7,9]
           for (var i = 0; i < data_points.length; i++)
               append({'value': data_points[i]})
       }
   }

   ListModel {
       id: weekData
       Component.onCompleted: {
           var data_points = [50,9,14,10,12,11,13,14]
           for (var i = 0; i < data_points.length; i++)
               append({'value': data_points[i]})
       }
   }

   ListModel {
       id: monthData
       Component.onCompleted: {
           var data_points = [50,15,14,18,19,30,40,35]
           for (var i = 0; i < data_points.length; i++)
               append({'value': data_points[i]})
       }
   }

   //モードの切替
   Row {
       id: tabs
       Repeater {
           model: ['day', 'week', 'month']
           delegate: MouseArea {
               width: 100
               height: 20
               Text {
                   anchors.centerIn: parent
                   text: '1 %1'.arg(model.modelData)
               }
               onClicked: root.state = model.modelData
           }
       }
   }

   //絵を描く
   Canvas {
       id:canvas
       anchors.top: tabs.bottom
       anchors.left: parent.left
       anchors.right: parent.right
       anchors.bottom: parent.bottom
       anchors.margins: 10
       property string strokeStyle:"#dc9ee7"
       property string fillStyle:"red"
       property int lineWidth: 1
       property bool fill:false
       property bool stroke:true
       property real alpha:0.8
       property real scaleX : 1
       property real scaleY : 1
       property real centerX: 0//width / 2
       property real centerY: height
       property var model: monthData

       antialiasing: true
       renderTarget: Canvas.Image
       renderStrategy: Canvas.Immediate

       //各種プロパティの変更イベントで再描画させる
       onLineWidthChanged:requestPaint();
       onFillChanged:requestPaint();
       onStrokeChanged:requestPaint();
       onAlphaChanged:requestPaint();
       onScaleXChanged:requestPaint();
       onScaleYChanged:requestPaint();
       onModelChanged: requestPaint()

       onPaint: {
           if (typeof model === 'undefined') return
           var pich = canvas.width / (model.count - 1);
           var ctx = canvas.getContext('2d');
           //状態保存
           ctx.save();
           //描画エリアのクリア
           ctx.clearRect(0, 0, canvas.width, canvas.height);
           //各種設定
           ctx.fillStyle = canvas.fillStyle;
           //中心をずらす
           ctx.translate(centerX, centerY);
           //拡縮する
           ctx.scale(canvas.scaleX, canvas.scaleY);
           //回転する
//            ctx.rotate(canvas.rotate);
           //パス描画の開始
           ctx.beginPath();
           //グラフ
           ctx.moveTo(0, -model.get(0).value*2);
           for(var i=1; i<model.count; i++){
               ctx.lineTo(i*pich, -model.get(i).value*2);
           }
           //塗りを適用する
           if (canvas.fill)    ctx.fill();
           //ストロークを適用させる
           if (canvas.stroke)  ctx.stroke();
           //状態復帰
           ctx.restore();
       }
   }

   //状態管理
   states: [
       State{
           name: "month"
           PropertyChanges {
               target: canvas
               state: 'month'
               model: monthData
           }
       },
       State{
           name: "week"
           PropertyChanges {
               target: canvas
               state: 'week'
               model: weekData
           }
       },
       State{
           name: "day"
           PropertyChanges {
               target: canvas
               state: 'day'
               model: dayData
           }
       }
   ]

   transitions: [
       Transition {
           // skip the first animation
           from: ""
           to: "*"
       },
       Transition {
           SequentialAnimation {
               NumberAnimation { target: canvas; property: "scaleX"; to: root.scaleFactor(canvas.state, root.state); duration: 500; easing.type: Easing.InOutQuad }
               PropertyAction { target: canvas; property: "scaleX"; value: 1 }
           }
       }
   ]

   //うにょーんてするスケールサイズを求める
   property var scaleFactors: {'month': 1, 'week': 4, 'day': 4*7}
   function scaleFactor(from, to) {
       switch(from) {
       case "month": return scaleFactors[to]
       case "week": return scaleFactors[to] / scaleFactors[from]
       case "day": return 1 / scaleFactors[from]
       }
       return 1
   }
}