mirror of https://github.com/doccano/doccano.git
Hironsan
5 years ago
9 changed files with 242 additions and 2 deletions
Split View
Diff Options
-
13frontend/api/db/stats.json
-
2frontend/api/index.js
-
11frontend/api/routes/stats.js
-
43frontend/components/molecules/BarChart.vue
-
28frontend/components/molecules/DoughnutChart.vue
-
2frontend/package.json
-
94frontend/pages/projects/_id/statistics/index.vue
-
13frontend/services/statistics.service.js
-
38frontend/yarn.lock
@ -0,0 +1,13 @@ |
|||
{ |
|||
"label": { |
|||
"LOC": 1838, |
|||
"MISC": 922, |
|||
"ORG": 1340, |
|||
"PER": 1842 |
|||
}, |
|||
"user": { |
|||
"hironsan": 5942 |
|||
}, |
|||
"total": 3250, |
|||
"remaining": 645 |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
const fs = require('fs') |
|||
const express = require('express') |
|||
const router = express.Router() |
|||
let db = JSON.parse(fs.readFileSync('./api/db/stats.json', 'utf8')) |
|||
|
|||
// Get statistics.
|
|||
router.get('/', (req, res) => { |
|||
res.json(db) |
|||
}) |
|||
|
|||
module.exports = router |
|||
@ -0,0 +1,43 @@ |
|||
<script> |
|||
import { HorizontalBar, mixins } from 'vue-chartjs' |
|||
const { reactiveProp } = mixins |
|||
|
|||
export default { |
|||
extends: HorizontalBar, |
|||
mixins: [reactiveProp], |
|||
props: { |
|||
chartData: { |
|||
type: Object, |
|||
default: () => {}, |
|||
required: true |
|||
} |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
options: { |
|||
scales: { |
|||
yAxes: [ |
|||
{ |
|||
barPercentage: 0.3 |
|||
} |
|||
], |
|||
xAxes: [ |
|||
{ |
|||
ticks: { |
|||
beginAtZero: true, |
|||
min: 0 |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
maintainAspectRatio: false |
|||
} |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
this.renderChart(this.chartData, this.options) |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,28 @@ |
|||
<script> |
|||
import { Doughnut, mixins } from 'vue-chartjs' |
|||
const { reactiveProp } = mixins |
|||
|
|||
export default { |
|||
extends: Doughnut, |
|||
mixins: [reactiveProp], |
|||
props: { |
|||
chartData: { |
|||
type: Object, |
|||
default: () => {}, |
|||
required: true |
|||
} |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
options: { |
|||
maintainAspectRatio: false |
|||
} |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
this.renderChart(this.chartData, this.options) |
|||
} |
|||
} |
|||
</script> |
|||
@ -1,9 +1,99 @@ |
|||
<template> |
|||
<div /> |
|||
<v-container fluid> |
|||
<v-row> |
|||
<v-col |
|||
cols="12" |
|||
lg="4" |
|||
> |
|||
<v-card> |
|||
<doughnut-chart |
|||
:chart-data="progressStat" |
|||
/> |
|||
</v-card> |
|||
</v-col> |
|||
<v-col |
|||
cols="12" |
|||
lg="4" |
|||
> |
|||
<v-card> |
|||
<bar-chart |
|||
:chart-data="labelStat" |
|||
/> |
|||
</v-card> |
|||
</v-col> |
|||
<v-col |
|||
cols="12" |
|||
lg="4" |
|||
> |
|||
<v-card> |
|||
<bar-chart |
|||
:chart-data="userStat" |
|||
/> |
|||
</v-card> |
|||
</v-col> |
|||
</v-row> |
|||
</v-container> |
|||
</template> |
|||
|
|||
<script> |
|||
import DoughnutChart from '@/components/molecules/DoughnutChart' |
|||
import BarChart from '@/components/molecules/BarChart' |
|||
import StatisticsService from '@/services/statistics.service' |
|||
|
|||
export default { |
|||
layout: 'project' |
|||
layout: 'project', |
|||
|
|||
components: { |
|||
DoughnutChart, |
|||
BarChart |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
progressStat: {}, |
|||
userStat: {}, |
|||
labelStat: {} |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
StatisticsService.getStatistics().then((response) => { |
|||
this.labelStat = this.makeData(response.label, 'Label stats') |
|||
this.userStat = this.makeData(response.user, 'User stats') |
|||
const complete = response.total - response.remaining |
|||
const incomplete = response.remaining |
|||
this.progressStat = { |
|||
datasets: [{ |
|||
data: [complete, incomplete], |
|||
backgroundColor: ['#00d1b2', '#ffdd57'] |
|||
}], |
|||
|
|||
labels: [ |
|||
'Completed', |
|||
'Incomplete' |
|||
] |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
methods: { |
|||
makeData(object, label) { |
|||
const labels = Object.keys(object) |
|||
const counts = Object.values(object) |
|||
const res = { |
|||
labels: labels, |
|||
datasets: [{ |
|||
label: label, |
|||
backgroundColor: '#00d1b2', |
|||
data: counts |
|||
}] |
|||
} |
|||
return res |
|||
} |
|||
}, |
|||
|
|||
validate({ params }) { |
|||
return /^\d+$/.test(params.id) |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,13 @@ |
|||
import ApiService from '@/services/api.service' |
|||
|
|||
class StatisticsService { |
|||
constructor() { |
|||
this.request = new ApiService() |
|||
} |
|||
|
|||
getStatistics(projectId) { |
|||
return this.request.get(`/projects/${projectId}/statistics`) |
|||
} |
|||
} |
|||
|
|||
export default new StatisticsService() |
|||
Write
Preview
Loading…
Cancel
Save