pace-chart-lib 1.0.2 → 1.0.4

package/dist/components/Charts/ChartsWithoutAxis/OtherCharts/VennChart.js

@@ -1,282 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-//#region imports
-import * as d3 from "d3";
-import * as venn from "venn.js";
-import { useEffect, useRef } from "react";
-import { fontStyleOptions, staticLegendShape, staticLegendPosition, } from "../../Core/Common.types";
-import { convertStringToNumber, drawChartTitle, firstFunctionBeforeRender, generalizedChartData, getNumberWithFormatFunction, hideTooltipOnMouseOut, initChartArea, initSvg, legendsWithScroll, marginCalculationsForChartsWithoutAxis, preCalculateTextDimensions, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
-import { chartMargins } from "../../Core/DefaultProperties.types";
-import { logError } from "../../../../Services/ErrorLog";
-//#endregion
-const VennChart = ({ data, formatOptions, chartId, }) => {
-    //#region Variables
-    const svgRef = useRef(); // Reference to the SVG element
-    let seriesData = generalizedChartData(data); // Data for the word cloud, expected to be an array of objects with properties
-    let chartFormatOptions; // Format options for the chart
-    let width; // svg total width
-    let height; // svg total height
-    let chartTitleHeight = 40; // Height of the chart title
-    let margins = chartMargins; // Margins for the chart
-    let innerHeight; // Height of the chart excluding margins
-    let innerWidth; // Width of the chart excluding margins
-    let legendListWidth;
-    let maxLegendDimensions = [0, 0]; // to calculate margins [width, height]
-    let chartAreaTagG; // Group element for the chart area
-    let svg; // SVG element for the chart
-    //#endregion
-    useEffect(() => {
-        drawChart();
-    }, [formatOptions]);
-    const drawChart = () => {
-        ({ chartFormatOptions, svg, width, height } = firstFunctionBeforeRender(svgRef, formatOptions));
-        maxLegendDimensions = calculateLegendsMaxPossibleWidth();
-        ({ margins, innerHeight, innerWidth, legendListWidth, chartTitleHeight } =
-            marginCalculationsForChartsWithoutAxis(chartFormatOptions, width, height, maxLegendDimensions, margins, true));
-        initSvg(svgRef, width, height, chartFormatOptions); // Initialize SVG with width, height and background color
-        chartAreaTagG = initChartArea(svg, margins);
-        drawChartTitle(svgRef, chartTitleHeight, width, chartFormatOptions);
-        drawVennDiagramChart();
-        initLegendListWithTotalValueAllowance();
-    };
-    const drawVennDiagramChart = () => {
-        try {
-            let fontStyleName = chartFormatOptions.plotArea.dataLabelNameFontStyle;
-            let fontStyleValue = chartFormatOptions.plotArea.dataLabelValueFontStyle;
-            // draw venn diagram
-            let vennContainer = chartAreaTagG.attr("class", "vennContainer");
-            vennContainer &&
-                vennContainer
-                    .datum(data)
-                    .call(venn.VennDiagram().width(innerWidth).height(innerHeight));
-            //Adding hoverId to paths
-            // vennContainer &&
-            //   vennContainer
-            //     .selectAll(".venn-area.venn-circle")
-            //     .attr("hoverId", (d: any) =>
-            //       `${d.legendDisplay} : ${d.size}`.replace(/ /g, "-")
-            //     );
-            // vennContainer &&
-            //   vennContainer
-            //     .selectAll(".venn-area.venn-intersection")
-            //     .attr("hoverId", (d: any) =>
-            //       `${d.legendDisplay} : ${d.size}`.replace(/ /g, "-")
-            //     );
-            // vennContainer &&
-            //   vennContainer
-            //     .selectAll(".path")
-            //     .attr("hoverId", (d: any) =>
-            //       `${d.legendDisplay} : ${d.size}`.replace(/ /g, "-")
-            //     );
-            vennContainer &&
-                vennContainer
-                    .selectAll(".venn-circle path")
-                    .style("fill-opacity", chartFormatOptions.plotArea.opacity);
-            if (chartFormatOptions.plotArea.dataLabelName) {
-                vennContainer && vennContainer.selectAll(".venn-circle text").html("");
-                vennContainer &&
-                    vennContainer
-                        .selectAll(".venn-circle text")
-                        .append("tspan")
-                        .style("font-family", chartFormatOptions.plotArea.dataLabelNameFontFamily)
-                        .style("fill", chartFormatOptions.plotArea.dataLabelNameColor)
-                        .style("font-size", chartFormatOptions.plotArea.dataLabelNameFontSize + "px")
-                        .style("font-style", fontStyleName.includes(fontStyleOptions.italic)
-                        ? fontStyleOptions.italic
-                        : "")
-                        .attr("text-decoration", fontStyleName.includes(fontStyleOptions.underline)
-                        ? fontStyleOptions.underline
-                        : "")
-                        .style("font-weight", fontStyleName.includes(fontStyleOptions.bold)
-                        ? fontStyleOptions.bold
-                        : "")
-                        .html((d) => d.label)
-                        .attr("visibility", chartFormatOptions.plotArea.dataLabelName ? "visible" : "hidden");
-            }
-            else {
-                vennContainer &&
-                    vennContainer
-                        .selectAll(".venn-circle text")
-                        .style("visibility", "hidden");
-                vennContainer && vennContainer.selectAll(".venn-circle text").html("");
-            }
-            //text formatting options
-            if (chartFormatOptions.plotArea.dataLabelValue) {
-                vennContainer &&
-                    vennContainer
-                        .selectAll(".venn-circle text")
-                        .append("tspan")
-                        .attr("font-size", chartFormatOptions.plotArea.dataLabelValueFontSize)
-                        .attr("fill", chartFormatOptions.plotArea.dataLabelValueColor !== "#ffffff"
-                        ? chartFormatOptions.plotArea.dataLabelValueColor
-                        : "none")
-                        .style("font-style", fontStyleValue.includes(fontStyleOptions.italic)
-                        ? fontStyleOptions.italic
-                        : "normal")
-                        .attr("text-decoration", fontStyleValue.includes(fontStyleOptions.underline)
-                        ? fontStyleOptions.underline
-                        : "none")
-                        .style("font-weight", fontStyleValue.includes(fontStyleOptions.bold)
-                        ? fontStyleOptions.bold
-                        : "normal")
-                        .attr("font-family", chartFormatOptions.plotArea.dataLabelValueFontFamily)
-                        .attr("fill-opacity", 0.5)
-                        .html((d) => d.actualValue !== undefined
-                        ? (chartFormatOptions.plotArea.dataLabelName ? " : " : "") +
-                            d3.format(chartFormatOptions.plotArea.dataLabelNumberFormat)(d.actualValue)
-                        : "")
-                        .attr("visibility", chartFormatOptions.plotArea.dataLabelValue ? "visible" : "hidden");
-            }
-            if (chartFormatOptions.plotArea.intersectionLabelVisibility) {
-                vennContainer &&
-                    vennContainer.selectAll(".venn-intersection text").html("");
-                vennContainer &&
-                    vennContainer
-                        .selectAll(".venn-intersection text")
-                        .append("tspan")
-                        .style("font-family", chartFormatOptions.plotArea.dataLabelNameFontFamily)
-                        .style("fill", chartFormatOptions.plotArea.dataLabelNameColor)
-                        .style("font-size", chartFormatOptions.plotArea.dataLabelNameFontSize + "px")
-                        .style("font-style", fontStyleName.includes(fontStyleOptions.italic)
-                        ? fontStyleOptions.italic
-                        : "")
-                        .attr("text-decoration", fontStyleName.includes(fontStyleOptions.underline)
-                        ? fontStyleOptions.underline
-                        : "")
-                        .style("font-weight", fontStyleName.includes(fontStyleOptions.bold)
-                        ? fontStyleOptions.bold
-                        : "")
-                        .html((d) => d.label)
-                        .attr("visibility", chartFormatOptions.plotArea.intersectionLabelVisibility
-                        ? "visible"
-                        : "hidden");
-            }
-            else {
-                vennContainer &&
-                    vennContainer
-                        .selectAll(".venn-intersection text")
-                        .style("visibility", "hidden");
-                vennContainer &&
-                    vennContainer.selectAll(".venn-intersection text").html("");
-            }
-            //text formatting options
-            if (chartFormatOptions.plotArea.intersectionValueVisibility) {
-                vennContainer &&
-                    vennContainer
-                        .selectAll(".venn-intersection text")
-                        .append("tspan")
-                        .attr("font-size", chartFormatOptions.plotArea.dataLabelValueFontSize)
-                        .attr("fill", chartFormatOptions.plotArea.dataLabelValueColor !== "#ffffff"
-                        ? chartFormatOptions.plotArea.dataLabelValueColor
-                        : "none")
-                        .style("font-style", fontStyleValue.includes(fontStyleOptions.italic)
-                        ? fontStyleOptions.italic
-                        : "normal")
-                        .attr("text-decoration", fontStyleValue.includes(fontStyleOptions.underline)
-                        ? fontStyleOptions.underline
-                        : "none")
-                        .style("font-weight", fontStyleValue.includes(fontStyleOptions.bold)
-                        ? fontStyleOptions.bold
-                        : "normal")
-                        .attr("font-family", chartFormatOptions.plotArea.dataLabelValueFontFamily)
-                        .attr("font-weight", 300)
-                        .attr("fill-opacity", 0.5)
-                        .html((d) => d.actualValue !== undefined
-                        ? (chartFormatOptions.plotArea.dataLabelName ? " : " : "") +
-                            d3.format(chartFormatOptions.plotArea.dataLabelNumberFormat)(d.actualValue)
-                        : "")
-                        .attr("visibility", chartFormatOptions.plotArea.intersectionValueVisibility
-                        ? "visible"
-                        : "hidden");
-            }
-            // to get the color of legendEntries to the venn dia
-            vennContainer &&
-                vennContainer
-                    .selectAll(".venn-circle path")
-                    .style("fill", (d) => d.properties ? d.properties.color : null);
-            vennContainer &&
-                vennContainer
-                    .selectAll("g")
-                    .on("mousemove", function (event, d) {
-                    showTooltipOnMouseMove([
-                        {
-                            key: d.label,
-                            value: getNumberWithFormatFunction("None", chartFormatOptions.toolTip.toolTipNumberFormat, chartFormatOptions.toolTip.toolTipDecimalPrecision)(d.size),
-                        },
-                    ], chartFormatOptions);
-                    // highlight the current path
-                    let selection = d3.select(this).transition("tooltip").duration(10);
-                    selection
-                        .selectAll("path")
-                        .style("stroke-dasharray", "5,5")
-                        .style("stroke-opacity", 1)
-                        .style("stroke", "black");
-                })
-                    .on("mouseout", function (d, i) {
-                    hideTooltipOnMouseOut();
-                    var selection = d3.select(this).transition("tooltip").duration(400);
-                    selection
-                        .select("path")
-                        .style("stroke-width", 0)
-                        .style("stroke-opacity", 0);
-                });
-        }
-        catch (error) {
-            logError("VennChart.tsx", "drawVennDiagramChart", error);
-        }
-    };
-    const calculateLegendsMaxPossibleWidth = () => {
-        try {
-            let maxWidth = 0;
-            let maxHeight = 0;
-            seriesData.forEach((series) => {
-                if (series.legendDisplay) {
-                    let textDimensions = preCalculateTextDimensions(series.legendDisplay + " : " + series.actualValue, convertStringToNumber(chartFormatOptions.legends.legendFontSize), chartFormatOptions.legends.legendFontFamily);
-                    maxWidth = Math.max(maxWidth, textDimensions.width);
-                    maxHeight = Math.max(maxHeight, textDimensions.height);
-                }
-            });
-            return [maxWidth, maxHeight];
-        }
-        catch (error) {
-            logError("VennChart.tsx", "calculateLegendsMaxPossibleWidth", error);
-            return [0, 0];
-        }
-    };
-    const initLegendListWithTotalValueAllowance = () => {
-        try {
-            let position = chartFormatOptions.legends.legendPosition;
-            let horizontalLegendAlignment = chartFormatOptions.legends.legendAlignmentTopBottom;
-            let verticalLegendAlignment = chartFormatOptions.legends.legendAlignment;
-            switch (position) {
-                case staticLegendPosition.none:
-                    break;
-                case staticLegendPosition.right:
-                    legendsWithScroll(svg, seriesData, width - legendListWidth - 25, chartTitleHeight + 5, legendListWidth + 15, height - chartTitleHeight - 10, position, verticalLegendAlignment, staticLegendShape.none, chartFormatOptions, chartId, true);
-                    break;
-                case staticLegendPosition.top:
-                    legendsWithScroll(svg, seriesData, 5, chartTitleHeight + 5, width - 10, 30, position, horizontalLegendAlignment, staticLegendShape.none, chartFormatOptions, chartId, true);
-                    break;
-                case staticLegendPosition.left:
-                    legendsWithScroll(svg, seriesData, 5, margins.top, legendListWidth + 15, height - chartTitleHeight - 10, position, verticalLegendAlignment, staticLegendShape.none, chartFormatOptions, chartId, true);
-                    break;
-                case staticLegendPosition.bottom:
-                    legendsWithScroll(svg, seriesData, 5, height - 35, width - 10, 30, position, horizontalLegendAlignment, staticLegendShape.none, chartFormatOptions, chartId, true);
-                    break;
-            }
-        }
-        catch (error) {
-            logError("VennChart.tsx", "initLegendListWithTotalValueAllowance", error);
-        }
-    };
-    // return (
-    //   <div style={{ width: "100%", height: "100%" }}>
-    //     <svg
-    //       className="chartSVG"
-    //       style={{ width: "100%", height: "100%" }}
-    //       ref={svgRef}
-    //     ></svg>
-    //   </div>
-    // );
-    return (_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { id: "chartTooltipDiv" }), _jsx("svg", { className: "chartSVG", ref: svgRef, id: chartId, style: { width: "100%", height: "100%" } })] }));
-};
-export default VennChart;

