Added gradient
This commit is contained in:
parent
6d2638a2d7
commit
1d678e216e
|
@ -87,7 +87,7 @@ export default {
|
||||||
type: 'time',
|
type: 'time',
|
||||||
time: {
|
time: {
|
||||||
unit: 'minute',
|
unit: 'minute',
|
||||||
stepSize: 15,
|
stepSize: 20,
|
||||||
|
|
||||||
displayFormats: {
|
displayFormats: {
|
||||||
minute: 'HH:mm'
|
minute: 'HH:mm'
|
||||||
|
@ -140,10 +140,67 @@ export default {
|
||||||
? this.$vuetify.theme.themes.dark.success
|
? this.$vuetify.theme.themes.dark.success
|
||||||
: this.$vuetify.theme.themes.light.success,
|
: this.$vuetify.theme.themes.light.success,
|
||||||
|
|
||||||
backgroundColor: this.$vuetify.theme.isDark
|
backgroundColor: context => {
|
||||||
? this.$vuetify.theme.themes.dark.success
|
const chart = context.chart
|
||||||
: this.$vuetify.theme.themes.light.success,
|
const { ctx, chartArea } = chart
|
||||||
borderWidth,
|
|
||||||
|
if (!chartArea) {
|
||||||
|
// This case happens on initial chart load
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
let width, height, gradient
|
||||||
|
const getGradient = (ctx, chartArea) => {
|
||||||
|
const chartWidth = chartArea.right - chartArea.left
|
||||||
|
const chartHeight = chartArea.bottom - chartArea.top
|
||||||
|
if (
|
||||||
|
gradient === null ||
|
||||||
|
width !== chartWidth ||
|
||||||
|
height !== chartHeight
|
||||||
|
) {
|
||||||
|
// Create the gradient because this is either the first render
|
||||||
|
// or the size of the chart has changed
|
||||||
|
width = chartWidth
|
||||||
|
height = chartHeight
|
||||||
|
gradient = ctx.createLinearGradient(
|
||||||
|
0,
|
||||||
|
chartArea.bottom,
|
||||||
|
0,
|
||||||
|
chartArea.top
|
||||||
|
)
|
||||||
|
gradient.addColorStop(
|
||||||
|
0,
|
||||||
|
this.$vuetify.theme.isDark
|
||||||
|
? this.$vuetify.theme.themes.dark.success
|
||||||
|
: this.$vuetify.theme.themes.light.success
|
||||||
|
)
|
||||||
|
|
||||||
|
gradient.addColorStop(
|
||||||
|
0.4,
|
||||||
|
this.$vuetify.theme.isDark
|
||||||
|
? this.$vuetify.theme.themes.dark.success
|
||||||
|
: this.$vuetify.theme.themes.light.success
|
||||||
|
)
|
||||||
|
|
||||||
|
gradient.addColorStop(
|
||||||
|
0.7,
|
||||||
|
this.$vuetify.theme.isDark
|
||||||
|
? this.$vuetify.theme.themes.dark.warning
|
||||||
|
: this.$vuetify.theme.themes.light.warning
|
||||||
|
)
|
||||||
|
gradient.addColorStop(
|
||||||
|
0.9,
|
||||||
|
this.$vuetify.theme.isDark
|
||||||
|
? this.$vuetify.theme.themes.dark.error
|
||||||
|
: this.$vuetify.theme.themes.light.error
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return gradient
|
||||||
|
}
|
||||||
|
|
||||||
|
return getGradient(ctx, chartArea)
|
||||||
|
},
|
||||||
|
borderWidth: 0,
|
||||||
pointRadius,
|
pointRadius,
|
||||||
|
|
||||||
cubicInterpolationMode: 'default',
|
cubicInterpolationMode: 'default',
|
||||||
|
|
Loading…
Reference in New Issue
Block a user