pace-chart-lib 1.0.1 → 1.0.3

package/dist/components/Charts/ChartsWithoutAxis/PieFamily/TreemapChart.js

@@ -1,246 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-//#region imports
-import * as d3 from "d3";
-import { useEffect, useRef } from "react";
-import { colorThemeTypes, fontStyleOptions, } from "../../Core/Common.types";
-import { drawChartTitle, firstFunctionBeforeRender, getNumberWithFormatFunction, hideTooltipOnMouseOut, initChartArea, initSvg, marginCalculationsForChartsWithoutLegends, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
-import { chartMargins } from "../../Core/DefaultProperties.types";
-import { logError } from "../../../../Services/ErrorLog";
-//#endregion
-const fileName = "TreemapChart.tsx";
-const Treemap = ({ data, formatOptions, chartId }) => {
-    const svgRef = useRef(); // Reference to the SVG element where the chart will be drawn
-    let chartFormatOptions; // Format options for the chart, including colors, titles, and other settings
-    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 chartAreaTagG;
-    let chartData; // Data for the treemap, structured as an array of nodes
-    let defaultColor; // Default color for the treemap nodes if color scheme is not set
-    let svg; // D3 selection of the SVG element
-    // #region useEffec
-    useEffect(() => {
-        drawChart();
-    }, [formatOptions]);
-    // #endregion
-    const drawChart = () => {
-        ({ chartFormatOptions, svg, width, height } = firstFunctionBeforeRender(svgRef, formatOptions));
-        ({ margins, chartTitleHeight, innerHeight, innerWidth } =
-            marginCalculationsForChartsWithoutLegends(chartFormatOptions, height, width, true));
-        initSvg(svgRef, width, height, chartFormatOptions);
-        chartAreaTagG = initChartArea(svg, margins);
-        drawChartTitle(svgRef, chartTitleHeight, width, chartFormatOptions);
-        initChartData();
-        prepareTreeColors();
-        initChartRect();
-    };
-    const initChartData = () => {
-        try {
-            const rawData = {
-                name: "root",
-                children: data.ChartData,
-            }; // Creating hierarchy data structure for D3 treemap
-            const root = d3
-                .hierarchy(rawData)
-                .sum((d) => d.data && d.data[0].value)
-                .sort((a, b) => (b.data.data[0].value ?? 0) - (a.data.data[0].value ?? 0));
-            chartData = d3
-                .treemap()
-                .tile(d3.treemapSquarify)
-                .size([innerWidth, innerHeight])
-                .padding(1)
-                .round(true)(root)
-                .leaves();
-            defaultColor = chartData[0].data.properties.color;
-        }
-        catch (error) {
-            logError(fileName, "initChartData", error);
-        }
-    };
-    const prepareTreeColors = () => {
-        try {
-            let colorScheme = chartFormatOptions.colorScale.showColor;
-            if (colorScheme === colorThemeTypes.colorTheme) {
-                let valueIndex = chartData[0].data.data.length > 1 ? 1 : 0;
-                let startColor = chartFormatOptions.colorScale.startColor;
-                let endColor = chartFormatOptions.colorScale.endColor;
-                // Extract unique values
-                let uniqueValueSet = new Set(chartData.map((d) => d.data.data[valueIndex].value));
-                let uniqueValues = Array.from(uniqueValueSet).sort((a, b) => a - b);
-                let totalUniqueValueCount = uniqueValues.length;
-                let colorScale;
-                if (totalUniqueValueCount === 1) {
-                    colorScale = () => startColor; // Single value — one color
-                }
-                else {
-                    const interpolator = d3.interpolateLab(startColor, endColor);
-                    colorScale = d3
-                        .scaleOrdinal()
-                        .domain(uniqueValues.map(String))
-                        .range(uniqueValues.map((_, i) => interpolator(i / (totalUniqueValueCount - 1))));
-                }
-                // Assign themeColor to each data point
-                chartData = chartData.map((d) => {
-                    let value = d.data.data[valueIndex].value;
-                    d.data.properties["themeColor"] = colorScale(value.toString());
-                    return d;
-                });
-                appendColorScale(startColor, endColor, totalUniqueValueCount, uniqueValues);
-            }
-        }
-        catch (error) {
-            logError(fileName, "prepareTreeColors", error);
-        }
-    };
-    const appendColorScale = (startColor, endColor, totalUniqueValueCount, uniqueValues) => {
-        try {
-            let colorScale = d3
-                .scalePow()
-                .exponent(1)
-                .domain([0, totalUniqueValueCount - 1])
-                .range([startColor, endColor]);
-            let object = svg
-                .append("foreignObject")
-                .attr("class", "parentGroup")
-                .attr("x", width - 130)
-                .attr("y", height - 30)
-                .attr("width", 115)
-                .attr("height", 10);
-            let div = object
-                .selectAll(null)
-                .data(uniqueValues)
-                .enter()
-                .append("xhtml:div")
-                .style("width", `${100 / totalUniqueValueCount}%`)
-                .style("height", "100%")
-                .style("flex-direction", "row")
-                .style("display", "inline-block")
-                .attr("width", "20px")
-                .attr("height", "10px")
-                .style("background-color", (d, i) => colorScale(i))
-                .append("div")
-                .attr("width", "20px")
-                .attr("height", "10px")
-                .style("display", "inline-block");
-            // adding colorscale text
-            const colorScaleText = svg
-                .append("g")
-                .attr("transform", `translate(${width - 120},${height - 10})`)
-                .append("text")
-                .attr("text-anchor", "end")
-                .attr("class", "DisplayUnit")
-                .style("fill", chartFormatOptions.yAxisTitle.yAxisTitleColor)
-                .style("font-size", "10px")
-                .style("font-family", chartFormatOptions.yAxisTitle.yAxisTitleFontFamily)
-                .text("min");
-            svg
-                .append("g")
-                .attr("transform", `translate(${width - 10},${height - 10})`)
-                .append("text")
-                .attr("text-anchor", "end")
-                .attr("class", "DisplayUnit")
-                .style("fill", chartFormatOptions.yAxisTitle.yAxisTitleColor)
-                .style("font-size", "10px")
-                .style("font-family", chartFormatOptions.yAxisTitle.yAxisTitleFontFamily)
-                .text("max");
-        }
-        catch (error) {
-            logError(fileName, "appendColorScale", error);
-        }
-    };
-    const getColor = (d) => {
-        try {
-            let colorScheme = chartFormatOptions.colorScale.showColor;
-            switch (colorScheme) {
-                case colorThemeTypes.none:
-                    return defaultColor;
-                case colorThemeTypes.discrete:
-                    return d.properties.color;
-                case colorThemeTypes.colorTheme:
-                    return d.properties.themeColor;
-                default:
-                    return;
-            }
-        }
-        catch (error) {
-            logError(fileName, "getColor", error);
-        }
-    };
-    const initChartRect = () => {
-        try {
-            const leaf = chartAreaTagG
-                .selectAll("g")
-                .data(chartData)
-                .enter()
-                .append("g")
-                .attr("transform", (d) => `translate(${d.x0},${d.y0})`);
-            leaf
-                .append("rect")
-                .attr("fill", (d) => getColor(d.data))
-                .attr("fill-opacity", 0.7)
-                .attr("width", (d) => d.x1 - d.x0)
-                .attr("height", (d) => d.y1 - d.y0)
-                .on("mousemove", (d, data) => {
-                showTooltipOnMouseMove([
-                    {
-                        key: chartFormatOptions.yAxisTitle.yAxisTitleText,
-                        value: getNumberWithFormatFunction(chartFormatOptions.toolTip.toolTipDisplayUnits, chartFormatOptions.toolTip.toolTipNumberFormat, chartFormatOptions.toolTip.toolTipDecimalPrecision)(data.data.data[0].value),
-                    },
-                    { key: "Legend", value: data.data.data[0].legend },
-                    data.data.data[1]
-                        ? {
-                            key: data.data.data[1].legend,
-                            value: getNumberWithFormatFunction(chartFormatOptions.toolTip.toolTipDisplayUnits, chartFormatOptions.toolTip.toolTipNumberFormat, chartFormatOptions.toolTip.toolTipDecimalPrecision)(data.data.data[1].value),
-                        }
-                        : "",
-                ], chartFormatOptions);
-            })
-                .on("mouseout", () => hideTooltipOnMouseOut());
-            // Add clipPath
-            leaf
-                .append("clipPath")
-                .attr("id", (d, i) => `clip-${i}-${chartId}`)
-                .append("rect")
-                .attr("width", (d) => d.x1 - d.x0)
-                .attr("height", (d) => d.y1 - d.y0);
-            // Add clipped text
-            leaf
-                .append("text")
-                .style("fill", (d) => d.data.properties.labelFontColor)
-                .style("font-family", (d) => d.data.properties.fontFamily)
-                .style("font-size", (d) => d.data.properties.fontSize)
-                .style("font-style", (d) => d.data.properties.fontStyle.includes(fontStyleOptions.italic)
-                ? fontStyleOptions.italic
-                : "")
-                .style("text-decoration", (d) => d.data.properties.fontStyle.includes(fontStyleOptions.underline)
-                ? fontStyleOptions.underline
-                : "")
-                .style("font-weight", (d) => d.data.properties.fontStyle.includes(fontStyleOptions.bold)
-                ? fontStyleOptions.bold
-                : "")
-                .attr("clip-path", (d, i) => `url(#clip-${i}-${chartId})`);
-            if (chartFormatOptions.plotArea.dataLabelName) {
-                leaf
-                    .selectAll("text")
-                    .append("tspan")
-                    .attr("x", 5)
-                    .attr("y", "1.1em")
-                    .text((d) => d.data.legend);
-            }
-            leaf
-                .selectAll("text")
-                .append("tspan")
-                .attr("x", 5)
-                .attr("y", chartFormatOptions.plotArea.dataLabelName ? "2.1em" : "1.1em")
-                .text((d) => getNumberWithFormatFunction(chartFormatOptions.plotArea.plotAreaDisplayUnits, chartFormatOptions.plotArea.dataLabelNumberFormat, chartFormatOptions.plotArea.dataLabelDecimalPrecision)(d.data.data[0].value));
-        }
-        catch (error) {
-            logError(fileName, "initChartRect", error);
-        }
-    };
-    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 Treemap;

package/dist/components/Charts/Core/Common.types.js

@@ -1,133 +0,0 @@
-export var staticLegendShape;
-(function (staticLegendShape) {
-    staticLegendShape["rectangle"] = "rectangle";
-    staticLegendShape["circle"] = "circle";
-    staticLegendShape["hollowCircle"] = "hollowCircle";
-    staticLegendShape["areaWithLine"] = "areaWithLine";
-    staticLegendShape["line"] = "line";
-    staticLegendShape["custom"] = "custom";
-    staticLegendShape["none"] = "none";
-})(staticLegendShape || (staticLegendShape = {}));
-export var connectedStyle;
-(function (connectedStyle) {
-    connectedStyle["solid"] = "unset";
-    connectedStyle[connectedStyle["dotted"] = 2] = "dotted";
-    connectedStyle[connectedStyle["dashed"] = 7] = "dashed";
-})(connectedStyle || (connectedStyle = {}));
-export var staticLineStyle;
-(function (staticLineStyle) {
-    staticLineStyle["solid"] = "solid";
-    staticLineStyle["dotted"] = "dotted";
-    staticLineStyle["dashed"] = "dashed";
-})(staticLineStyle || (staticLineStyle = {}));
-import * as d3 from "d3";
-import * as d3Annotation from "d3-svg-annotation";
-export const ConnecterCurve = {
-    "1": "",
-    "2": d3.curveLinear,
-    "3": d3.curveStep
-};
-export const AnnotationTypeMap = {
-    1: d3Annotation.annotationLabel,
-    2: d3Annotation.annotationLabel,
-    3: d3Annotation.annotationCallout,
-    4: d3Annotation.annotationCalloutElbow,
-    5: d3Annotation.annotationCalloutCurve,
-};
-export const ConnectedStyle = {
-    "solid": "unset",
-    "Dotted": "2",
-    "Dashed": "7"
-};
-export var staticLegendPosition;
-(function (staticLegendPosition) {
-    staticLegendPosition["left"] = "Left";
-    staticLegendPosition["right"] = "Right";
-    staticLegendPosition["top"] = "Top";
-    staticLegendPosition["bottom"] = "Bottom";
-    staticLegendPosition["none"] = "None";
-})(staticLegendPosition || (staticLegendPosition = {}));
-export var staticDisplayUnits;
-(function (staticDisplayUnits) {
-    staticDisplayUnits["thousands"] = "Thousands";
-    staticDisplayUnits["millions"] = "Millions";
-    staticDisplayUnits["billions"] = "Billions";
-    staticDisplayUnits["none"] = "None";
-})(staticDisplayUnits || (staticDisplayUnits = {}));
-export var staticNumberUnits;
-(function (staticNumberUnits) {
-    staticNumberUnits["percentage"] = ",.0%";
-    staticNumberUnits["general"] = "";
-    staticNumberUnits["scientific"] = ".2n";
-    staticNumberUnits["currency_USD"] = ".2$";
-    staticNumberUnits["currency_CAD"] = ".2c";
-    staticNumberUnits["currency_EUR"] = ".2\u0113";
-    staticNumberUnits["currency_CHF"] = ".2ch";
-    staticNumberUnits["currency_UK"] = ".2\u00A3";
-    staticNumberUnits["currency_INR"] = ".2\u20B9";
-    staticNumberUnits["commaSeparated"] = ",";
-})(staticNumberUnits || (staticNumberUnits = {}));
-export var staticDataLabelPositions;
-(function (staticDataLabelPositions) {
-    staticDataLabelPositions["top"] = "1";
-    staticDataLabelPositions["bottom"] = "3";
-    staticDataLabelPositions["middle"] = "2";
-})(staticDataLabelPositions || (staticDataLabelPositions = {}));
-export var staticTotalAlignment;
-(function (staticTotalAlignment) {
-    staticTotalAlignment["start"] = "1";
-    staticTotalAlignment["middle"] = "2";
-    staticTotalAlignment["end"] = "3";
-})(staticTotalAlignment || (staticTotalAlignment = {}));
-export var staticTotalPosition;
-(function (staticTotalPosition) {
-    staticTotalPosition["top"] = "1";
-    staticTotalPosition["bottom"] = "2";
-})(staticTotalPosition || (staticTotalPosition = {}));
-export const colorThemeTypes = {
-    none: "1",
-    discrete: "2",
-    colorTheme: "3",
-};
-export const dataLabelPositionType = {
-    automatic: "1",
-    startOnly: "2",
-    endOnly: "3",
-    startAndEndBoth: "4",
-    none: "5"
-};
-export var connectorKPIforSpeedometerType;
-(function (connectorKPIforSpeedometerType) {
-    connectorKPIforSpeedometerType["PointerValue"] = "1";
-    connectorKPIforSpeedometerType["Absolute"] = "2";
-    connectorKPIforSpeedometerType["CAGR"] = "3";
-    connectorKPIforSpeedometerType["PercentageGrowth"] = "4";
-})(connectorKPIforSpeedometerType || (connectorKPIforSpeedometerType = {}));
-export const legendColorMode = {
-    singleColor: "2",
-    multiColor: "1",
-};
-export const fontStyleOptions = {
-    underline: "Underline",
-    bold: "Bold",
-    italic: "Italic",
-    normal: "Normal",
-};
-export var verticalLegendAllignment;
-(function (verticalLegendAllignment) {
-    verticalLegendAllignment["top"] = "Top";
-    verticalLegendAllignment["middle"] = "Middle";
-    verticalLegendAllignment["bottom"] = "Bottom";
-})(verticalLegendAllignment || (verticalLegendAllignment = {}));
-export var horizontalLegendAllignment;
-(function (horizontalLegendAllignment) {
-    horizontalLegendAllignment["start"] = "Start";
-    horizontalLegendAllignment["middle"] = "Middle";
-    horizontalLegendAllignment["end"] = "End";
-})(horizontalLegendAllignment || (horizontalLegendAllignment = {}));
-export const referenceLineTypes = {
-    None: "None",
-    Mean: "Mean",
-    Median: "Median",
-    Custom: "Custom",
-};