'use client'
import * as React from 'react';
import { PieChart } from '@mui/x-charts/PieChart';
import { useTheme } from '@mui/material';

const BCrumb = [
{
to: '/',
title: 'Home',
},
{
title: 'BasicPieChart ',
},
]; 


export default function BasicPieChart() {
    const theme = useTheme();
    const primary = theme.palette.primary.main;
    const secondary = theme.palette.secondary.main;
    const Datacolor = theme.palette.error.main;
    return (
     

            <PieChart
                series={[
                    {
                        data: [
                            { id: 0, value: 10, label: 'series A', color: primary },
                            { id: 1, value: 15, label: 'series B', color: secondary },
                            { id: 2, value: 20, label: 'series C', color: Datacolor },
                        ],
                    },

                ]}
               
                height={200}
            />
     
    );
}
  

import React from "react";
import ParentCard from "@/app/components/shared/ParentCard";
import TwoLevelPieCode from "../code/piechartcode/TwoLevelPieCode";
import { PieChart } from "@mui/x-charts/PieChart";

const BCrumb = [
{
to: '/',
title: 'Home',
},
{
title: 'TwoLevelPieChart ',
},
]; 


function TwoLevelPieChart() {
    const data1 = [
      { label: "Group A", value: 400, color: "#5D87FF" },
      { label: "Group B", value: 300, color: "#0074BA" },
      { label: "Group C", value: 300, color: "#763EBD" },
      { label: "Group D", value: 200, color: "#0A7EA4" },
    ];
    const data2 = [
      { label: "A1", value: 100, color: "#01C0C8" },
      { label: "A2", value: 300, color: "#FA896B" },
      { label: "B1", value: 100, color: "#01C0C8" },
      { label: "B2", value: 80, color: "#0074BA" },
      { label: "B3", value: 40, color: "#49BEFF" },
      { label: "B4", value: 30, color: "#47D7BC" },
      { label: "B5", value: 50, color: "#FFCD56" },
      { label: "C1", value: 100, color: "#95CFD5" },
      { label: "C2", value: 200, color: "#CCDA4E" },
      { label: "D1", value: 150, color: "#0A7EA4" },
      { label: "D2", value: 50, color: "#FB9678" },
    ];
  
    return (
      <ParentCard title="TwoLevelPieChart" codeModel={<TwoLevelPieCode />}>
        <PieChart
          series={[
            {
              innerRadius: 0,
              outerRadius: 80,
              data: data1,
            },
            {
              innerRadius: 100,
              outerRadius: 120,
              data: data2,
            },
          ]}
          width={400}
          height={300}
          slotProps={{
            legend: { hidden: true },
          }}
        />
      </ParentCard>
    );
  }
  
  export default TwoLevelPieChart;
  

import * as React from 'react';
import { PieChart } from '@mui/x-charts/PieChart';
  
const BCrumb = [
{
to: '/',
title: 'Home',
},
{
title: 'StraightAnglePieChart ',
},
]; 
    const data = [
        { label: 'Group A', value: 400, color: "#5D87FF" },
        { label: 'Group B', value: 300, color: "#0074BA" },
        { label: 'Group C', value: 300, color: "#01C0C8" },
        { label: 'Group D', value: 200, color: "#CCDA4E" },
        { label: 'Group E', value: 278, color: "#FB9678" },
        { label: 'Group F', value: 189, color: "#47D7BC" },
    ];
    
    export default function StraightAnglePieChart() {
    
            return (
            <PieChart
                series={[
                    {
                        startAngle: -90,
                        endAngle: 90,
                        data,
                    },
                ]}
                height={300}
            />
   
  )
}
  

import * as React from 'react';
import { PieChart } from '@mui/x-charts/PieChart';

const BCrumb = [
{
to: '/',
title: 'Home',
},
{
title: 'TwoSimplePieChart ',
},
]; 

const data1 = [
    { label: 'Group A', value: 400, color: "#5D87FF" },
    { label: 'Group B', value: 300, color: "#0074BA" },
    { label: 'Group C', value: 300, color: "#763EBD" },
    { label: 'Group D', value: 200, color: "#0A7EA4" },
    { label: 'Group E', value: 278, color: "#01C0C8" },
    { label: 'Group F', value: 189, color: "#FA896B" },
];

const data2 = [
    { label: 'Group A', value: 2400, color: "#01C0C8" },
    { label: 'Group B', value: 4567, color: "#0074BA" },
    { label: 'Group C', value: 1398, color: "#49BEFF" },
    { label: 'Group D', value: 9800, color: "#47D7BC" },
    { label: 'Group E', value: 3908, color: "#FFCD56" },
    { label: 'Group F', value: 4800, color: "#95CFD5" },
];


export default function TwoSimplePieChart() {
    return (
      

            <PieChart
                series={[
                  {
                        outerRadius: 80,
                        data: data1,
                        cx: 100,
                        cy: 200,
                    },
                    {
                        data: data2,
                        cx: 300,
                        cy: 100,
                        innerRadius: 40,
                        outerRadius: 80,
                    },
                ]}
                height={300}
                slotProps={{
                    legend: { hidden: true },
                }}
            />
    
    );
}
         

import * as React from 'react';
import { DefaultizedPieValueType } from '@mui/x-charts/models';
import { PieChart, pieArcLabelClasses } from '@mui/x-charts/PieChart';

const BCrumb = [
{
to: '/',
title: 'Home',
},
{
title: 'PieChartWithCustomizedLabel ',
},
]; 

