➕ merge pull request #314 from devmount/data-in-progress-indication

Data in progress indication
devmount · May 25, 2021 · 2c92f86 · 2c92f86
2 parents dd13cc7 + 9d95f55
commit 2c92f86
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/src/Stats.vue b/src/Stats.vue
@@ -333,13 +333,15 @@
 								:labels="yearsChartData.labels"
 								:ordinate="preferences.ordinate"
 								:abscissa="true"
+								:unfinished="active.period.end == null"
 							/>
 							<LineChart
 								v-if="tabs.total.years && preferences.sections.total.comparison"
 								:datasets="yearsComparedChartData.datasets"
 								:labels="yearsComparedChartData.labels"
 								:ordinate="preferences.ordinate"
 								:abscissa="true"
+								:unfinished="active.period.end == null"
 							/>
 							<!-- emails per quarter over total time -->
 							<LineChart
@@ -348,13 +350,15 @@
 								:labels="quartersChartData.labels"
 								:ordinate="preferences.ordinate"
 								:abscissa="true"
+								:unfinished="active.period.end == null"
 							/>
 							<LineChart
 								v-if="tabs.total.quarters && preferences.sections.total.comparison"
 								:datasets="quartersComparedChartData.datasets"
 								:labels="quartersComparedChartData.labels"
 								:ordinate="preferences.ordinate"
 								:abscissa="true"
+								:unfinished="active.period.end == null"
 							/>
 							<!-- emails per month over total time -->
 							<LineChart
@@ -363,13 +367,15 @@
 								:labels="monthsChartData.labels"
 								:ordinate="preferences.ordinate"
 								:abscissa="true"
+								:unfinished="active.period.end == null"
 							/>
 							<LineChart
 								v-if="tabs.total.months && preferences.sections.total.comparison"
 								:datasets="monthsComparedChartData.datasets"
 								:labels="monthsComparedChartData.labels"
 								:ordinate="preferences.ordinate"
 								:abscissa="true"
+								:unfinished="active.period.end == null"
 							/>
 							<!-- emails per week over total time -->
 							<LineChart
@@ -378,6 +384,7 @@
 								:labels="weeksChartData.labels"
 								:ordinate="preferences.ordinate"
 								:abscissa="true"
+								:unfinished="active.period.end == null"
 							/>
 							<LineChart
 								v-if="tabs.total.weeks && preferences.sections.total.comparison"

diff --git a/src/charts/BarChart.vue b/src/charts/BarChart.vue
@@ -36,8 +36,7 @@ export default {
 			let datasets = this.datasets
 			datasets.map(d => {
 				d.backgroundColor = context => {
-					const chart = context.chart;
-					const { ctx, chartArea } = chart;
+					const { ctx, chartArea } = context.chart;
 					if (!chartArea) return null;
 					return transparentGradientBar(ctx, chartArea, d.borderColor, this.horizontal);
 				}

diff --git a/src/charts/LineChart.vue b/src/charts/LineChart.vue
@@ -33,6 +33,10 @@ export default {
 			type: Number,
 			default: 2
 		},
+		unfinished: {
+			type: Boolean,
+			default: true
+		},
 		width: String,
 		height: String,
 	},
@@ -51,16 +55,16 @@ export default {
 		processedDatasets () {
 			let datasets = this.datasets
 			datasets.map(d => {
+				// gradient for background
 				d.backgroundColor = context => {
-					const chart = context.chart;
-					const { ctx, chartArea } = chart;
+					const { ctx, chartArea } = context.chart;
 					if (!chartArea) return null;
 					return transparentGradientLine(ctx, chartArea, d.borderColor);
 				};
-				// TODO: activate if https://github.com/chartjs/Chart.js/issues/9022 is fixed
-				// d.segment = {
-				// 	borderDash: ctx => ctx.p0.parsed.x == d.data.length-2 ? [10, 5] : undefined
-				// };
+				// dashed line for last segment
+				d.segment = {
+					borderDash: ctx => this.unfinished && ctx.p0.parsed.x == d.data.length-2 ? [10, 5] : undefined
+				};
 			})
 			return datasets
 		}
@@ -92,6 +96,7 @@ export default {
 					scales: {
 						x: {
 							display: this.abscissa,
+							alignToPixels: true,
 							stacked: false,
 							grid: {
 								display: false,