Skip to content

Parcoords fonts - #1624

Merged
etpinard merged 6 commits into
masterfrom
parcoords-fonts
May 9, 2017
Merged

Parcoords fonts#1624
etpinard merged 6 commits into
masterfrom
parcoords-fonts

Conversation

@monfera

Copy link
Copy Markdown
Contributor

Support for specifying fonts for parcoords dimensions. Example, see JS code 8..12:http://codepen.io/anon/pen/QvdwpX

image

@monferamonfera self-assigned this Apr 26, 2017
Comment threadsrc/traces/parcoords/defaults.js Outdated

function coerceFont(fontAttr, coerce, layoutFont, defaultFont) {
var fontSpec = Lib.coerceFont(coerce, fontAttr);
Lib.coerceFont(coerce, fontAttr, Lib.extendFlat({}, layoutFont, defaultFont, fontSpec));

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Why do you need to call Lib.coerceFont twice?

Comment threadsrc/traces/parcoords/attributes.js Outdated
var extendDeep = require('../../lib/extend').extendDeep;
var extendFlat = require('../../lib/extend').extendFlat;


Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🔪

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

... as we're (slowly) trying to make our code look more like the standard style - which disallows multiple blank lines.

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.

Ah got it, thanks!

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.

Btw HUGE fan of standard style

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Now that there aren't giant outstanding PRs, might be time to revisit: #1371 (though I'm increasingly intrigued by prettier which is fundamentally different from a linter)

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

--> The selling point of prettier is that you don't have to adhere to any style at all because it doesn't present you with errors. It just makes things consistent. 😄

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

True. But you have to do some non-trivial src vs build file trickery.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

... adding pre-commit hooks is hardly simplifying anything IMHO.

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

See #1629 for quick experiment. It replaces lint and lint-fix with prettier equivalents and adds a precommit hook that formats staged files without ever having to manually add a precommit hook.

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.

I think we're bikeshedding #950 (comment)

Comment threadsrc/traces/parcoords/attributes.js Outdated
}
},

labelfont: extendFlat({}, fontAttrs, {dflt: {size: 10}, description: 'Sets the font for the `dimension` labels.'}),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This is not our usual pattern.

The default font size is inherited from fullLayout.font.size directly as here or times a scalar like here.

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.

The purpose was to have smaller fonts than what would come from the layout defaults, which would result in overly big numbers, looked really bad. The dimension labels and tick numbers need to be quite small by default, e.g. around 10px. It's achieved by parcoords/attributes specifying these sizes. Is there another way of saying, 'take layout font values but don't adopt large fonts unless the user wants it, in which case they specify it on eg. labelfont?

Comment threadsrc/traces/parcoords/defaults.js Outdated
traceOut.visible = false;
}

coerceFont('labelfont', coerce, layout.font, attributes.labelfont.dflt || {});

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Lib.coerceFont('labelfont',coerce,layout.font);

should be enough, no?

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.

I could do that. The consequence is that the tick and dimension label fonts would be too large:
image

It's even worse if the user specified a larger font centrally, e.g. size 16:
image

Since I can go either way, pls confirm if I should preserve the current fontsize-moderation logic or use the simpler logic. Consistency matters a lot on one hand, and having ergonomically good defaults is also valuable.

.classed('axisExtentText', true)
.attr('text-anchor', 'middle')
.style('font-weight', 100)
.style('font-size', '10px')

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Ha. I see 10px was used before. I should've caught that. Elsewhere in plotly.js this would be 12px.

I guess we'll have to keep it this way until v2 😬

@etpinardetpinard added this to the 1.27.0 milestone Apr 26, 2017
selection
.classed('axisExtentText', true)
.attr('text-anchor', 'middle')
.style('font-weight', 100)

@etpinardetpinardMay 1, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@monfera is removing that font-weight setting on purpose? Unsurprisingly, it makes the image tests fail.

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.

As we discussed about font standardization... I assumed, perhaps incorrectly, that we don't want to customize it. I do have a preference for the lower font weight as in the case of parcoords the shape of line distribution is more important than the best readability so it's fine to keep the weight=100 but with configuration, the user can probably control the font anyway.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We don't set font-weight anyway in our code - though inputting text as <b>text</b> effectively does that.

This is another thing I wished I would've noticed while reviewing your first parcoords PR. Oh well. I think it's best to drop font-weight and make parcoords look a little more plotly-esque.

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.

Cool, in this case I could guess, if a bit late, how you'd go about it :-)

