Merge pull request #1845 from shgtkshruch/feat/improve-graph-color

fix: グラフのカラー修正
origamium · Mar 19, 2020 · 043f063 · 043f063
2 parents 975454d + a296cbe
commit 043f063
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 7 deletions.
diff --git a/components/AgencyBarChart.vue b/components/AgencyBarChart.vue
@@ -31,6 +31,7 @@ import VueI18n from 'vue-i18n'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
 import agencyData from '@/data/agency.json'
 import DataView from '@/components/DataView.vue'
+import { triple as colors } from '@/utils/colors'
 
 interface HTMLElementEvent<T extends HTMLElement> extends Event {
   currentTarget: T
@@ -114,7 +115,6 @@ const options: ThisTypedComponentOptionsWithRecordProps<
   },
   computed: {
     displayData() {
-      const colors = ['#008b41', '#63c765', '#a6e29f']
       const borderColor = '#ffffff'
       const borderWidth = [
         { left: 0, top: 1, right: 0, bottom: 0 },

diff --git a/components/MetroBarChart.vue b/components/MetroBarChart.vue
@@ -30,6 +30,7 @@ import Vue from 'vue'
 import { ChartOptions, ChartData } from 'chart.js'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
 import DataView from '@/components/DataView.vue'
+import { triple as colors } from '@/utils/colors'
 
 interface HTMLElementEvent<T extends HTMLElement> extends Event {
   currentTarget: T
@@ -121,7 +122,6 @@ const options: ThisTypedComponentOptionsWithRecordProps<
   },
   computed: {
     displayData() {
-      const colors: string[] = ['#a6e29f', '#63c765', '#008b41']
       const datasets = this.chartData.labels!.map((label, i) => {
         return {
           label,

diff --git a/components/TimeBarChart.vue b/components/TimeBarChart.vue
@@ -31,6 +31,7 @@ import { GraphDataType } from '@/utils/formatGraph'
 import DataView from '@/components/DataView.vue'
 import DataSelector from '@/components/DataSelector.vue'
 import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
+import { single as color } from '@/utils/colors'
 
 type Data = {
   dataKind: 'transition' | 'cumulative'
@@ -168,7 +169,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
               data: this.chartData.map(d => {
                 return d.transition
               }),
-              backgroundColor: '#00B849',
+              backgroundColor: color,
               borderWidth: 0
             }
           ]
@@ -182,7 +183,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
             data: this.chartData.map(d => {
               return d.cumulative
             }),
-            backgroundColor: '#00B849',
+            backgroundColor: color,
             borderWidth: 0
           }
         ]

diff --git a/components/TimeStackedBarChart.vue b/components/TimeStackedBarChart.vue
@@ -41,6 +41,7 @@ import { TranslateResult } from 'vue-i18n'
 import DataView from '@/components/DataView.vue'
 import DataSelector from '@/components/DataSelector.vue'
 import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
+import { double as colors } from '@/utils/colors'
 
 interface HTMLElementEvent<T extends HTMLElement> extends Event {
   currentTarget: T
@@ -175,7 +176,6 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       }
     },
     displayData() {
-      const colorArray = ['#00A040', '#00D154']
       const borderColor = '#ffffff'
       const borderWidth = [
         { left: 0, top: 1, right: 0, bottom: 0 },
@@ -188,7 +188,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
             return {
               label: this.items[index],
               data: item,
-              backgroundColor: colorArray[index],
+              backgroundColor: colors[index],
               borderColor,
               borderWidth: borderWidth[index]
             }
@@ -201,7 +201,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
           return {
             label: this.items[index],
             data: this.cumulative(item),
-            backgroundColor: colorArray[index],
+            backgroundColor: colors[index],
             borderColor,
             borderWidth: borderWidth[index]
           }

diff --git a/utils/colors.ts b/utils/colors.ts
@@ -0,0 +1,4 @@
+export const single: string = '#006400'
+export const double: string[] = ['#006400', '#1B75BC']
+export const triple: string[] = ['#00441B', '#006400', '#1B75BC']
+export const quadruple: string[] = ['#00441B', '#006400', '#1B75BC', '#505B00']