@trackunit/react-chart-components 0.0.40 → 0.0.43

package/index.cjs

@@ -150,7 +150,7 @@ const KPIDonutChart = ({ dataTestId, loading, countColor, totalCountColor, count
  * @returns {JSX.Element} Kpi component
  */
 const Kpi = ({ className, dataTestId, showChart = false, count, description, totalCount, countColor, totalCountColor, suffix, inline = false, loading = false, }) => {
-    return (jsxRuntime.jsxs(Root$1, Object.assign({ className: className, "data-testid": dataTestId }, { children: [showChart && (jsxRuntime.jsx(KPIDonutChart, { dataTestId: dataTestId && dataTestId + "-donut-chart", loading: loading, count: count, totalCount: totalCount, countColor: countColor, totalCountColor: totalCountColor })), loading ? (jsxRuntime.jsxs(Container, Object.assign({ "data-testid": dataTestId && `${dataTestId}-skeleton-lines`, "$inline": inline }, { children: [jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: 1, width: 20 }), jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: 1, width: 50 })] }))) : (jsxRuntime.jsxs(Container, Object.assign({ "$showChart": showChart, "data-testid": dataTestId && `${dataTestId}-container`, "$inline": inline }, { children: [jsxRuntime.jsxs(CountContainer, { children: [jsxRuntime.jsx(Count, { children: count }), suffix && jsxRuntime.jsx(Suffix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix }))] }), jsxRuntime.jsx(Description, { children: description })] })))] })));
+    return (jsxRuntime.jsxs(Root$1, Object.assign({ className: className, "data-testid": dataTestId }, { children: [showChart && (jsxRuntime.jsx(KPIDonutChart, { dataTestId: dataTestId && dataTestId + "-donut-chart", loading: loading, count: Number(count), totalCount: totalCount, countColor: countColor, totalCountColor: totalCountColor })), loading ? (jsxRuntime.jsxs(Container, Object.assign({ "data-testid": dataTestId && `${dataTestId}-skeleton-lines`, "$inline": inline }, { children: [jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: 1, width: 20 }), jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: 1, width: 50 })] }))) : (jsxRuntime.jsxs(Container, Object.assign({ "$showChart": showChart, "data-testid": dataTestId && `${dataTestId}-container`, "$inline": inline }, { children: [jsxRuntime.jsxs(CountContainer, { children: [jsxRuntime.jsx(Count, { children: count }), suffix && jsxRuntime.jsx(Suffix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix }))] }), jsxRuntime.jsx(Description, { children: description })] })))] })));
 };
 const Root$1 = tailwindStyledComponents.tw.div `tu-kpi`;
 const CountContainer = tailwindStyledComponents.tw.span `tu-kpi__count-container`;

package/index.js

@@ -123,7 +123,7 @@ const KPIDonutChart = ({ dataTestId, loading, countColor, totalCountColor, count
  * @returns {JSX.Element} Kpi component
  */
 const Kpi = ({ className, dataTestId, showChart = false, count, description, totalCount, countColor, totalCountColor, suffix, inline = false, loading = false, }) => {
-    return (jsxs(Root$1, Object.assign({ className: className, "data-testid": dataTestId }, { children: [showChart && (jsx(KPIDonutChart, { dataTestId: dataTestId && dataTestId + "-donut-chart", loading: loading, count: count, totalCount: totalCount, countColor: countColor, totalCountColor: totalCountColor })), loading ? (jsxs(Container, Object.assign({ "data-testid": dataTestId && `${dataTestId}-skeleton-lines`, "$inline": inline }, { children: [jsx(SkeletonLines, { lines: 1, width: 20 }), jsx(SkeletonLines, { lines: 1, width: 50 })] }))) : (jsxs(Container, Object.assign({ "$showChart": showChart, "data-testid": dataTestId && `${dataTestId}-container`, "$inline": inline }, { children: [jsxs(CountContainer, { children: [jsx(Count, { children: count }), suffix && jsx(Suffix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix }))] }), jsx(Description, { children: description })] })))] })));
+    return (jsxs(Root$1, Object.assign({ className: className, "data-testid": dataTestId }, { children: [showChart && (jsx(KPIDonutChart, { dataTestId: dataTestId && dataTestId + "-donut-chart", loading: loading, count: Number(count), totalCount: totalCount, countColor: countColor, totalCountColor: totalCountColor })), loading ? (jsxs(Container, Object.assign({ "data-testid": dataTestId && `${dataTestId}-skeleton-lines`, "$inline": inline }, { children: [jsx(SkeletonLines, { lines: 1, width: 20 }), jsx(SkeletonLines, { lines: 1, width: 50 })] }))) : (jsxs(Container, Object.assign({ "$showChart": showChart, "data-testid": dataTestId && `${dataTestId}-container`, "$inline": inline }, { children: [jsxs(CountContainer, { children: [jsx(Count, { children: count }), suffix && jsx(Suffix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix }))] }), jsx(Description, { children: description })] })))] })));
 };
 const Root$1 = tw.div `tu-kpi`;
 const CountContainer = tw.span `tu-kpi__count-container`;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@trackunit/react-chart-components",
-  "version": "0.0.40",
+  "version": "0.0.43",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/react-components": "0.1.99",
+    "@trackunit/react-components": "0.1.101",
     "@trackunit/tailwind-styled-components": "0.0.56",
     "@trackunit/ui-design-tokens": "0.0.66",
     "echarts": "5.4.0",

package/src/KPI/Kpi.d.ts

@@ -7,7 +7,7 @@ export interface KpiProps extends CommonProps {
      * @example
      * <Kpi count={29000} />
      */
-    count: number;
+    count: number | string;
     /**
      * Total count of the Kpi.
      * This is useful when you want to display a donut chart.