import time, json
from flask import Flask
import pandas as pd
import plotly
import plotly.express as px

app = Flask(__name__)

@app.route('/time')
def get_current_time():
    return {'time': time.time()}
    
@app.route('/plot')
def plot_test():
    df = pd.DataFrame({
        "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
        "Amount": [4, 1, 2, 2, 4, 5],
        "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
    })
    fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
    graphJSON = plotly.io.to_json(fig, pretty=True)
    return graphJSON

import React, { useState, useEffect } from 'react';
import Plot from 'react-plotly.js';

const Fund = () => {
    const [plot, setPlot] = useState(0);
    
    useEffect(() => {
      fetch('/plot').then(res => res.json()).then(data => {setPlot(data);});}, []);
      // console.log(plot)
    
    return (
      

      
Current Fund
      
      
    );
};

export default Fund;

{
  "data": [
        {
          "x": [1, 2, 3],
          "y": [2, 6, 3],
          "type": "scatter",
          "mode": "lines+markers",
          "marker": {
              "color": "red"
          }
        },
        {
          "type": "bar", 
          "x": [1, 2, 3], 
          "y": [2, 5, 3]
      }
  ],
  "layout": {
      "title": "A Fancy Plot"
  } 
}

import React from 'react';
import ReactDOM from 'react-dom/client';
import Plot from 'react-plotly.js';
import graphJSON from './graphJSON.json';

function App(){
  return(
    
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
);