Localize auto-formatted x-axis date ticks - #2261

Merged
alexcjohnson merged 9 commits into
plotly:masterfrom
TomDemulierChevret:localise-auto-formatted-x-axis-date-ticks
Jan 30, 2018
Merged

Localize auto-formatted x-axis date ticks#2261
alexcjohnson merged 9 commits into
plotly:masterfrom
TomDemulierChevret:localise-auto-formatted-x-axis-date-ticks

Conversation

@TomDemulierChevret

@TomDemulierChevretTomDemulierChevret commented Jan 18, 2018

Copy link
Copy Markdown
Contributor

Features, Bug fixes, and others:

This pull request add the possibility to localize the auto-formatted x-axis date ticks.
It countains a working example for the french locale.

If some (or all) of the new formats are missing in the locale set by the user, format from the en locale will be used (as it does for the base d3 format and for the translation keys).

@etpinard

Copy link
Copy Markdown
Contributor

Thanks for the PR. Looks like @alexcjohnson was planning on doing this, but left it as a TODO.

A few tests are failing. I suspect formatDate is getting called outside of formatWorld w/o the extraFormat argument causing it to break.

Comment threadsrc/lib/dates.js Outdated
headStr = yearFormatWorld(cDate);
dateStr = dayFormatWorld(cDate);
headStr = formatWorld(cDate, extraFormat.year);
dateStr = formatWorld(cDate, extraFormat.dayMonth);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

modDateFormat calls out to components/calendars to get the full spectrum of d3-to-world-cal conversions - you've got the ones needed so far, but others will likely show up, and no need to reinvent the wheel with formatWorld.

At one point there was a performance argument for the structure we have here because we could use precompiled formatters... but we lost that benefit with the original date localization PR #2207, so now I think there would be a much more concise way to do this, something like:

calendar=isWorldCalendar(calendar)&&calendar;if(!fmt){if(tr==='y')fmt=extraFormat.year;elseif(tr==='m')fmt=extraFormat.month;elseif(tr==='d'){fmt=extraFormat.dayMonth+'\n'+extraFormat.year;}else{returnmodDateFormat(extraFormat.dayMonthYear,x,formatter,calendar)+'\n'+formatTime(x,tr);}}returnmodDateFormat(fmt,x,formatter,calendar);

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I suspected that this conversion table existed somewhere but I didn't know exactly where to look (and code search with date/format/etc returned way too many entries).

I like the new proposal, pretty clear to read.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just test and it does work indeed on my example (only the last else is incorrect, need to switch date and time).

Comment threadsrc/locale-en.js Outdated
year: '%Y',
month: '%b %Y',
dayMonth: '%b %e',
dayMonthYear: '%b %e, %Y'

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

%e is padded with a space for 1-digit days - we should switch back to %-d, which has no padding (in fr.js as well). That's responsible for the image test failures.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@TomDemulierChevret are you able to get the tests to run locally? It looks like axes_test and lib_date_test are both failing, @etpinard probably had the right idea there. We should also add a couple of explicit tests in localize_test to cover the newly added fields.

You can run just these three suites with the command:
npm run test-jasmine -- axes lib_date localize

@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Well I had a problem on my first try, but I will try again tomorrow.

@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Sorry, didn't have time to check this issue on Friday.

Regarding axes_test, the issue was with the initialisation of ax in setConvert method.
The fullLayout parameter passed to it has always an _extraFormat member from now on (retrieved from the locale) but since it's manually created in the test, this member was missing.

Regarding lib_date_test, the issue was that method formatDate was called directly without the new extraFormat parameter (which is normally passed via ax like in the axes_test).
I looked throught the code and couldn't find an occurence of formatDate called in another place than axes.js (which provides the extraFormat paramater as stated before).
Therefore I added manually the extraFormat to formatDate calls in lib_date_test when needed.

But since my knowledge of plotly.js is pretty limited, I may have missed some usage of formatDate, so you should definitly check there isn't a broken call somewhere.

I will try to add new test in localize_test to cover the new fields.

@TomDemulierChevret

TomDemulierChevret commented Jan 22, 2018

Copy link
Copy Markdown
ContributorAuthor

Just added a new test which check that both default locale (en) & provided locale format correctly the auto-formatted x-axis date tick.

Do you feel it is enough or should I add more test case ?

If everything is okay, can this PR be added to the next release ?

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@TomDemulierChevret looks great - thanks for the fixes, and the new test covers it all nicely.

I'm re-running the tests - we've had a lot of spurious failures lately just when running the tests on CI, we're working on making those more robust - assuming it passes (eventually) I think this is ready to go! 💃

I'm going to wait a few days before merging, in case we need a patch release since we just put out several major new features. But yes, this will be in 1.34.0 🎉

@alexcjohnsonalexcjohnson added this to the v1.34.0 milestone Jan 22, 2018
@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Perfect !
I'm not really in a hurry to have this merged, it was just to know that it's planned.
I'm gonna use plotly in an upcomming project in which locale support is mandatory, given it seems to be the best JS chart/plot library it would've been a shame to not use it because of locale. ;)

@alexcjohnson
alexcjohnson merged commit 7de0c7f into plotly:masterJan 30, 2018
@TomDemulierChevret
TomDemulierChevret deleted the localise-auto-formatted-x-axis-date-ticks branch January 31, 2018 08:51
ivankirshin added a commit to newcrom/plotly.js that referenced this pull request Dec 19, 2023
ifdotpy added a commit to newcrom/plotly.js that referenced this pull request Dec 20, 2023
plotly#2261: Front: Reset zoom when detection time is applied
ivankirshin added a commit to newcrom/plotly.js that referenced this pull request Jan 10, 2024
ifdotpy added a commit to newcrom/plotly.js that referenced this pull request Jan 10, 2024
plotly#2261: Front: Reset zoom when detection time is applied
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@TomDemulierChevret@etpinard@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Localize auto-formatted x-axis date ticks - #2261