// scale linearly with global font size
var fontDflt = {
family: layout.font.family,
size: Math.round(layout.font.size * (10 / 12)),

@etpinardetpinardMay 1, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@monfera this is what I came off with.

As you pointed out, changing the font size default to 12 makes most parcoord graphs look less-than-optimal. We should fix that text-overlapping problem at some point though - similar to how we do it currently in cartesian axes. But that's for another PR. So, the 10px default value remains.

But, to make this a little more plotly-esque, we make the parcoord font size scale linearly with layout.font similar to what's done for axes titlefont.

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.

Thanks @etpinard, also for the pointer!

@etpinard

Copy link
Copy Markdown
Contributor

@monfera are you ok with my changes?

@monfera

Copy link
Copy Markdown
ContributorAuthor

@etpinard yes, thank you, I should have indicated this more unambiguously in my reply.

@monfera

Copy link
Copy Markdown
ContributorAuthor

Also, overall, looks good!

@etpinard
etpinard merged commit 1ffb102 into masterMay 9, 2017
@etpinard
etpinard deleted the parcoords-fonts branch May 9, 2017 14:33
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.

4 participants

@monfera@etpinard@rreusser@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
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;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Parcoords fonts by monfera · Pull Request #1624 · plotly/plotly.js · GitHub
Skip to content

Parcoords fonts - #1624

Merged
etpinard merged 6 commits into
masterfrom
parcoords-fonts
May 9, 2017
Merged

Parcoords fonts#1624
etpinard merged 6 commits into
masterfrom
parcoords-fonts

Conversation

@monfera

Copy link
Copy Markdown
Contributor

Support for specifying fonts for parcoords dimensions. Example, see JS code 8..12:http://codepen.io/anon/pen/QvdwpX

image

@monferamonfera self-assigned this Apr 26, 2017
Comment threadsrc/traces/parcoords/defaults.js Outdated

function coerceFont(fontAttr, coerce, layoutFont, defaultFont) {
var fontSpec = Lib.coerceFont(coerce, fontAttr);
Lib.coerceFont(coerce, fontAttr, Lib.extendFlat({}, layoutFont, defaultFont, fontSpec));

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Why do you need to call Lib.coerceFont twice?

Comment threadsrc/traces/parcoords/attributes.js Outdated
var extendDeep = require('../../lib/extend').extendDeep;
var extendFlat = require('../../lib/extend').extendFlat;


Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🔪

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

... as we're (slowly) trying to make our code look more like the standard style - which disallows multiple blank lines.

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.

Ah got it, thanks!

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.

Btw HUGE fan of standard style

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Now that there aren't giant outstanding PRs, might be time to revisit: #1371 (though I'm increasingly intrigued by prettier which is fundamentally different from a linter)

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

--> The selling point of prettier is that you don't have to adhere to any style at all because it doesn't present you with errors. It just makes things consistent. 😄

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

True. But you have to do some non-trivial src vs build file trickery.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

... adding pre-commit hooks is hardly simplifying anything IMHO.

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

See #1629 for quick experiment. It replaces lint and lint-fix with prettier equivalents and adds a precommit hook that formats staged files without ever having to manually add a precommit hook.

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.

I think we're bikeshedding #950 (comment)

Comment threadsrc/traces/parcoords/attributes.js Outdated
}
},

labelfont: extendFlat({}, fontAttrs, {dflt: {size: 10}, description: 'Sets the font for the `dimension` labels.'}),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This is not our usual pattern.

The default font size is inherited from fullLayout.font.size directly as here or times a scalar like here.

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.

The purpose was to have smaller fonts than what would come from the layout defaults, which would result in overly big numbers, looked really bad. The dimension labels and tick numbers need to be quite small by default, e.g. around 10px. It's achieved by parcoords/attributes specifying these sizes. Is there another way of saying, 'take layout font values but don't adopt large fonts unless the user wants it, in which case they specify it on eg. labelfont?

Comment threadsrc/traces/parcoords/defaults.js Outdated
traceOut.visible = false;
}

coerceFont('labelfont', coerce, layout.font, attributes.labelfont.dflt || {});

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Lib.coerceFont('labelfont',coerce,layout.font);

should be enough, no?

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.

I could do that. The consequence is that the tick and dimension label fonts would be too large:
image

It's even worse if the user specified a larger font centrally, e.g. size 16:
image

Since I can go either way, pls confirm if I should preserve the current fontsize-moderation logic or use the simpler logic. Consistency matters a lot on one hand, and having ergonomically good defaults is also valuable.

.classed('axisExtentText', true)
.attr('text-anchor', 'middle')
.style('font-weight', 100)
.style('font-size', '10px')

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Ha. I see 10px was used before. I should've caught that. Elsewhere in plotly.js this would be 12px.

I guess we'll have to keep it this way until v2 😬

@etpinardetpinard added this to the 1.27.0 milestone Apr 26, 2017
selection
.classed('axisExtentText', true)
.attr('text-anchor', 'middle')
.style('font-weight', 100)

@etpinardetpinardMay 1, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@monfera is removing that font-weight setting on purpose? Unsurprisingly, it makes the image tests fail.

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.

As we discussed about font standardization... I assumed, perhaps incorrectly, that we don't want to customize it. I do have a preference for the lower font weight as in the case of parcoords the shape of line distribution is more important than the best readability so it's fine to keep the weight=100 but with configuration, the user can probably control the font anyway.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We don't set font-weight anyway in our code - though inputting text as <b>text</b> effectively does that.

This is another thing I wished I would've noticed while reviewing your first parcoords PR. Oh well. I think it's best to drop font-weight and make parcoords look a little more plotly-esque.

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.

Cool, in this case I could guess, if a bit late, how you'd go about it :-)

