pace-chart-lib 0.0.12 → 1.0.1

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

@@ -1,512 +0,0 @@
-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);
-}