tobi/vue-black-dash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve charts and dynamic chart updates with gradients

Browse Source
This commit is contained in:
cristij 2018-09-02 15:26:30 +03:00
parent 5ea2826db0
commit e3105b4ad2
3 changed files with 36 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/Charts/BarChart.js
View File

@ -21,37 +21,34 @@ export default {
}
}
},
data() {
return {
ctx: null
};
},
methods: {
updateGradients() {
const ctx = document.getElementById(this.chartId).getContext('2d');
updateGradients(chartData) {
if(!chartData) return;
const ctx = this.ctx || document.getElementById(this.chartId).getContext('2d');
const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
gradientStroke.addColorStop(this.gradientStops[0], this.gradientColors[0]);
gradientStroke.addColorStop(this.gradientStops[1], this.gradientColors[1]);
gradientStroke.addColorStop(this.gradientStops[2], this.gradientColors[2]);
if(this.chartData){
this.chartData.datasets.forEach(set => {
set.backgroundColor = gradientStroke;
});
}
chartData.datasets.forEach(set => {
set.backgroundColor = gradientStroke;
});
}
},
mounted() {
this.updateGradients();
this.renderChart(
this.chartData,
this.extraOptions
);
},
watch: {
chartData(newVal, oldVal) {
this.updateGradients();
if(oldVal === null) {
this.$watch('chartData', (newVal, oldVal) => {
this.updateGradients(this.chartData);
if (oldVal === null) {
this.renderChart(
this.chartData,
this.extraOptions
);
}
}
}, { immediate: true });
}
};

37
src/components/Charts/LineChart.js
View File

@ -9,49 +9,46 @@ export default {
gradientColors: {
type: Array,
default: () => ['rgba(72,72,176,0.2)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
validator: val =>{
validator: val => {
return val.length > 2;
}
},
gradientStops: {
type: Array,
default: () => [1, 0.4, 0],
validator: val =>{
validator: val => {
return val.length > 2;
}
}
},
data() {
return {
ctx: null
};
},
methods: {
updateGradients() {
const ctx = document.getElementById(this.chartId).getContext('2d');
updateGradients(chartData) {
if(!chartData) return;
const ctx = this.ctx || document.getElementById(this.chartId).getContext('2d');
const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
gradientStroke.addColorStop(this.gradientStops[0], this.gradientColors[0]);
gradientStroke.addColorStop(this.gradientStops[1], this.gradientColors[1]);
gradientStroke.addColorStop(this.gradientStops[2], this.gradientColors[2]);
if(this.chartData){
this.chartData.datasets.forEach(set => {
set.backgroundColor = gradientStroke;
});
}
chartData.datasets.forEach(set => {
set.backgroundColor = gradientStroke;
});
}
},
mounted() {
this.updateGradients();
this.renderChart(
this.chartData,
this.extraOptions
);
},
watch: {
chartData(newVal, oldVal) {
this.updateGradients();
if(oldVal === null) {
this.$watch('chartData', (newVal, oldVal) => {
this.updateGradients(this.chartData);
if (oldVal === null) {
this.renderChart(
this.chartData,
this.extraOptions
);
}
}
}, { immediate: true });
}
};

5
src/pages/Dashboard.vue
View File

@ -29,6 +29,7 @@
</template>
<div class="chart-area">
<line-chart style="height: 100%"
ref="bigChart"
:chart-data="bigLineChart.chartData"
:gradient-color="bigLineChart.gradientColors"
:gradient-stops="bigLineChart.gradientStops"
@ -223,7 +224,7 @@
},
methods: {
initBigChart(index) {
this.bigLineChart.chartData = {
let chartData = {
datasets: [{
label: "My First dataset",
fill: true,
@ -242,6 +243,8 @@
}],
labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
}
this.$refs.bigChart.updateGradients(chartData);
this.bigLineChart.chartData = chartData;
this.bigLineChart.activeIndex = index;
}
},