@trackunit/react-chart-components 0.0.302 → 0.0.303

package/index.cjs.js

@@ -152,7 +152,7 @@ const cvaKpiContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col",
  * - The donut chart is displayed when the showChart prop is set to true.
  *
  * @param {boolean} showChart - Boolean to control the visibility of the chart.
- * @param {number} count - Value of the Kpi.
+ * @param {number|string|null} count - Value of the Kpi.
  * @param {number} totalCount - Total value of the Kpi.
  * @param {string} description - Description of the Kpi.
  * @param {string[]} colors - Colors of the Kpi.
@@ -161,7 +161,7 @@ const cvaKpiContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col",
  * @returns {JSX.Element} Kpi component
  */
 const Kpi = ({ className, dataTestId, showChart = false, count, description, totalCount, countColor, totalCountColor, suffix, inline = false, loading = false, }) => {
-    return (jsxRuntime.jsxs("div", { className: cvaKpi({ className }), "data-testid": dataTestId, children: [showChart ? (jsxRuntime.jsx(KPIDonutChart, { count: Number(count), countColor: countColor, dataTestId: dataTestId ? dataTestId + "-donut-chart" : undefined, loading: loading, totalCount: totalCount, totalCountColor: totalCountColor })) : null, loading ? (jsxRuntime.jsxs("div", { className: cvaKpiContainer({ inline }), "data-testid": dataTestId ? `${dataTestId}-skeleton-lines` : null, children: [jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: 1, width: 20 }), jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: 1, width: 50 })] })) : (jsxRuntime.jsxs("div", { className: cvaKpiContainer({ inline, showChart }), "data-testid": dataTestId ? `${dataTestId}-container` : null, children: [jsxRuntime.jsxs("span", { className: cvaKpiCountContainer(), children: [jsxRuntime.jsx("span", { className: cvaKpiCount(), children: typeof count === "number" || typeof count === "string" ? count : "-" }), suffix ? (jsxRuntime.jsx("span", { className: cvaKpiSuffix(), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] }), jsxRuntime.jsx("span", { className: cvaKpiDescription(), children: description })] }))] }));
+    return (jsxRuntime.jsxs("div", { className: cvaKpi({ className }), "data-testid": dataTestId, children: [showChart ? (jsxRuntime.jsx(KPIDonutChart, { count: Number(count), countColor: countColor, dataTestId: dataTestId ? dataTestId + "-donut-chart" : undefined, loading: loading, totalCount: totalCount, totalCountColor: totalCountColor })) : null, loading ? (jsxRuntime.jsxs("div", { className: cvaKpiContainer({ inline }), "data-testid": dataTestId ? `${dataTestId}-skeleton-lines` : null, children: [jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: 1, width: 20 }), jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: 1, width: 50 })] })) : (jsxRuntime.jsxs("div", { className: cvaKpiContainer({ inline, showChart }), "data-testid": dataTestId ? `${dataTestId}-container` : null, children: [jsxRuntime.jsxs("span", { className: cvaKpiCountContainer(), children: [jsxRuntime.jsx("span", { className: cvaKpiCount(), children: count !== null && count !== void 0 ? count : "-" }), suffix ? (jsxRuntime.jsx("span", { className: cvaKpiSuffix(), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] }), jsxRuntime.jsx("span", { className: cvaKpiDescription(), children: description })] }))] }));
 };
 
 const cvaLegendItem = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -144,7 +144,7 @@ const cvaKpiContainer = cvaMerge(["flex", "flex-col", "items-baseline"], {
  * - The donut chart is displayed when the showChart prop is set to true.
  *
  * @param {boolean} showChart - Boolean to control the visibility of the chart.
- * @param {number} count - Value of the Kpi.
+ * @param {number|string|null} count - Value of the Kpi.
  * @param {number} totalCount - Total value of the Kpi.
  * @param {string} description - Description of the Kpi.
  * @param {string[]} colors - Colors of the Kpi.
@@ -153,7 +153,7 @@ const cvaKpiContainer = cvaMerge(["flex", "flex-col", "items-baseline"], {
  * @returns {JSX.Element} Kpi component
  */
 const Kpi = ({ className, dataTestId, showChart = false, count, description, totalCount, countColor, totalCountColor, suffix, inline = false, loading = false, }) => {
-    return (jsxs("div", { className: cvaKpi({ className }), "data-testid": dataTestId, children: [showChart ? (jsx(KPIDonutChart, { count: Number(count), countColor: countColor, dataTestId: dataTestId ? dataTestId + "-donut-chart" : undefined, loading: loading, totalCount: totalCount, totalCountColor: totalCountColor })) : null, loading ? (jsxs("div", { className: cvaKpiContainer({ inline }), "data-testid": dataTestId ? `${dataTestId}-skeleton-lines` : null, children: [jsx(SkeletonLines, { lines: 1, width: 20 }), jsx(SkeletonLines, { lines: 1, width: 50 })] })) : (jsxs("div", { className: cvaKpiContainer({ inline, showChart }), "data-testid": dataTestId ? `${dataTestId}-container` : null, children: [jsxs("span", { className: cvaKpiCountContainer(), children: [jsx("span", { className: cvaKpiCount(), children: typeof count === "number" || typeof count === "string" ? count : "-" }), suffix ? (jsx("span", { className: cvaKpiSuffix(), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] }), jsx("span", { className: cvaKpiDescription(), children: description })] }))] }));
+    return (jsxs("div", { className: cvaKpi({ className }), "data-testid": dataTestId, children: [showChart ? (jsx(KPIDonutChart, { count: Number(count), countColor: countColor, dataTestId: dataTestId ? dataTestId + "-donut-chart" : undefined, loading: loading, totalCount: totalCount, totalCountColor: totalCountColor })) : null, loading ? (jsxs("div", { className: cvaKpiContainer({ inline }), "data-testid": dataTestId ? `${dataTestId}-skeleton-lines` : null, children: [jsx(SkeletonLines, { lines: 1, width: 20 }), jsx(SkeletonLines, { lines: 1, width: 50 })] })) : (jsxs("div", { className: cvaKpiContainer({ inline, showChart }), "data-testid": dataTestId ? `${dataTestId}-container` : null, children: [jsxs("span", { className: cvaKpiCountContainer(), children: [jsx("span", { className: cvaKpiCount(), children: count !== null && count !== void 0 ? count : "-" }), suffix ? (jsx("span", { className: cvaKpiSuffix(), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] }), jsx("span", { className: cvaKpiDescription(), children: description })] }))] }));
 };
 
 const cvaLegendItem = cvaMerge([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-chart-components",
-  "version": "0.0.302",
+  "version": "0.0.303",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/KPI/Kpi.d.ts

@@ -6,8 +6,9 @@ export interface KpiProps extends CommonProps {
      *
      * @example
      * <Kpi count={29000} />
+     * <Kpi count="29,000" />
      */
-    count: number | string;
+    count: number | string | null;
     /**
      * Total count of the Kpi.
      * This is useful when you want to display a donut chart.
@@ -63,7 +64,7 @@ export interface KpiProps extends CommonProps {
  * - The donut chart is displayed when the showChart prop is set to true.
  *
  * @param {boolean} showChart - Boolean to control the visibility of the chart.
- * @param {number} count - Value of the Kpi.
+ * @param {number|string|null} count - Value of the Kpi.
  * @param {number} totalCount - Total value of the Kpi.
  * @param {string} description - Description of the Kpi.
  * @param {string[]} colors - Colors of the Kpi.