react/DonutChart

libs/react/src/components/DonutChart/DonutChart.css

@@ -0,0 +1,56 @@
+<style scoped>
+  .donut-chart {
+    width: 100%;
+    height: 100%;
+    border: var(--donut-chart-border, 1px solid #ccc);
+    background-color: var(--donut-chart-bg-color, #f9f9f9);
+    position: relative;
+  }
+
+  .donut-chart-loading,
+  .donut-chart-empty {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: var(--donut-chart-font-size, 16px);
+    color: var(--donut-chart-text-color, #666);
+  }
+
+  .donut-chart.rendered .segment {
+    fill: var(--donut-chart-segment-color, #007bff);
+  }
+
+  .donut-chart.hovered .segment:hover {
+    fill: var(--hover-color, #ffc107);
+  }
+
+  .donut-chart.clicked .segment:active {
+    fill: var(--clicked-color, #28a745);
+  }
+
+  .donut-chart.tooltipVisible .segment:hover {
+    fill: var(--tooltip-color, #17a2b8);
+  }
+
+  .donut-chart.exploded .segment {
+    transform: translateY(var(--explode-translate, -10px));
+  }
+
+  @media (max-width: 576px) {
+    .donut-chart {
+      height: var(--donut-chart-height-sm, 200px);
+    }
+  }
+
+  @media (min-width: 577px) and (max-width: 768px) {
+    .donut-chart {
+      height: var(--donut-chart-height-md, 300px);
+    }
+  }
+
+  @media (min-width: 769px) {
+    .donut-chart {
+      height: var(--donut-chart-height-lg, 400px);
+    }
+  }
+</style>

libs/react/src/components/DonutChart/DonutChart.stories.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import DonutChart, { DonutChartProps } from './DonutChart';
+
+export default {
+  title: 'component/Charts/DonutChart',
+  component: DonutChart,
+  tags: ['autodocs'],
+} as Meta;
+
+const Template: Story<DonutChartProps> = (args) => <DonutChart {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  state: 'rendered',
+  data: [{ category: 'A', value: 30 }, { category: 'B', value: 70 }],
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  state: 'loading',
+  data: [],
+};
+
+export const Rendered = Template.bind({});
+Rendered.args = {
+  state: 'rendered',
+  data: [{ category: 'A', value: 30 }, { category: 'B', value: 70 }],
+};
+
+export const Empty = Template.bind({});
+Empty.args = {
+  state: 'empty',
+  data: [],
+};
+
+export const Hovered = Template.bind({});
+Hovered.args = {
+  state: 'hovered',
+  data: [{ category: 'A', value: 30 }, { category: 'B', value: 70 }],
+};
+
+export const Clicked = Template.bind({});
+Clicked.args = {
+  state: 'clicked',
+  data: [{ category: 'A', value: 30 }, { category: 'B', value: 70 }],
+};
+
+export const TooltipVisible = Template.bind({});
+TooltipVisible.args = {
+  state: 'tooltipVisible',
+  data: [{ category: 'A', value: 30 }, { category: 'B', value: 70 }],
+};
+
+export const Exploded = Template.bind({});
+Exploded.args = {
+  state: 'exploded',
+  data: [{ category: 'A', value: 30 }, { category: 'B', value: 70 }],
+};

libs/react/src/components/DonutChart/DonutChart.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface DonutChartProps {
+  state: 'loading' | 'rendered' | 'empty' | 'hovered' | 'clicked' | 'tooltipVisible' | 'exploded';
+  data: Array<{ category: string; value: number }>;
+}
+
+const DonutChart: React.FC<DonutChartProps> = ({ state, data }) => {
+  return (
+    <div
+      className={`donut-chart ${state}`}
+      aria-label="Donut Chart"
+      role="img"
+    >
+      {state === 'loading' && <div className="donut-chart-loading">Loading...</div>}
+      {state === 'empty' && <div className="donut-chart-empty">No Data</div>}
+      {state === 'rendered' && /* Render the donut chart using data */}
+      {state === 'hovered' && /* Render donut chart with hovered section effect */}
+      {state === 'clicked' && /* Render donut chart with clicked section effect */}
+      {state === 'tooltipVisible' && /* Render donut chart with tooltip */}
+      {state === 'exploded' && /* Render donut chart with exploded section effect */}
+    </div>
+  );
+};
+
+export default DonutChart;