@zentauri-ui/zentauri-components 1.8.1 → 1.8.3

package/src/charts/funnel/Funnel.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import {
+  Funnel,
+  FunnelChart as RechartsFunnelChart,
+  FunnelTrapezoidItem,
+  LabelList,
+  Legend,
+  Tooltip,
+  Trapezoid,
+} from "recharts";
+
+import { ChartFrame } from "../shared/chart-frame";
+import { resolveColor } from "../shared/colors";
+import type { FunnelChartProps } from "../shared/types";
+
+export function FunnelChart<
+  TDatum extends Record<string, number | string | null | undefined>,
+>({
+  appearance,
+  className,
+  colorKey = "color" as keyof TDatum & string,
+  containerStyle,
+  data,
+  dataKey,
+  density,
+  emptyState = null,
+  fill,
+  height = 320,
+  label = true,
+  nameKey,
+  showLegend = false,
+  showTooltip = true,
+  stroke = "#ffffff",
+  style,
+  tooltipColor = "#0f172a",
+  ...props
+}: FunnelChartProps<TDatum>) {
+  const hasData = data.length > 0;
+  const renderDefaultShape = (
+    shapeProps: FunnelTrapezoidItem & { index?: number },
+  ) => {
+    const payload = shapeProps.payload as TDatum | undefined;
+    const dataIndex =
+      typeof shapeProps.index === "number" && shapeProps.index >= 0
+        ? shapeProps.index
+        : payload
+          ? data.indexOf(payload)
+          : -1;
+    const datumColor = payload?.[colorKey];
+    const color = resolveColor(
+      typeof datumColor === "string"
+        ? datumColor
+        : typeof fill === "string"
+          ? fill
+          : undefined,
+      dataIndex >= 0 ? dataIndex : 0,
+    );
+
+    return <Trapezoid {...shapeProps} fill={color.fill} stroke={stroke} />;
+  };
+
+  return (
+    <ChartFrame
+      appearance={appearance}
+      className={className}
+      containerStyle={containerStyle}
+      density={density}
+      emptyState={emptyState}
+      hasData={hasData}
+      height={height}
+      style={style}
+      {...props}
+    >
+      <RechartsFunnelChart>
+        {showTooltip ? (
+          <Tooltip
+            contentStyle={{ color: tooltipColor }}
+            labelStyle={{ color: tooltipColor }}
+            itemStyle={{ color: tooltipColor }}
+          />
+        ) : null}
+        {showLegend ? <Legend /> : null}
+        <Funnel
+          data={data}
+          dataKey={String(dataKey)}
+          nameKey={String(nameKey)}
+          shape={renderDefaultShape}
+        >
+          {label ? (
+            <LabelList
+              dataKey={String(nameKey)}
+              position="right"
+              fill="currentColor"
+              stroke="none"
+              fontSize={12}
+            />
+          ) : null}
+        </Funnel>
+      </RechartsFunnelChart>
+    </ChartFrame>
+  );
+}
+
+FunnelChart.displayName = "FunnelChart";

package/src/charts/funnel/index.ts

@@ -0,0 +1,14 @@
+"use client";
+
+export { FunnelChart } from "./Funnel";
+export type {
+  ChartColor,
+  ChartDatum,
+  ChartSharedStatic,
+  FunnelChartProps,
+} from "../shared/types";
+export {
+  chartColorValues,
+  chartPalette,
+  chartVariants,
+} from "../shared/variants";

package/src/charts/pie/Pie.tsx

@@ -4,11 +4,14 @@ import {
   Legend,
   Pie,
   PieLabelRenderProps,
+  PieSectorShapeProps,
   PieChart as RechartsPieChart,
+  Sector,
   Tooltip,
 } from "recharts";
 
 import { ChartFrame } from "../shared/chart-frame";
+import { resolveColor } from "../shared/colors";
 import type { PieChartProps } from "../shared/types";
 
 const RADIAN = Math.PI / 180;
@@ -51,8 +54,10 @@ export function PieChart<
   className,
   containerStyle,
   cornerRadius = 10,
+  center,
   data,
   dataKey,
+  colorKey = "color" as keyof TDatum & string,
   density,
   emptyState = null,
   height = 320,