Merged
alexcjohnson merged 9 commits into
plotly:masterfrom
TomDemulierChevret:localise-auto-formatted-x-axis-date-ticks
Jan 30, 2018
Merged

Localize auto-formatted x-axis date ticks#2261
alexcjohnson merged 9 commits into
plotly:masterfrom
TomDemulierChevret:localise-auto-formatted-x-axis-date-ticks

Conversation

@TomDemulierChevret

@TomDemulierChevretTomDemulierChevret commented Jan 18, 2018

Copy link
Copy Markdown
Contributor

Features, Bug fixes, and others:

This pull request add the possibility to localize the auto-formatted x-axis date ticks.
It countains a working example for the french locale.

If some (or all) of the new formats are missing in the locale set by the user, format from the en locale will be used (as it does for the base d3 format and for the translation keys).

@etpinard

Copy link
Copy Markdown
Contributor

Thanks for the PR. Looks like @alexcjohnson was planning on doing this, but left it as a TODO.

A few tests are failing. I suspect formatDate is getting called outside of formatWorld w/o the extraFormat argument causing it to break.

Comment threadsrc/lib/dates.js Outdated
headStr = yearFormatWorld(cDate);
dateStr = dayFormatWorld(cDate);
headStr = formatWorld(cDate, extraFormat.year);
dateStr = formatWorld(cDate, extraFormat.dayMonth);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

modDateFormat calls out to components/calendars to get the full spectrum of d3-to-world-cal conversions - you've got the ones needed so far, but others will likely show up, and no need to reinvent the wheel with formatWorld.

At one point there was a performance argument for the structure we have here because we could use precompiled formatters... but we lost that benefit with the original date localization PR #2207, so now I think there would be a much more concise way to do this, something like:

calendar=isWorldCalendar(calendar)&&calendar;if(!fmt){if(tr==='y')fmt=extraFormat.year;elseif(tr==='m')fmt=extraFormat.month;elseif(tr==='d'){fmt=extraFormat.dayMonth+'\n'+extraFormat.year;}else{returnmodDateFormat(extraFormat.dayMonthYear,x,formatter,calendar)+'\n'+formatTime(x,tr);}}returnmodDateFormat(fmt,x,formatter,calendar);

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I suspected that this conversion table existed somewhere but I didn't know exactly where to look (and code search with date/format/etc returned way too many entries).

I like the new proposal, pretty clear to read.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just test and it does work indeed on my example (only the last else is incorrect, need to switch date and time).

Comment threadsrc/locale-en.js Outdated
year: '%Y',
month: '%b %Y',
dayMonth: '%b %e',
dayMonthYear: '%b %e, %Y'

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

%e is padded with a space for 1-digit days - we should switch back to %-d, which has no padding (in fr.js as well). That's responsible for the image test failures.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@TomDemulierChevret are you able to get the tests to run locally? It looks like axes_test and lib_date_test are both failing, @etpinard probably had the right idea there. We should also add a couple of explicit tests in localize_test to cover the newly added fields.

You can run just these three suites with the command:
npm run test-jasmine -- axes lib_date localize

@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Well I had a problem on my first try, but I will try again tomorrow.

@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Sorry, didn't have time to check this issue on Friday.

Regarding axes_test, the issue was with the initialisation of ax in setConvert method.
The fullLayout parameter passed to it has always an _extraFormat member from now on (retrieved from the locale) but since it's manually created in the test, this member was missing.

Regarding lib_date_test, the issue was that method formatDate was called directly without the new extraFormat parameter (which is normally passed via ax like in the axes_test).
I looked throught the code and couldn't find an occurence of formatDate called in another place than axes.js (which provides the extraFormat paramater as stated before).
Therefore I added manually the extraFormat to formatDate calls in lib_date_test when needed.

But since my knowledge of plotly.js is pretty limited, I may have missed some usage of formatDate, so you should definitly check there isn't a broken call somewhere.

I will try to add new test in localize_test to cover the new fields.

@TomDemulierChevret

TomDemulierChevret commented Jan 22, 2018

Copy link
Copy Markdown
ContributorAuthor

Just added a new test which check that both default locale (en) & provided locale format correctly the auto-formatted x-axis date tick.

Do you feel it is enough or should I add more test case ?

If everything is okay, can this PR be added to the next release ?

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@TomDemulierChevret looks great - thanks for the fixes, and the new test covers it all nicely.

I'm re-running the tests - we've had a lot of spurious failures lately just when running the tests on CI, we're working on making those more robust - assuming it passes (eventually) I think this is ready to go! 💃

I'm going to wait a few days before merging, in case we need a patch release since we just put out several major new features. But yes, this will be in 1.34.0 🎉

@alexcjohnsonalexcjohnson added this to the v1.34.0 milestone Jan 22, 2018
@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Perfect !
I'm not really in a hurry to have this merged, it was just to know that it's planned.
I'm gonna use plotly in an upcomming project in which locale support is mandatory, given it seems to be the best JS chart/plot library it would've been a shame to not use it because of locale. ;)

@alexcjohnson
alexcjohnson merged commit 7de0c7f into plotly:masterJan 30, 2018
@TomDemulierChevret
TomDemulierChevret deleted the localise-auto-formatted-x-axis-date-ticks branch January 31, 2018 08:51
ivankirshin added a commit to newcrom/plotly.js that referenced this pull request Dec 19, 2023
ifdotpy added a commit to newcrom/plotly.js that referenced this pull request Dec 20, 2023
plotly#2261: Front: Reset zoom when detection time is applied
ivankirshin added a commit to newcrom/plotly.js that referenced this pull request Jan 10, 2024
ifdotpy added a commit to newcrom/plotly.js that referenced this pull request Jan 10, 2024
plotly#2261: Front: Reset zoom when detection time is applied
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@TomDemulierChevret@etpinard@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Localize auto-formatted x-axis date ticks - #2261

