feat: replace charts with charts built on coreui-vue-chartjs library

2019-04-15 15:09:35 +02:00
parent d938bd4b9b
commit 4663251573
29 changed files with 788 additions and 814 deletions
@@ -0,0 +1,53 @@
+<template>
+  <CChartRadar
+    :datasets="defaultDatasets"
+    :options="defaultOptions"
+    :labels="[
+      'Eating', 'Drinking', 'Sleeping', 'Designing',
+      'Coding', 'Cycling', 'Running'
+    ]"
+  />
+</template>
+
+<script>
+import { customTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
+import { CChartRadar } from '@coreui/coreui-vue-chartjs'
+
+export default {
+  name: 'CChartRadarExample',
+  components: { CChartRadar },
+  computed: {
+    defaultDatasets () {
+      return [
+        {
+          label: '2017',
+          backgroundColor: 'rgba(179,181,198,0.2)',
+          borderColor: 'rgba(179,181,198,1)',
+          pointBackgroundColor: 'rgba(179,181,198,1)',
+          pointBorderColor: '#fff',
+          pointHoverBackgroundColor: '#fff',
+          pointHoverBorderColor: 'rgba(179,181,198,1)',
+          tooltipLabelColor: 'rgba(179,181,198,1)',
+          data: [65, 59, 90, 81, 56, 55, 40]
+        },
+        {
+          label: '2018',
+          backgroundColor: 'rgba(255,99,132,0.2)',
+          borderColor: 'rgba(255,99,132,1)',
+          pointBackgroundColor: 'rgba(255,99,132,1)',
+          pointBorderColor: '#fff',
+          pointHoverBackgroundColor: '#fff',
+          pointHoverBorderColor: 'rgba(255,99,132,1)',
+          tooltipLabelColor: 'rgba(255,99,132,1)',
+          data: [28, 48, 40, 19, 96, 27, 100]
+        }
+      ]
+    },
+    defaultOptions () {
+      return {
+        aspectRatio: 1.5
+      }
+    }
+  }
+}
+</script>