// scale linearly with global font size
var fontDflt = {
family: layout.font.family,
size: Math.round(layout.font.size * (10 / 12)),

@etpinardetpinardMay 1, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@monfera this is what I came off with.

As you pointed out, changing the font size default to 12 makes most parcoord graphs look less-than-optimal. We should fix that text-overlapping problem at some point though - similar to how we do it currently in cartesian axes. But that's for another PR. So, the 10px default value remains.

But, to make this a little more plotly-esque, we make the parcoord font size scale linearly with layout.font similar to what's done for axes titlefont.

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.

Thanks @etpinard, also for the pointer!

@etpinard

Copy link
Copy Markdown
Contributor

@monfera are you ok with my changes?

@monfera

Copy link
Copy Markdown
ContributorAuthor

@etpinard yes, thank you, I should have indicated this more unambiguously in my reply.

@monfera

Copy link
Copy Markdown
ContributorAuthor

Also, overall, looks good!

@etpinard
etpinard merged commit 1ffb102 into masterMay 9, 2017
@etpinard
etpinard deleted the parcoords-fonts branch May 9, 2017 14:33
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.

4 participants

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

Parcoords fonts - #1624

Merged
etpinard merged 6 commits into
masterfrom
parcoords-fonts
May 9, 2017
Merged

Parcoords fonts#1624
etpinard merged 6 commits into
masterfrom
parcoords-fonts

Conversation

@monfera

Copy link
Copy Markdown
Contributor

Support for specifying fonts for parcoords dimensions. Example, see JS code 8..12:http://codepen.io/anon/pen/QvdwpX

image

@monferamonfera self-assigned this Apr 26, 2017
Comment threadsrc/traces/parcoords/defaults.js Outdated

function coerceFont(fontAttr, coerce, layoutFont, defaultFont) {
var fontSpec = Lib.coerceFont(coerce, fontAttr);
Lib.coerceFont(coerce, fontAttr, Lib.extendFlat({}, layoutFont, defaultFont, fontSpec));

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Why do you need to call Lib.coerceFont twice?

Comment threadsrc/traces/parcoords/attributes.js Outdated
var extendDeep = require('../../lib/extend').extendDeep;
var extendFlat = require('../../lib/extend').extendFlat;


Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🔪

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

... as we're (slowly) trying to make our code look more like the standard style - which disallows multiple blank lines.

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.

Ah got it, thanks!

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.

Btw HUGE fan of standard style

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Now that there aren't giant outstanding PRs, might be time to revisit: #1371 (though I'm increasingly intrigued by prettier which is fundamentally different from a linter)

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

--> The selling point of prettier is that you don't have to adhere to any style at all because it doesn't present you with errors. It just makes things consistent. 😄

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

True. But you have to do some non-trivial src vs build file trickery.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

... adding pre-commit hooks is hardly simplifying anything IMHO.

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

See #1629 for quick experiment. It replaces lint and lint-fix with prettier equivalents and adds a precommit hook that formats staged files without ever having to manually add a precommit hook.

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.

I think we're bikeshedding #950 (comment)

Comment threadsrc/traces/parcoords/attributes.js Outdated
}
},

labelfont: extendFlat({}, fontAttrs, {dflt: {size: 10}, description: 'Sets the font for the `dimension` labels.'}),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This is not our usual pattern.

The default font size is inherited from fullLayout.font.size directly as here or times a scalar like here.

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.

The purpose was to have smaller fonts than what would come from the layout defaults, which would result in overly big numbers, looked really bad. The dimension labels and tick numbers need to be quite small by default, e.g. around 10px. It's achieved by parcoords/attributes specifying these sizes. Is there another way of saying, 'take layout font values but don't adopt large fonts unless the user wants it, in which case they specify it on eg. labelfont?

Comment threadsrc/traces/parcoords/defaults.js Outdated
traceOut.visible = false;
}

coerceFont('labelfont', coerce, layout.font, attributes.labelfont.dflt || {});

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Lib.coerceFont('labelfont',coerce,layout.font);

should be enough, no?

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.

I could do that. The consequence is that the tick and dimension label fonts would be too large:
image

It's even worse if the user specified a larger font centrally, e.g. size 16:
image

Since I can go either way, pls confirm if I should preserve the current fontsize-moderation logic or use the simpler logic. Consistency matters a lot on one hand, and having ergonomically good defaults is also valuable.

.classed('axisExtentText', true)
.attr('text-anchor', 'middle')
.style('font-weight', 100)
.style('font-size', '10px')

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Ha. I see 10px was used before. I should've caught that. Elsewhere in plotly.js this would be 12px.

I guess we'll have to keep it this way until v2 😬

@etpinardetpinard added this to the 1.27.0 milestone Apr 26, 2017
selection
.classed('axisExtentText', true)
.attr('text-anchor', 'middle')
.style('font-weight', 100)

@etpinardetpinardMay 1, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@monfera is removing that font-weight setting on purpose? Unsurprisingly, it makes the image tests fail.

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.

As we discussed about font standardization... I assumed, perhaps incorrectly, that we don't want to customize it. I do have a preference for the lower font weight as in the case of parcoords the shape of line distribution is more important than the best readability so it's fine to keep the weight=100 but with configuration, the user can probably control the font anyway.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We don't set font-weight anyway in our code - though inputting text as <b>text</b> effectively does that.

This is another thing I wished I would've noticed while reviewing your first parcoords PR. Oh well. I think it's best to drop font-weight and make parcoords look a little more plotly-esque.

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.

Cool, in this case I could guess, if a bit late, how you'd go about it :-)

