@trackunit/react-chart-components 0.0.59 → 0.0.62

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@trackunit/react-chart-components",
-  "version": "0.0.59",
+  "version": "0.0.62",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=16.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "0.1.116",
-    "@trackunit/tailwind-styled-components": "0.0.57",
-    "@trackunit/ui-design-tokens": "0.0.70",
+    "@trackunit/react-components": "0.1.119",
+    "@trackunit/tailwind-styled-components": "0.0.58",
+    "@trackunit/ui-design-tokens": "0.0.72",
     "echarts": "5.4.0",
     "echarts-for-react": "3.0.2",
     "react": "18.2.0"

package/src/Chart/Chart.d.ts

@@ -1,81 +1,81 @@
-import { CommonProps } from "@trackunit/react-components";
-import { EChartsType } from "echarts";
-import * as React from "react";
-export interface IOptionsType {
-    [key: string]: any;
-}
-export interface ChartProps extends CommonProps {
-    /**
-     * Option values for EChart.
-     */
-    options: IOptionsType;
-    /**
-     * Whether or not to low the preloader.
-     */
-    showLoading?: boolean;
-    /**
-     * onClick event.
-     */
-    onClick?: (event: any) => void;
-    /**
-     * onDataZoom event.
-     */
-    onDataZoom?: (event: any) => void;
-    /**
-     * onBrush event.
-     */
-    onBrush?: (event: any) => void;
-    /**
-     * Event fired when brush is selected.
-     */
-    onBrushSelected?: (event: any) => void;
-    /**
-     * Event fired when mouse leaves the chart.
-     */
-    mouseLeaveChart?: () => void;
-    /**
-     * Event fired when mouse is moving over the chart.
-     */
-    mouseMoveChart?: (event: any, chart: EChartsType | undefined) => void;
-    /**
-     * CSS styles for the chart.
-     */
-    style?: Record<string, string | number>;
-    /**
-     * To denote of chart is ready or not.
-     */
-    onChartReady?: (chart: any) => void;
-    /**
-     * Whether to merge with previous option.
-     */
-    merge?: boolean;
-    /**
-     * Values for the loading component.
-     */
-    loadingOption?: {
-        text: string;
-    };
-    /**
-     * Time-zone label.
-     */
-    timezoneLabel?: React.ReactNode;
-    /**
-     * Type of rendered used. Either "svg" or "canvas".
-     */
-    renderer?: "svg" | "canvas";
-    /**
-     * Value used to find element by `data-testid` attribute.
-     */
-    dataTestId?: string;
-}
-/**
- * The Chart component is a wrapper component for ECharts.
- *
- * Handles events and click functionality.
- *
- * For more information see the [eCharts documentation](https://github.com/hustcc/echarts-for-react).
- *
- * @param {ChartProps} props - The props for the Chart component
- * @returns {JSX.Element} Chart component
- */
-export declare const Chart: ({ options, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, merge, loadingOption, timezoneLabel, renderer, dataTestId, }: ChartProps) => JSX.Element;
+import { CommonProps } from "@trackunit/react-components";
+import { EChartsType } from "echarts";
+import * as React from "react";
+export interface IOptionsType {
+    [key: string]: any;
+}
+export interface ChartProps extends CommonProps {
+    /**
+     * Option values for EChart.
+     */
+    options: IOptionsType;
+    /**
+     * Whether or not to low the preloader.
+     */
+    showLoading?: boolean;
+    /**
+     * onClick event.
+     */
+    onClick?: (event: any) => void;
+    /**
+     * onDataZoom event.
+     */
+    onDataZoom?: (event: any) => void;
+    /**
+     * onBrush event.
+     */
+    onBrush?: (event: any) => void;
+    /**
+     * Event fired when brush is selected.
+     */
+    onBrushSelected?: (event: any) => void;
+    /**
+     * Event fired when mouse leaves the chart.
+     */
+    mouseLeaveChart?: () => void;
+    /**
+     * Event fired when mouse is moving over the chart.
+     */
+    mouseMoveChart?: (event: any, chart: EChartsType | undefined) => void;
+    /**
+     * CSS styles for the chart.
+     */
+    style?: Record<string, string | number>;
+    /**
+     * To denote of chart is ready or not.
+     */
+    onChartReady?: (chart: any) => void;
+    /**
+     * Whether to merge with previous option.
+     */
+    merge?: boolean;
+    /**
+     * Values for the loading component.
+     */
+    loadingOption?: {
+        text: string;
+    };
+    /**
+     * Time-zone label.
+     */
+    timezoneLabel?: React.ReactNode;
+    /**
+     * Type of rendered used. Either "svg" or "canvas".
+     */
+    renderer?: "svg" | "canvas";
+    /**
+     * Value used to find element by `data-testid` attribute.
+     */
+    dataTestId?: string;
+}
+/**
+ * The Chart component is a wrapper component for ECharts.
+ *
+ * Handles events and click functionality.
+ *
+ * For more information see the [eCharts documentation](https://github.com/hustcc/echarts-for-react).
+ *
+ * @param {ChartProps} props - The props for the Chart component
+ * @returns {JSX.Element} Chart component
+ */
+export declare const Chart: ({ options, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, merge, loadingOption, timezoneLabel, renderer, dataTestId, }: ChartProps) => JSX.Element;

