48 lines
875 B
TypeScript
48 lines
875 B
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Mermaid } from "./Mermaid";
|
|
|
|
interface PieSlice {
|
|
label: string;
|
|
value: number;
|
|
}
|
|
|
|
interface DiagramPieProps {
|
|
data: PieSlice[];
|
|
title?: string;
|
|
caption?: string;
|
|
id?: string;
|
|
showShare?: boolean;
|
|
fontSize?: string;
|
|
}
|
|
|
|
export const DiagramPie: React.FC<DiagramPieProps> = ({
|
|
data,
|
|
title,
|
|
caption,
|
|
id,
|
|
showShare = true,
|
|
fontSize = "16px",
|
|
}) => {
|
|
const pieGraph = `pie
|
|
${(data || []).map((slice) => ` "${slice.label}" : ${slice.value}`).join("\n")}`;
|
|
|
|
return (
|
|
<div className="my-12">
|
|
<Mermaid
|
|
graph={pieGraph}
|
|
id={id}
|
|
title={title}
|
|
showShare={showShare}
|
|
fontSize={fontSize}
|
|
/>
|
|
{caption && (
|
|
<div className="text-center text-xs text-slate-400 mt-4 italic">
|
|
{caption}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|