Merged
alexcjohnson merged 9 commits into
plotly:masterfrom
TomDemulierChevret:localise-auto-formatted-x-axis-date-ticks
Jan 30, 2018
Merged

Localize auto-formatted x-axis date ticks#2261
alexcjohnson merged 9 commits into
plotly:masterfrom
TomDemulierChevret:localise-auto-formatted-x-axis-date-ticks

Conversation

@TomDemulierChevret

@TomDemulierChevretTomDemulierChevret commented Jan 18, 2018

Copy link
Copy Markdown
Contributor

Features, Bug fixes, and others:

This pull request add the possibility to localize the auto-formatted x-axis date ticks.
It countains a working example for the french locale.

If some (or all) of the new formats are missing in the locale set by the user, format from the en locale will be used (as it does for the base d3 format and for the translation keys).

@etpinard

Copy link
Copy Markdown
Contributor

Thanks for the PR. Looks like @alexcjohnson was planning on doing this, but left it as a TODO.

A few tests are failing. I suspect formatDate is getting called outside of formatWorld w/o the extraFormat argument causing it to break.

Comment threadsrc/lib/dates.js Outdated
headStr = yearFormatWorld(cDate);
dateStr = dayFormatWorld(cDate);
headStr = formatWorld(cDate, extraFormat.year);
dateStr = formatWorld(cDate, extraFormat.dayMonth);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

modDateFormat calls out to components/calendars to get the full spectrum of d3-to-world-cal conversions - you've got the ones needed so far, but others will likely show up, and no need to reinvent the wheel with formatWorld.

At one point there was a performance argument for the structure we have here because we could use precompiled formatters... but we lost that benefit with the original date localization PR #2207, so now I think there would be a much more concise way to do this, something like:

calendar=isWorldCalendar(calendar)&&calendar;if(!fmt){if(tr==='y')fmt=extraFormat.year;elseif(tr==='m')fmt=extraFormat.month;elseif(tr==='d'){fmt=extraFormat.dayMonth+'\n'+extraFormat.year;}else{returnmodDateFormat(extraFormat.dayMonthYear,x,formatter,calendar)+'\n'+formatTime(x,tr);}}returnmodDateFormat(fmt,x,formatter,calendar);

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I suspected that this conversion table existed somewhere but I didn't know exactly where to look (and code search with date/format/etc returned way too many entries).

I like the new proposal, pretty clear to read.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just test and it does work indeed on my example (only the last else is incorrect, need to switch date and time).

Comment threadsrc/locale-en.js Outdated
year: '%Y',
month: '%b %Y',
dayMonth: '%b %e',
dayMonthYear: '%b %e, %Y'

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

%e is padded with a space for 1-digit days - we should switch back to %-d, which has no padding (in fr.js as well). That's responsible for the image test failures.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@TomDemulierChevret are you able to get the tests to run locally? It looks like axes_test and lib_date_test are both failing, @etpinard probably had the right idea there. We should also add a couple of explicit tests in localize_test to cover the newly added fields.

You can run just these three suites with the command:
npm run test-jasmine -- axes lib_date localize

@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Well I had a problem on my first try, but I will try again tomorrow.

@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Sorry, didn't have time to check this issue on Friday.

Regarding axes_test, the issue was with the initialisation of ax in setConvert method.
The fullLayout parameter passed to it has always an _extraFormat member from now on (retrieved from the locale) but since it's manually created in the test, this member was missing.

Regarding lib_date_test, the issue was that method formatDate was called directly without the new extraFormat parameter (which is normally passed via ax like in the axes_test).
I looked throught the code and couldn't find an occurence of formatDate called in another place than axes.js (which provides the extraFormat paramater as stated before).
Therefore I added manually the extraFormat to formatDate calls in lib_date_test when needed.

But since my knowledge of plotly.js is pretty limited, I may have missed some usage of formatDate, so you should definitly check there isn't a broken call somewhere.

I will try to add new test in localize_test to cover the new fields.

@TomDemulierChevret

TomDemulierChevret commented Jan 22, 2018

Copy link
Copy Markdown
ContributorAuthor

Just added a new test which check that both default locale (en) & provided locale format correctly the auto-formatted x-axis date tick.

Do you feel it is enough or should I add more test case ?

If everything is okay, can this PR be added to the next release ?

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@TomDemulierChevret looks great - thanks for the fixes, and the new test covers it all nicely.

I'm re-running the tests - we've had a lot of spurious failures lately just when running the tests on CI, we're working on making those more robust - assuming it passes (eventually) I think this is ready to go! 💃

I'm going to wait a few days before merging, in case we need a patch release since we just put out several major new features. But yes, this will be in 1.34.0 🎉

@alexcjohnsonalexcjohnson added this to the v1.34.0 milestone Jan 22, 2018
@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Perfect !
I'm not really in a hurry to have this merged, it was just to know that it's planned.
I'm gonna use plotly in an upcomming project in which locale support is mandatory, given it seems to be the best JS chart/plot library it would've been a shame to not use it because of locale. ;)

@alexcjohnson
alexcjohnson merged commit 7de0c7f into plotly:masterJan 30, 2018
@TomDemulierChevret
TomDemulierChevret deleted the localise-auto-formatted-x-axis-date-ticks branch January 31, 2018 08:51
ivankirshin added a commit to newcrom/plotly.js that referenced this pull request Dec 19, 2023
ifdotpy added a commit to newcrom/plotly.js that referenced this pull request Dec 20, 2023
plotly#2261: Front: Reset zoom when detection time is applied
ivankirshin added a commit to newcrom/plotly.js that referenced this pull request Jan 10, 2024
ifdotpy added a commit to newcrom/plotly.js that referenced this pull request Jan 10, 2024
plotly#2261: Front: Reset zoom when detection time is applied
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@TomDemulierChevret@etpinard@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Localize auto-formatted x-axis date ticks - #2261