// scale linearly with global font size
var fontDflt = {
family: layout.font.family,
size: Math.round(layout.font.size * (10 / 12)),

@etpinardetpinardMay 1, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@monfera this is what I came off with.

As you pointed out, changing the font size default to 12 makes most parcoord graphs look less-than-optimal. We should fix that text-overlapping problem at some point though - similar to how we do it currently in cartesian axes. But that's for another PR. So, the 10px default value remains.

But, to make this a little more plotly-esque, we make the parcoord font size scale linearly with layout.font similar to what's done for axes titlefont.

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.

Thanks @etpinard, also for the pointer!

@etpinard

Copy link
Copy Markdown
Contributor

@monfera are you ok with my changes?

@monfera

Copy link
Copy Markdown
ContributorAuthor

@etpinard yes, thank you, I should have indicated this more unambiguously in my reply.

@monfera

Copy link
Copy Markdown
ContributorAuthor

Also, overall, looks good!

@etpinard
etpinard merged commit 1ffb102 into masterMay 9, 2017
@etpinard
etpinard deleted the parcoords-fonts branch May 9, 2017 14:33
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.

4 participants

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

Parcoords fonts - #1624

Merged
etpinard merged 6 commits into
masterfrom
parcoords-fonts
May 9, 2017
Merged

Parcoords fonts#1624
etpinard merged 6 commits into
masterfrom
parcoords-fonts

Conversation

@monfera

Copy link
Copy Markdown
Contributor

Support for specifying fonts for parcoords dimensions. Example, see JS code 8..12:http://codepen.io/anon/pen/QvdwpX

image

@monferamonfera self-assigned this Apr 26, 2017
Comment threadsrc/traces/parcoords/defaults.js Outdated

function coerceFont(fontAttr, coerce, layoutFont, defaultFont) {
var fontSpec = Lib.coerceFont(coerce, fontAttr);
Lib.coerceFont(coerce, fontAttr, Lib.extendFlat({}, layoutFont, defaultFont, fontSpec));

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Why do you need to call Lib.coerceFont twice?

Comment threadsrc/traces/parcoords/attributes.js Outdated
var extendDeep = require('../../lib/extend').extendDeep;
var extendFlat = require('../../lib/extend').extendFlat;


Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🔪

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

... as we're (slowly) trying to make our code look more like the standard style - which disallows multiple blank lines.

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.

Ah got it, thanks!

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.

Btw HUGE fan of standard style

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Now that there aren't giant outstanding PRs, might be time to revisit: #1371 (though I'm increasingly intrigued by prettier which is fundamentally different from a linter)

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

--> The selling point of prettier is that you don't have to adhere to any style at all because it doesn't present you with errors. It just makes things consistent. 😄

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

True. But you have to do some non-trivial src vs build file trickery.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

... adding pre-commit hooks is hardly simplifying anything IMHO.

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

See #1629 for quick experiment. It replaces lint and lint-fix with prettier equivalents and adds a precommit hook that formats staged files without ever having to manually add a precommit hook.

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.

I think we're bikeshedding #950 (comment)

Comment threadsrc/traces/parcoords/attributes.js Outdated
}
},

labelfont: extendFlat({}, fontAttrs, {dflt: {size: 10}, description: 'Sets the font for the `dimension` labels.'}),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This is not our usual pattern.

The default font size is inherited from fullLayout.font.size directly as here or times a scalar like here.

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.

The purpose was to have smaller fonts than what would come from the layout defaults, which would result in overly big numbers, looked really bad. The dimension labels and tick numbers need to be quite small by default, e.g. around 10px. It's achieved by parcoords/attributes specifying these sizes. Is there another way of saying, 'take layout font values but don't adopt large fonts unless the user wants it, in which case they specify it on eg. labelfont?

Comment threadsrc/traces/parcoords/defaults.js Outdated
traceOut.visible = false;
}

coerceFont('labelfont', coerce, layout.font, attributes.labelfont.dflt || {});

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Lib.coerceFont('labelfont',coerce,layout.font);

should be enough, no?

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.

I could do that. The consequence is that the tick and dimension label fonts would be too large:
image

It's even worse if the user specified a larger font centrally, e.g. size 16:
image

Since I can go either way, pls confirm if I should preserve the current fontsize-moderation logic or use the simpler logic. Consistency matters a lot on one hand, and having ergonomically good defaults is also valuable.

.classed('axisExtentText', true)
.attr('text-anchor', 'middle')
.style('font-weight', 100)
.style('font-size', '10px')

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Ha. I see 10px was used before. I should've caught that. Elsewhere in plotly.js this would be 12px.

I guess we'll have to keep it this way until v2 😬

@etpinardetpinard added this to the 1.27.0 milestone Apr 26, 2017
selection
.classed('axisExtentText', true)
.attr('text-anchor', 'middle')
.style('font-weight', 100)

@etpinardetpinardMay 1, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@monfera is removing that font-weight setting on purpose? Unsurprisingly, it makes the image tests fail.

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.

As we discussed about font standardization... I assumed, perhaps incorrectly, that we don't want to customize it. I do have a preference for the lower font weight as in the case of parcoords the shape of line distribution is more important than the best readability so it's fine to keep the weight=100 but with configuration, the user can probably control the font anyway.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We don't set font-weight anyway in our code - though inputting text as <b>text</b> effectively does that.

This is another thing I wished I would've noticed while reviewing your first parcoords PR. Oh well. I think it's best to drop font-weight and make parcoords look a little more plotly-esque.

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.

Cool, in this case I could guess, if a bit late, how you'd go about it :-)