package/src/Chart/Chart.stories.d.ts

@@ -1,8 +1,6 @@
-import { ComponentMeta, Story } from "@storybook/react";
-import { ChartProps } from "./Chart";
-import "./Chart.css";
-declare const _default: ComponentMeta<({ options, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, merge, loadingOption, timezoneLabel, renderer, dataTestId, }: ChartProps) => JSX.Element>;
-export default _default;
-export declare const Default: Story<ChartProps>;
-export declare const Usage: () => JSX.Element;
-export declare const Examples: () => JSX.Element;
+import { Story } from "@storybook/react";
+import { ChartProps } from "./Chart";
+import "./Chart.css";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ChartProps>;
+export default _default;
+export declare const Default: Story<ChartProps>;

package/src/Chart/index.d.ts

@@ -1 +1 @@
-export * from "./Chart";
+export * from "./Chart";

package/src/KPI/KPIDonutChart.d.ts

@@ -1,49 +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;
-}
-/**
+/// <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 {};
+    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

@@ -1,74 +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 | string;
-    /**
-     * 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;
+/// <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 | string;
+    /**
+     * 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

@@ -1,11 +1,9 @@
-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;
+import { Story } from "@storybook/react";
+import { KpiProps } from "./Kpi";
+import "./Kpi.css";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, KpiProps>;
+export default _default;
+export declare const Default: Story<KpiProps>;
+export declare const VariantSingleValue: () => JSX.Element;
+export declare const VariantInline: () => JSX.Element;
+export declare const VariantChart: () => JSX.Element;

package/src/KPI/index.d.ts

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

package/src/LegendItem/LegendItem.d.ts

@@ -1,17 +1,17 @@
-/// <reference types="react" />
-export interface ILegendItem {
-    label?: string;
-    selected?: boolean;
-    disabled?: boolean;
-    onClick?: () => void;
-    color: string;
-    className?: string;
-    dataTestId?: string;
-}
-/**
- * The LegendItem component is used to show form legends.
- *
- * @param {ILegendItem} props - The props for the LegendItem component
- * @returns {JSX.Element} LegendItem component
- */
-export declare const LegendItem: ({ className, label, disabled, selected, onClick, color, dataTestId }: ILegendItem) => JSX.Element;
+/// <reference types="react" />
+export interface ILegendItem {
+    label?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    color: string;
+    className?: string;
+    dataTestId?: string;
+}
+/**
+ * The LegendItem component is used to show form legends.
+ *
+ * @param {ILegendItem} props - The props for the LegendItem component
+ * @returns {JSX.Element} LegendItem component
+ */
+export declare const LegendItem: ({ className, label, disabled, selected, onClick, color, dataTestId }: ILegendItem) => JSX.Element;

package/src/LegendItem/LegendItem.stories.d.ts

@@ -1,6 +1,5 @@
-import { ComponentMeta, Story } from "@storybook/react";
-import { ILegendItem } from "./LegendItem";
-declare const _default: ComponentMeta<({ className, label, disabled, selected, onClick, color, dataTestId }: ILegendItem) => JSX.Element>;
-export default _default;
-export declare const Default: Story<ILegendItem>;
-export declare const Usage: () => JSX.Element;
+import { Story } from "@storybook/react";
+import { ILegendItem } from "./LegendItem";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ILegendItem>;
+export default _default;
+export declare const Default: Story<ILegendItem>;

