replaced older IM and circumvention charts (#785)

Signed-off-by: GermaVinsmoke <[email protected]>
Co-authored-by: Maja Komel <[email protected]>

components/network/Chart.js → components/Chart.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
-import { useIntl } from 'react-intl'
 import { useRouter } from 'next/router'
+import { FormattedMessage } from 'react-intl'
 import { Heading, Box, Flex } from 'ooni-components'
 import useSWR from 'swr'
 import GridChart, { prepareDataForGridChart } from 'components/aggregation/mat/GridChart'
@@ -14,33 +14,16 @@ const swrOptions = {
 }
 
 const Chart = React.memo(function Chart({testName, testGroup = null, title, queryParams = {}}) {
-  const intl = useIntl()
-  const router = useRouter()
-  const { query: {since, until, asn} } = router
-
   const name = testName || testGroup.name
 
-  const params = useMemo(() => ({
-    ...queryParams,
-    axis_x: 'measurement_start_day'
-  }), [queryParams])
-
-  const query = useMemo(() => ({
-    ...params,
-    probe_asn: asn,
-    since: since,
-    until: until,
-    ...testName && {test_name: testName}
-  }), [since, until, asn, params, testName])
-
   const apiQuery = useMemo(() => {
-    const qs = new URLSearchParams(query).toString()
+    const qs = new URLSearchParams(queryParams).toString()
     return qs
-  }, [query])
+  }, [queryParams])
 
   const { data, error } = useSWR(
-    testGroup ? { query: apiQuery, 
-      testNames: testGroup.tests, 
+    testGroup ? { query: apiQuery,
+      testNames: testGroup.tests,
       groupKey: name
     } : apiQuery,
     testGroup ? MATMultipleFetcher : MATFetcher,
@@ -51,23 +34,23 @@ const Chart = React.memo(function Chart({testName, testGroup = null, title, quer
       return [null, 0]
     }
     let chartData = testGroup ? data : data.data
-    const graphQuery = testGroup ? {...query, axis_y: name} : query
-    const [reshapedData, rowKeys, rowLabels] = prepareDataForGridChart(chartData, graphQuery, intl.locale)
+    const graphQuery = testGroup ? {...queryParams, axis_y: name} : queryParams
+    const [reshapedData, rowKeys, rowLabels] = prepareDataForGridChart(chartData, graphQuery)
     return [reshapedData, rowKeys, rowLabels]
-  }, [data, query, name, testGroup, intl])
+  }, [data, queryParams, name, testGroup])
 
   const headerOptions = { probe_cc: false, subtitle: false }
 
   return (
-    <MATContextProvider key={name} test_name={name} {...params}>
+    <MATContextProvider key={name} test_name={name} {...queryParams}>
       <Flex flexDirection='column' mb={60}>
         <Box><Heading h={3} mt={40} mb={20}>{title}</Heading></Box>
         <Box>
           {(!chartData && !error) ? (
-            <div>{intl.formatMessage({id: 'General.Loading'})}</div>
+            <FormattedMessage id="General.Loading" />
           ) : (
             chartData === null || chartData.length === 0 ? (
-              <Heading h={5}>{intl.formatMessage({id: 'General.NoData'})}</Heading>
+              <Heading h={5}><FormattedMessage id="General.NoData" /></Heading>
             ) : (
               <GridChart
                 data={chartData}
@@ -82,7 +65,7 @@ const Chart = React.memo(function Chart({testName, testGroup = null, title, quer
         {error &&
           <DetailsBox collapsed={false} content={<>
             <details>
-              <summary><span>{intl.formatMessage({id: 'General.Error'})}: {error.message}</span></summary>
+              <summary><span>Error: {error.message}</span></summary>
               <Box as='pre'>
                 {JSON.stringify(error, null, 2)}
               </Box>
@@ -95,4 +78,4 @@ const Chart = React.memo(function Chart({testName, testGroup = null, title, quer
   )
 })
 
-export default Chart
+export default Chart

components/aggregation/mat/XAxis.js

@@ -45,4 +45,4 @@ export const XAxis = ({ data }) => {
       </Box>
     </StyledFlex>
   )
-}
+}

components/country/Apps.js

@@ -1,38 +1,64 @@
-import React from 'react'
-import { FormattedMessage } from 'react-intl'
+import { useMemo } from 'react'
+import { FormattedMessage, useIntl } from 'react-intl'
 import { Text } from 'ooni-components'
 
 import SectionHeader from './SectionHeader'
 import { SimpleBox } from './boxes'
-// import PeriodFilter from './PeriodFilter'
-import AppsStatsGroup from './AppsStats'
-import AppsStatsCircumvention from './AppsStatsCircumvention'
+import Chart from 'components/Chart'
 import FormattedMarkdown from '../FormattedMarkdown'
+import { useRouter } from 'next/router'
+
+const messagingTestNames = ['signal', 'telegram', 'whatsapp', 'facebook_messenger']
+const circumventionTestNames = ['vanilla_tor', 'psiphon', 'tor', 'torsf']
+
+const ChartsContainer = () => {
+  const intl = useIntl()
+  const router = useRouter()
+  const { query: { since, until, countryCode } } = router
+
+  const queryMessagingApps = useMemo(() => ({
+    axis_x: 'measurement_start_day',
+    probe_cc: countryCode,
+    since,
+    until,
+  }), [countryCode, since, until])
+
+  const queryCircumventionTools = useMemo(() => ({
+    axis_x: 'measurement_start_day',
+    probe_cc: countryCode,
+    since,
+    until,
+  }), [countryCode, since, until])
+
+  return (
+    <>
+      <Chart
+        testGroup={{name: 'messaging_apps', tests: messagingTestNames}}
+        title={intl.formatMessage({id: 'Tests.Groups.Instant Messagging.Name'})}
+        queryParams={queryMessagingApps}
+      />
+      <Chart
+        testGroup={{name: 'circumvention_tools', tests: circumventionTestNames}}
+        title={intl.formatMessage({id: 'Tests.Groups.Circumvention.Name'})}
+        queryParams={queryCircumventionTools}
+      />
+    </>
+  )
+}
 
 const AppsSection = () => (
   <>
     <SectionHeader>
       <SectionHeader.Title name='apps'>
         <FormattedMessage id='Country.Heading.Apps' />
       </SectionHeader.Title>
-      {/* <Box ml='auto'>
-        <PeriodFilter onChange={onPeriodChange} />
-      </Box> */}
     </SectionHeader>
     <SimpleBox>
       <Text fontSize={16}>
         <FormattedMarkdown id='Country.Apps.Description' />
       </Text>
     </SimpleBox>
-    {/* App-wise graphs */}
-    <AppsStatsGroup
-      title={<FormattedMessage id='Country.Overview.TestsByClass.InstantMessaging' />}
-      testGroup='im'
-    />
-    {<AppsStatsCircumvention
-      title={<FormattedMessage id='Country.Overview.TestsByClass.Circumvention'/>}
-      testGroup='circumvention'
-    />}
+    <ChartsContainer />
   </>
 )