From aae0790c27eb4d93edb061afe86db8a6a5117a7d Mon Sep 17 00:00:00 2001 From: T__o Date: Sun, 26 Apr 2020 23:04:17 +0200 Subject: [PATCH] v0.02 sync x axis --- README.md | 12 +++++- doc.md | 1 + src/App.vue | 52 ++++++++++++++++++------- src/components/ChartConfig.vue | 42 +++++++++++++++----- src/components/d3/BarChartSingle.vue | 7 +++- src/components/d3/MultiCountryChart.vue | 42 ++++++++++++-------- 6 files changed, 113 insertions(+), 43 deletions(-) diff --git a/README.md b/README.md index 41f931d..5987f8b 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# covcharts +# CovCharts Charts on COVID 19 @@ -6,4 +6,14 @@ Using vuejs and d3 Data source from : https://github.com/pomber/covid19 +**Numbers are not reality** +## Features : + +- sync X axis at a value +- reset (broken, need reload page too) +- set a limit for y axis +- select first and last day +- select data source (confirmed, deaths, recovered) +- select scale (log/linear) +- select countries \ No newline at end of file diff --git a/doc.md b/doc.md index 7e0b3b9..51cd3b1 100644 --- a/doc.md +++ b/doc.md @@ -3,6 +3,7 @@ # Changelog +v0.02 sync x axis v0.01 repack, data auto loading diff --git a/src/App.vue b/src/App.vue index c23ebfe..446abcb 100644 --- a/src/App.vue +++ b/src/App.vue @@ -34,13 +34,13 @@ - { return value > max ? max : value < min ? min : value } @@ -102,6 +104,7 @@ dayStart: 30, dayEnd: 0, ymax: 0, + syncSince: 0, resetConfig: false, }, countriesConfig: { @@ -133,6 +136,7 @@ // Todo list of all countries using localstorage //all: Object.keys(AllData).sort(), }, + debug: false, }), watch: { drawer() { @@ -163,27 +167,36 @@ }, methods: { loadConfig() { - let uc = localStorage.getItem('userConfig') if (uc && uc !== 'null') { uc = JSON.parse(uc) this.countriesConfig = uc.countriesConfig this.chartConfig = uc.chartConfig + this.ccc("loadConfig storage") } else { this.countriesConfig = defaultUserConfig.countriesConfig this.chartConfig = defaultUserConfig.chartConfig + this.ccc("loadConfig default") } }, saveConfig() { + this.ccc("saveConfig") let userConfig = {countriesConfig: this.countriesConfig, chartConfig: this.chartConfig} localStorage.setItem('userConfig', JSON.stringify(userConfig)) }, resetConfig() { localStorage.setItem('userConfig', 'null') + this.ccc("resetConfig") this.loadConfig() }, + ccc(a, b) { + if (this.debug) console.log(a, b) + }, }, computed: { + syncSinceInt() { + return parseInt(this.chartConfig.syncSince) + }, countriesData() { if (!('France' in this.allData)) { @@ -195,11 +208,29 @@ this.countriesConfig.selected.map((country) => { - let cdata = JSON.parse(JSON.stringify(this.allData[country.name])) - let itemsCount = cdata.length - let filtered = cdata.filter((e, i) => + let filtered = JSON.parse(JSON.stringify(this.allData[country.name])) + + if (this.syncSinceInt !== 0) { + filtered = filtered.filter((e) => { + //console.log(' e', e[this.chartConfig.typeSelected], syncSince, typeof this.syncSince) + return e[this.chartConfig.typeSelected] >= this.syncSinceInt + } + ) + } + + if (this.chartConfig.ymax > 0) { + filtered = filtered.map((d) => { + this.configLists.typesList.map(e => { + d[e] = d[e] > this.chartConfig.ymax ? NaN : d[e] + }) + return d + }) + } + + filtered = filtered.filter((e, i) => i >= (this.chartConfig.dayStart - 1) && - i < (itemsCount - this.chartConfig.dayEnd)) + i < (filtered.length - this.chartConfig.dayEnd) + ) if (addSomeDays) { // Adding addDays data points @@ -215,14 +246,6 @@ } } - if (this.chartConfig.ymax > 0) { - filtered = filtered.map((d) => { - this.configLists.typesList.map(e => { - d[e] = d[e] > this.chartConfig.ymax ? this.chartConfig.ymax : d[e] - }) - return d - }) - } // // Get ymax // filtered.map(d => { // ymax = d[this.dataSelected] > ymax ? d[this.dataSelected] : ymax @@ -231,7 +254,6 @@ country.list = filtered formatedData.push(country) }) - return formatedData } } diff --git a/src/components/ChartConfig.vue b/src/components/ChartConfig.vue index 1014982..45922e3 100644 --- a/src/components/ChartConfig.vue +++ b/src/components/ChartConfig.vue @@ -4,7 +4,7 @@ - Scale + Scale + - Type + Type - DayStart + Day Start - DayEnd + Day End - y Max + Sync X + + + Limit Y + + + + + + @@ -95,6 +112,13 @@ return { } }, + watch:{ + 'configs.syncSince': function(value){ + if ( ! (value > 0 ) ){ + this.configs.syncSince = 0 + } + } + }, methods: { resetConfig() { this.configs.resetConfig = true @@ -111,7 +135,7 @@ margin: 0px; } - .ymax { + .numField { max-width: 50%; } diff --git a/src/components/d3/BarChartSingle.vue b/src/components/d3/BarChartSingle.vue index bf36ecc..906c61f 100644 --- a/src/components/d3/BarChartSingle.vue +++ b/src/components/d3/BarChartSingle.vue @@ -7,7 +7,7 @@ :x="scales.x(new Date(day.date))" :y="scales.y(day.value)" :width="colsize" - :height="height-scales.y(day.value)" + :height="calcHeight(day.value)" class="barChartRect" > @@ -69,6 +69,7 @@ }, }, computed: { + colsize() { return this.scales.x(new Date(this.dataChart[1].date)) - 1 }, @@ -113,6 +114,10 @@ }, }, methods: { + calcHeight(value){ + let v = this.height-this.scales.y(value) + return v > 0 ? v: 0 + }, calculatePath(data) { //console.log('datata',data) diff --git a/src/components/d3/MultiCountryChart.vue b/src/components/d3/MultiCountryChart.vue index 925ddc0..4b09178 100644 --- a/src/components/d3/MultiCountryChart.vue +++ b/src/components/d3/MultiCountryChart.vue @@ -1,6 +1,7 @@