Merge pull request #328 from offen/weekend-highlight

Improve styling of weekends in chart
offen · Mar 12, 2020 · 3a2b596 · 3a2b596
2 parents 5f7c46b + ab6f925
commit 3a2b596
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/auditorium/src/views/auditorium.js b/auditorium/src/views/auditorium.js
@@ -34,7 +34,7 @@ const management = require('./../action-creators/management')
 const AuditoriumView = (props) => {
   const { matches, authenticatedUser, model, isOperator, consentStatus, stale } = props
   const { handlePurge, handleQuery, expressConsent, getConsentStatus, handleShare, handleValidationError, handleRetire, handleCopy } = props
-  const { accountId, range, resolution } = matches
+  const { accountId, range, resolution = 'days' } = matches
   const [focus, setFocus] = useState(true)
 
   if (isOperator) {

diff --git a/auditorium/src/views/components/auditorium/chart.js b/auditorium/src/views/components/auditorium/chart.js
@@ -16,6 +16,12 @@ const _ = require('underscore')
 
 const Plot = createPlotlyComponent(Plotly)
 
+const tickColorFade = '#CCCCCC'
+const barColorVisitors = '#137752'
+const barColorVisitorsFade = '#19A974'
+const barColorViews = '#19A974'
+const barColorViewsFade = '#9EEBCF'
+
 const Chart = (props) => {
   const { model, isOperator, resolution } = props
   const { pageviews } = model
@@ -47,6 +53,9 @@ const Chart = (props) => {
         if (index === 0 || isFirstDayOfMonth(date)) {
           result = date.toLocaleDateString(process.env.LOCALE, { month: 'short' }) + ' ' + result
         }
+        if (isWeekend(date)) {
+          return `<span style="font-weight: bold; color: ${tickColorFade}">${result}</span>`
+        }
         return result
     }
   })
@@ -60,9 +69,9 @@ const Chart = (props) => {
       marker: {
         color: x.map(function (date) {
           if (resolution !== 'days') {
-            return '#137752'
+            return barColorVisitors
           }
-          return isWeekend(date) ? '#19A974' : '#137752'
+          return isWeekend(date) ? barColorVisitorsFade : barColorVisitors
         })
       },
       name: isOperator ? 'Visitors' : 'Accounts'
@@ -78,9 +87,9 @@ const Chart = (props) => {
       marker: {
         color: x.map(function (date) {
           if (resolution !== 'days') {
-            return '#19A974'
+            return barColorViews
           }
-          return isWeekend(date) ? '#9eebcf' : '#19A974'
+          return isWeekend(date) ? barColorViewsFade : barColorViews
         })
       },
       name: 'Pageviews'