Merge pull request #2 from geopozo/pikul-music-import-promise

FIX and Add options to chart2music plotly integration

Author: aliwelchoo

devtools/test_dashboard/index-mathjax3.html

@@ -24,6 +24,10 @@ <h4>no MathJax: Apple: $2, Orange: $3</h4>
     <div id="graph"></div>
   </div>
   <div id="snapshot"></div>
+  <div style="position:absolute; border-top: .3em solid #eee; bottom: 0px; left: 0; width: 100%">
+    <div style="margin-top: -1.2em; padding-left: 3px; font-weight: bold; color: #555; width:100%;">Closed Captions</div>
+    <div id="c2m-plotly-cc" style="width: 100%; height: 40px; padding: 18px 0 0 15px; color: #333">Test</div>
+  </div>
 
   <script>
     window.MathJax = {

devtools/test_dashboard/index-mathjax3chtml.html

@@ -22,6 +22,10 @@
     <div id="graph"></div>
   </div>
   <div id="snapshot"></div>
+  <div style="position:absolute; border-top: .3em solid #eee; bottom: 0px; left: 0; width: 100%">
+    <div style="margin-top: -1.2em; padding-left: 3px; font-weight: bold; color: #555; width:100%;">Closed Captions</div>
+    <div id="c2m-plotly-cc" style="width: 100%; height: 40px; padding: 18px 0 0 15px; color: #333">Test</div>
+  </div>
 
   <script>
     window.MathJax = window.MathJax || {

devtools/test_dashboard/index-strict.html

@@ -21,6 +21,10 @@
     <div id="graph"></div>
   </div>
   <div id="snapshot"></div>
+  <div style="position:absolute; border-top: .3em solid #eee; bottom: 0px; left: 0; width: 100%">
+    <div style="margin-top: -1.2em; padding-left: 3px; font-weight: bold; color: #555; width:100%;">Closed Captions</div>
+    <div id="c2m-plotly-cc" style="width: 100%; height: 40px; padding: 18px 0 0 15px; color: #333">Test</div>
+  </div>
 
   <script src="../../node_modules/mathjax-v2/MathJax.js?config=TeX-AMS-MML_SVG"></script>
   <script charset="utf-8" id="source" src="../../build/plotly.js"></script>

devtools/test_dashboard/index.html

@@ -20,7 +20,10 @@
     <div id="graph"></div>
   </div>
   <div id="snapshot"></div>
-
+  <div style="position:absolute; border-top: .3em solid #eee; bottom: 0px; left: 0; width: 100%">
+    <div style="margin-top: -1.2em; padding-left: 3px; font-weight: bold; color: #555; width:100%;">Closed Captions</div>
+    <div id="c2m-plotly-cc" style="width: 100%; height: 40px; padding: 18px 0 0 15px; color: #333">Test</div>
+  </div>
   <script src="../../node_modules/mathjax-v2/MathJax.js?config=TeX-AMS-MML_SVG"></script>
   <script charset="utf-8" id="source" src="../../build/plotly.js" type="module"></script>
   <script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>

draftlogs/6866_change.md

@@ -0,0 +1 @@
+- Add 'decimal' and 'thousands' formats for Brazilian Portuguese locale file [[#6866](https://github.com/plotly/plotly.js/pull/6866)], with thanks to @pazuza  for the contribution!

lib/locales/pt-br.js

@@ -78,6 +78,8 @@ module.exports = {
             'Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun',
             'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'
         ],
-        date: '%d/%m/%Y'
+        date: '%d/%m/%Y',
+        decimal: ',',
+        thousands: '.'
     }
 };

src/plot_api/accessibility.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var Lib = require('../lib');
 var c2m = require('chart2music');
 var Fx = require('../components/fx');
 
@@ -9,24 +10,23 @@ function enable(gd) {
     var accessibilityVars = gd._context.accessibility;
     var library = accessibilityVars.library;
     var options = accessibilityVars.options;
+    var info = accessibilityVars.info;
+    var closedCaptionsOptions = accessibilityVars.closedCaptions;
     if(!supportedAccessibilityLibraries.includes(library)) {
         // 'Accessibility not implemented for library: ' + library
         return;
     }
     if(library === 'chart2music') {
         var c2mData = {};
         var labels = [];
-        var info = options.info;
-        delete options.info;
         var fullData = gd._fullData;
-
         for(var i = 0; i < fullData.length; i++) {
             var trace = fullData[i] ? fullData[i] : {};
             var type = trace.type;
-            var x = trace.x ? trace.x : [];
-            var y = trace.y ? trace.y : [];
-            var name = trace.name ? trace.name : i;
-            var text = trace.text ? trace.text : [];
+            var x = trace.x !== undefined ? trace.x : [];
+            var y = trace.y !== undefined ? trace.y : [];
+            var name = trace.name !== undefined ? trace.name : i;
+            var text = trace.text !== undefined ? trace.text : [];
             if(type === 'scatter') {
                 var traceData = [];
                 if('y' in trace) {
@@ -38,6 +38,7 @@ function enable(gd) {
                                 label: text[p] ? text[p] : p
                             });
                     }
+                    if(traceData.length === 0) continue;
                     c2mData[name] = traceData;
                     labels.push(name);
                 }
@@ -46,16 +47,43 @@ function enable(gd) {
                 return;
             }
         }
+        var closedCaptions;
+        if(closedCaptionsOptions.generate) {
+            closedCaptions = document.createElement('div'); // should this be Lib.getGraphDiv()?
+            closedCaptions.id = closedCaptionsOptions.elId;
+            closedCaptions.className = closedCaptionsOptions.elClassname;
+            gd.parentNode.insertBefore(closedCaptions, gd.nextSibling); // this does get generated
+            // TODO we need a better generator
+        } else {
+            closedCaptions = document.getElementById(closedCaptionsOptions.elId);
+            if(closedCaptions === null) {
+                // TODO maybe handle this better for the developer?
+                return;
+            }
+        }
 
-        var closedCaptions = document.createElement('div');
-        closedCaptions.id = 'cc';
-        closedCaptions.className = 'closed_captions';
-        gd.appendChild(closedCaptions); // this does get generated
+        var titleText = 'Chart';
+        if((gd._fullLayout.title !== undefined) && (gd._fullLayout.title.text !== undefined)) {
+            titleText = gd._fullLayout.title.text;
+        }
 
-        var titleText = gd._fullLayout.title.text ? gd._fullLayout.title.text : 'Chart';
-        var xaxisText = gd._fullLayout.xaxis.title.text ? gd._fullLayout.xaxis.title.text : 'X Axis';
-        var yaxisText = gd._fullLayout.yaxis.title.text ? gd._fullLayout.yaxis.title.text : 'Y Axis';
-        options.onFocusCallback = function(dataInfo) {
+        var xAxisText = 'X Axis';
+        if((gd._fullLayout.xaxis !== undefined) &&
+            (gd._fullLayout.xaxis.title !== undefined) &&
+            (gd._fullLayout.xaxis.title.text !== undefined)) {
+            xAxisText = gd._fullLayout.xaxis.title.text;
+        }
+        var yAxisText = 'Y Axis';
+        if((gd._fullLayout.yaxis !== undefined) &&
+            (gd._fullLayout.yaxis.title !== undefined) &&
+            (gd._fullLayout.yaxis.title.text !== undefined)) {
+            yAxisText = gd._fullLayout.yaxis.title.text;
+        }
+        // Arguably should pass all config as copy to C2M
+        // If C2M eventually modifies them in any way (minus w/ _ prefix)
+        // It will always break transition/redraw logic in react
+        var options2 = Lib.extendDeepAll({}, options);
+        options2.onFocusCallback = function(dataInfo) {
             Fx.hover(gd, [{
                 curveNumber: labels.indexOf(dataInfo.slice),
                 pointNumber: dataInfo.index
@@ -66,16 +94,16 @@ function enable(gd) {
             type: 'line',
             axes: {
                 x: {
-                    label: xaxisText
+                    label: xAxisText
                 },
                 y: {
-                    label: yaxisText
+                    label: yAxisText
                 },
             },
             element: gd,
             cc: closedCaptions,
             data: c2mData,
-            options: options,
+            options2: options,
             info: info
         });
     }

src/plot_api/plot_api.js

@@ -2676,7 +2676,6 @@ function react(gd, data, layout, config) {
             setPlotContext(gd, config);
             configChanged = diffConfig(oldConfig, gd._context);
         }
-
         gd.data = data || [];
         helpers.cleanData(gd.data);
         gd.layout = layout || {};
@@ -2747,7 +2746,6 @@ function react(gd, data, layout, config) {
 
             Plots.doCalcdata(gd);
             subroutines.doAutoRangeAndConstraints(gd);
-
             seq.push(function() {
                 return Plots.transitionFromReact(gd, restyleFlags, relayoutFlags, oldFullLayout);
             });
@@ -3663,7 +3661,6 @@ function deleteFrames(gd, frameList) {
  */
 function purge(gd) {
     gd = Lib.getGraphDiv(gd);
-
     var fullLayout = gd._fullLayout || {};
     var fullData = gd._fullData || [];
 
@@ -3681,7 +3678,6 @@ function purge(gd) {
 
     // in contrast to _doPlots.purge which does NOT clear _context!
     delete gd._context;
-
     return gd;
 }
 

src/plot_api/plot_config.js

@@ -478,9 +478,11 @@ var configAttributes = {
         dflt: {
             library: 'chart2music',
             enabled: true,
-            options: {info: {}}
+            options: {},
+            info: {},
+            closedCaptions: {generate: false, elId: 'c2m-plotly-cc', elClassname: 'c2m-plotly-closed_captions'}
         },
-        description: ['Accessibility options: which library to use; whether to enable and the options to pass to the library.',
+        description: ['Accessibility options: which library to use; whether to enable, options to pass to the library, info to pass to the library, closedCaptions to control how plotly renders the closed-captions element.',
             'chart2music is supported and options here include Options and Info from https://www.chart2music.com/docs/API/Config. '
         ].join(' ')
     },

test/jasmine/assets/create_graph_div.js

@@ -5,6 +5,11 @@ module.exports = function createGraphDiv() {
     gd.id = 'graph';
     document.body.appendChild(gd);
 
+    var closedCaptions = document.createElement('div');
+    closedCaptions.id = 'c2m-plotly-cc';
+    closedCaptions.className = 'c2m-plotly-closed_captions';
+    document.body.appendChild(closedCaptions); // this does get generated
+
     // force the graph to be at position 0,0 no matter what
     gd.style.position = 'fixed';
     gd.style.left = 0;