Merged
alexcjohnson merged 9 commits into
plotly:masterfrom
TomDemulierChevret:localise-auto-formatted-x-axis-date-ticks
Jan 30, 2018
Merged

Localize auto-formatted x-axis date ticks#2261
alexcjohnson merged 9 commits into
plotly:masterfrom
TomDemulierChevret:localise-auto-formatted-x-axis-date-ticks

Conversation

@TomDemulierChevret

@TomDemulierChevretTomDemulierChevret commented Jan 18, 2018

Copy link
Copy Markdown
Contributor

Features, Bug fixes, and others:

This pull request add the possibility to localize the auto-formatted x-axis date ticks.
It countains a working example for the french locale.

If some (or all) of the new formats are missing in the locale set by the user, format from the en locale will be used (as it does for the base d3 format and for the translation keys).

@etpinard

Copy link
Copy Markdown
Contributor

Thanks for the PR. Looks like @alexcjohnson was planning on doing this, but left it as a TODO.

A few tests are failing. I suspect formatDate is getting called outside of formatWorld w/o the extraFormat argument causing it to break.

Comment threadsrc/lib/dates.js Outdated
headStr = yearFormatWorld(cDate);
dateStr = dayFormatWorld(cDate);
headStr = formatWorld(cDate, extraFormat.year);
dateStr = formatWorld(cDate, extraFormat.dayMonth);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

modDateFormat calls out to components/calendars to get the full spectrum of d3-to-world-cal conversions - you've got the ones needed so far, but others will likely show up, and no need to reinvent the wheel with formatWorld.

At one point there was a performance argument for the structure we have here because we could use precompiled formatters... but we lost that benefit with the original date localization PR #2207, so now I think there would be a much more concise way to do this, something like:

calendar=isWorldCalendar(calendar)&&calendar;if(!fmt){if(tr==='y')fmt=extraFormat.year;elseif(tr==='m')fmt=extraFormat.month;elseif(tr==='d'){fmt=extraFormat.dayMonth+'\n'+extraFormat.year;}else{returnmodDateFormat(extraFormat.dayMonthYear,x,formatter,calendar)+'\n'+formatTime(x,tr);}}returnmodDateFormat(fmt,x,formatter,calendar);

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I suspected that this conversion table existed somewhere but I didn't know exactly where to look (and code search with date/format/etc returned way too many entries).

I like the new proposal, pretty clear to read.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just test and it does work indeed on my example (only the last else is incorrect, need to switch date and time).

Comment threadsrc/locale-en.js Outdated
year: '%Y',
month: '%b %Y',
dayMonth: '%b %e',
dayMonthYear: '%b %e, %Y'

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

%e is padded with a space for 1-digit days - we should switch back to %-d, which has no padding (in fr.js as well). That's responsible for the image test failures.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@TomDemulierChevret are you able to get the tests to run locally? It looks like axes_test and lib_date_test are both failing, @etpinard probably had the right idea there. We should also add a couple of explicit tests in localize_test to cover the newly added fields.

You can run just these three suites with the command:
npm run test-jasmine -- axes lib_date localize

@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Well I had a problem on my first try, but I will try again tomorrow.

@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Sorry, didn't have time to check this issue on Friday.

Regarding axes_test, the issue was with the initialisation of ax in setConvert method.
The fullLayout parameter passed to it has always an _extraFormat member from now on (retrieved from the locale) but since it's manually created in the test, this member was missing.

Regarding lib_date_test, the issue was that method formatDate was called directly without the new extraFormat parameter (which is normally passed via ax like in the axes_test).
I looked throught the code and couldn't find an occurence of formatDate called in another place than axes.js (which provides the extraFormat paramater as stated before).
Therefore I added manually the extraFormat to formatDate calls in lib_date_test when needed.

But since my knowledge of plotly.js is pretty limited, I may have missed some usage of formatDate, so you should definitly check there isn't a broken call somewhere.

I will try to add new test in localize_test to cover the new fields.

@TomDemulierChevret

TomDemulierChevret commented Jan 22, 2018

Copy link
Copy Markdown
ContributorAuthor

Just added a new test which check that both default locale (en) & provided locale format correctly the auto-formatted x-axis date tick.

Do you feel it is enough or should I add more test case ?

If everything is okay, can this PR be added to the next release ?

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@TomDemulierChevret looks great - thanks for the fixes, and the new test covers it all nicely.

I'm re-running the tests - we've had a lot of spurious failures lately just when running the tests on CI, we're working on making those more robust - assuming it passes (eventually) I think this is ready to go! 💃

I'm going to wait a few days before merging, in case we need a patch release since we just put out several major new features. But yes, this will be in 1.34.0 🎉

@alexcjohnsonalexcjohnson added this to the v1.34.0 milestone Jan 22, 2018
@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Perfect !
I'm not really in a hurry to have this merged, it was just to know that it's planned.
I'm gonna use plotly in an upcomming project in which locale support is mandatory, given it seems to be the best JS chart/plot library it would've been a shame to not use it because of locale. ;)

@alexcjohnson
alexcjohnson merged commit 7de0c7f into plotly:masterJan 30, 2018
@TomDemulierChevret
TomDemulierChevret deleted the localise-auto-formatted-x-axis-date-ticks branch January 31, 2018 08:51
ivankirshin added a commit to newcrom/plotly.js that referenced this pull request Dec 19, 2023
ifdotpy added a commit to newcrom/plotly.js that referenced this pull request Dec 20, 2023
plotly#2261: Front: Reset zoom when detection time is applied
ivankirshin added a commit to newcrom/plotly.js that referenced this pull request Jan 10, 2024
ifdotpy added a commit to newcrom/plotly.js that referenced this pull request Jan 10, 2024
plotly#2261: Front: Reset zoom when detection time is applied
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@TomDemulierChevret@etpinard@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Localize auto-formatted x-axis date ticks - #2261

