@zentauri-ui/zentauri-components 1.4.6 → 1.4.7

package/src/charts/area/Area.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { Area, AreaChart as RechartsAreaChart, XAxis, YAxis } from "recharts";
+
+import {
+  ChartDecorators,
+  ChartFrame,
+  defaultChartMargin,
+} from "../shared/chart-frame";
+import { getSeriesFill, resolveColor } from "../shared/colors";
+import type { AreaChartProps } from "../shared/types";
+
+export function AreaChart<
+  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",
+  stacked = false,
+  style,
+  syncId,
+  xKey,
+  ...props
+}: AreaChartProps<TDatum>) {
+  const hasData = data.length > 0 && series.length > 0;
+  const xAxisKey = String(xKey);
+
+  return (
+    <ChartFrame
+      appearance={appearance}
+      className={className}
+      containerStyle={containerStyle}
+      density={density}
+      emptyState={emptyState}
+      hasData={hasData}
+      height={height}
+      style={style}
+      {...props}
+    >
+      <RechartsAreaChart data={data} margin={margin} syncId={syncId}>
+        <ChartDecorators
+          axis={
+            <>
+              <XAxis
+                dataKey={xAxisKey}
+                minTickGap={24}
+                tickLine={false}
+                tickMargin={10}
+                axisLine={false}
+                fontSize={12}
+                fill="#ffffff"
+                color="#ffffff"
+              />
+              <YAxis
+                width={40}
+                tickLine={false}
+                tickMargin={8}
+                axisLine={false}
+                fontSize={12}
+                fill="#ffffff"
+                color="#ffffff"
+              />
+            </>
+          }
+          showGrid={showGrid}
+          showLegend={showLegend}
+          showTooltip={showTooltip}
+          tooltipColor={tooltipColor}
+        />
+        {series.map((item, index) => {
+          const color = resolveColor(item.color, index);
+          const fill = getSeriesFill(item, index)
+          console.log(fill)
+          return (
+            <Area
+              key={item.dataKey}
+              type="monotone"
+              dataKey={item.dataKey}
+              name={item.name}
+              stackId={stacked ? (item.stackId ?? "stack") : item.stackId}
+              stroke={color.stroke}
+              fill={fill}
+              fillOpacity={1}
+              strokeWidth={2}
+            />
+          );
+        })}
+      </RechartsAreaChart>
+    </ChartFrame>
+  );
+}
+
+AreaChart.displayName = "AreaChart";

package/src/charts/area/index.ts

@@ -0,0 +1,9 @@
+"use client";
+
+export { AreaChart } from "./Area";
+export type { AreaChartProps } from "../shared/types";
+export {
+  chartColorValues,
+  chartPalette,
+  chartVariants,
+} from "../shared/variants";

package/src/charts/bar/Bar.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { Bar, BarChart as RechartsBarChart, XAxis, YAxis } from "recharts";
+
+import {
+  ChartDecorators,
+  ChartFrame,
+  defaultChartMargin,
+} from "../shared/chart-frame";
+import { resolveColor } from "../shared/colors";
+import type { BarChartProps } from "../shared/types";
+
+export function BarChart<
+  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",
+  stacked = false,
+  style,
+  syncId,
+  xKey,
+  ...props
+}: BarChartProps<TDatum>) {
+  const hasData = data.length > 0 && series.length > 0;
+  const xAxisKey = String(xKey);
+
+  return (
+    <ChartFrame
+      appearance={appearance}
+      className={className}
+      containerStyle={containerStyle}
+      density={density}
+      emptyState={emptyState}
+      hasData={hasData}
+      height={height}
+      style={style}
+      {...props}
+    >
+      <RechartsBarChart data={data} margin={margin} syncId={syncId}>
+        <ChartDecorators
+          axis={
+            <>
+              <XAxis
+                dataKey={xAxisKey}
+                minTickGap={24}
+                tickLine={false}
+                tickMargin={10}
+                axisLine={false}
+                fontSize={12}
+              />
+              <YAxis
+                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 (
+            <Bar
+              key={item.dataKey}
+              dataKey={item.dataKey}
+              name={item.name}
+              stackId={stacked ? (item.stackId ?? "stack") : item.stackId}
+              fill={item.fill ?? color.stroke}
+              radius={[6, 6, 0, 0]}
+            />
+          );
+        })}
+      </RechartsBarChart>
+    </ChartFrame>
+  );
+}
+
+BarChart.displayName = "BarChart";

package/src/charts/bar/index.ts

@@ -0,0 +1,9 @@
+"use client";
+
+export { BarChart } from "./Bar";
+export type { BarChartProps } from "../shared/types";
+export {
+  chartColorValues,
+  chartPalette,
+  chartVariants,
+} from "../shared/variants";

