@ah-automation.nl/component-lib 0.0.101 → 0.0.102

package/dist/components/bar-chart.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import type { BarChartProps } from "@/types";
-declare function BarChart({ className, color, data, initialDimension, isAnimationActive, radius, showTooltip, showValueLabels, useDeviceAnimationGuard, valueFormatter, ...props }: BarChartProps): React.ReactElement;
+declare function BarChart({ className, color, data, initialDimension, isAnimationActive, radius, seriesLabel, showTooltip, showValueLabels, useDeviceAnimationGuard, valueFormatter, ...props }: BarChartProps): React.ReactElement;
 export { BarChart };
 //# sourceMappingURL=bar-chart.d.ts.map

package/dist/components/bar-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bar-chart.d.ts","sourceRoot":"","sources":["../../src/components/bar-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAE,aAAa,EAAe,MAAM,SAAS,CAAC;AAK1D,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAqB,EACrB,IAAI,EACJ,gBAAgB,EAChB,iBAAwB,EACxB,MAAuB,EACvB,WAAkB,EAClB,eAAsB,EACtB,uBAA8B,EAC9B,cAAc,EACd,GAAG,KAAK,EACT,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY,CAqFpC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"bar-chart.d.ts","sourceRoot":"","sources":["../../src/components/bar-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAE,aAAa,EAAe,MAAM,SAAS,CAAC;AAK1D,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAqB,EACrB,IAAI,EACJ,gBAAgB,EAChB,iBAAwB,EACxB,MAAuB,EACvB,WAAqB,EACrB,WAAkB,EAClB,eAAsB,EACtB,uBAA8B,EAC9B,cAAc,EACd,GAAG,KAAK,EACT,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY,CAuFpC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/index.js

@@ -29921,45 +29921,52 @@ function qme({
   initialDimension: n,
   isAnimationActive: i = !0,
   radius: a = Sre,
-  showTooltip: o = !0,
-  showValueLabels: l = !0,
-  useDeviceAnimationGuard: u = !0,
-  valueFormatter: c,
-  ...d
+  seriesLabel: o = "Total",
+  showTooltip: l = !0,
+  showValueLabels: u = !0,
+  useDeviceAnimationGuard: c = !0,
+  valueFormatter: d,
+  ...f
 }) {
-  const f = EM(
+  const h = EM(
     i,
-    u
-  ), h = Object.fromEntries(
-    r.map((g) => [
-      g.key,
+    c
+  ), m = Object.fromEntries(
+    r.map((y) => [
+      y.key,
       {
-        color: g.color ?? t,
-        label: g.label
+        color: y.color ?? t,
+        label: y.label
       }
     ])
-  ), m = r.map((g) => ({
-    fill: g.color ?? t,
-    label: g.label,
-    name: g.key,
-    value: g.value
-  })), p = (g) => c !== void 0 ? c(g) : g.toLocaleString(), v = (g) => {
-    const y = h[g].label;
-    return typeof y == "string" || typeof y == "number" ? String(y) : g;
+  ), p = r.map((y) => ({
+    fill: y.color ?? t,
+    label: y.label,
+    name: y.key,
+    value: y.value
+  })), v = (y) => d !== void 0 ? d(y) : y.toLocaleString(), g = (y) => {
+    const E = m[y].label;
+    return typeof E == "string" || typeof E == "number" ? String(E) : y;
   };
   return /* @__PURE__ */ $(
     yM,
     {
-      config: h,
+      config: m,
       initialDimension: n,
-      className: k("aspect-video w-full", e),
-      ...d,
+      className: k(
+        "aspect-video w-full",
+        // accessibilityLayer makes the chart focusable; drop the focus ring
+        // it draws on any focused descendant when a bar is clicked.
+        "[&_*:focus]:outline-none [&_*:focus-visible]:outline-none [&_.recharts-wrapper]:ring-0",
+        e
+      ),
+      ...f,
       children: /* @__PURE__ */ K(
         rre,
         {
           accessibilityLayer: !0,
-          data: m,
-          margin: { top: l ? 24 : 8 },
+          data: p,
+          margin: { top: u ? 24 : 8 },
           children: [
             /* @__PURE__ */ $(
               XC,
@@ -29968,29 +29975,24 @@ function qme({
                 tickLine: !1,
                 axisLine: !1,
                 tickMargin: 8,
-                tickFormatter: v
+                tickFormatter: g
               }
             ),
-            o ? /* @__PURE__ */ $(
+            l ? /* @__PURE__ */ $(
               bM,
               {
-                cursor: !1,
-                content: /* @__PURE__ */ $(
-                  wM,
-                  {
-                    hideLabel: !0,
-                    formatter: (g) => p(Number(g))
-                  }
-                )
+                cursor: { fill: "var(--muted)", opacity: 0.4 },
+                content: /* @__PURE__ */ $(wM, {})
               }
             ) : null,
             /* @__PURE__ */ $(
               YC,
               {
                 dataKey: "value",
+                name: o,
                 radius: a,
-                isAnimationActive: f,
-                children: l ? /* @__PURE__ */ $(
+                isAnimationActive: h,
+                children: u ? /* @__PURE__ */ $(
                   Do,
                   {
                     dataKey: "value",
@@ -29999,7 +30001,7 @@ function qme({
                     className: "fill-muted-foreground",
                     fontSize: 12,
                     fontWeight: 600,
-                    formatter: (g) => p(Number(g))
+                    formatter: (y) => v(Number(y))
                   }
                 ) : null
               }