Merged
alexcjohnson merged 9 commits into
plotly:masterfrom
TomDemulierChevret:localise-auto-formatted-x-axis-date-ticks
Jan 30, 2018
Merged

Localize auto-formatted x-axis date ticks#2261
alexcjohnson merged 9 commits into
plotly:masterfrom
TomDemulierChevret:localise-auto-formatted-x-axis-date-ticks

Conversation

@TomDemulierChevret

@TomDemulierChevretTomDemulierChevret commented Jan 18, 2018

Copy link
Copy Markdown
Contributor

Features, Bug fixes, and others:

This pull request add the possibility to localize the auto-formatted x-axis date ticks.
It countains a working example for the french locale.

If some (or all) of the new formats are missing in the locale set by the user, format from the en locale will be used (as it does for the base d3 format and for the translation keys).

@etpinard

Copy link
Copy Markdown
Contributor

Thanks for the PR. Looks like @alexcjohnson was planning on doing this, but left it as a TODO.

A few tests are failing. I suspect formatDate is getting called outside of formatWorld w/o the extraFormat argument causing it to break.

Comment threadsrc/lib/dates.js Outdated
headStr = yearFormatWorld(cDate);
dateStr = dayFormatWorld(cDate);
headStr = formatWorld(cDate, extraFormat.year);
dateStr = formatWorld(cDate, extraFormat.dayMonth);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

modDateFormat calls out to components/calendars to get the full spectrum of d3-to-world-cal conversions - you've got the ones needed so far, but others will likely show up, and no need to reinvent the wheel with formatWorld.

At one point there was a performance argument for the structure we have here because we could use precompiled formatters... but we lost that benefit with the original date localization PR #2207, so now I think there would be a much more concise way to do this, something like:

calendar=isWorldCalendar(calendar)&&calendar;if(!fmt){if(tr==='y')fmt=extraFormat.year;elseif(tr==='m')fmt=extraFormat.month;elseif(tr==='d'){fmt=extraFormat.dayMonth+'\n'+extraFormat.year;}else{returnmodDateFormat(extraFormat.dayMonthYear,x,formatter,calendar)+'\n'+formatTime(x,tr);}}returnmodDateFormat(fmt,x,formatter,calendar);

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I suspected that this conversion table existed somewhere but I didn't know exactly where to look (and code search with date/format/etc returned way too many entries).

I like the new proposal, pretty clear to read.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just test and it does work indeed on my example (only the last else is incorrect, need to switch date and time).

Comment threadsrc/locale-en.js Outdated
year: '%Y',
month: '%b %Y',
dayMonth: '%b %e',
dayMonthYear: '%b %e, %Y'

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

%e is padded with a space for 1-digit days - we should switch back to %-d, which has no padding (in fr.js as well). That's responsible for the image test failures.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@TomDemulierChevret are you able to get the tests to run locally? It looks like axes_test and lib_date_test are both failing, @etpinard probably had the right idea there. We should also add a couple of explicit tests in localize_test to cover the newly added fields.

You can run just these three suites with the command:
npm run test-jasmine -- axes lib_date localize

@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Well I had a problem on my first try, but I will try again tomorrow.

@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Sorry, didn't have time to check this issue on Friday.

Regarding axes_test, the issue was with the initialisation of ax in setConvert method.
The fullLayout parameter passed to it has always an _extraFormat member from now on (retrieved from the locale) but since it's manually created in the test, this member was missing.

Regarding lib_date_test, the issue was that method formatDate was called directly without the new extraFormat parameter (which is normally passed via ax like in the axes_test).
I looked throught the code and couldn't find an occurence of formatDate called in another place than axes.js (which provides the extraFormat paramater as stated before).
Therefore I added manually the extraFormat to formatDate calls in lib_date_test when needed.

But since my knowledge of plotly.js is pretty limited, I may have missed some usage of formatDate, so you should definitly check there isn't a broken call somewhere.

I will try to add new test in localize_test to cover the new fields.

@TomDemulierChevret

TomDemulierChevret commented Jan 22, 2018

Copy link
Copy Markdown
ContributorAuthor

Just added a new test which check that both default locale (en) & provided locale format correctly the auto-formatted x-axis date tick.

Do you feel it is enough or should I add more test case ?

If everything is okay, can this PR be added to the next release ?

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@TomDemulierChevret looks great - thanks for the fixes, and the new test covers it all nicely.

I'm re-running the tests - we've had a lot of spurious failures lately just when running the tests on CI, we're working on making those more robust - assuming it passes (eventually) I think this is ready to go! 💃

I'm going to wait a few days before merging, in case we need a patch release since we just put out several major new features. But yes, this will be in 1.34.0 🎉

@alexcjohnsonalexcjohnson added this to the v1.34.0 milestone Jan 22, 2018
@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Perfect !
I'm not really in a hurry to have this merged, it was just to know that it's planned.
I'm gonna use plotly in an upcomming project in which locale support is mandatory, given it seems to be the best JS chart/plot library it would've been a shame to not use it because of locale. ;)

@alexcjohnson
alexcjohnson merged commit 7de0c7f into plotly:masterJan 30, 2018
@TomDemulierChevret
TomDemulierChevret deleted the localise-auto-formatted-x-axis-date-ticks branch January 31, 2018 08:51
ivankirshin added a commit to newcrom/plotly.js that referenced this pull request Dec 19, 2023
ifdotpy added a commit to newcrom/plotly.js that referenced this pull request Dec 20, 2023
plotly#2261: Front: Reset zoom when detection time is applied
ivankirshin added a commit to newcrom/plotly.js that referenced this pull request Jan 10, 2024
ifdotpy added a commit to newcrom/plotly.js that referenced this pull request Jan 10, 2024
plotly#2261: Front: Reset zoom when detection time is applied
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@TomDemulierChevret@etpinard@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Localize auto-formatted x-axis date ticks - #2261

