fix plotly global CSS issues, see plotly/plotly.js#1433

Author: mkaul

plotly/ccm.plotly.js

@@ -27,7 +27,7 @@
      * recommended used framework version
      * @type {string}
      */
-    // ccm: 'https://ccmjs.github.io/ccm/versions/ccm-18.0.4.min.js',
+    // ccm: 'https://ccmjs.github.io/ccm/versions/ccm-18.0.5.min.js',
     ccm: 'https://ccmjs.github.io/ccm/ccm.js',
 
     /**
@@ -38,7 +38,7 @@
 
       html: {
         main: {
-          style: "width:600px;height:400px;"
+          style: "width:600px;height:350px;"
         }
       },
 
@@ -54,9 +54,9 @@
 
       plot_config: {},
 
-      plotly_lib: [ 'ccm.load', 'https://cdn.plot.ly/plotly-latest.min.js'  ]
+      plotly_lib: [ 'ccm.load', 'https://cdn.plot.ly/plotly-latest.min.js'  ],
 
-      // css: [ 'ccm.load',  'resources/default.css' ],
+      css: [ 'ccm.load',  'resources/default.css' ],
       // css: [ 'ccm.load',  'https://ccmjs.github.io/mkaul-components/plotly/resources/default.css' ],
       // onfinish: function( instance, results ){ console.log( results ); }
     },

plotly/resources/default.css

@@ -5,4 +5,12 @@
  */
 #element {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+/* plotly require those class to render correctly */
+.js-plotly-plot .plotly .main-svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
 }

plotly/test.html

@@ -4,7 +4,7 @@
 <meta name="author" content="Manfred Kaul <[email protected]> 2018">
 <meta name="license" content="The MIT License (MIT)">
 
-<script src="https://ccmjs.github.io/ccm/versions/ccm-18.0.4.min.js"></script>
+<script src="https://ccmjs.github.io/ccm/versions/ccm-18.0.5.min.js"></script>
 <script>ccm.components.testsuite = { ccm: 'https://ccmjs.github.io/ccm/ccm.js' };</script>
 <script src="https://ccmjs.github.io/akless-components/testsuite/versions/ccm.testsuite-1.0.0.js"></script>
 <ccm-testsuite-1-0-0>

plotly/versions/ccm.plotly-1.0.0.js

@@ -28,7 +28,7 @@
      * recommended used framework version
      * @type {string}
      */
-    ccm: 'https://ccmjs.github.io/ccm/versions/ccm-18.0.4.min.js',
+    ccm: 'https://ccmjs.github.io/ccm/versions/ccm-18.0.5.min.js',
     // ccm: 'https://ccmjs.github.io/ccm/ccm.js',
 
     /**
@@ -39,7 +39,7 @@
 
       html: {
         main: {
-          style: "width:600px;height:400px;"
+          style: "width:600px;height:350px;"
         }
       },
 
@@ -55,10 +55,10 @@
 
       plot_config: {},
 
-      plotly_lib: [ 'ccm.load', 'https://cdn.plot.ly/plotly-1.41.3.min.js'  ]
+      plotly_lib: [ 'ccm.load', 'https://cdn.plot.ly/plotly-1.41.3.min.js'  ],
 
       // css: [ 'ccm.load',  'resources/default.css' ],
-      // css: [ 'ccm.load',  'https://ccmjs.github.io/mkaul-components/plotly/resources/default.css' ],
+      css: [ 'ccm.load',  'https://ccmjs.github.io/mkaul-components/plotly/resources/default.css' ],
       // onfinish: function( instance, results ){ console.log( results ); }
     },