Change chart usage

This commit is contained in:
Torjus Håkestad 2021-04-10 17:55:32 +02:00
parent a51fb5d80b
commit 53f5418275
3 changed files with 16 additions and 2 deletions

View File

@ -26,6 +26,7 @@
"vue-router": "^3.5.1" "vue-router": "^3.5.1"
}, },
"devDependencies": { "devDependencies": {
"@types/chart.js": "^2.9.32",
"@types/d3": "^6.3.0", "@types/d3": "^6.3.0",
"@types/faker": "^5.5.1", "@types/faker": "^5.5.1",
"@types/randomcolor": "^0.5.5", "@types/randomcolor": "^0.5.5",

View File

@ -52,11 +52,13 @@
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'; import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { StatResult } from '@/apiary/apiary'; import { StatResult } from '@/apiary/apiary';
import axios from 'axios'; import axios from 'axios';
import Chart from 'chart.js/auto'; import { Chart, ArcElement, Legend, DoughnutController, Title } from 'chart.js';
import randomColor from 'randomcolor'; import randomColor from 'randomcolor';
export type StatType = 'username' | 'password' | 'ip' | 'country' | 'total'; export type StatType = 'username' | 'password' | 'ip' | 'country' | 'total';
Chart.register(ArcElement, Legend, DoughnutController, Title);
@Component @Component
export default class StatsPie extends Vue { export default class StatsPie extends Vue {
@Prop() private statType!: StatType; @Prop() private statType!: StatType;
@ -161,7 +163,6 @@ export default class StatsPie extends Vue {
type: 'doughnut', type: 'doughnut',
data: { data: {
labels: headers, labels: headers,
options: {},
datasets: [ datasets: [
{ {
data: values, data: values,

View File

@ -988,6 +988,13 @@
"@types/connect" "*" "@types/connect" "*"
"@types/node" "*" "@types/node" "*"
"@types/chart.js@^2.9.32":
version "2.9.32"
resolved "https://registry.yarnpkg.com/@types/chart.js/-/chart.js-2.9.32.tgz#b17d9a8c41ad348183a2ce041ebdeef892998251"
integrity sha512-d45JiRQwEOlZiKwukjqmqpbqbYzUX2yrXdH9qVn6kXpPDsTYCo6YbfFOlnUaJ8S/DhJwbBJiLsMjKpW5oP8B2A==
dependencies:
moment "^2.10.2"
"@types/connect-history-api-fallback@*": "@types/connect-history-api-fallback@*":
version "1.3.4" version "1.3.4"
resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.4.tgz#8c0f0e6e5d8252b699f5a662f51bdf82fd9d8bb8" resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.4.tgz#8c0f0e6e5d8252b699f5a662f51bdf82fd9d8bb8"
@ -6632,6 +6639,11 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
dependencies: dependencies:
minimist "^1.2.5" minimist "^1.2.5"
moment@^2.10.2:
version "2.29.1"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
move-concurrently@^1.0.1: move-concurrently@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92" resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"