Merge pull request #427 from Kitware/fix-js-examples

Remove ES6 example code and validate JS code examples
Kitware · Oct 10, 2016 · 1ad2418 · 1ad2418
2 parents 470486f + a2ab986
commit 1ad2418
Show file tree

Hide file tree

Showing 15 changed files with 355 additions and 455 deletions.
diff --git a/docs/components/barchart.rst b/docs/components/barchart.rst
@@ -12,41 +12,40 @@ Example
 
     <div id="barchart-example"></div>
     <script type="text/javascript" >
-        var el = document.getElementById('barchart-example'), data = [];
-        for (var d = 0; d < 10; d += 1) data.push({a: d, b: d});
-        var vis = new candela.components.BarChart(el, {
-            data: data, x: 'a', y: 'b',
-            width: 700, height: 400});
-        vis.render();
+      var el = document.getElementById('barchart-example'), data = [];
+      for (var d = 0; d < 10; d += 1) data.push({a: d, b: d});
+      var vis = new candela.components.BarChart(el, {
+        data: data, x: 'a', y: 'b',
+        width: 700, height: 400});
+      vis.render();
     </script>
 
-**ES6/Webpack**
-
-.. code-block:: js
-
-    import BarChart from candela.components.BarChart
-
-    let el = document.createElement('div');
-    document.body.appendChild(el);
-
-    let data = [];
-    for (var d = 0; d < 10; d += 1) data.push({a: d, b: d});
-
-    let vis = new BarChart(el, {data: data, x: 'a', y: 'b'});
-    vis.render();
-
-**ES5**
-
-.. code-block:: js
-
-    var el = document.createElement('div')
-    document.body.appendChild(el);
-
-    var data = [];
-    for (var d = 0; d < 10; d += 1) data.push({a: d, b: d});
-
-    var vis = new candela.components.BarChart(el, {data: data, x: 'a', y: 'b'});
-    vis.render();
+**JavaScript**
+
+.. code-block:: html
+
+    <body>
+    <script src="//unpkg.com/candela"></script>
+    <script>
+      var el = document.createElement('div')
+      document.body.appendChild(el);
+
+      var data = [];
+      for (var d = 0; d < 10; d += 1) {
+        data.push({
+          a: d,
+          b: d
+        });
+      }
+
+      var vis = new candela.components.BarChart(el, {
+        data: data,
+        x: 'a',
+        y: 'b'
+      });
+      vis.render();
+    </script>
+    </body>
 
 **Python**
 

diff --git a/docs/components/boxplot.rst b/docs/components/boxplot.rst
@@ -15,48 +15,46 @@ Example
     <div id="boxplot-example"></div>
     <script type="text/javascript" >
         var el = document.getElementById('boxplot-example'), data = [];
-        for (var d = 0; d < 10; d += 1) data.push({a: d, b: d});
+        for (var d = 0; d < 10; d += 1) data.push({a: d, b: d/2 + 7});
         var vis = new candela.components.BoxPlot(el, {
             data: data, fields: ['a', 'b'],
             width: 700, height: 400});
         vis.render();
     </script>
 
-**ES6/Webpack**
-
-.. code-block:: js
-
-    import BoxPlot from candela.components.BoxPlot
-
-    let el = document.createElement('div');
-    document.body.appendChild(el);
-
-    let data = [];
-    for (var d = 0; d < 10; d += 1) data.push({a: d, b: d});
-
-    let vis = new BoxPlot(el, {data: data, fields: ['a', 'b']});
-    vis.render();
-
-**ES5**
-
-.. code-block:: js
-
-    var el = document.createElement('div')
-    document.body.appendChild(el);
-
-    var data = [];
-    for (var d = 0; d < 10; d += 1) data.push({a: d, b: d});
-
-    var vis = new candela.components.BoxPlot(el, {data: data, fields: ['a', 'b']});
-    vis.render();
+**JavaScript**
+
+.. code-block:: html
+
+    <body>
+    <script src="//unpkg.com/candela"></script>
+    <script>
+      var el = document.createElement('div')
+      document.body.appendChild(el);
+
+      var data = [];
+      for (var d = 0; d < 10; d += 1) {
+        data.push({
+          a: d,
+          b: d/2 + 7
+        });
+      }
+
+      var vis = new candela.components.BoxPlot(el, {
+        data: data,
+        fields: ['a', 'b']
+      });
+      vis.render();
+    </script>
+    </body>
 
 **Python**
 
 .. code-block:: python
 
     import candela
 
-    data = [{'a': d, 'b': d} for d in range(10)]
+    data = [{'a': d, 'b': d/2 + 7} for d in range(10)]
 
     candela.components.BoxPlot(data=data, fields=['a', 'b'])
 

diff --git a/docs/components/bulletchart.rst b/docs/components/bulletchart.rst
@@ -30,49 +30,31 @@ Example
       vis.render();
     </script>
 
