@gsk_poc/untitled-ui-base 0.1.1

package/components/application/charts/pie-charts.demo.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import { Legend, Pie, PieChart as RechartsPieChart, ResponsiveContainer, Tooltip } from "recharts";
+import { ChartLegendContent, ChartTooltipContent } from "@/components/application/charts/charts-base";
+
+const pieChartData = [
+    // collapse-start
+    {
+        name: "Series 1",
+        value: 200,
+        className: "text-utility-brand-600",
+    },
+    {
+        name: "Series 2",
+        value: 350,
+        className: "text-utility-brand-500",
+    },
+    {
+        name: "Series 3",
+        value: 100,
+        className: "text-utility-brand-400",
+    },
+    {
+        name: "Series 4",
+        value: 120,
+        className: "text-utility-brand-300",
+    },
+    {
+        name: "Series 5",
+        value: 230,
+        className: "text-utility-gray-200",
+    },
+    // collapse-end
+];
+
+interface PieChartProps {
+    data?: { name: string; value: number; className?: string }[];
+}
+
+export const PieChartXxs = ({ data = pieChartData }: PieChartProps) => {
+    return (
+        <ResponsiveContainer height={120} className="max-w-52.5">
+            <RechartsPieChart
+                margin={{
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                }}
+            >
+                <Legend verticalAlign="top" align="right" layout="vertical" content={ChartLegendContent} />
+                <Tooltip content={<ChartTooltipContent isPieChart />} />
+
+                <Pie
+                    isAnimationActive={false}
+                    startAngle={-270}
+                    endAngle={-630}
+                    stroke="none"
+                    data={data}
+                    dataKey="value"
+                    nameKey="name"
+                    fill="currentColor"
+                    innerRadius={30}
+                    outerRadius={60}
+                />
+            </RechartsPieChart>
+        </ResponsiveContainer>
+    );
+};
+
+export const PieChartXs = ({ data = pieChartData }: PieChartProps) => {
+    return (
+        <ResponsiveContainer height={160} className="max-w-62.5">
+            <RechartsPieChart
+                margin={{
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                }}
+            >
+                <Legend verticalAlign="top" align="right" layout="vertical" content={ChartLegendContent} />
+                <Tooltip content={<ChartTooltipContent isPieChart />} />
+
+                <Pie
+                    isAnimationActive={false}
+                    startAngle={-270}
+                    endAngle={-630}
+                    stroke="none"
+                    data={data}
+                    dataKey="value"
+                    nameKey="name"
+                    fill="currentColor"
+                    innerRadius={40}
+                    outerRadius={80}
+                />
+            </RechartsPieChart>
+        </ResponsiveContainer>
+    );
+};
+
+export const PieChartSm = ({ data = pieChartData }: PieChartProps) => {
+    return (
+        <ResponsiveContainer height={200} className="max-w-72.5">
+            <RechartsPieChart
+                margin={{
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                }}
+            >
+                <Legend verticalAlign="top" align="right" layout="vertical" content={ChartLegendContent} />
+                <Tooltip content={<ChartTooltipContent isPieChart />} />
+
+                <Pie
+                    isAnimationActive={false}
+                    startAngle={-270}
+                    endAngle={-630}
+                    stroke="none"
+                    data={data}
+                    dataKey="value"
+                    nameKey="name"
+                    fill="currentColor"
+                    innerRadius={50}
+                    outerRadius={100}
+                />
+            </RechartsPieChart>
+        </ResponsiveContainer>
+    );
+};
+
+export const PieChartMd = ({ data = pieChartData }: PieChartProps) => {
+    return (
+        <ResponsiveContainer height={240} className="max-w-96">
+            <RechartsPieChart
+                margin={{
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                }}
+            >
+                <Legend verticalAlign="top" align="right" layout="vertical" content={ChartLegendContent} />
+                <Tooltip content={<ChartTooltipContent isPieChart />} />
+
+                <Pie
+                    isAnimationActive={false}
+                    startAngle={-270}
+                    endAngle={-630}
+                    stroke="none"
+                    data={data}
+                    dataKey="value"
+                    nameKey="name"
+                    fill="currentColor"
+                    innerRadius={60}
+                    outerRadius={120}
+                />
+            </RechartsPieChart>
+        </ResponsiveContainer>
+    );
+};
+
+export const PieChartLg = ({ data = pieChartData }: PieChartProps) => {
+    return (
+        <ResponsiveContainer height={280} className="max-w-96">
+            <RechartsPieChart
+                margin={{
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                }}
+            >
+                <Legend verticalAlign="top" align="right" layout="vertical" content={ChartLegendContent} />
+                <Tooltip content={<ChartTooltipContent isPieChart />} />
+
+                <Pie
+                    isAnimationActive={false}
+                    startAngle={-270}
+                    endAngle={-630}
+                    stroke="none"
+                    data={data}
+                    dataKey="value"
+                    nameKey="name"
+                    fill="currentColor"
+                    innerRadius={70}
+                    outerRadius={140}
+                />
+            </RechartsPieChart>
+        </ResponsiveContainer>
+    );
+};

