From 0d2d0d242c4234b3a72238874801f129e1b07787 Mon Sep 17 00:00:00 2001
From: Hollujay <165713167+Hollujay@users.noreply.github.com>
Date: Wed, 22 Jul 2026 12:44:45 +0000
Subject: [PATCH] Add chart empty state (#212)

---
 src/components/Chart.jsx         | 21 +++++++++++++++++-
 src/components/Chart.stories.jsx | 38 ++++++++++++++++++++++++++++++++
 test/components/Chart.test.jsx   | 33 ++++++++++++++++++++++++++-
 3 files changed, 90 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Chart.stories.jsx

diff --git a/src/components/Chart.jsx b/src/components/Chart.jsx
index 1a31c44..db82831 100644
--- a/src/components/Chart.jsx
+++ b/src/components/Chart.jsx
@@ -1,8 +1,15 @@
 import React, { useRef } from 'react';
 import './Chart.css';
 import Button from './Button.jsx';
+import EmptyState from './EmptyState.jsx';
 
-export default function Chart({ data, title }) {
+export default function Chart({
+  data,
+  title,
+  emptyStateIcon = '📊',
+  emptyStateTitle = 'No chart data',
+  emptyStateMessage = 'Add some data to visualize.'
+}) {
   const chartRef = useRef(null);
 
   const downloadChart = () => {
@@ -20,6 +27,18 @@ export default function Chart({ data, title }) {
     URL.revokeObjectURL(url);
   };
 
+  if (!data || data.length === 0) {
+    return (
+      <div className="chart-container">
+        <EmptyState
+          icon={emptyStateIcon}
+          title={emptyStateTitle}
+          message={emptyStateMessage}
+        />
+      </div>
+    );
+  }
+
   const maxValue = Math.max(...data.map(d => d.value), 1);
 
   return (
diff --git a/src/components/Chart.stories.jsx b/src/components/Chart.stories.jsx
new file mode 100644
index 0000000..d90e975
--- /dev/null
+++ b/src/components/Chart.stories.jsx
@@ -0,0 +1,38 @@
+import Chart from './Chart.jsx'
+
+export default {
+  title: 'Components/Chart',
+  component: Chart,
+  tags: ['autodocs'],
+  argTypes: {
+    data: { control: 'object' },
+    title: { control: 'text' },
+    emptyStateIcon: { control: 'text' },
+    emptyStateTitle: { control: 'text' },
+    emptyStateMessage: { control: 'text' }
+  }
+}
+
+export const Default = {
+  args: {
+    data: [{ value: 10 }, { value: 20 }, { value: 15 }, { value: 30 }],
+    title: 'Monthly Transfers'
+  }
+}
+
+export const Empty = {
+  args: {
+    data: [],
+    title: 'Monthly Transfers'
+  }
+}
+
+export const CustomEmptyState = {
+  args: {
+    data: [],
+    title: 'Monthly Transfers',
+    emptyStateIcon: '💸',
+    emptyStateTitle: 'No transfers yet',
+    emptyStateMessage: 'Your first transfer will appear here.'
+  }
+}
diff --git a/test/components/Chart.test.jsx b/test/components/Chart.test.jsx
index e0dfbec..71f71f2 100644
--- a/test/components/Chart.test.jsx
+++ b/test/components/Chart.test.jsx
@@ -3,9 +3,40 @@ import { describe, expect, it } from 'vitest'
 import Chart from '../../src/components/Chart.jsx'
 
 describe('Chart component', () => {
-  it('renders correctly', () => {
+  it('renders correctly with data', () => {
     const data = [{ value: 10 }, { value: 20 }]
     render(<Chart data={data} title="Test Chart" />)
     expect(screen.getByText('Test Chart')).toBeInTheDocument()
   })
+
+  it('shows empty state when data is an empty array', () => {
+    render(<Chart data={[]} title="Test Chart" />)
+    expect(screen.getByText('No chart data')).toBeInTheDocument()
+    expect(screen.getByText('Add some data to visualize.')).toBeInTheDocument()
+    expect(screen.queryByText('Download SVG')).not.toBeInTheDocument()
+  })
+
+  it('shows empty state when data is null', () => {
+    render(<Chart data={null} title="Test Chart" />)
+    expect(screen.getByText('No chart data')).toBeInTheDocument()
+  })
+
+  it('shows empty state when data is undefined', () => {
+    render(<Chart title="Test Chart" />)
+    expect(screen.getByText('No chart data')).toBeInTheDocument()
+  })
+
+  it('uses custom empty state props when provided', () => {
+    render(
+      <Chart
+        data={[]}
+        title="Test Chart"
+        emptyStateIcon="💸"
+        emptyStateTitle="Nothing to show"
+        emptyStateMessage="Please add some data."
+      />
+    )
+    expect(screen.getByText('Nothing to show')).toBeInTheDocument()
+    expect(screen.getByText('Please add some data.')).toBeInTheDocument()
+  })
 })