package/src/charts/bubble/Bubble.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import {
+  Scatter,
+  ScatterChart as RechartsScatterChart,
+  XAxis,
+  YAxis,
+  ZAxis,
+  Bar,
+} from "recharts";
+
+import {
+  ChartDecorators,
+  ChartFrame,
+  defaultChartMargin,
+} from "../shared/chart-frame";
+import { resolveColor } from "../shared/colors";
+import type { BubbleChartProps } from "../shared/types";
+
+export function BubbleChart<
+  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
+}: BubbleChartProps<TDatum>) {
+  const hasData = data.length > 0 && series.length > 0;
+  const xAxisKey = String(xKey);
+
+  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="number"
+                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],
+                __chartZ: item.zKey ? entry[item.zKey] : undefined,
+              }))}
+              name={item.name}
+              fill={item.fill ?? color.stroke}
+            >
+              {data.map((_entry, cellIndex) => (
+                <Bar
+                  key={`${item.dataKey}-${cellIndex}`}
+                  fill={item.fill ?? color.stroke}
+                />
+              ))}
+            </Scatter>
+          );
+        })}
+        <ZAxis dataKey="__chartZ" range={[64, 720]} />
+      </RechartsScatterChart>
+    </ChartFrame>
+  );
+}
+
+BubbleChart.displayName = "BubbleChart";

package/src/charts/bubble/index.ts

@@ -0,0 +1,9 @@
+"use client";
+
+export { BubbleChart } from "./Bubble";
+export type { BubbleChartProps } from "../shared/types";
+export {
+  chartColorValues,
+  chartPalette,
+  chartVariants,
+} from "../shared/variants";

package/src/charts/line/Line.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { Line, LineChart as RechartsLineChart, XAxis, YAxis } from "recharts";
+
+import {
+  ChartDecorators,
+  ChartFrame,
+  defaultChartMargin,
+} from "../shared/chart-frame";
+import { resolveColor } from "../shared/colors";
+import type { LineChartProps } from "../shared/types";
+
+export function LineChart<
+  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,
+  strokeDasharray,
+  ...props
+}: LineChartProps<TDatum>) {
+  const hasData = data.length > 0 && series.length > 0;
+  const xAxisKey = String(xKey);
+
+  return (
+    <ChartFrame
+      appearance={appearance}
+      className={className}
+      containerStyle={containerStyle}
+      density={density}
+      emptyState={emptyState}
+      hasData={hasData}
+      height={height}
+      style={style}
+      {...props}
+    >
+      <RechartsLineChart data={data} margin={margin} syncId={syncId}>
+        <ChartDecorators
+          axis={
+            <>
+              <XAxis
+                dataKey={xAxisKey}
+                minTickGap={24}
+                tickLine={false}
+                tickMargin={10}
+                axisLine={false}
+                fontSize={12}
+              />
+              <YAxis
+                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 (
+            <Line
+              key={item.dataKey}
+              type="monotone"
+              dataKey={item.dataKey}
+              name={item.name}
+              stroke={color.stroke}
+              strokeWidth={2}
+              dot={false}
+              activeDot={{ r: 5 }}
+              strokeDasharray={strokeDasharray ?? undefined}
+            />
+          );
+        })}
+      </RechartsLineChart>
+    </ChartFrame>
+  );
+}
+
+LineChart.displayName = "LineChart";

package/src/charts/line/index.ts

@@ -0,0 +1,9 @@
+"use client";
+
+export { LineChart } from "./Line";
+export type { LineChartProps } from "../shared/types";
+export {
+  chartColorValues,
+  chartPalette,
+  chartVariants,
+} from "../shared/variants";

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

