impaktapps-design 0.2.993-alpha.230 → 0.2.993-alpha.232

package/dist/impaktapps-design.es.js

@@ -22504,6 +22504,7 @@ const AreaGraph = ({
     }), GraphRender]
   });
 };
+const TREND_KEY = "growthRate";
 const DrawStackBarLineGraph = ({
   width: width2,
   height: height2,
@@ -22529,13 +22530,13 @@ const DrawStackBarLineGraph = ({
   const yAxisTickCount = (_i = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _i.yAxisTickCount;
   const disableLeftLabel = (_j = stackBarLineValue.main) == null ? void 0 : _j.disableLeftLabel;
   const xAxisLabelMinWidth = ((_k = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _k.xAxisLabelMinWidth) || 56;
-  const trendColor = (_l = colorMap == null ? void 0 : colorMap["growthRate"]) != null ? _l : "#E24B4A";
+  const trendColor = (_l = colorMap == null ? void 0 : colorMap[TREND_KEY]) != null ? _l : "#E24B4A";
   const labelsArray = useMemo(() => {
     if (!chartData.length)
       return [];
     return Object.keys(chartData[0]).filter((k2) => k2 !== xAxisValue);
   }, [chartData, xAxisValue]);
-  const barKeys = useMemo(() => labelsArray.filter((k2) => k2 !== "growthRate"), [labelsArray]);
+  const barKeys = useMemo(() => labelsArray.filter((k2) => k2 !== TREND_KEY), [labelsArray]);
   const barData = useMemo(() => chartData.map((row) => {
     const stripped = {
       [xAxisValue]: row[xAxisValue]
@@ -22559,30 +22560,30 @@ const DrawStackBarLineGraph = ({
     nice: true
   }), [innerHeight, maxStacked]);
   const trendScale = useMemo(() => {
-    const vals = chartData.map((d2) => Number(d2["growthRate"]) || 0);
+    const vals = chartData.map((d2) => Number(d2[TREND_KEY]) || 0);
     return createLinearScale({
       domain: [Math.min(...vals), Math.max(...vals)],
       range: [innerHeight, 0],
       nice: true
     });
   }, [chartData, innerHeight]);
-  const getBarCentreX = (cat) => {
+  const getBarCentreX = useCallback((cat) => {
     var _a2;
     return ((_a2 = categoryScale(cat)) != null ? _a2 : 0) + categoryScale.bandwidth() / 2;
-  };
-  const getLineX = (d2) => getBarCentreX(d2[xAxisValue]);
-  const getLineY = (d2) => trendScale(Number(d2["growthRate"]) || 0);
+  }, [categoryScale]);
+  const getLineX = useCallback((d2) => getBarCentreX(d2[xAxisValue]), [getBarCentreX, xAxisValue]);
+  const getLineY = useCallback((d2) => trendScale(Number(d2[TREND_KEY]) || 0), [trendScale]);
   const handleColumnEnter = useCallback((_e2, cat) => {
     const full = chartData.find((d2) => d2[xAxisValue] === cat);
     const dotX = getBarCentreX(cat) + margin2.left;
-    const dotY = trendScale(Number(full["growthRate"]) || 0) + margin2.top;
+    const dotY = trendScale(Number(full[TREND_KEY]) || 0) + margin2.top;
     setHoveredCategory(cat);
     showTooltip({
       tooltipData: full,
       tooltipLeft: dotX + 14,
       tooltipTop: dotY - 12
     });
-  }, [chartData, xAxisValue, trendScale, margin2, showTooltip]);
+  }, [chartData, xAxisValue, trendScale, margin2, showTooltip, getBarCentreX]);
   const handleColumnLeave = useCallback(() => {
     setHoveredCategory(null);
     hideTooltip();
@@ -22609,16 +22610,34 @@ const DrawStackBarLineGraph = ({
             var _a2;
             return (_a2 = colorMap == null ? void 0 : colorMap[key]) != null ? _a2 : defaultColour;
           },
-          children: (barStacks) => barStacks.map((barStack) => barStack.bars.map((bar) => /* @__PURE__ */ jsx$1("rect", {
-            x: bar.x,
-            y: bar.y,
-            width: bar.width,
-            height: bar.height,
-            fill: bar.color,
-            opacity: 0.88,
-            rx: 6,
-            ry: 6
-          }, `bar-${barStack.index}-${bar.index}`)))
+          children: (barStacks) => {
+            const topStackIndex = barStacks.length - 1;
+            return barStacks.map((barStack, stackIdx) => barStack.bars.map((bar) => {
+              const isTop = stackIdx === topStackIndex;
+              const r2 = 6;
+              return isTop ? /* @__PURE__ */ jsx$1("path", {
+                d: `
+                      M ${bar.x + r2},${bar.y}
+                      h ${bar.width - 2 * r2}
+                      q ${r2},0 ${r2},${r2}
+                      v ${bar.height - r2}
+                      h ${-bar.width}
+                      v ${-(bar.height - r2)}
+                      q 0,${-r2} ${r2},${-r2}
+                      z
+                    `,
+                fill: bar.color,
+                opacity: 0.88
+              }, `bar-${barStack.index}-${bar.index}`) : /* @__PURE__ */ jsx$1("rect", {
+                x: bar.x,
+                y: bar.y,
+                width: bar.width,
+                height: bar.height,
+                fill: bar.color,
+                opacity: 0.88
+              }, `bar-${barStack.index}-${bar.index}`);
+            }));
+          }
         }), /* @__PURE__ */ jsx$1(GridRows$1, {
           scale: barScale,
           width: innerWidth,
@@ -22742,7 +22761,7 @@ const DrawStackBarLineGraph = ({
         border: "none",
         borderRadius: 8,
         boxShadow: "0 4px 16px rgba(0,0,0,0.35)",
-        padding: "8px 12px",
+        padding: "15px 12px",
         fontSize: 12,
         minWidth: 160
       },
@@ -22750,7 +22769,7 @@ const DrawStackBarLineGraph = ({
         style: {
           fontWeight: 600,
           color: "#454444",
-          margin: "0 0 6px",
+          margin: "0 0 12px",
           fontSize: 13
         },
         children: tooltipData[xAxisValue]
@@ -22758,7 +22777,7 @@ const DrawStackBarLineGraph = ({
         style: {
           display: "flex",
           flexDirection: "column",
-          gap: 10
+          gap: 11
         },
         children: labelsArray.map((key) => {
           var _a2, _b2;