pace-chart-lib 1.0.64 → 1.0.65

package/dist/pace-chart-lib.es.js

@@ -11261,7 +11261,7 @@ const defaultChartFormatOptions = {
     dataLabelsCoordinates: [],
     hideInsignificantValue: false,
     sortBy: "default",
-    chartDirection: "top",
+    chartDirection: "right",
     plotAreaRangeFilter: {
       enabled: false,
       condition: "lt",
@@ -54272,6 +54272,12 @@ const OrganizationChart = ({
   let chartData = [];
   let scrollWidth = 0;
   let scrollHeight = 0;
+  let legendListWidth;
+  let displayedLegends = /* @__PURE__ */ new Map();
+  let maxLegendDimensions;
+  let maxMeasure = Number.NEGATIVE_INFINITY;
+  let minMeasure = Number.POSITIVE_INFINITY;
+  let heatMapScale;
   useEffect(() => {
     drawChart();
   }, [chartId, data, formatOptions]);
@@ -54280,16 +54286,60 @@ const OrganizationChart = ({
       svgRef,
       formatOptions
     ));
-    ({ margins, chartTitleHeight, innerHeight, innerWidth } = marginCalculationsForChartsWithoutLegends(
+    dataPreparation();
+    maxLegendDimensions = calculateLegendsMaxPossibleWidth2(displayedLegends);
+    ({ margins, innerHeight, innerWidth, legendListWidth, chartTitleHeight } = marginCalculationsForChartsWithoutAxis(
       chartFormatOptions,
+      width,
       height,
-      width
+      maxLegendDimensions,
+      margins
     ));
     initSvg(svgRef, width, height, chartFormatOptions);
     drawChartTitle(svgRef, chartTitleHeight, width, chartFormatOptions);
-    dataPreparation();
     scrollWidthHeightCalculation();
     drawOrganizationChart(chartData);
+    initLegendListForOrganizationChart();
+  };
+  const calculateLegendsMaxPossibleWidth2 = (displayedLegendsMap) => {
+    const legends = [];
+    displayedLegendsMap.forEach((_value, key) => {
+      legends.push(key);
+    });
+    const longestLegend = legends.reduce((a2, b) => a2.length > b.length ? a2 : b, "");
+    const legendDims = preCalculateTextDimensions(
+      longestLegend,
+      convertStringToNumber(chartFormatOptions.legends.legendFontSize),
+      chartFormatOptions.legends.legendFontFamily
+    );
+    return [legendDims.width, legendDims.height];
+  };
+  const initLegendListForOrganizationChart = () => {
+    let seriesData = [];
+    displayedLegends.forEach((colors2, label) => {
+      const color2 = `linear-gradient(90deg, ${colors2.join(", ")})`;
+      seriesData.push({
+        properties: {
+          ...legendEntries[0],
+          name: label,
+          alias: label,
+          color: color2
+        }
+      });
+    });
+    initLegendListWithTotalValueAllowance(
+      chartFormatOptions,
+      svg,
+      seriesData,
+      width,
+      height,
+      legendListWidth,
+      chartTitleHeight,
+      chartId,
+      margins,
+      staticLegendShape.rectangle,
+      void 0
+    );
   };
   const dataPreparation = () => {
     try {
@@ -54306,6 +54356,11 @@ const OrganizationChart = ({
       createIdIndexMap(tempData);
       generateUID(tempData);
       chartData = addStyleObjectToChartData(tempData);
+      if (chartFormatOptions.heatMap.showHeatMap) {
+        heatMapScale = sequential().domain([minMeasure, maxMeasure]).interpolator(
+          interpolateRgb$1(chartFormatOptions.heatMap.heatMapMaxColor, chartFormatOptions.heatMap.heatMapMinColor)
+        );
+      }
     } catch (error) {
       logError$2(fileName$1, "dataPreparation", error);
     }
@@ -54362,11 +54417,22 @@ const OrganizationChart = ({
         indexMapForStyleObject.set(styleObject.name, styleObject);
       });
       Object.keys(data2).forEach((key) => {
-        const legendObject = indexMapForStyleObject.get(data2[key].UID ?? data2[key].nodeLabel);
+        const nodeObj = data2[key];
+        const legendObject = indexMapForStyleObject.get(nodeObj.UID ?? nodeObj.nodeLabel) ?? legendEntries[0];
         data2[key] = {
-          ...data2[key],
-          styleObject: legendObject || legendEntries[0]
+          ...nodeObj,
+          styleObject: legendObject
         };
+        if (nodeObj.label) {
+          if (displayedLegends.has(nodeObj.label)) {
+            const colors2 = displayedLegends.get(nodeObj.label);
+            displayedLegends.set(nodeObj.label, [...colors2, legendObject.color ?? "#eedddd"]);
+          } else {
+            displayedLegends.set(nodeObj.label, [legendObject.color ?? "#eedddd"]);
+          }
+        }
+        maxMeasure = Math.max(maxMeasure, nodeObj.value);
+        minMeasure = Math.min(minMeasure, nodeObj.value);
       });
       return data2;
     } catch (error) {
@@ -54407,6 +54473,7 @@ const OrganizationChart = ({
       let connectorVisibility = parseInt(
         chartFormatOptions.connector.connectorLineThickness
       );
+      select$2(floatingSvgRef.current).selectAll("*").remove();
       let organizationalChart = new OrgChart();
       organizationalChart.container(`#floating-${chartId}`).svgWidth(scrollWidth).svgHeight(scrollHeight).nodeHeight((d) => calculateNodeHeight(d)).nodeWidth((d) => calculateNodeWidth(d, true)).layout(chartDirection).diagonal((s2, t, m, offsets = { sy: 0 }) => {
         if (chartDirection == "top" || chartDirection == "bottom" || !chartDirection) {
@@ -54580,7 +54647,7 @@ const OrganizationChart = ({
                   justify-content: center;
                   align-items: center;
                   text-align: center;
-                  background-color: ${d.data.styleObject.color ? d.data.styleObject.color : d.data.styleObject.backgroundColor};
+                  background-color: ${chartFormatOptions.heatMap.showHeatMap ? heatMapScale(d.data.value) : chartFormatOptions.nodes.nodesSingleColor ? chartFormatOptions.nodes.nodesColor : d.data.styleObject.color};
                   z-index: 99;
                   transform: ${transform};
                   transition: unset;">

package/dist/pace-chart-lib.umd.js

@@ -11264,7 +11264,7 @@
       dataLabelsCoordinates: [],
       hideInsignificantValue: false,
       sortBy: "default",
-      chartDirection: "top",
+      chartDirection: "right",
       plotAreaRangeFilter: {
         enabled: false,
         condition: "lt",
@@ -54275,6 +54275,12 @@
     let chartData = [];
     let scrollWidth = 0;
     let scrollHeight = 0;
+    let legendListWidth;
+    let displayedLegends = /* @__PURE__ */ new Map();
+    let maxLegendDimensions;
+    let maxMeasure = Number.NEGATIVE_INFINITY;
+    let minMeasure = Number.POSITIVE_INFINITY;
+    let heatMapScale;
     require$$0$1.useEffect(() => {
       drawChart();
     }, [chartId, data, formatOptions]);
@@ -54283,16 +54289,60 @@
         svgRef,
         formatOptions
       ));
-      ({ margins, chartTitleHeight, innerHeight, innerWidth } = marginCalculationsForChartsWithoutLegends(
+      dataPreparation();
+      maxLegendDimensions = calculateLegendsMaxPossibleWidth2(displayedLegends);
+      ({ margins, innerHeight, innerWidth, legendListWidth, chartTitleHeight } = marginCalculationsForChartsWithoutAxis(
         chartFormatOptions,
+        width,
         height,
-        width
+        maxLegendDimensions,
+        margins
       ));
       initSvg(svgRef, width, height, chartFormatOptions);
       drawChartTitle(svgRef, chartTitleHeight, width, chartFormatOptions);
-      dataPreparation();
       scrollWidthHeightCalculation();
       drawOrganizationChart(chartData);
+      initLegendListForOrganizationChart();
+    };
+    const calculateLegendsMaxPossibleWidth2 = (displayedLegendsMap) => {
+      const legends = [];
+      displayedLegendsMap.forEach((_value, key) => {
+        legends.push(key);
+      });
+      const longestLegend = legends.reduce((a2, b) => a2.length > b.length ? a2 : b, "");
+      const legendDims = preCalculateTextDimensions(
+        longestLegend,
+        convertStringToNumber(chartFormatOptions.legends.legendFontSize),
+        chartFormatOptions.legends.legendFontFamily
+      );
+      return [legendDims.width, legendDims.height];
+    };
+    const initLegendListForOrganizationChart = () => {
+      let seriesData = [];
+      displayedLegends.forEach((colors2, label) => {
+        const color2 = `linear-gradient(90deg, ${colors2.join(", ")})`;
+        seriesData.push({
+          properties: {
+            ...legendEntries[0],
+            name: label,
+            alias: label,
+            color: color2
+          }
+        });
+      });
+      initLegendListWithTotalValueAllowance(
+        chartFormatOptions,
+        svg,
+        seriesData,
+        width,
+        height,
+        legendListWidth,
+        chartTitleHeight,
+        chartId,
+        margins,
+        staticLegendShape.rectangle,
+        void 0
+      );
     };
     const dataPreparation = () => {
       try {
@@ -54309,6 +54359,11 @@
         createIdIndexMap(tempData);
         generateUID(tempData);
         chartData = addStyleObjectToChartData(tempData);
+        if (chartFormatOptions.heatMap.showHeatMap) {
+          heatMapScale = sequential().domain([minMeasure, maxMeasure]).interpolator(
+            interpolateRgb$1(chartFormatOptions.heatMap.heatMapMaxColor, chartFormatOptions.heatMap.heatMapMinColor)
+          );
+        }
       } catch (error) {
         logError$2(fileName$1, "dataPreparation", error);
       }
@@ -54365,11 +54420,22 @@
           indexMapForStyleObject.set(styleObject.name, styleObject);
         });
         Object.keys(data2).forEach((key) => {
-          const legendObject = indexMapForStyleObject.get(data2[key].UID ?? data2[key].nodeLabel);
+          const nodeObj = data2[key];
+          const legendObject = indexMapForStyleObject.get(nodeObj.UID ?? nodeObj.nodeLabel) ?? legendEntries[0];
           data2[key] = {
-            ...data2[key],
-            styleObject: legendObject || legendEntries[0]
+            ...nodeObj,
+            styleObject: legendObject
           };
+          if (nodeObj.label) {
+            if (displayedLegends.has(nodeObj.label)) {
+              const colors2 = displayedLegends.get(nodeObj.label);
+              displayedLegends.set(nodeObj.label, [...colors2, legendObject.color ?? "#eedddd"]);
+            } else {
+              displayedLegends.set(nodeObj.label, [legendObject.color ?? "#eedddd"]);
+            }
+          }
+          maxMeasure = Math.max(maxMeasure, nodeObj.value);
+          minMeasure = Math.min(minMeasure, nodeObj.value);
         });
         return data2;
       } catch (error) {
@@ -54410,6 +54476,7 @@
         let connectorVisibility = parseInt(
           chartFormatOptions.connector.connectorLineThickness
         );
+        select$2(floatingSvgRef.current).selectAll("*").remove();
         let organizationalChart = new OrgChart();
         organizationalChart.container(`#floating-${chartId}`).svgWidth(scrollWidth).svgHeight(scrollHeight).nodeHeight((d) => calculateNodeHeight(d)).nodeWidth((d) => calculateNodeWidth(d, true)).layout(chartDirection).diagonal((s2, t, m, offsets = { sy: 0 }) => {
           if (chartDirection == "top" || chartDirection == "bottom" || !chartDirection) {
@@ -54583,7 +54650,7 @@
                   justify-content: center;
                   align-items: center;
                   text-align: center;
-                  background-color: ${d.data.styleObject.color ? d.data.styleObject.color : d.data.styleObject.backgroundColor};
+                  background-color: ${chartFormatOptions.heatMap.showHeatMap ? heatMapScale(d.data.value) : chartFormatOptions.nodes.nodesSingleColor ? chartFormatOptions.nodes.nodesColor : d.data.styleObject.color};
                   z-index: 99;
                   transform: ${transform};
                   transition: unset;">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pace-chart-lib",
-  "version": "1.0.64",
+  "version": "1.0.65",
   "description": "A simple React + Vite + TS UI library with a Button using custom fonts via SCSS.",
   "license": "MIT",
   "type": "module",