// scale linearly with global font size
var fontDflt = {
family: layout.font.family,
size: Math.round(layout.font.size * (10 / 12)),

@etpinardetpinardMay 1, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@monfera this is what I came off with.

As you pointed out, changing the font size default to 12 makes most parcoord graphs look less-than-optimal. We should fix that text-overlapping problem at some point though - similar to how we do it currently in cartesian axes. But that's for another PR. So, the 10px default value remains.

But, to make this a little more plotly-esque, we make the parcoord font size scale linearly with layout.font similar to what's done for axes titlefont.

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.

Thanks @etpinard, also for the pointer!

@etpinard

Copy link
Copy Markdown
Contributor

@monfera are you ok with my changes?

@monfera

Copy link
Copy Markdown
ContributorAuthor

@etpinard yes, thank you, I should have indicated this more unambiguously in my reply.

@monfera

Copy link
Copy Markdown
ContributorAuthor

Also, overall, looks good!

@etpinard
etpinard merged commit 1ffb102 into masterMay 9, 2017
@etpinard
etpinard deleted the parcoords-fonts branch May 9, 2017 14:33
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.

4 participants

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

Parcoords fonts - #1624

Merged
etpinard merged 6 commits into
masterfrom
parcoords-fonts
May 9, 2017
Merged

Parcoords fonts#1624
etpinard merged 6 commits into
masterfrom
parcoords-fonts

Conversation

@monfera

Copy link
Copy Markdown
Contributor

Support for specifying fonts for parcoords dimensions. Example, see JS code 8..12:http://codepen.io/anon/pen/QvdwpX

image

@monferamonfera self-assigned this Apr 26, 2017
Comment threadsrc/traces/parcoords/defaults.js Outdated

function coerceFont(fontAttr, coerce, layoutFont, defaultFont) {
var fontSpec = Lib.coerceFont(coerce, fontAttr);
Lib.coerceFont(coerce, fontAttr, Lib.extendFlat({}, layoutFont, defaultFont, fontSpec));

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Why do you need to call Lib.coerceFont twice?

Comment threadsrc/traces/parcoords/attributes.js Outdated
var extendDeep = require('../../lib/extend').extendDeep;
var extendFlat = require('../../lib/extend').extendFlat;


Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🔪

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

... as we're (slowly) trying to make our code look more like the standard style - which disallows multiple blank lines.

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.

Ah got it, thanks!

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.

Btw HUGE fan of standard style

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Now that there aren't giant outstanding PRs, might be time to revisit: #1371 (though I'm increasingly intrigued by prettier which is fundamentally different from a linter)

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

--> The selling point of prettier is that you don't have to adhere to any style at all because it doesn't present you with errors. It just makes things consistent. 😄

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

True. But you have to do some non-trivial src vs build file trickery.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

... adding pre-commit hooks is hardly simplifying anything IMHO.

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

See #1629 for quick experiment. It replaces lint and lint-fix with prettier equivalents and adds a precommit hook that formats staged files without ever having to manually add a precommit hook.

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.

I think we're bikeshedding #950 (comment)

Comment threadsrc/traces/parcoords/attributes.js Outdated
}
},

labelfont: extendFlat({}, fontAttrs, {dflt: {size: 10}, description: 'Sets the font for the `dimension` labels.'}),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This is not our usual pattern.

The default font size is inherited from fullLayout.font.size directly as here or times a scalar like here.

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.

The purpose was to have smaller fonts than what would come from the layout defaults, which would result in overly big numbers, looked really bad. The dimension labels and tick numbers need to be quite small by default, e.g. around 10px. It's achieved by parcoords/attributes specifying these sizes. Is there another way of saying, 'take layout font values but don't adopt large fonts unless the user wants it, in which case they specify it on eg. labelfont?

Comment threadsrc/traces/parcoords/defaults.js Outdated
traceOut.visible = false;
}

coerceFont('labelfont', coerce, layout.font, attributes.labelfont.dflt || {});

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Lib.coerceFont('labelfont',coerce,layout.font);

should be enough, no?

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.

I could do that. The consequence is that the tick and dimension label fonts would be too large:
image

It's even worse if the user specified a larger font centrally, e.g. size 16:
image

Since I can go either way, pls confirm if I should preserve the current fontsize-moderation logic or use the simpler logic. Consistency matters a lot on one hand, and having ergonomically good defaults is also valuable.

.classed('axisExtentText', true)
.attr('text-anchor', 'middle')
.style('font-weight', 100)
.style('font-size', '10px')

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Ha. I see 10px was used before. I should've caught that. Elsewhere in plotly.js this would be 12px.

I guess we'll have to keep it this way until v2 😬

@etpinardetpinard added this to the 1.27.0 milestone Apr 26, 2017
selection
.classed('axisExtentText', true)
.attr('text-anchor', 'middle')
.style('font-weight', 100)

@etpinardetpinardMay 1, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@monfera is removing that font-weight setting on purpose? Unsurprisingly, it makes the image tests fail.

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.

As we discussed about font standardization... I assumed, perhaps incorrectly, that we don't want to customize it. I do have a preference for the lower font weight as in the case of parcoords the shape of line distribution is more important than the best readability so it's fine to keep the weight=100 but with configuration, the user can probably control the font anyway.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We don't set font-weight anyway in our code - though inputting text as <b>text</b> effectively does that.

This is another thing I wished I would've noticed while reviewing your first parcoords PR. Oh well. I think it's best to drop font-weight and make parcoords look a little more plotly-esque.

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.

Cool, in this case I could guess, if a bit late, how you'd go about it :-)

