dash_for_pv_app.ipynb

{
 "cells": [
  {
   "source": [
    "#### Dash 1"
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "output_type": "stream",
     "name": "stdout",
     "text": [
      "Dash app running on http://127.0.0.1:8124/\n"
     ]
    }
   ],
   "source": [
    "import plotly.express as px\n",
    "import plotly.graph_objects as go\n",
    "from plotly.subplots import make_subplots\n",
    "from jupyter_dash import JupyterDash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "from dash.dependencies import Input, Output\n",
    "import pandas\n",
    "\n",
    "customer_feather = 'data/customer.feather'\n",
    "weather_feather = 'data/weather.feather'\n",
    "\n",
    "customer =  pandas.read_feather(customer_feather)\n",
    "weather = pandas.read_feather(weather_feather)\n",
    "\n",
    "subs = customer['Substation'].value_counts(dropna=False).keys().tolist()\n",
    "sites = weather['Site'].value_counts(dropna=False).keys().tolist()\n",
    "\n",
    "# Build App\n",
    "external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']\n",
    "\n",
    "app = JupyterDash(__name__, external_stylesheets=external_stylesheets)\n",
    "\n",
    "colors = {\n",
    "    'background': '#FFFFFF',\n",
    "    'text': '#091D58'\n",
    "}\n",
    "\n",
    "app.layout = html.Div(style={'backgroundColor': colors['background']},\n",
    "    children=[\n",
    "        html.Div([\n",
    "            html.H1(\n",
    "                children=\"Pv data visualization\",\n",
    "                style={\n",
    "                    'textAlign': 'center',\n",
    "                    'color': colors['text']\n",
    "                    }\n",
    "                ),\n",
    "            html.Div(\n",
    "                children='Selection (from TenMinDataCustomerEndpoints.xlsx):',\n",
    "                style={\n",
    "                    'color': colors['text']\n",
    "                    }\n",
    "                ),\n",
    "            dcc.Dropdown(\n",
    "                id=\"ticker1\",\n",
    "                options=[{\"label\": x, \"value\": x} \n",
    "                    for x in ['P_GEN', 'Q_GEN', 'S_GEN']],\n",
    "                value='P_GEN',\n",
    "                clearable=False,\n",
    "                style={\n",
    "                    'color': colors['text']\n",
    "                    }\n",
    "                ),\n",
    "            dcc.Graph(id='graph1')\n",
    "        ]),\n",
    "        html.Div([\n",
    "            html.Div(\n",
    "                children='Selection (from WeatherData2014-11-30.xlsx):',\n",
    "                style={\n",
    "                    'color': colors['text']\n",
    "                    }\n",
    "                ),\n",
    "            dcc.Dropdown(\n",
    "                id=\"ticker2\",\n",
    "                options=[{\"label\": x, \"value\": x} \n",
    "                    for x in ['TempOut', 'SolarRad', 'SolarEnergy', 'HiSolarRad']],\n",
    "                value='SolarRad',\n",
    "                clearable=False,\n",
    "                style={\n",
    "                    'color': colors['text']\n",
    "                    }\n",
    "                ),\n",
    "            dcc.Graph(id='graph2')\n",
    "        ])\n",
    "])\n",
    "\n",
    "#graph1\n",
    "# Define callback to update graph\n",
    "@app.callback(\n",
    "    Output('graph1', 'figure'),\n",
    "    [Input(\"ticker1\", \"value\")]\n",
    ")\n",
    "\n",
    "def update_figure(ticker1):\n",
    "\n",
    "    fig = make_subplots(6, 1, y_title = ticker1,\n",
    "    subplot_titles = tuple(s for s in subs),\n",
    "    shared_xaxes=True)\n",
    "\n",
    "    s=0\n",
    "    for i in range(1, 7):\n",
    "        fig.add_trace(go.Scattergl(x=customer[customer.Substation == subs[s]].datetime, \n",
    "        y=customer[customer.Substation == subs[s]][ticker1], name=subs[s]), i, 1)\n",
    "        s+=1\n",
    "\n",
    "    # style all the traces\n",
    "    fig.update_traces(\n",
    "        line={\"width\": 0.5},\n",
    "        marker={\"size\": 3},\n",
    "        mode=\"lines+markers\",\n",
    "        showlegend=True\n",
    "    )\n",
    "\n",
    "    fig.update_layout(\n",
    "        plot_bgcolor=colors['background'],\n",
    "        paper_bgcolor=colors['background'],\n",
    "        font_color=colors['text'],\n",
    "        dragmode=\"zoom\", template=\"plotly_white\", legend_orientation=\"v\", xaxis6_rangeslider_visible=True,\n",
    "        xaxis6_rangeslider_thickness=0.05, xaxis6_rangeslider_bgcolor=colors['text'] , height=1000,\n",
    "        xaxis1=dict(\n",
    "            rangeselector=dict(\n",
    "                buttons=list([\n",
    "                    dict(count=1,\n",
    "                    label=\"1d\",\n",
    "                    step=\"day\",\n",
    "                    stepmode=\"backward\"),\n",
    "                    dict(count=1,\n",
    "                    label=\"1m\",\n",
    "                    step=\"month\",\n",
    "                    stepmode=\"backward\"),\n",
    "                    dict(count=6,\n",
    "                    label=\"6m\",\n",
    "                    step=\"month\",\n",
    "                    stepmode=\"backward\"),\n",
    "                    dict(step=\"all\")\n",
    "                ])\n",
    "            )\n",
    "        ))\n",
    "\n",
    "    return fig\n",
    "\n",
    "#graph2\n",
    "# Define callback to update graph\n",
    "@app.callback(\n",
    "    Output('graph2', 'figure'),\n",
    "    [Input(\"ticker2\", \"value\")]\n",
    ")\n",
    "\n",
    "def update_figure(ticker2):\n",
    "\n",
    "    fig = make_subplots(5, 1, y_title = ticker2,\n",
    "    subplot_titles = tuple(s for s in sites),\n",
    "    shared_xaxes=True)\n",
    "\n",
    "    s=0\n",
    "    for i in range(1, 6):\n",
    "        fig.add_trace(go.Scattergl(x=weather[weather.Site == sites[s]].Datetime, \n",
    "        y=weather[weather.Site == sites[s]][ticker2], name=sites[s]), i, 1)\n",
    "        s+=1\n",
    "\n",
    "    # style all the traces\n",
    "    fig.update_traces(\n",
    "        line={\"width\": 0.5},\n",
    "        marker={\"size\": 3},\n",
    "        mode=\"lines+markers\",\n",
    "        showlegend=True\n",
    "    )\n",
    "\n",
    "    fig.update_layout(\n",
    "        plot_bgcolor=colors['background'],\n",
    "        paper_bgcolor=colors['background'],\n",
    "        font_color=colors['text'],\n",
    "        dragmode=\"zoom\", template=\"plotly_white\", legend_orientation=\"v\", xaxis5_rangeslider_visible=True,\n",
    "        xaxis5_rangeslider_thickness=0.05, xaxis5_rangeslider_bgcolor=colors['text'] , height=1000,\n",
    "        xaxis1=dict(\n",
    "            rangeselector=dict(\n",
    "                buttons=list([\n",
    "                    dict(count=1,\n",
    "                    label=\"1d\",\n",
    "                    step=\"day\",\n",
    "                    stepmode=\"backward\"),\n",
    "                    dict(count=1,\n",
    "                    label=\"1m\",\n",
    "                    step=\"month\",\n",
    "                    stepmode=\"backward\"),\n",
    "                    dict(count=6,\n",
    "                    label=\"6m\",\n",
    "                    step=\"month\",\n",
    "                    stepmode=\"backward\"),\n",
    "                    dict(step=\"all\")\n",
    "                ])\n",
    "            )\n",
    "        ))\n",
    "\n",
    "    return fig               \n",
    "\n",
    "# Run app and display result inline in the notebook\n",
    "app.run_server(mode='external', port=8124, debug=True)"
   ]
  },
  {
   "source": [
    "#### Dash 2"
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "output_type": "stream",
     "name": "stdout",
     "text": [
      "Dash app running on http://127.0.0.1:8050/\n"
     ]
    }
   ],
   "source": [
    "import plotly.express as px\n",
    "import plotly.graph_objects as go\n",
    "from plotly.subplots import make_subplots\n",
    "from jupyter_dash import JupyterDash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "from dash_extensions import Download\n",
    "from dash_extensions.snippets import send_data_frame\n",
    "from dash.dependencies import Input, Output\n",
    "import numpy as np\n",
    "import pandas\n",
    "import json\n",
    "\n",
    "button1_state = 0\n",
    "button2_state = 0\n",
    "\n",
    "customer_feather = 'data/customer_cleansed.feather'\n",
    "weather_feather = 'data/weather_cleansed.feather'\n",
    "\n",
    "customer =  pandas.read_feather(customer_feather)\n",
    "weather = pandas.read_feather(weather_feather)\n",
    "\n",
    "weather.drop(['OutHum', 'WindSpeed', 'WindDir', 'WindRun', 'Rain'], axis=1, inplace=True)\n",
    "\n",
    "# mapbox_token = open(\".mapbox_token\").read()\n",
    "\n",
    "with open('data/locations.txt') as json_file:\n",
    "    locations = json.load(json_file)\n",
    "       \n",
    "# Build App\n",
    "external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']\n",
    "\n",
    "app = JupyterDash(__name__, external_stylesheets=external_stylesheets, prevent_initial_callbacks=True)\n",
    "\n",
    "colors = {\n",
    "    'background': '#FFFFFF',\n",
    "    'text': '#091D58',\n",
    "    'text_sub': '#07AD93',\n",
    "    'text_site': '#430B95'\n",
    "}\n",
    "\n",
    "app.layout = html.Div(style={'backgroundColor': colors['background']}, children = [\n",
    "    html.Div(children=[\n",
    "\n",
    "        html.H1('Pv data visualization', style={'textAlign': 'center', 'color': colors['text']}),\n",
    "\n",
    "        #---------------------\n",
    "        html.Div([\n",
    "            html.Div([\n",
    "\n",
    "                html.Div([\n",
    "                    html.Div(children = [\n",
    "                        html.H3('Substation:', style={'paddingRight': '30px', 'fontSize': 18, 'color': colors['text_sub'], 'font-weight': 'bold'}),\n",
    "                        dcc.Dropdown(\n",
    "                            id='subs_ticker',\n",
    "                            options=[\n",
    "                                {'label': i, 'value': i} for i in customer.Substation.unique()\n",
    "                                ], multi=True,\n",
    "                            value=[], \n",
    "                            style={'color': colors['text']},\n",
    "                            placeholder=\"Select a substation\",\n",
    "                        )\n",
    "                    ], style={\"width\": \"40%\"}, className=\"six columns\"),\n",
    "\n",
    "                    html.Div([\n",
    "                        html.H3('Signal:', style={'paddingRight': '30px', 'fontSize': 18, 'color': colors['text_sub'], 'font-weight': 'bold'}),\n",
    "                        dcc.Dropdown(\n",
    "                            id='signal1_ticker',\n",
    "                            options=[\n",
    "                                {'label': i, 'value': i} for i in ['P_GEN', 'Q_GEN', 'S_GEN']\n",
    "                                ], multi=True,\n",
    "                            value=[],\n",
    "                            style={'color': colors['text']}\n",
    "                        ),\n",
    "                    ], style={\"width\": \"40%\"}, className=\"six columns\"),\n",
    "\n",
    "                ], className=\"row\"),\n",
    "\n",
    "                html.Div([\n",
    "                    html.Div([\n",
    "                        html.H3('Weather site:', style={'paddingRight': '30px', 'fontSize': 18, 'color': colors['text_site'], 'font-weight': 'bold'}),\n",
    "                        dcc.Dropdown(\n",
    "                            id='sites_ticker',\n",
    "                            options=[\n",
    "                                {'label': i, 'value': i} for i in weather.Site.unique()\n",
    "                                ], multi=True,\n",
    "                            value=[],\n",
    "                            style={'color': colors['text']},\n",
    "                            placeholder=\"Select a weather site\"\n",
    "                        ),\n",
    "                    ], style={\"width\": \"40%\"}, className=\"six columns\"),\n",
    "                    html.Div([\n",
    "                        html.H3('Signal:', style={'paddingRight': '30px', 'fontSize': 18, 'color': colors['text_site'], 'font-weight': 'bold'}),\n",
    "                        dcc.Dropdown(\n",
    "                            id='signal2_ticker',\n",
    "                            options=[\n",
    "                                {'label': i, 'value': i} for i in ['TempOut', 'SolarRad', 'SolarEnergy', 'HiSolarRad']\n",
    "                                ], multi=True,\n",
    "                            value=[],\n",
    "                            style={'color': colors['text']},\n",
    "                        ),\n",
    "                    ], style={\"width\": \"40%\"}, className=\"six columns\")\n",
    "                ], className=\"row\"),\n",
    "\n",
    "                html.Div([\n",
    "                    html.H3('Ratios:', style={'paddingRight': '30px', 'fontSize': 18, 'color': colors['text']}),\n",
    "                    dcc.Dropdown(\n",
    "                        id='ratio_ticker',\n",
    "                        options=[\n",
    "                            {'label': i, 'value': i} for i in [\n",
    "                                'P_GEN/SolarRad', 'P_GEN/SolarEnergy',\n",
    "                                'Q_GEN/SolarRad', 'Q_GEN/SolarEnergy',\n",
    "                                'S_GEN/SolarRad', 'S_GEN/SolarEnergy']\n",
    "                            ], multi=True,\n",
    "                        value=[],\n",
    "                        style={'color': colors['text']},\n",
    "                    ),\n",
    "                ], style={\"width\": \"85%\"}),\n",
    "\n",
    "                html.H3('Download displayed traces:', style={'paddingRight': '30px', 'fontSize': 18, 'color': colors['text']}),\n",
    "                html.Div([\n",
    "                    html.Div([\n",
    "                        html.Button(\"Substations Traces\", id=\"btn1\"), Download(id=\"download1\")\n",
    "                    ], className=\"six columns\", style={\"width\": \"20%\", 'color': colors['text']}),\n",
    "                    html.Div([\n",
    "                        html.Button(\"Weather Traces\", id=\"btn2\"), Download(id=\"download2\")\n",
    "                    ], className=\"six columns\", style={\"width\": \"20%\", 'color': colors['text'], 'padding-left':'25%'})\n",
    "                ], className=\"row\"),\n",
    "\n",
    "            ], className=\"six columns\"),\n",
    "            #------------------\n",
    "\n",
    "            html.Div([\n",
    "                dcc.Graph(id='map')\n",
    "            ], className=\"six columns\"),\n",
    "        ], className=\"row\", style={'marginTop': '5em','padding-left':'10%', 'padding-right':'15%', 'verical-align': 'center'}),\n",
    "        #---------------\n",
    "\n",
    "        html.Div([\n",
    "            dcc.Graph(id='graph')\n",
    "        ], style={'padding-left':'1%', 'padding-right':'1%'}),\n",
    "        ]),\n",
    "\n",
    "    html.Div(children=[\n",
    "\n",
    "        html.Div([\n",
    "\n",
    "            # two dropdown menu\n",
    "            html.Div([\n",
    "\n",
    "                # substation dropdown\n",
    "                html.Div([\n",
    "                    html.H1('Correlations', style={'textAlign': 'left', 'fontSize': 20, 'color': colors['text']}),\n",
    "                    html.H3('Substation:', style={'paddingRight': '30px', 'fontSize': 18, 'color': colors['text']}),\n",
    "                    dcc.Dropdown(\n",
    "                        id='subs_ticker_corr',\n",
    "                        options=[\n",
    "                            {'label': i, 'value': i} for i in customer.Substation.unique()\n",
    "                            ], multi=False, clearable=False,\n",
    "                        value='Forest Road', \n",
    "                        style={'color': colors['text']}\n",
    "                    ),\n",
    "                ]),\n",
    "\n",
    "                # weather site dropdown\n",
    "                html.Div([\n",
    "                    html.H3('Weather site:', style={'paddingRight': '30px', 'fontSize': 18, 'color': colors['text']}),\n",
    "                    dcc.Dropdown(\n",
    "                        id='sites_ticker_corr',\n",
    "                        options=[\n",
    "                            {'label': i, 'value': i} for i in weather.Site.unique()\n",
    "                            ], multi=False, clearable=False,\n",
    "                        value='Forest Road', \n",
    "                        style={'color': colors['text']}\n",
    "                    ),\n",
    "                ]),\n",
    "\n",
    "            ], className='three columns'),\n",
    "\n",
    "            # first image \n",
    "            html.Div(\n",
    "                children = [\n",
    "                    dcc.Graph(id='corr_c')\n",
    "            ], className='three columns'),\n",
    "\n",
    "            # second image\n",
    "            html.Div(\n",
    "                children = [\n",
    "                    dcc.Graph(id='corr_w')\n",
    "            ], className='three columns'),\n",
    "\n",
    "            # third image \n",
    "            html.Div(\n",
    "                children = [\n",
    "                    dcc.Graph(id='corr_tot')\n",
    "                ], className = 'three columns'),\n",
    "\n",
    "        ], className='row', style = {'padding-left':'5%', 'padding-right':'10%'})\n",
    "\n",
    "    ])\n",
    "\n",
    "])\n",
    "\n",
    "###########\n",
    "@app.callback(Output(\"download1\", \"data\"),\n",
    "[Input(\"btn1\", \"n_clicks\"),\n",
    "Input('subs_ticker', 'value'),\n",
    "Input('signal1_ticker', 'value')])\n",
    "def func(n_clicks, selected_subs, selected_sig1):\n",
    "    global button1_state\n",
    "    if n_clicks is not None:\n",
    "        if n_clicks > button1_state:\n",
    "            selected_sig1.append('Substation')\n",
    "            selected_sig1.append('datetime')\n",
    "            sel_customer = customer[selected_sig1]\n",
    "            sel_customer = sel_customer[sel_customer['Substation'].isin(selected_subs)]\n",
    "\n",
    "            button1_state += 1\n",
    "\n",
    "            return send_data_frame(sel_customer.to_excel, \"substations.xls\", index=False)\n",
    "\n",
    "\n",
    "@app.callback(Output(\"download2\", \"data\"),\n",
    "[Input(\"btn2\", \"n_clicks\"),\n",
    "Input('sites_ticker', 'value'),\n",
    "Input('signal2_ticker', 'value')])\n",
    "def func(n_clicks, selected_sites, selected_sig2):\n",
    "    global button2_state\n",
    "    if n_clicks is not None:\n",
    "        if n_clicks > button2_state:\n",
    "            selected_sig2.append('Site')\n",
    "            selected_sig2.append('datetime')\n",
    "            sel_weather = weather[selected_sig2]\n",
    "            sel_weather = sel_weather[sel_weather['Site'].isin(selected_sites)]\n",
    "\n",
    "            button2_state += 1\n",
    "\n",
    "            return send_data_frame(sel_weather.to_excel, \"weather.xls\", index=False)\n",
    "################\n",
    "\n",
    "@app.callback(Output('map', 'figure'),\n",
    "[Input('subs_ticker', 'value'),\n",
    "Input('sites_ticker', 'value')])\n",
    "def update_map(selected_subs, selected_sites):\n",
    "\n",
    "    fig = go.Figure()\n",
    "\n",
    "    lat = []\n",
    "    lon = []\n",
    "    text = []\n",
    "    for sub in selected_subs:\n",
    "        lat.append(locations[sub]['lat'])\n",
    "        lon.append(locations[sub]['lon'])\n",
    "        text.append(sub)\n",
    "    for site in selected_sites:\n",
    "        lat.append(locations[site]['lat'])\n",
    "        lon.append(locations[site]['lon'])\n",
    "        text.append(site)    \n",
    "\n",
    "    fig = go.Figure(go.Scattermapbox(\n",
    "            lat=lat,\n",
    "            lon=lon,\n",
    "            mode='markers',\n",
    "            marker=go.scattermapbox.Marker(\n",
    "                size=14\n",
    "            ),\n",
    "            text=text,\n",
    "        ))\n",
    "\n",
    "    fig.update_layout(\n",
    "        hovermode='closest',\n",
    "        mapbox=dict(\n",
    "            #accesstoken=mapbox_token,\n",
    "            bearing=0,\n",
    "            style = 'open-street-map',\n",
    "            center=go.layout.mapbox.Center(\n",
    "                lat=51.89,\n",
    "                lon=0.93\n",
    "            ),\n",
    "            pitch=0,\n",
    "            zoom=5\n",
    "        ),\n",
    "        margin=dict(l=0, r=0, t=0, b=0),\n",
    "        width=500, \n",
    "        height=400\n",
    "    )\n",
    "\n",
    "    return fig\n",
    "\n",
    "@app.callback(Output('graph', 'figure'),\n",
    "[Input('subs_ticker', 'value'),\n",
    "Input('signal1_ticker', 'value'),\n",
    "Input('sites_ticker', 'value'),\n",
    "Input('signal2_ticker', 'value'),\n",
    "Input('ratio_ticker', 'value')])\n",
    "def update_graph(selected_subs, selected_sig1, selected_sites, selected_sig2, selected_ratios):\n",
    "    fig = go.Figure()\n",
    "\n",
    "    for x in selected_subs:\n",
    "        for y in selected_sig1:\n",
    "            fig.add_trace(go.Scattergl(x=customer[customer.Substation == x].datetime, y=customer[customer.Substation == x][y],\n",
    "            name = str(x) + ' ' + str(y)))\n",
    "\n",
    "    for x in selected_sites:\n",
    "        for y in selected_sig2:\n",
    "            fig.add_trace(go.Scattergl(x=weather[weather.Site == x].datetime, y=weather[weather.Site == x][y],\n",
    "            name = str(x) + ' ' + str(y)))\n",
    "\n",
    "    for sub in selected_subs:\n",
    "        for site in selected_sites:\n",
    "            for ratio in selected_ratios: # P_GEN/SolarRad\n",
    "                weather_upsampled = weather[weather.Site == site].set_index('datetime').resample('10T').asfreq().reset_index()\n",
    "                denom = weather_upsampled[ratio[6:]]\n",
    "                num = customer[customer.Substation == sub][ratio[0:5]]\n",
    "                fig.add_trace(go.Scattergl(x=customer[customer.Substation == sub].datetime, y=num.divide(denom).replace(np.inf, 0),\n",
    "                name = str(sub) + ' ' + str(ratio[0:5]) + '\\\\' + str(site) + ' ' + str(ratio[6:])))\n",
    "\n",
    "    fig.update_traces(\n",
    "        line={\"width\": 0.5},\n",
    "        marker={\"size\": 3},\n",
    "        mode=\"lines+markers\",\n",
    "        showlegend=True\n",
    "    )\n",
    "\n",
    "    fig.update_layout(\n",
    "        plot_bgcolor=colors['background'],\n",
    "        paper_bgcolor=colors['background'],\n",
    "        font_color=colors['text'],\n",
    "        dragmode=\"zoom\", template=\"plotly_white\", legend_orientation=\"v\", xaxis_rangeslider_visible=True,\n",
    "        xaxis_rangeslider_thickness=0.1, xaxis_rangeslider_bgcolor=colors['text'],\n",
    "        xaxis=dict(\n",
    "            rangeselector=dict(\n",
    "                buttons=list([\n",
    "                    dict(count=1,\n",
    "                    label=\"1d\",\n",
    "                    step=\"day\",\n",
    "                    stepmode=\"backward\"),\n",
    "                    dict(count=1,\n",
    "                    label=\"1m\",\n",
    "                    step=\"month\",\n",
    "                    stepmode=\"backward\"),\n",
    "                    dict(step=\"all\")\n",
    "                ])\n",
    "            )\n",
    "        ))\n",
    "    \n",
    "    return fig\n",
    "\n",
    "@app.callback(\n",
    "    Output('corr_c', 'figure'),\n",
    "    Input('subs_ticker_corr', 'value')\n",
    "    )\n",
    "def update_graph_c(selected_sub):\n",
    "\n",
    "    corr_c = customer[customer.Substation == selected_sub][['P_GEN', 'Q_GEN', 'S_GEN']].corr()\n",
    "    #corr_w = weather[weather.Site == selected_site][['TempOut', 'SolarRad', 'SolarEnergy', 'HiSolarRad']].corr()\n",
    "\n",
    "    fig = go.Figure(go.Heatmap(\n",
    "                        z=corr_c,\n",
    "                        x=corr_c.columns,\n",
    "                    y=corr_c.columns,\n",
    "                    hoverongaps = False,\n",
    "                    colorbar = dict(x=1.2)))\n",
    "\n",
    "    fig.update_layout(\n",
    "        title={\n",
    "            'text': \"Customer Substation\",\n",
    "            'y':0.15,\n",
    "            'x':0.5,\n",
    "            'xanchor': 'center',\n",
    "            'yanchor': 'middle'})\n",
    "\n",
    "    fig.update_layout(height=300, width=300)\n",
    "    fig.update_xaxes(side=\"top\")\n",
    "\n",
    "    return fig\n",
    "\n",
    "@app.callback(\n",
    "    Output('corr_w', 'figure'),\n",
    "    Input('sites_ticker_corr', 'value')\n",
    "    )\n",
    "def update_graph_w(selected_site):\n",
    "\n",
    "    corr_w = weather[weather.Site == selected_site][['TempOut', 'SolarRad', 'SolarEnergy', 'HiSolarRad']].corr()\n",
    "\n",
    "    fig = go.Figure(go.Heatmap(\n",
    "                        z=corr_w,\n",
    "                        x=corr_w.columns,\n",
    "                    y=corr_w.columns,\n",
    "                    hoverongaps = False,\n",
    "                    colorbar = dict(x=1.2)))\n",
    "    fig.update_layout(\n",
    "        title={\n",
    "            'text': \"Weather Site\",\n",
    "            'y':0.15,\n",
    "            'x':0.5,\n",
    "            'xanchor': 'center',\n",
    "            'yanchor': 'middle'})\n",
    "\n",
    "    fig.update_layout(height=300, width=300)\n",
    "    fig.update_xaxes(side=\"top\")\n",
    "\n",
    "    return fig\n",
    "\n",
    "@app.callback(\n",
    "    Output('corr_tot', 'figure'),\n",
    "    [\n",
    "        Input('subs_ticker_corr', 'value'),\n",
    "        Input('sites_ticker_corr', 'value')\n",
    "    ]\n",
    ")\n",
    "def update_graph_tot(selected_sub, selected_site):\n",
    "\n",
    "    w = weather[weather.Site == selected_sub].set_index('datetime').resample('10T').asfreq().reset_index()\n",
    "    c = customer[customer.Substation == selected_site]\n",
    "\n",
    "    # Setting the timestamp as the index\n",
    "    c = c.set_index('datetime')\n",
    "    w = w.set_index('datetime')\n",
    "\n",
    "    # perform a join and that's it\n",
    "    joined = c.join(w, how='outer')\n",
    "\n",
    "    corr = joined[['P_GEN', 'Q_GEN', 'S_GEN', 'TempOut', 'SolarRad',\n",
    "        'SolarEnergy', 'HiSolarRad']].corr()\n",
    "\n",
    "    fig = go.Figure(data=go.Heatmap(\n",
    "                        z=corr,\n",
    "                        x=corr.columns,\n",
    "                    y=corr.columns,\n",
    "                    hoverongaps = False))\n",
    "\n",
    "    fig.update_layout(\n",
    "        title={\n",
    "            'text': \"Correlation for the joined datasets\",\n",
    "            'y':0.15,\n",
    "            'x':0.5,\n",
    "            'xanchor': 'center',\n",
    "            'yanchor': 'middle'})\n",
    "\n",
    "    fig.update_layout(width = 300, height = 300)\n",
    "    fig.update_xaxes(side=\"top\")\n",
    "\n",
    "    return fig\n",
    "\n",
    "# Run app and display result inline in the notebook\n",
    "app.run_server(mode='external', debug=True)"
   ]
  },
  {
   "source": [
    "#### Dash 3"
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "output_type": "stream",
     "name": "stdout",
     "text": [
      "Dash app running on http://127.0.0.1:8050/\n"
     ]
    }
   ],
   "source": [
    "import plotly.express as px\n",
    "import plotly.graph_objects as go\n",
    "from plotly.subplots import make_subplots\n",
    "from jupyter_dash import JupyterDash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "from dash_extensions import Download\n",
    "from dash_extensions.snippets import send_data_frame\n",
    "from dash.dependencies import Input, Output, State\n",
    "import numpy as np\n",
    "import pandas\n",
    "import json\n",
    "\n",
    "customer_feather = 'data/customer_cleansed.feather'\n",
    "weather_feather = 'data/weather_cleansed.feather'\n",
    "\n",
    "customer =  pandas.read_feather(customer_feather)\n",
    "weather = pandas.read_feather(weather_feather)\n",
    "\n",
    "weather.drop(['OutHum', 'WindSpeed', 'WindDir', 'WindRun', 'Rain'], axis=1, inplace=True)\n",
    "\n",
    "# mapbox_token = open(\".mapbox_token\").read()\n",
    "\n",
    "with open('data/locations.txt') as json_file:\n",
    "    locations = json.load(json_file)\n",
    "       \n",
    "# Build App\n",
    "external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']\n",
    "\n",
    "app = JupyterDash(__name__, external_stylesheets=external_stylesheets, prevent_initial_callbacks=True)\n",
    "\n",
    "colors = {\n",
    "    'background': '#FFFFFF',\n",
    "    'text': '#091D58',\n",
    "    'text_sub': '#07AD93',\n",
    "    'text_site': '#430B95'\n",
    "}\n",
    "\n",
    "app.layout = html.Div(style={'backgroundColor': colors['background']}, children = [\n",
    "    html.Div(children=[\n",
    "\n",
    "        html.H1('Pv data visualization', style={'textAlign': 'center', 'color': colors['text']}),\n",
    "\n",
    "        #---------------------\n",
    "        html.Div([\n",
    "            html.Div([\n",
    "\n",
    "                html.Div([\n",
    "                    html.Div(children = [\n",
    "                        html.H3('Substation:', style={'paddingRight': '30px', 'fontSize': 18, 'color': colors['text_sub'], 'font-weight': 'bold'}),\n",
    "                        dcc.Dropdown(\n",
    "                            id='subs_ticker',\n",
    "                            options=[\n",
    "                                {'label': i, 'value': i} for i in customer.Substation.unique()\n",
    "                                ], multi=True,\n",
    "                            value=[], \n",
    "                            style={'color': colors['text']},\n",
    "                            placeholder=\"Select a substation\",\n",
    "                        )\n",
    "                    ], style={\"width\": \"40%\"}, className=\"six columns\"),\n",
    "\n",
    "                    html.Div([\n",
    "                        html.H3('Signal:', style={'paddingRight': '30px', 'fontSize': 18, 'color': colors['text_sub'], 'font-weight': 'bold'}),\n",
    "                        dcc.Dropdown(\n",
    "                            id='signal1_ticker',\n",
    "                            options=[\n",
    "                                {'label': i, 'value': i} for i in ['P_GEN', 'Q_GEN', 'S_GEN']\n",
    "                                ], multi=True,\n",
    "                            value=[],\n",
    "                            style={'color': colors['text']}\n",
    "                        ),\n",
    "                    ], style={\"width\": \"40%\"}, className=\"six columns\"),\n",
    "\n",
    "                ], className=\"row\"),\n",
    "\n",
    "                html.Div([\n",
    "                    html.Div([\n",
    "                        html.H3('Weather site:', style={'paddingRight': '30px', 'fontSize': 18, 'color': colors['text_site'], 'font-weight': 'bold'}),\n",
    "                        dcc.Dropdown(\n",
    "                            id='sites_ticker',\n",
    "                            options=[\n",
    "                                {'label': i, 'value': i} for i in weather.Site.unique()\n",
    "                                ], multi=True,\n",
    "                            value=[],\n",
    "                            style={'color': colors['text']},\n",
    "                            placeholder=\"Select a weather site\"\n",
    "                        ),\n",
    "                    ], style={\"width\": \"40%\"}, className=\"six columns\"),\n",
    "                    html.Div([\n",
    "                        html.H3('Signal:', style={'paddingRight': '30px', 'fontSize': 18, 'color': colors['text_site'], 'font-weight': 'bold'}),\n",
    "                        dcc.Dropdown(\n",
    "                            id='signal2_ticker',\n",
    "                            options=[\n",
    "                                {'label': i, 'value': i} for i in ['TempOut', 'SolarRad', 'SolarEnergy', 'HiSolarRad']\n",
    "                                ], multi=True,\n",
    "                            value=[],\n",
    "                            style={'color': colors['text']},\n",
    "                        ),\n",
    "                    ], style={\"width\": \"40%\"}, className=\"six columns\")\n",
    "                ], className=\"row\"),\n",
    "\n",
    "                html.Div([\n",
    "                    html.H3('Ratios:', style={'paddingRight': '30px', 'fontSize': 18, 'color': colors['text']}),\n",
    "                    dcc.Dropdown(\n",
    "                        id='ratio_ticker',\n",
    "                        options=[\n",
    "                            {'label': i, 'value': i} for i in [\n",
    "                                'P_GEN/SolarRad', 'P_GEN/SolarEnergy',\n",
    "                                'Q_GEN/SolarRad', 'Q_GEN/SolarEnergy',\n",
    "                                'S_GEN/SolarRad', 'S_GEN/SolarEnergy']\n",
    "                            ], multi=True,\n",
    "                        value=[],\n",
    "                        style={'color': colors['text']},\n",
    "                    ),\n",
    "                ], style={\"width\": \"85%\"}),\n",
    "\n",
    "                html.H3('Download displayed traces:', style={'paddingRight': '30px', 'fontSize': 18, 'color': colors['text']}),\n",
    "                html.Div([\n",
    "                    html.Div([\n",
    "                        html.Button(\"Substations Traces\", id=\"btn1\"), Download(id=\"download1\")\n",
    "                    ], className=\"six columns\", style={\"width\": \"20%\", 'color': colors['text']}),\n",
    "                    html.Div([\n",
    "                        html.Button(\"Weather Traces\", id=\"btn2\"), Download(id=\"download2\")\n",
    "                    ], className=\"six columns\", style={\"width\": \"20%\", 'color': colors['text'], 'padding-left':'25%'})\n",
    "                ], className=\"row\"),\n",
    "\n",
    "            ], className=\"six columns\"),\n",
    "            #------------------\n",
    "\n",
    "            html.Div([\n",
    "                dcc.Graph(id='map')\n",
    "            ], className=\"six columns\"),\n",
    "        ], className=\"row\", style={'marginTop': '5em','padding-left':'10%', 'padding-right':'15%', 'verical-align': 'center'}),\n",
    "        #---------------\n",
    "\n",
    "        html.Div([\n",
    "            dcc.Graph(id='graph')\n",
    "        ], style={'padding-left':'1%', 'padding-right':'1%'}),\n",
    "        ])\n",
    "\n",
    "])\n",
    "\n",
    "###########\n",
    "@app.callback(Output(\"download1\", \"data\"),\n",
    "[Input(\"btn1\", \"n_clicks\"),\n",
    "State('subs_ticker', 'value'),\n",
    "State('signal1_ticker', 'value')])\n",
    "def func(n_clicks, selected_subs, selected_sig1):\n",
    "\n",
    "    selected_sig1.append('Substation')\n",
    "    selected_sig1.append('datetime')\n",
    "    sel_customer = customer[selected_sig1]\n",
    "    sel_customer = sel_customer[sel_customer['Substation'].isin(selected_subs)]\n",
    "\n",
    "    return send_data_frame(sel_customer.to_excel, \"substations.xls\", index=False)\n",
    "\n",
    "\n",
    "@app.callback(Output(\"download2\", \"data\"),\n",
    "[Input(\"btn2\", \"n_clicks\"),\n",
    "State('sites_ticker', 'value'),\n",
    "State('signal2_ticker', 'value')])\n",
    "def func(n_clicks, selected_sites, selected_sig2):\n",
    "\n",
    "        selected_sig2.append('Site')\n",
    "        selected_sig2.append('datetime')\n",
    "        sel_weather = weather[selected_sig2]\n",
    "        sel_weather = sel_weather[sel_weather['Site'].isin(selected_sites)]\n",
    "\n",
    "        return send_data_frame(sel_weather.to_excel, \"weather.xls\", index=False)\n",
    "################\n",
    "\n",
    "@app.callback(Output('map', 'figure'),\n",
    "[Input('subs_ticker', 'value'),\n",
    "Input('sites_ticker', 'value')])\n",
    "def update_map(selected_subs, selected_sites):\n",
    "\n",
    "    fig = go.Figure()\n",
    "\n",
    "    lat = []\n",
    "    lon = []\n",
    "    text = []\n",
    "    for sub in selected_subs:\n",
    "        lat.append(locations[sub]['lat'])\n",
    "        lon.append(locations[sub]['lon'])\n",
    "        text.append(sub)\n",
    "    for site in selected_sites:\n",
    "        lat.append(locations[site]['lat'])\n",
    "        lon.append(locations[site]['lon'])\n",
    "        text.append(site)    \n",
    "\n",
    "    fig = go.Figure(go.Scattermapbox(\n",
    "            lat=lat,\n",
    "            lon=lon,\n",
    "            mode='markers',\n",
    "            marker=go.scattermapbox.Marker(\n",
    "                size=14\n",
    "            ),\n",
    "            text=text,\n",
    "        ))\n",
    "\n",
    "    fig.update_layout(\n",
    "        hovermode='closest',\n",
    "        mapbox=dict(\n",
    "            #accesstoken=mapbox_token,\n",
    "            bearing=0,\n",
    "            style = 'open-street-map',\n",
    "            center=go.layout.mapbox.Center(\n",
    "                lat=51.89,\n",
    "                lon=0.93\n",
    "            ),\n",
    "            pitch=0,\n",
    "            zoom=5\n",
    "        ),\n",
    "        margin=dict(l=0, r=0, t=0, b=0),\n",
    "        width=500, \n",
    "        height=400\n",
    "    )\n",
    "\n",
    "    return fig\n",
    "\n",
    "@app.callback(Output('graph', 'figure'),\n",
    "[Input('subs_ticker', 'value'),\n",
    "Input('signal1_ticker', 'value'),\n",
    "Input('sites_ticker', 'value'),\n",
    "Input('signal2_ticker', 'value'),\n",
    "Input('ratio_ticker', 'value')])\n",
    "def update_graph(selected_subs, selected_sig1, selected_sites, selected_sig2, selected_ratios):\n",
    "    fig = go.Figure()\n",
    "\n",
    "    for x in selected_subs:\n",
    "        for y in selected_sig1:\n",
    "            fig.add_trace(go.Scattergl(x=customer[customer.Substation == x].datetime, y=customer[customer.Substation == x][y],\n",
    "            name = str(x) + ' ' + str(y)))\n",
    "\n",
    "    for x in selected_sites:\n",
    "        for y in selected_sig2:\n",
    "            fig.add_trace(go.Scattergl(x=weather[weather.Site == x].datetime, y=weather[weather.Site == x][y],\n",
    "            name = str(x) + ' ' + str(y)))\n",
    "\n",
    "    for sub in selected_subs:\n",
    "        for site in selected_sites:\n",
    "            for ratio in selected_ratios: # P_GEN/SolarRad\n",
    "                weather_upsampled = weather[weather.Site == site].set_index('datetime').resample('10T').asfreq().reset_index()\n",
    "                denom = weather_upsampled[ratio[6:]]\n",
    "                num = customer[customer.Substation == sub][ratio[0:5]]\n",
    "                fig.add_trace(go.Scattergl(x=customer[customer.Substation == sub].datetime, y=num.divide(denom).replace(np.inf, 0),\n",
    "                name = str(sub) + ' ' + str(ratio[0:5]) + '\\\\' + str(site) + ' ' + str(ratio[6:])))\n",
    "\n",
    "    fig.update_traces(\n",
    "        line={\"width\": 0.5},\n",
    "        marker={\"size\": 3},\n",
    "        mode=\"lines+markers\",\n",
    "        showlegend=True\n",
    "    )\n",
    "\n",
    "    fig.update_layout(\n",
    "        plot_bgcolor=colors['background'],\n",
    "        paper_bgcolor=colors['background'],\n",
    "        font_color=colors['text'],\n",
    "        dragmode=\"zoom\", template=\"plotly_white\", legend_orientation=\"v\", xaxis_rangeslider_visible=True,\n",
    "        xaxis_rangeslider_thickness=0.1, xaxis_rangeslider_bgcolor=colors['text'],\n",
    "        xaxis=dict(\n",
    "            rangeselector=dict(\n",
    "                buttons=list([\n",
    "                    dict(count=1,\n",
    "                    label=\"1d\",\n",
    "                    step=\"day\",\n",
    "                    stepmode=\"backward\"),\n",
    "                    dict(count=1,\n",
    "                    label=\"1m\",\n",
    "                    step=\"month\",\n",
    "                    stepmode=\"backward\"),\n",
    "                    dict(step=\"all\")\n",
    "                ])\n",
    "            )\n",
    "        ))\n",
    "    \n",
    "    return fig\n",
    "\n",
    "# Run app and display result inline in the notebook\n",
    "app.run_server(mode='external', debug=True)"
   ]
  },
  {
   "source": [
    "#### Dash 4"
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "output_type": "stream",
     "name": "stdout",
     "text": [
      "Dash app running on http://127.0.0.1:8050/\n"
     ]
    }
   ],
   "source": [
    "import plotly.express as px\n",
    "import plotly.graph_objects as go\n",
    "from plotly.subplots import make_subplots\n",
    "from jupyter_dash import JupyterDash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "from dash_extensions import Download\n",
    "from dash_extensions.snippets import send_data_frame\n",
    "from dash.dependencies import Input, Output, State\n",
    "import numpy as np\n",
    "import pandas\n",
    "import json\n",
    "\n",
    "customer_feather = 'data/customer_cleansed.feather'\n",
    "weather_feather = 'data/weather_cleansed.feather'\n",
    "\n",
    "customer =  pandas.read_feather(customer_feather)\n",
    "weather = pandas.read_feather(weather_feather)\n",
    "\n",
    "#weather.drop(['OutHum', 'WindSpeed', 'WindDir', 'WindRun', 'Rain'], axis=1, inplace=True)\n",
    "\n",
    "# mapbox_token = open(\".mapbox_token\").read()\n",
    "\n",
    "with open('data/locations.txt') as json_file:\n",
    "    locations = json.load(json_file)\n",
    "       \n",
    "# Build App\n",
    "external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']\n",
    "\n",
    "app = JupyterDash(__name__, external_stylesheets=external_stylesheets, prevent_initial_callbacks=True)\n",
    "\n",
    "colors = {\n",
    "    'background': '#FFFFFF',\n",
    "    'text': '#091D58',\n",
    "    'text_sub': '#07AD93',\n",
    "    'text_site': '#430B95'\n",
    "}\n",
    "\n",
    "app.layout = html.Div(style={'backgroundColor': colors['background']}, children = [\n",
    "    html.Div(children=[\n",
    "\n",
    "        html.H1('Pv data visualization', style={'textAlign': 'center', 'color': colors['text']}),\n",
    "\n",
    "        #---------------------\n",
    "        html.Div([\n",
    "            html.Div([\n",
    "\n",
    "                html.Div([\n",
    "                    html.Div(children = [\n",
    "                        html.H3('Substation:', style={'paddingRight': '30px', 'fontSize': 18, 'color': colors['text_sub'], 'font-weight': 'bold'}),\n",
    "                        dcc.Dropdown(\n",
    "                            id='subs_ticker',\n",
    "                            options=[\n",
    "                                {'label': i, 'value': i} for i in customer.Substation.unique()\n",
    "                                ], multi=True,\n",
    "                            value=[], \n",
    "                            style={'color': colors['text']},\n",
    "                            placeholder=\"Select a substation\",\n",
    "                        )\n",
    "                    ], style={\"width\": \"40%\"}, className=\"six columns\"),\n",
    "\n",
    "                    html.Div([\n",
    "                        html.H3('Signal:', style={'paddingRight': '30px', 'fontSize': 18, 'color': colors['text_sub'], 'font-weight': 'bold'}),\n",
    "                        dcc.Dropdown(\n",
    "                            id='signal1_ticker',\n",
    "                            options=[\n",
    "                                {'label': i, 'value': i} for i in ['P_GEN', 'Q_GEN', 'S_GEN']\n",
    "                                ], multi=True,\n",
    "                            value=[],\n",
    "                            style={'color': colors['text']}\n",
    "                        ),\n",
    "                    ], style={\"width\": \"40%\"}, className=\"six columns\"),\n",
    "\n",
    "                ], className=\"row\"),\n",
    "\n",
    "                html.Div([\n",
    "                    html.Div([\n",
    "                        html.H3('Weather site:', style={'paddingRight': '30px', 'fontSize': 18, 'color': colors['text_site'], 'font-weight': 'bold'}),\n",
    "                        dcc.Dropdown(\n",
    "                            id='sites_ticker',\n",
    "                            options=[\n",
    "                                {'label': i, 'value': i} for i in weather.Site.unique()\n",
    "                                ], multi=True,\n",
    "                            value=[],\n",
    "                            style={'color': colors['text']},\n",
    "                            placeholder=\"Select a weather site\"\n",
    "                        ),\n",
    "                    ], style={\"width\": \"40%\"}, className=\"six columns\"),\n",
    "                    html.Div([\n",
    "                        html.H3('Signal:', style={'paddingRight': '30px', 'fontSize': 18, 'color': colors['text_site'], 'font-weight': 'bold'}),\n",
    "                        dcc.Dropdown(\n",
    "                            id='signal2_ticker',\n",
    "                            options=[\n",
    "                                {'label': i, 'value': i} for i in ['TempOut', 'SolarRad',\n",
    "                                'SolarEnergy', 'HiSolarRad', 'OutHum', 'WindSpeed', 'WindDir',\n",
    "                                'WindRun', 'Rain']\n",
    "                                ], multi=True,\n",
    "                            value=[],\n",
    "                            style={'color': colors['text']},\n",
    "                        ),\n",
    "                    ], style={\"width\": \"40%\"}, className=\"six columns\")\n",
    "                ], className=\"row\"),\n",
    "\n",
    "                html.H3('Download displayed traces:', style={'paddingRight': '30px', 'fontSize': 18, 'color': colors['text']}),\n",
    "                html.Div([\n",
    "                    html.Div([\n",
    "                        html.Button(\"Substations Traces\", id=\"btn1\"), Download(id=\"download1\")\n",
    "                    ], className=\"six columns\", style={\"width\": \"20%\", 'color': colors['text']}),\n",
    "                    html.Div([\n",
    "                        html.Button(\"Weather Traces\", id=\"btn2\"), Download(id=\"download2\")\n",
    "                    ], className=\"six columns\", style={\"width\": \"20%\", 'color': colors['text'], 'padding-left':'25%'})\n",
    "                ], className=\"row\"),\n",
    "\n",
    "            ], className=\"six columns\"),\n",
    "            #------------------\n",
    "\n",
    "            html.Div([\n",
    "                dcc.Graph(id='map')\n",
    "            ], className=\"six columns\"),\n",
    "        ], className=\"row\", style={'marginTop': '5em','padding-left':'10%', 'padding-right':'15%', 'verical-align': 'center'}),\n",
    "        #---------------\n",
    "\n",
    "        html.Div([\n",
    "            dcc.Graph(id='graph')\n",
    "        ], style={'padding-left':'1%', 'padding-right':'1%'}),\n",
    "        ])\n",
    "\n",
    "])\n",
    "\n",
    "###########\n",
    "@app.callback(Output(\"download1\", \"data\"),\n",
    "[Input(\"btn1\", \"n_clicks\"),\n",
    "State('subs_ticker', 'value'),\n",
    "State('signal1_ticker', 'value')])\n",
    "def func(n_clicks, selected_subs, selected_sig1):\n",
    "\n",
    "    selected_sig1.append('Substation')\n",
    "    selected_sig1.append('datetime')\n",
    "    sel_customer = customer[selected_sig1]\n",
    "    sel_customer = sel_customer[sel_customer['Substation'].isin(selected_subs)]\n",
    "\n",
    "    return send_data_frame(sel_customer.to_csv, \"substations.csv\", index=False)\n",
    "\n",
    "\n",
    "@app.callback(Output(\"download2\", \"data\"),\n",
    "[Input(\"btn2\", \"n_clicks\"),\n",
    "State('sites_ticker', 'value'),\n",
    "State('signal2_ticker', 'value')])\n",
    "def func(n_clicks, selected_sites, selected_sig2):\n",
    "\n",
    "        selected_sig2.append('Site')\n",
    "        selected_sig2.append('datetime')\n",
    "        sel_weather = weather[selected_sig2]\n",
    "        sel_weather = sel_weather[sel_weather['Site'].isin(selected_sites)]\n",
    "\n",
    "        return send_data_frame(sel_weather.to_csv, \"weather.csv\", index=False)\n",
    "################\n",
    "\n",
    "@app.callback(Output('map', 'figure'),\n",
    "[Input('subs_ticker', 'value'),\n",
    "Input('sites_ticker', 'value')])\n",
    "def update_map(selected_subs, selected_sites):\n",
    "\n",
    "    fig = go.Figure()\n",
    "\n",
    "    lat = []\n",
    "    lon = []\n",
    "    text = []\n",
    "    for sub in selected_subs:\n",
    "        lat.append(locations[sub]['lat'])\n",
    "        lon.append(locations[sub]['lon'])\n",
    "        text.append(sub)\n",
    "    for site in selected_sites:\n",
    "        lat.append(locations[site]['lat'])\n",
    "        lon.append(locations[site]['lon'])\n",
    "        text.append(site)    \n",
    "\n",
    "    fig = go.Figure(go.Scattermapbox(\n",
    "            lat=lat,\n",
    "            lon=lon,\n",
    "            mode='markers',\n",
    "            marker=go.scattermapbox.Marker(\n",
    "                size=14\n",
    "            ),\n",
    "            text=text,\n",
    "        ))\n",
    "\n",
    "    fig.update_layout(\n",
    "        hovermode='closest',\n",
    "        mapbox=dict(\n",
    "            #accesstoken=mapbox_token,\n",
    "            bearing=0,\n",
    "            style = 'open-street-map',\n",
    "            center=go.layout.mapbox.Center(\n",
    "                lat=51.89,\n",
    "                lon=0.93\n",
    "            ),\n",
    "            pitch=0,\n",
    "            zoom=5\n",
    "        ),\n",
    "        margin=dict(l=0, r=0, t=0, b=0),\n",
    "        width=500, \n",
    "        height=400\n",
    "    )\n",
    "\n",
    "    return fig\n",
    "\n",
    "@app.callback(Output('graph', 'figure'),\n",
    "[Input('subs_ticker', 'value'),\n",
    "Input('signal1_ticker', 'value'),\n",
    "Input('sites_ticker', 'value'),\n",
    "Input('signal2_ticker', 'value')\n",
    "])\n",
    "def update_graph(selected_subs, selected_sig1, selected_sites, selected_sig2):\n",
    "    fig = go.Figure()\n",
    "\n",
    "    for x in selected_subs:\n",
    "        for y in selected_sig1:\n",
    "            fig.add_trace(go.Scattergl(x=customer[customer.Substation == x].datetime, y=customer[customer.Substation == x][y],\n",
    "            name = str(x) + ' ' + str(y)))\n",
    "\n",
    "    for x in selected_sites:\n",
    "        for y in selected_sig2:\n",
    "            fig.add_trace(go.Scattergl(x=weather[weather.Site == x].datetime, y=weather[weather.Site == x][y],\n",
    "            name = str(x) + ' ' + str(y)))\n",
    "\n",
    "    fig.update_traces(\n",
    "        line={\"width\": 0.5},\n",
    "        marker={\"size\": 3},\n",
    "        mode=\"lines+markers\",\n",
    "        showlegend=True\n",
    "    )\n",
    "\n",
    "    fig.update_layout(\n",
    "        plot_bgcolor=colors['background'],\n",
    "        paper_bgcolor=colors['background'],\n",
    "        font_color=colors['text'],\n",
    "        dragmode=\"zoom\", template=\"plotly_white\", legend_orientation=\"v\", xaxis_rangeslider_visible=True,\n",
    "        xaxis_rangeslider_thickness=0.1, xaxis_rangeslider_bgcolor=colors['text'],\n",
    "        xaxis=dict(\n",
    "            rangeselector=dict(\n",
    "                buttons=list([\n",
    "                    dict(count=1,\n",
    "                    label=\"1d\",\n",
    "                    step=\"day\",\n",
    "                    stepmode=\"backward\"),\n",
    "                    dict(count=1,\n",
    "                    label=\"1m\",\n",
    "                    step=\"month\",\n",
    "                    stepmode=\"backward\"),\n",
    "                    dict(step=\"all\")\n",
    "                ])\n",
    "            )\n",
    "        ))\n",
    "    \n",
    "    return fig\n",
    "\n",
    "# Run app and display result inline in the notebook\n",
    "app.run_server(mode='external', debug=True)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "name": "pv_env",
   "display_name": "Python (pv_env)",
   "language": "python"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.9-final"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}