feat: Keep only cloud cover summary

artonge · Aug 31, 2024 · b7ccc78 · b7ccc78
1 parent 2cdc67b
commit b7ccc78
Showing 1 changed file with 93 additions and 65 deletions.
diff --git a/src/components/ForecastViews/CloudForecast.vue b/src/components/ForecastViews/CloudForecast.vue
@@ -20,73 +20,96 @@ const { hoveredDataPoint, canvas } = setupForecastView(
 	(forecast: Forecast) => [
 		{
 			type: 'line',
-			label: 'Cloud low',
-			data: forecast.hourly.map(({ cloudCoverLow }) => cloudCoverLow),
+			label: 'Cloud cover',
+			data: forecast.hourly.map(({ cloudCover }) => cloudCover),
 			cubicInterpolationMode: 'monotone',
 			borderColor: 'rgba(159, 159, 163, 0.2)',
 			backgroundColor: 'rgba(159, 159, 163, 0.2)',
 			fill: 'origin',
-			yAxisID: 'yc1',
+			yAxisID: 'yc0',
 		},
+		// {
+		// 	type: 'line',
+		// 	label: 'Cloud low',
+		// 	data: forecast.hourly.map(({ cloudCoverLow }) => cloudCoverLow),
+		// 	cubicInterpolationMode: 'monotone',
+		// 	borderColor: 'rgba(159, 159, 163, 0.2)',
+		// 	backgroundColor: 'rgba(159, 159, 163, 0.2)',
+		// 	fill: 'origin',
+		// 	yAxisID: 'yc1',
+		// },
+		// {
+		// 	type: 'line',
+		// 	label: 'Cloud medium',
+		// 	data: forecast.hourly.map(({ cloudCoverMid }) => cloudCoverMid),
+		// 	cubicInterpolationMode: 'monotone',
+		// 	borderColor: 'rgba(159, 159, 163, 0.2)',
+		// 	backgroundColor: 'rgba(159, 159, 163, 0.2)',
+		// 	fill: 'origin',
+		// 	yAxisID: 'yc2',
+		// },
+		// {
+		// 	type: 'line',
+		// 	label: 'Cloud hight',
+		// 	data: forecast.hourly.map(({ cloudCoverHigh }) => cloudCoverHigh),
+		// 	cubicInterpolationMode: 'monotone',
+		// 	borderColor: 'rgba(159, 159, 163, 0.2)',
+		// 	backgroundColor: 'rgba(159, 159, 163, 0.2)',
+		// 	fill: 'origin',
+		// 	yAxisID: 'yc3',
+		// },
 		{
 			type: 'line',
-			label: 'Cloud medium',
-			data: forecast.hourly.map(({ cloudCoverMid }) => cloudCoverMid),
+			label: 'Cloud cover',
+			data: forecast.hourly.map(({ cloudCover }) => -cloudCover),
 			cubicInterpolationMode: 'monotone',
 			borderColor: 'rgba(159, 159, 163, 0.2)',
 			backgroundColor: 'rgba(159, 159, 163, 0.2)',
 			fill: 'origin',
-			yAxisID: 'yc2',
-		},
-		{
-			type: 'line',
-			label: 'Cloud hight',
-			data: forecast.hourly.map(({ cloudCoverHigh }) => cloudCoverHigh),
-			cubicInterpolationMode: 'monotone',
-			borderColor: 'rgba(159, 159, 163, 0.2)',
-			backgroundColor: 'rgba(159, 159, 163, 0.2)',
-			fill: 'origin',
-			yAxisID: 'yc3',
-		},
-		{
-			type: 'line',
-			label: 'Cloud low',
-			data: forecast.hourly.map(({ cloudCoverLow }) => -cloudCoverLow),
-			cubicInterpolationMode: 'monotone',
-			borderColor: 'rgba(159, 159, 163, 0.2)',
-			backgroundColor: 'rgba(159, 159, 163, 0.2)',
-			fill: 'origin',
-			yAxisID: 'yc1',
-			datalabels: {
-				display: false,
-			},
-		},
-		{
-			type: 'line',
-			label: 'Cloud medium',
-			data: forecast.hourly.map(({ cloudCoverMid }) => -cloudCoverMid),
-			cubicInterpolationMode: 'monotone',
-			borderColor: 'rgba(159, 159, 163, 0.2)',
-			backgroundColor: 'rgba(159, 159, 163, 0.2)',
-			fill: 'origin',
-			yAxisID: 'yc2',
-			datalabels: {
-				display: false,
-			},
-		},
-		{
-			type: 'line',
-			label: 'Cloud hight',
-			data: forecast.hourly.map(({ cloudCoverHigh }) => -cloudCoverHigh),
-			cubicInterpolationMode: 'monotone',
-			borderColor: 'rgba(159, 159, 163, 0.2)',
-			backgroundColor: 'rgba(159, 159, 163, 0.2)',
-			fill: 'origin',
-			yAxisID: 'yc3',
+			yAxisID: 'yc0',
 			datalabels: {
 				display: false,
 			},
 		},
+		// {
+		// 	type: 'line',
+		// 	label: 'Cloud low',
+		// 	data: forecast.hourly.map(({ cloudCoverLow }) => -cloudCoverLow),
+		// 	cubicInterpolationMode: 'monotone',
+		// 	borderColor: 'rgba(159, 159, 163, 0.2)',
+		// 	backgroundColor: 'rgba(159, 159, 163, 0.2)',
+		// 	fill: 'origin',
+		// 	yAxisID: 'yc1',
+		// 	datalabels: {
+		// 		display: false,
+		// 	},
+		// },
+		// {
+		// 	type: 'line',
+		// 	label: 'Cloud medium',
+		// 	data: forecast.hourly.map(({ cloudCoverMid }) => -cloudCoverMid),
+		// 	cubicInterpolationMode: 'monotone',
+		// 	borderColor: 'rgba(159, 159, 163, 0.2)',
+		// 	backgroundColor: 'rgba(159, 159, 163, 0.2)',
+		// 	fill: 'origin',
+		// 	yAxisID: 'yc2',
+		// 	datalabels: {
+		// 		display: false,
+		// 	},
+		// },
+		// {
+		// 	type: 'line',
+		// 	label: 'Cloud hight',
+		// 	data: forecast.hourly.map(({ cloudCoverHigh }) => -cloudCoverHigh),
+		// 	cubicInterpolationMode: 'monotone',
+		// 	borderColor: 'rgba(159, 159, 163, 0.2)',
+		// 	backgroundColor: 'rgba(159, 159, 163, 0.2)',
+		// 	fill: 'origin',
+		// 	yAxisID: 'yc3',
+		// 	datalabels: {
+		// 		display: false,
+		// 	},
+		// },
 		{
 			type: 'bar',
 			label: `Precipitation over the last hour`,
@@ -101,21 +124,26 @@ const { hoveredDataPoint, canvas } = setupForecastView(
 	],
 	() => {
 		return {
-			yc1: {
-				display: false,
-				max: 520,
-				min: -110,
-			},
-			yc2: {
-				display: false,
-				max: 315,
-				min: -315,
-			},
-			yc3: {
+			yc0: {
 				display: false,
-				max: 110,
-				min: -520,
+				max: 500,
+				min: -500,
 			},
+			// yc1: {
+			// 	display: false,
+			// 	max: 520,
+			// 	min: -110,
+			// },
+			// yc2: {
+			// 	display: false,
+			// 	max: 315,
+			// 	min: -315,
+			// },
+			// yc3: {
+			// 	display: false,
+			// 	max: 110,
+			// 	min: -520,
+			// },
 			yp: {
 				display: false,
 				position: 'right',