99 lines
2.4 KiB
Vue
99 lines
2.4 KiB
Vue
<template>
|
|
<div class="rowC">
|
|
|
|
<div class="row countrytitle">
|
|
<div> _</div>
|
|
<div v-for="(cinfo,id) in countriesData"
|
|
:key="'ns'+id"
|
|
class="rodw"
|
|
:style="{height:(height+7)+'px'}">
|
|
{{cinfo.name}}
|
|
|
|
</div>
|
|
</div>
|
|
<div v-for="dtype in dataType" :key="'mcs'+dtype">
|
|
|
|
<div >
|
|
{{dtype}}
|
|
</div>
|
|
|
|
<div v-for="(cinfo,id) in countriesData" :key="'ns'+id">
|
|
<div class="chartBlock">
|
|
<BarChartSingle
|
|
:dataType="dtype"
|
|
:country="cinfo.name"
|
|
:dataChart="dataProcess(cinfo.list,dtype)"
|
|
:scaleType="scaleType"
|
|
:width="width"
|
|
:height="height"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import BarChartSingle from './d3/BarChartSingle'
|
|
|
|
export default {
|
|
name: 'MultiBarChartSingle',
|
|
props: {
|
|
countriesData: Array,
|
|
scaleType: String,
|
|
width: Number,
|
|
height: Number,
|
|
|
|
},
|
|
components: {
|
|
BarChartSingle: BarChartSingle
|
|
},
|
|
data() {
|
|
return {
|
|
dataType: ['confirmed', 'deaths', 'recovered']
|
|
}
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
dataProcessOne(list, datatype) {
|
|
return list.map(d => {
|
|
return {date: d.date, value: d[datatype]}
|
|
})
|
|
},
|
|
dataProcess(list, datatype) {
|
|
let prevDayTotal = 0
|
|
let dailyList = list.map((d) => {
|
|
let current = d[datatype] - prevDayTotal
|
|
prevDayTotal = d[datatype]
|
|
return {
|
|
date: d.date,
|
|
value: current
|
|
}
|
|
})
|
|
return dailyList
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.rowC {
|
|
display: flex;
|
|
}
|
|
|
|
.row {
|
|
display: inline-block;
|
|
}
|
|
|
|
.chartBlock {
|
|
/*background: #efffe3;*/
|
|
margin: 0px 5px 5px 0px;
|
|
}
|
|
|
|
.countrytitle {
|
|
width: 70px;
|
|
flex: none;
|
|
}
|
|
</style> |