Better way to handle time zone (charts)

[FlorianJacta]

Description To avoid delays in dates for chart, the user has to manually localize dataframe columns of date to 'UTC'. It is making the code heavier and less natural.

The problem comes from Plotly. We want to make sure, from time to time, that there's nothing we can do and take this issue back to the New Issues column if there's no news...

How to replicate

Run this code:

from taipy.gui import Gui
import taipy.gui.builder as tgb
import numpy as np
import pandas as pd

# create data with Dates
data = pd.DataFrame(
    {
        "Date": pd.date_range("2020-01-01", periods=5, freq="M", tz="Europe/Paris"),
        "Value": np.random.rand(5),
    }
)

with tgb.Page() as page:
    tgb.chart("{data}", x="Date", y="Value", height="800px")
    tgb.table("{data}")

print(data)

Gui(page).run(use_reloader=True, port=5003, title="Date issue")

You will see differences in the chart between the dates if you compare the chart and the table.

Acceptance Criteria

• [ ] Ensure new code is unit tested, and check code coverage is at least 90%
• [ ] Propagate any change on the demos and run all of them to ensure there is no breaking change
• [ ] Ensure any change is well documented

[FredLL-Avaiga]

https://github.com/plotly/plotly.js/issues/1956 https://github.com/plotly/plotly.js/issues/1532

[FlorianJacta]

An easy workaround to this issue is to apply the string format for the Date column to avoid putting the timezone to 'UTC'.

[Shaik-mohd-huzaifa]

Can you assign me this issue sir?

[AkashJana18]

I would like to work on this issue as hacktober and devfestai participant please assign it to me @jrobinAV

[FlorianJacta]

@Shaik-mohd-huzaifa, you have already been assigned to another issue. @AkashJana18, I am assigning this issue. Thank you for your contribution!

[quest-bot[bot]]

New Quest!

A new Quest has been launched in @Avaiga’s repo. Merge a PR that solves this issue to loot the Quest and earn your reward.

---

Some loot has been stashed in this issue to reward the solver!

🗡 Comment @quest-bot embark to check-in for this Quest and start solving the issue. Other solvers will be notified!

⚔️ When you submit a PR, comment @quest-bot loot #554 to link your PR to this Quest.

Questions? Check out the docs.

[AkashJana18]

@quest-bot embark

[quest-bot[bot]]

@AkashJana18 has embarked on their Quest. 🗡

• @AkashJana18 has been on GitHub since 2022.
• They have merged 12 public PRs in that time.
• Their swords are blessed with TypeScript and Python magic ✨
• They haven't contributed to this repo before.

This is not an assignment to the issue. Please check the repo’s contribution guidelines before submitting a PR.

Questions? Check out the docs.

[AkashJana18]

An easy workaround to this issue is to apply the string format for the Date column to avoid putting the timezone to 'UTC'.

Can you specify where do i have to make these changes ? In frontend/taipy-gui or taipy/gui or taipy/gui-core

[FlorianJacta]

An easy workaround to this issue is to apply the string format for the Date column to avoid putting the timezone to 'UTC'.

This is a workaround, not a fix. The fix should be inside taipy/gui.

[AkashJana18]

Can you provide the exact steps to reproduce the time zone issue in the charts? For instance, the kind of data, charts used, and how the time zones cause discrepancies.

Is this issue environment-specific? Should I test it across different operating systems, servers, or browsers?

What would be the recommended method to validate the fix? Are there specific tests or metrics to focus on when verifying that the time zones are handled correctly?

[FlorianJacta]

Run this code:

from taipy.gui import Gui
import taipy.gui.builder as tgb
import numpy as np
import pandas as pd

# create data with Dates
data = pd.DataFrame(
    {
        "Date": pd.date_range("2020-01-01", periods=5, freq="M", tz="Europe/Paris"),
        "Value": np.random.rand(5),
    }
)

with tgb.Page() as page:
    tgb.chart("{data}", x="Date", y="Value", height="800px")
    tgb.table("{data}")

print(data)

Gui(page).run(use_reloader=True, port=5003, title="Date issue")

You will see differences in the chart between the dates if you compare the chart and the table.

Is this issue environment-specific? Should I test it across different operating systems, servers, or browsers?

This is not specific to an environment but to how Plotly handles time zones. You should try to propose a solution that seems the most natural for developers and end users.

[AkashJana18]

I’ve tried different ways to handle the date configuration in Taipy/GUI, but none of them have worked as expected. I’m considering another approach, but I’m unsure if I’m on the right track. Could you provide any additional suggestions or guidance? I’d appreciate any insights to help me move forward.

[FredLL-Avaiga]

Tell us what you tried And we can discuss

On Sat, Oct 12, 2024, 19:34 Akash Jana @.***> wrote:

