Client - add total label on chart

This commit is contained in:
Sam 2021-09-20 18:23:05 +02:00
parent cebf877a6e
commit 795599ad46
6 changed files with 62 additions and 22 deletions

View File

@ -12,6 +12,7 @@
"dependencies": { "dependencies": {
"axios": "^0.21.1", "axios": "^0.21.1",
"chart.js": "^3.5.1", "chart.js": "^3.5.1",
"chartjs-plugin-datalabels": "^2.0.0",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"date-fns": "^2.23.0", "date-fns": "^2.23.0",
"date-fns-tz": "^1.1.6", "date-fns-tz": "^1.1.6",

View File

@ -1,11 +1,12 @@
<template> <template>
<div class="chart"> <div class="chart">
<BarChart v-bind="barChartProps" /> <BarChart v-bind="barChartProps" class="bar-chart" />
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Chart, ChartData, ChartOptions, registerables } from 'chart.js' import { Chart, ChartData, ChartOptions, registerables } from 'chart.js'
import ChartDataLabels from 'chartjs-plugin-datalabels'
import { ComputedRef, PropType, computed, defineComponent } from 'vue' import { ComputedRef, PropType, computed, defineComponent } from 'vue'
import { BarChart, useBarChart } from 'vue-chart-3' import { BarChart, useBarChart } from 'vue-chart-3'
@ -13,6 +14,7 @@
import { formatTooltipValue } from '@/utils/tooltip' import { formatTooltipValue } from '@/utils/tooltip'
Chart.register(...registerables) Chart.register(...registerables)
Chart.register(ChartDataLabels)
export default defineComponent({ export default defineComponent({
name: 'Chart', name: 'Chart',
@ -34,6 +36,14 @@
}, },
}, },
setup(props) { setup(props) {
// eslint-disable-next-line
function getNumber(value: any): number {
return isNaN(value) ? 0 : +value
}
// eslint-disable-next-line
function getSum(total: any, value: any): number {
return getNumber(total) + getNumber(value)
}
let chartData: ComputedRef<ChartData<'bar'>> = computed(() => ({ let chartData: ComputedRef<ChartData<'bar'>> = computed(() => ({
labels: props.labels, labels: props.labels,
datasets: props.datasets, datasets: props.datasets,
@ -42,7 +52,9 @@
responsive: true, responsive: true,
maintainAspectRatio: true, maintainAspectRatio: true,
layout: { layout: {
padding: 5, padding: {
top: 22,
},
}, },
scales: { scales: {
x: { x: {
@ -64,6 +76,20 @@
}, },
}, },
plugins: { plugins: {
datalabels: {
anchor: 'end',
align: 'end',
formatter: function (value, context) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const total: number = context.chart.data.datasets
.map((d) => d.data[context.dataIndex])
.reduce((total, value) => getSum(total, value), 0)
return context.datasetIndex === 5 && total > 0
? formatTooltipValue(props.displayedData, total, false)
: null
},
},
legend: { legend: {
display: false, display: false,
}, },

View File

@ -8,7 +8,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" scoped>
import { ComputedRef, PropType, computed, defineComponent } from 'vue' import { ComputedRef, PropType, computed, defineComponent } from 'vue'
import Chart from '@/components/Common/StatsChart/Chart.vue' import Chart from '@/components/Common/StatsChart/Chart.vue'
@ -72,14 +72,8 @@
@import '~@/scss/base'; @import '~@/scss/base';
.stat-chart { .stat-chart {
.chart { .chart {
height: 335px; padding: $default-padding;
} max-height: 100%;
}
@media screen and (max-width: $small-limit) {
.stat-chart {
.chart {
height: 280px;
}
} }
} }
</style> </style>

View File

@ -129,9 +129,22 @@
}) })
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
@import '~@/scss/base'; @import '~@/scss/base';
.user-month-stats {
::v-deep(.stat-chart) {
.chart {
.bar-chart {
height: 280px;
}
@media screen and (max-width: $small-limit) {
.bar-chart {
height: 100%;
}
}
}
}
.chart-radio { .chart-radio {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -142,4 +155,5 @@
font-weight: normal; font-weight: normal;
} }
} }
}
</style> </style>

View File

@ -6,7 +6,7 @@
<div class="container dashboard-container"> <div class="container dashboard-container">
<div class="left-container dashboard-sub-container"> <div class="left-container dashboard-sub-container">
<UserCalendar :user="authUser" /> <UserCalendar :user="authUser" />
<!-- <UserMonthStats :user="authUser" />--> <UserMonthStats :user="authUser" />
<!-- <UserRecords />--> <!-- <UserRecords />-->
</div> </div>
<div class="right-container dashboard-sub-container"> <div class="right-container dashboard-sub-container">
@ -21,7 +21,7 @@
import Timeline from '@/components/Dashboard/Timeline/index.vue' import Timeline from '@/components/Dashboard/Timeline/index.vue'
import UserCalendar from '@/components/Dashboard/UserCalendar/index.vue' import UserCalendar from '@/components/Dashboard/UserCalendar/index.vue'
// import UserMonthStats from '@/components/Dashboard/UserMonthStats.vue' import UserMonthStats from '@/components/Dashboard/UserMonthStats.vue'
// import UserRecords from '@/components/Dashboard/UserRecords.vue' // import UserRecords from '@/components/Dashboard/UserRecords.vue'
import UserStatsCards from '@/components/Dashboard/UserStartsCards/index.vue' import UserStatsCards from '@/components/Dashboard/UserStartsCards/index.vue'
import { USER_STORE } from '@/store/constants' import { USER_STORE } from '@/store/constants'
@ -33,7 +33,7 @@
components: { components: {
Timeline, Timeline,
UserCalendar, UserCalendar,
// UserMonthStats, UserMonthStats,
// UserRecords, // UserRecords,
UserStatsCards, UserStatsCards,
}, },

View File

@ -2836,6 +2836,11 @@ chart.js@^3.5.1:
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.1.tgz#73e24d23a4134a70ccdb5e79a917f156b6f3644a" resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.1.tgz#73e24d23a4134a70ccdb5e79a917f156b6f3644a"
integrity sha512-m5kzt72I1WQ9LILwQC4syla/LD/N413RYv2Dx2nnTkRS9iv/ey1xLTt0DnPc/eWV4zI+BgEgDYBIzbQhZHc/PQ== integrity sha512-m5kzt72I1WQ9LILwQC4syla/LD/N413RYv2Dx2nnTkRS9iv/ey1xLTt0DnPc/eWV4zI+BgEgDYBIzbQhZHc/PQ==
chartjs-plugin-datalabels@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.0.0.tgz#caacefb26803d968785071eab012dde8746c5939"
integrity sha512-WBsWihphzM0Y8fmQVm89+iy99mmgejmj5/jcsYqwxSioLRL/zqJ4Scv/eXq5ZqvG3TpojlGzZLeaOaSvDm7fwA==
check-error@^1.0.2: check-error@^1.0.2:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82" resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"