package/components/application/charts/pie-charts.story.tsx

@@ -0,0 +1,30 @@
+import type { FC } from "react";
+import * as Charts from "./pie-charts.demo";
+
+export default {
+    title: "Application/Charts",
+    decorators: [
+        (Story: FC) => (
+            <div className="flex min-h-screen items-center justify-center bg-primary py-8">
+                <div className="flex w-full items-center justify-center">
+                    <Story />
+                </div>
+            </div>
+        ),
+    ],
+};
+
+export const PieChartXxs = () => <Charts.PieChartXxs />;
+PieChartXxs.storyName = "Pie chart xxs";
+
+export const PieChartXs = () => <Charts.PieChartXs />;
+PieChartXs.storyName = "Pie chart xs";
+
+export const PieChartSm = () => <Charts.PieChartSm />;
+PieChartSm.storyName = "Pie chart sm";
+
+export const PieChartMd = () => <Charts.PieChartMd />;
+PieChartMd.storyName = "Pie chart md";
+
+export const PieChartLg = () => <Charts.PieChartLg />;
+PieChartLg.storyName = "Pie chart lg";

package/components/application/charts/progress-circles.demo.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { PolarAngleAxis, RadialBar, RadialBarChart, ResponsiveContainer } from "recharts";
+import { cx } from "@/utils/cx";
+
+const progressCircleData = [
+    {
+        value: 400,
+        className: "text-utility-brand-600",
+    },
+];
+
+export const ProgressCircle = ({ size = "sm", title, subtitle }: { size?: "xs" | "sm" | "md" | "lg"; title?: string; subtitle?: string }) => {
+    const sizes = {
+        // collapse-start
+        xs: {
+            size: 16,
+            innerRadius: 80 - 8,
+
+            titleDY: "1.05em",
+            subtitleDY: "-1.3em",
+
+            title: "text-display-xs font-semibold",
+            subtitle: "text-xs font-medium",
+        },
+        sm: {
+            size: 20,
+            innerRadius: 100 - 10,
+
+            titleDY: "1em",
+            subtitleDY: "-1.4em",
+
+            title: "text-display-sm font-semibold",
+            subtitle: "text-xs font-medium",
+        },
+        md: {
+            size: 24,
+            innerRadius: 120 - 12,
+
+            titleDY: "1em",
+            subtitleDY: "-1.5em",
+
+            title: "text-display-md font-semibold",
+            subtitle: "text-sm font-medium",
+        },
+        lg: {
+            size: 28,
+            innerRadius: 140 - 14,
+
+            titleDY: "1em",
+            subtitleDY: "-2.1em",
+
+            title: "text-display-lg font-semibold",
+            subtitle: "text-sm font-medium",
+        },
+        // collapse-end
+    };
+
+    return (
+        <div className="h-100 w-full">
+            <ResponsiveContainer>
+                <RadialBarChart
+                    data={progressCircleData}
+                    accessibilityLayer
+                    innerRadius={sizes[size].innerRadius}
+                    barSize={sizes[size].size}
+                    // This is needed to start the chart at the top and go clockwise
+                    startAngle={90}
+                    endAngle={360 + 90}
+                >
+                    <PolarAngleAxis tick={false} type="number" domain={[0, 1000]} reversed />
+
+                    <RadialBar
+                        isAnimationActive={false}
+                        dataKey="value"
+                        fill="currentColor"
+                        cornerRadius={99}
+                        background={{
+                            className: "fill-utility-gray-200",
+                        }}
+                    />
+
+                    {(title || subtitle) && (
+                        <text x="50%" y="50%" textAnchor="middle" dominantBaseline="middle">
+                            {subtitle && (
+                                <tspan x="50%" dy={title ? sizes[size].subtitleDY : "1%"} className={cx("fill-current text-tertiary", sizes[size].subtitle)}>
+                                    {subtitle}
+                                </tspan>
+                            )}
+                            {title && (
+                                <tspan x="50%" dy={subtitle ? sizes[size].titleDY : "1%"} className={cx("fill-current text-primary", sizes[size].title)}>
+                                    {title}
+                                </tspan>
+                            )}
+                        </text>
+                    )}
+                </RadialBarChart>
+            </ResponsiveContainer>
+        </div>
+    );
+};
+
+export const ProgressCircleXs = () => <ProgressCircle size="xs" title="40%" subtitle="Active users" />;
+export const ProgressCircleSm = () => <ProgressCircle title="40%" subtitle="Active users" />;
+export const ProgressCircleMd = () => <ProgressCircle size="md" title="40%" subtitle="Active users" />;
+export const ProgressCircleLg = () => <ProgressCircle size="lg" title="40%" subtitle="Active users" />;
+export const ProgressCircleXsOnlyTitle = () => <ProgressCircle size="xs" title="40%" />;
+export const ProgressCircleSmOnlyTitle = () => <ProgressCircle size="sm" title="40%" />;
+export const ProgressCircleMdOnlyTitle = () => <ProgressCircle size="md" title="40%" />;
+export const ProgressCircleLgOnlyTitle = () => <ProgressCircle size="lg" title="40%" />;

