Refactor Custom Styling

README.md

@@ -10,24 +10,26 @@ Install via npm using `npm install vue-world-map`
 
 ## Usage
 
-This component is most useful in creating a heat map for various countries. And
-will color countries differently based on a props passed.
+This component is most useful when creating a heat map for countries with interpolation between two colors.
 
 The component requires a prop of `countryData` to be passed to it, which is a JS
-object formatted like so.
+object formatted like so:
 
 ``` javascript
 {
   US: 100,
   CA: 120,
   UK: 400,
+  unknown: 999,
 }
 ```
 
 Where the key is a country's
 [ISO 3166 Code](https://en.wikipedia.org/wiki/ISO_3166) and the value is a
 numerical value associated with it.
 
+Keys that have a country code of `unknown` will not have their values parsed.
+
 ## API
 
 | Props | Description | Optional |

src/App.vue

@@ -1,26 +1,14 @@
 <template>
-<div class="vue-world-map">
-  <Map />
-</div>
+  <div class="vue-world-map" :style="mapStyle">
+    <Map :country-data="countryData" :low-color="lowColor" :high-color="highColor"/>
+  </div>
 </template>
 
 <script>
-import chroma from 'chroma-js';
 import Map from './Map';
-import {
-  getDynamicMapCss,
-  getBaseCss,
-  getCombinedCssString,
-} from './dynamic-map-css';
-
 
 export default {
   components: { Map },
-  watch: {
-    countryData() {
-      this.renderMapCSS();
-    },
-  },
   props: {
     lowColor: {
       type: String,
@@ -43,32 +31,21 @@ export default {
       default: 'black',
     },
   },
-  data() {
-    return {
-      node: document.createElement('style'),
-      chromaScale: chroma.scale([this.$props.lowColor, this.$props.highColor]),
-    };
-  },
+
   methods: {
-    renderMapCSS() {
-      const baseCss = getBaseCss(this.$props);
-      const dynamicMapCss = getDynamicMapCss(this.$props.countryData, this.chromaScale);
-      this.$data.node.innerHTML = getCombinedCssString(baseCss, dynamicMapCss);
+    mapStyle() {
+      return `fill:${this.defaultCountryFillColor};stroke:${this.countryStrokeColor};`;
     },
   },
-  mounted() {
-    document.body.appendChild(this.$data.node);
-    this.renderMapCSS();
-  },
 };
 </script>
 
 <style>
-.vue-world-map {
-  height: 100%;
-}
+  .vue-world-map {
+    height: 100%;
+  }
 
-#map-svg {
-  height: 100%;
-}
+  #map-svg {
+    height: 100%;
+  }
 </style>

src/dynamic-map-helpers.js

@@ -0,0 +1,18 @@
+// We multiply this unit by the (value of a country - min) to get the
+// decimal value to provide to the Chroma scale instance.
+export const getColorScaleUnit = (min, max) => 1 / (max - min);
+
+export const getMaxAndMinCountryDataValues = (countryData) => {
+  let min, max;
+
+  Object.keys(countryData).forEach((key) => {
+    if (key === 'unknown') return;
+
+    const value = countryData[key];
+
+    if (value < min || min === undefined) min = value;
+    if (value > max || max === undefined) max = value;
+  });
+
+  return { min, max };
+};

test/dynamic-map-helpers.spec.js

@@ -0,0 +1,37 @@
+import {
+  getColorScaleUnit,
+  getMaxAndMinCountryDataValues,
+} from '@/dynamic-map-helpers';
+
+describe(getColorScaleUnit, () => {
+  const min = 4;
+  const max = 14;
+
+  const expectedResult = 0.1;
+  const result = getColorScaleUnit(min, max);
+
+  it('should return the correct scaling', () => {
+    expect(result).toEqual(expectedResult);
+  });
+});
+
+describe(getMaxAndMinCountryDataValues, () => {
+  const countyData = {
+    US: 4,
+    CA: 7,
+    GB: 8,
+    IE: 14,
+    unknown: 1337,
+  };
+
+  const expectedResult = {
+    min: 4,
+    max: 14,
+  };
+
+  const result = getMaxAndMinCountryDataValues(countyData);
+
+  it('should return the min and max country values', () => {
+    expect(result).toEqual(expectedResult);
+  });
+});