refactor: new project structure

2018-03-05 15:35:14 +01:00
parent 0347970e65
commit 7dcd6bff72
273 changed files with 102 additions and 5945 deletions
@@ -0,0 +1,100 @@
+<script>
+import { Line } from 'vue-chartjs'
+
+// const brandPrimary = '#20a8d8'
+const brandSuccess = '#4dbd74'
+const brandInfo = '#63c2de'
+const brandDanger = '#f86c6b'
+
+function convertHex (hex, opacity) {
+  hex = hex.replace('#', '')
+  const r = parseInt(hex.substring(0, 2), 16)
+  const g = parseInt(hex.substring(2, 4), 16)
+  const b = parseInt(hex.substring(4, 6), 16)
+
+  const result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')'
+  return result
+}
+
+function random (min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min)
+}
+
+export default {
+  extends: Line,
+  props: ['height'],
+  mounted () {
+    var elements = 27
+    var data1 = []
+    var data2 = []
+    var data3 = []
+
+    for (var i = 0; i <= elements; i++) {
+      data1.push(random(50, 200))
+      data2.push(random(80, 100))
+      data3.push(65)
+    }
+    this.renderChart({
+      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S'],
+      datasets: [
+        {
+          label: 'My First dataset',
+          backgroundColor: convertHex(brandInfo, 10),
+          borderColor: brandInfo,
+          pointHoverBackgroundColor: '#fff',
+          borderWidth: 2,
+          data: data1
+        },
+        {
+          label: 'My Second dataset',
+          backgroundColor: 'transparent',
+          borderColor: brandSuccess,
+          pointHoverBackgroundColor: '#fff',
+          borderWidth: 2,
+          data: data2
+        },
+        {
+          label: 'My Third dataset',
+          backgroundColor: 'transparent',
+          borderColor: brandDanger,
+          pointHoverBackgroundColor: '#fff',
+          borderWidth: 1,
+          borderDash: [8, 5],
+          data: data3
+        }
+      ]
+    }, {
+      maintainAspectRatio: false,
+      legend: {
+        display: false
+      },
+      scales: {
+        xAxes: [{
+          gridLines: {
+            drawOnChartArea: false
+          }
+        }],
+        yAxes: [{
+          ticks: {
+            beginAtZero: true,
+            maxTicksLimit: 5,
+            stepSize: Math.ceil(250 / 5),
+            max: 250
+          },
+          gridLines: {
+            display: true
+          }
+        }]
+      },
+      elements: {
+        point: {
+          radius: 0,
+          hitRadius: 10,
+          hoverRadius: 4,
+          hoverBorderWidth: 3
+        }
+      }
+    })
+  }
+}
+</script>