package/components/application/charts/progress-circles.story.tsx

@@ -0,0 +1,33 @@
+import type { FC } from "react";
+import * as Charts from "./progress-circles.demo";
+
+export default {
+    title: "Application/Charts",
+    decorators: [
+        (Story: FC) => (
+            <div className="flex min-h-screen items-center justify-center bg-primary py-8">
+                <div className="flex w-full items-center justify-center">
+                    <Story />
+                </div>
+            </div>
+        ),
+    ],
+};
+
+export const ProgressCircleXs = () => <Charts.ProgressCircle size="xs" title="40%" subtitle="Active users" />;
+ProgressCircleXs.storyName = "Progress circle xs";
+export const ProgressCircleSm = () => <Charts.ProgressCircle title="40%" subtitle="Active users" />;
+ProgressCircleSm.storyName = "Progress circle sm";
+export const ProgressCircleMd = () => <Charts.ProgressCircle size="md" title="40%" subtitle="Active users" />;
+ProgressCircleMd.storyName = "Progress circle md";
+export const ProgressCircleLg = () => <Charts.ProgressCircle size="lg" title="40%" subtitle="Active users" />;
+ProgressCircleLg.storyName = "Progress circle lg";
+
+export const ProgressCircleXsOnlyTitle = () => <Charts.ProgressCircle size="xs" title="40%" />;
+ProgressCircleXsOnlyTitle.storyName = "Progress circle xs only title";
+export const ProgressCircleSmOnlyTitle = () => <Charts.ProgressCircle size="sm" title="40%" />;
+ProgressCircleSmOnlyTitle.storyName = "Progress circle sm only title";
+export const ProgressCircleMdOnlyTitle = () => <Charts.ProgressCircle size="md" title="40%" />;
+ProgressCircleMdOnlyTitle.storyName = "Progress circle md only title";
+export const ProgressCircleLgOnlyTitle = () => <Charts.ProgressCircle size="lg" title="40%" />;
+ProgressCircleLgOnlyTitle.storyName = "Progress circle lg only title";

