feat(charts): colors to config

mySouler · Jul 24, 2017 · 5f260b3 · 5f260b3
1 parent 8ab5288
commit 5f260b3
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 21 deletions.
diff --git a/src/components/common/vuestic-chart/DefaultOptions.js b/src/components/common/vuestic-chart/DefaultOptions.js
@@ -1,8 +1,12 @@
+import store from 'vuex-store'
+
+let palette = store.getters.palette
+
 export default {
   legend: {
     position: 'bottom',
     labels: {
-      fontColor: '#34495e',
+      fontColor: palette.fontColor,
       fontFamily: 'sans-serif',
       fontSize: 14,
       padding: 20,

diff --git a/src/components/statistics/charts/BubbleChartData.js b/src/components/statistics/charts/BubbleChartData.js
@@ -1,8 +1,12 @@
+import store from 'vuex-store'
+
+let palette = store.getters.palette
+
 export default {
   datasets: [
     {
-      label: 'Data One',
-      backgroundColor: ' #e34a4a',
+      label: 'USA',
+      backgroundColor: palette.danger,
       data: [
         {
           x: 23,
@@ -27,8 +31,8 @@ export default {
       ]
     },
     {
-      label: 'Data Two',
-      backgroundColor: '#4ae387',
+      label: 'Russia',
+      backgroundColor: palette.primary,
       data: [
         {
           x: 0,
@@ -53,8 +57,8 @@ export default {
       ]
     },
     {
-      label: 'Data Three',
-      backgroundColor: '#f7cc36',
+      label: 'Canada',
+      backgroundColor: palette.warning,
       data: [
         {
           x: 10,
@@ -74,8 +78,8 @@ export default {
       ]
     },
     {
-      label: 'Data Four',
-      backgroundColor: '#4ab2e3',
+      label: 'Belarus',
+      backgroundColor: palette.info,
       data: [
         {
           x: 35,
@@ -100,8 +104,8 @@ export default {
       ]
     },
     {
-      label: 'Data Five',
-      backgroundColor: '#db76df',
+      label: 'Ukraine',
+      backgroundColor: palette.success,
       data: [
         {
           x: 25,

diff --git a/src/components/statistics/charts/DonutChartData.js b/src/components/statistics/charts/DonutChartData.js
@@ -1,8 +1,12 @@
+import store from 'vuex-store'
+
+let palette = store.getters.palette
+
 export default {
   labels: ['North America', 'South America', 'Australia'],
   datasets: [{
     label: 'Population (millions)',
-    backgroundColor: ['#e34a4a', '#4ab2e3', '#db76df'],
+    backgroundColor: [palette.danger, palette.info, palette.success],
     data: [2478, 5267, 734]
   }]
 }
diff --git a/src/components/statistics/charts/HorizontalBarChartData.js b/src/components/statistics/charts/HorizontalBarChartData.js
@@ -1,14 +1,18 @@
+import store from 'vuex-store'
+
+let palette = store.getters.palette
+
 export default {
   labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
   datasets: [
     {
       label: 'Vuestic Satisfaction Score',
-      backgroundColor: '#f7cc36',
+      backgroundColor: palette.warning,
       data: [80, 90, 50, 70, 60, 90, 50, 90, 80, 40, 72, 93]
     },
     {
       label: 'Bulma Satisfaction Score',
-      backgroundColor: '#e34a4a',
+      backgroundColor: palette.danger,
       data: [20, 30, 20, 40, 50, 40, 15, 60, 30, 20, 42, 53]
     }
   ]

diff --git a/src/components/statistics/charts/LineChartData.js b/src/components/statistics/charts/LineChartData.js
@@ -1,16 +1,19 @@
 import utils from 'services/utils'
+import store from 'vuex-store'
+
+let palette = store.getters.palette
 
 export default {
   labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
   datasets: [
     {
       label: 'Data One',
-      backgroundColor: utils.hex2rgb('#4ae387', 0.6).css,
+      backgroundColor: utils.hex2rgb(palette.primary, 0.6).css,
       data: [40, 39, 10, 40, 39, 80, 40]
     },
     {
       label: 'Data Two',
-      backgroundColor: utils.hex2rgb('#4ab2e3', 0.6).css,
+      backgroundColor: utils.hex2rgb(palette.info, 0.6).css,
       data: [50, 20, 70, 30, 10, 5, 70]
     }
   ]

diff --git a/src/components/statistics/charts/PieChartData.js b/src/components/statistics/charts/PieChartData.js
@@ -1,8 +1,12 @@
+import store from 'vuex-store'
+
+let palette = store.getters.palette
+
 export default {
   labels: ['Africa', 'Asia', 'Europe'],
   datasets: [{
     label: 'Population (millions)',
-    backgroundColor: ['#4ae387', '#f7cc36', '#e34a4a'],
+    backgroundColor: [palette.primary, palette.warning, palette.danger],
     data: [2478, 5267, 734]
   }]
 }
diff --git a/src/components/statistics/charts/VerticalBarChartData.js b/src/components/statistics/charts/VerticalBarChartData.js
@@ -1,14 +1,18 @@
+import store from 'vuex-store'
+
+let palette = store.getters.palette
+
 export default {
   labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
   datasets: [
     {
       label: 'USA',
-      backgroundColor: '#4ae387',
+      backgroundColor: palette.primary,
       data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
     },
     {
       label: 'USSR',
-      backgroundColor: '#4ab2e3',
+      backgroundColor: palette.info,
       data: [50, 10, 22, 39, 15, 20, 85, 32, 60, 50, 20, 30]
     }
   ]

diff --git a/src/store/getters.js b/src/store/getters.js
@@ -2,10 +2,12 @@ const menuItems = state => state.menu.items
 const sidebarOpened = state => state.app.sidebar.opened
 const toggleWithoutAnimation = state => state.app.sidebar.withoutAnimation
 const config = state => state.app.config
+const palette = state => state.app.config.palette
 
 export {
   menuItems,
   toggleWithoutAnimation,
   sidebarOpened,
-  config
+  config,
+  palette
 }
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
@@ -9,7 +9,17 @@ const state = {
     googleMaps: {
       apiKey: 'AIzaSyBNAqPrTQoz9P4NBlDDyfxrnKiafkaL8iQ'
     },
-    windowMatchSizeLg: '(min-width: 992px)'
+    windowMatchSizeLg: '(min-width: 992px)',
+    palette: {
+      primary: '#4ae387',
+      danger: '#e34a4a',
+      info: '#4ab2e3',
+      success: '#db76df',
+      warning: '#f7cc36',
+      white: '#fff',
+      black: '#000',
+      fontColor: '#34495e'
+    }
   }
 }