@trackunit/react-chart-components 0.0.18 → 0.0.19

package/index.cjs

@@ -7,6 +7,7 @@ var reactComponents = require('@trackunit/react-components');
 var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
 var EChart = require('echarts-for-react');
 var React = require('react');
+var uiDesignTokens = require('@trackunit/ui-design-tokens');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -87,6 +88,81 @@ const ChartContainer = tailwindStyledComponents.tw.div `
   tu-chart-container
 `;
 
+/**
+ 
+    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 {JSX.Element} - 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, showLoading: loading, style: { height: "36px", width: "36px" }, 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: false,
+                    type: "pie",
+                    data: [
+                        {
+                            key: "Value",
+                            value: count,
+                        },
+                        {
+                            key: "Total",
+                            value: totalCount - count,
+                        },
+                    ],
+                    radius: ["40%", "70%"],
+                    center: ["50%", "50%"],
+                },
+            ],
+        } }));
+};
+
+/**
+ * - 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} 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 {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 })] })))] })));
+};
+const Root$1 = tailwindStyledComponents.tw.div `tu-kpi`;
+const CountContainer = tailwindStyledComponents.tw.span `tu-kpi__count-container`;
+const Description = tailwindStyledComponents.tw.span `tu-kpi__description`;
+const Count = tailwindStyledComponents.tw.span `tu-kpi__count`;
+const Suffix = tailwindStyledComponents.tw.span `tu-kpi__suffix`;
+const Container = tailwindStyledComponents.tw.div `
+  tu-kpi__container 
+  ${p => p.$inline && `tu-kpi__container--inline`}
+  ${p => !p.$showChart && `tu-kpi__container--without-chart`}
+`;
+
 /**
  * The LegendItem component is used to show form legends.
  *
@@ -185,5 +261,6 @@ const ChartRoot = tailwindStyledComponents.tw.div `
 `;
 
 exports.Chart = Chart;
+exports.Kpi = Kpi;
 exports.LegendItem = LegendItem;
 exports.PieChart = PieChart;

package/index.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Spinner, Text } from '@trackunit/react-components';
+import { Spinner, Text, SkeletonLines } from '@trackunit/react-components';
 import { tw, tws } from '@trackunit/tailwind-styled-components';
 import EChart from 'echarts-for-react';
 import * as React from 'react';
+import { DEFAULT_CHART_COLORS } from '@trackunit/ui-design-tokens';
 
 /**
  * The Chart component is a wrapper component for ECharts.
@@ -60,6 +61,81 @@ const ChartContainer = tw.div `
   tu-chart-container
 `;
 
+/**
+ 
+    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 {JSX.Element} - A donut chart displaying the KPI count and total count.
+ */
+const KPIDonutChart = ({ dataTestId, loading, countColor, totalCountColor, count, totalCount = count, }) => {
+    return (jsx(Chart, { dataTestId: dataTestId, showLoading: loading, style: { height: "36px", width: "36px" }, options: {
+            color: [countColor || DEFAULT_CHART_COLORS[0], totalCountColor || DEFAULT_CHART_COLORS[22]],
+            xAxis: [
+                {
+                    type: "category",
+                },
+            ],
+            yAxis: [
+                {
+                    type: "value",
+                },
+            ],
+            series: [
+                {
+                    labelLine: {
+                        show: false,
+                    },
+                    emphasis: false,
+                    type: "pie",
+                    data: [
+                        {
+                            key: "Value",
+                            value: count,
+                        },
+                        {
+                            key: "Total",
+                            value: totalCount - count,
+                        },
+                    ],
+                    radius: ["40%", "70%"],
+                    center: ["50%", "50%"],
+                },
+            ],
+        } }));
+};
+
+/**
+ * - 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} 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 {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 })] })))] })));
+};
+const Root$1 = tw.div `tu-kpi`;
+const CountContainer = tw.span `tu-kpi__count-container`;
+const Description = tw.span `tu-kpi__description`;
+const Count = tw.span `tu-kpi__count`;
+const Suffix = tw.span `tu-kpi__suffix`;
+const Container = tw.div `
+  tu-kpi__container 
+  ${p => p.$inline && `tu-kpi__container--inline`}
+  ${p => !p.$showChart && `tu-kpi__container--without-chart`}
+`;
+
 /**
  * The LegendItem component is used to show form legends.
  *
@@ -157,4 +233,4 @@ const ChartRoot = tw.div `
   h-full
 `;
 
-export { Chart, LegendItem, PieChart };
+export { Chart, Kpi, LegendItem, PieChart };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@trackunit/react-chart-components",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/react-components": "0.1.77",
-    "@trackunit/ui-design-tokens": "0.0.64",
+    "@trackunit/react-components": "0.1.78",
+    "@trackunit/ui-design-tokens": "0.0.65",
     "@trackunit/tailwind-styled-components": "0.0.55",
     "echarts": "5.4.0",
     "echarts-for-react": "3.0.2",

package/src/KPI/KPIDonutChart.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="react" />
+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 {JSX.Element} - A donut chart displaying the KPI count and total count.
+ */
+export declare const KPIDonutChart: ({ dataTestId, loading, countColor, totalCountColor, count, totalCount, }: DonutChartProps) => JSX.Element;
+export {};

package/src/KPI/Kpi.d.ts

@@ -0,0 +1,74 @@
+/// <reference types="react" />
+import { CommonProps } from "@trackunit/react-components";
+export interface KpiProps extends CommonProps {
+    /**
+     * 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 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} 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 {JSX.Element} Kpi component
+ */
+export declare const Kpi: ({ className, dataTestId, showChart, count, description, totalCount, countColor, totalCountColor, suffix, inline, loading, }: KpiProps) => JSX.Element;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { KpiProps } from "./Kpi";
+import "./Kpi.css";
+declare const _default: ComponentMeta<({ className, dataTestId, showChart, count, description, totalCount, countColor, totalCountColor, suffix, inline, loading, }: KpiProps) => JSX.Element>;
+export default _default;
+export declare const Default: Story<KpiProps>;
+export declare const HiddenVariantSingleValue: () => JSX.Element;
+export declare const HiddenVariantInline: () => JSX.Element;
+export declare const HiddenVariantChart: () => JSX.Element;
+export declare const Usage: () => JSX.Element;
+export declare const Variants: () => JSX.Element;

package/src/KPI/index.d.ts

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

package/src/index.d.ts

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