diff --git a/draftlogs/7909_change.md b/draftlogs/7909_change.md new file mode 100644 index 00000000000..d0b7ca2df87 --- /dev/null +++ b/draftlogs/7909_change.md @@ -0,0 +1 @@ +- Update plot_config to show the "Upload to Cloud" button by default, and set the default server URL to cloud.plotly.com via [[#7909](https://github.com/plotly/plotly.js/pull/7909)] \ No newline at end of file diff --git a/src/components/modebar/buttons.js b/src/components/modebar/buttons.js index 41f11041b61..999a5de0647 100644 --- a/src/components/modebar/buttons.js +++ b/src/components/modebar/buttons.js @@ -72,7 +72,7 @@ modeBarButtons.toImage = { modeBarButtons.sendChartToCloud = { name: 'sendChartToCloud', title: function (gd) { - return _(gd, 'Share with Plotly Cloud'); + return _(gd, 'Share Chart'); }, icon: Icons.cloudupload, click: function (gd) { diff --git a/src/components/modebar/cloud_confirm.js b/src/components/modebar/cloud_confirm.js index 4f4ed1b6bf6..d1c715acca3 100644 --- a/src/components/modebar/cloud_confirm.js +++ b/src/components/modebar/cloud_confirm.js @@ -32,9 +32,13 @@ module.exports = function confirmCloudDialog(gd, serverUrl, onConfirm) { .classed('plotly-cloud-dialog-title', true) .text(_(gd, 'Share with Plotly Cloud')); - dialog.append('div') - .classed('plotly-cloud-dialog-message', true) - .text(_(gd, 'This chart and its data will be sent to') + ' ' + serverUrl + '.'); + var serverUrlText = new URL(serverUrl).hostname; + + var description = dialog.append('div'); + description.classed('plotly-cloud-dialog-message', true); + description.append('span').text(_(gd, 'This chart and its data will be sent to ')); + description.append('span').text(serverUrlText).classed('plotly-cloud-dialog-message--hostname', true); + description.append('span').text('. '); var buttons = dialog.append('div') .classed('plotly-cloud-dialog-buttons', true); diff --git a/src/css/_cloud_dialog.scss b/src/css/_cloud_dialog.scss index aca353f1978..fdf66fcee0f 100644 --- a/src/css/_cloud_dialog.scss +++ b/src/css/_cloud_dialog.scss @@ -41,6 +41,10 @@ line-height: 1.5; overflow-wrap: break-word; word-wrap: break-word; + + &--hostname { + font-weight: bold; + } } .plotly-cloud-dialog-buttons { @@ -63,24 +67,24 @@ outline: 2px solid vars.$color-brand-primary; outline-offset: 1px; } - } - .plotly-cloud-dialog-btn--cancel { - background-color: vars.$color-bg-light; - border-color: vars.$color-bg-darker; - color: vars.$color-muted-text; - - &:hover { + &--cancel { background-color: vars.$color-bg-base; + margin-left: auto; + color: vars.$color-muted-text; + + &:hover { + background-color: vars.$color-bg-darker; + } } - } - .plotly-cloud-dialog-btn--confirm { - background-color: vars.$color-brand-primary; - color: vars.$color-bg-light; + &--confirm { + background-color: vars.$color-brand-primary; + color: vars.$color-bg-light; - &:hover { - background-color: vars.$color-brand-accent; + &:hover { + background-color: vars.$color-brand-accent; + } } } } diff --git a/src/fonts/ploticon.js b/src/fonts/ploticon.js index 53fdbedbe40..d104f18198f 100644 --- a/src/fonts/ploticon.js +++ b/src/fonts/ploticon.js @@ -106,7 +106,7 @@ module.exports = { cloudupload: { width: 640, height: 640, - path: 'M176 544C96.5 544 32 479.5 32 400C32 336.6 73 282.8 129.9 263.5C128.6 255.8 128 248 128 240C128 160.5 192.5 96 272 96C327.4 96 375.5 127.3 399.6 173.1C413.8 164.8 430.4 160 448 160C501 160 544 203 544 256C544 271.7 540.2 286.6 533.5 299.7C577.5 320 608 364.4 608 416C608 486.7 550.7 544 480 544L176 544zM337 255C327.6 245.6 312.4 245.6 303.1 255L231.1 327C221.7 336.4 221.7 351.6 231.1 360.9C240.5 370.2 255.7 370.3 265 360.9L296 329.9L296 432C296 445.3 306.7 456 320 456C333.3 456 344 445.3 344 432L344 329.9L375 360.9C384.4 370.3 399.6 370.3 408.9 360.9C418.2 351.5 418.3 336.3 408.9 327L336.9 255z', + path: 'M451.5 160C434.9 160 418.8 164.5 404.7 172.7C388.9 156.7 370.5 143.3 350.2 133.2C378.4 109.2 414.3 96 451.5 96C537.9 96 608 166 608 252.5C608 294 591.5 333.8 562.2 363.1L491.1 434.2C461.8 463.5 422 480 380.5 480C294.1 480 224 410 224 323.5C224 322 224 320.5 224.1 319C224.6 301.3 239.3 287.4 257 287.9C274.7 288.4 288.6 303.1 288.1 320.8C288.1 321.7 288.1 322.6 288.1 323.4C288.1 374.5 329.5 415.9 380.6 415.9C405.1 415.9 428.6 406.2 446 388.8L517.1 317.7C534.4 300.4 544.2 276.8 544.2 252.3C544.2 201.2 502.8 159.8 451.7 159.8zM307.2 237.3C305.3 236.5 303.4 235.4 301.7 234.2C289.1 227.7 274.7 224 259.6 224C235.1 224 211.6 233.7 194.2 251.1L123.1 322.2C105.8 339.5 96 363.1 96 387.6C96 438.7 137.4 480.1 188.5 480.1C205 480.1 221.1 475.7 235.2 467.5C251 483.5 269.4 496.9 289.8 507C261.6 530.9 225.8 544.2 188.5 544.2C102.1 544.2 32 474.2 32 387.7C32 346.2 48.5 306.4 77.8 277.1L148.9 206C178.2 176.7 218 160.2 259.5 160.2C346.1 160.2 416 230.8 416 317.1C416 318.4 416 319.7 416 321C415.6 338.7 400.9 352.6 383.2 352.2C365.5 351.8 351.6 337.1 352 319.4C352 318.6 352 317.9 352 317.1C352 283.4 334 253.8 307.2 237.5z', transform: 'matrix(1 0 0 1 -15 -15)' }, drawopenpath: { diff --git a/src/plot_api/plot_config.js b/src/plot_api/plot_config.js index 28fbab70b21..1d65d274e0c 100644 --- a/src/plot_api/plot_config.js +++ b/src/plot_api/plot_config.js @@ -33,7 +33,7 @@ var configAttributes = { plotlyServerURL: { valType: 'string', - dflt: '', + dflt: 'https://cloud.plotly.com/newchart', description: [ 'Sets the URL for the `sendChartToCloud` modebar button.', 'When clicked, the button will send the chart data to this URL.', @@ -237,7 +237,7 @@ var configAttributes = { }, showSendToCloud: { valType: 'boolean', - dflt: false, + dflt: true, description: [ 'Should we include a modebar button that sends this chart to a URL', 'specified by `plotlyServerURL`, for sharing the chart with others?', diff --git a/src/types/generated/schema.d.ts b/src/types/generated/schema.d.ts index 37f1e0fd431..3d42f75c6b1 100644 --- a/src/types/generated/schema.d.ts +++ b/src/types/generated/schema.d.ts @@ -16331,7 +16331,10 @@ export interface ConfigBase { * Range: [1, 4] */ plotGlPixelRatio?: number; - /** Sets the URL for the `sendChartToCloud` modebar button. When clicked, the button will send the chart data to this URL. */ + /** + * Sets the URL for the `sendChartToCloud` modebar button. When clicked, the button will send the chart data to this URL. + * @default 'https://cloud.plotly.com/newchart' + */ plotlyServerURL?: string; /** * Sets the length of the undo/redo queue. @@ -16366,7 +16369,7 @@ export interface ConfigBase { showAxisRangeEntryBoxes?: boolean; /** * Should we include a modebar button that sends this chart to a URL specified by `plotlyServerURL`, for sharing the chart with others? Note that this button will (after a confirmation step) send chart data to an external server. - * @default false + * @default true */ showSendToCloud?: boolean; /** diff --git a/test/jasmine/tests/config_test.js b/test/jasmine/tests/config_test.js index 97549e906f8..2a04690027a 100644 --- a/test/jasmine/tests/config_test.js +++ b/test/jasmine/tests/config_test.js @@ -500,16 +500,6 @@ describe('config argument', function() { afterEach(destroyGraphDiv); - it('should default to an empty string', function(done) { - Plotly.newPlot(gd, [], {}) - .then(function() { - expect(gd._context.plotlyServerURL).not.toBe('https://plot.ly'); - expect(gd._context.plotlyServerURL).not.toBe('https://chart-studio.plotly.com'); - expect(gd._context.plotlyServerURL).toBe(''); - }) - .then(done, done.fail); - }); - it('should open confirmation dialog when set to a correctly-formatted URL', function(done) { Plotly.newPlot(gd, [], {}, { plotlyServerURL: 'https://example.plotly.com/endpoint' @@ -519,7 +509,7 @@ describe('config argument', function() { modeBarButtons.sendChartToCloud.click(gd); var msg = document.querySelector('.plotly-cloud-dialog-message'); expect(msg).not.toBe(null, 'confirmation dialog should be shown'); - expect(msg.textContent).toContain('https://example.plotly.com/endpoint'); + expect(msg.textContent).toContain('example.plotly.com'); }) .then(done, done.fail); }); @@ -570,8 +560,8 @@ describe('config argument', function() { var msg = document.querySelector('.plotly-cloud-dialog-message'); expect(msg).not.toBe(null, 'confirmation dialog should be shown'); - expect(msg.textContent).toContain('https://yo.plotly.com/endpoint'); - expect(msg.textContent).not.toContain('https://example.plotly.com/endpoint2'); + expect(msg.textContent).toContain('yo.plotly.com'); + expect(msg.textContent).not.toContain('example.plotly.com'); }) .catch(failTest) .then(function() { diff --git a/test/jasmine/tests/modebar_test.js b/test/jasmine/tests/modebar_test.js index 6dd86615a6a..61653ecee5f 100644 --- a/test/jasmine/tests/modebar_test.js +++ b/test/jasmine/tests/modebar_test.js @@ -1584,7 +1584,7 @@ describe('ModeBar', function() { return d3Select(modeBarEl).selectAll('button.modebar-btn, a.modebar-btn').size(); } - var initial = 10; + var initial = 11; Plotly.newPlot(gd, [{y: [1, 2]}], {}) .then(function() { expect(countButtons()).toBe(initial); @@ -1669,7 +1669,7 @@ describe('ModeBar', function() { return d3Select(modeBarEl).selectAll('button.modebar-btn, a.modebar-btn').size(); } - var initial = 10; + var initial = 11; Plotly.newPlot(gd, [{y: [1, 2]}], {}) .then(function() { expect(countButtons()).toBe(initial); @@ -1715,10 +1715,10 @@ describe('ModeBar', function() { it('remove buttons using template', function(done) { function countButtons() { var modeBarEl = gd._fullLayout._modeBar.element; - return d3Select(modeBarEl).selectAll('a.modebar-btn').size(); + return d3Select(modeBarEl).selectAll('button.modebar-btn, a.modebar-btn').size(); } - var initial = 10; + var initial = 11; Plotly.newPlot(gd, [{y: [1, 2]}], { template: { layout: { @@ -1750,7 +1750,7 @@ describe('ModeBar', function() { return d3Select(modeBarEl).selectAll('button.modebar-btn, a.modebar-btn').size(); } - var initial = 10; + var initial = 11; Plotly.newPlot(gd, [{y: [1, 2]}], { template: { layout: { @@ -1773,7 +1773,7 @@ describe('ModeBar', function() { return d3Select(modeBarEl).selectAll('button.modebar-btn, a.modebar-btn').size(); } - var initial = 10; + var initial = 11; Plotly.newPlot(gd, [{y: [1, 2]}], { modebar: { remove: t @@ -1794,7 +1794,7 @@ describe('ModeBar', function() { return d3Select(modeBarEl).selectAll('button.modebar-btn, a.modebar-btn').size(); } - var initial = 10; + var initial = 11; Plotly.newPlot(gd, [{y: [1, 2]}], { modebar: { add: 'drawline' diff --git a/test/plot-schema.json b/test/plot-schema.json index 7bb8469b585..379fd8b2ea0 100644 --- a/test/plot-schema.json +++ b/test/plot-schema.json @@ -269,7 +269,7 @@ }, "plotlyServerURL": { "description": "Sets the URL for the `sendChartToCloud` modebar button. When clicked, the button will send the chart data to this URL.", - "dflt": "", + "dflt": "https://cloud.plotly.com/newchart", "valType": "string" }, "queueLength": { @@ -315,7 +315,7 @@ }, "showSendToCloud": { "description": "Should we include a modebar button that sends this chart to a URL specified by `plotlyServerURL`, for sharing the chart with others? Note that this button will (after a confirmation step) send chart data to an external server.", - "dflt": false, + "dflt": true, "valType": "boolean" }, "showTips": {