// scale linearly with global font size
var fontDflt = {
family: layout.font.family,
size: Math.round(layout.font.size * (10 / 12)),

@etpinardetpinardMay 1, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@monfera this is what I came off with.

As you pointed out, changing the font size default to 12 makes most parcoord graphs look less-than-optimal. We should fix that text-overlapping problem at some point though - similar to how we do it currently in cartesian axes. But that's for another PR. So, the 10px default value remains.

But, to make this a little more plotly-esque, we make the parcoord font size scale linearly with layout.font similar to what's done for axes titlefont.

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.

Thanks @etpinard, also for the pointer!

@etpinard

Copy link
Copy Markdown
Contributor

@monfera are you ok with my changes?

@monfera

Copy link
Copy Markdown
ContributorAuthor

@etpinard yes, thank you, I should have indicated this more unambiguously in my reply.

@monfera

Copy link
Copy Markdown
ContributorAuthor

Also, overall, looks good!

@etpinard
etpinard merged commit 1ffb102 into masterMay 9, 2017
@etpinard
etpinard deleted the parcoords-fonts branch May 9, 2017 14:33
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.

4 participants

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

Parcoords fonts - #1624

Merged
etpinard merged 6 commits into
masterfrom
parcoords-fonts
May 9, 2017
Merged

Parcoords fonts#1624
etpinard merged 6 commits into
masterfrom
parcoords-fonts

Conversation

@monfera

Copy link
Copy Markdown
Contributor

Support for specifying fonts for parcoords dimensions. Example, see JS code 8..12:http://codepen.io/anon/pen/QvdwpX

image

@monferamonfera self-assigned this Apr 26, 2017
Comment threadsrc/traces/parcoords/defaults.js Outdated

function coerceFont(fontAttr, coerce, layoutFont, defaultFont) {
var fontSpec = Lib.coerceFont(coerce, fontAttr);
Lib.coerceFont(coerce, fontAttr, Lib.extendFlat({}, layoutFont, defaultFont, fontSpec));

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Why do you need to call Lib.coerceFont twice?

Comment threadsrc/traces/parcoords/attributes.js Outdated
var extendDeep = require('../../lib/extend').extendDeep;
var extendFlat = require('../../lib/extend').extendFlat;


Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🔪

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

... as we're (slowly) trying to make our code look more like the standard style - which disallows multiple blank lines.

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.

Ah got it, thanks!

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.

Btw HUGE fan of standard style

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Now that there aren't giant outstanding PRs, might be time to revisit: #1371 (though I'm increasingly intrigued by prettier which is fundamentally different from a linter)

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

--> The selling point of prettier is that you don't have to adhere to any style at all because it doesn't present you with errors. It just makes things consistent. 😄

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

True. But you have to do some non-trivial src vs build file trickery.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

... adding pre-commit hooks is hardly simplifying anything IMHO.

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

See #1629 for quick experiment. It replaces lint and lint-fix with prettier equivalents and adds a precommit hook that formats staged files without ever having to manually add a precommit hook.

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.

I think we're bikeshedding #950 (comment)

Comment threadsrc/traces/parcoords/attributes.js Outdated
}
},

labelfont: extendFlat({}, fontAttrs, {dflt: {size: 10}, description: 'Sets the font for the `dimension` labels.'}),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This is not our usual pattern.

The default font size is inherited from fullLayout.font.size directly as here or times a scalar like here.

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.

The purpose was to have smaller fonts than what would come from the layout defaults, which would result in overly big numbers, looked really bad. The dimension labels and tick numbers need to be quite small by default, e.g. around 10px. It's achieved by parcoords/attributes specifying these sizes. Is there another way of saying, 'take layout font values but don't adopt large fonts unless the user wants it, in which case they specify it on eg. labelfont?

Comment threadsrc/traces/parcoords/defaults.js Outdated
traceOut.visible = false;
}

coerceFont('labelfont', coerce, layout.font, attributes.labelfont.dflt || {});

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Lib.coerceFont('labelfont',coerce,layout.font);

should be enough, no?

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.

I could do that. The consequence is that the tick and dimension label fonts would be too large:
image

It's even worse if the user specified a larger font centrally, e.g. size 16:
image

Since I can go either way, pls confirm if I should preserve the current fontsize-moderation logic or use the simpler logic. Consistency matters a lot on one hand, and having ergonomically good defaults is also valuable.

.classed('axisExtentText', true)
.attr('text-anchor', 'middle')
.style('font-weight', 100)
.style('font-size', '10px')

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Ha. I see 10px was used before. I should've caught that. Elsewhere in plotly.js this would be 12px.

I guess we'll have to keep it this way until v2 😬

@etpinardetpinard added this to the 1.27.0 milestone Apr 26, 2017
selection
.classed('axisExtentText', true)
.attr('text-anchor', 'middle')
.style('font-weight', 100)

@etpinardetpinardMay 1, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@monfera is removing that font-weight setting on purpose? Unsurprisingly, it makes the image tests fail.

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.

As we discussed about font standardization... I assumed, perhaps incorrectly, that we don't want to customize it. I do have a preference for the lower font weight as in the case of parcoords the shape of line distribution is more important than the best readability so it's fine to keep the weight=100 but with configuration, the user can probably control the font anyway.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We don't set font-weight anyway in our code - though inputting text as <b>text</b> effectively does that.

This is another thing I wished I would've noticed while reviewing your first parcoords PR. Oh well. I think it's best to drop font-weight and make parcoords look a little more plotly-esque.

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.

Cool, in this case I could guess, if a bit late, how you'd go about it :-)

