Skip to content

Commit

Permalink
Support inner and outer glow effects
Browse files Browse the repository at this point in the history
  • Loading branch information
@nagix
nagix committed Jul 22, 2018
1 parent 827f88d commit 8b12296
Show file tree
Hide file tree
Showing 13 changed files with 320 additions and 28 deletions.
18 changes: 17 additions & 1 deletion src/controllers/controller.styleBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,11 @@ export default function(Chart) {
shadowColor: custom.shadowColor ? custom.shadowColor : helpers.valueAtIndexOrDefault(dataset.shadowColor, index, rectangleOptions.shadowColor),
bevelWidth: custom.bevelWidth ? custom.bevelWidth : helpers.valueAtIndexOrDefault(dataset.bevelWidth, index, rectangleOptions.bevelWidth),
bevelHighlightColor: custom.bevelHighlightColor ? custom.bevelHighlightColor : helpers.valueAtIndexOrDefault(dataset.bevelHighlightColor, index, rectangleOptions.bevelHighlightColor),
bevelShadowColor: custom.bevelShadowColor ? custom.bevelShadowColor : helpers.valueAtIndexOrDefault(dataset.bevelShadowColor, index, rectangleOptions.bevelShadowColor)
bevelShadowColor: custom.bevelShadowColor ? custom.bevelShadowColor : helpers.valueAtIndexOrDefault(dataset.bevelShadowColor, index, rectangleOptions.bevelShadowColor),
innerGlowWidth: custom.innerGlowWidth ? custom.innerGlowWidth : helpers.valueAtIndexOrDefault(dataset.innerGlowWidth, index, rectangleOptions.innerGlowWidth),
innerGlowColor: custom.innerGlowColor ? custom.innerGlowColor : helpers.valueAtIndexOrDefault(dataset.innerGlowColor, index, rectangleOptions.innerGlowColor),
outerGlowWidth: custom.outerGlowWidth ? custom.outerGlowWidth : helpers.valueAtIndexOrDefault(dataset.outerGlowWidth, index, rectangleOptions.outerGlowWidth),
outerGlowColor: custom.outerGlowColor ? custom.outerGlowColor : helpers.valueAtIndexOrDefault(dataset.outerGlowColor, index, rectangleOptions.outerGlowColor)
};

me.updateElementGeometry(rectangle, index, reset);
Expand All @@ -64,6 +68,10 @@ export default function(Chart) {
element.$previousStyle.bevelWidth = model.bevelWidth;
element.$previousStyle.bevelHighlightColor = model.bevelHighlightColor;
element.$previousStyle.bevelShadowColor = model.bevelShadowColor;
element.$previousStyle.innerGlowWidth = model.innerGlowWidth;
element.$previousStyle.innerGlowColor = model.innerGlowColor;
element.$previousStyle.outerGlowWidth = model.outerGlowWidth;
element.$previousStyle.outerGlowColor = model.outerGlowColor;
}

model.shadowOffsetX = custom.hoverShadowOffsetX ? custom.hoverShadowOffsetX : valueOrDefault(dataset.hoverShadowOffsetX, index, model.shadowOffsetX);
Expand All @@ -73,6 +81,10 @@ export default function(Chart) {
model.bevelWidth = custom.hoverBevelWidth ? custom.hoverBevelWidth : valueOrDefault(dataset.hoverBevelWidth, index, model.bevelWidth);
model.bevelHighlightColor = custom.hoverBevelHighlightColor ? custom.hoverBevelHighlightColor : valueOrDefault(dataset.hoverBevelHighlightColor, index, helpers.getHoverColor(model.bevelHighlightColor));
model.bevelShadowColor = custom.hoverBevelShadowColor ? custom.hoverBevelShadowColor : valueOrDefault(dataset.hoverBevelShadowColor, index, helpers.getHoverColor(model.bevelShadowColor));
model.innerGlowWidth = custom.hoverInnerGlowWidth ? custom.hoverInnerGlowWidth : valueOrDefault(dataset.hoverInnerGlowWidth, index, model.innerGlowWidth);
model.innerGlowColor = custom.hoverInnerGlowColor ? custom.hoverInnerGlowColor : valueOrDefault(dataset.hoverInnerGlowColor, index, helpers.getHoverColor(model.innerGlowColor));
model.outerGlowWidth = custom.hoverOuterGlowWidth ? custom.hoverOuterGlowWidth : valueOrDefault(dataset.hoverOuterGlowWidth, index, model.outerGlowWidth);
model.outerGlowColor = custom.hoverOuterGlowColor ? custom.hoverOuterGlowColor : valueOrDefault(dataset.hoverOuterGlowColor, index, helpers.getHoverColor(model.outerGlowColor));
},

