Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Point label specific scriptable context #9373

Merged
merged 1 commit into from Jul 9, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/general/options.md
Expand Up @@ -118,6 +118,7 @@ There are multiple levels of context objects:
* `data`
* `scale`
* `tick`
* `pointLabel` (only used in the radial linear scale)
* `tooltip`

Each level inherits its parent(s) and any contextual information stored in the parent is available through the child.
Expand Down
24 changes: 21 additions & 3 deletions src/scales/scale.radialLinear.js
Expand Up @@ -88,7 +88,7 @@ function fitWithPointLabels(scale) {

const valueCount = scale.getLabels().length;
for (let i = 0; i < valueCount; i++) {
const opts = scale.options.pointLabels.setContext(scale.getContext(i));
const opts = scale.options.pointLabels.setContext(scale.getPointLabelContext(i));
padding[i] = opts.padding;
const pointPosition = scale.getPointPosition(i, scale.drawingArea + padding[i]);
const plFont = toFont(opts.font);
Expand Down Expand Up @@ -194,7 +194,7 @@ function drawPointLabels(scale, labelCount) {
const {ctx, options: {pointLabels}} = scale;

for (let i = labelCount - 1; i >= 0; i--) {
const optsAtIndex = pointLabels.setContext(scale.getContext(i));
const optsAtIndex = pointLabels.setContext(scale.getPointLabelContext(i));
const plFont = toFont(optsAtIndex.font);
const {x, y, textAlign, left, top, right, bottom} = scale._pointLabelItems[i];
const {backdropColor} = optsAtIndex;
Expand Down Expand Up @@ -264,6 +264,14 @@ function numberOrZero(param) {
return isNumber(param) ? param : 0;
}

function createPointLabelContext(parent, index, label) {
return Object.assign(Object.create(parent), {
label,
index,
type: 'pointLabel'
});
}

export default class RadialLinearScale extends LinearScaleBase {

constructor(cfg) {
Expand Down Expand Up @@ -398,6 +406,16 @@ export default class RadialLinearScale extends LinearScaleBase {
return me.options.reverse ? me.max - scaledDistance : me.min + scaledDistance;
}

getPointLabelContext(index) {
const me = this;
const pointLabels = me._pointLabels || [];

if (index >= 0 && index < pointLabels.length) {
const pointLabel = pointLabels[index];
return createPointLabelContext(me.getContext(), index, pointLabel);
}
}

getPointPosition(index, distanceFromCenter) {
const me = this;
const angle = me.getIndexAngle(index) - HALF_PI;
Expand Down Expand Up @@ -474,7 +492,7 @@ export default class RadialLinearScale extends LinearScaleBase {
ctx.save();

for (i = me.getLabels().length - 1; i >= 0; i--) {
const optsAtIndex = angleLines.setContext(me.getContext(i));
const optsAtIndex = angleLines.setContext(me.getPointLabelContext(i));
const {color, lineWidth} = optsAtIndex;

if (!lineWidth || !color) {
Expand Down
@@ -0,0 +1,33 @@
module.exports = {
config: {
type: 'radar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 1, 3, 12, 19, 3, 5, 1, 3, 12, 19, 3, 5, 1, 3, 12, 19, 3, 5, 1, 3]
}]
},
options: {
scales: {
r: {
ticks: {
display: false,
},
angleLines: {
color: (ctx) => {
return ctx.index % 2 === 0 ? 'green' : 'red';
}
},
pointLabels: {
display: false,
}
}
},
}
},
options: {
spriteText: true,
width: 300,
}
};
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 12 additions & 4 deletions types/index.esm.d.ts
Expand Up @@ -1278,6 +1278,14 @@ export interface ScriptableScaleContext {
tick: Tick;
}

export interface ScriptableScalePointLabelContext {
chart: Chart;
scale: Scale;
index: number;
label: string;
}


export const Ticks: {
formatters: {
/**
Expand Down Expand Up @@ -3152,12 +3160,12 @@ export type RadialLinearScaleOptions = CoreScaleOptions & {
* Background color of the point label.
* @default undefined
*/
backdropColor: Scriptable<Color, ScriptableScaleContext>;
backdropColor: Scriptable<Color, ScriptableScalePointLabelContext>;
/**
* Padding of label backdrop.
* @default 2
*/
backdropPadding: Scriptable<number | ChartArea, ScriptableScaleContext>;
backdropPadding: Scriptable<number | ChartArea, ScriptableScalePointLabelContext>;

/**
* if true, point labels are shown.
Expand All @@ -3168,10 +3176,10 @@ export type RadialLinearScaleOptions = CoreScaleOptions & {
* Color of label
* @see Defaults.color
*/
color: Scriptable<Color, ScriptableScaleContext>;
color: Scriptable<Color, ScriptableScalePointLabelContext>;
/**
*/
font: Scriptable<FontSpec, ScriptableScaleContext>;
font: Scriptable<FontSpec, ScriptableScalePointLabelContext>;

/**
* Callback function to transform data labels to point labels. The default implementation simply returns the current string.
Expand Down