Skip to content

UI - Improve Duration Chart #54786

Closed
#62835
Closed
UI - Improve Duration Chart#54786
#62835
Labels
area:UIRelated to UI/UX. For Frontend Developers.good first issuekind:featureFeature Requestskind:metaHigh-level information important to the community
Milestone
Airflow 3.2.0

Description

@pierrejeambrun
pierrejeambrun
opened on Aug 21, 2025

As mentioned in #50184 (comment), the duration chart needs some improving:

  • Rework the labels so they do not take that much space from the actual graph.
  • Remove animation during auto refresh.
Image

Activity

  1. pierrejeambrun
    added
    kind:metaHigh-level information important to the community
    area:UIRelated to UI/UX. For Frontend Developers.
    on Aug 21, 2025
  2. pierrejeambrun
    added this to the Airflow 3.1+ milestone on Aug 21, 2025
  3. pierrejeambrun
    added
    good first issue
    on Aug 21, 2025

  4. pierrejeambrun commented on Aug 21, 2025

    @pierrejeambrun
    pierrejeambrun
    on Aug 21, 2025
    MemberAuthor

    cc: @RoyLee1224 You might be interested in this one.

  5. dosubot
    added
    kind:featureFeature Requests
    on Aug 21, 2025

  6. RoyLee1224 commented on Aug 22, 2025

    @RoyLee1224
    RoyLee1224
    on Aug 22, 2025
    Contributor

    Sure, I'll give it a try 💪

  7. Thanush-03 commented on Aug 23, 2025

    @Thanush-03
    Thanush-03
    on Aug 23, 2025

    sir, can i give it a try

  8. RoyLee1224 commented on Aug 24, 2025

    @RoyLee1224
    RoyLee1224
    on Aug 24, 2025
    Contributor

    @Thanush-03 Please feel free to take it over. Good luck!

  9. Thanush-03 commented on Aug 25, 2025

    @Thanush-03
    Thanush-03
    on Aug 25, 2025

    @Thanush-03 Please feel free to take it over. Good luck!

    can you explain what need changes and where i am a beginner

  10. RoyLee1224 commented on Aug 25, 2025

    @RoyLee1224
    RoyLee1224
    on Aug 25, 2025
    Contributor

    Hi @Thanush-03, sure! Here's the main file you'll be working on: airflow-core/src/airflow/ui/src/components/DurationChart.tsx

    • Rework the labels: You can change X-Axis(e.g., from "YYYY-MM-DD, hh:mm:ss" to "MMM DD, HH:mm").
    • Remove animation during auto refresh: You can check Chart.js documentation for animation setting.

    Hope this helps you get started!

  11. pwdsudinym-ui commented on Sep 3, 2025

    @pwdsudinym-ui
    pwdsudinym-ui
    on Sep 3, 2025

    @Thanush-03 are you still working on this? If not, mind if I give this a go? :)

  12. Thanush-03 commented on Sep 3, 2025

    @Thanush-03
    Thanush-03
    on Sep 3, 2025

    Yes sir ,you provide it to others currently I am facing some personal issues so I can't complete it now sorry for that.

  13. pierrejeambrun commented on Sep 4, 2025

    @pierrejeambrun
    pierrejeambrun
    on Sep 4, 2025
    MemberAuthor

    @pwdsudinym-ui please go ahead, you're assigned :)

  14. pierrejeambrun
    assigned
    pwdsudinym-ui
    on Sep 4, 2025
  15. potiuk
    unassigned
    pwdsudinym-ui
    on Mar 2, 2026

  16. potiuk commented on Mar 2, 2026

    @potiuk
    potiuk
    on Mar 2, 2026
    Member

    @pwdsudinym-ui We are unassigning you from this issue as part of our updated assignment policy.

    This is not meant to discourage your contribution — quite the opposite! You are still very welcome to work on this issue and submit a PR for it. Simply comment that you are working on it and open a PR when ready.

    We found that formal assignments were not working well, as they often prevented others from contributing when the assignee was not actively working on the issue.

  17. antonio-mello-ai
    added 2 commits that reference this issue on Mar 4, 2026

    fix(ui): improve DurationChart labels and disable animation during au…

    f60b5fc

    fix(ui): improve DurationChart labels and disable animation during au…

    6c7573f
  18. bbovenzi
    closed this as completedin #62835on Mar 11, 2026
  19. pull
    added a commit that references this issue on Mar 11, 2026

    fix(ui): Improve DurationChart labels and disable animation during au…

    98f129f
  20. github-actions
    added 2 commits that reference this issue on Mar 11, 2026

    [v3-1-test] fix(ui): Improve DurationChart labels and disable animati…

    992ce7e

    [v3-1-test] fix(ui): Improve DurationChart labels and disable animati…

    13b73fd
  21. bbovenzi
    added a commit that references this issue on Mar 11, 2026

    [v3-1-test] fix(ui): Improve DurationChart labels and disable animati…

    6839135
  22. dominikhei
    added a commit that references this issue on Mar 11, 2026

    fix(ui): Improve DurationChart labels and disable animation during au…

    3b3c56d
  23. PascalEgn
    added a commit that references this issue on Mar 12, 2026

    fix(ui): Improve DurationChart labels and disable animation during au…

    d167d80
  24. Pyasma
    added a commit that references this issue on Mar 13, 2026

    fix(ui): Improve DurationChart labels and disable animation during au…

    54753f5
  25. vatsrahul1001
    added a commit that references this issue on Mar 25, 2026

    [v3-1-test] fix(ui): Improve DurationChart labels and disable animati…

    af211c2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:UIRelated to UI/UX. For Frontend Developers.good first issuekind:featureFeature Requestskind:metaHigh-level information important to the community

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions