Skip to content

Branch2 added placeholder chart #3

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
cronc002 wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Branch2 added placeholder chart #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
18adbf1
Add files via upload
cronc002 Oct 7, 2024
b4514f9
Add files via upload
cronc002 Oct 7, 2024
92583b1
Add files via upload
cronc002 Oct 9, 2024
1e74133
Add files via upload
cronc002 Oct 9, 2024
38e4cc5
Add files via upload
cronc002 Oct 9, 2024
98add58
Add files via upload
cronc002 Oct 9, 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
46 changes: 19 additions & 27 deletions client/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/*

:root {
--background: #ffffff;
--foreground: #171717;
}

@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}

body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
.text-balance {
text-wrap: balance;
}
} */
@layer base {
:root {
--background: 0 0% 100%;
Expand All @@ -52,7 +28,7 @@ body {
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
Expand All @@ -78,14 +54,30 @@ body {
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%
--chart-5: 340 75% 55%;
}
}

@layer base {
* {
@apply border-border;
}

body {
@apply bg-background text-foreground;
background-image: url('https://images.pexels.com/photos/2387793/pexels-photo-2387793.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 100vh;
}
}

.line-chart {
height: 400px; /* Desired height */
width: 100%; /* Full width */
max-width: 800px; /* Optional: Limit max width */
margin: 20px auto; /* Center it */
position: relative; /* Ensure positioning */
}

}
80 changes: 45 additions & 35 deletions client/src/components/Navbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,51 +2,61 @@ import * as React from "react";
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuIndicator,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
NavigationMenuViewport,
} from "@radix-ui/react-navigation-menu";
import StockChart from '../StockChart'; // Adjust the path if necessary

export default function Navbar() {
export default function Home() {
return (
<div className="flex flex-col w-full">
<div className="bg-black text-white py-2">
<div className="max-w-7xl mx-auto">
<h1 className="text-2xl px-4">Greenline</h1>
<div className="relative">
<div className="flex flex-col w-full">
<div className="bg-black text-white py-2">
<div className="max-w-7xl mx-auto">
<h1 className="text-2xl px-4 italic">
<span className="text-green-400">green</span>line
</h1>
</div>
</div>
</div>

<NavigationMenu className="bg-zinc-900 text-white">
<div className="max-w-7xl mx-auto">
<NavigationMenuList className="flex">

<NavigationMenuItem className="group">
<NavigationMenuTrigger className="flex items-center space-x-2 hover:bg-zinc-800 text-sm font-semibold py-2 px-4 group-hover:bg-zinc-800">
<span>Markets</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Chevron Down" role="img"><title>Chevron Down</title><path d="M11.9954 15.0785L19.5387 7.54001L21 9.00226L11.9945 18.002L3 9.00179L4.46225 7.54047L11.9954 15.0785Z" fill="currentColor"></path></svg>
</NavigationMenuTrigger>

<NavigationMenuContent>
<NavigationMenuLink>Link</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>

<NavigationMenuItem className="group">
<NavigationMenuTrigger className="flex items-center space-x-2 hover:bg-zinc-800 text-sm font-semibold py-2 px-4 group-hover:bg-zinc-800">
<span>Markets</span>
</NavigationMenuTrigger>

<NavigationMenuContent>
<NavigationMenuLink>Link</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenu className="bg-zinc-900 text-white">
<div className="max-w-7xl mx-auto">
<NavigationMenuList className="flex">
<NavigationMenuItem className="group">
<NavigationMenuTrigger className="flex items-center space-x-2 hover:bg-zinc-800 text-sm font-semibold py-2 px-4 group-hover:bg-zinc-800">
<span>Glossary</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Chevron Down" role="img">
<title>Chevron Down</title>
<path d="M11.9954 15.0785L19.5387 7.54001L21 9.00226L11.9945 18.002L3 9.00179L4.46225 7.54047L11.9954 15.0785Z" fill="currentColor"></path>
</svg>
</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink>Link</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem className="group">
<NavigationMenuTrigger className="flex items-center space-x-2 hover:bg-zinc-800 text-sm font-semibold py-2 px-4 group-hover:bg-zinc-800">
<span>Resources</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Chevron Down" role="img">
<title>Chevron Down</title>
<path d="M11.9954 15.0785L19.5387 7.54001L21 9.00226L11.9945 18.002L3 9.00179L4.46225 7.54047L11.9954 15.0785Z" fill="currentColor"></path>
</svg>
</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink>Link</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</div>
</NavigationMenu>
</div>

</NavigationMenuList>
</div>
</NavigationMenu>
{/* Chart Container */}
<div className="chart-container absolute top-40 left-1/2 transform -translate-x-1/2">
<StockChart />
</div>
</div>
);
}
66 changes: 66 additions & 0 deletions client/src/components/StockChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
"use client"; // Add this line

import React, { useRef } from 'react';
import { Line } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Filler } from 'chart.js';

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Filler);

const StockChart: React.FC = () => {
const chartRef = useRef(null); // Example usage of useRef

const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Stock Price',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false, // CHANGE TO TRUE FOR HIGHLIGHT UNDER LINE
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: '#22c55e', // Set line color to green
borderWidth: 1,
},
],
};

const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
labels: {
color: 'white', // Set legend text color to white
},
},
title: {
display: true,
text: 'Stock Prices Over Time',
color: 'white', // Set title color to white
},
},
scales: {
x: {
ticks: {
color: 'white', // Set x-axis tick color to white
},
},
y: {
ticks: {
color: 'white', // Set y-axis tick color to white
},
},
},
};

return (
<div className="line-chart">
<Line
options={options}
data={data}
style={{ height: '500px', width: '100%' }} // Force size
/>
</div>
);
};

export default StockChart;