Update of h5p-chart.

bar.js

@@ -1,5 +1,5 @@
 /*global d3*/
-H5P.Chart.BarChart = (function () {
+H5P.NDLAChart.BarChart = (function () {
 
   /**
    * Creates a bar chart from the given data set.
@@ -94,8 +94,7 @@ H5P.Chart.BarChart = (function () {
       var height = h - tickSize - lineHeight; // Add space for labels below
 
       // Update SVG size
-      svg.attr("width", width)
-        .attr("height", h);
+      svg.attr('viewBox', `0 0 ${width} ${h}`);
 
       // Update scales
       xScale.rangeRoundBands([0, width], 0.05);
@@ -125,7 +124,7 @@ H5P.Chart.BarChart = (function () {
         return height - yScale(d.value) + lineHeight;
       });
 
-      // Hide ticks from readspeakers, the entire rectangle is already labelled
+      // Hide ticks from screen readers, the entire rectangle is already labelled
       xAxisG.selectAll("text").attr("aria-hidden", true);
     };
   }

chart.css

@@ -1,9 +1,10 @@
 .h5p-chart svg {
   display: block;
   margin: 0 auto;
-}
-.h5p-chart-chart {
-  font-size: 0.75em;
+  font-size: 12px;
+  font-size: min(16px, 0.9em);
+  width: 100%;
+  height: 100%;
 }
 .h5p-chart-bar {
   width: 100%;
@@ -31,3 +32,44 @@
   height:1px;
   overflow:hidden;
 }
+
+.h5p-chart .text-rect {
+  fill: black;
+  opacity: 0.7;
+}
+
+
+.h5p-chart circle:focus, .h5p-chart .bar:focus {
+  outline: dodgerblue 2px solid;
+}
+
+.h5p-chart .line-path {
+  fill: none;
+  stroke-width: 2px;
+}
+
+.h5p-chart .chart-title {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+
+.h5p-chart .y-axis .tick line {
+  stroke: black;
+  opacity: 0.4;
+}
+
+.h5p-chart .axis-title {
+  font-size: 1.3em;;
+  font-weight: bold;
+}
+.h5p-chart text {
+  font-size: 1.1em;;
+}
+.h5p-chart .text-node {
+  fill: white;
+  font-size: 1.2em;
+  dominant-baseline: central;
+}
+.h5p-chart .y-axis path {
+  stroke-width: 0;
+}

chart.js

@@ -5,7 +5,7 @@
  * @external {jQuery} $ H5P.jQuery
  * @external {EventDispatcher} EventDispatcher H5P.EventDispatcher
  */
-H5P.Chart = (function ($, EventDispatcher) {
+H5P.NDLAChart = (function ($, EventDispatcher) {
 
   /**
    * Initialize module.
@@ -34,8 +34,8 @@ H5P.Chart = (function ($, EventDispatcher) {
       self.params.listOfTypes = [
         {
           text: 'Cat',
-          value: 1,
-          color: '#D3D3D3',
+          value: 4,
+          color: '#fbb033',
           fontColor: '#000'
         },
         {
@@ -53,15 +53,33 @@ H5P.Chart = (function ($, EventDispatcher) {
       ];
     }
 
-    // Set the figure definition for readspeakers if it doesn't exist
+    // Set the figure definition for screen readers if it doesn't exist
     if (!self.params.figureDefinition) {
       self.params.figureDefinition = "Chart";
     }
 
     // Keep track of type.
-    self.type = (self.params.graphMode === 'pieChart' ? 'Pie' : 'Bar');
+    self.type = getChartType(self.params.graphMode);
   }
 
+  function getChartType(graphMode) {
+    switch (graphMode) {
+      case 'pieChart':
+        return 'Pie';
+
+      case 'barChart':
+        return 'Bar';
+
+      case 'extendedBarChart':
+        return 'ExtendedBar';
+
+        case 'lineChart':
+        return 'Line';
+
+      default:
+        return 'Pie';
+    }
+  }
   // Inheritance
   Chart.prototype = Object.create(EventDispatcher.prototype);
   Chart.prototype.constructor = Chart;
@@ -106,7 +124,7 @@ H5P.Chart = (function ($, EventDispatcher) {
       self.$wrapper = $('<div/>', {
         'class': 'h5p-chart-chart h5p-chart-' + self.type.toLowerCase()
       });
-      self.chart = new H5P.Chart[self.type + 'Chart'](self.params, self.$wrapper);
+      self.chart = new H5P.NDLAChart[self.type + 'Chart'](self.params, self.$wrapper);
     }
 
     // Prepare container