125 lines
3 KiB
TypeScript
125 lines
3 KiB
TypeScript
"use client";
|
|
// install (please try to align the version of installed @nivo packages)
|
|
// yarn add @nivo/bar
|
|
import { ResponsivePie } from "@nivo/pie";
|
|
import { FC } from "react";
|
|
|
|
// make sure parent container have a defined height when using
|
|
// responsive component, otherwise height will be 0 and
|
|
// no chart will be rendered.
|
|
// website examples showcase many properties,
|
|
// you'll often use just a few of them.
|
|
|
|
// const favorit = localFont({
|
|
// src: "./fonts/ABCFavorit-Bold.woff2",
|
|
// variable: "--font-favorit",
|
|
// });
|
|
|
|
// const fonts = `${favorit.variable}`;
|
|
|
|
type MyResponsivePieProps = {
|
|
data: PieData[];
|
|
};
|
|
|
|
// Define the theme object
|
|
const theme = {
|
|
legends: {
|
|
text: {
|
|
fontSize: 12, // Change this value to your desired font size
|
|
fontWeight: 600,
|
|
// fontFamily: fonts,
|
|
},
|
|
},
|
|
labels: {
|
|
text: {
|
|
fontSize: 16, // Change this value to your desired font size for the labels inside the pie
|
|
fontWeight: 700,
|
|
// fontFamily: fonts,
|
|
},
|
|
},
|
|
};
|
|
|
|
export const MyResponsivePie: FC<MyResponsivePieProps> = ({ data }) => (
|
|
<ResponsivePie
|
|
data={data}
|
|
margin={{ top: 15, right: 5, bottom: 40, left: 5 }}
|
|
innerRadius={0.5}
|
|
padAngle={0.7}
|
|
cornerRadius={3}
|
|
activeOuterRadiusOffset={4}
|
|
borderWidth={1}
|
|
borderColor={{
|
|
from: "color",
|
|
modifiers: [["darker", 0.2]],
|
|
}}
|
|
enableArcLinkLabels={false}
|
|
arcLinkLabelsSkipAngle={10}
|
|
arcLinkLabelsTextColor="#333333"
|
|
arcLinkLabelsThickness={2}
|
|
arcLinkLabelsColor={{ from: "color" }}
|
|
arcLabelsSkipAngle={10}
|
|
arcLabelsTextColor="#fff"
|
|
arcLabel={(d) => `${d.value.toFixed(2)}%`} // Display value in percentage
|
|
// defs={[
|
|
// {
|
|
// id: "dots",
|
|
// type: "patternDots",
|
|
// background: "inherit",
|
|
// color: "rgba(255, 255, 255, 0.3)",
|
|
// size: 4,
|
|
// padding: 1,
|
|
// stagger: true,
|
|
// },
|
|
// {
|
|
// id: "lines",
|
|
// type: "patternLines",
|
|
// background: "inherit",
|
|
// color: "rgba(255, 255, 255, 0.3)",
|
|
// rotation: -45,
|
|
// lineWidth: 6,
|
|
// spacing: 10,
|
|
// },
|
|
// ]}
|
|
fill={[
|
|
{
|
|
match: {
|
|
id: "Negative",
|
|
},
|
|
id: "dots",
|
|
},
|
|
{
|
|
match: {
|
|
id: "Positive",
|
|
},
|
|
id: "lines",
|
|
},
|
|
]}
|
|
legends={[
|
|
{
|
|
anchor: "bottom",
|
|
direction: "row",
|
|
justify: false,
|
|
translateX: 2,
|
|
translateY: 40,
|
|
itemsSpacing: 4,
|
|
itemWidth: 80,
|
|
itemHeight: 18,
|
|
itemTextColor: "#4b5563",
|
|
itemDirection: "left-to-right",
|
|
itemOpacity: 1,
|
|
symbolSize: 16,
|
|
symbolShape: "circle",
|
|
effects: [
|
|
{
|
|
on: "hover",
|
|
style: {
|
|
itemTextColor: "#000",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
theme={theme} // Apply the theme here
|
|
colors={["#4ade80", "#d6d3d1", "#fb7185"]}
|
|
/>
|
|
);
|