package/src/LegendItem/index.d.ts

@@ -1 +1 @@
-export * from "./LegendItem";
+export * from "./LegendItem";

package/src/PieChart/PieChart.d.ts

@@ -1,55 +1,55 @@
-/// <reference types="react" />
-import { CommonProps } from "@trackunit/react-components";
-type Size = "compact" | "full";
-export interface ChartData<T extends object = object> {
-    /**
-     * Unique ID for this entry. Not visible for the user
-     */
-    id: string;
-    /**
-     * The text to show for to the user
-     */
-    name: string;
-    /**
-     * Number of elements with wrapped under this item
-     */
-    count?: number;
-    /**
-     * The color to use in the chart and legends for this item
-     */
-    color: string;
-    /**
-     * If selected, it'll be highlighted
-     */
-    selected?: boolean;
-    /**
-     * Supply the original object that this chart data item was constructed from. It'll be available on callbacks
-     */
-    original?: T;
-}
-export interface PieChartProps<T extends object> extends CommonProps {
-    /**
-     * Array of data points to show
-     */
-    data: ChartData<T>[] | undefined;
-    /**
-     * onClick handler which includes the data object clicked on
-     */
-    onClick?: (data: ChartData<T>) => void;
-    /**
-     * Show chart as loading
-     */
-    loading?: boolean;
-    /**
-     * When compact, the chart is smaller and legends are hidden.
-     */
-    size?: Size;
-}
-/**
- * Create a PieChart with legends based on our current Chart component
- *
- * @param {PieChartProps} props - The props for the Chart component
- * @returns {JSX.Element} Chart component
- */
-export declare const PieChart: <T extends object>({ data, size, loading, onClick, className, dataTestId, }: PieChartProps<T>) => JSX.Element;
-export {};
+/// <reference types="react" />
+import { CommonProps } from "@trackunit/react-components";
+type Size = "compact" | "full";
+export interface ChartData<T extends object = object> {
+    /**
+     * Unique ID for this entry. Not visible for the user
+     */
+    id: string;
+    /**
+     * The text to show for to the user
+     */
+    name: string;
+    /**
+     * Number of elements with wrapped under this item
+     */
+    count?: number;
+    /**
+     * The color to use in the chart and legends for this item
+     */
+    color: string;
+    /**
+     * If selected, it'll be highlighted
+     */
+    selected?: boolean;
+    /**
+     * Supply the original object that this chart data item was constructed from. It'll be available on callbacks
+     */
+    original?: T;
+}
+export interface PieChartProps<T extends object> extends CommonProps {
+    /**
+     * Array of data points to show
+     */
+    data: ChartData<T>[] | undefined;
+    /**
+     * onClick handler which includes the data object clicked on
+     */
+    onClick?: (data: ChartData<T>) => void;
+    /**
+     * Show chart as loading
+     */
+    loading?: boolean;
+    /**
+     * When compact, the chart is smaller and legends are hidden.
+     */
+    size?: Size;
+}
+/**
+ * Create a PieChart with legends based on our current Chart component
+ *
+ * @param {PieChartProps} props - The props for the Chart component
+ * @returns {JSX.Element} Chart component
+ */
+export declare const PieChart: <T extends object>({ data, size, loading, onClick, className, dataTestId, }: PieChartProps<T>) => JSX.Element;
+export {};

package/src/PieChart/PieChart.stories.d.ts

@@ -1,10 +1,7 @@
-import { ComponentMeta, Story } from "@storybook/react";
-import { PieChartProps } from "./PieChart";
-declare const _default: ComponentMeta<(<T extends object>({ data, size, loading, onClick, className, dataTestId, }: PieChartProps<T>) => JSX.Element)>;
-export default _default;
-export declare const Default: Story<PieChartProps<object>>;
-export declare const HiddenCompactVariant: () => JSX.Element;
-export declare const HiddenFullVariant: () => JSX.Element;
-export declare const Usage: () => JSX.Element;
-export declare const Variants: () => JSX.Element;
-export declare const Examples: () => JSX.Element;
+import { Story } from "@storybook/react";
+import { PieChartProps } from "./PieChart";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, PieChartProps<object>>;
+export default _default;
+export declare const Default: Story<PieChartProps<object>>;
+export declare const CompactVariant: () => JSX.Element;
+export declare const FullVariant: () => JSX.Element;