filterStr = (str) => str
.replace(/&/g, "&")
.replace(/ /g, " ")
.replace(/"/g, '"')
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/<font[^>]*>/g, "")
.replace(/<meta[^>]*>/g, "")
.replace(/<\/font>/g, "")
.replace(/<span[^>]*>/g, "")
.replace(/<\/span>/g, "")
.replace(/%3CmxGraphModel%3E.*%3C%2FmxGraphModel%3E/, "")
.replace(/<div[^>]*>/g, "<br>")
.replace(/<\/div>/g, "<br>")
.replace(/<h1[^>]*>([^<]*)<\/h1>/g, "$1")
.replace(/<br[^>]*>/g, "<br>")
.replace(/<br><br>/g, "<br>")
.replace(/<br><br>/g, "<br>")
.replace(/^<br>/, "")
.replace(/<br>$/, "")
.replace(/ /g, " ")
.replace(/^ /, "")
.replace(/ $/, "")
filterStr(
"<span style="">createSyncConfig()</span><div style="">listSyncConfigs()</div><div style=""><span style="background-color: transparent; color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));">config.</span>start()</div><div style=""><span style="background-color: transparent; color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));">config.</span><span style="background-color: transparent; color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));">stop()</span><br></div><div style="">config.<span style="background-color: transparent; color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));">delete()</span></div>"
)
drawio2pivot = (src) => {
const doc = new DOMParser().parseFromString(src, "application/xml");
const groups = new Map(
subNodes(doc, "mxCell")
.filter((node) => node.getAttribute("style") == "group")
.map((node) => {
const { id, parent, value, style: styleStr } = attributes(node, true);
const { x, y } = attributes(subNode(node, "mxGeometry"));
return [id, { parent, pos: [x, y] }];
})
);
const absCoords = ([x, y], parentId) => {
if (parentId == 1) return [x, y];
const group = groups.get(parentId);
const [dx, dy] = absCoords(group.pos, group.parent);
return [x + dx, y + dy];
};
const vertices = new Map(
subNodes(doc, "mxCell")
.filter((node) => node.getAttribute("vertex") == "1")
.map((node) => {
const { id, parent, value, style: styleStr } = attributes(node, true);
const style = parseStyle(styleStr);
const { text, dashed, strokeColor: sc, strokeWidth: sw } = style;
const attrs = attributes(subNode(node, "mxGeometry"));
const { x, y, width, height } = attrs;
const [xa, ya] = absCoords([x, y], parent);
const [xc, yc] = [xa + width / 2, ya + height / 2];
const vertex = { id, parent, pos: [xc, yc], dims: [width, height] };
vertex.stroke = !(
sw == 0 ||
sc == "none" ||
(text && sw == undefined && sc == undefined)
);
if (dashed == 1) vertex.dashed = true;
if (value != undefined) {
const ttext = filterStr("" + value);
const { verticalAlign, align, fontSize, rotation } = style;
const halign = align || (text ? "left" : "center");
const valign = verticalAlign || (text ? "top" : "middle");
const size = fontSize || 12;
Object.assign(vertex, {
text: { text: ttext, halign, valign, size, rotation }
});
}
if (style.ellipse) {
Object.assign(vertex, { shape: "ellipse" });
} else if (style.group) {
} else if (style.shape == "cylinder3") {
Object.assign(vertex, { shape: "cylinder", size: style.size });
} else {
Object.assign(vertex, { shape: "rect" });
if (style.rounded) {
const arc = style.arcSize;
const radius = arc ? (arc * Math.min(width, height)) / 100 : 10;
Object.assign(vertex, { radius });
}
}
return [id, vertex];
})
);
const edges = subNodes(doc, "mxCell")
.filter((node) => node.getAttribute("edge") == "1")
.map((node) => {
const { parent, source, target, style: styleStr } = attributes(node);
const pts = new Map(
subNodes(node, "mxPoint").map((cell) => {
const { as, x, y } = attributes(cell);
const [xa, ya] = absCoords([x || 0, y || 0], parent);
return [as, [xa, ya]];
})
);
const pts_ = ((node) => {
if (!node) return [];
return subNodes(node, "mxPoint").map((cell) => {
const { x, y } = attributes(cell);
return [x, y];
});
})(subNode(node, "Array"));
const style = parseStyle(styleStr);
const { exitX, exitY, entryX, entryY } = style;
const { edgeStyle, rounded, dashed } = style;
const { startArrow, endArrow } = style;
const edge = { parent, params: { dashed, pts_ } };
const offset = (rx, ry) => [2 * rx - 1, 2 * ry - 1];
const abs = (vertex, [rx, ry]) => {
const [x, y] = vertex.pos;
const [w, h] = vertex.dims;
return [x + (rx - 0.5) * w, y + (ry - 0.5) * h];
};
edge.startPt = source
? !isNaN(exitX)
? abs(vertices.get(source), [exitX, exitY])
: vertices.get(source).pos
: pts.get("sourcePoint");
edge.endPt = target
? !isNaN(entryX)
? abs(vertices.get(target), [entryX, entryY])
: vertices.get(target).pos
: pts.get("targetPoint");
if (source) {
edge.start = { vertex: vertices.get(source) };
if (!isNaN(exitX)) edge.start.offset = offset(exitX, exitY);
} else edge.start = { pt: pts.get("sourcePoint") };
if (startArrow && startArrow != "none") edge.start.arrow = true;
if (target) {
edge.end = { vertex: vertices.get(target) };
if (!isNaN(entryX)) edge.end.offset = offset(entryX, entryY);
} else edge.end = { pt: pts.get("targetPoint") };
if (endArrow && endArrow != "none") edge.end.arrow = true;
if (edgeStyle) {
edge.params.style = edgeStyle;
if (rounded) edge.params.rounded = true;
}
return edge;
});
return { vertices: [...vertices.values()], edges };
}
pivot2plot = ({ vertices, edges }) => {
const plot = Plot();
for (const vertex of vertices) vertex2plot(vertex, plot);
for (const edge of edges) edge2plot(edge, plot);
return plot;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
