Update app.py

app.py

@@ -1,9 +1,8 @@
+import altair as alt
+import gradio as gr
 import pandas as pd
 import numpy as np
-import plotly
-import plotly.graph_objs as go
-import gradio as gr
-import json
+
 
 def plot_usage_volume(system1, users1, timeline1, system2, users2, timeline2, system3, users3, timeline3):
     # Create empty dataframe to hold usage data
@@ -23,19 +22,15 @@ def plot_usage_volume(system1, users1, timeline1, system2, users2, timeline2, sy
         system_data = pd.DataFrame({"System": [system] * len(usage), "Month": months, "Usage": usage})
         data = pd.concat([data, system_data], axis=0)
 
-    # Create a line plot of the usage volume for each system
-    fig = go.Figure()
-    for system in data["System"].unique():
-        system_data = data[data["System"] == system]
-        fig.add_trace(go.Scatter(x=system_data["Month"], y=system_data["Usage"], mode="lines+markers", name=system))
-
-    fig.update_layout(title="System Rollout Usage Volume Plot", xaxis_title="Month", yaxis_title="Usage")
-
-    # Convert the plot to a JSON string
-    plot_json = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
+    # Create a multiline plot of the usage volume for each system
+    line = alt.Chart(data).mark_line().encode(
+        x='Month:N',
+        y='Usage:Q',
+        color='System:N'
+    ).properties(title="System Rollout Usage Volume Plot")
 
     # Return the plot as a Gradio output
-    return plot_json
+    return line
 
 # Define the input components
 inputs = [
@@ -58,4 +53,3 @@ iface = gr.Interface(fn=plot_usage_volume, inputs=inputs, outputs=output, title=
 
 # Launch the interface
 iface.launch()
-