mirror of https://github.com/doccano/doccano.git
Hironsan
5 years ago
9 changed files with 242 additions and 2 deletions
Unified 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> |
<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> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import DoughnutChart from '@/components/molecules/DoughnutChart' |
||||
|
import BarChart from '@/components/molecules/BarChart' |
||||
|
import StatisticsService from '@/services/statistics.service' |
||||
|
|
||||
export default { |
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> |
</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