pace-chart-lib 0.0.6 → 0.0.8

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

@@ -0,0 +1,246 @@
+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,
+            }; // 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.d.ts

@@ -0,0 +1,369 @@
+export declare enum staticLegendShape {
+    rectangle = "rectangle",
+    circle = "circle",
+    hollowCircle = "hollowCircle",
+    areaWithLine = "areaWithLine",
+    line = "line",
+    custom = "custom",
+    none = "none"
+}
+export declare enum connectedStyle {
+    "solid" = "unset",
+    "dotted" = 2,
+    "dashed" = 7
+}
+export declare enum staticLineStyle {
+    "solid" = "solid",
+    "dotted" = "dotted",
+    "dashed" = "dashed"
+}
+import { defaultChartFormatOptions } from "./DefaultProperties.types";
+import * as d3 from "d3";
+import * as d3Annotation from "d3-svg-annotation";
+export type TTextMeasureOptions = {
+    content: string;
+    fontSize?: number;
+    fontFamily?: string;
+    rotationDegree?: number;
+    fixedWidth?: number;
+};
+export type TTextDimensions = {
+    width: number;
+    height: number;
+    rotatedWidth: number;
+    rotatedHeight: number;
+};
+export type TDefaultChartFormatOptionsType = typeof defaultChartFormatOptions;
+export interface ICustomArcDatum extends d3.DefaultArcObject {
+    x0: number;
+    x1: number;
+    y0: number;
+    y1: number;
+    depth: number;
+    data: TSeries;
+}
+export type TNode = {
+    height: any;
+    parent: any;
+    value: any;
+    x0: number;
+    x1: number;
+    y0: number;
+    y1: number;
+    depth: number;
+    data: TSeries;
+};
+export type TLegendEntry = {
+    color?: string;
+    name?: string;
+    type?: string;
+    axis?: string;
+    alias?: string;
+    fontSize?: number;
+    fontStyle?: string[];
+    fontFamily?: string;
+    labelColor?: string;
+    markerShape?: string;
+    markerColor?: string;
+    lineWidth?: number;
+    lineStyle?: string;
+    markerSize?: number;
+    opacity?: number;
+    annotation?: number;
+    disableAnnotation?: boolean;
+    connector?: number;
+    disableConnector?: boolean;
+    measureUniqueId?: string;
+    legendUniqueId?: string;
+    borderStyle?: string;
+    borderWidth?: number;
+    borderRadius?: number;
+    borderColor?: string;
+    labelFontSize?: number;
+    labelFontStyle?: string[];
+    labelFont?: string;
+    labelFontColor?: string;
+    valueFontSize?: number;
+    valueFontStyle?: string[];
+    valueFont?: string;
+    valueFontColor?: string;
+    backgroundColor?: string;
+    nodeHeight?: number;
+    nodeWidth?: number;
+    dataLabelPosition?: string;
+    secondaryAxisBgColor?: string;
+    actualChartType?: string;
+    hideZeroValues?: boolean;
+    stackBorderWidth?: number;
+    stackBorderColor?: string;
+    stackBorderStyle?: number;
+    seriesLabelVisibility?: boolean;
+    totalValue?: number;
+    currentMeasure?: string;
+    legend?: string;
+    dimensions?: string[];
+    maximumMeasure?: number;
+    measures?: number[];
+    minimumMeasure?: number;
+    disableLineStyle?: boolean;
+    endColor?: string;
+    disableAnnotationPosition?: boolean;
+    startColor?: string;
+    disableMarkerShape?: boolean;
+    disableMarkerColor?: boolean;
+    setColorScale?: boolean;
+    areaBorderColor?: string;
+    disableDataLabelPosition?: boolean;
+    disableMarkerSize?: boolean;
+    annotationPosition?: number;
+    individualAnnotationVisibility?: string;
+    currentLegend?: string;
+    tooltip?: string;
+    tooltipMeasure?: number;
+    themeColor?: string;
+};
+export declare const ConnecterCurve: {
+    "1": string;
+    "2": d3.CurveFactory;
+    "3": d3.CurveFactory;
+};
+export declare const AnnotationTypeMap: {
+    1: typeof d3Annotation.annotationLabel;
+    2: typeof d3Annotation.annotationLabel;
+    3: typeof d3Annotation.annotationCallout;
+    4: typeof d3Annotation.annotationCalloutElbow;
+    5: typeof d3Annotation.annotationCalloutCurve;
+};
+export declare const ConnectedStyle: {
+    solid: string;
+    Dotted: string;
+    Dashed: string;
+};
+export type TChartMargins = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export type TPieOfPieSeries = {
+    legend: string;
+    data: TDataPoint[];
+    children?: TPieOfPieSeries[];
+};
+export type TAnnotationObject = {
+    note: {
+        title: string;
+        label: string;
+        align: string;
+    };
+    data: {
+        x: number;
+        y: number;
+        legend: string;
+        dimension: string;
+        measure: number;
+        labelFontFamily: string;
+        labelFontColor: string;
+        labelFontSize: number;
+        labelFontStyle: string[];
+        valueFontFamily: string;
+        valueFontColor: string;
+        valueFontSize: number;
+        valueFontStyle: string[];
+        isVisible: boolean;
+    };
+    dx: 0;
+    dy: 0;
+    connector: {
+        end: string;
+        curve: d3.CurveFactory;
+    };
+    subject: {
+        height: number;
+        width: number;
+    };
+    type: d3Annotation.annotationLabel<any>;
+    color: string;
+    height: number;
+    width: number;
+    index: number;
+};
+export declare enum staticLegendPosition {
+    "left" = "Left",
+    "right" = "Right",
+    "top" = "Top",
+    "bottom" = "Bottom",
+    "none" = "None"
+}
+export declare enum staticDisplayUnits {
+    "thousands" = "Thousands",
+    "millions" = "Millions",
+    "billions" = "Billions",
+    "none" = "None"
+}
+export declare enum staticNumberUnits {
+    "percentage" = ",.0%",
+    "general" = "",
+    "scientific" = ".2n",
+    "currency_USD" = ".2$",
+    "currency_CAD" = ".2c",
+    "currency_EUR" = ".2\u0113",
+    "currency_CHF" = ".2ch",
+    "currency_UK" = ".2\u00A3",
+    "currency_INR" = ".2\u20B9",
+    "commaSeparated" = ","
+}
+export declare enum staticDataLabelPositions {
+    "top" = "1",
+    "bottom" = "3",
+    "middle" = "2"
+}
+export declare enum staticTotalAlignment {
+    "start" = "1",
+    "middle" = "2",
+    "end" = "3"
+}
+export declare enum staticTotalPosition {
+    "top" = "1",
+    "bottom" = "2"
+}
+export declare const colorThemeTypes: {
+    none: string;
+    discrete: string;
+    colorTheme: string;
+};
+export declare const dataLabelPositionType: {
+    automatic: string;
+    startOnly: string;
+    endOnly: string;
+    startAndEndBoth: string;
+    none: string;
+};
+export declare enum connectorKPIforSpeedometerType {
+    PointerValue = "1",
+    Absolute = "2",
+    CAGR = "3",
+    PercentageGrowth = "4"
+}
+export declare const legendColorMode: {
+    singleColor: string;
+    multiColor: string;
+};
+export declare const fontStyleOptions: {
+    underline: string;
+    bold: string;
+    italic: string;
+    normal: string;
+};
+export declare enum verticalLegendAllignment {
+    top = "Top",
+    middle = "Middle",
+    bottom = "Bottom"
+}
+export declare enum horizontalLegendAllignment {
+    start = "Start",
+    middle = "Middle",
+    end = "End"
+}
+export type TSeries = {
+    legend: string;
+    data: TDataPoint[];
+    properties?: TLegendEntry;
+};
+export type TData = {
+    ChartData: TSeries[];
+    DimensionList: string[];
+};
+export type TDataPoint = {
+    0?: number;
+    1?: number;
+    dimension: string;
+    value: number;
+    legend: string;
+    hideZero?: boolean;
+    axis?: string;
+    key?: string;
+    type?: string;
+    labelPosition?: string;
+    labelColor?: string;
+};
+export interface ICustomArcDatum extends d3.DefaultArcObject {
+    x0: number;
+    x1: number;
+    y0: number;
+    y1: number;
+    depth: number;
+    data: TSeries;
+}
+export interface IMapsProps {
+    chartId: string;
+    data: TSeries[];
+    geoJsonNode: TGeoJsonNode;
+    formatOptions: TDefaultChartFormatOptionsType;
+}
+type TGeoJsonNode = {
+    dimensionName: string;
+    mappings: {
+        actualName: string;
+        mappedName: string;
+    }[];
+    dimensionNode: TDimensionNode;
+    groups: {
+        groupName: string;
+        groupedRegions: string[];
+    }[];
+};
+type TDimensionNode = {
+    "actualName": string;
+    "dataType": string;
+    "name": string;
+    "datasourceId": string;
+    "isVisible": boolean;
+    "type": string;
+    "datasourceName": string;
+};
+export type TLegendsFormatting = {
+    color?: string;
+    name?: string;
+    alias?: string;
+    fontSize?: number;
+    fontStyle?: string[];
+    fontFamily?: string;
+    markerShape?: string;
+    markerColor?: string;
+    actualChartType?: string;
+};
+export type bubbleScatterData = {
+    dimension: number;
+    dimensionName: string;
+    legendColor: string;
+    legendName: string;
+    measure: number;
+    measureName: string;
+    sizeName: string;
+    sizeValue: number;
+};
+export type TBubbleChartProps = {
+    chartId: string;
+    clientWidth: number;
+    clientHeight: number;
+    data: bubbleScatterData[];
+    legendEntries: TLegendsFormatting[];
+    formatOptions: TDefaultChartFormatOptionsType;
+};
+export declare const referenceLineTypes: {
+    None: string;
+    Mean: string;
+    Median: string;
+    Custom: string;
+};
+export type TScatterChartProps = {
+    chartId: string;
+    clientWidth: number;
+    clientHeight: number;
+    data: bubbleScatterData[];
+    shapesList: TLegendsFormatting[];
+    colorsList: TLegendsFormatting[];
+    formatOptions: TDefaultChartFormatOptionsType;
+};
+export {};