@ayasofyazilim/ui 0.0.0

package/src/custom/charts/area-chart.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import {
+  Area,
+  CartesianGrid,
+  AreaChart as RechartsAreaChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@repo/ayasofyazilim-ui/components/chart";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { ReactNode } from "react";
+import { CurveType } from "recharts/types/shape/Curve";
+import { BaseAxisProps } from "recharts/types/util/types";
+import { CardClassNames, ChartCard } from "./chart-card";
+import { EmptyConfig } from ".";
+
+export const description = "An area chart with a legend";
+
+type ChartData = Array<{
+  [key: string]: number | string;
+}>;
+
+type ChartConfig = {
+  [key: string]: {
+    label: string;
+    type?: CurveType;
+    color: string;
+  };
+};
+
+export type AreaChartProps = {
+  data: ChartData;
+  config: ChartConfig;
+  title?: ReactNode;
+  description?: ReactNode;
+  period?: ReactNode;
+  footer?: ReactNode;
+  trendText?: ReactNode;
+  trendIcon?: ReactNode;
+  showLegend?: boolean;
+  xAxisTickFormatter?: BaseAxisProps["tickFormatter"];
+  classNames?: {
+    chart?: {
+      container?: string;
+      area?: string;
+      legend?: string;
+    };
+    card?: CardClassNames;
+  };
+  valuePrefix?: string;
+  valueSuffix?: string;
+} & EmptyConfig;
+
+export function AreaChart({
+  data,
+  title,
+  config,
+  description,
+  period,
+  footer,
+  trendText,
+  trendIcon,
+  showLegend,
+  xAxisTickFormatter = (value) => value,
+  classNames,
+  valuePrefix,
+  valueSuffix,
+  emptyState,
+}: AreaChartProps) {
+  return (
+    <ChartCard
+      title={title}
+      description={description}
+      period={period}
+      trendText={trendText}
+      trendIcon={trendIcon}
+      footer={footer}
+      classNames={classNames?.card}
+      emptyState={data.length === 0 ? emptyState : undefined}
+    >
+      <ChartContainer
+        config={config}
+        className={cn("mx-auto max-h-full", classNames?.chart?.container)}
+      >
+        <RechartsAreaChart
+          accessibilityLayer
+          data={data}
+          className={cn("flex flex-col pb-2", classNames?.chart?.area)}
+          margin={{ top: 0, bottom: 0, left: 0, right: 0 }}
+        >
+          <CartesianGrid vertical={false} />
+          <XAxis
+            dataKey="label"
+            tickMargin={2}
+            minTickGap={2}
+            tickFormatter={xAxisTickFormatter}
+          />
+          <YAxis />
+          <ChartTooltip
+            cursor={false}
+            content={
+              <ChartTooltipContent
+                indicator="line"
+                valuePrefix={valuePrefix}
+                valueSuffix={valueSuffix}
+              />
+            }
+          />
+          {Object.keys(config).map((key) => (
+            <Area
+              key={key}
+              dataKey={key}
+              type={config[key]?.type || "monotoneX"}
+              fill={config[key]?.color || `var(--color-${key})`}
+              fillOpacity={0.4}
+              stroke={config[key]?.color || `var(--color-${key})`}
+              stackId="a"
+            />
+          ))}
+          {showLegend && (
+            <ChartLegend
+              wrapperStyle={{
+                position: "relative",
+                top: "unset",
+                left: "unset",
+                bottom: "unset",
+                right: "unset",
+                width: "100%",
+                textAlign: "center",
+              }}
+              className={cn("p-0", classNames?.chart?.legend)}
+              content={<ChartLegendContent />}
+            />
+          )}
+        </RechartsAreaChart>
+      </ChartContainer>
+    </ChartCard>
+  );
+}

package/src/custom/charts/bar-chart.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@repo/ayasofyazilim-ui/components/chart";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import * as React from "react";
+import {
+  Bar,
+  CartesianGrid,
+  BarChart as RechartsBarChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { BaseAxisProps } from "recharts/types/util/types";
+import { ChartData, EmptyConfig } from ".";
+import { CardClassNames, ChartCard } from "./chart-card";
+
+export type BarChartProps = {
+  data: ChartData;
+  config: ChartConfig;
+  xAxisKey: string;
+  layout?: "vertical" | "horizontal";
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  period?: React.ReactNode;
+  footer?: React.ReactNode;
+  trendText?: React.ReactNode;
+  showLegend?: boolean;
+  trendIcon?: React.ReactNode;
+  xAxisTickFormatter?: BaseAxisProps["tickFormatter"];
+  yAxisTickFormatter?: BaseAxisProps["tickFormatter"];
+  valuePrefix?: string;
+  valueSuffix?: string;
+  classNames?: {
+    chart?: {
+      container?: string;
+      bar?: string;
+      legend?: string;
+    };
+    card?: CardClassNames;
+  };
+} & EmptyConfig;
+
+export function BarChart({ layout = "vertical", ...props }: BarChartProps) {
+  if (layout === "horizontal") {
+    return <HorizontalBarChart {...props} />;
+  }
+  return <VerticalBarChart {...props} />;
+}
+
+function HorizontalBarChart({
+  data,
+  config,
+  xAxisKey,
+  title,
+  description,
+  period,
+  footer,
+  trendText,
+  trendIcon,
+  xAxisTickFormatter = (value) => value,
+  yAxisTickFormatter = (value) => value,
+  classNames,
+  showLegend,
+  valuePrefix,
+  valueSuffix,
+  emptyState,
+}: BarChartProps) {
+  return (
+    <ChartCard
+      title={title}
+      description={description}
+      period={period}
+      footer={footer}
+      trendText={trendText}
+      trendIcon={trendIcon}
+      classNames={classNames?.card}
+      emptyState={data.length === 0 ? emptyState : undefined}
+    >
+      <ChartContainer
+        config={config}
+        className={cn("mx-auto max-h-full", classNames?.chart?.container)}
+      >
+        <RechartsBarChart
+          accessibilityLayer
+          data={data}
+          layout="vertical"
+          className={cn("flex flex-col pb-2", classNames?.chart?.bar)}
+          margin={{ top: 0, bottom: 0, left: 0, right: 0 }}
+        >
+          <CartesianGrid vertical={false} />
+          {Object.keys(config).map((key) => (
+            <XAxis type="number" dataKey={key} key={key} />
+          ))}
+          <YAxis
+            dataKey={xAxisKey}
+            type="category"
+            tickLine={false}
+            tickMargin={10}
+            axisLine={false}
+            tickFormatter={yAxisTickFormatter}
+          />
+          <ChartTooltip
+            cursor={false}
+            content={
+              <ChartTooltipContent
+                hideLabel
+                valuePrefix={valuePrefix}
+                valueSuffix={valueSuffix}
+              />
+            }
+          />
+          {Object.keys(config).map((key) => (
+            <Bar
+              key={key}
+              dataKey={key}
+              fill={config[key]?.color || "var(--chart-1)"}
+              radius={5}
+            />
+          ))}
+          {showLegend && (
+            <ChartLegend
+              wrapperStyle={{
+                position: "relative",
+                top: "unset",
+                left: "unset",
+                bottom: "unset",
+                right: "unset",
+                width: "100%",
+                textAlign: "center",
+              }}
+              className={cn("p-0", classNames?.chart?.legend)}
+              content={<ChartLegendContent />}
+            />
+          )}
+        </RechartsBarChart>
+      </ChartContainer>
+    </ChartCard>
+  );
+}
+
+function VerticalBarChart({
+  data,
+  config,
+  xAxisKey,
+  title,
+  description,
+  period,
+  footer,
+  trendText,
+  trendIcon,
+  xAxisTickFormatter = (value) => value,
+  classNames,
+  showLegend,
+  valuePrefix,
+  valueSuffix,
+  emptyState,
+}: BarChartProps) {
+  return (
+    <ChartCard
+      title={title}
+      description={description}
+      period={period}
+      footer={footer}
+      trendText={trendText}
+      trendIcon={trendIcon}
+      classNames={classNames?.card}
+      emptyState={data.length === 0 ? emptyState : undefined}
+    >
+      <ChartContainer
+        config={config}
+        className={cn("mx-auto max-h-full", classNames?.chart?.container)}
+      >
+        <RechartsBarChart
+          accessibilityLayer
+          data={data}
+          layout="horizontal"
+          className={cn("flex flex-col pb-2", classNames?.chart?.bar)}
+          margin={{ top: 0, bottom: 0, left: 0, right: 0 }}
+        >
+          <CartesianGrid vertical={false} />
+          <XAxis
+            dataKey={xAxisKey}
+            tickLine={false}
+            axisLine={false}
+            tickMargin={8}
+            minTickGap={32}
+            tickFormatter={xAxisTickFormatter}
+          />
+          <YAxis />
+          <ChartTooltip
+            cursor={false}
+            content={
+              <ChartTooltipContent
+                valuePrefix={valuePrefix}
+                valueSuffix={valueSuffix}
+              />
+            }
+          />
+          {Object.keys(config).map((key) => (
+            <Bar
+              key={key}
+              dataKey={key}
+              fill={config[key]?.color || "var(--chart-1)"}
+              radius={0}
+            />
+          ))}
+          {showLegend && (
+            <ChartLegend
+              wrapperStyle={{
+                position: "relative",
+                top: "unset",
+                left: "unset",
+                bottom: "unset",
+                right: "unset",
+                width: "100%",
+                textAlign: "center",
+              }}
+              className={cn("p-0", classNames?.chart?.legend)}
+              content={<ChartLegendContent />}
+            />
+          )}
+        </RechartsBarChart>
+      </ChartContainer>
+    </ChartCard>
+  );
+}

package/src/custom/charts/chart-card.tsx

@@ -0,0 +1,103 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@repo/ayasofyazilim-ui/components/card";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@repo/ayasofyazilim-ui/components/empty";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { ReactNode } from "react";
+import { EmptyConfig } from ".";
+
+export type CardClassNames = {
+  container?: string;
+  header?: string;
+  content?: string;
+  title?: string;
+  description?: string;
+  footer?: string;
+  isEmpty?: string;
+};
+
+export function ChartCard({
+  title,
+  description,
+  period,
+  header,
+  footer,
+  trendText,
+  trendIcon,
+  children,
+  classNames,
+  emptyState,
+}: {
+  title?: ReactNode;
+  description?: ReactNode;
+  period?: ReactNode;
+  header?: ReactNode;
+  footer?: ReactNode;
+  trendText?: ReactNode;
+  trendIcon?: ReactNode;
+  children: ReactNode;
+  classNames?: CardClassNames;
+} & Partial<EmptyConfig>) {
+  return (
+    <Card className={cn(classNames?.container)}>
+      <CardHeader
+        className={cn("items-center pb-4! grid-rows-1", classNames?.header)}
+      >
+        {title && (
+          <CardTitle className={cn("my-auto", classNames?.title)}>
+            {title}
+          </CardTitle>
+        )}
+        {period && (
+          <CardDescription className={cn(classNames?.description)}>
+            {period}
+          </CardDescription>
+        )}
+        {description && (
+          <CardDescription className={cn(classNames?.description)}>
+            {description}
+          </CardDescription>
+        )}
+        {header}
+      </CardHeader>
+      <CardContent className={cn("pb-0 relative", classNames?.content)}>
+        {emptyState && (
+          <div className="absolute inset-0 bg-white/50 z-2">
+            <Empty>
+              <EmptyHeader>
+                <EmptyMedia variant="icon">{emptyState.icon}</EmptyMedia>
+                <EmptyTitle>{emptyState.title}</EmptyTitle>
+                <EmptyDescription>{emptyState.description}</EmptyDescription>
+              </EmptyHeader>
+            </Empty>
+          </div>
+        )}
+        {children}
+      </CardContent>
+      {(trendText || trendIcon) && (
+        <CardFooter
+          className={cn(
+            "flex items-center gap-2 leading-none font-medium",
+            classNames?.footer
+          )}
+        >
+          {trendText} {trendIcon}
+        </CardFooter>
+      )}
+      {footer && (
+        <CardFooter className={cn(classNames?.footer)}>{footer}</CardFooter>
+      )}
+    </Card>
+  );
+}

package/src/custom/charts/index.tsx

@@ -0,0 +1,16 @@
+export * from "./pie-chart";
+export * from "./area-chart";
+export * from "./radar-chart";
+export * from "./bar-chart";
+
+export type ChartData = Array<{
+  [key: string]: number | string;
+}>;
+
+export type EmptyConfig = {
+  emptyState: {
+    icon: React.ReactNode;
+    title: string;
+    description: string;
+  };
+};

package/src/custom/charts/pie-chart.tsx

@@ -0,0 +1,168 @@
+import * as React from "react";
+import { useMemo } from "react";
+import { Label, LabelProps, Pie, PieChart as RechartsPieChart } from "recharts";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@repo/ayasofyazilim-ui/components/chart";
+import { CardClassNames, ChartCard } from "./chart-card";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { ChartData, EmptyConfig } from ".";
+
+export type PieChartProps = {
+  data: ChartData;
+  config: ChartConfig;
+  valueKey: string;
+  nameKey: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  period?: React.ReactNode;
+  trendText?: React.ReactNode;
+  trendIcon?: React.ReactNode;
+  footer?: React.ReactNode;
+  totalLabel?: string;
+  chartStyle: "donut" | "pie";
+  innerRadius?: number;
+  strokeWidth?: number;
+  valuePrefix?: string;
+  valueSuffix?: string;
+  showLegend?: boolean;
+  classNames?: {
+    chart?: {
+      container?: string;
+      tooltip?: string;
+      legend?: string;
+      pie?: string;
+    };
+    card?: CardClassNames;
+  };
+} & EmptyConfig;
+
+export function PieChart({
+  data,
+  config,
+  valueKey,
+  nameKey,
+  title,
+  description,
+  period,
+  trendText,
+  trendIcon,
+  footer,
+  totalLabel,
+  chartStyle,
+  classNames,
+  innerRadius,
+  strokeWidth,
+  valuePrefix,
+  valueSuffix,
+  showLegend = true,
+  emptyState,
+}: PieChartProps) {
+  const totalCount = useMemo(
+    () => data.reduce((acc, curr) => acc + (Number(curr[valueKey]) || 0), 0),
+    [data, valueKey]
+  );
+
+  // Transform data to ChartConfig shape for ChartContainer
+  const renderLabelContent = ({
+    viewBox,
+  }: {
+    viewBox?: LabelProps["viewBox"] | null;
+  }) => {
+    if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+      return (
+        <text
+          x={viewBox.cx}
+          y={viewBox.cy}
+          textAnchor="middle"
+          dominantBaseline="middle"
+        >
+          <tspan
+            x={viewBox.cx}
+            y={viewBox.cy}
+            className="fill-foreground text-3xl font-bold"
+          >
+            {valuePrefix} {totalCount.toLocaleString()} {valueSuffix}
+          </tspan>
+          <tspan
+            x={viewBox.cx}
+            y={(viewBox.cy || 0) + 24}
+            className="fill-muted-foreground"
+          >
+            {totalLabel}
+          </tspan>
+        </text>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <ChartCard
+      title={title}
+      description={description}
+      period={period}
+      footer={footer}
+      trendText={trendText}
+      trendIcon={trendIcon}
+      classNames={classNames?.card}
+      emptyState={data.length === 0 ? emptyState : undefined}
+    >
+      <ChartContainer
+        config={config}
+        className={cn("max-h-[300px]", classNames?.chart?.container)}
+      >
+        <RechartsPieChart className={cn("relative", classNames?.chart?.pie)}>
+          <ChartTooltip
+            cursor={false}
+            content={
+              <ChartTooltipContent
+                valuePrefix={valuePrefix}
+                valueSuffix={valueSuffix}
+              />
+            }
+          />
+          <Pie
+            data={data.map((item, index) => ({
+              ...item,
+              fill:
+                config[String(item[nameKey])]?.color ||
+                `var(--chart-${index + 1})`,
+            }))}
+            className="fixed"
+            dataKey={valueKey}
+            nameKey={nameKey}
+            innerRadius={innerRadius || (chartStyle === "donut" ? 60 : 0)}
+            strokeWidth={
+              strokeWidth || (chartStyle === "donut" ? 0 : undefined)
+            }
+          >
+            <Label content={renderLabelContent} />
+          </Pie>
+          {showLegend && (
+            <ChartLegend
+              wrapperStyle={{
+                width: "100%",
+                height: 0,
+                bottom: 0,
+              }}
+              content={
+                <ChartLegendContent
+                  className={cn(
+                    "flex-col absolute size-full inset-0 items-start justify-end w-full text-nowrap gap-1 p-0",
+                    classNames?.chart?.legend
+                  )}
+                />
+              }
+            />
+          )}
+        </RechartsPieChart>
+      </ChartContainer>
+    </ChartCard>
+  );
+}