Update app.py

app.py

@@ -78,6 +78,10 @@ import altair as alt
 import pandas as pd
 import os
 
+import altair as alt
+import pandas as pd
+import os
+
 def progress_bar_chart() -> alt.Chart:
     source_dataset, _ = obtain_source_target_datasets()
     total_records = int(os.getenv("TARGET_RECORDS"))  # The total goal of records.
@@ -88,36 +92,39 @@ def progress_bar_chart() -> alt.Chart:
     # Create a DataFrame for the progress bar data.
     progress_data = pd.DataFrame({
         'status': ['Completed', 'Pending'],
-        'percentage': [percentage_complete, 100 - percentage_complete]
-    })
-
-    # Create a DataFrame for the label.
-    label_data = pd.DataFrame({
-        'status': ['Label'],
-        'percentage': [50],  # Centered label
-        'label': [f'{pending_records} Remaining / {total_records} Total']
+        'percentage': [percentage_complete, 100 - percentage_complete],
+        'actual': [annotated_records, pending_records]
     })
 
     # Create the progress bar chart.
     progress_bar = alt.Chart(progress_data).mark_bar(size=40).encode(
-        x=alt.X('percentage:Q', axis=alt.Axis(title='Completion Percentage', format='%'), scale=alt.Scale(domain=(0, 100))),
-        color=alt.Color('status:N', scale=alt.Scale(domain=['Completed', 'Pending'], range=['#28a745', '#dcdcdc']))
+        x=alt.X('percentage:Q', axis=alt.Axis(title='Completion Percentage', format='%')),
+        color=alt.Color('status:N', scale=alt.Scale(domain=['Completed', 'Pending'], range=['#28a745', '#dcdcdc'])),
+        tooltip=['status', 'actual']
     )
 
-    # Create the annotation text for the label.
-    label_text = alt.Chart(label_data).mark_text(align='center', dx=0, dy=5, fontSize=16, fontWeight='bold').encode(
-        x='percentage:Q',
-        text='label:N'
+    # Create the annotation text.
+    text = progress_data.iloc[0]['actual']  # Get the 'Completed' actual number.
+    label_text = alt.Chart(pd.DataFrame({'x_pos': [percentage_complete / 2], 'text': [f'{text} Completed']})).mark_text(
+        align='center', dy=-10, fontSize=16, fontWeight='bold', color='white'
+    ).encode(
+        x='x_pos:Q',
+        text='text:N'
     )
 
-    # Combine the bar and the label.
-    chart = (progress_bar + label_text).properties(
+    # Remove the unnecessary axis lines and ticks.
+    progress_bar = progress_bar.configure_axis(
+        grid=False
+    ).configure_view(
+        strokeWidth=0
+    ).properties(
         title='Progress Towards Goal',
         width=800,
         height=150
     )
 
-    return chart
+    return (progress_bar + label_text)
+