342 lines
11 KiB
JavaScript
342 lines
11 KiB
JavaScript
import { useState, useEffect } from 'react'
|
|
import './App.css'
|
|
import InfiniteCanvas from './components/InfiniteCanvas'
|
|
import AdvancedCharts from './components/AdvancedCharts'
|
|
import DataflowCanvas from './components/DataflowCanvas'
|
|
import { FaDatabase, FaChartBar, FaProjectDiagram } from 'react-icons/fa'
|
|
|
|
function App() {
|
|
const [activeTab, setActiveTab] = useState('canvas'); // 'canvas', 'charts', or 'dataflow'
|
|
|
|
// Listen for the custom event to switch to DataFlow tab
|
|
useEffect(() => {
|
|
const handleViewDataFlow = (event) => {
|
|
// Switch to the dataflow tab
|
|
setActiveTab('dataflow');
|
|
|
|
// Log the database info (in a real app, you would use this to initialize the DataFlow view)
|
|
console.log('Viewing DataFlow for database:', event.detail);
|
|
};
|
|
|
|
// Add event listener
|
|
window.addEventListener('viewDataFlow', handleViewDataFlow);
|
|
|
|
// Clean up
|
|
return () => {
|
|
window.removeEventListener('viewDataFlow', handleViewDataFlow);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="app-container" style={{
|
|
width: '100vw',
|
|
height: '100vh',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
overflow: 'hidden',
|
|
background: '#121212', /* Dark background */
|
|
color: '#ffffff'
|
|
}}>
|
|
<header>
|
|
{/* Logo and Title */}
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
|
<div style={{
|
|
width: '40px',
|
|
height: '40px',
|
|
background: 'linear-gradient(45deg, #00a99d, #52c41a)',
|
|
borderRadius: '8px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginRight: '15px',
|
|
boxShadow: '0 0 10px rgba(82, 196, 26, 0.5)',
|
|
animation: 'pulse 2s infinite'
|
|
}}>
|
|
<FaDatabase style={{ fontSize: '20px', color: 'white' }} />
|
|
</div>
|
|
<h1 style={{
|
|
margin: 0,
|
|
fontSize: '1.5rem',
|
|
background: 'linear-gradient(90deg, #00a99d, #52c41a, #fa8c16)',
|
|
WebkitBackgroundClip: 'text',
|
|
WebkitTextFillColor: 'transparent',
|
|
textShadow: '0 0 20px rgba(82, 196, 26, 0.3)'
|
|
}}>
|
|
The Metricverse
|
|
</h1>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<div>
|
|
<span
|
|
style={{
|
|
marginRight: '25px',
|
|
cursor: 'pointer',
|
|
padding: '8px 12px',
|
|
borderRadius: '4px',
|
|
transition: 'all 0.3s ease',
|
|
position: 'relative',
|
|
background: activeTab === 'canvas' ? 'rgba(0, 169, 157, 0.2)' : 'transparent',
|
|
color: activeTab === 'canvas' ? '#00a99d' : '#ffffff'
|
|
}}
|
|
className="nav-item"
|
|
onClick={() => setActiveTab('canvas')}
|
|
>
|
|
Data Explorer
|
|
</span>
|
|
<span
|
|
style={{
|
|
marginRight: '25px',
|
|
cursor: 'pointer',
|
|
padding: '8px 12px',
|
|
borderRadius: '4px',
|
|
transition: 'all 0.3s ease',
|
|
position: 'relative',
|
|
background: activeTab === 'charts' ? 'rgba(0, 169, 157, 0.2)' : 'transparent',
|
|
color: activeTab === 'charts' ? '#00a99d' : '#ffffff'
|
|
}}
|
|
className="nav-item"
|
|
onClick={() => setActiveTab('charts')}
|
|
>
|
|
Advanced Charts
|
|
</span>
|
|
<span
|
|
style={{
|
|
marginRight: '25px',
|
|
cursor: 'pointer',
|
|
padding: '8px 12px',
|
|
borderRadius: '4px',
|
|
transition: 'all 0.3s ease',
|
|
position: 'relative',
|
|
background: activeTab === 'dataflow' ? 'rgba(0, 169, 157, 0.2)' : 'transparent',
|
|
color: activeTab === 'dataflow' ? '#00a99d' : '#ffffff'
|
|
}}
|
|
className="nav-item"
|
|
onClick={() => setActiveTab('dataflow')}
|
|
>
|
|
Data Flow
|
|
</span>
|
|
<span
|
|
style={{
|
|
cursor: 'pointer',
|
|
padding: '8px 12px',
|
|
borderRadius: '4px',
|
|
transition: 'all 0.3s ease',
|
|
position: 'relative'
|
|
}}
|
|
className="nav-item"
|
|
>
|
|
Settings
|
|
</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
|
|
<aside>
|
|
<h3 style={{
|
|
color: '#52c41a',
|
|
marginBottom: '15px',
|
|
borderBottom: '1px solid #333',
|
|
paddingBottom: '10px',
|
|
fontSize: '1.1rem'
|
|
}}>Data Sources</h3>
|
|
|
|
<ul style={{ listStyle: 'none', padding: 0 }}>
|
|
<li style={{
|
|
padding: '10px',
|
|
cursor: 'pointer',
|
|
color: '#ffffff',
|
|
fontWeight: 'bold',
|
|
borderRadius: '6px',
|
|
background: 'rgba(0, 169, 157, 0.1)',
|
|
marginBottom: '8px',
|
|
border: '1px solid rgba(0, 169, 157, 0.3)',
|
|
transition: 'all 0.3s ease',
|
|
boxShadow: '0 0 10px rgba(0, 169, 157, 0.1)'
|
|
}} className="glow-effect">
|
|
<span style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '24px',
|
|
height: '24px',
|
|
background: 'linear-gradient(45deg, #00a99d, #52c41a)',
|
|
borderRadius: '4px',
|
|
color: 'white',
|
|
marginRight: '10px',
|
|
fontSize: '12px'
|
|
}}>
|
|
<FaDatabase />
|
|
</span>
|
|
Dbtez
|
|
</li>
|
|
</ul>
|
|
|
|
<h3 style={{
|
|
color: '#fa8c16',
|
|
marginTop: '25px',
|
|
marginBottom: '15px',
|
|
borderBottom: '1px solid #333',
|
|
paddingBottom: '10px',
|
|
fontSize: '1.1rem'
|
|
}}>Saved Views</h3>
|
|
|
|
<ul style={{ listStyle: 'none', padding: 0 }}>
|
|
<li style={{
|
|
padding: '10px',
|
|
cursor: 'pointer',
|
|
borderRadius: '6px',
|
|
transition: 'all 0.3s ease',
|
|
marginBottom: '8px',
|
|
background: 'rgba(255, 255, 255, 0.03)'
|
|
}}>
|
|
<span style={{
|
|
color: '#fa8c16',
|
|
marginRight: '8px',
|
|
fontSize: '16px'
|
|
}}>📊</span>
|
|
Sales Overview
|
|
</li>
|
|
<li style={{
|
|
padding: '10px',
|
|
cursor: 'pointer',
|
|
borderRadius: '6px',
|
|
transition: 'all 0.3s ease',
|
|
marginBottom: '8px',
|
|
background: 'rgba(255, 255, 255, 0.03)'
|
|
}}>
|
|
<span style={{
|
|
color: '#fa8c16',
|
|
marginRight: '8px',
|
|
fontSize: '16px'
|
|
}}>📊</span>
|
|
Marketing Performance
|
|
</li>
|
|
<li style={{
|
|
padding: '10px',
|
|
cursor: 'pointer',
|
|
borderRadius: '6px',
|
|
transition: 'all 0.3s ease',
|
|
background: 'rgba(255, 255, 255, 0.03)'
|
|
}}>
|
|
<span
|
|
style={{
|
|
color: '#fa8c16',
|
|
marginRight: '8px',
|
|
fontSize: '16px'
|
|
}}
|
|
>📊</span>
|
|
Financial Summary
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
|
|
<main style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
|
|
{activeTab === 'canvas' && (
|
|
<>
|
|
<InfiniteCanvas />
|
|
<div style={{
|
|
position: 'absolute',
|
|
bottom: '20px',
|
|
left: '20px',
|
|
background: 'rgba(26, 26, 26, 0.8)',
|
|
padding: '12px 16px',
|
|
borderRadius: '8px',
|
|
boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
|
|
fontSize: '12px',
|
|
pointerEvents: 'none',
|
|
backdropFilter: 'blur(5px)',
|
|
border: '1px solid rgba(82, 196, 26, 0.3)',
|
|
color: '#ffffff',
|
|
maxWidth: '300px',
|
|
animation: 'fadeIn 0.5s ease'
|
|
}}>
|
|
<p style={{
|
|
margin: 0,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
fontSize: '13px'
|
|
}}>
|
|
<span style={{
|
|
display: 'inline-block',
|
|
width: '8px',
|
|
height: '8px',
|
|
background: '#52c41a',
|
|
borderRadius: '50%',
|
|
marginRight: '8px',
|
|
boxShadow: '0 0 8px #52c41a'
|
|
}}></span>
|
|
{/* Infinite Canvas - Zoom and pan without limits */}
|
|
The Only Limit is Your Imagination.
|
|
</p>
|
|
<p style={{
|
|
margin: '5px 0 0 16px',
|
|
fontSize: '11px',
|
|
opacity: 0.7
|
|
}}>
|
|
Scroll to zoom • Drag to pan • Connect nodes
|
|
</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{activeTab === 'charts' && (
|
|
<div style={{ padding: '20px', height: '100%', overflow: 'auto' }}>
|
|
<AdvancedCharts />
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'dataflow' && (
|
|
<>
|
|
<DataflowCanvas />
|
|
<div style={{
|
|
position: 'absolute',
|
|
bottom: '20px',
|
|
left: '20px',
|
|
background: 'rgba(26, 26, 26, 0.8)',
|
|
padding: '12px 16px',
|
|
borderRadius: '8px',
|
|
boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
|
|
fontSize: '12px',
|
|
pointerEvents: 'none',
|
|
backdropFilter: 'blur(5px)',
|
|
border: '1px solid rgba(250, 140, 22, 0.3)',
|
|
color: '#ffffff',
|
|
maxWidth: '300px',
|
|
animation: 'fadeIn 0.5s ease'
|
|
}}>
|
|
<p style={{
|
|
margin: 0,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
fontSize: '13px'
|
|
}}>
|
|
<span style={{
|
|
display: 'inline-block',
|
|
width: '8px',
|
|
height: '8px',
|
|
background: '#fa8c16',
|
|
borderRadius: '50%',
|
|
marginRight: '8px',
|
|
boxShadow: '0 0 8px #fa8c16'
|
|
}}></span>
|
|
Visualize data flows between tables
|
|
</p>
|
|
<p style={{
|
|
margin: '5px 0 0 16px',
|
|
fontSize: '11px',
|
|
opacity: 0.7
|
|
}}>
|
|
Add tables • Create processes • Connect data flows
|
|
</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|