David/JEISA-WEBAPP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[dyad] Updated stock chart bar colors - wrote 1 file(s)

Browse source
This commit is contained in:
[dyad] 2025-09-11 12:27:58 +02:00
parent 67959208bc
commit 2d1e956b5f
1 changed files with 48 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
src/components/StockChart.tsx
View file

@ -1,31 +1,52 @@
import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
"use client"
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"
const data = [
{ name: 'Jan', In: 4000, Out: 2400 },
{ name: 'Feb', In: 3000, Out: 1398 },
{ name: 'Mar', In: 2000, Out: 9800 },
{ name: 'Apr', In: 2780, Out: 3908 },
{ name: 'May', In: 1890, Out: 4800 },
{ name: 'Jun', In: 2390, Out: 3800 },
{ name: 'Jul', In: 3490, Out: 4300 },
{ name: 'Aug', In: 3000, Out: 2000 },
{ name: 'Sep', In: 2000, Out: 2780 },
{ name: 'Oct', In: 2780, Out: 1890 },
{ name: 'Nov', In: 1890, Out: 2390 },
{ name: 'Dec', In: 3490, Out: 2900 },
];
{
name: "Jan",
In: 4000,
Out: 2400,
},
{
name: "Feb",
In: 3000,
Out: 1398,
},
{
name: "Mar",
In: 2000,
Out: 9800,
},
{
name: "Apr",
In: 2780,
Out: 3908,
},
{
name: "May",
In: 1890,
Out: 4800,
},
{
name: "Jun",
In: 2390,
Out: 3800,
},
{
name: "Jul",
In: 3490,
Out: 4300,
},
]
export const StockChart = () => {
export function StockChart() {
return (
<Card className="col-span-1 lg:col-span-2 mt-4">
<CardHeader className="bg-primary text-primary-foreground mb-4 p-4 rounded-lg shadow-lg"> {/* Changed bg-primary-dark to bg-primary and text-white to text-primary-foreground */}
<CardTitle className="text-primary-foreground">Monthly Stock Activity</CardTitle> {/* Changed text-white to text-primary-foreground */}
</CardHeader>
<CardContent className="h-80">
<div className="h-[300px] w-full">
<ResponsiveContainer width="100%" height="100%">
<BarChart
width={500}
height={300}
data={data}
margin={{
top: 5,
@ -39,11 +60,10 @@ export const StockChart = () => {
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="In" fill="#8884d8" name="Stock In" />
<Bar dataKey="Out" fill="#82ca9d" name="Stock Out" />
<Bar dataKey="In" fill="#000000" name="Stock In" />
<Bar dataKey="Out" fill="#FFA500" name="Stock Out" />
</BarChart>
</ResponsiveContainer>
</CardContent>
</Card>
);
};
</div>
)
}