157 lines
4.7 KiB
Vue
157 lines
4.7 KiB
Vue
<template>
|
|
<svg :class="svgClass +' svgg'" :width="width" :height="height">
|
|
<g>
|
|
<rect v-for="(day ,id) in dataChart"
|
|
:alt="id"
|
|
:key="'bcs'+id"
|
|
:x="scales.x(new Date(day.date))"
|
|
:y="scales.y(day.value)"
|
|
:width="colsize"
|
|
:height="height-scales.y(day.value)"
|
|
class="barChartRect"
|
|
></rect>
|
|
<!-- <path-->
|
|
<!-- :d="calculatePath(dataChart)"-->
|
|
<!-- />-->
|
|
<!-- :style="{stroke:cinfo.color}"-->
|
|
</g>
|
|
<g class="axisg"></g>
|
|
|
|
</svg>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import {scaleLinear, scaleLog, scalePow, scaleTime} from 'd3';
|
|
import {axisLeft, axisBottom,timeDay} from 'd3';
|
|
import {axisRight, axisTop} from 'd3';
|
|
|
|
import {select, line} from 'd3';
|
|
|
|
select, scaleLinear, scaleLog, scalePow, scaleTime,
|
|
axisLeft, axisRight, axisTop, axisBottom, line
|
|
|
|
export default {
|
|
name: 'BarChartSingle',
|
|
props: {
|
|
dataChart: Array, // [{date,value}]
|
|
scaleType: String,
|
|
dataType: String,
|
|
width: Number,
|
|
height: Number,
|
|
country: String,
|
|
},
|
|
data() {
|
|
return {
|
|
margin: {
|
|
x: 5,
|
|
y: 0,
|
|
},
|
|
svgClass: "svg" + Math.random().toString(36).substring(7),
|
|
overpoint: {
|
|
x: 0,
|
|
y: 0,
|
|
text: "",
|
|
country: ""
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.drawAxis()
|
|
//console.log('',this.country,this.dataType, this.dataChart.slice(-1)[0])
|
|
},
|
|
watch: {
|
|
scaleType() {
|
|
this.drawAxis()
|
|
},
|
|
dataChart() {
|
|
this.drawAxis()
|
|
},
|
|
},
|
|
computed: {
|
|
colsize() {
|
|
return this.scales.x(new Date(this.dataChart[1].date)) - 1
|
|
},
|
|
minmax() {
|
|
|
|
let first = this.dataChart[0]
|
|
let max = {x: new Date(first.date), y: first.value}
|
|
let min = {x: new Date(first.date), y: first.value}
|
|
|
|
this.dataChart.forEach(item => {
|
|
|
|
let value = item.value
|
|
let dayvalue = new Date(item.date)
|
|
max.x = max.x < dayvalue ? dayvalue : max.x
|
|
max.y = max.y < value ? value : max.y
|
|
|
|
min.x = min.x > dayvalue ? dayvalue : min.x
|
|
if (typeof min.y === "undefined") min.y = value
|
|
min.y = min.y > value ? value : min.y
|
|
if (min.y <= 0) min.y = 1 // for log scale
|
|
})
|
|
|
|
//console.log(' dd',this.dataChart)
|
|
//console.log(' {min: min, max: max} ', min.y, max, this.scaleType)
|
|
return {min: min, max: max}
|
|
},
|
|
|
|
scales() {
|
|
|
|
let scales = {}
|
|
scales.x = scaleTime()
|
|
.domain([this.minmax.min.x, this.minmax.max.x])
|
|
.range([0, this.width - 2 * this.margin.x])
|
|
|
|
// !!scaleLog need to start at 1 not 0!!
|
|
scales.y = this.scaleType === 'linear' ? scaleLinear() : scaleLog()
|
|
scales.y = scales.y
|
|
.domain([this.minmax.min.y, this.minmax.max.y])
|
|
.range([this.height - 2 * this.margin.y, 1])
|
|
|
|
return scales
|
|
},
|
|
},
|
|
methods: {
|
|
calculatePath(data) {
|
|
|
|
//console.log('datata',data)
|
|
const path = line()
|
|
.x((d) => this.scales.x(new Date(d.date)))
|
|
.y(d => this.scales.y(d.value === 0 ? 1 : d.value))
|
|
|
|
return path(data)
|
|
},
|
|
drawAxis() {
|
|
|
|
let axis = select("." + this.svgClass + " .axisg")
|
|
|
|
axis.selectAll("*").remove()
|
|
|
|
|
|
axis.append("g")
|
|
.attr("class", "axis ") // axis--y
|
|
//.attr("transform", "translate(" + 0 + ", 0)")
|
|
.call(axisRight(this.scales.y).ticks(3));
|
|
|
|
axis.append("g")
|
|
.attr("class", "axis") // axis--x
|
|
.attr("transform", "translate( 0," + (this.height - 1) + ")")
|
|
.call(axisTop(this.scales.x).ticks(timeDay.every(10))
|
|
);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.barChartRect {
|
|
fill: #87a2a8;
|
|
}
|
|
</style>
|