pace-chart-lib 0.0.7 → 0.0.9

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

@@ -0,0 +1,282 @@
+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.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { IChartProps } from "../ChartsWithoutAxisTypes.types";
+declare const WordCloud: React.FC<IChartProps>;
+export default WordCloud;

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

@@ -0,0 +1,207 @@
+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;

package/dist/components/Charts/ChartsWithoutAxis/PieFamily/DonutChart.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { IChartProps } from "../ChartsWithoutAxisTypes.types";
+declare const DonutChart: React.FC<IChartProps>;
+export default DonutChart;