removeHoverStyle: function(element) {
Expand All @@ -92,6 +104,10 @@ export default function(Chart) {
model.bevelWidth = custom.bevelWidth ? custom.bevelWidth : valueOrDefault(dataset.bevelWidth, index, elementOpts.bevelWidth);
model.bevelHighlightColor = custom.bevelHighlightColor ? custom.bevelHighlightColor : valueOrDefault(dataset.bevelHighlightColor, index, elementOpts.bevelHighlightColor);
model.bevelShadowColor = custom.bevelShadowColor ? custom.bevelShadowColor : valueOrDefault(dataset.bevelShadowColor, index, elementOpts.bevelShadowColor);
model.innerGlowWidth = custom.innerGlowWidth ? custom.innerGlowWidth : valueOrDefault(dataset.innerGlowWidth, index, elementOpts.innerGlowWidth);
model.innerGlowColor = custom.innerGlowColor ? custom.innerGlowColor : valueOrDefault(dataset.innerGlowColor, index, elementOpts.innerGlowColor);
model.outerGlowWidth = custom.outerGlowWidth ? custom.outerGlowWidth : valueOrDefault(dataset.outerGlowWidth, index, elementOpts.outerGlowWidth);
model.outerGlowColor = custom.outerGlowColor ? custom.outerGlowColor : valueOrDefault(dataset.outerGlowColor, index, elementOpts.outerGlowColor);
}

BarController.prototype.removeHoverStyle.apply(this, arguments);
Expand Down
34 changes: 32 additions & 2 deletions src/controllers/controller.styleBubble.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,11 @@ export default function(Chart) {
shadowColor: options.shadowColor,
bevelWidth: options.bevelWidth,
bevelHighlightColor: options.bevelHighlightColor,
bevelShadowColor: options.bevelShadowColor
bevelShadowColor: options.bevelShadowColor,
innerGlowWidth: options.innerGlowWidth,
innerGlowColor: options.innerGlowColor,
outerGlowWidth: options.outerGlowWidth,
outerGlowColor: options.outerGlowColor
};

point.pivot();
Expand All @@ -71,6 +75,13 @@ export default function(Chart) {
element.$previousStyle.shadowOffsetY = model.shadowOffsetY;
element.$previousStyle.shadowBlur = model.shadowBlur;
element.$previousStyle.shadowColor = model.shadowColor;
element.$previousStyle.bevelWidth = model.bevelWidth;
element.$previousStyle.bevelHighlightColor = model.bevelHighlightColor;
element.$previousStyle.bevelShadowColor = model.bevelShadowColor;
element.$previousStyle.innerGlowWidth = model.innerGlowWidth;
element.$previousStyle.innerGlowColor = model.innerGlowColor;
element.$previousStyle.outerGlowWidth = model.outerGlowWidth;
element.$previousStyle.outerGlowColor = model.outerGlowColor;
}

model.shadowOffsetX = valueOrDefault(options.hoverShadowOffsetX, options.shadowOffsetX);
Expand All @@ -80,6 +91,10 @@ export default function(Chart) {
model.bevelWidth = valueOrDefault(options.hoverBevelWidth, options.bevelWidth);
model.bevelHighlightColor = valueOrDefault(options.hoverBevelHighlightColor, helpers.getHoverColor(options.bevelHighlightColor));
model.bevelShadowColor = valueOrDefault(options.hoverBevelShadowColor, helpers.getHoverColor(options.bevelShadowColor));
model.innerGlowWidth = valueOrDefault(options.hoverInnerGlowWidth, options.innerGlowWidth);
model.innerGlowColor = valueOrDefault(options.hoverInnerGlowColor, helpers.getHoverColor(options.innerGlowColor));
model.outerGlowWidth = valueOrDefault(options.hoverOuterGlowWidth, options.outerGlowWidth);
model.outerGlowColor = valueOrDefault(options.hoverOuterGlowColor, helpers.getHoverColor(options.outerGlowColor));
},

/**
Expand All @@ -98,6 +113,10 @@ export default function(Chart) {
model.bevelWidth = options.bevelWidth;
model.bevelHighlightColor = options.bevelHighlightColor;
model.bevelShadowColor = options.bevelShadowColor;
model.innerGlowWidth = options.innerGlowWidth;
model.innerGlowColor = options.innerGlowColor;
model.outerGlowWidth = options.outerGlowWidth;
model.outerGlowColor = options.outerGlowColor;
}

BubbleController.prototype.removeHoverStyle.apply(this, arguments);
Expand Down Expand Up @@ -147,7 +166,18 @@ export default function(Chart) {
'hoverShadowColor',
'bevelWidth',
'bevelHighlightColor',
'bevelShadowColor'
'bevelShadowColor',
'hoverBevelWidth',
'hoverBevelHighlightColor',
'hoverBevelShadowColor',
'innerGlowWidth',
'innerGlowColor',
'outerGlowWidth',
'outerGlowColor',
'hoverInnerGlowWidth',
'hoverInnerGlowColor',
'hoverOuterGlowWidth',
'hoverOuterGlowColor'
];

for (i = 0, ilen = keys.length; i < ilen; ++i) {
Expand Down
20 changes: 20 additions & 0 deletions src/controllers/controller.styleDoughnut.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ export default function(Chart) {
bevelWidth: custom.bevelWidth ? custom.bevelWidth : valueAtIndexOrDefault(ds.bevelWidth, i, arcOpts.bevelWidth),
bevelHighlightColor: custom.bevelHighlightColor ? custom.bevelHighlightColor : valueAtIndexOrDefault(ds.bevelHighlightColor, i, arcOpts.bevelHighlightColor),
bevelShadowColor: custom.bevelShadowColor ? custom.bevelShadowColor : valueAtIndexOrDefault(ds.bevelShadowColor, i, arcOpts.bevelShadowColor),
innerGlowWidth: custom.innerGlowWidth ? custom.innerGlowWidth : valueAtIndexOrDefault(ds.innerGlowWidth, i, arcOpts.innerGlowWidth),
innerGlowColor: custom.innerGlowColor ? custom.innerGlowColor : valueAtIndexOrDefault(ds.innerGlowColor, i, arcOpts.innerGlowColor),
outerGlowWidth: custom.outerGlowWidth ? custom.outerGlowWidth : valueAtIndexOrDefault(ds.outerGlowWidth, i, arcOpts.outerGlowWidth),
outerGlowColor: custom.outerGlowColor ? custom.outerGlowColor : valueAtIndexOrDefault(ds.outerGlowColor, i, arcOpts.outerGlowColor),

// Extra data used for toggling the correct item
index: i
Expand Down Expand Up @@ -101,6 +105,10 @@ export default function(Chart) {
model.bevelWidth = custom.bevelWidth ? custom.bevelWidth : valueOrDefault(dataset.bevelWidth, index, elementOpts.bevelWidth);
model.bevelHighlightColor = custom.bevelHighlightColor ? custom.bevelHighlightColor : valueOrDefault(dataset.bevelHighlightColor, index, elementOpts.bevelHighlightColor);
model.bevelShadowColor = custom.bevelShadowColor ? custom.bevelShadowColor : valueOrDefault(dataset.bevelShadowColor, index, elementOpts.bevelShadowColor);
model.innerGlowWidth = custom.innerGlowWidth ? custom.innerGlowWidth : valueOrDefault(dataset.innerGlowWidth, index, elementOpts.innerGlowWidth);
model.innerGlowColor = custom.innerGlowColor ? custom.innerGlowColor : valueOrDefault(dataset.innerGlowColor, index, elementOpts.innerGlowColor);
model.outerGlowWidth = custom.outerGlowWidth ? custom.outerGlowWidth : valueOrDefault(dataset.outerGlowWidth, index, elementOpts.outerGlowWidth);
model.outerGlowColor = custom.outerGlowColor ? custom.outerGlowColor : valueOrDefault(dataset.outerGlowColor, index, elementOpts.outerGlowColor);

// Set correct angles if not resetting
if (!reset || !animationOpts.animateRotate) {
Expand Down Expand Up @@ -133,6 +141,10 @@ export default function(Chart) {
element.$previousStyle.bevelWidth = model.bevelWidth;
element.$previousStyle.bevelHighlightColor = model.bevelHighlightColor;
element.$previousStyle.bevelShadowColor = model.bevelShadowColor;
element.$previousStyle.innerGlowWidth = model.innerGlowWidth;
element.$previousStyle.innerGlowColor = model.innerGlowColor;
element.$previousStyle.outerGlowWidth = model.outerGlowWidth;
element.$previousStyle.outerGlowColor = model.outerGlowColor;
}

model.shadowOffsetX = custom.hoverShadowOffsetX ? custom.hoverShadowOffsetX : valueOrDefault(dataset.hoverShadowOffsetX, index, model.shadowOffsetX);
Expand All @@ -142,6 +154,10 @@ export default function(Chart) {
model.bevelWidth = custom.hoverBevelWidth ? custom.hoverBevelWidth : valueOrDefault(dataset.hoverBevelWidth, index, model.bevelWidth);
model.bevelHighlightColor = custom.hoverBevelHighlightColor ? custom.hoverBevelHighlightColor : valueOrDefault(dataset.hoverBevelHighlightColor, index, helpers.getHoverColor(model.bevelHighlightColor));
model.bevelShadowColor = custom.hoverBevelShadowColor ? custom.hoverBevelShadowColor : valueOrDefault(dataset.hoverBevelShadowColor, index, helpers.getHoverColor(model.bevelShadowColor));
model.innerGlowWidth = custom.hoverInnerGlowWidth ? custom.hoverInnerGlowWidth : valueOrDefault(dataset.hoverInnerGlowWidth, index, model.innerGlowWidth);
model.innerGlowColor = custom.hoverInnerGlowColor ? custom.hoverInnerGlowColor : valueOrDefault(dataset.hoverInnerGlowColor, index, helpers.getHoverColor(model.innerGlowColor));
model.outerGlowWidth = custom.hoverOuterGlowWidth ? custom.hoverOuterGlowWidth : valueOrDefault(dataset.hoverOuterGlowWidth, index, model.outerGlowWidth);
model.outerGlowColor = custom.hoverOuterGlowColor ? custom.hoverOuterGlowColor : valueOrDefault(dataset.hoverOuterGlowColor, index, helpers.getHoverColor(model.outerGlowColor));
},

removeHoverStyle: function(element) {
Expand All @@ -161,6 +177,10 @@ export default function(Chart) {
model.bevelWidth = custom.bevelWidth ? custom.bevelWidth : valueOrDefault(dataset.bevelWidth, index, elementOpts.bevelWidth);
model.bevelHighlightColor = custom.bevelHighlightColor ? custom.bevelHighlightColor : valueOrDefault(dataset.bevelHighlightColor, index, elementOpts.bevelHighlightColor);
model.bevelShadowColor = custom.bevelShadowColor ? custom.bevelShadowColor : valueOrDefault(dataset.bevelShadowColor, index, elementOpts.bevelShadowColor);
model.innerGlowWidth = custom.innerGlowWidth ? custom.innerGlowWidth : valueOrDefault(dataset.innerGlowWidth, index, elementOpts.innerGlowWidth);
model.innerGlowColor = custom.innerGlowColor ? custom.innerGlowColor : valueOrDefault(dataset.innerGlowColor, index, elementOpts.innerGlowColor);
model.outerGlowWidth = custom.outerGlowWidth ? custom.outerGlowWidth : valueOrDefault(dataset.outerGlowWidth, index, elementOpts.outerGlowWidth);
model.outerGlowColor = custom.outerGlowColor ? custom.outerGlowColor : valueOrDefault(dataset.outerGlowColor, index, elementOpts.outerGlowColor);
}

DoughnutController.prototype.removeHoverStyle.apply(this, arguments);
Expand Down
84 changes: 83 additions & 1 deletion src/controllers/controller.styleLine.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,9 @@ export default function(Chart) {
shadowOffsetX: custom.shadowOffsetX ? custom.shadowOffsetX : (dataset.shadowOffsetX || lineElementOptions.shadowOffsetX),
shadowOffsetY: custom.shadowOffsetY ? custom.shadowOffsetY : (dataset.shadowOffsetY || lineElementOptions.shadowOffsetY),
shadowBlur: custom.shadowBlur ? custom.shadowBlur : (dataset.shadowBlur || lineElementOptions.shadowBlur),
shadowColor: custom.shadowColor ? custom.shadowColor : (dataset.shadowColor || lineElementOptions.shadowColor)
shadowColor: custom.shadowColor ? custom.shadowColor : (dataset.shadowColor || lineElementOptions.shadowColor),
outerGlowWidth: custom.outerGlowWidth ? custom.outerGlowWidth : (dataset.outerGlowWidth || lineElementOptions.outerGlowWidth),
outerGlowColor: custom.outerGlowColor ? custom.outerGlowColor : (dataset.outerGlowColor || lineElementOptions.outerGlowColor)
};

line.pivot();
Expand Down Expand Up @@ -200,6 +202,70 @@ export default function(Chart) {
return bevelShadowColor;
},

getPointInnerGlowWidth: function(point, index) {
var innerGlowWidth = this.chart.options.elements.point.innerGlowWidth;
var dataset = this.getDataset();
var custom = point.custom || {};

if (custom.innerGlowWidth) {
innerGlowWidth = custom.innerGlowWidth;
} else if (dataset.pointInnerGlowWidth) {
innerGlowWidth = helpers.valueAtIndexOrDefault(dataset.pointInnerGlowWidth, index, innerGlowWidth);
} else if (dataset.innerGlowWidth) {
innerGlowWidth = dataset.innerGlowWidth;
}

return innerGlowWidth;
},

getPointInnerGlowColor: function(point, index) {
var innerGlowColor = this.chart.options.elements.point.innerGlowColor;
var dataset = this.getDataset();
var custom = point.custom || {};

if (custom.innerGlowColor) {
innerGlowColor = custom.innerGlowColor;
} else if (dataset.pointInnerGlowColor) {
innerGlowColor = helpers.valueAtIndexOrDefault(dataset.pointInnerGlowColor, index, innerGlowColor);
} else if (dataset.innerGlowColor) {
innerGlowColor = dataset.innerGlowColor;
}

return innerGlowColor;
},

getPointOuterGlowWidth: function(point, index) {
var outerGlowWidth = this.chart.options.elements.point.outerGlowWidth;
var dataset = this.getDataset();
var custom = point.custom || {};

if (custom.outerGlowWidth) {
outerGlowWidth = custom.outerGlowWidth;
} else if (dataset.pointOuterGlowWidth) {
outerGlowWidth = helpers.valueAtIndexOrDefault(dataset.pointOuterGlowWidth, index, outerGlowWidth);
} else if (dataset.outerGlowWidth) {
outerGlowWidth = dataset.outerGlowWidth;
}

return outerGlowWidth;
},

getPointOuterGlowColor: function(point, index) {
var outerGlowColor = this.chart.options.elements.point.outerGlowColor;
var dataset = this.getDataset();
var custom = point.custom || {};

if (custom.outerGlowColor) {
outerGlowColor = custom.outerGlowColor;
} else if (dataset.pointOuterGlowColor) {
outerGlowColor = helpers.valueAtIndexOrDefault(dataset.pointOuterGlowColor, index, outerGlowColor);
} else if (dataset.outerGlowColor) {
outerGlowColor = dataset.outerGlowColor;
}

return outerGlowColor;
},

updateElement: function(point, index) {
LineController.prototype.updateElement.apply(this, arguments);

Expand All @@ -212,6 +278,10 @@ export default function(Chart) {
point._model.bevelWidth = me.getPointBevelWidth(point, index);
point._model.bevelHighlightColor = me.getPointBevelHighlightColor(point, index);
point._model.bevelShadowColor = me.getPointBevelShadowColor(point, index);
point._model.innerGlowWidth = me.getPointInnerGlowWidth(point, index);
point._model.innerGlowColor = me.getPointInnerGlowColor(point, index);
point._model.outerGlowWidth = me.getPointOuterGlowWidth(point, index);
point._model.outerGlowColor = me.getPointOuterGlowColor(point, index);
},

setHoverStyle: function(element) {
Expand All @@ -232,6 +302,10 @@ export default function(Chart) {
element.$previousStyle.bevelWidth = model.bevelWidth;
element.$previousStyle.bevelHighlightColor = model.bevelHighlightColor;
element.$previousStyle.bevelShadowColor = model.bevelShadowColor;
element.$previousStyle.innerGlowWidth = model.innerGlowWidth;
element.$previousStyle.innerGlowColor = model.innerGlowColor;
element.$previousStyle.outerGlowWidth = model.outerGlowWidth;
element.$previousStyle.outerGlowColor = model.outerGlowColor;
}

model.shadowOffsetX = custom.hoverShadowOffsetX || valueOrDefault(dataset.pointHoverShadowOffsetX, index, model.shadowOffsetX);
Expand All @@ -241,6 +315,10 @@ export default function(Chart) {
model.bevelWidth = custom.hoverBevelWidth || valueOrDefault(dataset.pointHoverBevelWidth, index, model.bevelWidth);
model.bevelHighlightColor = custom.hoverBevelHighlightColor || valueOrDefault(dataset.pointHoverBevelHighlightColor, index, helpers.getHoverColor(model.bevelHighlightColor));
model.bevelShadowColor = custom.hoverBevelShadowColor || valueOrDefault(dataset.pointHoverBevelShadowColor, index, helpers.getHoverColor(model.bevelShadowColor));
model.innerGlowWidth = custom.hoverInnerGlowWidth || valueOrDefault(dataset.pointHoverInnerGlowWidth, index, model.innerGlowWidth);
model.innerGlowColor = custom.hoverInnerGlowColor || valueOrDefault(dataset.pointHoverInnerGlowColor, index, helpers.getHoverColor(model.innerGlowColor));
model.outerGlowWidth = custom.hoverOuterGlowWidth || valueOrDefault(dataset.pointHoverOuterGlowWidth, index, model.outerGlowWidth);
model.outerGlowColor = custom.hoverOuterGlowColor || valueOrDefault(dataset.pointHoverOuterGlowColor, index, helpers.getHoverColor(model.outerGlowColor));
},

removeHoverStyle: function(element) {
Expand All @@ -257,6 +335,10 @@ export default function(Chart) {
model.bevelWidth = me.getPointBevelWidth(element, index);
model.bevelHighlightColor = me.getPointBevelHighlightColor(element, index);
model.bevelShadowColor = me.getPointBevelShadowColor(element, index);
model.innerGlowWidth = me.getPointInnerGlowWidth(element, index);
model.innerGlowColor = me.getPointInnerGlowColor(element, index);
model.outerGlowWidth = me.getPointOuterGlowWidth(element, index);
model.outerGlowColor = me.getPointOuterGlowColor(element, index);
}

LineController.prototype.removeHoverStyle.apply(this, arguments);
Expand Down
Loading

0 comments on commit 8b12296

Please sign in to comment.