package/components/application/charts/radar-charts.demo.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import { Fragment, useEffect, useRef } from "react";
+import { Legend, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart as RechartsRadarChart, ResponsiveContainer, Tooltip } from "recharts";
+import { ChartLegendContent, ChartTooltipContent } from "@/components/application/charts/charts-base";
+import { cx } from "@/utils/cx";
+
+interface CustomRadarChartTickProps {
+    payload: { value: string };
+    x: number;
+    y: number;
+    textAnchor: string;
+    stroke: string;
+    radius: number;
+}
+
+export const CustomRadarChartTick = ({ payload, x, y, textAnchor, stroke, radius }: CustomRadarChartTickProps) => {
+    const textRef = useRef<SVGTextElement>(null);
+    const rectRef = useRef<SVGRectElement>(null);
+
+    useEffect(() => {
+        if (textRef.current && rectRef.current) {
+            const textBoundingBox = textRef.current.getBBox();
+
+            const EXTRA_WIDTH = 16;
+            const EXTRA_HEIGHT = 8;
+
+            rectRef.current.setAttribute("width", (textBoundingBox.width + EXTRA_WIDTH).toString());
+            rectRef.current.setAttribute("height", (textBoundingBox.height + EXTRA_HEIGHT).toString());
+            rectRef.current.setAttribute("x", (textBoundingBox.x - EXTRA_WIDTH / 2).toString());
+            rectRef.current.setAttribute("y", (textBoundingBox.y - EXTRA_HEIGHT / 2).toString());
+        }
+    }, [x, y, radius]);
+
+    return (
+        <Fragment>
+            <rect ref={rectRef} x={x} y={y} rx={11} className="fill-utility-gray-50 stroke-utility-gray-200 stroke-1"></rect>
+            <text
+                ref={textRef}
+                x={x}
+                y={y + 5}
+                radius={radius}
+                stroke={stroke}
+                textAnchor={textAnchor}
+                className="recharts-text recharts-polar-angle-axis-tick-value"
+            >
+                <tspan x={x} dy="0em" className="fill-utility-gray-700 text-xs font-medium">
+                    {payload.value}
+                </tspan>
+            </text>
+        </Fragment>
+    );
+};
+
+const radarData = [
+    // collapse-start
+    {
+        subject: "Mon",
+        A: 800,
+        B: 400,
+        C: 600,
+    },
+    {
+        subject: "Tue",
+        A: 600,
+        B: 1000,
+        C: 800,
+    },
+    {
+        subject: "Wed",
+        A: 600,
+        B: 200,
+        C: 400,
+    },
+    {
+        subject: "Thu",
+        A: 200,
+        B: 600,
+        C: 800,
+    },
+    {
+        subject: "Fri",
+        A: 400,
+        B: 200,
+        C: 600,
+    },
+    {
+        subject: "Sat",
+        A: 1000,
+        B: 800,
+        C: 600,
+    },
+    {
+        subject: "Sun",
+        A: 400,
+        B: 1000,
+        C: 800,
+    },
+    // collapse-end
+];
+
+export const RadarChart = () => {
+    const colors: Record<string, string> = {
+        A: "text-utility-brand-600",
+        B: "text-utility-pink-500",
+        C: "text-utility-blue-light-500",
+    };
+
+    return (
+        <ResponsiveContainer height={500} width="100%">
+            <RechartsRadarChart
+                cx="50%"
+                cy="50%"
+                outerRadius="80%"
+                data={radarData}
+                className="size-full font-medium text-tertiary [&_.recharts-polar-grid]:text-utility-gray-100 [&_.recharts-text]:text-sm"
+                margin={{
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                }}
+            >
+                <Legend verticalAlign="bottom" align="center" layout="horizontal" content={ChartLegendContent} />
+
+                <PolarGrid stroke="currentColor" className="text-utility-gray-100" />
+                <PolarAngleAxis
+                    dataKey="subject"
+                    stroke="currentColor"
+                    tick={({ x, y, textAnchor, index, payload, ...props }) => (
+                        <text
+                            x={x}
+                            y={index === 0 ? Number(y) - 14 : index === 3 || index === 4 ? Number(y) + 10 : Number(y)}
+                            textAnchor={textAnchor}
+                            {...props}
+                            className={cx("recharts-text recharts-polar-angle-axis-tick-value", props.className)}
+                        >
+                            <tspan dy="0em" className="fill-utility-gray-700 text-xs font-medium">
+                                {payload.value}
+                            </tspan>
+                        </text>
+                    )}
+                    tickLine={false}
+                    axisLine={false}
+                />
+                <PolarRadiusAxis textAnchor="middle" tick={(props) => <CustomRadarChartTick {...props} />} axisLine={false} angle={90} domain={[0, 1000]} />
+
+                <Tooltip
+                    content={<ChartTooltipContent />}
+                    cursor={{
+                        className: "stroke-utility-brand-600  stroke-2",
+                        style: {
+                            transform: "translateZ(0)",
+                        },
+                    }}
+                />
+
+                <Radar
+                    isAnimationActive={false}
+                    className={colors["A"]}
+                    dataKey="A"
+                    name="Series 1"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    strokeLinejoin="round"
+                    fill="currentColor"
+                    fillOpacity={0.2}
+                    activeDot={{
+                        className: "fill-bg-primary stroke-utility-brand-600 stroke-2",
+                    }}
+                />
+                <Radar
+                    isAnimationActive={false}
+                    className={colors["B"]}
+                    dataKey="B"
+                    name="Series 2"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    strokeLinejoin="round"
+                    fill="currentColor"
+                    fillOpacity={0.2}
+                    activeDot={{
+                        className: "fill-bg-primary stroke-utility-brand-600 stroke-2",
+                    }}
+                />
+                <Radar
+                    isAnimationActive={false}
+                    className={colors["C"]}
+                    dataKey="C"
+                    name="Series 3"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    strokeLinejoin="round"
+                    fill="currentColor"
+                    fillOpacity={0.2}
+                    activeDot={{
+                        className: "fill-bg-primary stroke-utility-brand-600 stroke-2",
+                    }}
+                />
+            </RechartsRadarChart>
+        </ResponsiveContainer>
+    );
+};

package/components/application/charts/radar-charts.story.tsx

@@ -0,0 +1,18 @@
+import type { FC } from "react";
+import * as Charts from "./radar-charts.demo";
+
+export default {
+    title: "Application/Charts",
+    decorators: [
+        (Story: FC) => (
+            <div className="flex min-h-screen items-center justify-center bg-primary py-8">
+                <div className="flex w-full items-center justify-center">
+                    <Story />
+                </div>
+            </div>
+        ),
+    ],
+};
+
+export const RadarChart = () => <Charts.RadarChart />;
+RadarChart.storyName = "Radar chart";