@trackunit/react-chart-components 1.3.86 → 1.3.88

package/src/{PieChart/PieChart.d.ts → DonutChart/DonutChart.d.ts}

@@ -17,7 +17,7 @@ export interface ChartData<TProps extends object = object> {
     /**
      * The color to use in the chart and legends for this item
      */
-    color: string;
+    color?: string;
     /**
      * If selected, it'll be highlighted
      */
@@ -27,7 +27,7 @@ export interface ChartData<TProps extends object = object> {
      */
     original?: TProps;
 }
-export interface PieChartProps<TProps extends object> extends CommonProps {
+export interface DonutChartProps<TProps extends object> extends CommonProps {
     /**
      * Array of data points to show
      */
@@ -44,12 +44,30 @@ export interface PieChartProps<TProps extends object> extends CommonProps {
      * When compact, the chart is smaller and legends are hidden.
      */
     size?: Size;
+    /**
+     * The position of the legend. Defaults to "Right"
+     */
+    legendPosition?: "Right" | "Bottom";
+    /**
+     * Maximum number of data points to show in the chart.
+     * The remaining will be grouped into a catogory called "others".
+     *
+     * @default 6
+     */
+    maxDataPoints?: number;
+    /**
+     * Show the "others" category in the chart, if it's available.
+     * Setting this to false, will not hide it in the legend.
+     *
+     * @default true
+     */
+    showOthers?: boolean;
 }
 /**
- * Create a PieChart with legends based on our current Chart component
+ * Create a DonutChart with legends based on our current Chart component
  *
- * @param {PieChartProps} props - The props for the Chart component
+ * @param {DonutChartProps} props - The props for the Chart component
  * @returns {ReactElement} Chart component
  */
-export declare const PieChart: <TProps extends object>({ data, size, loading, onClick, className, dataTestId, }: PieChartProps<TProps>) => ReactElement;
+export declare const DonutChart: <TProps extends object>({ data, size, loading, onClick, className, dataTestId, legendPosition, maxDataPoints, showOthers, }: DonutChartProps<TProps>) => ReactElement;
 export {};

package/src/EChart/EChart.d.ts

@@ -0,0 +1,43 @@
+import { CommonProps } from "@trackunit/react-components";
+import type { ECElementEvent, ECharts, EChartsOption } from "echarts";
+import { CSSProperties, ReactElement } from "react";
+/**
+ * https://echarts.apache.org/en/api.html#events
+ */
+export type EventName = "click" | "dblclick" | "mousewheel" | "mouseout" | "mouseover" | "mouseup" | "mousedown" | "mousemove" | "contextmenu" | "drag" | "dragstart" | "dragend" | "dragenter" | "dragleave" | "dragover" | "drop" | "brush" | "brushselected" | "brushend" | "globalout" | "datarangeselected" | "legendselectchanged" | "datazoom";
+export interface EChartProps extends CommonProps {
+    /**
+     * Option values for EChart.
+     */
+    option: EChartsOption;
+    /**
+     * CSS styles for the chart.
+     */
+    style?: CSSProperties;
+    /**
+     * Called when the chart instance is ready.
+     */
+    onChartReady?: (chart: ECharts) => void;
+    /**
+     * onClick event handler.
+     */
+    onClick?: (event: ECElementEvent) => void;
+    /**
+     * Event handlers for the chart.
+     */
+    onEvents?: Partial<Record<EventName, (event: ECElementEvent) => void>>;
+    /**
+     * Whether to merge with previous option.
+     */
+    notMerge?: boolean;
+    /**
+     * Type of renderer used. Either "svg" or "canvas".
+     * Default is "canvas" for better performance.
+     * Some components (like UtilizationMultiDayChart) require "svg" for specific rendering needs.
+     */
+    renderer?: "svg" | "canvas";
+}
+/**
+ * A React wrapper for ECharts that handles initialization, events, and cleanup.
+ */
+export declare const EChart: ({ option, style, className, onChartReady, onClick, onEvents, notMerge, renderer, dataTestId, }: EChartProps) => ReactElement;

package/src/LegendItem/LegendItem.d.ts

@@ -1,8 +1,11 @@
 export interface LegendItemProps {
-    label?: string;
+    label: string;
+    count?: number;
     selected?: boolean;
     disabled?: boolean;
     onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
     color: string;
     className?: string;
     dataTestId?: string;
@@ -13,4 +16,4 @@ export interface LegendItemProps {
  * @param {LegendItem} props - The props for the LegendItem component
  * @returns {ReactElement} LegendItem component
  */
-export declare const LegendItem: ({ className, label, disabled, selected, onClick, color, dataTestId }: LegendItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LegendItem: ({ className, count, label, disabled, selected, onClick, color, dataTestId, onMouseEnter, onMouseLeave, }: LegendItemProps) => import("react/jsx-runtime").JSX.Element;

package/src/index.d.ts

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

package/src/utils/useChartColor.d.ts

@@ -0,0 +1,11 @@
+import { ChartStatus } from "@trackunit/ui-design-tokens";
+/**
+ * Re-ordered chart colors to ensure that adjacent colors are visually different.
+ *
+ * @returns {string[]} The reordered chart colors.
+ */
+export declare const useChartColor: () => {
+    chartColor: (index: number) => string;
+    chartColorArray: (total: number) => string[];
+    chartStatusColor: (status: ChartStatus) => string;
+};

package/src/utils/useLimitDataSet.d.ts

@@ -0,0 +1,17 @@
+import { ChartData } from "../DonutChart/DonutChart";
+type LimitDataSetReturn<TProps extends object> = {
+    limitedData: ChartData<TProps & {
+        defaultOther?: boolean;
+    }>[];
+    limitedDataWithoutOthers: ChartData<TProps>[];
+};
+/**
+ * Limits the data set to the given limit.
+ * If the data set is larger than the limit, the data set is limited to the limit and the rest of the data is added to the "Others" group.
+ *
+ * @param data - The data set to limit.
+ * @param limit - The limit to apply to the data set.
+ * @returns {object} The limited data set with and without the "others" category.
+ */
+export declare const useLimitDataSet: <TProps extends object>(data: ChartData<TProps>[], limit: number) => LimitDataSetReturn<TProps>;
+export {};

package/src/Chart/index.d.ts

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

package/src/LegendItem/index.d.ts

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

package/src/PieChart/index.d.ts

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