Allow the X and Y tick format to be customized

[eradman]

Allow the format of each axis to be customzied using a D3 format string

Numbers: https://d3-wiki.readthedocs.io/zh_CN/master/Formatting/
Date/Time: https://d3-wiki.readthedocs.io/zh_CN/master/Time-Formatting/

What type of PR is this?

• Feature

Description

The database will save these in visualizations.options

    "xAxis": {
        "type": "-",
        "labels": {
            "enabled": true
        },
        "tickFormat": "%B %d"
    },
    "yAxis": [
        {
            "type": "linear",
            "tickFormat": "s"
        },
        {
            "type": "linear",
            "opposite": true,
            "tickFormat": ""
        }
    ],

Specifying a D3 format

How is this tested?

• Unit tests (pytest, jest)
• E2E Tests (Cypress)
• Manually

Related Tickets & Documents

#3215

Separate documentation needs to be added since there is no numbro/moment.js equivalent translation to D3 syntax.
Plotly does not allow a custom function to be defined for axis formatting.

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Old Behavior

New Axis Formatting using

Y: s
X: %B %d

[justinclift]

@gabrieldutra Do you have time & interest to look over this PR? 😄

[codecov]

Codecov Report

Merging #6370 (f4648e4) into master (f8934b8) will increase coverage by 0.00%.
Report is 1 commits behind head on master.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #6370   +/-   ##
=======================================
  Coverage   60.78%   60.78%           
=======================================
  Files         153      153           
  Lines       12527    12529    +2     
  Branches     1701     1701           
=======================================
+ Hits         7614     7616    +2     
  Misses       4687     4687           
  Partials      226      226           

see 1 file with indirect coverage changes

[eradman]

CC @litao3rd

[gaecoli]

Looks good!

[gaecoli]

You can even preset some parameters as an example, but it's great if you don't support it.

Like this:

[eradman]

You can even preset some parameters as an example, but it's great if you don't support it.

I'm not going to add that to this change, but this is a good idea to keep in mind as an incremental improvement.

[justinclift]

Cool. Seems like everything with this PR is happy. Is it ready to merge now, or are you still tweaking it a bit? 😄

[eradman]

This is ready to go. Merging