Nivo

// Line Chart
import { ResponsiveLine, Line } from '@nivo/line';

const data = [
  {
    id: 'المبيعات',
    data: [
      { x: 'يناير', y: 45 },
      { x: 'فبراير', y: 90 },
      { x: 'مارس', y: 150 },
      { x: 'أبريل', y: 220 },
      { x: 'مايو', y: 180 },
    ]
  }
];

function SalesLine() {
  return (
    <ResponsiveLine
      data={data}
      margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
      xScale={{ type: 'point' }}
      yScale={{ type: 'linear', min: 0, max: 'auto', stacked: false }}
      curve="monotoneX"
      axisTop={null}
      axisRight={null}
      axisBottom={{
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: 'الشهر',
        legendOffset: 36,
        legendPosition: 'middle'
      }}
      axisLeft={{
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: 'القيمة',
        legendOffset: -40,
        legendPosition: 'middle'
      }}
      colors={{ scheme: 'nivo' }}
      pointSize={10}
      pointColor={{ theme: 'background' }}
      pointBorderWidth={2}
      pointBorderColor={{ from: 'serieColor' }}
      useMesh={true}
      legends={[
        {
          anchor: 'bottom-right',
          direction: 'column',
          translateX: 100,
          itemWidth: 80,
          itemHeight: 20,
        }
      ]}
    />
  );
}

// Sunburst Chart (Hierarchical data)
import { ResponsiveSunburst } from '@nivo/sunburst';

const hierarchicalData = {
  name: 'الشركة',
  children: [
    {
      name: 'المبيعات',
      children: [
        { name: 'إدراجي', value: 100 },
        { name: 'تكراري', value: 80 }
      ]
    },
    {
      name: 'التسويق',
      children: [
        { name: 'محتوى', value: 60 },
        { name: 'إعلانات', value: 90 }
      ]
    }
  ]
};

function DepartmentSunburst() {
  return (
    <ResponsiveSunburst
      data={hierarchicalData}
      margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
      id="name"
      value="value"
      cornerRadius={2}
      arcLabelsSkipAngle={10}
      arcLabelsTextColor={{ from: 'color', modifiers: [['darker', 2]] }}
      colors={{ scheme: 'nivo' }}
    />
  );
}