From 76b9817c1f5d746585455442454ac9657bec7460 Mon Sep 17 00:00:00 2001 From: DicoTiar Date: Mon, 19 Oct 2020 22:40:50 +0100 Subject: [PATCH] uk graph update fin #10. --- covid_tmp/src/assets/customTheme.scss | 4 +- .../covidGlobal/covidGraphbyRegionCumul.vue | 43 +++++- .../covidGlobal/covidGraphbyRegionNews.vue | 33 ++++- ...GraphGlobalHome.vue => covidGraphHome.vue} | 16 +- .../covidUK/covidGraphbyUKAll.vue | 36 ++++- covid_tmp/src/router/index.js | 2 +- covid_tmp/src/store/modules/covidUKGraph.js | 140 ++++++++++++++++-- 7 files changed, 224 insertions(+), 50 deletions(-) rename covid_tmp/src/components/covidStatusGraph/{covidGraphGlobalHome.vue => covidGraphHome.vue} (74%) diff --git a/covid_tmp/src/assets/customTheme.scss b/covid_tmp/src/assets/customTheme.scss index a918dc5..50a744d 100644 --- a/covid_tmp/src/assets/customTheme.scss +++ b/covid_tmp/src/assets/customTheme.scss @@ -1,8 +1,8 @@ @import "~vue-material/dist/theme/engine"; // Import the theme engine @include md-register-theme("default", ( - primary: md-get-palette-color(lime, A700), // The primary color of your application - accent: md-get-palette-color(deeporange, A200), // The accent or secondary color + primary: #558b2f, // The primary color of your application + accent: #d84315, // The accent or secondary color theme: dark // This can be dark or light )); diff --git a/covid_tmp/src/components/covidStatusGraph/covidGlobal/covidGraphbyRegionCumul.vue b/covid_tmp/src/components/covidStatusGraph/covidGlobal/covidGraphbyRegionCumul.vue index e521738..3ba3d2b 100644 --- a/covid_tmp/src/components/covidStatusGraph/covidGlobal/covidGraphbyRegionCumul.vue +++ b/covid_tmp/src/components/covidStatusGraph/covidGlobal/covidGraphbyRegionCumul.vue @@ -7,7 +7,7 @@ menu - COVID - 19 Global Cumulative Data + COVID - 19 Global Cumulative Data @@ -22,19 +22,46 @@ All data are provided by CSSE-github (John's Hopkins University).

