pages/visualization.py

import plotly.express as px
import pandas as pd
import os
# import leafmap
import leafmap.kepler as leafmap
import solara
import solara.website

zoom = solara.reactive(2)
center = solara.reactive((44.428,11.9086))
config = {'version': 'v1',
 'config': {'visState': {'filters': [{'dataId': ['data'],
     'id': 'Station',
     'name': ['ts'],
     'type': 'range',
     'value': [0, 1.68], ###time change here
     'enlarged': False,
     'plotType': 'histogram',
     'animationWindow': 'free',
     'yAxis': None,
     'speed': 1}],
   'layers': [{'id': 'Station',
     'type': 'geojson',
     'config': {
      'color': [18, 147, 154],
      'highlightColor': [252, 242, 26, 255],
      'columns': {'geojson': '_geojson'},
      'isVisible': True,
      'visConfig': {'opacity': 10.8,
       'strokeOpacity': 10.3,
       'thickness': 11,
       'strokeColor': [210, 0, 0],
       'colorRange': {'name': 'Global Warming',
        'type': 'sequential',
        'category': 'Uber',
        'colors': ['#5A1846',
         '#900C3F',
         '#C70039',
         '#E3611C',
         '#F1920E',
         '#FFC300']},
       'strokeColorRange': {'name': 'Ice And Fire',
        'type': 'diverging',
        'category': 'Uber',
        'colors': ['#0198BD',
         '#49E3CE',
         '#E8FEB5',
         '#FEEDB1',
         '#FEAD54',
         '#D50255']},
       'radius': 100,
       'sizeRange': [0, 100],
       'radiusRange': [0, 500],
       'heightRange': [0, 5000],
       'elevationScale': 50,
       'enableElevationZoomFactor': True,
       'stroked': True,
       'filled': False,
       'enable3d': False,
       'wireframe': False},
      'hidden': False,
      'textLabel': [{'field': None,
        'color': [255, 255, 255],
        'size': 18,
        'offset': [0, 0],
        'anchor': 'start',
        'alignment': 'center'}]},
     'visualChannels': {'colorField': None,
      'colorScale': 'quantile',
      'strokeColorScale': 'quantize',
      'sizeField': None,
      'sizeScale': 'linear',
      'heightField': None,
      'heightScale': 'linear',
      'radiusField': None,
      'radiusScale': 'linear'}}],
   'interactionConfig': {
    'brush': {'size': 0.5, 'enabled': False},
    'geocoder': {'enabled': False},
    'coordinate': {'enabled': False}},
   'layerBlending': 'additive',
   'splitMaps': [],
   'animationConfig': {'currentTime': None, 'speed': 1}},
  'mapState': {'bearing': 0,
   'dragRotate': False,
   'latitude': 44.43329,
   'longitude': 10.653654,
   'pitch': 0,
   'zoom': 8.776177236597563,
   'isSplit': False},
  'mapStyle': {'styleType': 'satellite',
   'topLayerGroups': {},
   'visibleLayerGroups': {'label': True,
    'road': True,
    'border': False,
    'building': True,
    'water': True,
    'land': True,
    '3d building': False},
   'threeDBuildingColor': [9.665468314072013,
    17.18305478057247,
    31.1442867897876],
   'mapStyles': {}}}}


class Map(leafmap.Map):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.center = kwargs['center']
        self.updateMap()
    def updateMap(self):

        # Add the GeoJSON data to the map
        point_feature = {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [self.center[1], self.center[0]]
            },
            "properties": {
                "name": "Station",
                "description": f"coordinates {self.center[1]}{self.center[0]}"
            }
        }
        if point_feature:
            geojson_data = {
                "type": "FeatureCollection",
                "features": [point_feature]
            }
            self.add_geojson(geojson_data, layer_name="Station")
            self.config = {
                'version': 'v1',
                'config': {
                    'mapStyle': {
                        'styleType': 'satellite'
                    },
                    'mapState': {'bearing': 0,
                        'dragRotate': False,
                        'latitude': self.center[0],
                        'longitude': self.center[1],
                        'pitch': 0,
                        'zoom': 14.5,
                        'isSplit': False},
                    'visState': {
                        'layers': [
                            {
                                'type': 'point',
                                'config': {
                                    'colorRange': {
                                        'colors': ['#ff0000'],
                                        'domain': [0, 100],
                                        'size': 100
                                    },
                                    'visConfig': {
                                        'radius': 1000,  # Adjust the size of the points
                                        'opacity': 0.8,  # Adjust the opacity of the points
                                    }
                                },
                            },
                        ],
                    },
                },
            }



