UI improvements

gaskar · Jan 13, 2024 · f5ac4b6 · f5ac4b6
1 parent 8ff6e10
commit f5ac4b6
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 28 deletions.
diff --git a/ui/index.html b/ui/index.html
@@ -28,7 +28,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root" style="height: 100vh"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -1,26 +1,20 @@
 import './App.css';
-import { Box, Container, CssBaseline, Grid } from '@mui/material';
+import { Box, CssBaseline } from '@mui/material';
 import Header from './app/Header';
 import { Sidebar } from './app/Sidebar';
 import MainContent from './app/MainContent';
-import Footer from './app/Footer';
 
 function App() {
   return (
     <>
       <CssBaseline />
       <Header />
-      <Box sx={{ display: 'flex' }}>
+      <Box sx={{ display: 'flex' }} height='100%'>
         <Sidebar />
-        <Container maxWidth="xl">
-          <Grid container spacing={3}>
-            <Grid item xs={12}>
-              <MainContent />
-            </Grid>
-          </Grid>
-        </Container>
+        <Box sx={{display: 'flex'}} flexGrow={1} justifyContent='flex-start' marginTop='12px' marginLeft='4px'>
+          <MainContent />
+        </Box>
       </Box>
-      <Footer />
     </>
   );
 }

diff --git a/ui/src/app/Chart.tsx b/ui/src/app/Chart.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { createChart, CandlestickSeriesPartialOptions, CandlestickData, HistogramSeriesPartialOptions, HistogramData } from 'lightweight-charts';
+import { createChart, CandlestickData, HistogramSeriesPartialOptions, HistogramData } from 'lightweight-charts';
 import { ChartData } from './services/candle';
 
 interface CryptoChartProps {
@@ -11,11 +11,8 @@ const CryptoChart: React.FC<CryptoChartProps> = ({ chartData }) => {
 
   useEffect(() => {
     if (chartContainerRef.current) {
-      const chart = createChart(chartContainerRef.current, { width: 600, height: 300 });
-      const candlestickSeriesOptions: CandlestickSeriesPartialOptions = {
-        // options for the candlestick series
-      };
-      const candleSeries = chart.addCandlestickSeries(candlestickSeriesOptions);
+      const chart = createChart(chartContainerRef.current);
+      const candleSeries = chart.addCandlestickSeries();
 
       const volumeSeriesOptions: HistogramSeriesPartialOptions = {
         color: 'rgba(38, 166, 154, 0.6)', // Adjust color and opacity
@@ -27,9 +24,8 @@ const CryptoChart: React.FC<CryptoChartProps> = ({ chartData }) => {
 
       const volumeSeries = chart.addHistogramSeries(volumeSeriesOptions);
 
-      // Transform chart data to the format expected by candlestick series
       const candlestickData: CandlestickData[] = chartData.map(data => ({
-        time: data.closeTime, // Ensure this is in the format expected by the library
+        time: data.closeTime,
         open: data.open,
         high: data.high,
         low: data.low,
@@ -39,9 +35,16 @@ const CryptoChart: React.FC<CryptoChartProps> = ({ chartData }) => {
       const volumeData: HistogramData[] = chartData.map(data => ({
         time: data.closeTime,
         value: data.volume,
-        color: data.close > data.open ? '#26a69a' : '#ef5350', // Example: green for rising, red for falling
+        color: data.close > data.open ? 'rgba(38, 166, 154, 0.6)' : 'rgba(255, 99, 71, 0.4)',
       }));
 
+      chart.priceScale('').applyOptions({
+        scaleMargins: {
+          top: 0.8,
+          bottom: 0,
+        },
+      });
+
       candleSeries.setData(candlestickData);
       volumeSeries.setData(volumeData);
 
@@ -51,7 +54,7 @@ const CryptoChart: React.FC<CryptoChartProps> = ({ chartData }) => {
     }
   }, [chartData]);
 
-  return <div ref={chartContainerRef} style={{ width: '100%', height: '600px' }} />;
+  return <div ref={chartContainerRef} style={{ width: '80%', height: '600px' }} />;
 };
 
 export default CryptoChart;

diff --git a/ui/src/app/MainContent.tsx b/ui/src/app/MainContent.tsx
@@ -15,9 +15,7 @@ const App: React.FC = () => {
   }, []);
 
   return (
-    <div className="App">
       <CryptoChart chartData={chartData} />
-    </div>
   );
 };
 

diff --git a/ui/src/app/Sidebar.tsx b/ui/src/app/Sidebar.tsx
@@ -1,11 +1,10 @@
-import React from 'react';
-import { Box, Drawer, List, ListItem, ListItemText } from '@mui/material';
+import { Box, List, ListItem, ListItemText } from '@mui/material';
 
 export const Sidebar = () => {
   return (
-    <Box>
+    <Box width={250} boxShadow={3}>
       <List>
-        {['Dashboard', 'Settings', 'History'].map((text) => (
+        {['Home'].map((text) => (
           <ListItem button key={text}>
             <ListItemText primary={text} />
           </ListItem>
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,9 +15,7 @@ const App: React.FC = () => { @@
       }, []);
       return (
-        <div className="App">
           <CryptoChart chartData={chartData} />
-        </div>
       );
     };
@@ Expand Down @@