Add support for getting data OONI Data Kraken API

.env.development

@@ -3,6 +3,7 @@
 # Refer: https://nextjs.org/docs/basic-features/environment-variables
 
 NEXT_PUBLIC_OONI_API=https://ams-pg-test.ooni.org
+NEXT_PUBLIC_OONI_DATA_API=https://ams-pg-test.ooni.org
 NEXT_PUBLIC_USER_FEEDBACK_API=https://ams-pg-test.ooni.org
 NEXT_PUBLIC_EXPLORER_URL=http://localhost:3100
 

.env.production

@@ -3,6 +3,7 @@
 # Refer: https://nextjs.org/docs/basic-features/environment-variables
 
 NEXT_PUBLIC_OONI_API=https://api.ooni.io
+NEXT_PUBLIC_OONI_DATA_API=https://api.ooni.io
 NEXT_PUBLIC_USER_FEEDBACK_API=https://api.ooni.io
 NEXT_PUBLIC_SENTRY_DSN=https://[email protected]/1427510
 NEXT_PUBLIC_EXPLORER_URL=https://explorer.ooni.org

.env.test

@@ -3,6 +3,7 @@
 # Refer: https://nextjs.org/docs/basic-features/environment-variables
 
 NEXT_PUBLIC_OONI_API=https://api.ooni.io
+NEXT_PUBLIC_OONI_DATA_API=https://api.ooni.io
 NEXT_PUBLIC_USER_FEEDBACK_API=https://ams-pg-test.ooni.org
 NEXT_PUBLIC_EXPLORER_URL=https://explorer.test.ooni.org
 NEXT_PUBLIC_IS_TEST_ENV=1

components/Chart.js

@@ -18,7 +18,7 @@ const swrOptions = {
 export const MATLink = ({ query }) => {
   const intl = useIntl()
   const queryToSearchParams = new URLSearchParams(query)
-  const apiUrl = `${process.env.NEXT_PUBLIC_OONI_API}/api/v1/aggregation?${queryToSearchParams}`
+  const apiUrl = `${process.env.NEXT_PUBLIC_OONI_DATA_API}/api/v1/aggregation?${queryToSearchParams}`
 
   const showMATButton = !Array.isArray(query.test_name)
 

components/MATChart.js

@@ -22,7 +22,7 @@ const swrOptions = {
 
 const fetcher = (query) => {
   const qs = new URLSearchParams(query).toString()
-  const reqUrl = `${process.env.NEXT_PUBLIC_OONI_API}/api/v1/aggregation?${qs}`
+  const reqUrl = `${process.env.NEXT_PUBLIC_OONI_DATA_API}/api/v1/aggregation?${qs}`
   console.debug(`API Query: ${reqUrl}`)
   return axios
     .get(reqUrl)

components/aggregation/Debug.js

@@ -45,7 +45,7 @@ export const Debug = ({ query, children, ...rest }) => {
   const tableReshapeTime = (tableReshapeTimeRef.current.pre > -1) ? Number(tableReshapeTimeRef.current.post - tableReshapeTimeRef.current.pre).toFixed(3) : undefined
   const chartReshapeTime = (chartsReshapeTimeRef.current.pre > -1) ? Number(chartsReshapeTimeRef.current.post - chartsReshapeTimeRef.current.pre).toFixed(3) : undefined
   const renderTime = Number([...renderTimeRef.current].pop() - chartsReshapeTimeRef.current.post).toFixed(3)
-  const apiQuery = `${process.env.NEXT_PUBLIC_OONI_API}/api/v1/aggregation?${paramsToQuery(params)}`
+  const apiQuery = `${process.env.NEXT_PUBLIC_OONI_DATA_API}/api/v1/aggregation?${paramsToQuery(params)}`
 
   return (
     <Flex color='gray6' {...rest}>

components/aggregation/mat/CustomTooltip.js

@@ -3,6 +3,7 @@ import { Chip } from '@nivo/tooltip'
 import { useTheme } from '@nivo/core'
 import { Box, Flex, Text, Link, theme } from 'ooni-components'
 import NLink from 'next/link'
+import dynamic from 'next/dynamic'
 
 import { colorMap } from './colorMap'
 import { MdClear } from 'react-icons/md'
@@ -68,6 +69,40 @@ export const generateSearchQuery = (data, query) => {
   }
 }
 
+
+const ReactJson = dynamic(
+  () => import('react-json-view'),
+  { ssr: false }
+)
+
+
+const formatLoNI = (data) => {
+  let loni_down_map = {}
+  let loni_blocked_map = {}
+  Object.keys(data['loni_down_map']).forEach((orig_key) => {
+    const key = orig_key.split('.').slice(0, 2).join('.')
+    loni_down_map[key] = loni_down_map[key] | 0
+    loni_down_map[key] += data['loni_down_map'][orig_key]
+  })
+  console.log(data)
+  Object.keys(data['loni_blocked_map']).forEach((orig_key) => {
+    const key = orig_key.split('.').slice(0, 2).join('.')
+    loni_blocked_map[key] = loni_blocked_map[key] | 0
+    loni_blocked_map[key] += data['loni_blocked_map'][orig_key]
+  })
+
+  return (
+  <div>
+    <div>observation count: {data['observation_count']}</div>
+    <div>vp count: {data['vantage_point_count']}</div>
+    <div>down: {data['loni_down_value']}</div>
+    <div>ok: {data['loni_ok_value']}</div>
+    <div>blocked: {data['loni_blocked_value']}</div>
+    <div>down_map: <ReactJson collapsed={true} src={loni_down_map} name={null} indentWidth={2} /></div>
+    <div>blocked_map: <ReactJson collapsed={true} src={loni_blocked_map} name={null} indentWidth={2} /></div>
+  </div>
+  )
+}
 const CustomToolTip = React.memo(({ data, onClose, title, link = true }) => {
   const theme = useTheme()
   const intl = useIntl()
@@ -106,6 +141,9 @@ const CustomToolTip = React.memo(({ data, onClose, title, link = true }) => {
             </Flex>
           </Box>
         ))}
+        <Box fontSize={16}>
+          {formatLoNI(data)}
+        </Box>
       </Flex>
       {link &&
         <NLink passHref href={linkToMeasurements}>