Merged
alexcjohnson merged 9 commits into
plotly:masterfrom
TomDemulierChevret:localise-auto-formatted-x-axis-date-ticks
Jan 30, 2018
Merged

Localize auto-formatted x-axis date ticks#2261
alexcjohnson merged 9 commits into
plotly:masterfrom
TomDemulierChevret:localise-auto-formatted-x-axis-date-ticks

Conversation

@TomDemulierChevret

@TomDemulierChevretTomDemulierChevret commented Jan 18, 2018

Copy link
Copy Markdown
Contributor

Features, Bug fixes, and others:

This pull request add the possibility to localize the auto-formatted x-axis date ticks.
It countains a working example for the french locale.

If some (or all) of the new formats are missing in the locale set by the user, format from the en locale will be used (as it does for the base d3 format and for the translation keys).

@etpinard

Copy link
Copy Markdown
Contributor

Thanks for the PR. Looks like @alexcjohnson was planning on doing this, but left it as a TODO.

A few tests are failing. I suspect formatDate is getting called outside of formatWorld w/o the extraFormat argument causing it to break.

Comment threadsrc/lib/dates.js Outdated
headStr = yearFormatWorld(cDate);
dateStr = dayFormatWorld(cDate);
headStr = formatWorld(cDate, extraFormat.year);
dateStr = formatWorld(cDate, extraFormat.dayMonth);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

modDateFormat calls out to components/calendars to get the full spectrum of d3-to-world-cal conversions - you've got the ones needed so far, but others will likely show up, and no need to reinvent the wheel with formatWorld.

At one point there was a performance argument for the structure we have here because we could use precompiled formatters... but we lost that benefit with the original date localization PR #2207, so now I think there would be a much more concise way to do this, something like:

calendar=isWorldCalendar(calendar)&&calendar;if(!fmt){if(tr==='y')fmt=extraFormat.year;elseif(tr==='m')fmt=extraFormat.month;elseif(tr==='d'){fmt=extraFormat.dayMonth+'\n'+extraFormat.year;}else{returnmodDateFormat(extraFormat.dayMonthYear,x,formatter,calendar)+'\n'+formatTime(x,tr);}}returnmodDateFormat(fmt,x,formatter,calendar);

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I suspected that this conversion table existed somewhere but I didn't know exactly where to look (and code search with date/format/etc returned way too many entries).

I like the new proposal, pretty clear to read.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just test and it does work indeed on my example (only the last else is incorrect, need to switch date and time).

Comment threadsrc/locale-en.js Outdated
year: '%Y',
month: '%b %Y',
dayMonth: '%b %e',
dayMonthYear: '%b %e, %Y'

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

%e is padded with a space for 1-digit days - we should switch back to %-d, which has no padding (in fr.js as well). That's responsible for the image test failures.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@TomDemulierChevret are you able to get the tests to run locally? It looks like axes_test and lib_date_test are both failing, @etpinard probably had the right idea there. We should also add a couple of explicit tests in localize_test to cover the newly added fields.

You can run just these three suites with the command:
npm run test-jasmine -- axes lib_date localize

@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Well I had a problem on my first try, but I will try again tomorrow.

@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Sorry, didn't have time to check this issue on Friday.

Regarding axes_test, the issue was with the initialisation of ax in setConvert method.
The fullLayout parameter passed to it has always an _extraFormat member from now on (retrieved from the locale) but since it's manually created in the test, this member was missing.

Regarding lib_date_test, the issue was that method formatDate was called directly without the new extraFormat parameter (which is normally passed via ax like in the axes_test).
I looked throught the code and couldn't find an occurence of formatDate called in another place than axes.js (which provides the extraFormat paramater as stated before).
Therefore I added manually the extraFormat to formatDate calls in lib_date_test when needed.

But since my knowledge of plotly.js is pretty limited, I may have missed some usage of formatDate, so you should definitly check there isn't a broken call somewhere.

I will try to add new test in localize_test to cover the new fields.

@TomDemulierChevret

TomDemulierChevret commented Jan 22, 2018

Copy link
Copy Markdown
ContributorAuthor

Just added a new test which check that both default locale (en) & provided locale format correctly the auto-formatted x-axis date tick.

Do you feel it is enough or should I add more test case ?

If everything is okay, can this PR be added to the next release ?

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@TomDemulierChevret looks great - thanks for the fixes, and the new test covers it all nicely.

I'm re-running the tests - we've had a lot of spurious failures lately just when running the tests on CI, we're working on making those more robust - assuming it passes (eventually) I think this is ready to go! 💃

I'm going to wait a few days before merging, in case we need a patch release since we just put out several major new features. But yes, this will be in 1.34.0 🎉

@alexcjohnsonalexcjohnson added this to the v1.34.0 milestone Jan 22, 2018
@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Perfect !
I'm not really in a hurry to have this merged, it was just to know that it's planned.
I'm gonna use plotly in an upcomming project in which locale support is mandatory, given it seems to be the best JS chart/plot library it would've been a shame to not use it because of locale. ;)

@alexcjohnson
alexcjohnson merged commit 7de0c7f into plotly:masterJan 30, 2018
@TomDemulierChevret
TomDemulierChevret deleted the localise-auto-formatted-x-axis-date-ticks branch January 31, 2018 08:51
ivankirshin added a commit to newcrom/plotly.js that referenced this pull request Dec 19, 2023
ifdotpy added a commit to newcrom/plotly.js that referenced this pull request Dec 20, 2023
plotly#2261: Front: Reset zoom when detection time is applied
ivankirshin added a commit to newcrom/plotly.js that referenced this pull request Jan 10, 2024
ifdotpy added a commit to newcrom/plotly.js that referenced this pull request Jan 10, 2024
plotly#2261: Front: Reset zoom when detection time is applied
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@TomDemulierChevret@etpinard@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Localize auto-formatted x-axis date ticks - #2261

