jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

Bug fix where chart labels collided with y-axis labels.

Browse Source
This commit is contained in:
Kaleb White 2021-11-27 18:12:40 -08:00
parent 25207622ab
commit 9f68f1ac5f
4 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/js/frappe-charts.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/frappe-charts.min.js.map
View File

File diff suppressed because one or more lines are too long

3
src/js/objects/ChartComponents.js
View File

@ -150,7 +150,8 @@ let componentConfigs = {
yLine(position, item.labels[i], this.constants.width, { yLine(position, item.labels[i], this.constants.width, {
mode: this.constants.mode, mode: this.constants.mode,
pos: item.pos || this.constants.pos, pos: item.pos || this.constants.pos,
shortenNumbers: this.constants.shortenNumbers shortenNumbers: this.constants.shortenNumbers,
title: item.title
}) })
); );
}); });

16
src/js/utils/draw.js
View File

@ -5,6 +5,7 @@ import { lightenDarkenColor } from './colors';
export const AXIS_TICK_LENGTH = 6; export const AXIS_TICK_LENGTH = 6;
const LABEL_MARGIN = 4; const LABEL_MARGIN = 4;
const LABEL_WIDTH = 25;
const LABEL_MAX_CHARS = 15; const LABEL_MAX_CHARS = 15;
const TOTAL_PADDING = 120; const TOTAL_PADDING = 120;
export const FONT_SIZE = 10; export const FONT_SIZE = 10;
@ -331,10 +332,16 @@ function makeHoriLine(y, label, x1, x2, options = {}) {
options.className + options.className +
(options.lineType === 'dashed' ? 'dashed' : ''); (options.lineType === 'dashed' ? 'dashed' : '');
const textXPos = options.alignment === 'left' ?
options.title ? (x1 - LABEL_MARGIN) + LABEL_WIDTH : x1 - LABEL_MARGIN :
options.title ? (x2 + LABEL_MARGIN * 4) - LABEL_WIDTH : x2 + LABEL_MARGIN * 4;
const lineX1Post = options.title ? x1 + LABEL_WIDTH : x1;
const lineX2Post = options.title ? x2 - LABEL_WIDTH : x2;
let l = createSVG('line', { let l = createSVG('line', {
className: className, className: className,
x1: x1, x1: lineX1Post,
x2: x2, x2: lineX2Post,
y1: 0, y1: 0,
y2: 0, y2: 0,
styles: { styles: {
@ -343,7 +350,7 @@ function makeHoriLine(y, label, x1, x2, options = {}) {
}); });
let text = createSVG('text', { let text = createSVG('text', {
x: options.alignment === 'left' ? x1 - LABEL_MARGIN : x2 + LABEL_MARGIN * 4, x: textXPos,
y: 0, y: 0,
dy: FONT_SIZE / 2 - 2 + 'px', dy: FONT_SIZE / 2 - 2 + 'px',
'font-size': FONT_SIZE + 'px', 'font-size': FONT_SIZE + 'px',
@ -373,7 +380,7 @@ export function generateAxisLabel(options) {
(options.height - TOTAL_PADDING) / 2 + (getStringWidth(options.title, 5) / 2) : (options.height - TOTAL_PADDING) / 2 + (getStringWidth(options.title, 5) / 2) :
(options.height - TOTAL_PADDING) / 2 - (getStringWidth(options.title, 5) / 2) ; (options.height - TOTAL_PADDING) / 2 - (getStringWidth(options.title, 5) / 2) ;
const x = options.position === 'left' ? 0 : options.width; const x = options.position === 'left' ? 0 : options.width;
const y2 = options.position === 'left' ? FONT_SIZE / 3 : FONT_SIZE / 3 * -1; const y2 = options.position === 'left' ? FONT_SIZE - LABEL_WIDTH : FONT_SIZE + LABEL_WIDTH * -1;
const rotation = const rotation =
options.position === 'right' options.position === 'right'
@ -430,6 +437,7 @@ export function yLine(y, label, width, options = {}) {
className: options.className, className: options.className,
lineType: options.lineType, lineType: options.lineType,
alignment: options.pos, alignment: options.pos,
title: options.title,
shortenNumbers: options.shortenNumbers shortenNumbers: options.shortenNumbers
}); });
} }