Update app.py

app.py

@@ -62,10 +62,6 @@ def get_user_annotations_dictionary(
 
     return output
 
-import altair as alt
-import pandas as pd
-import os
-
 
 def gauge_chart() -> alt.Chart:
     # Assuming obtain_source_target_datasets() returns a tuple where the first item is the dataset
@@ -112,47 +108,47 @@ def gauge_chart() -> alt.Chart:
 
     return (chart + text)
 
+
 def progress_bar_chart() -> alt.Chart:
     source_dataset, _ = obtain_source_target_datasets()
     total_records = int(os.getenv("TARGET_RECORDS"))  # The total goal of records.
     annotated_records = len(source_dataset)  # The number of records already annotated.
-    pending_records = total_records - annotated_records  # Calculate the pending records.
     percentage_complete = annotated_records / total_records * 100  # The percentage of completion.
 
     # Create a DataFrame for the progress bar data.
     progress_data = pd.DataFrame({
-        'status': ['Pending','Completed'],
+        'status': ['Completed', 'Pending'],
         'percentage': [percentage_complete, 100 - percentage_complete],
-        'actual': [pending_records, annotated_records]
+        'actual': [annotated_records, total_records - annotated_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='%')),
-        color=alt.Color('status:N', scale=alt.Scale(domain=['Pending','Completed'], range=['#28a745', '#dcdcdc'])),
+    progress_bar = alt.Chart(progress_data).mark_bar(size=60).encode(
+        x=alt.X('percentage:Q', scale=alt.Scale(domain=[0, 100]), axis=alt.Axis(title='Completion Percentage', format='%')),
+        color=alt.Color('status:N', scale=alt.Scale(domain=['Completed', 'Pending'], range=['#28a745', '#dcdcdc'])),
         tooltip=['status', 'actual']
+    ).properties(
+        title='Progress Towards Goal',
+        width=800,
+        height=200  # Increased height for a thicker bar
     )
 
-    # 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'
+    # Remove the unnecessary axis lines and ticks.
+    chart = progress_bar.configure_axis(
+        grid=False
+    ).configure_view(
+        strokeWidth=0
     )
 
-    # Combine the bar and the label into a layered chart.
-    chart = alt.layer(progress_bar, label_text).properties(
-        title='Progress Towards Goal',
-        width=800,
-        height=150
+    # Add text labels for completed and pending outside the bar.
+    text_labels = alt.Chart(progress_data).mark_text(align='left', dx=5, dy=0, fontSize=16, fontWeight='bold').encode(
+        x=alt.X('percentage:Q', stack='zero'),
+        text=alt.Text('actual:N'),
+        color=alt.value('black')  # Black text color
     )
 
-    # Configure the whole chart instead of individual elements.
-    chart = chart.configure_axis(grid=False).configure_view(strokeWidth=0)
+    return (chart + text_labels)
 
-    return chart