Fix issue that broke themes ahmadsoe#142

nlfurniss · Aug 15, 2018 · a5fd87c · a5fd87c
1 parent 33b98e9
commit a5fd87c
Show file tree

Hide file tree

Showing 5 changed files with 257 additions and 10 deletions.
diff --git a/addon/components/high-charts.js b/addon/components/high-charts.js
@@ -1,12 +1,12 @@
 import { assign } from '@ember/polyfills';
-
 import Component from '@ember/component';
 import { getOwner } from '@ember/application';
-import { set, getProperties, get, computed } from '@ember/object';
+import { set, getProperties, get, computed, getWithDefault } from '@ember/object';
 import { run } from '@ember/runloop';
 import { setDefaultHighChartOptions } from '../utils/option-loader';
 import { getSeriesMap, getSeriesChanges } from '../utils/chart-data';
 import layout from 'ember-highcharts/templates/components/high-charts';
+import merge from 'deepmerge';
 
 /* Map ember-highcharts modes to Highcharts methods
  * https://api.highcharts.com/class-reference/Highcharts.html
@@ -28,7 +28,10 @@ export default Component.extend({
   callback: undefined,
 
   buildOptions: computed('chartOptions', 'content.[]', function() {
-    let chartOptions = assign({}, get(this, 'theme'), get(this, 'chartOptions'));
+    let theme = getWithDefault(this, 'theme', {});
+    let passedChartOptions = getWithDefault(this, 'chartOptions', {});
+
+    let chartOptions = merge(theme, passedChartOptions);
     let chartContent = get(this, 'content');
 
     // if 'no-data-to-display' module has been imported, keep empty series and leave it to highcharts to show no data label.

diff --git a/index.js b/index.js
@@ -64,6 +64,12 @@ module.exports = {
         app.import(path.join(highchartsPath, 'modules', moduleFilename));
       }
     }
+
+    app.import('node_modules/deepmerge/dist/es.js', {
+      using: [
+        { transformation: 'es6', as: 'deepmerge' }
+      ]
+    });
   },
 
   treeForVendor(vendorTree) {

diff --git a/package.json b/package.json
@@ -25,7 +25,9 @@
     "bootstrap": "3.3.7",
     "broccoli-funnel": "^2.0.1",
     "broccoli-merge-trees": "^1.2.0",
+    "deepmerge": "2.1.1",
     "ember-cli-babel": "^6.6.0",
+    "ember-cli-es6-transform": "^0.0.5",
     "ember-cli-htmlbars": "^2.0.1"
   },
   "devDependencies": {
@@ -52,7 +54,7 @@
     "eslint-plugin-ember": "^5.0.0",
     "eslint-plugin-ember-suave": "^1.0.0",
     "eslint-plugin-node": "^5.2.1",
-    "highcharts": "^5.0.12",
+    "highcharts": "6.0.3",
     "loader.js": "^4.2.3"
   },
   "engines": {

diff --git a/tests/unit/components/high-charts-test.js b/tests/unit/components/high-charts-test.js
@@ -0,0 +1,99 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Component | high-charts', function(hooks) {
+  setupTest(hooks);
+
+  this.sampleTheme = {
+    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
+    title: {
+      style: {
+        color: '#000',
+        font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
+      }
+    },
+    subtitle: {
+      style: {
+        color: '#666666',
+        font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
+      }
+    },
+    legend: {
+      itemStyle: {
+        font: '9pt Trebuchet MS, Verdana, sans-serif',
+        color: 'black'
+      },
+      itemHoverStyle: {
+        color: 'gray'
+      }
+    }
+  };
+
+  this.postMergeOptions = {
+    colors: [
+      '#058DC7',
+      '#50B432',
+      '#ED561B',
+      '#DDDF00',
+      '#24CBE5',
+      '#64E572',
+      '#FF9655',
+      '#FFF263',
+      '#6AF9C4',
+      '#000000',
+      '#FFFFFF'
+    ],
+    title: {
+      style: {
+        color: '#FF00FF',
+        font: 'bold 16px "Trebuchet MS", Verdana, sans-serif',
+        fontWeight: 'bold'
+      }
+    },
+    series: [
+      {
+        color: '#aaaaaa',
+        data: 0,
+        id: 'noData'
+      }
+    ],
+    subtitle: {
+      style: {
+        color: '#666666',
+        font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
+      }
+    },
+    legend: {
+      itemStyle: {
+        font: '9pt Trebuchet MS, Verdana, sans-serif',
+        color: 'black'
+      },
+      itemHoverStyle: {
+        color: 'blue'
+      }
+    }
+  };
+
+  test('it merges the theme and chartOptions correctly', function(assert) {
+    let component = this.owner.factoryFor('component:high-charts').create({
+      content: [],
+      theme: this.sampleTheme,
+      chartOptions: {
+        colors: ['#000000', '#FFFFFF'],
+        title: {
+          style: {
+            color: '#FF00FF',
+            fontWeight: 'bold'
+          }
+        },
+        legend: {
+          itemHoverStyle: {
+            color: 'blue'
+          }
+        }
+      }
+    });
+    let mergedChartOptions = component.get('buildOptions');
+    assert.deepEqual(mergedChartOptions, this.postMergeOptions);
+  });
+});