jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

undoing changes to draw file.

Browse Source
This commit is contained in:
Kaleb White 2021-11-12 18:58:41 -08:00
parent 539bc50883
commit a5a5fc051b
3 changed files with 560 additions and 633 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

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

@ -1,9 +1,4 @@
import { import { getBarHeightAndYAttr, truncateString, shortenLargeNumber, getSplineCurvePointsStr } from './draw-utils';
getBarHeightAndYAttr,
truncateString,
shortenLargeNumber,
getSplineCurvePointsStr
} from './draw-utils';
import { getStringWidth, isValidNumber } from './helpers'; import { getStringWidth, isValidNumber } from './helpers';
import { DOT_OVERLAY_SIZE_INCR, PERCENTAGE_BAR_DEFAULT_DEPTH } from './constants'; import { DOT_OVERLAY_SIZE_INCR, PERCENTAGE_BAR_DEFAULT_DEPTH } from './constants';
import { lightenDarkenColor } from './colors'; import { lightenDarkenColor } from './colors';
@ -16,32 +11,32 @@ const BASE_LINE_COLOR = '#dadada';
const FONT_FILL = '#555b51'; const FONT_FILL = '#555b51';
function $(expr, con) { 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) { 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) { for (var i in o) {
var val = o[i]; var val = o[i];
if (i === 'inside') { if (i === "inside") {
$(val).appendChild(element); $(val).appendChild(element);
} else if (i === 'around') { }
else if (i === "around") {
var ref = $(val); var ref = $(val);
ref.parentNode.insertBefore(element, ref); ref.parentNode.insertBefore(element, ref);
element.appendChild(ref); element.appendChild(ref);
} else if (i === 'styles') {
if (typeof val === 'object') { } else if (i === "styles") {
Object.keys(val).map((prop) => { if(typeof val === "object") {
Object.keys(val).map(prop => {
element.style[prop] = val[prop]; element.style[prop] = val[prop];
}); });
} }
} else { } else {
if (i === 'className') { if(i === "className") { i = "class"; }
i = 'class'; if(i === "innerHTML") {
}
if (i === 'innerHTML') {
element['textContent'] = val; element['textContent'] = val;
} else { } else {
element.setAttribute(i, val); element.setAttribute(i, val);
@ -65,9 +60,9 @@ function renderVerticalGradient(svgDefElem, gradientId) {
function setGradientStop(gradElem, offset, color, opacity) { function setGradientStop(gradElem, offset, color, opacity) {
return createSVG('stop', { return createSVG('stop', {
inside: gradElem, 'inside': gradElem,
style: `stop-color: ${color}`, 'style': `stop-color: ${color}`,
offset: offset, 'offset': offset,
'stop-opacity': opacity 'stop-opacity': opacity
}); });
} }
@ -83,7 +78,7 @@ export function makeSVGContainer(parent, className, width, height) {
export function makeSVGDefs(svgContainer) { export function makeSVGDefs(svgContainer) {
return createSVG('defs', { return createSVG('defs', {
inside: svgContainer inside: svgContainer,
}); });
} }
@ -100,17 +95,11 @@ export function wrapInSVGGroup(elements, className = '') {
let g = createSVG('g', { let g = createSVG('g', {
className: className className: className
}); });
elements.forEach((e) => g.appendChild(e)); elements.forEach(e => g.appendChild(e));
return g; return g;
} }
export function makePath( export function makePath(pathStr, className='', stroke='none', fill='none', strokeWidth=2) {
pathStr,
className = '',
stroke = 'none',
fill = 'none',
strokeWidth = 2
) {
return createSVG('path', { return createSVG('path', {
className: className, className: className,
d: pathStr, d: pathStr,
@ -122,14 +111,7 @@ export function makePath(
}); });
} }
export function makeArcPathStr( export function makeArcPathStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){
startPosition,
endPosition,
center,
radius,
clockWise = 1,
largeArc = 0
) {
let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y]; let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y];
let [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y]; let [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y];
return `M${center.x} ${center.y} return `M${center.x} ${center.y}
@ -138,20 +120,9 @@ export function makeArcPathStr(
${arcEndX} ${arcEndY} z`; ${arcEndX} ${arcEndY} z`;
} }
export function makeCircleStr( export function makeCircleStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){
startPosition,
endPosition,
center,
radius,
clockWise = 1,
largeArc = 0
) {
let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y]; let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y];
let [arcEndX, midArc, arcEndY] = [ let [arcEndX, midArc, arcEndY] = [center.x + endPosition.x, center.y * 2, center.y + endPosition.y];
center.x + endPosition.x,
center.y * 2,
center.y + endPosition.y
];
return `M${center.x} ${center.y} return `M${center.x} ${center.y}
L${arcStartX} ${arcStartY} L${arcStartX} ${arcStartY}
A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0} A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}
@ -161,14 +132,7 @@ export function makeCircleStr(
${arcEndX} ${arcEndY} z`; ${arcEndX} ${arcEndY} z`;
} }
export function makeArcStrokePathStr( export function makeArcStrokePathStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){
startPosition,
endPosition,
center,
radius,
clockWise = 1,
largeArc = 0
) {
let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y]; let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y];
let [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y]; let [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y];
@ -177,20 +141,9 @@ export function makeArcStrokePathStr(
${arcEndX} ${arcEndY}`; ${arcEndX} ${arcEndY}`;
} }
export function makeStrokeCircleStr( export function makeStrokeCircleStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){
startPosition,
endPosition,
center,
radius,
clockWise = 1,
largeArc = 0
) {
let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y]; let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y];
let [arcEndX, midArc, arcEndY] = [ let [arcEndX, midArc, arcEndY] = [center.x + endPosition.x, radius * 2 + arcStartY, center.y + startPosition.y];
center.x + endPosition.x,
radius * 2 + arcStartY,
center.y + startPosition.y
];
return `M${arcStartX} ${arcStartY} return `M${arcStartX} ${arcStartY}
A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0} A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}
@ -201,29 +154,23 @@ export function makeStrokeCircleStr(
} }
export function makeGradient(svgDefElem, color, lighter = false) { export function makeGradient(svgDefElem, color, lighter = false) {
let gradientId = let gradientId ='path-fill-gradient' + '-' + color + '-' +(lighter ? 'lighter' : 'default');
'path-fill-gradient' + '-' + color + '-' + (lighter ? 'lighter' : 'default');
let gradientDef = renderVerticalGradient(svgDefElem, gradientId); let gradientDef = renderVerticalGradient(svgDefElem, gradientId);
let opacities = [1, 0.6, 0.2]; let opacities = [1, 0.6, 0.2];
if(lighter) { if(lighter) {
opacities = [0.4, 0.2, 0]; opacities = [0.4, 0.2, 0];
} }
setGradientStop(gradientDef, '0%', color, opacities[0]); setGradientStop(gradientDef, "0%", color, opacities[0]);
setGradientStop(gradientDef, '50%', color, opacities[1]); setGradientStop(gradientDef, "50%", color, opacities[1]);
setGradientStop(gradientDef, '100%', color, opacities[2]); setGradientStop(gradientDef, "100%", color, opacities[2]);
return gradientId; return gradientId;
} }
export function percentageBar( export function percentageBar(x, y, width, height,
x, depth=PERCENTAGE_BAR_DEFAULT_DEPTH, fill='none') {
y,
width,
height,
depth = PERCENTAGE_BAR_DEFAULT_DEPTH,
fill = 'none'
) {
let args = { let args = {
className: 'percentage-bar', className: 'percentage-bar',
x: x, x: x,
@ -232,15 +179,15 @@ export function percentageBar(
height: height, height: height,
fill: fill, fill: fill,
styles: { styles: {
stroke: lightenDarkenColor(fill, -25), 'stroke': lightenDarkenColor(fill, -25),
// Diabolically good: https://stackoverflow.com/a/9000859 // Diabolically good: https://stackoverflow.com/a/9000859
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
'stroke-dasharray': `0, ${height + width}, ${width}, ${height}`, 'stroke-dasharray': `0, ${height + width}, ${width}, ${height}`,
'stroke-width': depth '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={}) {
@ -254,11 +201,11 @@ export function heatSquare(className, x, y, size, radius, fill = 'none', data =
fill: fill fill: fill
}; };
Object.keys(data).map((key) => { Object.keys(data).map(key => {
args[key] = data[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) {
@ -276,8 +223,8 @@ export function legendBar(x, y, size, fill = 'none', label, truncate = false) {
className: 'legend-dataset-text', className: 'legend-dataset-text',
x: 0, x: 0,
y: 0, y: 0,
dy: FONT_SIZE * 2 + 'px', dy: (FONT_SIZE * 2) + 'px',
'font-size': FONT_SIZE * 1.2 + 'px', 'font-size': (FONT_SIZE * 1.2) + 'px',
'text-anchor': 'start', 'text-anchor': 'start',
fill: FONT_FILL, fill: FONT_FILL,
innerHTML: label innerHTML: label
@ -286,7 +233,7 @@ export function legendBar(x, y, size, fill = 'none', label, truncate = false) {
let group = createSVG('g', { let group = createSVG('g', {
transform: `translate(${x}, ${y})` transform: `translate(${x}, ${y})`
}); });
group.appendChild(createSVG('rect', args)); group.appendChild(createSVG("rect", args));
group.appendChild(text); group.appendChild(text);
return group; return group;
@ -306,9 +253,9 @@ export function legendDot(x, y, size, fill = 'none', label, truncate = false) {
className: 'legend-dataset-text', className: 'legend-dataset-text',
x: 0, x: 0,
y: 0, y: 0,
dx: FONT_SIZE + 'px', dx: (FONT_SIZE) + 'px',
dy: FONT_SIZE / 3 + 'px', dy: (FONT_SIZE/3) + 'px',
'font-size': FONT_SIZE * 1.2 + 'px', 'font-size': (FONT_SIZE * 1.2) + 'px',
'text-anchor': 'start', 'text-anchor': 'start',
fill: FONT_FILL, fill: FONT_FILL,
innerHTML: label innerHTML: label
@ -317,7 +264,7 @@ export function legendDot(x, y, size, fill = 'none', label, truncate = false) {
let group = createSVG('g', { let group = createSVG('g', {
transform: `translate(${x}, ${y})` transform: `translate(${x}, ${y})`
}); });
group.appendChild(createSVG('circle', args)); group.appendChild(createSVG("circle", args));
group.appendChild(text); group.appendChild(text);
return group; 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 = {}) { export function makeText(className, x, y, content, options = {}) {
let fontSize = options.fontSize || FONT_SIZE; 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 fill = options.fill || FONT_FILL;
let textAnchor = options.textAnchor || 'start'; let textAnchor = options.textAnchor || 'start';
return createSVG('text', { return createSVG('text', {
@ -359,7 +306,7 @@ function makeVertLine(x, label, y1, y2, options = {}) {
dy: FONT_SIZE + 'px', dy: FONT_SIZE + 'px',
'font-size': FONT_SIZE + 'px', 'font-size': FONT_SIZE + 'px',
'text-anchor': 'middle', 'text-anchor': 'middle',
innerHTML: label + '' innerHTML: label + ""
}); });
let line = createSVG('g', { let line = createSVG('g', {
@ -375,13 +322,10 @@ function makeVertLine(x, label, y1, y2, options = {}) {
function makeHoriLine(y, label, x1, x2, options={}) { function makeHoriLine(y, label, x1, x2, options={}) {
if(!options.stroke) options.stroke = BASE_LINE_COLOR; if(!options.stroke) options.stroke = BASE_LINE_COLOR;
if(!options.lineType) options.lineType = ''; if(!options.lineType) options.lineType = '';
if (!options.alignment) options.alignment = 'left';
if (options.shortenNumbers) label = shortenLargeNumber(label); if (options.shortenNumbers) label = shortenLargeNumber(label);
let className = let className = 'line-horizontal ' + options.className +
'line-horizontal ' + (options.lineType === "dashed" ? "dashed": "");
options.className +
(options.lineType === 'dashed' ? 'dashed' : '');
let l = createSVG('line', { let l = createSVG('line', {
className: className, className: className,
@ -395,12 +339,12 @@ 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: x1 < x2 ? x1 - LABEL_MARGIN : x1 + LABEL_MARGIN,
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',
'text-anchor': x1 < x2 ? 'end' : 'start', 'text-anchor': x1 < x2 ? 'end' : 'start',
innerHTML: label + '' innerHTML: label+""
}); });
let line = createSVG('g', { let line = createSVG('g', {
@ -409,7 +353,7 @@ function makeHoriLine(y, label, x1, x2, options = {}) {
}); });
if(text === 0 || text === '0') { if(text === 0 || text === '0') {
line.style.stroke = 'rgba(27, 31, 35, 0.6)'; line.style.stroke = "rgba(27, 31, 35, 0.6)";
} }
line.appendChild(l); line.appendChild(l);
@ -459,16 +403,15 @@ export function yLine(y, label, width, options = {}) {
x2 = width; x2 = width;
} }
let offset = options.pos === 'left' ? -1 * options.offset : options.offset; // let offset = options.pos === 'left' ? -1 * options.offset : options.offset;
x1 += offset; x1 += options.offset;
x2 += offset; x2 += options.offset;
return makeHoriLine(y, label, x1, x2, { return makeHoriLine(y, label, x1, x2, {
stroke: options.stroke, stroke: options.stroke,
className: options.className, className: options.className,
lineType: options.lineType, lineType: options.lineType,
alignment: options.pos,
shortenNumbers: options.shortenNumbers shortenNumbers: options.shortenNumbers
}); });
} }
@ -511,19 +454,17 @@ export function xLine(x, label, height, options = {}) {
export function yMarker(y, label, width, options={}) { export function yMarker(y, label, width, options={}) {
if(!options.labelPos) options.labelPos = 'right'; if(!options.labelPos) options.labelPos = 'right';
let x = let x = options.labelPos === 'left' ? LABEL_MARGIN
options.labelPos === 'left'
? LABEL_MARGIN
: width - getStringWidth(label, 5) - LABEL_MARGIN; : width - getStringWidth(label, 5) - LABEL_MARGIN;
let labelSvg = createSVG('text', { let labelSvg = createSVG('text', {
className: 'chart-label', className: 'chart-label',
x: x, x: x,
y: 0, y: 0,
dy: FONT_SIZE / -2 + 'px', dy: (FONT_SIZE / -2) + 'px',
'font-size': FONT_SIZE + 'px', 'font-size': FONT_SIZE + 'px',
'text-anchor': 'start', 'text-anchor': 'start',
innerHTML: label + '' innerHTML: label+""
}); });
let line = makeHoriLine(y, '', 0, width, { let line = makeHoriLine(y, '', 0, width, {
@ -556,19 +497,17 @@ export function yRegion(y1, y2, width, label, options = {}) {
}); });
if(!options.labelPos) options.labelPos = 'right'; if(!options.labelPos) options.labelPos = 'right';
let x = let x = options.labelPos === 'left' ? LABEL_MARGIN
options.labelPos === 'left' : width - getStringWidth(label+"", 4.5) - LABEL_MARGIN;
? LABEL_MARGIN
: width - getStringWidth(label + '', 4.5) - LABEL_MARGIN;
let labelSvg = createSVG('text', { let labelSvg = createSVG('text', {
className: 'chart-label', className: 'chart-label',
x: x, x: x,
y: 0, y: 0,
dy: FONT_SIZE / -2 + 'px', dy: (FONT_SIZE / -2) + 'px',
'font-size': FONT_SIZE + 'px', 'font-size': FONT_SIZE + 'px',
'text-anchor': 'start', 'text-anchor': 'start',
innerHTML: label + '' innerHTML: label+""
}); });
let region = createSVG('g', { let region = createSVG('g', {
@ -581,16 +520,7 @@ export function yRegion(y1, y2, width, label, options = {}) {
return region; return region;
} }
export function datasetBar( export function datasetBar(x, yTop, width, color, label='', index=0, offset=0, meta={}) {
x,
yTop,
width,
color,
label = '',
index = 0,
offset = 0,
meta = {}
) {
let [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine); let [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine);
y -= offset; y -= offset;
@ -615,7 +545,7 @@ export function datasetBar(
height: height height: height
}); });
label += ''; label += "";
if(!label && !label.length) { if(!label && !label.length) {
return rect; return rect;
@ -626,7 +556,7 @@ export function datasetBar(
className: 'data-point-value', className: 'data-point-value',
x: width/2, x: width/2,
y: 0, y: 0,
dy: (FONT_SIZE / 2) * -1 + 'px', dy: (FONT_SIZE / 2 * -1) + 'px',
'font-size': FONT_SIZE + 'px', 'font-size': FONT_SIZE + 'px',
'text-anchor': 'middle', 'text-anchor': 'middle',
innerHTML: label innerHTML: label
@ -652,7 +582,7 @@ export function datasetDot(x, y, radius, color, label = '', index = 0) {
r: radius r: radius
}); });
label += ''; label += "";
if(!label && !label.length) { if(!label && !label.length) {
return dot; return dot;
@ -664,7 +594,7 @@ export function datasetDot(x, y, radius, color, label = '', index = 0) {
className: 'data-point-value', className: 'data-point-value',
x: 0, x: 0,
y: 0, y: 0,
dy: (FONT_SIZE / 2) * -1 - radius + 'px', dy: (FONT_SIZE / 2 * -1 - radius) + 'px',
'font-size': FONT_SIZE + 'px', 'font-size': FONT_SIZE + 'px',
'text-anchor': 'middle', 'text-anchor': 'middle',
innerHTML: label innerHTML: label
@ -682,13 +612,14 @@ export function datasetDot(x, y, radius, color, label = '', index = 0) {
} }
export function getPaths(xList, yList, color, options={}, meta={}) { export function getPaths(xList, yList, color, options={}, meta={}) {
let pointsList = yList.map((y, i) => xList[i] + ',' + y); let pointsList = yList.map((y, i) => (xList[i] + ',' + y));
let pointsStr = pointsList.join('L'); let pointsStr = pointsList.join("L");
// Spline // 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 // HeatLine
if(options.heatline) { if(options.heatline) {
@ -704,11 +635,7 @@ export function getPaths(xList, yList, color, options = {}, meta = {}) {
if(options.regionFill) { if(options.regionFill) {
let gradient_id_region = makeGradient(meta.svgDefs, color, true); let gradient_id_region = makeGradient(meta.svgDefs, color, true);
let pathStr = let pathStr = "M" + `${xList[0]},${meta.zeroLine}L` + pointsStr + `L${xList.slice(-1)[0]},${meta.zeroLine}`;
'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})`); paths.region = makePath(pathStr, `region-fill`, 'none', `url(#${gradient_id_region})`);
} }
@ -716,7 +643,7 @@ export function getPaths(xList, yList, color, options = {}, meta = {}) {
} }
export let makeOverlay = { export let makeOverlay = {
bar: (unit) => { 'bar': (unit) => {
let transformValue; let transformValue;
if(unit.nodeName !== 'rect') { if(unit.nodeName !== 'rect') {
transformValue = unit.getAttribute('transform'); transformValue = unit.getAttribute('transform');
@ -732,7 +659,7 @@ export let makeOverlay = {
return overlay; return overlay;
}, },
dot: (unit) => { 'dot': (unit) => {
let transformValue; let transformValue;
if(unit.nodeName !== 'circle') { if(unit.nodeName !== 'circle') {
transformValue = unit.getAttribute('transform'); transformValue = unit.getAttribute('transform');
@ -751,7 +678,7 @@ export let makeOverlay = {
return overlay; return overlay;
}, },
heat_square: (unit) => { 'heat_square': (unit) => {
let transformValue; let transformValue;
if(unit.nodeName !== 'circle') { if(unit.nodeName !== 'circle') {
transformValue = unit.getAttribute('transform'); transformValue = unit.getAttribute('transform');
@ -772,7 +699,7 @@ export let makeOverlay = {
}; };
export let updateOverlay = { export let updateOverlay = {
bar: (unit, overlay) => { 'bar': (unit, overlay) => {
let transformValue; let transformValue;
if(unit.nodeName !== 'rect') { if(unit.nodeName !== 'rect') {
transformValue = unit.getAttribute('transform'); transformValue = unit.getAttribute('transform');
@ -780,8 +707,8 @@ export let updateOverlay = {
} }
let attributes = ['x', 'y', 'width', 'height']; let attributes = ['x', 'y', 'width', 'height'];
Object.values(unit.attributes) Object.values(unit.attributes)
.filter((attr) => attributes.includes(attr.name) && attr.specified) .filter(attr => attributes.includes(attr.name) && attr.specified)
.map((attr) => { .map(attr => {
overlay.setAttribute(attr.name, attr.nodeValue); overlay.setAttribute(attr.name, attr.nodeValue);
}); });
@ -790,7 +717,7 @@ export let updateOverlay = {
} }
}, },
dot: (unit, overlay) => { 'dot': (unit, overlay) => {
let transformValue; let transformValue;
if(unit.nodeName !== 'circle') { if(unit.nodeName !== 'circle') {
transformValue = unit.getAttribute('transform'); transformValue = unit.getAttribute('transform');
@ -798,8 +725,8 @@ export let updateOverlay = {
} }
let attributes = ['cx', 'cy']; let attributes = ['cx', 'cy'];
Object.values(unit.attributes) Object.values(unit.attributes)
.filter((attr) => attributes.includes(attr.name) && attr.specified) .filter(attr => attributes.includes(attr.name) && attr.specified)
.map((attr) => { .map(attr => {
overlay.setAttribute(attr.name, attr.nodeValue); overlay.setAttribute(attr.name, attr.nodeValue);
}); });
@ -808,7 +735,7 @@ export let updateOverlay = {
} }
}, },
heat_square: (unit, overlay) => { 'heat_square': (unit, overlay) => {
let transformValue; let transformValue;
if(unit.nodeName !== 'circle') { if(unit.nodeName !== 'circle') {
transformValue = unit.getAttribute('transform'); transformValue = unit.getAttribute('transform');
@ -816,13 +743,13 @@ export let updateOverlay = {
} }
let attributes = ['cx', 'cy']; let attributes = ['cx', 'cy'];
Object.values(unit.attributes) Object.values(unit.attributes)
.filter((attr) => attributes.includes(attr.name) && attr.specified) .filter(attr => attributes.includes(attr.name) && attr.specified)
.map((attr) => { .map(attr => {
overlay.setAttribute(attr.name, attr.nodeValue); overlay.setAttribute(attr.name, attr.nodeValue);
}); });
if(transformValue) { if(transformValue) {
overlay.setAttribute('transform', transformValue); overlay.setAttribute('transform', transformValue);
} }
} },
}; };