Radial Bar

import React from "react";
import Component from "@/components/ui/radial-bar";

const data = [
  { category: "A", value: 80 },
  { category: "B", value: 45 },
  { category: "C", value: 65 },
  { category: "D", value: 30 },
  { category: "E", value: 90 },
  { category: "F", value: 55 },
  { category: "G", value: 70 },
  { category: "H", value: 40 },
];

const settings = {
  rotation: 0,
  sortByCategory: true,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen flex items-center justify-center">
      <Component
        width={500}
        height={500}
        data={data}
        getCategory={(d) => d.category}
        getValue={(d) => d.value}
        rotation={s.rotation}
        sortByCategory={s.sortByCategory}
      />
    </div>
  );
}