TO BE REMOVED: Added first draft of plugin

site/layouts/default.hbs

@@ -64,6 +64,7 @@
 <script src="scripts/charts/line.js"></script>
 <script src="scripts/charts/bar.js"></script>
 <script src="scripts/charts/pie.js"></script>
+<script src="scripts/chartist-plugin-accessibility.js"></script>
 
 <!-- Chartist plugins -->
 <script src="bower_components/chartist-plugin-pointlabels/dist/chartist-plugin-pointlabels.js"></script>

site/templates/accessibility.hbs

@@ -0,0 +1,86 @@
+---
+page-class: examples
+title: Chartist Accessibility Test
+description: Demos and examples of Chartist.js with live editing functionality
+---
+<h2>Accessibility in Chartist</h2>
+<p>Dies ist eine einfache Seite um die Accessibility Erweiterung von Chartist zu testen.</p>
+<h3>Mitarbeiter Kaffeekonsum</h3>
+<div id="chart-1" class="ct-chart"></div>
+<h3>Umsatzzahlen 2015</h3>
+<div id="chart-2" class="ct-chart"></div>
+<h3>Lebensmittel</h3>
+<div id="chart-3" class="ct-chart"></div>
+<p>Ende des Dokuments</p>
+<script>
+  setTimeout(function() {
+
+    var chart1 = new Chartist.Bar('#chart-1', {
+      labels: ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag'],
+      series: [
+        {name: 'Martin', data: [6, 4, 3, 4, 3]},
+        {name: 'Anna', data: [4, 3, 3, 3, 2]}
+      ]
+    }, {
+      width: '640px',
+      height: '240px',
+      plugins: [
+        Chartist.plugins.ctAccessibility({
+          caption: 'Kaffeekonsum unter der Woche',
+          seriesHeader: 'Mitarbeiter',
+          summary: 'Eine simple Tabelle welche den Kaffeekonsum von Martin und Anna unter der Woche aufzeigt',
+          valueTransform: function(value) {
+            return value + ' Kaffee pro Tag';
+          }
+        })
+      ]
+    });
+
+    var chart2 = new Chartist.Line('#chart-2', {
+      labels: ['Januar', 'Februar', 'März', 'April', 'May', 'Juni', 'July', 'August', 'September', 'Oktober', 'November', 'Dezember'],
+      series: [
+        {name: 'Umsatz', data: [20000, 30000, 35000, 32000, 40000, 42000, 50000, 62000, 80000, 94000, 100000, 120000]},
+        {name: 'Ausgaben', data: [10000, 15000, 12000, 14000, 20000, 23000, 22000, 24000, 21000, 18000, 30000, 32000]}
+      ]
+    }, {
+      width: '640px',
+      height: '240px',
+      axisX: {
+        labelInterpolationFnc: function(value) {
+          return value.split('').slice(0, 3).join('');
+        }
+      },
+      plugins: [
+        Chartist.plugins.ctAccessibility({
+          caption: 'Geschäftsjahr 2015',
+          seriesHeader: 'Geschäftszahlen',
+          summary: 'Eine Tabelle mit den Geschäftszahlen 2015',
+          valueTransform: function(value) {
+            return value + '$$';
+          }
+        })
+      ]
+    });
+
+    var chart3 = new Chartist.Pie('#chart-3', {
+      labels: ['Kohlenhydrate', 'Protein', 'Fett'],
+      series: [24, 8, 12]
+    }, {
+      width: '240px',
+      height: '240px',
+      plugins: [
+        Chartist.plugins.ctAccessibility({
+          caption: 'Nährstofftabelle Bananen',
+          summary: 'Eine Tabelle mit den Nährstoffangaben für Bananen',
+          valueTransform: function(value) {
+            var total = chart3.data.series.reduce(function(prev, current) {
+              return prev + current;
+            }, 0);
+            return Math.round(value / total * 100) + '%' + ' mit ' + value + ' Gramm';
+          }
+        })
+      ]
+    });
+
+  }, 1000);
+</script>

src/scripts/chartist-plugin-accessibility.js

