diff --git a/src/components/ForecastViews/CloudForecast.vue b/src/components/ForecastViews/CloudForecast.vue index 834de99..288dee1 100644 --- 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',