Merged
alexcjohnson merged 9 commits into
plotly:masterfrom
TomDemulierChevret:localise-auto-formatted-x-axis-date-ticks
Jan 30, 2018
Merged

Localize auto-formatted x-axis date ticks#2261
alexcjohnson merged 9 commits into
plotly:masterfrom
TomDemulierChevret:localise-auto-formatted-x-axis-date-ticks

Conversation

@TomDemulierChevret

@TomDemulierChevretTomDemulierChevret commented Jan 18, 2018

Copy link
Copy Markdown
Contributor

Features, Bug fixes, and others:

This pull request add the possibility to localize the auto-formatted x-axis date ticks.
It countains a working example for the french locale.

If some (or all) of the new formats are missing in the locale set by the user, format from the en locale will be used (as it does for the base d3 format and for the translation keys).

@etpinard

Copy link
Copy Markdown
Contributor

Thanks for the PR. Looks like @alexcjohnson was planning on doing this, but left it as a TODO.

A few tests are failing. I suspect formatDate is getting called outside of formatWorld w/o the extraFormat argument causing it to break.

Comment threadsrc/lib/dates.js Outdated
headStr = yearFormatWorld(cDate);
dateStr = dayFormatWorld(cDate);
headStr = formatWorld(cDate, extraFormat.year);
dateStr = formatWorld(cDate, extraFormat.dayMonth);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

modDateFormat calls out to components/calendars to get the full spectrum of d3-to-world-cal conversions - you've got the ones needed so far, but others will likely show up, and no need to reinvent the wheel with formatWorld.

At one point there was a performance argument for the structure we have here because we could use precompiled formatters... but we lost that benefit with the original date localization PR #2207, so now I think there would be a much more concise way to do this, something like:

calendar=isWorldCalendar(calendar)&&calendar;if(!fmt){if(tr==='y')fmt=extraFormat.year;elseif(tr==='m')fmt=extraFormat.month;elseif(tr==='d'){fmt=extraFormat.dayMonth+'\n'+extraFormat.year;}else{returnmodDateFormat(extraFormat.dayMonthYear,x,formatter,calendar)+'\n'+formatTime(x,tr);}}returnmodDateFormat(fmt,x,formatter,calendar);

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I suspected that this conversion table existed somewhere but I didn't know exactly where to look (and code search with date/format/etc returned way too many entries).

I like the new proposal, pretty clear to read.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just test and it does work indeed on my example (only the last else is incorrect, need to switch date and time).

Comment threadsrc/locale-en.js Outdated
year: '%Y',
month: '%b %Y',
dayMonth: '%b %e',
dayMonthYear: '%b %e, %Y'

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

%e is padded with a space for 1-digit days - we should switch back to %-d, which has no padding (in fr.js as well). That's responsible for the image test failures.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@TomDemulierChevret are you able to get the tests to run locally? It looks like axes_test and lib_date_test are both failing, @etpinard probably had the right idea there. We should also add a couple of explicit tests in localize_test to cover the newly added fields.

You can run just these three suites with the command:
npm run test-jasmine -- axes lib_date localize

@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Well I had a problem on my first try, but I will try again tomorrow.

@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Sorry, didn't have time to check this issue on Friday.

Regarding axes_test, the issue was with the initialisation of ax in setConvert method.
The fullLayout parameter passed to it has always an _extraFormat member from now on (retrieved from the locale) but since it's manually created in the test, this member was missing.

Regarding lib_date_test, the issue was that method formatDate was called directly without the new extraFormat parameter (which is normally passed via ax like in the axes_test).
I looked throught the code and couldn't find an occurence of formatDate called in another place than axes.js (which provides the extraFormat paramater as stated before).
Therefore I added manually the extraFormat to formatDate calls in lib_date_test when needed.

But since my knowledge of plotly.js is pretty limited, I may have missed some usage of formatDate, so you should definitly check there isn't a broken call somewhere.

I will try to add new test in localize_test to cover the new fields.

@TomDemulierChevret

TomDemulierChevret commented Jan 22, 2018

Copy link
Copy Markdown
ContributorAuthor

Just added a new test which check that both default locale (en) & provided locale format correctly the auto-formatted x-axis date tick.

Do you feel it is enough or should I add more test case ?

If everything is okay, can this PR be added to the next release ?

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@TomDemulierChevret looks great - thanks for the fixes, and the new test covers it all nicely.

I'm re-running the tests - we've had a lot of spurious failures lately just when running the tests on CI, we're working on making those more robust - assuming it passes (eventually) I think this is ready to go! 💃

I'm going to wait a few days before merging, in case we need a patch release since we just put out several major new features. But yes, this will be in 1.34.0 🎉

@alexcjohnsonalexcjohnson added this to the v1.34.0 milestone Jan 22, 2018
@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Perfect !
I'm not really in a hurry to have this merged, it was just to know that it's planned.
I'm gonna use plotly in an upcomming project in which locale support is mandatory, given it seems to be the best JS chart/plot library it would've been a shame to not use it because of locale. ;)

@alexcjohnson
alexcjohnson merged commit 7de0c7f into plotly:masterJan 30, 2018
@TomDemulierChevret
TomDemulierChevret deleted the localise-auto-formatted-x-axis-date-ticks branch January 31, 2018 08:51
ivankirshin added a commit to newcrom/plotly.js that referenced this pull request Dec 19, 2023
ifdotpy added a commit to newcrom/plotly.js that referenced this pull request Dec 20, 2023
plotly#2261: Front: Reset zoom when detection time is applied
ivankirshin added a commit to newcrom/plotly.js that referenced this pull request Jan 10, 2024
ifdotpy added a commit to newcrom/plotly.js that referenced this pull request Jan 10, 2024
plotly#2261: Front: Reset zoom when detection time is applied
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@TomDemulierChevret@etpinard@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Localize auto-formatted x-axis date ticks - #2261

