Update app.py

app.py

@@ -109,51 +109,58 @@ def gauge_chart() -> alt.Chart:
     return (chart + text)
 
 
+import altair as alt
+import pandas as pd
+import os
+
 def progress_bar_chart() -> alt.Chart:
+    # Load your data
     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.
-    percentage_complete = annotated_records / total_records * 100  # The percentage of completion.
+    total_records = int(os.getenv("TARGET_RECORDS"))
+    annotated_records = len(source_dataset)
+    percentage_complete = annotated_records / total_records * 100
 
-    # Create a DataFrame for the progress bar data.
+    # Define the data for the bars
     progress_data = pd.DataFrame({
-        'status': ['Completed', 'Pending'],
-        'percentage': [percentage_complete, 100 - percentage_complete],
-        'actual': [annotated_records, total_records - annotated_records]
+        'category': ['Completed', 'Pending'],
+        'value': [annotated_records, total_records - annotated_records]
     })
 
-    # Create the progress bar chart.
-    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
+    # Base chart for the progress
+    base = alt.Chart(progress_data).encode(
+        alt.X('value:Q', scale=alt.Scale(domain=[0, total_records]), title='Number of Records'),
+        alt.Y('category:N', title='')
     )
 
-    # Remove the unnecessary axis lines and ticks.
-    chart = progress_bar.configure_axis(
-        grid=False
-    ).configure_view(
-        strokeWidth=0
+    # Colored bar for completion
+    bar = base.mark_bar(size=50, color='#28a745').transform_filter(
+        alt.datum.category == 'Completed'
     )
 
-    # 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
+    # Gray bar for pending
+    background = base.mark_bar(size=50, color='#dcdcdc').transform_filter(
+        alt.datum.category == 'Pending'
     )
 
-    return (chart + text_labels)
-
-
-
-
+    # Text for the completed records
+    text = base.mark_text(align='left', dx=3, dy=0, fontSize=16, fontWeight='bold', color='black').encode(
+        text='value:Q'
+    ).transform_filter(
+        alt.datum.category == 'Completed'
+    )
 
+    # Combine the charts
+    chart = alt.layer(background, bar, text).resolve_scale(y='independent').properties(
+        width=700,
+        height=400,
+        title='Progress Towards Goal'
+    ).configure_view(
+        strokeWidth=0
+    ).configure_axis(
+        grid=False
+    )
 
+    return chart
 
 def donut_chart() -> alt.Chart:
     """