@@ -0,0 +1,156 @@
+/**
+ * Chartist.js plugin that generates visually hidden tables for better accessibility. It's also possible to initialize a Chart with data from an existing table.
+ *
+ */
+/* global Chartist */
+(function (window, document, Chartist) {
+  'use strict';
+
+  function Element(name, attrs, parent) {
+    return {
+      elem: function (name, attrs) {
+        var e = Element(name, attrs, this);
+        this.children.push(e);
+        return e;
+      },
+      children: [],
+      name: name,
+      _attrs: attrs || {},
+      _parent: parent,
+      parent: function () {
+        return this._parent;
+      },
+      attrs: function (attrs) {
+        this._attrs = attrs;
+        return this;
+      },
+      text: function (text, after) {
+        if (after) {
+          this._textAfter = text;
+        } else {
+          this._textBefore = text;
+        }
+        return this;
+      },
+      toString: function () {
+        var attrs = Object.keys(this._attrs).filter(function (attrName) {
+          return this._attrs[attrName] || this._attrs[attrName] === 0;
+        }.bind(this)).map(function (attrName) {
+          return [attrName, '="', this._attrs[attrName], '"'].join('');
+        }.bind(this)).join(' ');
+
+        return ['<', this.name, attrs ? ' ' + attrs : '', '>', this._textBefore].concat(this.children.map(function (child) {
+          return child.toString();
+        })).concat([this._textAfter, '</', this.name, '>']).join('');
+      }
+    };
+  }
+
+  var defaultOptions = {
+    caption: 'A graphical chart',
+    seriesHeader: 'Series name',
+    valueTransform: Chartist.noop,
+    summary: undefined,
+    elementId: function () {
+      return 'ct-accessibility-table-' + (+new Date());
+    },
+    visuallyHiddenStyles: 'position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;'
+  };
+
+
+  Chartist.plugins = Chartist.plugins || {};
+  Chartist.plugins.ctAccessibility = function (options) {
+
+    options = Chartist.extend({}, defaultOptions, options);
+
+    return function ctAccessibility(chart) {
+      var wrapper,
+        elementId = typeof options.elementId === 'function' ? options.elementId() : options.elementId;
+
+      chart.on('created', function (data) {
+        if (wrapper) {
+          wrapper.parentNode.removeChild(wrapper);
+        }
+
+        // As we are now compensating the SVG graphic with the chart with an accessibility table, we hide it for ARIA
+        data.svg.attr({
+          'aria-hidden': 'true'
+        });
+
+        // Create wrapper element
+        var element = Element('div', {
+          style: options.visuallyHiddenStyles,
+          id: elementId
+        });
+
+        // Create table body with caption
+        var tBody = element.elem('table', {
+          summary: options.summary
+        }).elem('caption')
+          .text(options.caption)
+          .elem('tbody');
+
+        var firstRow = tBody.elem('tr');
+
+        if (chart instanceof Chartist.Pie) {
+          // For pie charts we have only column headers and one series
+          var dataArray = Chartist.getDataArray(chart.data, chart.optionsProvider.currentOptions.reverseData);
+
+          // First render the column headers with our pie chart labels
+          chart.data.labels.forEach(function (text) {
+            firstRow
+              .elem('th', {
+                scope: 'col',
+                role: 'columnheader'
+              })
+              .text(text);
+          });
+
+          var row = tBody.elem('tr');
+
+          // Add all data fields of our pie chart to the row
+          dataArray.forEach(function (dataValue) {
+            row.elem('td').text(options.valueTransform(dataValue));
+          });
+
+        } else {
+          // For line and bar charts we have multiple series and therefore also row headers
+          var normalizedData = Chartist.normalizeDataArray(
+            Chartist.getDataArray(
+              chart.data, chart.optionsProvider.currentOptions.reverseData), chart.data.labels.length);
+
+          // Add column headers inclusing the series column header for the row headers
+          [options.seriesHeader].concat(chart.data.labels).forEach(function (text) {
+            firstRow
+              .elem('th', {
+                scope: 'col',
+                role: 'columnheader'
+              })
+              .text(text);
+          });
+
+          // Add all data rows including their row headers
+          chart.data.series.forEach(function (series, index) {
+            var seriesName = series.name || [index + 1, '. Series'].join('');
+
+            var row = tBody.elem('tr');
+
+            row.elem('th', {
+              scope: 'row',
+              role: 'rowheader'
+            }).text(seriesName);
+
+            normalizedData[index].forEach(function (dataValue) {
+              row.elem('td').text(options.valueTransform(dataValue));
+            });
+          });
+        }
+
+        // Update invisible table in DOM and update table element with newly created table
+        chart.container.innerHTML += element.toString();
+        wrapper = chart.container.querySelector('#' + elementId);
+      });
+    };
+  };
+
+}(window, document, Chartist));

tasks/connect.js

@@ -14,7 +14,7 @@ module.exports = function (grunt) {
     options: {
       port: 9000,
       // Change this to '0.0.0.0' to access the server from outside.
-      hostname: 'localhost',
+      hostname: '0.0.0.0',
       livereload: 35729
     },
     livereload: {