Update coverage chart color scale and add a legend (#823)

* Update coverage chart color scale and add a legend * Update ranges
ooni · Feb 10, 2023 · 219366c · 219366c · vercel · Feb 10, 2023
1 parent 44c93f1
commit 219366c
Showing 1 changed file with 50 additions and 22 deletions.
diff --git a/components/network/Calendar.js b/components/network/Calendar.js
@@ -1,23 +1,32 @@
 import React, { useState } from 'react'
 import { ResponsiveCalendar } from '@nivo/calendar'
 import styled from 'styled-components'
-import { Flex, theme } from 'ooni-components'
+import { Flex, Box, theme } from 'ooni-components'
 import { getRange } from 'utils'
 
 const StyledCalendar = styled.div`
 height: 180px;
 margin-bottom: 10px;
 margin-top: 40px;
 `
-const colors = theme.colors
+const { colors } = theme
+const chartColors = [colors.blue2, colors.blue4, colors.blue5, colors.blue7]
+
 const findColor = number => {
-  if (number === 0) return colors.gray4
-  if (number <= 10) return colors.orange3
-  if (number <= 100) return colors.green2
-  if (number <= 1000) return colors.green5
-  return colors.green8
+  if (number === 0) return colors.gray1
+  if (number <= 50) return chartColors[0]
+  if (number <= 500) return chartColors[1]
+  if (number <= 5000) return chartColors[2]
+  return chartColors[3]
 }
 
+const colorLegend = [
+  {color: chartColors[0], range: '1-50'},
+  {color: chartColors[1], range: '51-100'},
+  {color: chartColors[2], range: '501-5000'},
+  {color: chartColors[3], range: '>5000'},
+]
+
 const dateRange = (startDate, endDate) => {
   if (!startDate || !endDate) return
   const start = new Date(new Date(startDate.getFullYear(), 0, 0, 0).setUTCHours(0, 0, 0, 0))
@@ -61,21 +70,40 @@ const Calendar = React.memo(function Calendar({asn, data}) {
           dayBorderColor="#ffffff"
         />
       </StyledCalendar>
-      <Flex justifyContent='right' mb={60}>
-        {yearsOptions.map(year => (
-          <span
-            key={year}
-            style={{
-              display: 'inline-block',
-              padding: '3px 9px',
-              cursor: 'pointer',
-              fontWeight: year === selectedYear ? '800' : '400'
-            }}
-            onClick={() => setSelectedYear(year)}
-          >
-            {year}
-          </span>
-        ))}
+      <Flex justifyContent='space-between'alignItems='center' mb={60}>
+        <Flex>
+          {colorLegend.map(item => (
+            <span
+              key={item.color}
+              style={{marginRight: '16px'}}
+            >
+              <span style={{
+                width: '11px',
+                height: '11px',
+                backgroundColor: item.color,
+                display: 'inline-block',
+                marginRight: '3px',
+              }}></span>
+              {item.range}
+            </span>
+          ))}
+        </Flex>
+        <Flex>
+          {yearsOptions.map(year => (
+            <span
+              key={year}
+              style={{
+                display: 'inline-block',
+                padding: '0 8px',
+                cursor: 'pointer',
+                fontWeight: year === selectedYear ? '800' : '400'
+              }}
+              onClick={() => setSelectedYear(year)}
+            >
+              {year}
+            </span>
+          ))}
+        </Flex>
       </Flex>
     </>
   )