undoing changes to draw file.
This commit is contained in:
Kaleb White
parent
539bc50883
commit
a5a5fc051b
2
docs/assets/js/frappe-charts.min.js
vendored
2
docs/assets/js/frappe-charts.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,9 +1,4 @@
|
||||
import {
|
||||
getBarHeightAndYAttr,
|
||||
truncateString,
|
||||
shortenLargeNumber,
|
||||
getSplineCurvePointsStr
|
||||
} from './draw-utils';
|
||||
import { getBarHeightAndYAttr, truncateString, shortenLargeNumber, getSplineCurvePointsStr } from './draw-utils';
|
||||
import { getStringWidth, isValidNumber } from './helpers';
|
||||
import { DOT_OVERLAY_SIZE_INCR, PERCENTAGE_BAR_DEFAULT_DEPTH } from './constants';
|
||||
import { lightenDarkenColor } from './colors';
|
||||
@ -16,32 +11,32 @@ const BASE_LINE_COLOR = '#dadada';
|
||||
const FONT_FILL = '#555b51';
|
||||
|
||||
function $(expr, con) {
|
||||
return typeof expr === 'string' ? (con || document).querySelector(expr) : expr || null;
|
||||
return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
|
||||
}
|
||||
|
||||
export function createSVG(tag, o) {
|
||||
var element = document.createElementNS('http://www.w3.org/2000/svg', tag);
|
||||
var element = document.createElementNS("http://www.w3.org/2000/svg", tag);
|
||||
|
||||
for (var i in o) {
|
||||
var val = o[i];
|
||||
|
||||
if (i === 'inside') {
|
||||
if (i === "inside") {
|
||||
$(val).appendChild(element);
|
||||
} else if (i === 'around') {
|
||||
}
|
||||
else if (i === "around") {
|
||||
var ref = $(val);
|
||||
ref.parentNode.insertBefore(element, ref);
|
||||
element.appendChild(ref);
|
||||
} else if (i === 'styles') {
|
||||
if (typeof val === 'object') {
|
||||
Object.keys(val).map((prop) => {
|
||||
|
||||
} else if (i === "styles") {
|
||||
if(typeof val === "object") {
|
||||
Object.keys(val).map(prop => {
|
||||
element.style[prop] = val[prop];
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (i === 'className') {
|
||||
i = 'class';
|
||||
}
|
||||
if (i === 'innerHTML') {
|
||||
if(i === "className") { i = "class"; }
|
||||
if(i === "innerHTML") {
|
||||
element['textContent'] = val;
|
||||
} else {
|
||||
element.setAttribute(i, val);
|
||||
@ -65,9 +60,9 @@ function renderVerticalGradient(svgDefElem, gradientId) {
|
||||
|
||||
function setGradientStop(gradElem, offset, color, opacity) {
|
||||
return createSVG('stop', {
|
||||
inside: gradElem,
|
||||
style: `stop-color: ${color}`,
|
||||
offset: offset,
|
||||
'inside': gradElem,
|
||||
'style': `stop-color: ${color}`,
|
||||
'offset': offset,
|
||||
'stop-opacity': opacity
|
||||
});
|
||||
}
|
||||
@ -83,34 +78,28 @@ export function makeSVGContainer(parent, className, width, height) {
|
||||
|
||||
export function makeSVGDefs(svgContainer) {
|
||||
return createSVG('defs', {
|
||||
inside: svgContainer
|
||||
inside: svgContainer,
|
||||
});
|
||||
}
|
||||
|
||||
export function makeSVGGroup(className, transform = '', parent = undefined) {
|
||||
export function makeSVGGroup(className, transform='', parent=undefined) {
|
||||
let args = {
|
||||
className: className,
|
||||
transform: transform
|
||||
};
|
||||
if (parent) args.inside = parent;
|
||||
if(parent) args.inside = parent;
|
||||
return createSVG('g', args);
|
||||
}
|
||||
|
||||
export function wrapInSVGGroup(elements, className = '') {
|
||||
export function wrapInSVGGroup(elements, className='') {
|
||||
let g = createSVG('g', {
|
||||
className: className
|
||||
});
|
||||
elements.forEach((e) => g.appendChild(e));
|
||||
elements.forEach(e => g.appendChild(e));
|
||||
return g;
|
||||
}
|
||||
|
||||
export function makePath(
|
||||
pathStr,
|
||||
className = '',
|
||||
stroke = 'none',
|
||||
fill = 'none',
|
||||
strokeWidth = 2
|
||||
) {
|
||||
export function makePath(pathStr, className='', stroke='none', fill='none', strokeWidth=2) {
|
||||
return createSVG('path', {
|
||||
className: className,
|
||||
d: pathStr,
|
||||
@ -122,14 +111,7 @@ export function makePath(
|
||||
});
|
||||
}
|
||||
|
||||
export function makeArcPathStr(
|
||||
startPosition,
|
||||
endPosition,
|
||||
center,
|
||||
radius,
|
||||
clockWise = 1,
|
||||
largeArc = 0
|
||||
) {
|
||||
export function makeArcPathStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){
|
||||
let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y];
|
||||
let [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y];
|
||||
return `M${center.x} ${center.y}
|
||||
@ -138,20 +120,9 @@ export function makeArcPathStr(
|
||||
${arcEndX} ${arcEndY} z`;
|
||||
}
|
||||
|
||||
export function makeCircleStr(
|
||||
startPosition,
|
||||
endPosition,
|
||||
center,
|
||||
radius,
|
||||
clockWise = 1,
|
||||
largeArc = 0
|
||||
) {
|
||||
export function makeCircleStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){
|
||||
let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y];
|
||||
let [arcEndX, midArc, arcEndY] = [
|
||||
center.x + endPosition.x,
|
||||
center.y * 2,
|
||||
center.y + endPosition.y
|
||||
];
|
||||
let [arcEndX, midArc, arcEndY] = [center.x + endPosition.x, center.y * 2, center.y + endPosition.y];
|
||||
return `M${center.x} ${center.y}
|
||||
L${arcStartX} ${arcStartY}
|
||||
A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}
|
||||
@ -161,14 +132,7 @@ export function makeCircleStr(
|
||||
${arcEndX} ${arcEndY} z`;
|
||||
}
|
||||
|
||||
export function makeArcStrokePathStr(
|
||||
startPosition,
|
||||
endPosition,
|
||||
center,
|
||||
radius,
|
||||
clockWise = 1,
|
||||
largeArc = 0
|
||||
) {
|
||||
export function makeArcStrokePathStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){
|
||||
let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y];
|
||||
let [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y];
|
||||
|
||||
@ -177,20 +141,9 @@ export function makeArcStrokePathStr(
|
||||
${arcEndX} ${arcEndY}`;
|
||||
}
|
||||
|
||||
export function makeStrokeCircleStr(
|
||||
startPosition,
|
||||
endPosition,
|
||||
center,
|
||||
radius,
|
||||
clockWise = 1,
|
||||
largeArc = 0
|
||||
) {
|
||||
export function makeStrokeCircleStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){
|
||||
let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y];
|
||||
let [arcEndX, midArc, arcEndY] = [
|
||||
center.x + endPosition.x,
|
||||
radius * 2 + arcStartY,
|
||||
center.y + startPosition.y
|
||||
];
|
||||
let [arcEndX, midArc, arcEndY] = [center.x + endPosition.x, radius * 2 + arcStartY, center.y + startPosition.y];
|
||||
|
||||
return `M${arcStartX} ${arcStartY}
|
||||
A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}
|
||||
@ -201,29 +154,23 @@ export function makeStrokeCircleStr(
|
||||
}
|
||||
|
||||
export function makeGradient(svgDefElem, color, lighter = false) {
|
||||
let gradientId =
|
||||
'path-fill-gradient' + '-' + color + '-' + (lighter ? 'lighter' : 'default');
|
||||
let gradientId ='path-fill-gradient' + '-' + color + '-' +(lighter ? 'lighter' : 'default');
|
||||
let gradientDef = renderVerticalGradient(svgDefElem, gradientId);
|
||||
let opacities = [1, 0.6, 0.2];
|
||||
if (lighter) {
|
||||
if(lighter) {
|
||||
opacities = [0.4, 0.2, 0];
|
||||
}
|
||||
|
||||
setGradientStop(gradientDef, '0%', color, opacities[0]);
|
||||
setGradientStop(gradientDef, '50%', color, opacities[1]);
|
||||
setGradientStop(gradientDef, '100%', color, opacities[2]);
|
||||
setGradientStop(gradientDef, "0%", color, opacities[0]);
|
||||
setGradientStop(gradientDef, "50%", color, opacities[1]);
|
||||
setGradientStop(gradientDef, "100%", color, opacities[2]);
|
||||
|
||||
return gradientId;
|
||||
}
|
||||
|
||||
export function percentageBar(
|
||||
x,
|
||||
y,
|
||||
width,
|
||||
height,
|
||||
depth = PERCENTAGE_BAR_DEFAULT_DEPTH,
|
||||
fill = 'none'
|
||||
) {
|
||||
export function percentageBar(x, y, width, height,
|
||||
depth=PERCENTAGE_BAR_DEFAULT_DEPTH, fill='none') {
|
||||
|
||||
let args = {
|
||||
className: 'percentage-bar',
|
||||
x: x,
|
||||
@ -232,18 +179,18 @@ export function percentageBar(
|
||||
height: height,
|
||||
fill: fill,
|
||||
styles: {
|
||||
stroke: lightenDarkenColor(fill, -25),
|
||||
'stroke': lightenDarkenColor(fill, -25),
|
||||
// Diabolically good: https://stackoverflow.com/a/9000859
|
||||
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
|
||||
'stroke-dasharray': `0, ${height + width}, ${width}, ${height}`,
|
||||
'stroke-width': depth
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
return createSVG('rect', args);
|
||||
return createSVG("rect", args);
|
||||
}
|
||||
|
||||
export function heatSquare(className, x, y, size, radius, fill = 'none', data = {}) {
|
||||
export function heatSquare(className, x, y, size, radius, fill='none', data={}) {
|
||||
let args = {
|
||||
className: className,
|
||||
x: x,
|
||||
@ -254,14 +201,14 @@ export function heatSquare(className, x, y, size, radius, fill = 'none', data =
|
||||
fill: fill
|
||||
};
|
||||
|
||||
Object.keys(data).map((key) => {
|
||||
Object.keys(data).map(key => {
|
||||
args[key] = data[key];
|
||||
});
|
||||
|
||||
return createSVG('rect', args);
|
||||
return createSVG("rect", args);
|
||||
}
|
||||
|
||||
export function legendBar(x, y, size, fill = 'none', label, truncate = false) {
|
||||
export function legendBar(x, y, size, fill='none', label, truncate=false) {
|
||||
label = truncate ? truncateString(label, LABEL_MAX_CHARS) : label;
|
||||
|
||||
let args = {
|
||||
@ -276,8 +223,8 @@ export function legendBar(x, y, size, fill = 'none', label, truncate = false) {
|
||||
className: 'legend-dataset-text',
|
||||
x: 0,
|
||||
y: 0,
|
||||
dy: FONT_SIZE * 2 + 'px',
|
||||
'font-size': FONT_SIZE * 1.2 + 'px',
|
||||
dy: (FONT_SIZE * 2) + 'px',
|
||||
'font-size': (FONT_SIZE * 1.2) + 'px',
|
||||
'text-anchor': 'start',
|
||||
fill: FONT_FILL,
|
||||
innerHTML: label
|
||||
@ -286,13 +233,13 @@ export function legendBar(x, y, size, fill = 'none', label, truncate = false) {
|
||||
let group = createSVG('g', {
|
||||
transform: `translate(${x}, ${y})`
|
||||
});
|
||||
group.appendChild(createSVG('rect', args));
|
||||
group.appendChild(createSVG("rect", args));
|
||||
group.appendChild(text);
|
||||
|
||||
return group;
|
||||
}
|
||||
|
||||
export function legendDot(x, y, size, fill = 'none', label, truncate = false) {
|
||||
export function legendDot(x, y, size, fill='none', label, truncate=false) {
|
||||
label = truncate ? truncateString(label, LABEL_MAX_CHARS) : label;
|
||||
|
||||
let args = {
|
||||
@ -306,9 +253,9 @@ export function legendDot(x, y, size, fill = 'none', label, truncate = false) {
|
||||
className: 'legend-dataset-text',
|
||||
x: 0,
|
||||
y: 0,
|
||||
dx: FONT_SIZE + 'px',
|
||||
dy: FONT_SIZE / 3 + 'px',
|
||||
'font-size': FONT_SIZE * 1.2 + 'px',
|
||||
dx: (FONT_SIZE) + 'px',
|
||||
dy: (FONT_SIZE/3) + 'px',
|
||||
'font-size': (FONT_SIZE * 1.2) + 'px',
|
||||
'text-anchor': 'start',
|
||||
fill: FONT_FILL,
|
||||
innerHTML: label
|
||||
@ -317,7 +264,7 @@ export function legendDot(x, y, size, fill = 'none', label, truncate = false) {
|
||||
let group = createSVG('g', {
|
||||
transform: `translate(${x}, ${y})`
|
||||
});
|
||||
group.appendChild(createSVG('circle', args));
|
||||
group.appendChild(createSVG("circle", args));
|
||||
group.appendChild(text);
|
||||
|
||||
return group;
|
||||
@ -325,7 +272,7 @@ export function legendDot(x, y, size, fill = 'none', label, truncate = false) {
|
||||
|
||||
export function makeText(className, x, y, content, options = {}) {
|
||||
let fontSize = options.fontSize || FONT_SIZE;
|
||||
let dy = options.dy !== undefined ? options.dy : fontSize / 2;
|
||||
let dy = options.dy !== undefined ? options.dy : (fontSize / 2);
|
||||
let fill = options.fill || FONT_FILL;
|
||||
let textAnchor = options.textAnchor || 'start';
|
||||
return createSVG('text', {
|
||||
@ -340,8 +287,8 @@ export function makeText(className, x, y, content, options = {}) {
|
||||
});
|
||||
}
|
||||
|
||||
function makeVertLine(x, label, y1, y2, options = {}) {
|
||||
if (!options.stroke) options.stroke = BASE_LINE_COLOR;
|
||||
function makeVertLine(x, label, y1, y2, options={}) {
|
||||
if(!options.stroke) options.stroke = BASE_LINE_COLOR;
|
||||
let l = createSVG('line', {
|
||||
className: 'line-vertical ' + options.className,
|
||||
x1: 0,
|
||||
@ -359,11 +306,11 @@ function makeVertLine(x, label, y1, y2, options = {}) {
|
||||
dy: FONT_SIZE + 'px',
|
||||
'font-size': FONT_SIZE + 'px',
|
||||
'text-anchor': 'middle',
|
||||
innerHTML: label + ''
|
||||
innerHTML: label + ""
|
||||
});
|
||||
|
||||
let line = createSVG('g', {
|
||||
transform: `translate(${x}, 0)`
|
||||
transform: `translate(${ x }, 0)`
|
||||
});
|
||||
|
||||
line.appendChild(l);
|
||||
@ -372,16 +319,13 @@ function makeVertLine(x, label, y1, y2, options = {}) {
|
||||
return line;
|
||||
}
|
||||
|
||||
function makeHoriLine(y, label, x1, x2, options = {}) {
|
||||
if (!options.stroke) options.stroke = BASE_LINE_COLOR;
|
||||
if (!options.lineType) options.lineType = '';
|
||||
if (!options.alignment) options.alignment = 'left';
|
||||
function makeHoriLine(y, label, x1, x2, options={}) {
|
||||
if(!options.stroke) options.stroke = BASE_LINE_COLOR;
|
||||
if(!options.lineType) options.lineType = '';
|
||||
if (options.shortenNumbers) label = shortenLargeNumber(label);
|
||||
|
||||
let className =
|
||||
'line-horizontal ' +
|
||||
options.className +
|
||||
(options.lineType === 'dashed' ? 'dashed' : '');
|
||||
let className = 'line-horizontal ' + options.className +
|
||||
(options.lineType === "dashed" ? "dashed": "");
|
||||
|
||||
let l = createSVG('line', {
|
||||
className: className,
|
||||
@ -395,12 +339,12 @@ function makeHoriLine(y, label, x1, x2, options = {}) {
|
||||
});
|
||||
|
||||
let text = createSVG('text', {
|
||||
x: options.alignment === 'left' ? x1 - LABEL_MARGIN : x2 + LABEL_MARGIN * 4,
|
||||
x: x1 < x2 ? x1 - LABEL_MARGIN : x1 + LABEL_MARGIN,
|
||||
y: 0,
|
||||
dy: FONT_SIZE / 2 - 2 + 'px',
|
||||
dy: (FONT_SIZE / 2 - 2) + 'px',
|
||||
'font-size': FONT_SIZE + 'px',
|
||||
'text-anchor': x1 < x2 ? 'end' : 'start',
|
||||
innerHTML: label + ''
|
||||
innerHTML: label+""
|
||||
});
|
||||
|
||||
let line = createSVG('g', {
|
||||
@ -408,8 +352,8 @@ function makeHoriLine(y, label, x1, x2, options = {}) {
|
||||
'stroke-opacity': 1
|
||||
});
|
||||
|
||||
if (text === 0 || text === '0') {
|
||||
line.style.stroke = 'rgba(27, 31, 35, 0.6)';
|
||||
if(text === 0 || text === '0') {
|
||||
line.style.stroke = "rgba(27, 31, 35, 0.6)";
|
||||
}
|
||||
|
||||
line.appendChild(l);
|
||||
@ -442,45 +386,44 @@ export function generateAxisLabel(options) {
|
||||
return labelSvg;
|
||||
}
|
||||
|
||||
export function yLine(y, label, width, options = {}) {
|
||||
export function yLine(y, label, width, options={}) {
|
||||
if (!isValidNumber(y)) y = 0;
|
||||
|
||||
if (!options.pos) options.pos = 'left';
|
||||
if (!options.offset) options.offset = 0;
|
||||
if (!options.mode) options.mode = 'span';
|
||||
if (!options.stroke) options.stroke = BASE_LINE_COLOR;
|
||||
if (!options.className) options.className = '';
|
||||
if(!options.pos) options.pos = 'left';
|
||||
if(!options.offset) options.offset = 0;
|
||||
if(!options.mode) options.mode = 'span';
|
||||
if(!options.stroke) options.stroke = BASE_LINE_COLOR;
|
||||
if(!options.className) options.className = '';
|
||||
|
||||
let x1 = -1 * AXIS_TICK_LENGTH;
|
||||
let x2 = options.mode === 'span' ? width + AXIS_TICK_LENGTH : 0;
|
||||
|
||||
if (options.mode === 'tick' && options.pos === 'right') {
|
||||
if(options.mode === 'tick' && options.pos === 'right') {
|
||||
x1 = width + AXIS_TICK_LENGTH;
|
||||
x2 = width;
|
||||
}
|
||||
|
||||
let offset = options.pos === 'left' ? -1 * options.offset : options.offset;
|
||||
// let offset = options.pos === 'left' ? -1 * options.offset : options.offset;
|
||||
|
||||
x1 += offset;
|
||||
x2 += offset;
|
||||
x1 += options.offset;
|
||||
x2 += options.offset;
|
||||
|
||||
return makeHoriLine(y, label, x1, x2, {
|
||||
stroke: options.stroke,
|
||||
className: options.className,
|
||||
lineType: options.lineType,
|
||||
alignment: options.pos,
|
||||
shortenNumbers: options.shortenNumbers
|
||||
});
|
||||
}
|
||||
|
||||
export function xLine(x, label, height, options = {}) {
|
||||
export function xLine(x, label, height, options={}) {
|
||||
if (!isValidNumber(x)) x = 0;
|
||||
|
||||
if (!options.pos) options.pos = 'bottom';
|
||||
if (!options.offset) options.offset = 0;
|
||||
if (!options.mode) options.mode = 'span';
|
||||
if (!options.stroke) options.stroke = BASE_LINE_COLOR;
|
||||
if (!options.className) options.className = '';
|
||||
if(!options.pos) options.pos = 'bottom';
|
||||
if(!options.offset) options.offset = 0;
|
||||
if(!options.mode) options.mode = 'span';
|
||||
if(!options.stroke) options.stroke = BASE_LINE_COLOR;
|
||||
if(!options.className) options.className = '';
|
||||
|
||||
// Draw X axis line in span/tick mode with optional label
|
||||
// y2(span)
|
||||
@ -496,7 +439,7 @@ export function xLine(x, label, height, options = {}) {
|
||||
let y1 = height + AXIS_TICK_LENGTH;
|
||||
let y2 = options.mode === 'span' ? -1 * AXIS_TICK_LENGTH : height;
|
||||
|
||||
if (options.mode === 'tick' && options.pos === 'top') {
|
||||
if(options.mode === 'tick' && options.pos === 'top') {
|
||||
// top axis ticks
|
||||
y1 = -1 * AXIS_TICK_LENGTH;
|
||||
y2 = 0;
|
||||
@ -509,21 +452,19 @@ export function xLine(x, label, height, options = {}) {
|
||||
});
|
||||
}
|
||||
|
||||
export function yMarker(y, label, width, options = {}) {
|
||||
if (!options.labelPos) options.labelPos = 'right';
|
||||
let x =
|
||||
options.labelPos === 'left'
|
||||
? LABEL_MARGIN
|
||||
export function yMarker(y, label, width, options={}) {
|
||||
if(!options.labelPos) options.labelPos = 'right';
|
||||
let x = options.labelPos === 'left' ? LABEL_MARGIN
|
||||
: width - getStringWidth(label, 5) - LABEL_MARGIN;
|
||||
|
||||
let labelSvg = createSVG('text', {
|
||||
className: 'chart-label',
|
||||
x: x,
|
||||
y: 0,
|
||||
dy: FONT_SIZE / -2 + 'px',
|
||||
dy: (FONT_SIZE / -2) + 'px',
|
||||
'font-size': FONT_SIZE + 'px',
|
||||
'text-anchor': 'start',
|
||||
innerHTML: label + ''
|
||||
innerHTML: label+""
|
||||
});
|
||||
|
||||
let line = makeHoriLine(y, '', 0, width, {
|
||||
@ -537,7 +478,7 @@ export function yMarker(y, label, width, options = {}) {
|
||||
return line;
|
||||
}
|
||||
|
||||
export function yRegion(y1, y2, width, label, options = {}) {
|
||||
export function yRegion(y1, y2, width, label, options={}) {
|
||||
// return a group
|
||||
let height = y1 - y2;
|
||||
|
||||
@ -555,20 +496,18 @@ export function yRegion(y1, y2, width, label, options = {}) {
|
||||
height: height
|
||||
});
|
||||
|
||||
if (!options.labelPos) options.labelPos = 'right';
|
||||
let x =
|
||||
options.labelPos === 'left'
|
||||
? LABEL_MARGIN
|
||||
: width - getStringWidth(label + '', 4.5) - LABEL_MARGIN;
|
||||
if(!options.labelPos) options.labelPos = 'right';
|
||||
let x = options.labelPos === 'left' ? LABEL_MARGIN
|
||||
: width - getStringWidth(label+"", 4.5) - LABEL_MARGIN;
|
||||
|
||||
let labelSvg = createSVG('text', {
|
||||
className: 'chart-label',
|
||||
x: x,
|
||||
y: 0,
|
||||
dy: FONT_SIZE / -2 + 'px',
|
||||
dy: (FONT_SIZE / -2) + 'px',
|
||||
'font-size': FONT_SIZE + 'px',
|
||||
'text-anchor': 'start',
|
||||
innerHTML: label + ''
|
||||
innerHTML: label+""
|
||||
});
|
||||
|
||||
let region = createSVG('g', {
|
||||
@ -581,20 +520,11 @@ export function yRegion(y1, y2, width, label, options = {}) {
|
||||
return region;
|
||||
}
|
||||
|
||||
export function datasetBar(
|
||||
x,
|
||||
yTop,
|
||||
width,
|
||||
color,
|
||||
label = '',
|
||||
index = 0,
|
||||
offset = 0,
|
||||
meta = {}
|
||||
) {
|
||||
export function datasetBar(x, yTop, width, color, label='', index=0, offset=0, meta={}) {
|
||||
let [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine);
|
||||
y -= offset;
|
||||
|
||||
if (height === 0) {
|
||||
if(height === 0) {
|
||||
height = meta.minHeight;
|
||||
y -= meta.minHeight;
|
||||
}
|
||||
@ -615,18 +545,18 @@ export function datasetBar(
|
||||
height: height
|
||||
});
|
||||
|
||||
label += '';
|
||||
label += "";
|
||||
|
||||
if (!label && !label.length) {
|
||||
if(!label && !label.length) {
|
||||
return rect;
|
||||
} else {
|
||||
rect.setAttribute('y', 0);
|
||||
rect.setAttribute('x', 0);
|
||||
let text = createSVG('text', {
|
||||
className: 'data-point-value',
|
||||
x: width / 2,
|
||||
x: width/2,
|
||||
y: 0,
|
||||
dy: (FONT_SIZE / 2) * -1 + 'px',
|
||||
dy: (FONT_SIZE / 2 * -1) + 'px',
|
||||
'font-size': FONT_SIZE + 'px',
|
||||
'text-anchor': 'middle',
|
||||
innerHTML: label
|
||||
@ -643,7 +573,7 @@ export function datasetBar(
|
||||
}
|
||||
}
|
||||
|
||||
export function datasetDot(x, y, radius, color, label = '', index = 0) {
|
||||
export function datasetDot(x, y, radius, color, label='', index=0) {
|
||||
let dot = createSVG('circle', {
|
||||
style: `fill: ${color}`,
|
||||
'data-point-index': index,
|
||||
@ -652,9 +582,9 @@ export function datasetDot(x, y, radius, color, label = '', index = 0) {
|
||||
r: radius
|
||||
});
|
||||
|
||||
label += '';
|
||||
label += "";
|
||||
|
||||
if (!label && !label.length) {
|
||||
if(!label && !label.length) {
|
||||
return dot;
|
||||
} else {
|
||||
dot.setAttribute('cy', 0);
|
||||
@ -664,7 +594,7 @@ export function datasetDot(x, y, radius, color, label = '', index = 0) {
|
||||
className: 'data-point-value',
|
||||
x: 0,
|
||||
y: 0,
|
||||
dy: (FONT_SIZE / 2) * -1 - radius + 'px',
|
||||
dy: (FONT_SIZE / 2 * -1 - radius) + 'px',
|
||||
'font-size': FONT_SIZE + 'px',
|
||||
'text-anchor': 'middle',
|
||||
innerHTML: label
|
||||
@ -681,17 +611,18 @@ export function datasetDot(x, y, radius, color, label = '', index = 0) {
|
||||
}
|
||||
}
|
||||
|
||||
export function getPaths(xList, yList, color, options = {}, meta = {}) {
|
||||
let pointsList = yList.map((y, i) => xList[i] + ',' + y);
|
||||
let pointsStr = pointsList.join('L');
|
||||
export function getPaths(xList, yList, color, options={}, meta={}) {
|
||||
let pointsList = yList.map((y, i) => (xList[i] + ',' + y));
|
||||
let pointsStr = pointsList.join("L");
|
||||
|
||||
// Spline
|
||||
if (options.spline) pointsStr = getSplineCurvePointsStr(xList, yList);
|
||||
if (options.spline)
|
||||
pointsStr = getSplineCurvePointsStr(xList, yList);
|
||||
|
||||
let path = makePath('M' + pointsStr, 'line-graph-path', color);
|
||||
let path = makePath("M"+pointsStr, 'line-graph-path', color);
|
||||
|
||||
// HeatLine
|
||||
if (options.heatline) {
|
||||
if(options.heatline) {
|
||||
let gradient_id = makeGradient(meta.svgDefs, color);
|
||||
path.style.stroke = `url(#${gradient_id})`;
|
||||
}
|
||||
@ -701,14 +632,10 @@ export function getPaths(xList, yList, color, options = {}, meta = {}) {
|
||||
};
|
||||
|
||||
// Region
|
||||
if (options.regionFill) {
|
||||
if(options.regionFill) {
|
||||
let gradient_id_region = makeGradient(meta.svgDefs, color, true);
|
||||
|
||||
let pathStr =
|
||||
'M' +
|
||||
`${xList[0]},${meta.zeroLine}L` +
|
||||
pointsStr +
|
||||
`L${xList.slice(-1)[0]},${meta.zeroLine}`;
|
||||
let pathStr = "M" + `${xList[0]},${meta.zeroLine}L` + pointsStr + `L${xList.slice(-1)[0]},${meta.zeroLine}`;
|
||||
paths.region = makePath(pathStr, `region-fill`, 'none', `url(#${gradient_id_region})`);
|
||||
}
|
||||
|
||||
@ -716,9 +643,9 @@ export function getPaths(xList, yList, color, options = {}, meta = {}) {
|
||||
}
|
||||
|
||||
export let makeOverlay = {
|
||||
bar: (unit) => {
|
||||
'bar': (unit) => {
|
||||
let transformValue;
|
||||
if (unit.nodeName !== 'rect') {
|
||||
if(unit.nodeName !== 'rect') {
|
||||
transformValue = unit.getAttribute('transform');
|
||||
unit = unit.childNodes[0];
|
||||
}
|
||||
@ -726,15 +653,15 @@ export let makeOverlay = {
|
||||
overlay.style.fill = '#000000';
|
||||
overlay.style.opacity = '0.4';
|
||||
|
||||
if (transformValue) {
|
||||
if(transformValue) {
|
||||
overlay.setAttribute('transform', transformValue);
|
||||
}
|
||||
return overlay;
|
||||
},
|
||||
|
||||
dot: (unit) => {
|
||||
'dot': (unit) => {
|
||||
let transformValue;
|
||||
if (unit.nodeName !== 'circle') {
|
||||
if(unit.nodeName !== 'circle') {
|
||||
transformValue = unit.getAttribute('transform');
|
||||
unit = unit.childNodes[0];
|
||||
}
|
||||
@ -745,15 +672,15 @@ export let makeOverlay = {
|
||||
overlay.setAttribute('fill', fill);
|
||||
overlay.style.opacity = '0.6';
|
||||
|
||||
if (transformValue) {
|
||||
if(transformValue) {
|
||||
overlay.setAttribute('transform', transformValue);
|
||||
}
|
||||
return overlay;
|
||||
},
|
||||
|
||||
heat_square: (unit) => {
|
||||
'heat_square': (unit) => {
|
||||
let transformValue;
|
||||
if (unit.nodeName !== 'circle') {
|
||||
if(unit.nodeName !== 'circle') {
|
||||
transformValue = unit.getAttribute('transform');
|
||||
unit = unit.childNodes[0];
|
||||
}
|
||||
@ -764,7 +691,7 @@ export let makeOverlay = {
|
||||
overlay.setAttribute('fill', fill);
|
||||
overlay.style.opacity = '0.6';
|
||||
|
||||
if (transformValue) {
|
||||
if(transformValue) {
|
||||
overlay.setAttribute('transform', transformValue);
|
||||
}
|
||||
return overlay;
|
||||
@ -772,57 +699,57 @@ export let makeOverlay = {
|
||||
};
|
||||
|
||||
export let updateOverlay = {
|
||||
bar: (unit, overlay) => {
|
||||
'bar': (unit, overlay) => {
|
||||
let transformValue;
|
||||
if (unit.nodeName !== 'rect') {
|
||||
if(unit.nodeName !== 'rect') {
|
||||
transformValue = unit.getAttribute('transform');
|
||||
unit = unit.childNodes[0];
|
||||
}
|
||||
let attributes = ['x', 'y', 'width', 'height'];
|
||||
Object.values(unit.attributes)
|
||||
.filter((attr) => attributes.includes(attr.name) && attr.specified)
|
||||
.map((attr) => {
|
||||
.filter(attr => attributes.includes(attr.name) && attr.specified)
|
||||
.map(attr => {
|
||||
overlay.setAttribute(attr.name, attr.nodeValue);
|
||||
});
|
||||
|
||||
if (transformValue) {
|
||||
if(transformValue) {
|
||||
overlay.setAttribute('transform', transformValue);
|
||||
}
|
||||
},
|
||||
|
||||
dot: (unit, overlay) => {
|
||||
'dot': (unit, overlay) => {
|
||||
let transformValue;
|
||||
if (unit.nodeName !== 'circle') {
|
||||
if(unit.nodeName !== 'circle') {
|
||||
transformValue = unit.getAttribute('transform');
|
||||
unit = unit.childNodes[0];
|
||||
}
|
||||
let attributes = ['cx', 'cy'];
|
||||
Object.values(unit.attributes)
|
||||
.filter((attr) => attributes.includes(attr.name) && attr.specified)
|
||||
.map((attr) => {
|
||||
.filter(attr => attributes.includes(attr.name) && attr.specified)
|
||||
.map(attr => {
|
||||
overlay.setAttribute(attr.name, attr.nodeValue);
|
||||
});
|
||||
|
||||
if (transformValue) {
|
||||
if(transformValue) {
|
||||
overlay.setAttribute('transform', transformValue);
|
||||
}
|
||||
},
|
||||
|
||||
heat_square: (unit, overlay) => {
|
||||
'heat_square': (unit, overlay) => {
|
||||
let transformValue;
|
||||
if (unit.nodeName !== 'circle') {
|
||||
if(unit.nodeName !== 'circle') {
|
||||
transformValue = unit.getAttribute('transform');
|
||||
unit = unit.childNodes[0];
|
||||
}
|
||||
let attributes = ['cx', 'cy'];
|
||||
Object.values(unit.attributes)
|
||||
.filter((attr) => attributes.includes(attr.name) && attr.specified)
|
||||
.map((attr) => {
|
||||
.filter(attr => attributes.includes(attr.name) && attr.specified)
|
||||
.map(attr => {
|
||||
overlay.setAttribute(attr.name, attr.nodeValue);
|
||||
});
|
||||
|
||||
if (transformValue) {
|
||||
if(transformValue) {
|
||||
overlay.setAttribute('transform', transformValue);
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user