Skip to content

included Chart.js to create visualizations #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
roshankraveendrababu wants to merge 2 commits into
base: main
Choose a base branch
from
Open

included Chart.js to create visualizations #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2502c64
included chart for daily sales analysis
roshankraveendrababu Oct 10, 2024
94d8127
changed parameters for better layout
roshankraveendrababu Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions frontend/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,18 @@
transform: rotate(360deg);
}
}

.chart-container {
width: 80%;
max-width: 800px;
margin: 20px auto; /* Center the chart */
padding: 20px; /* Add some padding around the chart */
background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent background */
border-radius: 8px; /* Rounded corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow for depth */
}

to {
transform: rotate(360deg);
}
}
52 changes: 39 additions & 13 deletions frontend/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,51 @@
import React from 'react';
import { Bar } from 'react-chartjs-2';
import logo from './logo.svg';
import './App.css';

function App() {
const App = () => {
// Sample data for the chart
const data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [
{
label: 'Revenue ($)',
data: [1200, 1900, 3000, 500, 2000, 3200, 4200],
backgroundColor: 'rgba(75, 192, 192, 0.6)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
},
{
label: 'Items Sold',
data: [300, 500, 600, 200, 700, 800, 1000],
backgroundColor: 'rgba(153, 102, 255, 0.6)',
borderColor: 'rgba(153, 102, 255, 1)',
borderWidth: 1,
},
],
};

// Options for the chart
const options = {
scales: {
y: {
beginAtZero: true,
},
},
};

return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<h1>Vendor Dashboard</h1>
<div className="chart-container">
<Bar data={data} options={options} />
</div>
</header>
</div>
);
}
};

export default App;