@trackunit/react-chart-components 1.3.40 → 1.3.42

package/index.cjs.js

@@ -5,7 +5,6 @@ var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities
 var reactComponents = require('@trackunit/react-components');
 var EChart = require('echarts-for-react');
 var react = require('react');
-var uiDesignTokens = require('@trackunit/ui-design-tokens');
 
 /**
  * The Chart component is a wrapper component for ECharts.
@@ -66,93 +65,6 @@ const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartR
 const cvaChartContainer = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "grid-rows-1", "grid-cols-1", "h-full", "w-full", "items-center"]);
 const cvaChartSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["grid", "place-items-center", "overflow-y-auto"]);
 
-/**
-
- A donut chart component to display a KPI value and its total in a circular chart.
- *
- @param {string} countColor - The color to be used for the value portion in the chart.
- @param {string} totalCountColor - The color to be used for the total portion in the chart.
- @param {number} count - The count of the KPI to be displayed.
- @param {number} totalCount - The total count of the KPI to be displayed.
- @returns {ReactElement} - A donut chart displaying the KPI count and total count.
- */
-const KPIDonutChart = ({ dataTestId, loading, countColor, totalCountColor, count, totalCount = count, }) => {
-    return (jsxRuntime.jsx(Chart, { dataTestId: dataTestId, options: {
-            color: [countColor || uiDesignTokens.DEFAULT_CHART_COLORS[0], totalCountColor || uiDesignTokens.DEFAULT_CHART_COLORS[22]],
-            xAxis: [
-                {
-                    type: "category",
-                },
-            ],
-            yAxis: [
-                {
-                    type: "value",
-                },
-            ],
-            series: [
-                {
-                    labelLine: {
-                        show: false,
-                    },
-                    emphasis: { disabled: true },
-                    type: "pie",
-                    data: [
-                        {
-                            name: "Value",
-                            value: count,
-                        },
-                        {
-                            name: "Total",
-                            value: totalCount - count,
-                        },
-                    ],
-                    radius: ["40%", "70%"],
-                    center: ["50%", "50%"],
-                },
-            ],
-        }, showLoading: loading, style: { height: "36px", width: "36px" } }));
-};
-
-const cvaKpi = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "gap-1", "leading-none", "items-center"]);
-const cvaKpiCountContainer = cssClassVarianceUtilities.cvaMerge(["flex", "gap-1", "items-baseline"]);
-const cvaKpiDescription = cssClassVarianceUtilities.cvaMerge(["font-normal", "text-base"]);
-const cvaKpiCount = cssClassVarianceUtilities.cvaMerge(["font-semibold", "text-xl"]);
-const cvaKpiSuffix = cssClassVarianceUtilities.cvaMerge(["font-normal", "text-base"]);
-const cvaKpiContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "items-baseline"], {
-    variants: {
-        inline: {
-            false: "",
-            true: ["flex-row", "gap-1", "justify-start"],
-        },
-        showChart: {
-            false: "",
-            true: ["gap-0 ", "items-center"],
-        },
-    },
-    defaultVariants: {
-        inline: false,
-        showChart: false,
-    },
-});
-
-/**
- * - A KPI component to display a value and its description.
- * - It can also display a donut chart to show the value and its total.
- * - 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|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.
- * @param {boolean} loading - Whether the value is loading or not.
- * @param {boolean} inline - Boolean to control whether the KPI is displayed inline or not.
- * @returns {ReactElement} 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: 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([
     "inline-flex",
     "items-center",
@@ -276,6 +188,5 @@ const cvaChartRoot = cssClassVarianceUtilities.cvaMerge([
 ]);
 
 exports.Chart = Chart;
-exports.Kpi = Kpi;
 exports.LegendItem = LegendItem;
 exports.PieChart = PieChart;

package/index.esm.js

@@ -1,9 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { Spinner, Text, SkeletonLines, useHover } from '@trackunit/react-components';
+import { Spinner, Text, useHover } from '@trackunit/react-components';
 import EChart from 'echarts-for-react';
 import { useRef, useMemo, useEffect } from 'react';
-import { DEFAULT_CHART_COLORS } from '@trackunit/ui-design-tokens';
 
 /**
  * The Chart component is a wrapper component for ECharts.
@@ -64,93 +63,6 @@ const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartR
 const cvaChartContainer = cvaMerge(["grid", "gap-1", "grid-rows-1", "grid-cols-1", "h-full", "w-full", "items-center"]);
 const cvaChartSpinnerContainer = cvaMerge(["grid", "place-items-center", "overflow-y-auto"]);
 
-/**
-
- A donut chart component to display a KPI value and its total in a circular chart.
- *
- @param {string} countColor - The color to be used for the value portion in the chart.
- @param {string} totalCountColor - The color to be used for the total portion in the chart.
- @param {number} count - The count of the KPI to be displayed.
- @param {number} totalCount - The total count of the KPI to be displayed.
- @returns {ReactElement} - A donut chart displaying the KPI count and total count.
- */
-const KPIDonutChart = ({ dataTestId, loading, countColor, totalCountColor, count, totalCount = count, }) => {
-    return (jsx(Chart, { dataTestId: dataTestId, options: {
-            color: [countColor || DEFAULT_CHART_COLORS[0], totalCountColor || DEFAULT_CHART_COLORS[22]],
-            xAxis: [
-                {
-                    type: "category",
-                },
-            ],
-            yAxis: [
-                {
-                    type: "value",
-                },
-            ],
-            series: [
-                {
-                    labelLine: {
-                        show: false,
-                    },
-                    emphasis: { disabled: true },
-                    type: "pie",
-                    data: [
-                        {
-                            name: "Value",
-                            value: count,
-                        },
-                        {
-                            name: "Total",
-                            value: totalCount - count,
-                        },
-                    ],
-                    radius: ["40%", "70%"],
-                    center: ["50%", "50%"],
-                },
-            ],
-        }, showLoading: loading, style: { height: "36px", width: "36px" } }));
-};
-
-const cvaKpi = cvaMerge(["flex", "flex-row", "gap-1", "leading-none", "items-center"]);
-const cvaKpiCountContainer = cvaMerge(["flex", "gap-1", "items-baseline"]);
-const cvaKpiDescription = cvaMerge(["font-normal", "text-base"]);
-const cvaKpiCount = cvaMerge(["font-semibold", "text-xl"]);
-const cvaKpiSuffix = cvaMerge(["font-normal", "text-base"]);
-const cvaKpiContainer = cvaMerge(["flex", "flex-col", "items-baseline"], {
-    variants: {
-        inline: {
-            false: "",
-            true: ["flex-row", "gap-1", "justify-start"],
-        },
-        showChart: {
-            false: "",
-            true: ["gap-0 ", "items-center"],
-        },
-    },
-    defaultVariants: {
-        inline: false,
-        showChart: false,
-    },
-});
-
-/**
- * - A KPI component to display a value and its description.
- * - It can also display a donut chart to show the value and its total.
- * - 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|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.
- * @param {boolean} loading - Whether the value is loading or not.
- * @param {boolean} inline - Boolean to control whether the KPI is displayed inline or not.
- * @returns {ReactElement} 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: count ?? "-" }), suffix ? (jsx("span", { className: cvaKpiSuffix(), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] }), jsx("span", { className: cvaKpiDescription(), children: description })] }))] }));
-};
-
 const cvaLegendItem = cvaMerge([
     "inline-flex",
     "items-center",
@@ -273,4 +185,4 @@ const cvaChartRoot = cvaMerge([
     "h-full",
 ]);
 
-export { Chart, Kpi, LegendItem, PieChart };
+export { Chart, LegendItem, PieChart };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-chart-components",
-  "version": "1.3.40",
+  "version": "1.3.42",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -10,9 +10,8 @@
     "echarts": "5.6.0",
     "echarts-for-react": "^3.0.2",
     "react": "19.0.0",
-    "@trackunit/css-class-variance-utilities": "1.3.36",
-    "@trackunit/react-components": "1.4.40",
-    "@trackunit/ui-design-tokens": "1.3.36"
+    "@trackunit/css-class-variance-utilities": "1.3.38",
+    "@trackunit/react-components": "1.4.42"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/index.d.ts

@@ -1,4 +1,3 @@
 export * from "./Chart";
-export * from "./KPI";
 export * from "./LegendItem";
 export * from "./PieChart";

package/src/KPI/KPIDonutChart.d.ts

@@ -1,48 +0,0 @@
-interface DonutChartProps {
-    /**
-     * The color to be used for the count portion in the chart.
-     */
-    countColor?: string;
-    /**
-     * The color to be used for the total count portion in the chart.
-     */
-    totalCountColor?: string;
-    /**
-     * The count to be displayed in the KPI.
-     *
-     * @example
-     * <Kpi count={29000} />
-     */
-    count: number;
-    /**
-     * Total count of the Kpi.
-     * This is useful when you want to display a donut chart.
-     * The donut chart will be divided into two parts, the count and the total count.
-     *
-     * @example
-     * <Kpi totalCount={29000} />
-     */
-    totalCount?: number;
-    /**
-     * Whether the value is loading or not.
-     *
-     *  @default false
-     */
-    loading?: boolean;
-    /**
-     * The data-testid attribute to be used for testing.
-     */
-    dataTestId?: string;
-}
-/**
-
- A donut chart component to display a KPI value and its total in a circular chart.
- *
- @param {string} countColor - The color to be used for the value portion in the chart.
- @param {string} totalCountColor - The color to be used for the total portion in the chart.
- @param {number} count - The count of the KPI to be displayed.
- @param {number} totalCount - The total count of the KPI to be displayed.
- @returns {ReactElement} - A donut chart displaying the KPI count and total count.
- */
-export declare const KPIDonutChart: ({ dataTestId, loading, countColor, totalCountColor, count, totalCount, }: DonutChartProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/KPI/Kpi.d.ts

@@ -1,74 +0,0 @@
-import { CommonProps } from "@trackunit/react-components";
-export interface KpiProps extends CommonProps {
-    /**
-     * The count to be displayed in the KPI.
-     *
-     * @example
-     * <Kpi count={29000} />
-     * <Kpi count="29,000" />
-     */
-    count: number | string | null;
-    /**
-     * Total count of the Kpi.
-     * This is useful when you want to display a donut chart.
-     * The donut chart will be divided into two parts, the count and the total count.
-     *
-     * @example
-     * <Kpi count={15000} totalCount={29000} />
-     */
-    totalCount?: number;
-    /**
-     * Description of the Kpi.
-     *
-     * @example <Kpi description="Total Assets" />
-     */
-    description?: string;
-    /**
-     * Boolean to control the visibility of the chart.
-     */
-    showChart?: boolean;
-    /**
-     * A suffix that gets added to the end of the count.
-     * This is useful when you want to display a percentage, unit, etc.
-     *
-     * @example <Kpi value={50} suffix="%" /> will display 50%.
-     * <Kpi value={50} suffix="units" /> will display 50 units.
-     */
-    suffix?: string;
-    /**
-     * The color to be used for the count portion in the chart.
-     */
-    countColor?: string;
-    /**
-     * The color to be used for the total count portion in the chart.
-     */
-    totalCountColor?: string;
-    /**
-     * Boolean to control whether the KPI is displayed inline or not.
-     *
-     * @default false
-     */
-    inline?: boolean;
-    /**
-     * Whether the value is loading or not.
-     * When set to true, a skeleton will be displayed.
-     *
-     * @default false
-     */
-    loading?: boolean;
-}
-/**
- * - A KPI component to display a value and its description.
- * - It can also display a donut chart to show the value and its total.
- * - 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|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.
- * @param {boolean} loading - Whether the value is loading or not.
- * @param {boolean} inline - Boolean to control whether the KPI is displayed inline or not.
- * @returns {ReactElement} Kpi component
- */
-export declare const Kpi: ({ className, dataTestId, showChart, count, description, totalCount, countColor, totalCountColor, suffix, inline, loading, }: KpiProps) => import("react/jsx-runtime").JSX.Element;

package/src/KPI/Kpi.variants.d.ts

@@ -1,9 +0,0 @@
-export declare const cvaKpi: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaKpiCountContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaKpiDescription: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaKpiCount: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaKpiSuffix: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaKpiContainer: (props?: ({
-    inline?: boolean | null | undefined;
-    showChart?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/KPI/index.d.ts

@@ -1 +0,0 @@
-export * from "./Kpi";