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")