I’ve tried different ways to handle the date configuration in Taipy/GUI, but none of them have worked as expected. I’m considering another approach, but I’m unsure if I’m on the right track. Could you provide any additional suggestions or guidance? I’d appreciate any insights to help me move forward.

— Reply to this email directly, view it on GitHub https://github.com/Avaiga/taipy/issues/554#issuecomment-2408637553, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVQBA5BRUO77XQM5KQUUPILZ3FMSXAVCNFSM6AAAAABPNJZ3CSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMBYGYZTONJVGM . You are receiving this because you commented.Message ID: @.***>

[kingsmen732]

kindly assign me with this issue, so i can raise my PR. @FredLL-Avaiga @FlorianJacta

Final output:

[FlorianJacta]

I don't see where it fixes our issue with your screenshot @kingsmen732

[kingsmen732]

I don't see where it fixes our issue with your screenshot @kingsmen732

So right now there is no difference of ploting values and the table values which was mentioned earlier which makes the data more in readable format. if i have understood wrong , kindly provide me which is the exact problem and assign it this issue. @FlorianJacta

[FlorianJacta]

Could you describe your solution? or make the relevant PR? I am assigning you this issue

[kingsmen732]

Issue:

Plotly requires manual conversion of Date columns to 'UTC' to prevent delays in date representation on charts. This adds unnecessary complexity and makes the code less natural for users.

Solution:

The following code provides an efficient way to handle the time zone conversion, ensuring that dates are in 'UTC' before being passed to Plotly for visualization. This simplifies the workflow and eliminates delays:

Key Steps:

1. Date Localization to UTC:

   • The Date column is localized to 'UTC' during DataFrame creation, ensuring consistency across different regions.

     data = pd.DataFrame({
     "Date": pd.date_range("2020-01-01", periods=5, freq="ME", tz="Europe/Paris").tz_convert("UTC"),
     "Value": np.random.rand(5),
     })

2. Visualization:

   • A Taipy chart and table are created to visualize the data, ensuring seamless integration of dates in UTC.

     with tgb.Page() as page:
     tgb.chart("{data}", x="Date", y="Value", height="800px")
     tgb.table("{data}")

3. Run the Application:

   • The web application runs locally with automatic reloading on changes.

     Gui(page).run(use_reloader=True, port=5003, title="Date issue")

Outcome:

This approach eliminates the need for manual time zone adjustments, making the code cleaner and more efficient for users.

@FlorianJacta kindly go through this one so we can discuss more on it

[kingsmen732]

Issue:

Plotly requires manual conversion of Date columns to 'UTC' to prevent delays in date representation on charts. This adds unnecessary complexity and makes the code less natural for users.

Solution:

The following code provides an efficient way to handle the time zone conversion, ensuring that dates are in 'UTC' before being passed to Plotly for visualization. This simplifies the workflow and eliminates delays:

Key Steps:

1. **Date Localization to UTC**:

   * The `Date` column is localized to 'UTC' during DataFrame creation, ensuring consistency across different regions.

   ```python
   data = pd.DataFrame({
       "Date": pd.date_range("2020-01-01", periods=5, freq="ME", tz="Europe/Paris").tz_convert("UTC"),
       "Value": np.random.rand(5),
   })
   ```

2. **Visualization**:

   * A `Taipy` chart and table are created to visualize the data, ensuring seamless integration of dates in UTC.

   ```python
   with tgb.Page() as page:
       tgb.chart("{data}", x="Date", y="Value", height="800px")
       tgb.table("{data}")
   ```

3. **Run the Application**:

   * The web application runs locally with automatic reloading on changes.

   ```python
   Gui(page).run(use_reloader=True, port=5003, title="Date issue")
   ```

Outcome:

This approach eliminates the need for manual time zone adjustments, making the code cleaner and more efficient for users.

@FlorianJacta kindly go through this one so we can discuss more on it

I have proposed this solution to the problem awaiting a response i can work on other issues as well. @FlorianJacta @FredLL-Avaiga

[FlorianJacta]

@kingsmen732 You are fixing my code to replicate the issue. This is a workaround. However, the solution has to be on Taipy side and not on the user side.

[kingsmen732]

@FlorianJacta Thank you for clarifying, may I know which part of the repo I should be working on to fix this issue? that would helpful in this case. If I have anymore queries ill ask it here.😊

[FlorianJacta]

Maybe @FabienLelaquais or @FredLL-Avaiga can help you on that. But we have first to understand how we want to address this issue . Do you understand the issue that we have here and do you have a correct idea on how to fix it?

[kingsmen732]

With what I have an understanding of this issue I made a sequence diagram of how the workflow needs to be made. kindly look into it so i can be corrected if i am wrong. @FlorianJacta @FabienLelaquais @FredLL-Avaiga

link to the diagram: https://www.mermaidchart.com/raw/e59d3f46-f37b-4ef6-8923-127914204275?theme=light&version=v0.1&format=svg