-**ES6/Webpack**
-
-.. code-block:: js
-
-    import BulletChart from candela.components.BulletChart
-
-    let el = document.createElement('div');
-    document.body.appendChild(el);
-
-    let vis = new BulletChart(el, {
-      value: 0.8,
-      title: 'My measurement',
-      subtitle: '... it is really important',
-      ranges: [
-        { min: 0, max: 0.2, foreground: 'gray', background: 'red' },
-        { min: 0.2, max: 0.7, foreground: 'gray', background: 'yellow' },
-        { min: 0.7, max: 1, foreground: 'gray', background: 'green' }
-      ],
-      width: 700,
-      height: 100
-    });
-    vis.render();
-
-**ES5**
-
-.. code-block:: js
-
-    var el = document.createElement('div')
-    document.body.appendChild(el);
-
-    var vis = new candela.components.BulletChart(el, {
-      value: 0.8,
-      title: 'My measurement',
-      subtitle: '... it is really important',
-      ranges: [
-        { min: 0, max: 0.2, foreground: 'gray', background: 'red' },
-        { min: 0.2, max: 0.7, foreground: 'gray', background: 'yellow' },
-        { min: 0.7, max: 1, foreground: 'gray', background: 'green' }
-      ],
-      width: 700,
-      height: 100
-    });
-    vis.render();
+**JavaScript**
+
+.. code-block:: html
+
+    <body>
+    <script src="//unpkg.com/candela"></script>
+    <script>
+      var el = document.createElement('div')
+      document.body.appendChild(el);
+
+      var vis = new candela.components.BulletChart(el, {
+        value: 0.8,
+        title: 'My measurement',
+        subtitle: '... it is really important',
+        ranges: [
+          { min: 0, max: 0.2, foreground: 'gray', background: 'red' },
+          { min: 0.2, max: 0.7, foreground: 'gray', background: 'yellow' },
+          { min: 0.7, max: 1, foreground: 'gray', background: 'green' }
+        ],
+        width: 700,
+        height: 100
+      });
+      vis.render();
+    </script>
+    </body>
 
 **Python**
 

diff --git a/docs/components/ganttchart.rst b/docs/components/ganttchart.rst
@@ -30,51 +30,32 @@ Example
       vis.render();
     </script>
 
-**ES6/Webpack**
+**JavaScript**
 
-.. code-block:: js
+.. code-block:: html
 
-    import GanttChart from candela.components.GanttChart
+    <body>
+    <script src="//unpkg.com/candela"></script>
+    <script>
+      var el = document.createElement('div')
+      document.body.appendChild(el);
 
-    let el = document.createElement('div');
-    document.body.appendChild(el);
-
-    let data = [
-      {name: 'Do this', level: 1, start: 0, end: 5},
-      {name: 'This part 1', level: 2, start: 0, end: 3},
-      {name: 'This part 2', level: 2, start: 3, end: 5},
-      {name: 'Then that', level: 1, start: 5, end: 15},
-      {name: 'That part 1', level: 2, start: 5, end: 10},
-      {name: 'That part 2', level: 2, start: 10, end: 15}
-    ];
-    let vis = new GanttChart(el, {
-      data: data, label: 'name',
-      start: 'start', end: 'end', level: 'level',
-      width: 700, height: 200
-    });
-    vis.render();
-
-**ES5**
-
-.. code-block:: js
-
-    var el = document.createElement('div')
-    document.body.appendChild(el);
-
-    var data = [
-      {name: 'Do this', level: 1, start: 0, end: 5},
-      {name: 'This part 1', level: 2, start: 0, end: 3},
-      {name: 'This part 2', level: 2, start: 3, end: 5},
-      {name: 'Then that', level: 1, start: 5, end: 15},
-      {name: 'That part 1', level: 2, start: 5, end: 10},
-      {name: 'That part 2', level: 2, start: 10, end: 15}
-    ];
-    var vis = new candela.components.GanttChart(el, {
-      data: data, label: 'name',
-      start: 'start', end: 'end', level: 'level',
-      width: 700, height: 200
-    });
-    vis.render();
+      var data = [
+        {name: 'Do this', level: 1, start: 0, end: 5},
+        {name: 'This part 1', level: 2, start: 0, end: 3},
+        {name: 'This part 2', level: 2, start: 3, end: 5},
+        {name: 'Then that', level: 1, start: 5, end: 15},
+        {name: 'That part 1', level: 2, start: 5, end: 10},
+        {name: 'That part 2', level: 2, start: 10, end: 15}
+      ];
+      var vis = new candela.components.GanttChart(el, {
+        data: data, label: 'name',
+        start: 'start', end: 'end', level: 'level',
+        width: 700, height: 200
+      });
+      vis.render();
+    </script>
+    </body>
 
 **Python**