// scale linearly with global font size
var fontDflt = {
family: layout.font.family,
size: Math.round(layout.font.size * (10 / 12)),

@etpinardetpinardMay 1, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@monfera this is what I came off with.

As you pointed out, changing the font size default to 12 makes most parcoord graphs look less-than-optimal. We should fix that text-overlapping problem at some point though - similar to how we do it currently in cartesian axes. But that's for another PR. So, the 10px default value remains.

But, to make this a little more plotly-esque, we make the parcoord font size scale linearly with layout.font similar to what's done for axes titlefont.

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.

Thanks @etpinard, also for the pointer!

@etpinard

Copy link
Copy Markdown
Contributor

@monfera are you ok with my changes?

@monfera

Copy link
Copy Markdown
ContributorAuthor

@etpinard yes, thank you, I should have indicated this more unambiguously in my reply.

@monfera

Copy link
Copy Markdown
ContributorAuthor

Also, overall, looks good!

@etpinard
etpinard merged commit 1ffb102 into masterMay 9, 2017
@etpinard
etpinard deleted the parcoords-fonts branch May 9, 2017 14:33
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.

4 participants

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

Parcoords fonts - #1624

Merged
etpinard merged 6 commits into
masterfrom
parcoords-fonts
May 9, 2017
Merged

Parcoords fonts#1624
etpinard merged 6 commits into
masterfrom
parcoords-fonts

Conversation

@monfera

Copy link
Copy Markdown
Contributor

Support for specifying fonts for parcoords dimensions. Example, see JS code 8..12:http://codepen.io/anon/pen/QvdwpX

image

@monferamonfera self-assigned this Apr 26, 2017
Comment threadsrc/traces/parcoords/defaults.js Outdated

function coerceFont(fontAttr, coerce, layoutFont, defaultFont) {
var fontSpec = Lib.coerceFont(coerce, fontAttr);
Lib.coerceFont(coerce, fontAttr, Lib.extendFlat({}, layoutFont, defaultFont, fontSpec));

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Why do you need to call Lib.coerceFont twice?

Comment threadsrc/traces/parcoords/attributes.js Outdated
var extendDeep = require('../../lib/extend').extendDeep;
var extendFlat = require('../../lib/extend').extendFlat;


Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🔪

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

... as we're (slowly) trying to make our code look more like the standard style - which disallows multiple blank lines.

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.

Ah got it, thanks!

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.

Btw HUGE fan of standard style

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Now that there aren't giant outstanding PRs, might be time to revisit: #1371 (though I'm increasingly intrigued by prettier which is fundamentally different from a linter)

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

--> The selling point of prettier is that you don't have to adhere to any style at all because it doesn't present you with errors. It just makes things consistent. 😄

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

True. But you have to do some non-trivial src vs build file trickery.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

... adding pre-commit hooks is hardly simplifying anything IMHO.

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

See #1629 for quick experiment. It replaces lint and lint-fix with prettier equivalents and adds a precommit hook that formats staged files without ever having to manually add a precommit hook.

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.

I think we're bikeshedding #950 (comment)

Comment threadsrc/traces/parcoords/attributes.js Outdated
}
},

labelfont: extendFlat({}, fontAttrs, {dflt: {size: 10}, description: 'Sets the font for the `dimension` labels.'}),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This is not our usual pattern.

The default font size is inherited from fullLayout.font.size directly as here or times a scalar like here.

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.

The purpose was to have smaller fonts than what would come from the layout defaults, which would result in overly big numbers, looked really bad. The dimension labels and tick numbers need to be quite small by default, e.g. around 10px. It's achieved by parcoords/attributes specifying these sizes. Is there another way of saying, 'take layout font values but don't adopt large fonts unless the user wants it, in which case they specify it on eg. labelfont?

Comment threadsrc/traces/parcoords/defaults.js Outdated
traceOut.visible = false;
}

coerceFont('labelfont', coerce, layout.font, attributes.labelfont.dflt || {});

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Lib.coerceFont('labelfont',coerce,layout.font);

should be enough, no?

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.

I could do that. The consequence is that the tick and dimension label fonts would be too large:
image

It's even worse if the user specified a larger font centrally, e.g. size 16:
image

Since I can go either way, pls confirm if I should preserve the current fontsize-moderation logic or use the simpler logic. Consistency matters a lot on one hand, and having ergonomically good defaults is also valuable.

.classed('axisExtentText', true)
.attr('text-anchor', 'middle')
.style('font-weight', 100)
.style('font-size', '10px')

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Ha. I see 10px was used before. I should've caught that. Elsewhere in plotly.js this would be 12px.

I guess we'll have to keep it this way until v2 😬

@etpinardetpinard added this to the 1.27.0 milestone Apr 26, 2017
selection
.classed('axisExtentText', true)
.attr('text-anchor', 'middle')
.style('font-weight', 100)

@etpinardetpinardMay 1, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@monfera is removing that font-weight setting on purpose? Unsurprisingly, it makes the image tests fail.

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.

As we discussed about font standardization... I assumed, perhaps incorrectly, that we don't want to customize it. I do have a preference for the lower font weight as in the case of parcoords the shape of line distribution is more important than the best readability so it's fine to keep the weight=100 but with configuration, the user can probably control the font anyway.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We don't set font-weight anyway in our code - though inputting text as <b>text</b> effectively does that.

This is another thing I wished I would've noticed while reviewing your first parcoords PR. Oh well. I think it's best to drop font-weight and make parcoords look a little more plotly-esque.

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.

Cool, in this case I could guess, if a bit late, how you'd go about it :-)