Merged
alexcjohnson merged 9 commits into
plotly:masterfrom
TomDemulierChevret:localise-auto-formatted-x-axis-date-ticks
Jan 30, 2018
Merged

Localize auto-formatted x-axis date ticks#2261
alexcjohnson merged 9 commits into
plotly:masterfrom
TomDemulierChevret:localise-auto-formatted-x-axis-date-ticks

Conversation

@TomDemulierChevret

@TomDemulierChevretTomDemulierChevret commented Jan 18, 2018

Copy link
Copy Markdown
Contributor

Features, Bug fixes, and others:

This pull request add the possibility to localize the auto-formatted x-axis date ticks.
It countains a working example for the french locale.

If some (or all) of the new formats are missing in the locale set by the user, format from the en locale will be used (as it does for the base d3 format and for the translation keys).

@etpinard

Copy link
Copy Markdown
Contributor

Thanks for the PR. Looks like @alexcjohnson was planning on doing this, but left it as a TODO.

A few tests are failing. I suspect formatDate is getting called outside of formatWorld w/o the extraFormat argument causing it to break.

Comment threadsrc/lib/dates.js Outdated
headStr = yearFormatWorld(cDate);
dateStr = dayFormatWorld(cDate);
headStr = formatWorld(cDate, extraFormat.year);
dateStr = formatWorld(cDate, extraFormat.dayMonth);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

modDateFormat calls out to components/calendars to get the full spectrum of d3-to-world-cal conversions - you've got the ones needed so far, but others will likely show up, and no need to reinvent the wheel with formatWorld.

At one point there was a performance argument for the structure we have here because we could use precompiled formatters... but we lost that benefit with the original date localization PR #2207, so now I think there would be a much more concise way to do this, something like:

calendar=isWorldCalendar(calendar)&&calendar;if(!fmt){if(tr==='y')fmt=extraFormat.year;elseif(tr==='m')fmt=extraFormat.month;elseif(tr==='d'){fmt=extraFormat.dayMonth+'\n'+extraFormat.year;}else{returnmodDateFormat(extraFormat.dayMonthYear,x,formatter,calendar)+'\n'+formatTime(x,tr);}}returnmodDateFormat(fmt,x,formatter,calendar);

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I suspected that this conversion table existed somewhere but I didn't know exactly where to look (and code search with date/format/etc returned way too many entries).

I like the new proposal, pretty clear to read.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just test and it does work indeed on my example (only the last else is incorrect, need to switch date and time).

Comment threadsrc/locale-en.js Outdated
year: '%Y',
month: '%b %Y',
dayMonth: '%b %e',
dayMonthYear: '%b %e, %Y'

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

%e is padded with a space for 1-digit days - we should switch back to %-d, which has no padding (in fr.js as well). That's responsible for the image test failures.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@TomDemulierChevret are you able to get the tests to run locally? It looks like axes_test and lib_date_test are both failing, @etpinard probably had the right idea there. We should also add a couple of explicit tests in localize_test to cover the newly added fields.

You can run just these three suites with the command:
npm run test-jasmine -- axes lib_date localize

@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Well I had a problem on my first try, but I will try again tomorrow.

@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Sorry, didn't have time to check this issue on Friday.

Regarding axes_test, the issue was with the initialisation of ax in setConvert method.
The fullLayout parameter passed to it has always an _extraFormat member from now on (retrieved from the locale) but since it's manually created in the test, this member was missing.

Regarding lib_date_test, the issue was that method formatDate was called directly without the new extraFormat parameter (which is normally passed via ax like in the axes_test).
I looked throught the code and couldn't find an occurence of formatDate called in another place than axes.js (which provides the extraFormat paramater as stated before).
Therefore I added manually the extraFormat to formatDate calls in lib_date_test when needed.

But since my knowledge of plotly.js is pretty limited, I may have missed some usage of formatDate, so you should definitly check there isn't a broken call somewhere.

I will try to add new test in localize_test to cover the new fields.

@TomDemulierChevret

TomDemulierChevret commented Jan 22, 2018

Copy link
Copy Markdown
ContributorAuthor

Just added a new test which check that both default locale (en) & provided locale format correctly the auto-formatted x-axis date tick.

Do you feel it is enough or should I add more test case ?

If everything is okay, can this PR be added to the next release ?

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@TomDemulierChevret looks great - thanks for the fixes, and the new test covers it all nicely.

I'm re-running the tests - we've had a lot of spurious failures lately just when running the tests on CI, we're working on making those more robust - assuming it passes (eventually) I think this is ready to go! 💃

I'm going to wait a few days before merging, in case we need a patch release since we just put out several major new features. But yes, this will be in 1.34.0 🎉

@alexcjohnsonalexcjohnson added this to the v1.34.0 milestone Jan 22, 2018
@TomDemulierChevret

Copy link
Copy Markdown
ContributorAuthor

Perfect !
I'm not really in a hurry to have this merged, it was just to know that it's planned.
I'm gonna use plotly in an upcomming project in which locale support is mandatory, given it seems to be the best JS chart/plot library it would've been a shame to not use it because of locale. ;)

@alexcjohnson
alexcjohnson merged commit 7de0c7f into plotly:masterJan 30, 2018
@TomDemulierChevret
TomDemulierChevret deleted the localise-auto-formatted-x-axis-date-ticks branch January 31, 2018 08:51
ivankirshin added a commit to newcrom/plotly.js that referenced this pull request Dec 19, 2023
ifdotpy added a commit to newcrom/plotly.js that referenced this pull request Dec 20, 2023
plotly#2261: Front: Reset zoom when detection time is applied
ivankirshin added a commit to newcrom/plotly.js that referenced this pull request Jan 10, 2024
ifdotpy added a commit to newcrom/plotly.js that referenced this pull request Jan 10, 2024
plotly#2261: Front: Reset zoom when detection time is applied
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@TomDemulierChevret@etpinard@alexcjohnson