@ayasofyazilim/ui 0.0.0 → 0.0.2

package/src/custom/charts/index.tsx

@@ -1,16 +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;
-  };
-};
+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

@@ -1,168 +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>
-  );
-}
+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 "@ayasofyazilim/ui/components/chart";
+import { CardClassNames, ChartCard } from "./chart-card";
+import { cn } from "@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>
+  );
+}

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

@@ -1,126 +1,126 @@
-"use client";
-
-import * as React from "react";
-import {
-  PolarAngleAxis,
-  PolarGrid,
-  Radar,
-  RadarChart as RechartsRadarChart,
-} from "recharts";
-
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@repo/ayasofyazilim-ui/components/chart";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
-import { ChartCard, CardClassNames } from "./chart-card";
-import { ChartData, EmptyConfig } from ".";
-
-export type RadarChartProps = {
-  data: ChartData;
-  config: ChartConfig;
-  polarKey: string;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  period?: React.ReactNode;
-  footer?: React.ReactNode;
-  trendText?: React.ReactNode;
-  trendIcon?: React.ReactNode;
-  showLegend?: boolean;
-  linesOnly?: boolean;
-  valuePrefix?: string;
-  valueSuffix?: string;
-  classNames?: {
-    chart?: {
-      container?: string;
-      tooltip?: string;
-      legend?: string;
-      radar?: string;
-    };
-    card?: CardClassNames;
-  };
-} & EmptyConfig;
-
-export function RadarChart({
-  data,
-  config,
-  polarKey,
-  title,
-  description,
-  period,
-  footer,
-  trendText,
-  trendIcon,
-  showLegend = true,
-  linesOnly = false,
-  classNames,
-  valuePrefix,
-  valueSuffix,
-  emptyState,
-}: RadarChartProps) {
-  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)}
-      >
-        <RechartsRadarChart
-          data={data}
-          className={cn("flex flex-col pb-2", classNames?.chart?.radar)}
-          margin={{ top: 0, bottom: 0, left: 0, right: 0 }}
-        >
-          <ChartTooltip
-            cursor={false}
-            content={
-              <ChartTooltipContent
-                indicator="line"
-                valuePrefix={valuePrefix}
-                valueSuffix={valueSuffix}
-              />
-            }
-          />
-          <PolarAngleAxis dataKey={polarKey} />
-          <PolarGrid radialLines={!linesOnly} />
-          {Object.keys(config).map((key, idx) => (
-            <Radar
-              key={key}
-              dataKey={key}
-              fill={config[key]?.color || `var(--color-${idx})`}
-              fillOpacity={linesOnly ? 0 : idx === 0 ? 0.6 : 0.4}
-              stroke={config[key]?.color || `var(--color-${idx})`}
-              strokeWidth={linesOnly ? 2 : 1}
-            />
-          ))}
-          {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 />}
-            />
-          )}
-        </RechartsRadarChart>
-      </ChartContainer>
-    </ChartCard>
-  );
-}
+"use client";
+
+import * as React from "react";
+import {
+  PolarAngleAxis,
+  PolarGrid,
+  Radar,
+  RadarChart as RechartsRadarChart,
+} from "recharts";
+
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@ayasofyazilim/ui/components/chart";
+import { cn } from "@ayasofyazilim/ui/lib/utils";
+import { ChartCard, CardClassNames } from "./chart-card";
+import { ChartData, EmptyConfig } from ".";
+
+export type RadarChartProps = {
+  data: ChartData;
+  config: ChartConfig;
+  polarKey: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  period?: React.ReactNode;
+  footer?: React.ReactNode;
+  trendText?: React.ReactNode;
+  trendIcon?: React.ReactNode;
+  showLegend?: boolean;
+  linesOnly?: boolean;
+  valuePrefix?: string;
+  valueSuffix?: string;
+  classNames?: {
+    chart?: {
+      container?: string;
+      tooltip?: string;
+      legend?: string;
+      radar?: string;
+    };
+    card?: CardClassNames;
+  };
+} & EmptyConfig;
+
+export function RadarChart({
+  data,
+  config,
+  polarKey,
+  title,
+  description,
+  period,
+  footer,
+  trendText,
+  trendIcon,
+  showLegend = true,
+  linesOnly = false,
+  classNames,
+  valuePrefix,
+  valueSuffix,
+  emptyState,
+}: RadarChartProps) {
+  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)}
+      >
+        <RechartsRadarChart
+          data={data}
+          className={cn("flex flex-col pb-2", classNames?.chart?.radar)}
+          margin={{ top: 0, bottom: 0, left: 0, right: 0 }}
+        >
+          <ChartTooltip
+            cursor={false}
+            content={
+              <ChartTooltipContent
+                indicator="line"
+                valuePrefix={valuePrefix}
+                valueSuffix={valueSuffix}
+              />
+            }
+          />
+          <PolarAngleAxis dataKey={polarKey} />
+          <PolarGrid radialLines={!linesOnly} />
+          {Object.keys(config).map((key, idx) => (
+            <Radar
+              key={key}
+              dataKey={key}
+              fill={config[key]?.color || `var(--color-${idx})`}
+              fillOpacity={linesOnly ? 0 : idx === 0 ? 0.6 : 0.4}
+              stroke={config[key]?.color || `var(--color-${idx})`}
+              strokeWidth={linesOnly ? 2 : 1}
+            />
+          ))}
+          {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 />}
+            />
+          )}
+        </RechartsRadarChart>
+      </ChartContainer>
+    </ChartCard>
+  );
+}