Added gradient
This commit is contained in:
parent
6d2638a2d7
commit
1d678e216e
|
@ -87,7 +87,7 @@ export default {
|
|||
type: 'time',
|
||||
time: {
|
||||
unit: 'minute',
|
||||
stepSize: 15,
|
||||
stepSize: 20,
|
||||
|
||||
displayFormats: {
|
||||
minute: 'HH:mm'
|
||||
|
@ -140,10 +140,67 @@ export default {
|
|||
? this.$vuetify.theme.themes.dark.success
|
||||
: this.$vuetify.theme.themes.light.success,
|
||||
|
||||
backgroundColor: this.$vuetify.theme.isDark
|
||||
? this.$vuetify.theme.themes.dark.success
|
||||
: this.$vuetify.theme.themes.light.success,
|
||||
borderWidth,
|
||||
backgroundColor: context => {
|
||||
const chart = context.chart
|
||||
const { ctx, chartArea } = chart
|
||||
|
||||
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,
|
||||
|
||||
cubicInterpolationMode: 'default',
|
||||
|
|
Loading…
Reference in New Issue
Block a user