@@ -0,0 +1,107 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { CartesianGrid, Legend, ResponsiveContainer, Tooltip } from "recharts";
+
+import { cn } from "../../lib/utils";
+import { chartVariants } from "./variants";
+import { VariantProps } from "class-variance-authority";
+
+type ChartFrameProps = HTMLAttributes<HTMLDivElement> & {
+  appearance?: VariantProps<typeof chartVariants>["appearance"];
+  containerStyle?: CSSProperties;
+  density?: "compact" | "comfortable" | "spacious" | null;
+  emptyState?: ReactNode;
+  hasData: boolean;
+  height: number;
+  showGrid?: boolean;
+  showLegend?: boolean;
+  showTooltip?: boolean;
+  style?: CSSProperties;
+  children: ReactNode;
+};
+
+export const defaultChartMargin = { top: 16, right: 16, bottom: 8, left: 0 };
+
+export function ChartFrame({
+  appearance,
+  children,
+  className,
+  containerStyle,
+  density,
+  emptyState = null,
+  hasData,
+  height,
+  style,
+  ...props
+}: ChartFrameProps) {
+  const chartStyle = {
+    "--chart-height": `${height}px`,
+    ...style,
+  } as CSSProperties;
+
+  if (!hasData) {
+    return (
+      <div
+        className={cn(chartVariants({ appearance, density }), className)}
+        style={chartStyle}
+        {...props}
+      >
+        <div className="flex h-full min-h-48 items-center justify-center text-sm text-slate-500">
+          {emptyState}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(chartVariants({ appearance, density }), className)}
+      style={chartStyle}
+      {...props}
+    >
+      <ResponsiveContainer
+        width="100%"
+        height="100%"
+        debounce={80}
+        style={containerStyle}
+      >
+        {children}
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+export function ChartDecorators({
+  axis,
+  showGrid,
+  showLegend,
+  showTooltip,
+  tooltipColor = "#0f172a",
+}: {
+  axis: ReactNode;
+  showGrid: boolean;
+  showLegend: boolean;
+  showTooltip: boolean;
+  tooltipColor?: string;
+}) {
+  return (
+    <>
+      {showGrid ? (
+        <CartesianGrid
+          strokeDasharray="3 3"
+          stroke="currentColor"
+          opacity={0.16}
+        />
+      ) : null}
+      {axis}
+      {showTooltip ? (
+        <Tooltip
+          cursor={{ opacity: 0.12 }}
+          contentStyle={{ color: tooltipColor }}
+          labelStyle={{ color: tooltipColor }}
+          itemStyle={{ color: tooltipColor }}
+        />
+      ) : null}
+      {showLegend ? <Legend /> : null}
+    </>
+  );
+}

package/src/charts/shared/colors.ts

@@ -0,0 +1,31 @@
+import type { ChartColor, ChartSeries } from "./types";
+import { chartPalette } from "./variants";
+
+export function resolveColor(
+  color: ChartColor | string | undefined,
+  index: number,
+) {
+  if (color && color in chartPalette) {
+    return chartPalette[color as ChartColor];
+  }
+  if (color) {
+    return { stroke: color, fill: color };
+  }
+
+  const paletteValues = Object.values(chartPalette);
+  return paletteValues[index % paletteValues.length] ?? chartPalette.cyan;
+}
+
+export function getSeriesFill(
+  series: ChartSeries,
+  index: number,
+  opacity = 0.18,
+) {
+  const color = resolveColor(series.color, index);
+  return (
+    series.fill ??
+    `${color.fill}${Math.round(opacity * 255)
+      .toString(16)
+      .padStart(2, "0")}`
+  );
+}

package/src/charts/shared/types.ts

@@ -0,0 +1,60 @@
+import type { VariantProps } from "class-variance-authority";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+
+import type { chartPalette, chartVariants } from "./variants";
+
+export type ChartType = "area" | "bar" | "bubble" | "line";
+
+export type ChartColor = keyof typeof chartPalette;
+
+export type ChartDatum = Record<string, number | string | null | undefined>;
+
+export type ChartMargin = {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+};
+
+export type ChartSeries = {
+  dataKey: string;
+  name?: string;
+  color?: ChartColor | string;
+  textColor?: string;
+  fill?: string;
+  stackId?: string;
+  zKey?: string;
+};
+
+export type ChartSharedStatic = VariantProps<typeof chartVariants>;
+
+export type BaseChartProps<TDatum extends ChartDatum = ChartDatum> =
+  ChartSharedStatic &
+    Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+      data: TDatum[];
+      series: ChartSeries[];
+      xKey: keyof TDatum & string;
+      height?: number;
+      showGrid?: boolean;
+      showLegend?: boolean;
+      showTooltip?: boolean;
+      tooltipColor?: string;
+      stacked?: boolean;
+      syncId?: string;
+      margin?: ChartMargin;
+      emptyState?: ReactNode;
+      containerStyle?: CSSProperties;
+      strokeDasharray?: string;
+    };
+
+export type AreaChartProps<TDatum extends ChartDatum = ChartDatum> =
+  BaseChartProps<TDatum>;
+
+export type BarChartProps<TDatum extends ChartDatum = ChartDatum> =
+  BaseChartProps<TDatum>;
+
+export type LineChartProps<TDatum extends ChartDatum = ChartDatum> =
+  BaseChartProps<TDatum>;
+
+export type BubbleChartProps<TDatum extends ChartDatum = ChartDatum> =
+  BaseChartProps<TDatum>;