950 lines
20 KiB
JavaScript
950 lines
20 KiB
JavaScript
import {
|
|
getBarHeightAndYAttr,
|
|
truncateString,
|
|
shortenLargeNumber,
|
|
getSplineCurvePointsStr,
|
|
} from "./draw-utils";
|
|
import { getStringWidth, isValidNumber, round } from "./helpers";
|
|
|
|
import {
|
|
DOT_OVERLAY_SIZE_INCR,
|
|
PERCENTAGE_BAR_DEFAULT_DEPTH,
|
|
} from "./constants";
|
|
import { lightenDarkenColor } from "./colors";
|
|
|
|
export const AXIS_TICK_LENGTH = 6;
|
|
const LABEL_MARGIN = 4;
|
|
const LABEL_WIDTH = 25;
|
|
const TOTAL_PADDING = 120;
|
|
const LABEL_MAX_CHARS = 18;
|
|
export const FONT_SIZE = 10;
|
|
const BASE_LINE_COLOR = "#E2E6E9";
|
|
|
|
function $(expr, con) {
|
|
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);
|
|
|
|
for (var i in o) {
|
|
var val = o[i];
|
|
|
|
if (i === "inside") {
|
|
$(val).appendChild(element);
|
|
} 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) => {
|
|
element.style[prop] = val[prop];
|
|
});
|
|
}
|
|
} else {
|
|
if (i === "className") {
|
|
i = "class";
|
|
}
|
|
if (i === "innerHTML") {
|
|
element["textContent"] = val;
|
|
} else {
|
|
element.setAttribute(i, val);
|
|
}
|
|
}
|
|
}
|
|
|
|
return element;
|
|
}
|
|
|
|
function renderVerticalGradient(svgDefElem, gradientId) {
|
|
return createSVG("linearGradient", {
|
|
inside: svgDefElem,
|
|
id: gradientId,
|
|
x1: 0,
|
|
x2: 0,
|
|
y1: 0,
|
|
y2: 1,
|
|
});
|
|
}
|
|
|
|
function setGradientStop(gradElem, offset, color, opacity) {
|
|
return createSVG("stop", {
|
|
inside: gradElem,
|
|
style: `stop-color: ${color}`,
|
|
offset: offset,
|
|
"stop-opacity": opacity,
|
|
});
|
|
}
|
|
|
|
export function makeSVGContainer(parent, className, width, height) {
|
|
return createSVG("svg", {
|
|
className: className,
|
|
inside: parent,
|
|
width: width,
|
|
height: height,
|
|
});
|
|
}
|
|
|
|
export function makeSVGDefs(svgContainer) {
|
|
return createSVG("defs", {
|
|
inside: svgContainer,
|
|
});
|
|
}
|
|
|
|
export function makeSVGGroup(className, transform = "", parent = undefined) {
|
|
let args = {
|
|
className: className,
|
|
transform: transform,
|
|
};
|
|
if (parent) args.inside = parent;
|
|
return createSVG("g", args);
|
|
}
|
|
|
|
export function wrapInSVGGroup(elements, className = "") {
|
|
let g = createSVG("g", {
|
|
className: className,
|
|
});
|
|
elements.forEach((e) => g.appendChild(e));
|
|
return g;
|
|
}
|
|
|
|
export function makePath(
|
|
pathStr,
|
|
className = "",
|
|
stroke = "none",
|
|
fill = "none",
|
|
strokeWidth = 2
|
|
) {
|
|
return createSVG("path", {
|
|
className: className,
|
|
d: pathStr,
|
|
styles: {
|
|
stroke: stroke,
|
|
fill: fill,
|
|
"stroke-width": strokeWidth,
|
|
},
|
|
});
|
|
}
|
|
|
|
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}
|
|
L${arcStartX} ${arcStartY}
|
|
A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}
|
|
${arcEndX} ${arcEndY} z`;
|
|
}
|
|
|
|
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,
|
|
];
|
|
return `M${center.x} ${center.y}
|
|
L${arcStartX} ${arcStartY}
|
|
A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}
|
|
${arcEndX} ${midArc} z
|
|
L${arcStartX} ${midArc}
|
|
A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}
|
|
${arcEndX} ${arcEndY} z`;
|
|
}
|
|
|
|
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,
|
|
];
|
|
|
|
return `M${arcStartX} ${arcStartY}
|
|
A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}
|
|
${arcEndX} ${arcEndY}`;
|
|
}
|
|
|
|
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,
|
|
];
|
|
|
|
return `M${arcStartX} ${arcStartY}
|
|
A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}
|
|
${arcEndX} ${midArc}
|
|
M${arcStartX} ${midArc}
|
|
A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}
|
|
${arcEndX} ${arcEndY}`;
|
|
}
|
|
|
|
export function makeGradient(svgDefElem, color, lighter = false) {
|
|
let gradientId =
|
|
"path-fill-gradient" +
|
|
"-" +
|
|
color +
|
|
"-" +
|
|
(lighter ? "lighter" : "default");
|
|
let gradientDef = renderVerticalGradient(svgDefElem, gradientId);
|
|
let opacities = [1, 0.6, 0.2];
|
|
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]);
|
|
|
|
return gradientId;
|
|
}
|
|
|
|
export function rightRoundedBar(x, width, height) {
|
|
// https://medium.com/@dennismphil/one-side-rounded-rectangle-using-svg-fb31cf318d90
|
|
let radius = height / 2;
|
|
let xOffset = width - radius;
|
|
|
|
return `M${x},0 h${xOffset} q${radius},0 ${radius},${radius} q0,${radius} -${radius},${radius} h-${xOffset} v${height}z`;
|
|
}
|
|
|
|
export function leftRoundedBar(x, width, height) {
|
|
let radius = height / 2;
|
|
let xOffset = width - radius;
|
|
|
|
return `M${
|
|
x + radius
|
|
},0 h${xOffset} v${height} h-${xOffset} q-${radius}, 0 -${radius},-${radius} q0,-${radius} ${radius},-${radius}z`;
|
|
}
|
|
|
|
export function percentageBar(
|
|
x,
|
|
y,
|
|
width,
|
|
height,
|
|
isFirst,
|
|
isLast,
|
|
fill = "none"
|
|
) {
|
|
if (isLast) {
|
|
let pathStr = rightRoundedBar(x, width, height);
|
|
return makePath(pathStr, "percentage-bar", null, fill);
|
|
}
|
|
|
|
if (isFirst) {
|
|
let pathStr = leftRoundedBar(x, width, height);
|
|
return makePath(pathStr, "percentage-bar", null, fill);
|
|
}
|
|
|
|
let args = {
|
|
className: "percentage-bar",
|
|
x: x,
|
|
y: y,
|
|
width: width,
|
|
height: height,
|
|
fill: fill,
|
|
};
|
|
|
|
return createSVG("rect", args);
|
|
}
|
|
|
|
export function heatSquare(
|
|
className,
|
|
x,
|
|
y,
|
|
size,
|
|
radius,
|
|
fill = "none",
|
|
data = {}
|
|
) {
|
|
let args = {
|
|
className: className,
|
|
x: x,
|
|
y: y,
|
|
width: size,
|
|
height: size,
|
|
rx: radius,
|
|
fill: fill,
|
|
};
|
|
|
|
Object.keys(data).map((key) => {
|
|
args[key] = data[key];
|
|
});
|
|
|
|
return createSVG("rect", args);
|
|
}
|
|
|
|
export function legendDot(
|
|
x,
|
|
y,
|
|
size,
|
|
radius,
|
|
fill = "none",
|
|
label,
|
|
value,
|
|
font_size = null,
|
|
truncate = false
|
|
) {
|
|
label = truncate ? truncateString(label, LABEL_MAX_CHARS) : label;
|
|
if (!font_size) font_size = FONT_SIZE;
|
|
|
|
let args = {
|
|
className: "legend-dot",
|
|
x: 0,
|
|
y: 4 - size,
|
|
height: size,
|
|
width: size,
|
|
rx: radius,
|
|
fill: fill,
|
|
};
|
|
|
|
let textLabel = createSVG("text", {
|
|
className: "legend-dataset-label",
|
|
x: size,
|
|
y: 0,
|
|
dx: font_size + "px",
|
|
dy: font_size / 3 + "px",
|
|
"font-size": font_size * 1.6 + "px",
|
|
"text-anchor": "start",
|
|
innerHTML: label,
|
|
});
|
|
|
|
let textValue = null;
|
|
if (value) {
|
|
textValue = createSVG("text", {
|
|
className: "legend-dataset-value",
|
|
x: size,
|
|
y: FONT_SIZE + 10,
|
|
dx: FONT_SIZE + "px",
|
|
dy: FONT_SIZE / 3 + "px",
|
|
"font-size": FONT_SIZE * 1.2 + "px",
|
|
"text-anchor": "start",
|
|
innerHTML: value,
|
|
});
|
|
}
|
|
|
|
let group = createSVG("g", {
|
|
transform: `translate(${x}, ${y})`,
|
|
});
|
|
group.appendChild(createSVG("rect", args));
|
|
group.appendChild(textLabel);
|
|
|
|
if (value && textValue) {
|
|
group.appendChild(textValue);
|
|
}
|
|
|
|
return group;
|
|
}
|
|
|
|
export function makeText(className, x, y, content, options = {}) {
|
|
let fontSize = options.fontSize || FONT_SIZE;
|
|
let dy = options.dy !== undefined ? options.dy : fontSize / 2;
|
|
//let fill = options.fill || "var(--charts-label-color)";
|
|
let fill = options.fill || FONT_FILL;
|
|
let textAnchor = options.textAnchor || "start";
|
|
return createSVG("text", {
|
|
className: className,
|
|
x: x,
|
|
y: y,
|
|
dy: dy + "px",
|
|
"font-size": fontSize + "px",
|
|
fill: fill,
|
|
"text-anchor": textAnchor,
|
|
innerHTML: content,
|
|
});
|
|
}
|
|
|
|
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,
|
|
x2: 0,
|
|
y1: y1,
|
|
y2: y2,
|
|
styles: {
|
|
stroke: options.stroke,
|
|
},
|
|
});
|
|
|
|
let text = createSVG("text", {
|
|
x: 0,
|
|
y: y1 > y2 ? y1 + LABEL_MARGIN : y1 - LABEL_MARGIN - FONT_SIZE,
|
|
dy: FONT_SIZE + "px",
|
|
"font-size": FONT_SIZE + "px",
|
|
"text-anchor": "middle",
|
|
innerHTML: label + "",
|
|
});
|
|
|
|
let line = createSVG("g", {
|
|
transform: `translate(${x}, 0)`,
|
|
});
|
|
|
|
line.appendChild(l);
|
|
line.appendChild(text);
|
|
|
|
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";
|
|
if (options.shortenNumbers) label = shortenLargeNumber(label);
|
|
|
|
let className =
|
|
"line-horizontal " +
|
|
options.className +
|
|
(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", {
|
|
className: className,
|
|
x1: lineX1Post,
|
|
x2: lineX2Post,
|
|
y1: 0,
|
|
y2: 0,
|
|
styles: {
|
|
stroke: options.stroke,
|
|
},
|
|
});
|
|
|
|
let text = createSVG("text", {
|
|
x: textXPos,
|
|
y: 0,
|
|
dy: FONT_SIZE / 2 - 2 + "px",
|
|
"font-size": FONT_SIZE + "px",
|
|
"text-anchor": x1 < x2 ? "end" : "start",
|
|
innerHTML: label + "",
|
|
});
|
|
|
|
let line = createSVG("g", {
|
|
transform: `translate(0, ${y})`,
|
|
"stroke-opacity": 1,
|
|
});
|
|
|
|
if (text === 0 || text === "0") {
|
|
line.style.stroke = "rgba(27, 31, 35, 0.6)";
|
|
}
|
|
|
|
line.appendChild(l);
|
|
line.appendChild(text);
|
|
|
|
return line;
|
|
}
|
|
|
|
export function generateAxisLabel(options) {
|
|
if (!options.title) return;
|
|
|
|
const y =
|
|
options.position === "left"
|
|
? (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 y2 =
|
|
options.position === "left"
|
|
? FONT_SIZE - LABEL_WIDTH
|
|
: FONT_SIZE + LABEL_WIDTH * -1;
|
|
|
|
const rotation =
|
|
options.position === "right" ? `rotate(90)` : `rotate(270)`;
|
|
|
|
const labelSvg = createSVG("text", {
|
|
className: "chart-label",
|
|
x: 0, // getStringWidth(options.title, 5) / 2,
|
|
y: 0, // y,
|
|
dy: `${y2}px`,
|
|
"font-size": `${FONT_SIZE}px`,
|
|
"text-anchor": "start",
|
|
innerHTML: `${options.title} `,
|
|
});
|
|
|
|
let wrapper = createSVG("g", {
|
|
x: 0,
|
|
y: 0,
|
|
transformBox: "fill-box",
|
|
transform: `translate(${x}, ${y}) ${rotation}`,
|
|
className: `test-${options.position}`,
|
|
});
|
|
|
|
wrapper.appendChild(labelSvg);
|
|
|
|
return wrapper;
|
|
}
|
|
|
|
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 = "";
|
|
|
|
let x1 = -1 * AXIS_TICK_LENGTH;
|
|
let x2 = options.mode === "span" ? width + AXIS_TICK_LENGTH : 0;
|
|
|
|
if (options.mode === "tick" && options.pos === "right") {
|
|
x1 = width + AXIS_TICK_LENGTH;
|
|
x2 = width;
|
|
}
|
|
|
|
let offset = options.pos === "left" ? -1 * options.offset : options.offset;
|
|
|
|
// pr_366
|
|
//x1 += offset;
|
|
//x2 += offset;
|
|
x1 += options.offset;
|
|
x2 += options.offset;
|
|
|
|
if (typeof label === "number") label = round(label);
|
|
|
|
return makeHoriLine(y, label, x1, x2, {
|
|
stroke: options.stroke,
|
|
className: options.className,
|
|
lineType: options.lineType,
|
|
alignment: options.pos,
|
|
title: options.title,
|
|
shortenNumbers: options.shortenNumbers,
|
|
});
|
|
}
|
|
|
|
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 = "";
|
|
|
|
// Draw X axis line in span/tick mode with optional label
|
|
// y2(span)
|
|
// |
|
|
// |
|
|
// x line |
|
|
// |
|
|
// |
|
|
// ---------------------+-- y2(tick)
|
|
// |
|
|
// y1
|
|
|
|
let y1 = height + AXIS_TICK_LENGTH;
|
|
let y2 = options.mode === "span" ? -1 * AXIS_TICK_LENGTH : height;
|
|
|
|
if (options.mode === "tick" && options.pos === "top") {
|
|
// top axis ticks
|
|
y1 = -1 * AXIS_TICK_LENGTH;
|
|
y2 = 0;
|
|
}
|
|
|
|
return makeVertLine(x, label, y1, y2, {
|
|
stroke: options.stroke,
|
|
className: options.className,
|
|
lineType: options.lineType,
|
|
});
|
|
}
|
|
|
|
export function yMarker(y, label, width, options = {}) {
|
|
if (!isValidNumber(y)) y = 0;
|
|
|
|
if (!options.labelPos) options.labelPos = "right";
|
|
if (!options.lineType) options.lineType = "dashed";
|
|
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",
|
|
"font-size": FONT_SIZE + "px",
|
|
"text-anchor": "start",
|
|
innerHTML: label + "",
|
|
});
|
|
|
|
let line = makeHoriLine(y, "", 0, width, {
|
|
stroke: options.stroke || BASE_LINE_COLOR,
|
|
className: options.className || "",
|
|
lineType: options.lineType,
|
|
});
|
|
|
|
line.appendChild(labelSvg);
|
|
|
|
return line;
|
|
}
|
|
|
|
export function yRegion(y1, y2, width, label, options = {}) {
|
|
// return a group
|
|
let height = y1 - y2;
|
|
|
|
let rect = createSVG("rect", {
|
|
className: `bar mini`, // remove class
|
|
styles: {
|
|
fill: options.fill || `rgba(228, 234, 239, 0.49)`,
|
|
stroke: options.stroke || BASE_LINE_COLOR,
|
|
"stroke-dasharray": `${width}, ${height}`,
|
|
},
|
|
// 'data-point-index': index,
|
|
x: 0,
|
|
y: 0,
|
|
width: width,
|
|
height: height,
|
|
});
|
|
|
|
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",
|
|
"font-size": FONT_SIZE + "px",
|
|
"text-anchor": "start",
|
|
innerHTML: label + "",
|
|
});
|
|
|
|
let region = createSVG("g", {
|
|
transform: `translate(0, ${y2})`,
|
|
});
|
|
|
|
region.appendChild(rect);
|
|
region.appendChild(labelSvg);
|
|
|
|
return region;
|
|
}
|
|
|
|
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) {
|
|
height = meta.minHeight;
|
|
y -= meta.minHeight;
|
|
}
|
|
|
|
// Preprocess numbers to avoid svg building errors
|
|
if (!isValidNumber(x)) x = 0;
|
|
if (!isValidNumber(y)) y = 0;
|
|
if (!isValidNumber(height, true)) height = 0;
|
|
if (!isValidNumber(width, true)) width = 0;
|
|
|
|
// x y h w
|
|
|
|
// M{x},{y+r}
|
|
// q0,-{r} {r},-{r}
|
|
// q{r},0 {r},{r}
|
|
// v{h-r}
|
|
// h-{w}z
|
|
|
|
// let radius = width/2;
|
|
// let pathStr = `M${x},${y+radius} q0,-${radius} ${radius},-${radius} q${radius},0 ${radius},${radius} v${height-radius} h-${width}z`
|
|
|
|
// let rect = createSVG('path', {
|
|
// className: 'bar mini',
|
|
// d: pathStr,
|
|
// styles: { fill: color },
|
|
// x: x,
|
|
// y: y,
|
|
// 'data-point-index': index,
|
|
// });
|
|
|
|
let rect = createSVG("rect", {
|
|
className: `bar mini`,
|
|
style: `fill: ${color}`,
|
|
"data-point-index": index,
|
|
x: x,
|
|
y: y,
|
|
width: width,
|
|
height: height,
|
|
});
|
|
|
|
label += "";
|
|
|
|
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,
|
|
y: 0,
|
|
dy: (FONT_SIZE / 2) * -1 + "px",
|
|
"font-size": FONT_SIZE + "px",
|
|
"text-anchor": "middle",
|
|
innerHTML: label,
|
|
});
|
|
|
|
let group = createSVG("g", {
|
|
"data-point-index": index,
|
|
transform: `translate(${x}, ${y})`,
|
|
});
|
|
group.appendChild(rect);
|
|
group.appendChild(text);
|
|
|
|
return group;
|
|
}
|
|
}
|
|
|
|
export function datasetDot(x, y, radius, color, label = "", index = 0) {
|
|
let dot = createSVG("circle", {
|
|
style: `fill: ${color}`,
|
|
"data-point-index": index,
|
|
cx: x,
|
|
cy: y,
|
|
r: radius,
|
|
});
|
|
|
|
label += "";
|
|
|
|
if (!label && !label.length) {
|
|
return dot;
|
|
} else {
|
|
dot.setAttribute("cy", 0);
|
|
dot.setAttribute("cx", 0);
|
|
|
|
let text = createSVG("text", {
|
|
className: "data-point-value",
|
|
x: 0,
|
|
y: 0,
|
|
dy: (FONT_SIZE / 2) * -1 - radius + "px",
|
|
"font-size": FONT_SIZE + "px",
|
|
"text-anchor": "middle",
|
|
innerHTML: label,
|
|
});
|
|
|
|
let group = createSVG("g", {
|
|
"data-point-index": index,
|
|
transform: `translate(${x}, ${y})`,
|
|
});
|
|
group.appendChild(dot);
|
|
group.appendChild(text);
|
|
|
|
return group;
|
|
}
|
|
}
|
|
|
|
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);
|
|
|
|
let path = makePath("M" + pointsStr, "line-graph-path", color);
|
|
|
|
// HeatLine
|
|
if (options.heatline) {
|
|
let gradient_id = makeGradient(meta.svgDefs, color);
|
|
path.style.stroke = `url(#${gradient_id})`;
|
|
}
|
|
|
|
let paths = {
|
|
path: path,
|
|
};
|
|
|
|
// Region
|
|
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}`;
|
|
paths.region = makePath(
|
|
pathStr,
|
|
`region-fill`,
|
|
"none",
|
|
`url(#${gradient_id_region})`
|
|
);
|
|
}
|
|
|
|
return paths;
|
|
}
|
|
|
|
export let makeOverlay = {
|
|
bar: (unit) => {
|
|
let transformValue;
|
|
if (unit.nodeName !== "rect") {
|
|
transformValue = unit.getAttribute("transform");
|
|
unit = unit.childNodes[0];
|
|
}
|
|
let overlay = unit.cloneNode();
|
|
overlay.style.fill = "#000000";
|
|
overlay.style.opacity = "0.4";
|
|
|
|
if (transformValue) {
|
|
overlay.setAttribute("transform", transformValue);
|
|
}
|
|
return overlay;
|
|
},
|
|
|
|
dot: (unit) => {
|
|
let transformValue;
|
|
if (unit.nodeName !== "circle") {
|
|
transformValue = unit.getAttribute("transform");
|
|
unit = unit.childNodes[0];
|
|
}
|
|
let overlay = unit.cloneNode();
|
|
let radius = unit.getAttribute("r");
|
|
let fill = unit.getAttribute("fill");
|
|
overlay.setAttribute("r", parseInt(radius) + DOT_OVERLAY_SIZE_INCR);
|
|
overlay.setAttribute("fill", fill);
|
|
overlay.style.opacity = "0.6";
|
|
|
|
if (transformValue) {
|
|
overlay.setAttribute("transform", transformValue);
|
|
}
|
|
return overlay;
|
|
},
|
|
|
|
heat_square: (unit) => {
|
|
let transformValue;
|
|
if (unit.nodeName !== "circle") {
|
|
transformValue = unit.getAttribute("transform");
|
|
unit = unit.childNodes[0];
|
|
}
|
|
let overlay = unit.cloneNode();
|
|
let radius = unit.getAttribute("r");
|
|
let fill = unit.getAttribute("fill");
|
|
overlay.setAttribute("r", parseInt(radius) + DOT_OVERLAY_SIZE_INCR);
|
|
overlay.setAttribute("fill", fill);
|
|
overlay.style.opacity = "0.6";
|
|
|
|
if (transformValue) {
|
|
overlay.setAttribute("transform", transformValue);
|
|
}
|
|
return overlay;
|
|
},
|
|
};
|
|
|
|
export let updateOverlay = {
|
|
bar: (unit, overlay) => {
|
|
let transformValue;
|
|
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) => {
|
|
overlay.setAttribute(attr.name, attr.nodeValue);
|
|
});
|
|
|
|
if (transformValue) {
|
|
overlay.setAttribute("transform", transformValue);
|
|
}
|
|
},
|
|
|
|
dot: (unit, overlay) => {
|
|
let transformValue;
|
|
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) => {
|
|
overlay.setAttribute(attr.name, attr.nodeValue);
|
|
});
|
|
|
|
if (transformValue) {
|
|
overlay.setAttribute("transform", transformValue);
|
|
}
|
|
},
|
|
|
|
heat_square: (unit, overlay) => {
|
|
let transformValue;
|
|
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) => {
|
|
overlay.setAttribute(attr.name, attr.nodeValue);
|
|
});
|
|
|
|
if (transformValue) {
|
|
overlay.setAttribute("transform", transformValue);
|
|
}
|
|
},
|
|
};
|