Update app.py

app.py

@@ -2,6 +2,7 @@ import pandas as pd
 import gradio as gr
 from pathlib import Path
 import plotly.express as px
+import plotly.graph_objects as go
 import numpy as np
 import torch
 from chronos import ChronosPipeline
@@ -149,26 +150,86 @@ def forecast_chronos_data(df_state, date_column, target_column, select_period, f
   forecast_index = range(len(monthly_sales), len(monthly_sales) + prediction_length)
   low, median, high = np.quantile(forecast[0].numpy(), [0.1, 0.5, 0.9], axis=0)
 
-  plt.figure(figsize=(30, 10))
-  plt.plot(monthly_sales["y"], color="royalblue", label="Historical Data", linewidth=2)
-  plt.plot(forecast_index, median, color="tomato", label="Median Forecast", linewidth=2)
-  plt.fill_between(forecast_index, low, high, color="tomato", alpha=0.3, label="80% Prediction Interval")
-  plt.title("Sales Forecasting Visualization", fontsize=16)
-  plt.xlabel("Months", fontsize=20)
-  plt.ylabel("Sold Qty", fontsize=20)
-
-  plt.xticks(fontsize=18)
-  plt.yticks(fontsize=18)
-
-  ax = plt.gca()
-  ax.xaxis.set_major_locator(ticker.MultipleLocator(3))
-  ax.yaxis.set_major_locator(ticker.MultipleLocator(5))
-  ax.grid(which='major', linestyle='--', linewidth=1.2, color='gray', alpha=0.7)
-
-  plt.legend(fontsize=18)
-  plt.grid(linestyle='--', linewidth=1.2, color='gray', alpha=0.7)
-  plt.tight_layout()
-  return plt.gcf()
+  forecast_index = list(forecast_index)
+  fig = px.line(
+        x=monthly_sales.index, 
+        y=monthly_sales["y"],
+        title="Sales Forecasting Visualization",
+        labels={"x": "Months", "y": f"{target_column}"},
+    )
+
+  fig.add_trace(
+      go.Scatter(
+          x=forecast_index,
+          y=median,
+          name="Median Forecast",
+          line=dict(color="tomato", width=2)
+      )
+  )
+
+  fig.add_trace(
+      go.Scatter(
+          x=forecast_index,
+          y=high,
+          name="80% Prediction Interval",
+          mode='lines',
+          line=dict(width=0),
+          showlegend=False
+      )
+  )
+
+  fig.update_layout(
+      title_font_size=20,
+      xaxis_title_font_size=16,
+      yaxis_title_font_size=16,
+      legend_font_size=16,
+      xaxis_tickfont_size=14,
+      yaxis_tickfont_size=14,
+      showlegend=True,
+      width=1200,  # Equivalent to figsize=(30, 10)
+      height=400,
+      xaxis=dict(
+          gridcolor='rgba(128, 128, 128, 0.7)',
+          gridwidth=1.2,
+          dtick=3,  # Set tick interval to 3 months
+          griddash='dash'
+      ),
+      yaxis=dict(
+          gridcolor='rgba(128, 128, 128, 0.7)',
+          gridwidth=1.2,
+          dtick=5,  # Set tick interval to 5 units
+          griddash='dash'
+      ),
+      plot_bgcolor='white'
+      margin=dict(l=50, r=50, t=50, b=50) 
+  )
+
+  fig.update_traces(
+      line=dict(color="royalblue", width=2),
+      selector=dict(name="y")  # Updates only the historical data line
+  )
+  return fig
+
+  # plt.figure(figsize=(30, 10))
+  # plt.plot(monthly_sales["y"], color="royalblue", label="Historical Data", linewidth=2)
+  # plt.plot(forecast_index, median, color="tomato", label="Median Forecast", linewidth=2)
+  # plt.fill_between(forecast_index, low, high, color="tomato", alpha=0.3, label="80% Prediction Interval")
+  # plt.title("Sales Forecasting Visualization", fontsize=16)
+  # plt.xlabel("Months", fontsize=20)
+  # plt.ylabel("Sold Qty", fontsize=20)
+
+  # plt.xticks(fontsize=18)
+  # plt.yticks(fontsize=18)
+
+  # ax = plt.gca()
+  # ax.xaxis.set_major_locator(ticker.MultipleLocator(3))
+  # ax.yaxis.set_major_locator(ticker.MultipleLocator(5))
+  # ax.grid(which='major', linestyle='--', linewidth=1.2, color='gray', alpha=0.7)
+
+  # plt.legend(fontsize=18)
+  # plt.grid(linestyle='--', linewidth=1.2, color='gray', alpha=0.7)
+  # plt.tight_layout()
+  # return plt.gcf()
 
 
 def home_page():