@@ -73,6 +78,21 @@ export function PieChart<
   ...props
 }: PieChartProps<TDatum>) {
   const hasData = data.length > 0;
+  const renderDefaultShape = (props: PieSectorShapeProps, index: number) => {
+    const payload = props.payload as TDatum | undefined;
+    const shapeDatum = props as unknown as TDatum;
+    const datumColor = payload?.[colorKey] ?? shapeDatum[colorKey];
+    const color = resolveColor(
+      typeof datumColor === "string"
+        ? datumColor
+        : typeof fill === "string"
+          ? fill
+          : undefined,
+      typeof index === "number" ? index : props.index,
+    );
+
+    return <Sector {...props} fill={color.fill} stroke={stroke} />;
+  };
 
   return (
     <ChartFrame
@@ -83,6 +103,13 @@ export function PieChart<
       emptyState={emptyState}
       hasData={hasData}
       height={height}
+      overlay={
+        center ? (
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-center text-center">
+            {center}
+          </div>
+        ) : null
+      }
       style={style}
       {...props}
     >
@@ -112,7 +139,7 @@ export function PieChart<
           }
           stroke={stroke}
           fill={fill}
-          shape={shape}
+          shape={shape ?? renderDefaultShape}
         />
       </RechartsPieChart>
     </ChartFrame>

package/src/charts/radar/Radar.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import {
+  Legend,
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart as RechartsRadarChart,
+  Tooltip,
+} from "recharts";
+
+import { ChartFrame } from "../shared/chart-frame";
+import { getSeriesFill, resolveColor } from "../shared/colors";
+import type { RadarChartProps } from "../shared/types";
+
+export function RadarChart<
+  TDatum extends Record<string, number | string | null | undefined>,
+>({
+  appearance,
+  className,
+  containerStyle,
+  data,
+  density,
+  emptyState = null,
+  height = 320,
+  series,
+  showGrid = true,
+  showLegend = false,
+  showTooltip = true,
+  tooltipColor = "#0f172a",
+  style,
+  xKey,
+  ...props
+}: RadarChartProps<TDatum>) {
+  const hasData = data.length > 0 && series.length > 0;
+
+  return (
+    <ChartFrame
+      appearance={appearance}
+      className={className}
+      containerStyle={containerStyle}
+      density={density}
+      emptyState={emptyState}
+      hasData={hasData}
+      height={height}
+      style={style}
+      {...props}
+    >
+      <RechartsRadarChart data={data}>
+        {showGrid ? <PolarGrid stroke="currentColor" opacity={0.18} /> : null}
+        <PolarAngleAxis
+          dataKey={String(xKey)}
+          tick={{ fill: "currentColor", fontSize: 12 }}
+        />
+        <PolarRadiusAxis tick={{ fill: "currentColor", fontSize: 11 }} />
+        {showTooltip ? (
+          <Tooltip
+            contentStyle={{ color: tooltipColor }}
+            labelStyle={{ color: tooltipColor }}
+            itemStyle={{ color: tooltipColor }}
+          />
+        ) : null}
+        {showLegend ? <Legend /> : null}
+        {series.map((item, index) => {
+          const color = resolveColor(item.color, index);
+          const fill = getSeriesFill(item, index, 0.24);
+          return (
+            <Radar
+              key={item.dataKey}
+              dataKey={item.dataKey}
+              name={item.name}
+              stroke={item.stroke ?? color.stroke}
+              fill={fill ?? color.fill}
+              fillOpacity={0.72}
+            />
+          );
+        })}
+      </RechartsRadarChart>
+    </ChartFrame>
+  );
+}
+
+RadarChart.displayName = "RadarChart";

package/src/charts/radar/index.ts

@@ -0,0 +1,16 @@
+"use client";
+
+export { RadarChart } from "./Radar";
+export type {
+  ChartColor,
+  ChartDatum,
+  ChartMargin,
+  ChartSeries,
+  ChartSharedStatic,
+  RadarChartProps,
+} from "../shared/types";
+export {
+  chartColorValues,
+  chartPalette,
+  chartVariants,
+} from "../shared/variants";

package/src/charts/scatter/Scatter.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import {
+  Scatter,
+  ScatterChart as RechartsScatterChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import {
+  ChartDecorators,
+  ChartFrame,
+  defaultChartMargin,
+} from "../shared/chart-frame";
+import { resolveColor } from "../shared/colors";
+import type { ScatterChartProps } from "../shared/types";
+
+export function ScatterChart<
+  TDatum extends Record<string, number | string | null | undefined>,
+>({
+  appearance,
+  className,
+  containerStyle,
+  data,
+  density,
+  emptyState = null,
+  height = 320,
+  margin = defaultChartMargin,
+  series,
+  showGrid = true,
+  showLegend = false,
+  showTooltip = true,
+  tooltipColor = "#0f172a",
+  style,
+  syncId,
+  xKey,
+  ...props
+}: ScatterChartProps<TDatum>) {
+  const hasData = data.length > 0 && series.length > 0;
+  const xAxisKey = String(xKey);
+  const isNumericX = typeof data[0]?.[xAxisKey] === "number";
+
+  return (
+    <ChartFrame
+      appearance={appearance}
+      className={className}
+      containerStyle={containerStyle}
+      density={density}
+      emptyState={emptyState}
+      hasData={hasData}
+      height={height}
+      style={style}
+      {...props}
+    >
+      <RechartsScatterChart data={data} margin={margin} syncId={syncId}>
+        <ChartDecorators
+          axis={
+            <>
+              <XAxis
+                dataKey={xAxisKey}
+                type={isNumericX ? "number" : "category"}
+                minTickGap={24}
+                tickLine={false}
+                tickMargin={10}
+                axisLine={false}
+                fontSize={12}
+              />
+              <YAxis
+                dataKey="__chartY"
+                type="number"
+                width={40}
+                tickLine={false}
+                tickMargin={8}
+                axisLine={false}
+                fontSize={12}
+              />
+            </>
+          }
+          showGrid={showGrid}
+          showLegend={showLegend}
+          showTooltip={showTooltip}
+          tooltipColor={tooltipColor}
+        />
+        {series.map((item, index) => {
+          const color = resolveColor(item.color, index);
+          return (
+            <Scatter
+              key={item.dataKey}
+              data={data.map((entry) => ({
+                ...entry,
+                __chartY: entry[item.dataKey],
+              }))}
+              name={item.name}
+              fill={item.fill ?? color.stroke}
+              line={item.stroke ? { stroke: item.stroke } : false}
+            />
+          );
+        })}
+      </RechartsScatterChart>
+    </ChartFrame>
+  );
+}
+
+ScatterChart.displayName = "ScatterChart";

package/src/charts/scatter/index.ts

@@ -0,0 +1,16 @@
+"use client";
+
+export { ScatterChart } from "./Scatter";
+export type {
+  ChartColor,
+  ChartDatum,
+  ChartMargin,
+  ChartSeries,
+  ChartSharedStatic,
+  ScatterChartProps,
+} from "../shared/types";
+export {
+  chartColorValues,
+  chartPalette,
+  chartVariants,
+} from "../shared/variants";

package/src/charts/shared/chart-frame.tsx

@@ -39,6 +39,7 @@ type ChartFrameProps = HTMLAttributes<HTMLDivElement> & {
   emptyState?: ReactNode;
   hasData: boolean;
   height: number;
+  overlay?: ReactNode;
   style?: CSSProperties;
   children: ReactNode;
 };
@@ -54,6 +55,7 @@ export function ChartFrame({
   emptyState = null,
   hasData,
   height,
+  overlay,
   style,
   ...props
 }: ChartFrameProps) {
@@ -63,8 +65,7 @@ export function ChartFrame({
     "--chart-height": `${height}px`,
     ...style,
   } as CSSProperties;
-  const canRenderChart =
-    (size?.width ?? 0) > 0 && (size?.height ?? 0) > 0;
+  const canRenderChart = (size?.width ?? 0) > 0 && (size?.height ?? 0) > 0;
 
   if (!hasData) {
     return (
@@ -99,6 +100,7 @@ export function ChartFrame({
           </ResponsiveContainer>
         ) : null}
       </div>
+      {overlay}
     </div>
   );
 }

package/src/charts/shared/types.ts

@@ -2,9 +2,18 @@ import type { VariantProps } from "class-variance-authority";
 import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
 
 import type { chartPalette, chartVariants } from "./variants";
-import { PieProps } from "recharts";
+import type { PieProps } from "recharts";
 
-export type ChartType = "area" | "bar" | "bubble" | "line" | "pie";
+export type ChartType =
+  | "area"
+  | "bar"
+  | "bubble"
+  | "funnel"
+  | "line"
+  | "pie"
+  | "radar"
+  | "scatter"
+  | "stacked-bar";
 
 export type ChartColor = keyof typeof chartPalette;
 
@@ -61,6 +70,17 @@ export type LineChartProps<TDatum extends ChartDatum = ChartDatum> =
 export type BubbleChartProps<TDatum extends ChartDatum = ChartDatum> =
   BaseChartProps<TDatum>;
 
+export type RadarChartProps<TDatum extends ChartDatum = ChartDatum> =
+  BaseChartProps<TDatum>;
+
+export type ScatterChartProps<TDatum extends ChartDatum = ChartDatum> =
+  BaseChartProps<TDatum>;
+
+export type StackedBarChartProps<TDatum extends ChartDatum = ChartDatum> = Omit<
+  BaseChartProps<TDatum>,
+  "stacked"
+>;
+
 export type PieChartProps<TDatum extends ChartDatum = ChartDatum> =
   ChartSharedStatic &
     Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
@@ -75,6 +95,8 @@ export type PieChartProps<TDatum extends ChartDatum = ChartDatum> =
       containerStyle?: CSSProperties;
       paddingAngle?: PieProps["paddingAngle"];
       cornerRadius?: PieProps["cornerRadius"];
+      center?: ReactNode;
+      colorKey?: keyof TDatum & string;
       label?: boolean;
       labelLine?: boolean;
       labelColor?: string;
@@ -84,3 +106,21 @@ export type PieChartProps<TDatum extends ChartDatum = ChartDatum> =
       outerRadius?: PieProps["outerRadius"];
       shape?: PieProps["shape"];
     };
+
+export type FunnelChartProps<TDatum extends ChartDatum = ChartDatum> =
+  ChartSharedStatic &
+    Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+      data: TDatum[];
+      dataKey: keyof TDatum & string;
+      nameKey: keyof TDatum & string;
+      height?: number;
+      showLegend?: boolean;
+      showTooltip?: boolean;
+      tooltipColor?: string;
+      emptyState?: ReactNode;
+      containerStyle?: CSSProperties;
+      colorKey?: keyof TDatum & string;
+      label?: boolean;
+      stroke?: string;
+      fill?: string;
+    };

package/src/charts/stacked-bar/StackedBar.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { BarChart } from "../bar/Bar";
+import type { StackedBarChartProps } from "../shared/types";
+
+export function StackedBarChart<
+  TDatum extends Record<string, number | string | null | undefined>,
+>(props: StackedBarChartProps<TDatum>) {
+  return <BarChart {...props} stacked />;
+}
+
+StackedBarChart.displayName = "StackedBarChart";

package/src/charts/stacked-bar/index.ts

@@ -0,0 +1,16 @@
+"use client";
+
+export { StackedBarChart } from "./StackedBar";
+export type {
+  ChartColor,
+  ChartDatum,
+  ChartMargin,
+  ChartSeries,
+  ChartSharedStatic,
+  StackedBarChartProps,
+} from "../shared/types";
+export {
+  chartColorValues,
+  chartPalette,
+  chartVariants,
+} from "../shared/variants";

package/src/hooks/index.ts

@@ -49,6 +49,18 @@ export {
   useSessionStorage,
   type UseSessionStorageResult,
 } from "./useSessionStorage";
+export {
+  useTableFilter,
+  type TableFilterPredicate,
+  type TableFilterState,
+  type UseTableFilterParams,
+  type UseTableFilterResult,
+} from "./useTableFilter";
+export {
+  useTableSort,
+  type UseTableSortParams,
+  type UseTableSortResult,
+} from "./useTableSort";
 export { useThrottledCallback } from "./useThrottledCallback";
 export { useToggle } from "./useToggle";
 export { useWindowSize, type WindowSize } from "./useWindowSize";

package/src/hooks/useTableFilter/index.ts

@@ -0,0 +1,7 @@
+export {
+  type TableFilterPredicate,
+  type TableFilterState,
+  type UseTableFilterParams,
+  type UseTableFilterResult,
+} from "./types";
+export { useTableFilter } from "./useTableFilter";

package/src/hooks/useTableFilter/types.ts

@@ -0,0 +1,28 @@
+export type TableFilterState<TKey extends string = string> = Partial<
+  Record<TKey, string>
+>;
+
+export type TableFilterPredicate<TData, TKey extends string = string> = (
+  row: TData,
+  filterValue: string,
+  filterKey: TKey,
+) => boolean;
+
+export type UseTableFilterParams<TData, TKey extends string = string> = {
+  data: readonly TData[];
+  filters?: TableFilterState<TKey>;
+  defaultFilters?: TableFilterState<TKey>;
+  onFiltersChange?: (filters: TableFilterState<TKey>) => void;
+  getColumnValue?: (row: TData, filterKey: TKey) => unknown;
+  filterPredicate?: TableFilterPredicate<TData, TKey>;
+};
+
+export type UseTableFilterResult<TData, TKey extends string = string> = {
+  filters: TableFilterState<TKey>;
+  filteredData: TData[];
+  hasActiveFilters: boolean;
+  setFilter: (filterKey: TKey, value: string) => void;
+  setFilters: (filters: TableFilterState<TKey>) => void;
+  clearFilter: (filterKey: TKey) => void;
+  clearFilters: () => void;
+};