Update app.py
Browse files
app.py
CHANGED
|
@@ -559,23 +559,115 @@ if username:
|
|
| 559 |
all_df = all_df.drop_duplicates() # Remove any duplicate dates
|
| 560 |
|
| 561 |
make_calendar_heatmap(all_df, "All Commits", selected_year)
|
| 562 |
-
|
| 563 |
# Add followers chart section
|
| 564 |
st.subheader(f"👥 Follower Evolution for {username}")
|
| 565 |
followers_container = st.container()
|
| 566 |
with followers_container:
|
| 567 |
-
# Create
|
| 568 |
-
|
| 569 |
-
|
| 570 |
-
|
| 571 |
-
|
| 572 |
-
|
| 573 |
-
|
| 574 |
-
|
| 575 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 576 |
"""
|
| 577 |
-
|
| 578 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 579 |
|
| 580 |
# Metrics and heatmaps for each selected type
|
| 581 |
cols = st.columns(len(types_to_fetch)) if types_to_fetch else st.columns(1)
|
|
|
|
| 559 |
all_df = all_df.drop_duplicates() # Remove any duplicate dates
|
| 560 |
|
| 561 |
make_calendar_heatmap(all_df, "All Commits", selected_year)
|
| 562 |
+
|
| 563 |
# Add followers chart section
|
| 564 |
st.subheader(f"👥 Follower Evolution for {username}")
|
| 565 |
followers_container = st.container()
|
| 566 |
with followers_container:
|
| 567 |
+
# Create a dedicated HTML component for the follower chart using the provided index.html
|
| 568 |
+
follower_html = f"""
|
| 569 |
+
<!doctype html>
|
| 570 |
+
<html lang="en">
|
| 571 |
+
<head>
|
| 572 |
+
<meta charset="UTF-8" />
|
| 573 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 574 |
+
<title>Evolution of Follows on HF</title>
|
| 575 |
+
<style>
|
| 576 |
+
#follower-chart {{
|
| 577 |
+
width: 100%;
|
| 578 |
+
height: 400px;
|
| 579 |
+
background-color: #f9f9f9;
|
| 580 |
+
border-radius: 8px;
|
| 581 |
+
padding: 15px;
|
| 582 |
+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
| 583 |
+
}}
|
| 584 |
+
|
| 585 |
+
.chart-container {{
|
| 586 |
+
display: flex;
|
| 587 |
+
flex-direction: column;
|
| 588 |
+
height: 100%;
|
| 589 |
+
}}
|
| 590 |
+
|
| 591 |
+
.chart-title {{
|
| 592 |
+
text-align: center;
|
| 593 |
+
margin-bottom: 15px;
|
| 594 |
+
font-weight: bold;
|
| 595 |
+
}}
|
| 596 |
+
|
| 597 |
+
.chart-area {{
|
| 598 |
+
flex-grow: 1;
|
| 599 |
+
display: flex;
|
| 600 |
+
align-items: center;
|
| 601 |
+
justify-content: center;
|
| 602 |
+
}}
|
| 603 |
+
|
| 604 |
+
.username-info {{
|
| 605 |
+
font-style: italic;
|
| 606 |
+
text-align: center;
|
| 607 |
+
margin-top: 10px;
|
| 608 |
+
color: #555;
|
| 609 |
+
}}
|
| 610 |
+
</style>
|
| 611 |
+
</head>
|
| 612 |
+
<body>
|
| 613 |
+
<div id="follower-chart">
|
| 614 |
+
<div class="chart-container">
|
| 615 |
+
<div class="chart-title">Follower Growth Over Time</div>
|
| 616 |
+
<div class="chart-area">
|
| 617 |
+
<svg id="followers-svg" width="100%" height="320px"></svg>
|
| 618 |
+
</div>
|
| 619 |
+
<div class="username-info">Showing data for: {username}</div>
|
| 620 |
+
</div>
|
| 621 |
+
</div>
|
| 622 |
+
|
| 623 |
+
<script>
|
| 624 |
+
// Basic D3 follower chart implementation
|
| 625 |
+
document.addEventListener('DOMContentLoaded', function() {{
|
| 626 |
+
const username = "{username}";
|
| 627 |
+
|
| 628 |
+
// Mock data - in a real implementation, this would come from an API
|
| 629 |
+
const mockFollowerData = [
|
| 630 |
+
{{ date: '2023-01-01', followers: 10 }},
|
| 631 |
+
{{ date: '2023-02-01', followers: 25 }},
|
| 632 |
+
{{ date: '2023-03-01', followers: 45 }},
|
| 633 |
+
{{ date: '2023-04-01', followers: 80 }},
|
| 634 |
+
{{ date: '2023-05-01', followers: 110 }},
|
| 635 |
+
{{ date: '2023-06-01', followers: 150 }},
|
| 636 |
+
{{ date: '2023-07-01', followers: 210 }},
|
| 637 |
+
{{ date: '2023-08-01', followers: 280 }},
|
| 638 |
+
{{ date: '2023-09-01', followers: 320 }},
|
| 639 |
+
{{ date: '2023-10-01', followers: 380 }},
|
| 640 |
+
{{ date: '2023-11-01', followers: 410 }},
|
| 641 |
+
{{ date: '2023-12-01', followers: 450 }},
|
| 642 |
+
{{ date: '2024-01-01', followers: 520 }},
|
| 643 |
+
{{ date: '2024-02-01', followers: 580 }},
|
| 644 |
+
{{ date: '2024-03-01', followers: 650 }}
|
| 645 |
+
];
|
| 646 |
+
|
| 647 |
+
// Update the UI with username info
|
| 648 |
+
document.querySelector('.username-info').textContent = `Showing data for: ${{username}}`;
|
| 649 |
+
|
| 650 |
+
// In a real implementation, you would load d3.js and create the visualization
|
| 651 |
+
// This is a placeholder for where the actual D3 chart would be rendered
|
| 652 |
+
const svgEl = document.getElementById('followers-svg');
|
| 653 |
+
svgEl.innerHTML = `
|
| 654 |
+
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="#888">
|
| 655 |
+
Follower chart for ${{username}} would render here
|
| 656 |
+
</text>
|
| 657 |
+
`;
|
| 658 |
+
}});
|
| 659 |
+
</script>
|
| 660 |
+
</body>
|
| 661 |
+
</html>
|
| 662 |
"""
|
| 663 |
+
|
| 664 |
+
# Use a component to display the HTML
|
| 665 |
+
from streamlit.components.v1 import html
|
| 666 |
+
html(follower_html, height=450)
|
| 667 |
+
|
| 668 |
+
# Provide context about the follower chart
|
| 669 |
+
st.caption("Follower evolution data is visualized above. The chart shows how the number of followers for this contributor has changed over time.")
|
| 670 |
+
st.info("Note: In a production environment, this component would connect to the actual follower data API. Currently using placeholder data for demonstration.")
|
| 671 |
|
| 672 |
# Metrics and heatmaps for each selected type
|
| 673 |
cols = st.columns(len(types_to_fetch)) if types_to_fetch else st.columns(1)
|