Browse Source

Add first implementation of Canva.vue

To be refactored
main
Haris Razis 4 years ago
parent
commit
d9c28a4ea6
No known key found for this signature in database GPG Key ID: 86A4D290ED03FAB4
  1. 9
      web/.eslintrc.js
  2. 5
      web/.eslintrc.json
  3. 1517
      web/package-lock.json
  4. 103
      web/src/components/Canva.vue
  5. 14
      web/src/components/Points.vue

9
web/.eslintrc.js

@ -0,0 +1,9 @@
module.exports = {
rules: {
quotes: ["error", "single"]
},
extends: [
"plugin:vue/vue3-recommended",
"@vue/typescript"
]
}

5
web/.eslintrc.json

@ -1,5 +0,0 @@
{
"rules": {
"quotes": ["error", "single"]
}
}

1517
web/package-lock.json

File diff suppressed because it is too large

103
web/src/components/Canva.vue

@ -1,70 +1,81 @@
<template>
<canvas id="chart"></canvas>
<canvas id="chart" />
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { Component, Prop } from 'vue-property-decorator';
import { Vue } from 'vue-class-component';
import { Prop } from 'vue-property-decorator';
import Chart from 'chart.js';
interface points {
client: string;
value: string;
time: string;
}
export default class Canva extends Vue {
@Prop() readonly points!: [];
@Prop() readonly points!: [points];
mounted() {
// spaggheti code, MUST refactor
let dataset = [];
let data = [];
let counter = 0;
let client_id = this.points[0].client;
//bad code - assumes clients come grouped
for (const point of this.points) {
if (point.client != client_id || counter === this.points.length - 1) {
dataset.push({
label: client_id,
borderColor: '#808080',
backgroundColor: this.getRandomColor(),
data: data,
});
client_id = point.client;
data = [];
counter++;
}
const time =
new Date(point.time).getHours() +
'.' +
new Date(point.time).getMinutes();
data.push({
x: parseFloat(time),
y: parseInt(point.value),
});
}
const ctx = document.getElementById('chart') as HTMLCanvasElement;
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [
'-60m',
'-55m',
'-50m',
'-45m',
'-40m',
'-35m',
'-30m',
'-25m',
'-20m',
'-15m',
'-10m',
'-5m',
],
datasets: [
{
// one line graph
label: 'Number of Moons',
data: [0, 0, 1, 2, 37, 42, 27, 14, null, 10, 10, 55],
borderColor: [
'#36495d',
'#36495d',
'#36495d',
'#36495d',
'#36495d',
'#36495d',
'#36495d',
'#36495d',
],
borderWidth: 3,
},
],
new Chart(ctx, {
type: 'scatter',
data: {
datasets: dataset,
},
options: {
responsive: true,
scales: {
yAxes: [
xAxes: [
{
ticks: {
beginAtZero: true,
padding: 5,
max: 60,
},
type: 'linear',
position: 'bottom',
},
],
},
},
});
}
getRandomColor(): string {
let letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
}
</script>

14
web/src/components/Points.vue

@ -6,28 +6,22 @@
<div class="panel-block">
<div class="field is-grouped">
<p class="control">
<button class="button is-success is-outlined" v-on:click="getData">
<button class="button is-success is-outlined" @click="getData">
Fetch Data
</button>
</p>
<p class="control">
<button
class="button is-success is-outlined"
v-on:click="createChart"
>
<button class="button is-success is-outlined" @click="createChart">
Create Chart
</button>
</p>
<p class="control">
<button
class="button is-success is-outlined"
v-on:click="createTable"
>
<button class="button is-success is-outlined" @click="createTable">
Create Table
</button>
</p>
<p class="control">
<button class="button is-outlined" v-on:click="clearData">
<button class="button is-outlined" @click="clearData">
Clear
</button>
</p>

Loading…
Cancel
Save