Add hour and minute to time format on x-axis of all charts using nvd3.lineChart

[hwooson12]

This PR adds a new date and time format for x axis where all nvd3.lineChart classes are initialized in order to see time of execution_date as well as date.

closes: #19955

---

^ Add meaningful description above

Read the Pull Request Guidelines for more information.
In case of fundamental code change, Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in UPDATING.md.

[boring-cyborg]

Congratulations on your first Pull Request and welcome to the Apache Airflow community! If you have any issues or are unsure about any anything please check our Contribution Guide (https://github.com/apache/airflow/blob/main/CONTRIBUTING.rst)
Here are some useful points:

• Pay attention to the quality of your code (flake8, mypy and type annotations). Our pre-commits will help you with that.
• In case of a new feature add useful documentation (in docstrings or in docs/ directory). Adding a new operator? Check this short guide Consider adding an example DAG that shows how users should use it.
• Consider using Breeze environment for testing locally, it’s a heavy docker but it ships with a working Airflow and a lot of integrations.
• Be patient and persistent. It might take some time to get a review or get the final approval from Committers.
• Please follow ASF Code of Conduct for all communication including (but not limited to) comments on Pull Requests, Mailing list and Slack.
• Be sure to read the Airflow Coding style.
  Apache Airflow is a community-driven project and together we are making it better 🚀.
  In case of doubts contact the developers at:
  Mailing List: [email protected]
  Slack: https://s.apache.org/airflow-slack

[bbovenzi]

The labels are too close to each other. It is hard to read.

Can you try adding a line break before the hour and minute?

[uranusjr]

I think hour:minute should be placed before (i.e. above) the date, if we break the label into multiple lines

[hwooson12]

The original format in version 1.7 was like below.

BTW, I am digging into how to break the label into multiple lines. It's wrapped from d3 API so I guess it is going to be more to fix.

I think hour:minute should be placed before (i.e. above) the date, if we break the label into multiple lines

I agree with it. If you find how to do it or have some thoughts on it, please leave a comment below!

[hwooson12]

I realized it's not that simple to break the x-axis labels into multiple lines. It might need to fix the external library like nvd3. The only thing I can modify to change the format is a javascript function for tickFormat callback of d3 which returns real formatted date and time as string. So what I suggest is below.

If the format %H:%M, %d %b %Y is not that readable because they are too close, only time is shown on x-axis except for the beginning and the end. And both date and time can be seen on mouseover as you can see the screenshot above.

I wonder what you think about the suggestion?

@bbovenzi @uranusjr

[uranusjr]

That looks quite nice to me as well.

[bbovenzi]

nice work!

[github-actions]

The PR is likely OK to be merged with just subset of tests for default Python and Database versions without running the full matrix of tests, because it does not modify the core of Airflow. If the committers decide that the full tests matrix is needed, they will add the label 'full tests needed'. Then you should rebase to the latest main or amend the last commit of the PR, and push it with --force-with-lease.

[hwooson12]

Does this PR need more reviews to be merged or is there anything else I need to do to proceed forward? @bbovenzi

[boring-cyborg]

Awesome work, congrats on your first merged pull request!