Skip to content

Commit

Permalink
📦 week weather chart and bug fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@sk5s
sk5s committed Mar 4, 2023
1 parent 8da849e commit dc729d8
Show file tree
Hide file tree
Showing 4 changed files with 157 additions and 22 deletions.
48 changes: 31 additions & 17 deletions js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,10 +105,24 @@ function first_time_tour() {
},
],
})
// tour.addStep({
// text: '點擊重新整理天氣資料',
// attachTo: {
// element: '#refresh_button',
// on: 'top',
// },
// scrollTo: false,
// buttons: [
// {
// text: 'Next',
// action: tour.next,
// },
// ],
// })
tour.addStep({
text: '點擊重新整理天氣資料',
text: '點擊此按鈕可以到一周天氣的頁面',
attachTo: {
element: '#refresh_button',
element: '#week_forecast_button',
on: 'top',
},
scrollTo: false,
Expand Down Expand Up @@ -165,20 +179,20 @@ function first_time_tour() {
},
],
})
tour.addStep({
text: '切換語言',
attachTo: {
element: '#lang_select',
on: 'bottom',
},
scrollTo: false,
buttons: [
{
text: 'Complete',
action: tour.next,
},
],
})
// tour.addStep({
// text: '切換語言',
// attachTo: {
// element: '#lang_select',
// on: 'bottom',
// },
// scrollTo: false,
// buttons: [
// {
// text: 'Complete',
// action: tour.next,
// },
// ],
// })
tour.start()
tour.on('cancel', () => {
document.getElementById('configButton').removeEventListener('click', myClick)
Expand Down Expand Up @@ -238,7 +252,7 @@ async function fetch_cwb(url) {
fillin_weather(generate_now_weather(parsed_cwb_data.now))
generate_now_weather_speech_script(parsed_cwb_data.now)
let whatToWear = document.getElementById('whatToWear')
whatToWear.innerHTML += `<i class="fas fa-comment-alt"></i> `
whatToWear.innerHTML = `<i class="fas fa-comment-alt"></i> `
whatToWear.innerHTML += whatToWearNow(
parsed_cwb_data.now.MaxT,
parsed_cwb_data.now.MinT,
Expand Down
112 changes: 110 additions & 2 deletions js/my-chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,6 @@ function generate_weather_chart_data(weatherElement) {
}
if (weather_chart_element != undefined) weather_chart_element.destroy()
weather_chart_canvas = document.getElementById('weather_chart_canvas')
console.log(weather_chart_canvas)
let config = {
type: 'line',
data: {
Expand All @@ -123,7 +122,7 @@ function generate_weather_chart_data(weatherElement) {
plugins: {
title: {
display: true,
text: '36h 天氣預測',
text: '36小時天氣預測最高最低溫',
},
},
},
Expand All @@ -137,3 +136,112 @@ function chart(element, params) {
if (canvas == null) console.error('canvas null')
return canvas
}

function generateWeekWeatherChart(weatherElement) {
console.log(weatherElement)
const time = (str) => {
let m = new Date(str)
let dateString = `${m.getUTCMonth() + 1}/${m.getUTCDate()} ${m.getUTCHours()}${i18n_get('o_clock')}`
return dateString
}

let maxt_chart_image_data = {
datasets: [],
}

let mint_chart_image_data = {
datasets: [],
}

let labels = []

// 產生標籤
let data = []
for (let z = 0; z < weatherElement[0].time.length; z++) {
const element = weatherElement[0].time[z]

data.push(time(element.startTime))
// 如果是最後一個Time
if (z == weatherElement[0].time.length - 1) {
data.push(time(element.endTime))
}
}
for (let y = 0; y < data.length - 1; y++) {
labels.push([`${data[y]} ${i18n_get('to')}`, data[y + 1]])
}

for (let i = 0; i < weatherElement.length; i++) {
let weatherElementName = weatherElement[i].elementName

// 如果是最大溫度
if (weatherElementName == 'MaxT') {
maxt_chart_image_data.datasets = [
{
label: i18n_get('MaxT'),
data: [],
pointStyle: 'rectRounded',
pointRadius: 8,
pointHoverRadius: 12,
borderColor: CHART_COLORS.red,
backgroundColor: CHART_COLORS.red,
borderWidth: line_chart_border_width,
},
]
for (let n = 0; n < weatherElement[i].time.length; n++) {
const element = weatherElement[i].time[n]
maxt_chart_image_data.datasets[0].data.push(element.elementValue[0].value)
}
}
// 如果是最小溫度
if (weatherElementName == 'MinT') {
mint_chart_image_data.datasets = [
{
label: i18n_get('MinT'),
data: [],
pointStyle: 'rectRounded',
pointRadius: 8,
pointHoverRadius: 12,
borderColor: CHART_COLORS.blue,
backgroundColor: CHART_COLORS.blue,
borderWidth: line_chart_border_width,
},
]
for (let n = 0; n < weatherElement[i].time.length; n++) {
const element = weatherElement[i].time[n]
mint_chart_image_data.datasets[0].data.push(element.elementValue[0].value)
}
}
}
if (weather_chart_element != undefined) weather_chart_element.destroy()
weather_chart_canvas = document.getElementById('weather_chart_canvas')
console.log(weather_chart_canvas)
let config = {
type: 'line',
data: {
labels: labels,
datasets: [maxt_chart_image_data.datasets[0], mint_chart_image_data.datasets[0]],
},
options: {
responsive: true,
animation: {
onComplete: () => {
delayed = true
},
delay: (context) => {
let delay = 0
if (context.type === 'data' && context.mode === 'default' && !delayed) {
delay = context.dataIndex * 70 + context.datasetIndex * 100
}
return delay
},
},
plugins: {
title: {
display: true,
text: '一周天氣最高最低溫預測',
},
},
},
}
weather_chart_element = chart(weather_chart_canvas, config)
}
3 changes: 3 additions & 0 deletions week/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,9 +149,11 @@ async function fetch_cwb(url) {
console.log(locationIndex)
if (locationIndex == -1) {
console.log('location error! Please choose new one')
document.getElementById('location_h1').innerHTML = '請選取一個地區'
return
}
console.log(cwbData[locationIndex].weatherElement)
document.getElementById('location_h1').innerHTML = `${getUrlLocationName()} ${cwb_location_select_value}`
cwbData[locationIndex].weatherElement[0].time
let mainSwiperWrapper = document.getElementById('main-swiper-wrapper')
mainSwiperWrapper.innerHTML = ``
Expand All @@ -175,6 +177,7 @@ async function fetch_cwb(url) {
</div>
`
}
generateWeekWeatherChart(cwbData[locationIndex].weatherElement)
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'horizontal',
Expand Down
16 changes: 13 additions & 3 deletions week/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,20 +34,30 @@ <h5 class="title is-5">alsoweather</h5>
<!-- main content -->
<div class="container mt-3 px-3" style="max-width: 600px; min-height: 80vh">
<!-- back button -->
<a class="button is-primary" href="../" data-i18n-key="back" id="back-button"> Back </a>
<a class="button is-primary is-large" href="../" data-i18n-key="back" id="back-button"> Back </a>

<!-- location -->
<h1 class="title is-3 pt-3" id="location_h1">...</h1>
<div class="control has-icons-left mt-3 mb-3">
<div class="select is-large is-fullwidth">
<div class="select is-fullwidth">
<select id="cwb_location_select">
<option value="" data-i18n-key="choose-location" disabled selected>choose location</option>
</select>
</div>
<div class="icon is-large is-left">
<div class="icon is-left">
<i class="fas fa-map-marker-alt"></i>
</div>
</div>

<!-- weather chart -->
<div class="card has-background-success-light mt-3 mb-3">
<div class="card-content" id="step2">
<div class="content" id="weather_chart_inner_content">
<canvas id="weather_chart_canvas" width="400" height="320"></canvas>
</div>
</div>
</div>

<!-- weather slide -->
<div class="card has-background-success-light mt-3 mb-3" style="min-height: 300px">
<div class="card-content">
Expand Down

0 comments on commit dc729d8

Please sign in to comment.