@springernature/nn-charts
Version:
Visualization for DAS products
162 lines (157 loc) • 12.2 kB
JavaScript
;
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.createRectangle = exports.createLine = exports.createDiamond = exports.createCircle = exports.createBaseSVGPanel = void 0;
var d3 = _interopRequireWildcard(require("d3"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
/*
name: createCircle
arguments:
svg - base svg panel classnames
circleXPosition - horizontal position of singular circle
circleYPosition - vertical position of singular circle
circleRadius -
circleStrokeColour -
circleStrokeWidth -
circleStrokeOpacity -
circleFillColour -
circleFillOpacity -
data - array of two-element arrays to define positions of multiple data-driven circles
xAxis - x-axis declaration (or null). If defined, used to plot circle against. If not, circle plotted against cartesian coordinates of circleXPosition
yAxis - y-axis declaration (or null). If defined, used to plot circle against. If not, circle plotted against cartesian coordinates of circleYPosition
desc: create a new circle element
*/
var createCircle = exports.createCircle = function createCircle(svg, circleXPosition, circleYPosition, circleRadius, circleStrokeColour, circleStrokeWidth, circleStrokeOpacity, circleFillColour, circleFillOpacity, data, xAxis, yAxis) {
var circle = null;
!data || data.length == 0 ? circle = d3.selectAll("." + svg.join(".") + "__group").append("circle").attr("class", "chart__static__circle").attr("id", "staticCircle").attr("cx", function (d, i) {
return !xAxis ? circleXPosition : xAxis(circleXPosition);
}).attr("cy", function (d, i) {
return !yAxis ? circleYPosition : yAxis(circleYPosition);
}).attr("r", circleRadius).attr("stroke", circleStrokeColour).attr("stroke-width", circleStrokeWidth).attr("stroke-opacity", circleStrokeOpacity).attr("fill", circleFillColour).attr("fill-opacity", circleFillOpacity) : circle = d3.selectAll("." + svg.join(".") + "__group").selectAll(".chart__data__circle").data(data).enter().append("circle").attr("class", function (d, i) {
return "chart__data__circle chart__data__circle-" + i;
}).attr("id", function (d, i) {
return "dataCircle-" + i;
}).attr("cx", function (d, i) {
return !xAxis ? d[0] : xAxis(d[0]);
}).attr("cy", function (d, i) {
return !yAxis ? d[1] : yAxis(d[1]);
}).attr("r", circleRadius).attr("stroke", circleStrokeColour).attr("stroke-width", circleStrokeWidth).attr("stroke-opacity", circleStrokeOpacity).attr("fill", circleFillColour).attr("fill-opacity", circleFillOpacity);
return circle;
};
/*
name: createRectangle
arguments:
svg - [flat array of] base svg panel classnames
rectangleXPosition - horizontal position of singular rectangle
rectangleYPosition - vertical position of singular rectangle
rectangleWidth -
rectangleHeight -
rectangleStrokeColour -
rectangleStrokeWidth -
rectangleStrokeOpacity -
rectangleFillColour -
rectangleFillOpacity -
data - array of two-element arrays to define positions of multiple data-driven rectangles, e.g.
data array to append batch of circles, using .data(...).enter()
[
[0, 100],
[10, 200],
[20, 300],
[40, 400],
],
xAxis - x-axis declaration (or null). If defined, used to plot circle against. If not, circle plotted against cartesian coordinates of circleXPosition
yAxis - y-axis declaration (or null). If defined, used to plot circle against. If not, circle plotted against cartesian coordinates of circleYPosition
referencePoint - should position of rectangle be based on its centrepooint or topleft corner (default)
"centre" or "corner"
// fixing reference point for rect; useful if appending on to a d3.scaleband(...) axis
desc: create a new rect[angle] element
*/
var createRectangle = exports.createRectangle = function createRectangle(svg, rectangleXPosition, rectangleYPosition, rectangleWidth, rectangleHeight, rectangleStrokeColour, rectangleStrokeWidth, rectangleStrokeOpacity, rectangleFillColour, rectangleFillOpacity, data, xAxis, yAxis, referencePoint) {
var rectangle = null;
!data || data.length == 0 ? rectangle = d3.selectAll("." + svg.join(".") + "__group").append("rect").attr("class", "chart__static__rect") // TODO - rename this class and all its instances
.attr("id", "staticRect").attr("x", referencePoint == "corner" ? rectangleXPosition : rectangleXPosition - rectangleWidth / 2).attr("y", referencePoint == "corner" ? rectangleYPosition : rectangleYPosition - rectangleHeight / 2).attr("width", rectangleWidth).attr("height", rectangleHeight).attr("stroke", rectangleStrokeColour).attr("stroke-width", rectangleStrokeWidth).attr("stroke-opacity", rectangleStrokeOpacity).attr("fill", rectangleFillColour).attr("fill-opacity", rectangleFillOpacity) : rectangle = d3.selectAll("." + svg.join(".") + "__group").selectAll(".chart__data__rect").data(data).enter().append("rect").attr("class", function (d, i) {
return "chart__data__rect chart__data__rect-" + i; // TODO - rename this class according to BEM
}).attr("id", function (d, i) {
return "rectangle-" + i;
}).attr("x", function (d, i) {
if (!xAxis) {
return referencePoint == "corner" ? d[0] : d[0] - rectangleWidth / 2;
} else {
return referencePoint == "corner" ? xAxis(d[0]) : xAxis(d[0]) - rectangleWidth / 2;
}
}).attr("y", function (d, i) {
if (!xAxis) {
return referencePoint == "corner" ? d[1] : d[1] - rectangleHeight / 2;
} else {
return referencePoint == "corner" ? yAxis(d[1]) : yAxis(d[1]) - rectangleHeight / 2;
}
}).attr("width", rectangleWidth).attr("height", rectangleHeight).attr("stroke", rectangleStrokeColour).attr("stroke-width", rectangleStrokeWidth).attr("stroke-opacity", rectangleStrokeOpacity).attr("fill", rectangleFillColour).attr("fill-opacity", rectangleFillOpacity);
return rectangle;
};
/*
name: createDiamond
desc: create a new diamond element
*/
var createDiamond = exports.createDiamond = function createDiamond(svg, diamondXPosition, diamondYPosition, diamondWidth, diamondStrokeColour, diamondStrokeWidth, diamondStrokeOpacity, diamondFillColour, diamondFillOpacity, data, xAxis, yAxis) {
var diamond = null;
!data || data.length == 0 ? (diamond = d3.selectAll("." + svg.join(".") + "__group").append("g").attr("class", "symbol__base__group").attr("transform", "translate(" + diamondXPosition + "," + diamondYPosition + ")")).append("rect").attr("class", "chart__static__diamond").attr("id", "staticDiamond").attr("x", -diamondWidth / 2).attr("y", -diamondWidth / 2).attr("width", diamondWidth).attr("height", diamondWidth).attr("stroke", diamondStrokeColour).attr("stroke-width", diamondStrokeWidth).attr("stroke-opacity", diamondStrokeOpacity).attr("fill", diamondFillColour).attr("fill-opacity", diamondFillOpacity).style("transform", "rotate(45deg)") : diamond = d3.selectAll("." + svg.join(".") + "__group").selectAll(".symbol__base__group").data(data).enter().append("g").attr("class", function (d, i) {
return "symbol__base__group symbol__base__group-" + i;
}).attr("transform", function (d, i) {
return !xAxis || !yAxis ? "translate(" + d[0] + "," + d[1] + ")" : "translate(" + xAxis(d[0]) + "," + yAxis(d[1]) + ")";
}).append("rect").attr("class", function (d, i) {
return "chart__data__diamond chart__data__diamond-" + i;
}).attr("id", function (d, i) {
return "dataDiamond-" + i;
}).attr("x", function (d, i) {
return -diamondWidth / 2;
}).attr("y", function (d, i) {
return -diamondWidth / 2;
}).attr("width", diamondWidth).attr("height", diamondWidth).attr("stroke", diamondStrokeColour).attr("stroke-width", diamondStrokeWidth).attr("stroke-opacity", diamondStrokeOpacity).attr("fill", diamondFillColour).attr("fill-opacity", diamondFillOpacity).style("transform", "rotate(45deg)");
return diamond;
};
/*
name: createLine
desc: create a new Line element
*/
var createLine = exports.createLine = function createLine(svg, lineX1Position, lineY1Position, lineX2Position, lineY2Position, lineStrokeColour, lineStrokeWidth, lineStrokeOpacity, lineFillColour, lineFillOpacity, data, xAxis, yAxis) {
var line = null;
!data || data.length == 0 ? line = d3.selectAll("." + svg.join(".") + "__group").append("line").attr("class", "chart__static__line").attr("id", "staticLine").attr("x1", function () {
return !xAxis || !yAxis ? lineX1Position : xAxis(lineX1Position);
}).attr("y1", function () {
return !xAxis || !yAxis ? lineY1Position : yAxis(lineY1Position);
}).attr("x2", function () {
return !xAxis || !yAxis ? lineX2Position : xAxis(lineX2Position);
}).attr("y2", function () {
return !xAxis || !yAxis ? lineY1Position : yAxis(lineY2Position);
}).attr("stroke", lineStrokeColour).attr("stroke-width", lineStrokeWidth).attr("stroke-opacity", lineStrokeOpacity).attr("fill", lineFillColour).attr("fill-opacity", lineFillOpacity) : line = d3.selectAll("." + svg.join(".") + "__group").selectAll(".chart__data__line").data(data).enter().append("line").attr("class", function (d, i) {
return "chart__data__line chart__data__line-" + i;
}).attr("id", function (d, i) {
return "dataLine-" + i;
}).attr("x1", function (d, i) {
return !xAxis || !yAxis ? d[0][0] : xAxis(d[0][0]);
}).attr("y1", function (d, i) {
return !xAxis || !yAxis ? d[0][1] : yAxis(d[0][1]);
}).attr("x2", function (d, i) {
return !xAxis || !yAxis ? d[1][0] : xAxis(d[1][0]);
}).attr("y2", function (d, i) {
return !xAxis || !yAxis ? d[1][1] : yAxis(d[1][1]);
}).attr("stroke", lineStrokeColour).attr("stroke-width", lineStrokeWidth).attr("stroke-opacity", lineStrokeOpacity).attr("fill", lineFillColour).attr("fill-opacity", lineFillOpacity);
return line;
};
/*
name: createBaseSVGPanel
desc: create a new base SVG panel and associated base group element for new chart to be attached to
*/
var createBaseSVGPanel = exports.createBaseSVGPanel = function createBaseSVGPanel(element, className, width, height, translate) {
d3.select(className).remove();
var elementClassName = element && d3.select(element).attr("class");
elementClassName = elementClassName.split(" ")[0];
var svg = d3.selectAll(".".concat(elementClassName)).append("svg").attr("class", Array.isArray(className) ? className.join(".") : className).attr("width", width).attr("height", height);
if (translate) {
svg = svg.append("g").attr("transform", "translate(" + translate.x + "," + translate.y + ")").attr("class", className.join(".") + "__group"); // TODO(James) - Do we really need to append '__group' class? I see its not used anywhere.
}
return svg;
};