package/dist/components/Charts/ChartsWithoutAxis/OtherCharts/WordCloud.js

@@ -1,207 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-//#region imports
-import * as d3 from "d3";
-import cloud from "d3-cloud";
-import { useEffect, useRef } from "react";
-import { drawChartTitle, firstFunctionBeforeRender, generalizedChartData, getNumberWithFormatFunction, hideTooltipOnMouseOut, initChartArea, initSvg, marginCalculationsForChartsWithoutLegends, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
-import { chartMargins } from "../../Core/DefaultProperties.types";
-import { logError } from "../../../../Services/ErrorLog";
-//#endregion
-const fileName = "WordCloud.tsx";
-const WordCloud = ({ data, formatOptions, chartId }) => {
-    //#region Variables
-    const svgRef = useRef(); // Reference to the SVG element
-    let seriesData = generalizedChartData(data); // Data for the word cloud, expected to be an array of objects with properties
-    let chartFormatOptions; // Format options for the chart
-    let width; // svg total width
-    let height; // svg total height
-    let min = Number.MAX_VALUE; // svg total height
-    let max = Number.MIN_VALUE; // svg total height
-    let chartTitleHeight = 40; // Height of the chart title
-    let margins = chartMargins; // Margins for the chart
-    let innerHeight; // Height of the chart excluding margins
-    let innerWidth; // Width of the chart excluding margins
-    let chartAreaTagG; // Group element for the chart area
-    let svg; // SVG element for the chart
-    let scale; // Scale for the font size based on data values
-    let totalMeasureValue = 0;
-    //#endregion
-    useEffect(() => {
-        drawChart();
-    }, [formatOptions]);
-    const drawChart = () => {
-        ({ chartFormatOptions, svg, width, height } = firstFunctionBeforeRender(svgRef, formatOptions));
-        ({ margins, chartTitleHeight, innerHeight, innerWidth } =
-            marginCalculationsForChartsWithoutLegends(chartFormatOptions, height, width));
-        initSvg(svgRef, width, height, chartFormatOptions); // Initialize SVG with width, height and background color
-        chartAreaTagG = initChartArea(svg, margins);
-        drawChartTitle(svgRef, chartTitleHeight, width, chartFormatOptions);
-        calculateWordCloudData(seriesData);
-        drawWordCloudChart();
-    };
-    const calculateWordCloudData = (seriesData) => {
-        try {
-            totalMeasureValue = 0;
-            seriesData = seriesData.map((item) => {
-                let value = item.data[0].value;
-                totalMeasureValue += value;
-                if (value < min) {
-                    min = value;
-                }
-                if (value > max) {
-                    max = value;
-                }
-                if (chartFormatOptions.plotArea.hideZeroValues && item[0].value != 0) {
-                    return null; // Filter out zero values if hideZeroValues is true
-                }
-                else {
-                    return item;
-                }
-            });
-            seriesData = seriesData.filter((item) => item !== null); // Remove null values
-            scale = d3.scaleLinear().domain([min, max]).range([12, 70]);
-        }
-        catch (error) {
-            logError(fileName, "calculateWordCloudData", error);
-        }
-    };
-    const drawWordCloudChart = () => {
-        try {
-            let spacing = chartFormatOptions.text.textSpacing;
-            let rotation = chartFormatOptions.text.textRotation;
-            let layout = cloud()
-                .size([innerWidth, innerHeight])
-                .words(seriesData)
-                .padding(spacing)
-                .rotate(function () {
-                try {
-                    return Math.round(Math.random()) * rotation;
-                }
-                catch (error) {
-                    logError(fileName, "rotate", error);
-                    return 0;
-                }
-            })
-                .random(() => 0.5)
-                .font(chartFormatOptions.text.textFontFamily)
-                .fontWeight("bolder")
-                .fontSize(function (d) {
-                try {
-                    return scale(d.data[0].value);
-                }
-                catch (error) {
-                    logError(fileName, "fontSize", error);
-                    return 12;
-                }
-            })
-                .text(function (d) {
-                try {
-                    return d.properties.alias;
-                }
-                catch (error) {
-                    logError(fileName, "text", error);
-                    return "";
-                }
-            })
-                .on("end", draw);
-            layout.start();
-            function draw(words) {
-                try {
-                    chartAreaTagG
-                        .append("g")
-                        .attr("transform", "translate(" +
-                        layout.size()[0] / 2 +
-                        "," +
-                        layout.size()[1] / 2 +
-                        ")")
-                        .selectAll("text")
-                        .data(words)
-                        .enter()
-                        .append("text")
-                        .attr("font-size", function (d) {
-                        try {
-                            return scale(d.data[0].value) + "px";
-                        }
-                        catch (error) {
-                            logError(fileName, "draw-font-size", error);
-                            return "12px";
-                        }
-                    })
-                        .attr("text-anchor", "middle")
-                        .style("font-family", chartFormatOptions.text.textFontFamily)
-                        .attr("fill", function (d) {
-                        try {
-                            return d.properties.color !== "#ffffff"
-                                ? d.properties.color
-                                : "none";
-                        }
-                        catch (error) {
-                            logError(fileName, "draw-fill", error);
-                            return "none";
-                        }
-                    })
-                        .attr("transform", function (d) {
-                        try {
-                            return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
-                        }
-                        catch (error) {
-                            logError(fileName, "draw-transform", error);
-                            return "";
-                        }
-                    })
-                        .text(function (d) {
-                        try {
-                            return d.properties.alias;
-                        }
-                        catch (error) {
-                            logError(fileName, "draw-text", error);
-                            return "";
-                        }
-                    })
-                        .on("mousemove.text", (mouseEvent, d) => {
-                        try {
-                            showTooltipOnMouseMove([
-                                {
-                                    key: d.properties.alias,
-                                    value: getNumberWithFormatFunction("None", chartFormatOptions.toolTip.toolTipNumberFormat, chartFormatOptions.toolTip.toolTipDecimalPrecision)(d.data[0].value),
-                                },
-                                {
-                                    key: d.properties.measureUniqueId,
-                                    value: totalMeasureValue,
-                                },
-                            ], chartFormatOptions);
-                        }
-                        catch (error) {
-                            logError(fileName, "draw-mousemove", error);
-                        }
-                    })
-                        .on("mouseout.text", () => {
-                        try {
-                            hideTooltipOnMouseOut();
-                        }
-                        catch (error) {
-                            logError(fileName, "draw-mouseout", error);
-                        }
-                    });
-                }
-                catch (error) {
-                    logError(fileName, "draw", error);
-                }
-            }
-        }
-        catch (e) {
-            logError(fileName, "drawWordCloudChart", e);
-        }
-    };
-    // return (
-    //   <div style={{ width: "100%", height: "100%" }}>
-    //     <svg
-    //       className="chartSVG"
-    //       style={{ width: "100%", height: "100%" }}
-    //       ref={svgRef}
-    //     ></svg>
-    //   </div>
-    // );
-    return (_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { id: "chartTooltipDiv" }), _jsx("svg", { className: "chartSVG", ref: svgRef, id: chartId, style: { width: "100%", height: "100%" } })] }));
-};
-export default WordCloud;