pace-chart-lib 0.0.7 → 0.0.9

package/dist/Components1/Charts/Core/CommonFunctions.js

@@ -0,0 +1,512 @@
+import { calculateWidthHeightDynamically } from "../ChartsWithAxis/ChartsWithAxisFunctions";
+import { actualChartTypes } from "../ChartsWithAxis/ChartsWithAxisTypes.type";
+import { legendShape } from "../Core/Common.type";
+const chartsWithDataTableArray = [
+    actualChartTypes.bar,
+    actualChartTypes.stackColumn,
+    actualChartTypes.stackColumn100,
+    actualChartTypes.line,
+    actualChartTypes.stackLine,
+    actualChartTypes.stackLine100,
+    actualChartTypes.area,
+    actualChartTypes.stackArea,
+    actualChartTypes.stackArea100,
+];
+const chartsWithoutPlotArea = [
+    actualChartTypes.pie,
+    actualChartTypes.pieOfPie,
+    actualChartTypes.sunburst,
+    actualChartTypes.pyramidChart,
+    actualChartTypes.organizationalChart,
+    actualChartTypes.vennDiagramChart,
+    actualChartTypes.progressChart,
+    actualChartTypes.maps,
+    actualChartTypes.wordCloud,
+    actualChartTypes.sankey,
+    actualChartTypes.speedometerChart,
+    actualChartTypes.radialBarChart,
+];
+export function getRandomColor() {
+    let letters = "0123456789ABCDEF";
+    let color = "#";
+    for (let i = 0; i < 6; i++) {
+        color += letters[Math.floor(Math.random() * 16)];
+    }
+    return { color };
+}
+export function getCircleShape(d, innerDiv) {
+    innerDiv
+        .append("div")
+        .style("height", "12px")
+        .style("width", "12px")
+        .style("border-radius", "50%")
+        .style("background", d.properties.Color);
+}
+export function getHollowCircleShape(d, innerDiv) {
+    innerDiv
+        .append("div")
+        .style("height", "12px")
+        .style("width", "12px")
+        .style("border-radius", "50%")
+        .style("border", `3px solid ${d.properties.Color}`);
+}
+export function getLineShape(d, innerDiv, formatOptions) {
+    let shape = innerDiv
+        .append("div")
+        .style("height", "2px")
+        .style("width", "22px")
+        .style("background", d.properties.LineStyle == "Solid" ? d.properties.Color : "transparent")
+        .style("position", "relative")
+        .style("border-top", d.properties.LineStyle == "None" ? "unset" : d.properties.LineStyle == "Dotted" ? "2px dotted " + d.color : "2px dashed " + d.color);
+    if (formatOptions.marker.markerVisibility) {
+        switch (d.properties.markershape.toLowerCase()) {
+            case "circle":
+                shape
+                    .append("div")
+                    .append("svg")
+                    .style("position", "absolute")
+                    .style("left", "50%")
+                    .style("top", "50%")
+                    .attr("transform", "translate(-5,-6)")
+                    .attr("height", "10px")
+                    .attr("width", "10px")
+                    .append("circle")
+                    .attr("cx", "5")
+                    .attr("cy", "5")
+                    .attr("r", "4.5")
+                    .style("fill", d.properties.markercolor);
+                break;
+            case "square":
+                shape
+                    .append("div")
+                    .style("position", "absolute")
+                    .style("left", "50%")
+                    .style("top", "50%")
+                    .style("transform", "translate(-2px, -7px)")
+                    .style("height", "8px")
+                    .style("width", "8px")
+                    .style("top", "2px")
+                    .style("left", "9px")
+                    .style("background", d.properties.markercolor);
+                break;
+            case "triangle":
+                shape
+                    .append("div")
+                    .style("position", "absolute")
+                    .style("transform", "translate(5px, -6.5px)")
+                    .style("border-left", "6px solid transparent")
+                    .style("border-right", "6px solid transparent")
+                    .style("border-bottom", `10px solid ${d.properties.markercolor}`);
+                break;
+            case "cross":
+                shape
+                    .append("div")
+                    .style("position", "absolute")
+                    .style("left", "50%")
+                    .style("top", "50%")
+                    .style("transform", "translate(-5px, -3px)")
+                    .style("height", "4px")
+                    .style("width", "10px")
+                    .style("background", d.properties.markercolor)
+                    .append("div")
+                    .style("height", "10px")
+                    .style("width", "4px")
+                    .style("background", d.properties.markercolor)
+                    .style("position", "relative")
+                    .style("top", "-3px")
+                    .style("left", "3px");
+                break;
+            case "diamond":
+                shape
+                    .append("div")
+                    .style("height", "7px")
+                    .style("width", "7px")
+                    .style("background", d.properties.markercolor)
+                    .style("transform", "rotate(45deg)")
+                    .style("top", "-4px")
+                    .style("left", "7px")
+                    .style("position", "absolute");
+                break;
+            case "star":
+                shape
+                    .append("div")
+                    .style("border-left", "4px solid transparent")
+                    .style("border-right", "4px solid transparent")
+                    .style("border-bottom", `8px solid ${d.properties.markercolor}`)
+                    .style("position", "absolute")
+                    .style("top", "-6.5px")
+                    .style("left", "7px")
+                    .style("transform", "rotate(0deg)")
+                    .append("div")
+                    .style("border-left", "4px solid transparent")
+                    .style("border-right", "4px solid transparent")
+                    .style("border-top", `8px solid ${d.properties.markercolor}`)
+                    .style("position", "absolute")
+                    .style("top", "2px")
+                    .style("left", "-4px")
+                    .style("transform", "rotate(360deg)");
+                break;
+            case "wye":
+                shape
+                    .append("div")
+                    .style("height", "6.5px")
+                    .style("width", "3px")
+                    .style("background", d.properties.markercolor)
+                    .style("position", "absolute")
+                    .style("left", "10px")
+                    .style("top", "-3.5px")
+                    .append("div")
+                    .style("height", "5px")
+                    .style("width", "3px")
+                    .style("background", d.properties.markercolor)
+                    .style("transform", "rotate(-55deg)")
+                    .style("position", "relative")
+                    .style("top", "-2px")
+                    .style("left", "-2px")
+                    .append("div")
+                    .style("height", "5px")
+                    .style("width", "3px")
+                    .style("background", d.properties.markercolor)
+                    .style("transform", "rotate(108deg)")
+                    .style("position", "relative")
+                    .style("top", "3px")
+                    .style("left", "2px");
+                break;
+            case "none":
+                shape;
+            default:
+                break;
+        }
+    }
+}
+export function getAreaShape(d, innerDiv, formatOptions) {
+    let flexdiv = innerDiv
+        .append("div")
+        .style("height", "10px")
+        .style("width", "15px")
+        .style("background", d.color)
+        .style("display", "flex")
+        .style("flex-direction", "column")
+        .style("border-radius", "1px");
+    if (formatOptions.Marker.markerVisibility) {
+        switch (d.markershape[0].toLowerCase()) {
+            case "circle":
+                flexdiv
+                    .append("div")
+                    .style("height", "20%")
+                    .style("width", "100%")
+                    .style("background", d.color)
+                    .style("position", "relative")
+                    .append("svg")
+                    .style("position", "absolute")
+                    .style("left", "50%")
+                    .style("top", "50%")
+                    .attr("transform", "translate(-5,-5)")
+                    .attr("height", "10px")
+                    .attr("width", "10px")
+                    .append("circle")
+                    .attr("cx", "5")
+                    .attr("cy", "5")
+                    .attr("r", "2.5")
+                    .style("fill", d.properties.markercolor);
+                break;
+            case "square":
+                flexdiv
+                    .append("div")
+                    .style("height", "20%")
+                    .style("width", "100%")
+                    .style("background", d.properties.markercolor)
+                    .style("position", "relative")
+                    .append("div")
+                    .style("position", "absolute")
+                    .style("left", "50%")
+                    .style("top", "50%")
+                    .style("transform", "translate(-4px, -3.5px)")
+                    .style("height", "5px")
+                    .style("width", "5px")
+                    .style("top", "2px")
+                    .style("left", "9px")
+                    .style("background", d.properties.markercolor)
+                    .style("border-radius", "1px");
+                break;
+            case "triangle":
+                flexdiv
+                    .append("div")
+                    .style("height", "20%")
+                    .style("width", "100%")
+                    .style("background", d.properties.markercolor)
+                    .style("position", "relative")
+                    .append("div")
+                    .style("position", "absolute")
+                    .style("transform", "translate(5px, -3.5px)")
+                    .style("border-left", "3px solid transparent")
+                    .style("border-right", "3px solid transparent")
+                    .style("border-bottom", `7px solid ${d.properties.markercolor}`);
+                break;
+            case "cross":
+                flexdiv
+                    .append("div")
+                    .style("height", "20%")
+                    .style("width", "100%")
+                    .style("background", d.properties.markercolor)
+                    .style("position", "relative")
+                    .append("div")
+                    .style("position", "absolute")
+                    .style("left", "50%")
+                    .style("top", "50%")
+                    .style("transform", "translate(-3px, -2px)")
+                    .style("height", "4px")
+                    .style("width", "7px")
+                    .style("background", d.properties.markercolor)
+                    .append("div")
+                    .style("height", "6px")
+                    .style("width", "3px")
+                    .style("background", d.properties.markercolor)
+                    .style("position", "relative")
+                    .style("top", "-1px")
+                    .style("left", "2px");
+                break;
+            case "diamond":
+                flexdiv
+                    .append("div")
+                    .style("height", "20%")
+                    .style("width", "100%")
+                    .style("background", d.properties.markercolor)
+                    .style("position", "relative")
+                    .append("div")
+                    .style("height", "4px")
+                    .style("width", "4px")
+                    .style("background", d.properties.markercolor)
+                    .style("transform", "rotate(45deg)")
+                    .style("top", "-1px")
+                    .style("left", "5px")
+                    .style("position", "absolute");
+                break;
+            case "star":
+                flexdiv
+                    .append("div")
+                    .style("height", "20%")
+                    .style("width", "100%")
+                    .style("background", d.properties.markercolor)
+                    .style("position", "relative")
+                    .append("div")
+                    .style("border-left", "2.5px solid transparent")
+                    .style("border-right", "2.5px solid transparent")
+                    .style("border-bottom", `6px solid ${d.properties.markercolor}`)
+                    .style("position", "absolute")
+                    .style("top", "-3px")
+                    .style("left", "6px")
+                    .style("transform", "rotate(0deg)")
+                    .append("div")
+                    .style("border-left", "2.5px solid transparent")
+                    .style("border-right", "2.5px solid transparent")
+                    .style("border-top", `6px solid ${d.properties.markercolor}`)
+                    .style("position", "absolute")
+                    .style("top", "0.5px")
+                    .style("left", "-2px")
+                    .style("transform", "rotate(360deg)");
+                break;
+            case "wye":
+                flexdiv
+                    .append("div")
+                    .style("height", "20%")
+                    .style("width", "100%")
+                    .style("background", d.properties.markercolor)
+                    .style("position", "relative")
+                    .append("div")
+                    .style("height", "4.5px")
+                    .style("width", "2px")
+                    .style("background", d.properties.markercolor)
+                    .style("position", "absolute")
+                    .style("left", "6.5px")
+                    .style("top", "-0.5px")
+                    .append("div")
+                    .style("height", "3px")
+                    .style("width", "2px")
+                    .style("background", d.properties.markercolor)
+                    .style("transform", "rotate(-55deg)")
+                    .style("position", "relative")
+                    .style("top", "-2px")
+                    .style("left", "-2px")
+                    .append("div")
+                    .style("height", "3px")
+                    .style("width", "2px")
+                    .style("background", d.properties.markercolor)
+                    .style("transform", "rotate(108deg)")
+                    .style("position", "relative")
+                    .style("top", "3px")
+                    .style("left", "2px");
+                break;
+            case "none":
+                flexdiv
+                    .append("div")
+                    .style("height", "20%")
+                    .style("width", "100%")
+                    .style("background", d.properties.markercolor);
+                break;
+            default:
+                break;
+        }
+    }
+    flexdiv
+        .append("div")
+        .style("height", "20%")
+        .style("width", "100%")
+        .style("background", "white");
+    flexdiv
+        .append("div")
+        .style("height", "60%")
+        .style("width", "100%")
+        .style("background", d.color)
+        .style("border-radius", "1px");
+}
+export function getReactShape(d, innerDiv) {
+    innerDiv
+        .append("div")
+        .style("height", "10px")
+        .style("width", "15px")
+        .style("border-style", d)
+        .style("border-width", d)
+        .style("border-color", d)
+        .style("background", d.color)
+        .style("border-radius", "1px");
+}
+export const legendsWithScroll = (svg, seriesData, x, y, width, height, legendPosition, alignment, shape, chartFormatOptions, chartId) => {
+    let justifyContent = "";
+    let flexDirection = "";
+    if (legendPosition == "Left" || legendPosition == "Right") {
+        flexDirection = "column";
+        justifyContent =
+            alignment == "Top" ? "start" : alignment == "Middle" ? "center" : "end";
+    }
+    else {
+        flexDirection = "row";
+        justifyContent =
+            alignment == "Start"
+                ? "start"
+                : alignment == "Middle"
+                    ? "center"
+                    : "end";
+    }
+    let object = svg
+        .append("foreignObject")
+        .attr("x", x)
+        .attr("y", y)
+        .style("pointer-events", "auto")
+        .attr("width", width + "px")
+        .attr("height", height + "px")
+        .style("user-select", "none");
+    var div = object
+        .append("xhtml:div")
+        .attr("id", "legendObject" + chartId)
+        .attr("class", "legendsBoxWrapper")
+        .style("width", width + "px")
+        .style("display", "flex")
+        .style("height", height - 1 + "px")
+        .style("overflow", "auto")
+        .style("pointer-events", "auto")
+        .style("justify-content", justifyContent)
+        .style("flex-direction", flexDirection)
+        .style("outline-offset", -chartFormatOptions.legends.legendBorderThickness + "px")
+        .style("outline", chartFormatOptions.legends.legendBorder
+        ? `${chartFormatOptions.legends.legendBorderThickness +
+            "px" +
+            " solid" +
+            chartFormatOptions.legends.legendBorderColor}`
+        : "none")
+        .append("div")
+        // .style("width", "100%")
+        .attr("class", "scrollbar")
+        .style("display", "flex")
+        .style("justify-content", justifyContent)
+        .style("flex-direction", flexDirection)
+        .style("flex-wrap", "nowrap")
+        .style("padding-left", "3px");
+    if (legendPosition == "Bottom" || legendPosition == "Top")
+        div.style("flex-direction", "row");
+    seriesData.forEach((d, i) => {
+        let innerdiv = div
+            .append("div")
+            .style("display", "inline-flex")
+            .style("justify-content", "flex-start")
+            .style("align-items", "center")
+            .style("width", "fit-content")
+            .style("margin", "3px 0px")
+            .style("flex-wrap", "nowrap")
+            .style("white-space", "nowrap")
+            .on("mousemove", function (d) {
+            if (chartFormatOptions.legends.onHoverEffect) {
+                svg
+                    .selectAll(".parentGroup")
+                    .classed("highlight", false)
+                    .classed("unhighlight", true);
+                svg
+                    .selectAll('[hoverId="' + this.textContent.replace(/ /g, "-") + '"]')
+                    .classed("highlight", true)
+                    .classed("unhighlight", false);
+            }
+        })
+            .on("mouseout", function (d) {
+            if (chartFormatOptions.legends.onHoverEffect) {
+                svg
+                    .selectAll(".parentGroup")
+                    .classed("highlight", false)
+                    .classed("unhighlight", false);
+                svg
+                    .selectAll('[hoverId="' + this.textContent.replace(/ /g, "-") + '"]')
+                    .classed("highlight", false)
+                    .classed("unhighlight", false);
+            }
+        });
+        if (legendPosition == "Bottom" || legendPosition == "Top") {
+            innerdiv.style("margin-right", "16px").style("white-space", "nowrap");
+        }
+        if (shape == legendShape.circle) {
+            getCircleShape(d, innerdiv);
+        }
+        else if (shape == legendShape.hollowCircle) {
+            getHollowCircleShape(d, innerdiv);
+        }
+        else if (shape == legendShape.line) {
+            getLineShape(d, innerdiv, chartFormatOptions);
+        }
+        else if (shape == legendShape.areaWithLine) {
+            getAreaShape(d, innerdiv, chartFormatOptions);
+        }
+        else if (shape == legendShape.rectangle) {
+            getReactShape(d, innerdiv);
+        }
+        let legendColor = chartFormatOptions.legends.legendColorMode == 1
+            ? d.properties.color
+                ? d.properties.color
+                : "#000000"
+            : chartFormatOptions.legends.legendSelectedUnicolor;
+        innerdiv
+            .append("div")
+            .style("margin-left", "5px")
+            .style("color", legendColor)
+            .attr("title", d)
+            .style("font-size", d.properties.fontSize + "px")
+            .style("font-family", d.properties.fontFamily)
+            .style("font-style", d.properties.fontStyle.includes("Italic") ? "Italic" : "")
+            .style("text-decoration", d.properties.fontStyle.includes("Underline") ? "Underline" : "")
+            .style("font-weight", d.properties.fontStyle.includes("Bold") ? "Bold" : "")
+            .style("white-space", "nowrap")
+            .attr("title", d.legend)
+            .html(d.legend);
+    });
+};
+export function calculateMaxLegendWidth(list, formatOptions) {
+    let maxLength = 0;
+    let maxLegend = list[0];
+    list.forEach(legend => {
+        //legend.includes("-") ? legend.split("-")[1] :
+        let splitedLegend = legend.includes("~$~") ? legend.split("~$~")[1] : legend.includes("-") ? legend.slice(legend.indexOf("-") + 1) : legend;
+        let splitedLegendLength = splitedLegend.length;
+        if (maxLength < splitedLegendLength) {
+            maxLength = splitedLegendLength;
+            maxLegend = splitedLegend;
+        }
+    });
+    return calculateWidthHeightDynamically(maxLegend, formatOptions.legends.legendFontSize, formatOptions.legends.legendFontFamily);
+}