@balena/ui-shared-components 12.2.0-build-add-horizontal-bar-chart-db8d21032600e1691b782f35738d157b23185b6e-1 → 12.2.0-build-add-horizontal-bar-chart-6ee5a259ba1b19526e22819624d07c39f1e8b246-1

package/dist/components/HorizontalBarChart/index.js

@@ -2,10 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack, styled, Tooltip, Typography } from '@mui/material';
 import { token } from '../../utils/token';
 import { useTranslation } from '../../hooks/useTranslations';
-const Bar = styled('div', {
-    name: 'Bar',
-    slot: 'bar',
-})({
+import { useMemo } from 'react';
+const Bar = styled('div')({
     width: '100%',
     height: 24,
     display: 'flex',
@@ -13,10 +11,9 @@ const Bar = styled('div', {
     overflow: 'hidden',
     gap: 2,
 });
-const BarItem = styled('span', {
-    name: 'BarItem',
-    slot: 'bar-item',
-})({});
+const BarItem = styled('span')({
+    minWidth: 3,
+});
 const Legend = styled('ul')({
     display: 'inline',
     listStyle: 'none',
@@ -39,7 +36,7 @@ const LegendItem = styled('li')({
 });
 export const HorizontalBarChart = ({ items }) => {
     const { t } = useTranslation();
-    const total = items.reduce((partialSum, a) => partialSum + a.count, 0);
+    const totalItems = useMemo(() => items.reduce((sum, item) => sum + item.count, 0), [items]);
     const getTotalDevicesLabel = (count) => count > 1
         ? t('labels.total_devices_other', { count })
         : t('labels.total_devices_one', { count });
@@ -47,7 +44,7 @@ export const HorizontalBarChart = ({ items }) => {
                     .filter((item) => item.count > 0)
                     .map((item) => (_jsx(Tooltip, { title: `${item.title}: ${getTotalDevicesLabel(item.count)}`, children: _jsx(BarItem, { sx: {
                             backgroundColor: item.color,
-                            width: `${(item.count / total) * 100}%`,
+                            width: `${(item.count / totalItems) * 100}%`,
                         } }) }, item.title))) }), _jsx(Legend, { children: items
                     .filter((item) => item.count > 0)
                     .map((item) => (_jsx(Tooltip, { title: getTotalDevicesLabel(item.count), children: _jsx(LegendItem, { style: { color: item.color }, children: _jsx(Typography, { variant: "bodySm", color: token('color.text.subtle'), children: item.title }) }) }, item.title))) })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "12.2.0-build-add-horizontal-bar-chart-db8d21032600e1691b782f35738d157b23185b6e-1",
+  "version": "12.2.0-build-add-horizontal-bar-chart-6ee5a259ba1b19526e22819624d07c39f1e8b246-1",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -138,6 +138,6 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2025-04-10T20:45:27.362Z"
+    "publishedAt": "2025-04-10T20:57:05.228Z"
   }
 }