// scale linearly with global font size
var fontDflt = {
family: layout.font.family,
size: Math.round(layout.font.size * (10 / 12)),

@etpinardetpinardMay 1, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@monfera this is what I came off with.

As you pointed out, changing the font size default to 12 makes most parcoord graphs look less-than-optimal. We should fix that text-overlapping problem at some point though - similar to how we do it currently in cartesian axes. But that's for another PR. So, the 10px default value remains.

But, to make this a little more plotly-esque, we make the parcoord font size scale linearly with layout.font similar to what's done for axes titlefont.

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.

Thanks @etpinard, also for the pointer!

@etpinard

Copy link
Copy Markdown
Contributor

@monfera are you ok with my changes?

@monfera

Copy link
Copy Markdown
ContributorAuthor

@etpinard yes, thank you, I should have indicated this more unambiguously in my reply.

@monfera

Copy link
Copy Markdown
ContributorAuthor

Also, overall, looks good!

@etpinard
etpinard merged commit 1ffb102 into masterMay 9, 2017
@etpinard
etpinard deleted the parcoords-fonts branch May 9, 2017 14:33
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.

4 participants

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

Parcoords fonts - #1624

Merged
etpinard merged 6 commits into
masterfrom
parcoords-fonts
May 9, 2017
Merged

Parcoords fonts#1624
etpinard merged 6 commits into
masterfrom
parcoords-fonts

Conversation

@monfera

Copy link
Copy Markdown
Contributor

Support for specifying fonts for parcoords dimensions. Example, see JS code 8..12:http://codepen.io/anon/pen/QvdwpX

image

@monferamonfera self-assigned this Apr 26, 2017
Comment threadsrc/traces/parcoords/defaults.js Outdated

function coerceFont(fontAttr, coerce, layoutFont, defaultFont) {
var fontSpec = Lib.coerceFont(coerce, fontAttr);
Lib.coerceFont(coerce, fontAttr, Lib.extendFlat({}, layoutFont, defaultFont, fontSpec));

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Why do you need to call Lib.coerceFont twice?

Comment threadsrc/traces/parcoords/attributes.js Outdated
var extendDeep = require('../../lib/extend').extendDeep;
var extendFlat = require('../../lib/extend').extendFlat;


Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🔪

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

... as we're (slowly) trying to make our code look more like the standard style - which disallows multiple blank lines.

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.

Ah got it, thanks!

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.

Btw HUGE fan of standard style

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Now that there aren't giant outstanding PRs, might be time to revisit: #1371 (though I'm increasingly intrigued by prettier which is fundamentally different from a linter)

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

--> The selling point of prettier is that you don't have to adhere to any style at all because it doesn't present you with errors. It just makes things consistent. 😄

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

True. But you have to do some non-trivial src vs build file trickery.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

... adding pre-commit hooks is hardly simplifying anything IMHO.

@rreusserrreusserApr 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

See #1629 for quick experiment. It replaces lint and lint-fix with prettier equivalents and adds a precommit hook that formats staged files without ever having to manually add a precommit hook.

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.

I think we're bikeshedding #950 (comment)

Comment threadsrc/traces/parcoords/attributes.js Outdated
}
},

labelfont: extendFlat({}, fontAttrs, {dflt: {size: 10}, description: 'Sets the font for the `dimension` labels.'}),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This is not our usual pattern.

The default font size is inherited from fullLayout.font.size directly as here or times a scalar like here.

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.

The purpose was to have smaller fonts than what would come from the layout defaults, which would result in overly big numbers, looked really bad. The dimension labels and tick numbers need to be quite small by default, e.g. around 10px. It's achieved by parcoords/attributes specifying these sizes. Is there another way of saying, 'take layout font values but don't adopt large fonts unless the user wants it, in which case they specify it on eg. labelfont?

Comment threadsrc/traces/parcoords/defaults.js Outdated
traceOut.visible = false;
}

coerceFont('labelfont', coerce, layout.font, attributes.labelfont.dflt || {});

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Lib.coerceFont('labelfont',coerce,layout.font);

should be enough, no?

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.

I could do that. The consequence is that the tick and dimension label fonts would be too large:
image

It's even worse if the user specified a larger font centrally, e.g. size 16:
image

Since I can go either way, pls confirm if I should preserve the current fontsize-moderation logic or use the simpler logic. Consistency matters a lot on one hand, and having ergonomically good defaults is also valuable.

.classed('axisExtentText', true)
.attr('text-anchor', 'middle')
.style('font-weight', 100)
.style('font-size', '10px')

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Ha. I see 10px was used before. I should've caught that. Elsewhere in plotly.js this would be 12px.

I guess we'll have to keep it this way until v2 😬

@etpinardetpinard added this to the 1.27.0 milestone Apr 26, 2017
selection
.classed('axisExtentText', true)
.attr('text-anchor', 'middle')
.style('font-weight', 100)

@etpinardetpinardMay 1, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@monfera is removing that font-weight setting on purpose? Unsurprisingly, it makes the image tests fail.

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.

As we discussed about font standardization... I assumed, perhaps incorrectly, that we don't want to customize it. I do have a preference for the lower font weight as in the case of parcoords the shape of line distribution is more important than the best readability so it's fine to keep the weight=100 but with configuration, the user can probably control the font anyway.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We don't set font-weight anyway in our code - though inputting text as <b>text</b> effectively does that.

This is another thing I wished I would've noticed while reviewing your first parcoords PR. Oh well. I think it's best to drop font-weight and make parcoords look a little more plotly-esque.

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.

Cool, in this case I could guess, if a bit late, how you'd go about it :-)

// scale linearly with global font size
var fontDflt = {
family: layout.font.family,
size: Math.round(layout.font.size * (10 / 12)),

@etpinardetpinardMay 1, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@monfera this is what I came off with.

As you pointed out, changing the font size default to 12 makes most parcoord graphs look less-than-optimal. We should fix that text-overlapping problem at some point though - similar to how we do it currently in cartesian axes. But that's for another PR. So, the 10px default value remains.

But, to make this a little more plotly-esque, we make the parcoord font size scale linearly with layout.font similar to what's done for axes titlefont.

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.

Thanks @etpinard, also for the pointer!

@etpinard

Copy link
Copy Markdown
Contributor

@monfera are you ok with my changes?

@monfera

Copy link
Copy Markdown
ContributorAuthor

@etpinard yes, thank you, I should have indicated this more unambiguously in my reply.

@monfera

Copy link
Copy Markdown
ContributorAuthor

Also, overall, looks good!

@etpinard
etpinard merged commit 1ffb102 into masterMay 9, 2017
@etpinard
etpinard deleted the parcoords-fonts branch May 9, 2017 14:33
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.

4 participants

@monfera@etpinard@rreusser@alexcjohnson