- - Confirmed: number of people being confirmed.
- Active: number of people being hospitalised due to COVID-19.
- Deaths: number of people died.
- Recovered: number of people recovered.
- Removed: number of people recovered + died.
+ + Description of Graph + + + + + Graph Legends + Meaning + + + Confirmed + number of people being confirmed + + + Active + number of people being hospitalised due to COVID-19 + + + Deaths + number of people died + + + Recovered + number of people recovered + + + Removed + number of people recovered + died + + +
+ + Search Section +
-
diff --git a/covid_tmp/src/components/covidStatusGraph/covidGlobal/covidGraphbyRegionNews.vue b/covid_tmp/src/components/covidStatusGraph/covidGlobal/covidGraphbyRegionNews.vue index 35cbbb1..0d5fc4c 100644 --- a/covid_tmp/src/components/covidStatusGraph/covidGlobal/covidGraphbyRegionNews.vue +++ b/covid_tmp/src/components/covidStatusGraph/covidGlobal/covidGraphbyRegionNews.vue @@ -7,7 +7,7 @@ menu - COVID - 19 Global New Cases + COVID - 19 Global New Cases
@@ -23,17 +23,34 @@ All data are provided by CSSE-github (John's Hopkins University).

- - - Confirmed: number of people daily confirmed.
- Deaths: number of people daily died.
- Recovered: number of people daily recovered.
- + + Description of Graph + + + + Graph Legends + Meaning + + + Confirmed + number of people being confirmed + + + Deaths + number of people died + + + Recovered + number of people recovered + +
+ + Search Section +
-
diff --git a/covid_tmp/src/components/covidStatusGraph/covidGraphGlobalHome.vue b/covid_tmp/src/components/covidStatusGraph/covidGraphHome.vue similarity index 74% rename from covid_tmp/src/components/covidStatusGraph/covidGraphGlobalHome.vue rename to covid_tmp/src/components/covidStatusGraph/covidGraphHome.vue index f408b3e..9d2bc6d 100644 --- a/covid_tmp/src/components/covidStatusGraph/covidGraphGlobalHome.vue +++ b/covid_tmp/src/components/covidStatusGraph/covidGraphHome.vue @@ -7,7 +7,7 @@ menu - COVID - 19 Global Home + COVID - 19 Global Home
@@ -17,28 +17,20 @@ - Global Home page.
- On Construction.
+ COVID DATA Analysis Home page.
 Pleas have a look on left-side drawer.
You can open it my clicking left top, three lines icon.
 - - UK pages are preparing datasets. -

Pages connecting to ...

- + + - - - - -
diff --git a/covid_tmp/src/components/covidStatusGraph/covidUK/covidGraphbyUKAll.vue b/covid_tmp/src/components/covidStatusGraph/covidUK/covidGraphbyUKAll.vue index e50f13b..9f88371 100644 --- a/covid_tmp/src/components/covidStatusGraph/covidUK/covidGraphbyUKAll.vue +++ b/covid_tmp/src/components/covidStatusGraph/covidUK/covidGraphbyUKAll.vue @@ -7,7 +7,7 @@ menu - COVID - 19 UK All type of Data + COVID - 19 UK All type of Data
@@ -19,46 +19,60 @@
- This page is for temporary demo. (*On Construction.)
- This page will be renewed with detailed information.
+ This page provides all kind of COVID data from UK.
+ All data are provided by UK Government.

 - Description of Graph + + Description of Graph + + + * [Caution]: -10 from graph represents data missing. + + - Graph Index + Graph Legends Meaning + Detailed Meaning (by UK GOV) Conf Dly Confirmed Daily + New cases by publish date Conf Cuml Confirmed Cumulative + Cumulative cases by publish date CumlD/DD Cumulative Deaths by Death Date (in 28days) + Cumulative deaths within 28 days of positive test CumlD/DR Rate of Cumulative Deaths by Death Date (in 28days) + Rate of cumulative deaths within 28 days of positive test per 100k resident population CumlD/PD Cumulative Deaths by Publish Date (in 28days) + Cumulative deaths within 28 days of positive test by death date CumlD/PR Rate of Cumulative Deaths by Publish Date (in 28days) + Rate of cumulative deaths within 28 days of positive test by death date per 100k resident population NewD/PD New Deaths by Publish Date (in 28days) + Deaths within 28 days of positive test @@ -66,7 +80,15 @@
- Search Section + + Search Section + + + + If your city is well known UTLA will fit to you.
+ If your city is small and unknown LTLA may fit to you. + +
@@ -121,7 +143,7 @@ :data="plotData" :layout="plotLayout" :display-mode-bar="false" - + :isAsync="true" />
diff --git a/covid_tmp/src/router/index.js b/covid_tmp/src/router/index.js index 1f3e872..c492343 100644 --- a/covid_tmp/src/router/index.js +++ b/covid_tmp/src/router/index.js @@ -1,7 +1,7 @@ import Vue from "vue"; import VueRouter from "vue-router"; -import Home from "@/components/covidStatusGraph/covidGraphGlobalHome"; +import Home from "@/components/covidStatusGraph/covidGraphHome"; import covidGraphbyRegion from "@/components/covidStatusGraph/covidGlobal/covidGraphbyRegionCumul"; import covidGraphbyRegionNews from "@/components/covidStatusGraph/covidGlobal/covidGraphbyRegionNews"; diff --git a/covid_tmp/src/store/modules/covidUKGraph.js b/covid_tmp/src/store/modules/covidUKGraph.js index d9c7b46..953c073 100644 --- a/covid_tmp/src/store/modules/covidUKGraph.js +++ b/covid_tmp/src/store/modules/covidUKGraph.js @@ -145,54 +145,170 @@ export default { { y: state.data.confirmedDaily, x: state.data.date, - marker: {color: '#DC3912'}, + marker: {color: '#FF6FA9'}, type: "bar", - name: 'Conf Dly' + name: 'Conf Dly', + xaxis: 'x', + yaxis: 'y' },{ y: state.data.confirmedCumulative, x: state.data.date, mode: 'lines', - marker: {color: '#EF553B'}, + marker: {color: '#000'}, type: "scatter", - name: 'Conf Cuml' + name: 'Conf Cuml', + xaxis: 'x', + yaxis: 'y2' },{ y: state.data.cumDeaths28DaysByDeathDate, x: state.data.date, marker: {color: '#620042'}, type: "bar", - name: 'CumlD/DD' + name: 'CumlD/DD', + xaxis: 'x2', + yaxis: 'y3' },{ y: state.data.cumDeaths28DaysByDeathDateRate, x: state.data.date, mode: 'lines', - marker: {color: '#782AB6'}, + marker: {color: '#000'}, type: "scatter", - name: 'CumlD/DR' + name: 'CumlD/DR', + xaxis: 'x2', + yaxis: 'y4' },{ y: state.data.cumDeaths28DaysByPublishDate, x: state.data.date, marker: {color: '#1F77B4'}, type: "bar", - name: 'CumlD/PD' + name: 'CumlD/PD', + xaxis: 'x3', + yaxis: 'y5' }, { y: state.data.cumDeaths28DaysByPublishDateRate, x: state.data.date, mode: 'lines', marker: {color: '#72B7B2'}, type: "scatter", - name: 'CumlD/PR' + name: 'CumlD/PR', + xaxis: 'x3', + yaxis: 'y6' },{ y: state.data.newDeaths28DaysByPublishDate, x: state.data.date, - marker: {color: '#8f8F8F'}, + marker: {color: '#69173A'}, type: "bar", - name: 'NewD/PD' + name: 'NewD/PD', + xaxis: 'x4', + yaxis: 'y7' }, ] ) commit('SET_PLOT_LAYOUT', { - title: 'COVID 19 UK status ' + ' >>> ' + state.target.areaName + title: 'COVID 19 UK status ' + ' >>> ' + state.target.areaName, + width: 1000, + height: 2000, + autosize: true, + legend: { + orientation: 'h', + traceorder: 'reversed', + x: 0.05, // I’m editing this one + y: 1.02, + }, + + grid: { + rows: 4, + columns: 1, + pattern: 'independent', + + subplots:[['x4y7'], ['x3y5'], ['x2y3'], ['xy']], + roworder:'bottom to top' + }, + + xaxis: { + ticks: 'outside', + tickcolor: '#000', + }, + yaxis: { + ticks: 'outside', + title: 'Daily Confirmed', + color: '#FF6FA9' + }, + yaxis2: { + ticks: 'outside', + title: 'Cumulative Confirmed', + color: '#000', + anchor: 'x', + match: 'y', + rangemode: 'tozero', + overlaying: 'y', + side: 'right' + }, + + xaxis2: { + autotick: true, + ticks: 'outside', + tickcolor: '#000' + }, + yaxis3: { + autotick: true, + ticks: 'outside', + title: 'Cumulative Deaths per DeathDate in 28days', + rangemode: 'tozero', + color: '#620042' + }, + yaxis4: { + autotick: true, + ticks: 'outside', + title: 'Rate of Cumulative Deaths per DeathDate in 28days', + color: '#000', + anchor: 'x2', + match: 'y3', + rangemode: 'tozero', + overlaying: 'y3', + side: 'right' + }, + + xaxis3: { + autotick: true, + ticks: 'outside', + tickcolor: '#000' + }, + yaxis5: { + autotick: true, + ticks: 'outside', + title: 'Cumulative Deaths per PublishDate in 28days', + color: '#1F77B4', + rangemode: 'tozero', + tickcolor: '#000' + }, + yaxis6: { + autotick: true, + ticks: 'outside', + title: 'Rate of Cumulative Deaths per PublishDate in 28days', + color: '#000', + anchor: 'x3', + match: 'y5', + rangemode: 'tozero', + overlaying: 'y5', + side: 'right' + }, + + xaxis4: { + autotick: true, + ticks: 'outside', + tickcolor: '#000' + }, + yaxis7: { + autotick: true, + ticks: 'outside', + title: 'New Deaths per PublishDate in 28days', + color: '#69173A', + rangemode: 'tozero', + tickcolor: '#000' + }, + })