@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/charts/area-widget.chart.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import {TrendingUp} from "lucide-react"
+import {Area, AreaChart, CartesianGrid, XAxis} from "recharts"
+import {
+    ChartConfig,
+    ChartContainer,
+    ChartLegend,
+    ChartLegendContent,
+    ChartTooltip,
+    ChartTooltipContent
+} from "../ui/chart";
+import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "../ui/card";
+import {AreaChartWidgetProps} from "./chart-widgets.types";
+import {cn} from "../../infrastructure/utilities/utils";
+
+export function AreaWidgetChart(
+    {
+        data,
+        config,
+        title,
+        description,
+        footerTitle,
+        footerDescription,
+        areas,
+        xAxisDataKey = "month",
+        xAxisFormatter,
+        showLegend = areas.length > 1,
+        className,
+        hideCard = false,
+    }: AreaChartWidgetProps
+) {
+    const formatTick = (value: string) => {
+        if (xAxisFormatter) return xAxisFormatter(value)
+        return String(value ?? "").trim()
+    }
+    const content = (
+        <>
+            {(title || description) && !hideCard && (
+                <CardHeader>
+                    <CardTitle>{title}</CardTitle>
+                    {description && <CardDescription>{description}</CardDescription>}
+                </CardHeader>
+            )}
+            <CardContent className={cn("w-full h-full", hideCard ? "p-0" : "flex-1", !hideCard && className)}>
+                <ChartContainer config={config} className={cn("w-full h-full aspect-auto", hideCard && className)}>
+                    <AreaChart
+                        accessibilityLayer
+                        data={data}
+                        margin={{
+                            left: 12,
+                            right: 12,
+                        }}
+                    >
+                        <CartesianGrid vertical={false}/>
+                        <XAxis
+                            dataKey={xAxisDataKey}
+                            tickLine={false}
+                            axisLine={false}
+                            tickMargin={8}
+                            tickFormatter={formatTick}
+                        />
+                        <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line"/>}/>
+                        {showLegend && (
+                            <ChartLegend content={<ChartLegendContent/>}/>
+                        )}
+                        <defs>
+                            {areas.map((area) => (
+                                <linearGradient key={`fill-${area.dataKey}`} id={`fill-${area.dataKey}`} x1="0" y1="0"
+                                                x2="0" y2="1">
+                                    <stop
+                                        offset="5%"
+                                        stopColor={`var(--color-${area.dataKey})`}
+                                        stopOpacity={0.8}
+                                    />
+                                    <stop
+                                        offset="95%"
+                                        stopColor={`var(--color-${area.dataKey})`}
+                                        stopOpacity={0.1}
+                                    />
+                                </linearGradient>
+                            ))}
+                        </defs>
+                        {areas.map((area) => (
+                            <Area
+                                key={area.dataKey}
+                                dataKey={area.dataKey}
+                                type="natural"
+                                fill={`url(#fill-${area.dataKey})`}
+                                fillOpacity={0.4}
+                                stroke={area.stroke || `var(--color-${area.dataKey})`}
+                                {...(area.stackId ? {stackId: area.stackId} : {})}
+                            />
+                        ))}
+                    </AreaChart>
+                </ChartContainer>
+            </CardContent>
+            {(footerTitle || footerDescription) && !hideCard && (
+                <CardFooter>
+                    <div className="flex w-full items-start gap-2 text-sm">
+                        <div className="grid gap-2">
+                            {footerTitle && (
+                                <div className="flex items-center gap-2 leading-none font-medium">
+                                    {footerTitle} <TrendingUp className="h-4 w-4"/>
+                                </div>
+                            )}
+                            {footerDescription && (
+                                <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                                    {footerDescription}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </CardFooter>
+            )}
+        </>
+    )
+
+    if (hideCard) {
+        return content
+    }
+
+    return (
+        <Card className={className}>
+            {content}
+        </Card>
+    )
+}

package/src/presentation/charts/chart-widgets.types.ts

@@ -0,0 +1,81 @@
+import { ChartConfig } from "../ui/chart"
+
+export interface BaseChartWidgetProps {
+  data: any[]
+  config: ChartConfig
+  title?: string
+  description?: string
+  footerTitle?: string
+  footerDescription?: string
+  className?: string
+  hideCard?: boolean
+}
+
+export interface AreaChartWidgetProps extends BaseChartWidgetProps {
+  areas: {
+    dataKey: string
+    fill?: string
+    stroke?: string
+    stackId?: string
+  }[]
+  xAxisDataKey?: string
+  xAxisFormatter?: (value: string) => string
+  showLegend?: boolean
+}
+
+export interface LineChartWidgetProps extends BaseChartWidgetProps {
+  lines: {
+    dataKey: string
+    stroke?: string
+    showLabel?: boolean
+  }[]
+  xAxisDataKey?: string
+}
+
+export interface PieChartWidgetProps extends BaseChartWidgetProps {
+  dataKey: string
+  nameKey: string
+  innerLabel?: string
+}
+
+export interface RadarChartWidgetProps extends BaseChartWidgetProps {
+  radars: {
+    dataKey: string
+    fill?: string
+    fillOpacity?: number
+  }[]
+  polarAngleDataKey?: string
+  gridShape?: "polygon" | "circle"
+}
+
+export interface RadialStackedChartWidgetProps extends BaseChartWidgetProps {
+  bars: {
+    dataKey: string
+    stackId?: string
+    fill?: string
+    cornerRadius?: number
+  }[]
+  innerRadius?: number
+  outerRadius?: number
+  endAngle?: number
+  innerLabel?: string
+}
+
+export interface RadialChartWidgetProps extends BaseChartWidgetProps {
+  dataKey: string
+  nameKey: string
+  startAngle?: number
+  endAngle?: number
+  innerRadius?: number
+  outerRadius?: number
+}
+
+export interface TooltipChartWidgetProps extends BaseChartWidgetProps {
+  bars: {
+    dataKey: string
+    stackId?: string
+    fill?: string
+    radius?: [number, number, number, number]
+  }[]
+  xAxisDataKey?: string
+}

package/src/presentation/charts/index.tsx

@@ -0,0 +1,16 @@
+// @liorian/sdk/presentation/charts — chart widgets & skeletons.
+export * from "./area-widget.chart-skeleton";
+export * from "./area-widget.chart";
+export * from "./chart-widgets.types";
+export * from "./line-widget.chart-skeleton";
+export * from "./line-widget.chart";
+export * from "./pie-widget.chart-skeleton";
+export * from "./pie-widget.chart";
+export * from "./radar-widget.chart-skeleton";
+export * from "./radar-widget.chart";
+export * from "./radial-stacked-widget.chart-skeleton";
+export * from "./radial-stacked-widget.chart";
+export * from "./radial-widget.chart-skeleton";
+export * from "./radial-widget.chart";
+export * from "./tooltip-widget.chart-skeleton";
+export * from "./tooltip-widget.chart";

package/src/presentation/charts/line-widget.chart-skeleton.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "../ui/card";
+import {Skeleton} from "../ui/skeleton";
+
+export interface LineWidgetChartSkeletonProps {
+    title?: string
+    description?: string
+    footerTitle?: string
+    footerDescription?: string
+    className?: string
+    hideCard?: boolean
+}
+
+export function LineWidgetChartSkeleton(
+    {
+        title,
+        description,
+        footerTitle,
+        footerDescription,
+        className,
+        hideCard = false,
+    }: LineWidgetChartSkeletonProps
+) {
+    const content = (
+        <>
+            {(title || description) && !hideCard && (
+                <CardHeader>
+                    <CardTitle>
+                        <Skeleton className="h-5 w-48"/>
+                    </CardTitle>
+                    {description && (
+                        <CardDescription>
+                            <Skeleton className="h-4 w-64"/>
+                        </CardDescription>
+                    )}
+                </CardHeader>
+            )}
+            <CardContent className={hideCard ? "p-0" : ""}>
+                <div className={hideCard ? "w-full" : "flex flex-col gap-2"}>
+                    <Skeleton className="h-64 w-full"/>
+                    <Skeleton className="h-4 w-full"/>
+                    <Skeleton className="h-4 w-2/3"/>
+                </div>
+            </CardContent>
+            {(footerTitle || footerDescription) && !hideCard && (
+                <CardFooter className="flex-col items-start gap-2 text-sm">
+                    {footerTitle && <Skeleton className="h-4 w-40"/>}
+                    {footerDescription && <Skeleton className="h-4 w-56"/>}
+                </CardFooter>
+            )}
+        </>
+    )
+
+    if (hideCard) {
+        return content
+    }
+
+    return (
+        <Card className={className}>
+            {content}
+        </Card>
+    )
+}

package/src/presentation/charts/line-widget.chart.tsx

@@ -0,0 +1,105 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, LabelList, Line, LineChart, XAxis } from "recharts"
+import {ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent} from "../ui/chart";
+import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "../ui/card";
+import { LineChartWidgetProps } from "./chart-widgets.types";
+
+export function LineWidgetChart({
+  data,
+  config,
+  title,
+  description,
+  footerTitle,
+  footerDescription,
+  lines,
+  xAxisDataKey = "month",
+  className,
+  hideCard = false
+}: LineChartWidgetProps) {
+  const content = (
+    <>
+      {(title || description) && !hideCard && (
+        <CardHeader>
+          <CardTitle>{title}</CardTitle>
+          {description && <CardDescription>{description}</CardDescription>}
+        </CardHeader>
+      )}
+      <CardContent className={hideCard ? "p-0" : ""}>
+        <ChartContainer config={config}>
+          <LineChart
+            accessibilityLayer
+            data={data}
+            margin={{
+              top: 20,
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey={xAxisDataKey}
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            {lines.map((line) => (
+              <Line
+                key={line.dataKey}
+                dataKey={line.dataKey}
+                type="natural"
+                stroke={line.stroke || `var(--color-${line.dataKey})`}
+                strokeWidth={2}
+                dot={{
+                  fill: line.stroke || `var(--color-${line.dataKey})`,
+                }}
+                activeDot={{
+                  r: 6,
+                }}
+              >
+                {line.showLabel && (
+                  <LabelList
+                    position="top"
+                    offset={12}
+                    className="fill-foreground"
+                    fontSize={12}
+                  />
+                )}
+              </Line>
+            ))}
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      {(footerTitle || footerDescription) && !hideCard && (
+        <CardFooter className="flex-col items-start gap-2 text-sm">
+          {footerTitle && (
+            <div className="flex gap-2 leading-none font-medium">
+              {footerTitle} <TrendingUp className="h-4 w-4" />
+            </div>
+          )}
+          {footerDescription && (
+            <div className="leading-none text-muted-foreground">
+              {footerDescription}
+            </div>
+          )}
+        </CardFooter>
+      )}
+    </>
+  )
+
+  if (hideCard) {
+    return content
+  }
+
+  return (
+    <Card className={className}>
+      {content}
+    </Card>
+  )
+}

package/src/presentation/charts/pie-widget.chart-skeleton.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "../ui/card";
+import {Skeleton} from "../ui/skeleton";
+import {cn} from "../../infrastructure/utilities/utils";
+
+export interface PieWidgetChartSkeletonProps {
+    title?: string
+    description?: string
+    className?: string
+    hideCard?: boolean
+}
+
+export function PieWidgetChartSkeleton(
+    {
+        title,
+        description,
+        className,
+        hideCard = false,
+    }: PieWidgetChartSkeletonProps
+) {
+    const content = (
+        <>
+            {(title || description) && !hideCard && (
+                <CardHeader className="flex-row items-start space-y-0 pb-0">
+                    <div className="grid gap-1">
+                        <CardTitle>
+                            <Skeleton className="h-5 w-48"/>
+                        </CardTitle>
+                        {description && (
+                            <CardDescription>
+                                <Skeleton className="h-4 w-64"/>
+                            </CardDescription>
+                        )}
+                    </div>
+                </CardHeader>
+            )}
+            <div className="flex flex-row items-center justify-end pt-4">
+                <Skeleton className="h-9 w-[130px]"/>
+            </div>
+            <CardContent className={cn("flex flex-1 justify-center pb-0", hideCard ? "p-0" : "")}>
+                <Skeleton className="mx-auto aspect-square w-full max-w-[300px] rounded-full"/>
+            </CardContent>
+        </>
+    )
+
+    if (hideCard) {
+        return content
+    }
+
+    return (
+        <Card data-chart="skeleton" className={cn("flex flex-col", className)}>
+            {content}
+        </Card>
+    )
+}

package/src/presentation/charts/pie-widget.chart.tsx

@@ -0,0 +1,168 @@
+"use client"
+
+import * as React from "react"
+import {Label, Pie, PieChart, Sector} from "recharts"
+import type {
+    PieSectorShapeProps,
+} from "recharts/types/polar/Pie"
+import {ChartConfig, ChartContainer, ChartStyle, ChartTooltip, ChartTooltipContent} from "../ui/chart";
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "../ui/card";
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "../ui/select";
+import {cn} from "../../infrastructure/utilities/utils";
+import {PieChartWidgetProps} from "./chart-widgets.types";
+
+
+export function PieWidgetChart(
+    {
+        data,
+        config,
+        title,
+        description,
+        dataKey,
+        nameKey,
+        innerLabel = "Visitors",
+        className,
+        hideCard = false,
+    }: PieChartWidgetProps) {
+    const id = React.useId()
+    const [activeMonth, setActiveMonth] = React.useState(data[0]?.[nameKey])
+
+    const activeIndex = React.useMemo(
+        () => data.findIndex((item) => item[nameKey] === activeMonth),
+        [activeMonth, data, nameKey]
+    )
+    const keys = React.useMemo(() => data.map((item) => item[nameKey]), [data, nameKey])
+
+    const renderPieShape = React.useCallback(
+        ({index, outerRadius = 0, ...props}: PieSectorShapeProps) => {
+            if (index === activeIndex) {
+                return (
+                    <g>
+                        <Sector {...props} outerRadius={outerRadius + 10}/>
+                        <Sector
+                            {...props}
+                            outerRadius={outerRadius + 25}
+                            innerRadius={outerRadius + 12}
+                        />
+                    </g>
+                )
+            }
+
+            return <Sector {...props} outerRadius={outerRadius}/>
+        },
+        [activeIndex]
+    )
+
+    const content = (
+        <>
+            {/*<ChartStyle id={id} config={config} />*/}
+            {(title || description) && !hideCard && (
+                <CardHeader className="flex-row items-start space-y-0 pb-0">
+                    <div className="grid gap-1">
+                        <CardTitle>{title}</CardTitle>
+                        {description && <CardDescription>{description}</CardDescription>}
+                    </div>
+                </CardHeader>
+            )}
+            <div className="flex flex-row items-center justify-end">
+                <Select value={activeMonth} onValueChange={setActiveMonth}>
+                    <SelectTrigger
+                        className="w-[130px]"
+                        aria-label="Choississez une entrée"
+                    >
+                        <SelectValue placeholder="Select item"/>
+                    </SelectTrigger>
+                    <SelectContent align="end" className="rounded-xl">
+                        {keys.map((key) => {
+                            const itemConfig = config[key as keyof typeof config]
+
+                            if (!itemConfig) {
+                                return null
+                            }
+
+                            return (
+                                <SelectItem
+                                    key={key}
+                                    value={key}
+                                    className="rounded-lg [&_span]:flex"
+                                >
+                                    <div className="flex items-center gap-2 text-xs">
+                      <span
+                          className="flex h-3 w-3 shrink-0 rounded-xs"
+                          style={{
+                              backgroundColor: `var(--color-${key})`,
+                          }}
+                      />
+                                        {itemConfig?.label}
+                                    </div>
+                                </SelectItem>
+                            )
+                        })}
+                    </SelectContent>
+                </Select>
+            </div>
+            <CardContent className={cn("flex flex-1 justify-center pb-0", hideCard ? "p-0" : "")}>
+                <ChartContainer
+                    id={id}
+                    config={config}
+                    className="mx-auto aspect-square w-full max-w-[300px]"
+                >
+                    <PieChart>
+                        <ChartTooltip
+                            cursor={false}
+                            content={<ChartTooltipContent hideLabel/>}
+                        />
+                        <Pie
+                            data={data}
+                            dataKey={dataKey}
+                            nameKey={nameKey}
+                            innerRadius={60}
+                            strokeWidth={5}
+                            shape={renderPieShape}
+                        >
+                            <Label
+                                content={({viewBox}) => {
+                                    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"
+                                                >
+                                                    {data[activeIndex]?.[dataKey]?.toLocaleString()}
+                                                </tspan>
+                                                <tspan
+                                                    x={viewBox.cx}
+                                                    y={(viewBox.cy || 0) + 24}
+                                                    className="fill-muted-foreground"
+                                                >
+                                                    {innerLabel}
+                                                </tspan>
+                                            </text>
+                                        )
+                                    }
+                                }}
+                            />
+                        </Pie>
+                    </PieChart>
+                </ChartContainer>
+            </CardContent>
+        </>
+    )
+
+    if (hideCard) {
+        return content
+    }
+
+    return (
+        <Card data-chart={id} className={cn("flex flex-col", className)}>
+            {content}
+        </Card>
+    )
+}

package/src/presentation/charts/radar-widget.chart-skeleton.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "../ui/card";
+import {Skeleton} from "../ui/skeleton";
+import {cn} from "../../infrastructure/utilities/utils";
+
+export interface RadarWidgetChartSkeletonProps {
+    title?: string
+    description?: string
+    footerTitle?: string
+    footerDescription?: string
+    className?: string
+    hideCard?: boolean
+}
+
+export function RadarWidgetChartSkeleton(
+    {
+        title,
+        description,
+        footerTitle,
+        footerDescription,
+        className,
+        hideCard = false,
+    }: RadarWidgetChartSkeletonProps
+) {
+    const content = (
+        <>
+            {(title || description) && !hideCard && (
+                <CardHeader className="items-center pb-4">
+                    <CardTitle>
+                        <Skeleton className="h-5 w-48"/>
+                    </CardTitle>
+                    {description && (
+                        <CardDescription>
+                            <Skeleton className="h-4 w-64"/>
+                        </CardDescription>
+                    )}
+                </CardHeader>
+            )}
+            <CardContent className={cn("pb-0", hideCard ? "p-0" : "")}>
+                <Skeleton
+                    className={cn(
+                        "mx-auto aspect-square max-h-[250px] w-full rounded-none",
+                        "[clip-path:polygon(50%_0%,100%_25%,100%_75%,50%_100%,0%_75%,0%_25%)]",
+                        hideCard && "max-h-none"
+                    )}
+                />
+            </CardContent>
+            {(footerTitle || footerDescription) && !hideCard && (
+                <CardFooter className="flex-col items-center gap-2 text-sm">
+                    {footerTitle && <Skeleton className="h-4 w-40"/>}
+                    {footerDescription && <Skeleton className="h-4 w-56"/>}
+                </CardFooter>
+            )}
+        </>
+    )
+
+    if (hideCard) {
+        return content
+    }
+
+    return (
+        <Card className={className}>
+            {content}
+        </Card>
+    )
+}