Spaces:
Sleeping
Sleeping
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 | |
} | |
}, | |
}, | |
], | |
}, | |
}, | |
} | |
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 | |
def ViewListener(view_data=None, on_view_data=None, children=[], style={}): | |
pass | |
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) | |
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") | |