tirkarthi commented on PR #40755:
URL: https://github.com/apache/airflow/pull/40755#issuecomment-2236582957

   It looks easier to implement switching between line and bar chart. In the 
latest commit I have added a checkbox similar to "show landing time" in run 
duration without persistence to make it easier to play around locally if 
someone is interested. I also wanted to see how the chart is for dags with lot 
of tasks where many of our dags have minimum 10 tasks and below is a sample dag 
to generate random sleep tasks.
   
   Line chart to me looks unusable when there are lot of data points that 
finish around same time but useful to see trends as noted with fewer number of 
tasks with varying time. Bar chart also looks useful where user can click on 
the bar to get to task detail like line chart and looks better in some cases. 
With a lot of tasks the bars/lines can get crammed and might be harder to 
select the exact one without unselecting few tasks in the legend.
   
   Few thoughts and questions : 
   
   * Lot of tasks means legend can be larger and possibly collides with y axis. 
I tried various options in echarts like padding, nameGap but couldn't get it 
working.
   * Task groups don't filter down to further tasks as separate bars.
   * I have seen the chart go negative while running might be some issue in 
calculation of duration for running tasks.
   * Maybe keep the checkbox so that user can select the best representation as 
per the situation.
   * Tooltip could probably display only the relevant datapoint instead of time 
for everything. I am not sure how to select the right option for that in 
echarts.
   
   ```python
   from datetime import datetime, timedelta
   
   from airflow import DAG
   from airflow.decorators import task, task_group
   
   with DAG(
       dag_id="all_task_duration",
       start_date=datetime(2024, 7, 1),
       catchup=True,
       schedule_interval="@daily",
   ) as dag:
   
       def base(i, j):
           import random, time
   
           duration = random.randrange(i, j)
   
           for index in range(duration):
               time.sleep(1)
               print(index)
   
       @task
       def extract():
           base(10, 20)
   
       @task
       def load():
           base(20, 30)
   
       @task
       def transform():
           base(2, 5)
   
       @task
       def transform_1():
           base(2, 5)
   
       @task
       def transform_2():
           base(2, 5)
   
       @task
       def transform_3():
           base(2, 5)
   
       @task
       def transform_4():
           base(2, 5)
   
       @task
       def transform_5():
           base(2, 5)
   
       @task
       def transform_6():
           base(2, 5)
   
       @task
       def transform_7():
           base(2, 5)
   
       @task
       def transform_8():
           base(2, 5)
   
       @task
       def transform_9():
           base(2, 5)
   
       @task
       def transform_10():
           base(2, 5)
   
       @task
       def transform_11():
           base(2, 5)
   
       @task_group(group_id="my_task_group")
       def tg1():
   
           @task
           def tg11():
               base(11, 20)
   
           @task
           def tg12():
               base(20, 30)
   
           tg11() >> tg12()
   
       (
           extract()
           >> load()
           >> tg1()
           >> transform()
           >> transform_1()
           >> transform_2()
           >> transform_3()
           >> transform_4()
           >> transform_5()
           >> transform_6()
           >> transform_7()
           >> transform_8()
           >> transform_9()
           >> transform_10()
           >> transform_11()
       )
   ```
   
   Screenshots : 
   
   
![image](https://github.com/user-attachments/assets/78ff88d4-06b4-4c6b-a821-685c3efd9e15)
   
   
![image](https://github.com/user-attachments/assets/7e7abec5-df85-46a8-8428-ef88da0f232d)
   
   Lot of tasks with same duration where bar chart looks better than line chart
   
   
![image](https://github.com/user-attachments/assets/1e7355f2-e31a-4f7d-a378-f93f7057970a)
   
   
![image](https://github.com/user-attachments/assets/d91cf1b0-3c3d-4f64-b288-f183d7ea4146)
   
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]

Reply via email to