const data = [
    { label: 'Group A', value: 400, color: '#5D87FF' },
    { label: 'Group B', value: 300, color: '#0074BA' },
    { label: 'Group C', value: 300, color: '#01C0C8' },
    { label: 'Group D', value: 200, color: '#CCDA4E' },
];

const sizing = {
    margin: { right: 5 },
    width: 200,
    height: 200,
    legend: { hidden: true },
};
const TOTAL = data.map((item) => item.value).reduce((a, b) => a + b, 0);

const getArcLabel = (params: DefaultizedPieValueType) => {
    const percent = params.value / TOTAL;
    return `${(percent * 100).toFixed(0)}%`;
};

            export default function PieChartWithCustomizedLabel() {
    return (
      
                <PieChart
                    series={[
                        {
                            outerRadius: 80,
                            data,
                            arcLabel: getArcLabel,
                        },
                    ]}
                    sx={{
                        [`& .${pieArcLabelClasses.root}`]: {
                            fill: 'white',
                            fontSize: 14,
                        },
                    }}
                    {...sizing}
                />
      
            );
}
            

import * as React from 'react';
import { PieChart } from '@mui/x-charts/PieChart';
import { useDrawingArea } from '@mui/x-charts/hooks';
import { styled } from '@mui/material/styles';

const BCrumb = [
{
to: '/',
title: 'Home',
},
{
title: 'PieChartWithCenterLabelChart ',
},
]; 


const data = [
  { value: 5, label: 'A', color: '#5D87FF' },
  { value: 10, label: 'B', color: '#0074BA' },
  { value: 15, label: 'C', color: '#01C0C8' },
  { value: 20, label: 'D', color: '#CCDA4E' },
];

const size = {
  width: 400,
  height: 200,
};

const StyledText = styled('text')(({ theme }) => ({
  fill: theme.palette.text.primary,
  textAnchor: 'middle',
  dominantBaseline: 'central',
  fontSize: 20,
}));

function PieCenterLabel({ children }) {
  const { width, height, left, top } = useDrawingArea();
  return (
      <StyledText x={left + width / 2} y={top + height / 2}>
          {children}
      </StyledText>
  );
}

export default function PieChartWithCenterLabelChart() {
  return (
   

          <PieChart series={[{ data, innerRadius: 80 }]} {...size}>
              <PieCenterLabel>Center label</PieCenterLabel>
          </PieChart>

  );
}


            

import * as React from 'react';
import Stack from '@mui/material/Stack';
import { PieChart } from '@mui/x-charts/PieChart';
const BCrumb = [
{
to: '/',
title: 'Home',
},
{
title: 'PieChartWithPaddingAngleChart ',
},
]; 


const data = [
    { label: 'Group A', value: 400, color: "#5D87FF" },
    { label: 'Group B', value: 300, color: "#FA896B" },
    { label: 'Group C', value: 300, color: "#FFCD56" },
    { label: 'Group D', value: 200, color: "#95CFD5" },
];

export default function PieChartWithPaddingAngleChart() {
    return (
     

            <Stack direction="row">
                <PieChart
                    series={[
                        {
                            paddingAngle: 5,
                            innerRadius: 60,
                            outerRadius: 80,
                            data,
                        },
                    ]}
                    margin={{ right: 5 }}
                    width={200}
                    height={200}
                    legend={{ hidden: true }}
                />
                <PieChart
                    series={[
                        {
                            startAngle: -90,
                            endAngle: 90,
                            paddingAngle: 5,
                            innerRadius: 60,
                            outerRadius: 80,
                            data,

                        },
                    ]}
                    margin={{ right: 5 }}
                    width={200}
                    height={200}
                    slotProps={{
                        legend: { hidden: true },
                    }}
                />
            </Stack>
    
    );
}

            

import * as React from 'react';
import { PieChart } from '@mui/x-charts/PieChart';
import { PieItemIdentifier, DefaultizedPieValueType } from '@mui/x-charts/models';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
      
const BCrumb = [
{
to: '/',
title: 'Home',
},
{
title: 'OnSeriesItemClickChart ',
},
]; 

const items = [
  { value: 10, label: 'Series A ( no Id )', color: '#CCDA4E' },
  { id: 'id_B', value: 15, label: 'Series B', color: '#0074BA' },
  { id: 'id_C', value: 20, label: 'Series C', color: '#01C0C8' },
];

const formatObject = (obj: null | PieItemIdentifier) => {
  if (obj === null) {
      return '  undefined';
  }
  return JSON.stringify(obj, null, 2)
      .split('
')
      .map((l) => `  ${l}`)
      .join('
');
};
      export default function OnSeriesItemClickChart() {
  const [identifier, setIdentifier] = React.useState(null);
      const [id, setId] = React.useState(undefined);

        const handleClick = (event, itemIdentifier, item) => {
        setId(item.id);
        setIdentifier(itemIdentifier);
    };


      return (
   

        <Stack
          direction={{ xs: 'column', md: 'row' }}
          alignItems={{ xs: 'flex-start', md: 'center' }}
          justifyContent="space-between"
          sx={{ width: '100%' }}
        >
          <Typography
            component="pre"
            sx={{ maxWidth: { xs: '100%', md: '50%', flexShrink: 1 }, overflow: 'auto' }}
          >
            {`item id: ${id ?? 'undefined'}

                 item identifier:
                 ${formatObject(identifier)}`}
          </Typography>

          <PieChart
            series={[
              {
                data: items,
              },
            ]}
            onItemClick={handleClick}
            width={400}
            height={200}
            margin={{ right: 200 }}
          />
        </Stack>
 
      );
}