@solara.component
def MapComponent(lat,lon):
    
    m = Map(center=(lat,lon))
    m.element(  # type: ignore
        zoom=zoom.value,
        on_zoom=zoom.set,
        center=(lat,lon),
        on_center=center.set((lat,lon)),
        scroll_wheel_zoom=True,
        toolbar_ctrl=False,
        data_ctrl=False,
    )
    m.config = config


@solara.component_vue("viewlistener.vue")
def ViewListener(view_data=None, on_view_data=None, children=[], style={}):
    pass


@solara.component
def PlotComponent(data):
    dpi = 100
    
    view_data = solara.use_reactive({"width": "100%", "height": 400})
    df = pd.read_csv(data)    
    df['data'] = pd.to_datetime(df['data'],format='%d/%m/%Y %H:%M:%S')
    
    df['Week_Number'] = df['data'].dt.isocalendar().week

    df_by_week = df.groupby("Week_Number")[['Real', '90%_forecast', '10%_forecast', 'average_forecast+']].mean().reset_index()
    
    fig = px.line(df_by_week, x='Week_Number', y=['Real', '90%_forecast', '10%_forecast', 'average_forecast+'], title='Time Series 2020')
    fig.update_xaxes(rangeslider_visible=True)
    fig.update_layout(
        autosize=True,
        width=800,
        height=650,
    )
    # solara.FigurePlotly(fig)


    with ViewListener(view_data=view_data.value, on_view_data=view_data.set, style={"width": "100%", "height": "70vh"}):
        solara.FigurePlotly(fig)


@solara.component
def Page():
    icisk_logo_path = os.getcwd()+"/assets/icisk_logo_full.png"
    geco_logo_path = os.getcwd()+"/assets/logo-sito-800x400.png"


    open_station_1, set_open_station_1 = solara.use_state(False)
    open_station_2, set_open_station_2 = solara.use_state(False)
    def select_station_2():
        set_map_loaded(False)
        set_open_station_2(True)
        set_open_station_1(False)
        set_map_loaded(True)
    def select_station_1():
        set_map_loaded(False)
        set_open_station_1(True)
        set_open_station_2(False)
        set_map_loaded(True)
    with solara.ColumnsResponsive([3,4,4,1]): 
        solara.Image(icisk_logo_path,width="50%")
        solara.Column()
        solara.Column()
        solara.Image(geco_logo_path,width="100%")

    with solara.Column(style={"min-width": "500px"}):

        size, set_size = solara.use_state(0)
        map_loaded, set_map_loaded = solara.use_state(False)

        continuous_update = solara.reactive(True)

        with solara.Div() as main:
            
            with solara.Card("LL2 Italy"):
                with solara.ColumnsResponsive(1, large=10): 
                    solara.Button("Station 1",
                                    color="primary",
                                    on_click=select_station_1)
                    solara.Button("Station 2",
                                    color="primary",
                                    style={"margin":10},
                                    on_click=select_station_2)
                
                with solara.ColumnsResponsive(3, large=6): 
                    if map_loaded:

                        if open_station_1:
                            MapComponent(44.43329,10.653654)  
                            PlotComponent(os.getcwd()+"/data/dati_1.csv")
                        if open_station_2:
                            MapComponent(44.430042,10.667628)  
                            PlotComponent(os.getcwd()+"/data/dati_2.csv")