Refactor

ooni · Aug 18, 2023 · b55a298 · b55a298
1 parent 230baa8
commit b55a298
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 49 deletions.
diff --git a/components/Chart.js b/components/Chart.js
@@ -88,7 +88,6 @@ const Chart = React.memo(function Chart({testGroup = null, queryParams = {}, set
                 data={chartData}
                 rowKeys={rowKeys}
                 rowLabels={rowLabels}
-                isGrouped={false}
               />
               {!!chartData?.size && <MATLink query={queryParams} />}
             </>

diff --git a/components/DomainChart.js b/components/DomainChart.js
@@ -65,7 +65,6 @@ const Chart = React.memo(function Chart({testGroup = null, queryParams = {}, set
                 data={chartData}
                 rowKeys={rowKeys}
                 rowLabels={rowLabels}
-                isGrouped={false}
               />
               {!!chartData?.size && <MATLink query={linkParams} />}
             </>

diff --git a/components/MATChart.js b/components/MATChart.js
@@ -10,8 +10,9 @@ import { axiosResponseTime } from 'components/axios-plugins'
 import axios from 'axios'
 import { MATContextProvider } from 'components/aggregation/mat/MATContext'
 import { useIntl } from 'react-intl'
+import { ResizableBox } from './aggregation/mat/Resizable'
+import FormattedMarkdown from './FormattedMarkdown'
 
-const baseURL = process.env.NEXT_PUBLIC_OONI_API
 axiosResponseTime(axios)
 
 const swrOptions = {
@@ -42,7 +43,7 @@ const fetcher = (query) => {
     })
 }
 
-export const MATChartReportWrapper = ({link}) => {
+export const MATChartReportWrapper = ({link, caption}) => {
   let searchParams
   const today = dayjs.utc().add(1, 'day')
   const monthAgo = dayjs.utc(today).subtract(1, 'month')
@@ -64,29 +65,39 @@ export const MATChartReportWrapper = ({link}) => {
     ...searchParams,
   }
 
-  return searchParams ? <MATChart query={query} /> : <bold>WRONG LINK FORMAT</bold>
+  return searchParams ? 
+    <>
+      <MATChart query={query} />
+      {caption && <FormattedMarkdown>{caption}</FormattedMarkdown>}
+    </> : <bold>WRONG LINK FORMAT</bold>
 }
 
 const MATChart = ({ query }) => {
   const intl = useIntl()
   const { data, error, isValidating } = useSWR(query ? query : null, fetcher, swrOptions)
 
   const showLoadingIndicator = useMemo(() => isValidating, [isValidating])
-
   return (
-    <Box my={3}>
+    <Box>  
       <MATContextProvider queryParams={query}>
         {error && <NoCharts message={error?.info ?? JSON.stringify(error)} />}
-        <Box sx={{ minHeight: '500px' }}>
-          {showLoadingIndicator && (
+        <Box>
+          {showLoadingIndicator ? (
             <Box>
               <h2>{intl.formatMessage({ id: 'General.Loading' })}</h2>
             </Box>
-          )}
-          {data && data.data.dimension_count == 0 && <FunnelChart data={data.data.result} />}
-          {data && data.data.dimension_count == 1 && <StackedBarChart data={data} query={query} />}
-          {data && data.data.dimension_count > 1 && (
-            <TableView data={data.data.result} query={query} />
+          ) : (
+            <>
+              {data?.data?.result?.length > 0 ? 
+                <Box sx={{ minHeight: '500px' }}>
+                  {data && data.data.dimension_count == 0 && <FunnelChart data={data.data.result} />}
+                  {data && data.data.dimension_count == 1 && <StackedBarChart data={data.data.result} query={query} />}
+                  {data && data.data.dimension_count > 1 && (
+                    <TableView data={data.data.result} query={query} />
+                  )}
+                </Box> : <ResizableBox><NoCharts /></ResizableBox>
+              }
+            </>
           )}
         </Box>
       </MATContextProvider>

diff --git a/components/aggregation/mat/GridChart.js b/components/aggregation/mat/GridChart.js
@@ -78,9 +78,6 @@ export const prepareDataForGridChart = (data, query, locale) => {
  * 
  * selectedRows - a subset of `rowKeys` representing which rows to render in the grid
  * 
- * isGrouped - Whether the data is already grouped by y-axis value
- * If `false`, `reshapeChartData()` will group the data as required
- *
  * height - uses a specific height provided by the container (e.g ResizableBox)
  * If not speicied, it calculates a height based on the number of rows, capped
  * at GRID_MAX_HEIGHT, which allows <VirtualRows> to render a subset of the data
@@ -89,7 +86,7 @@ export const prepareDataForGridChart = (data, query, locale) => {
  * header - an element showing some summary information on top of the charts
 }
 */
-const GridChart = ({ data, rowKeys, rowLabels, isGrouped = true, height = 'auto', header, selectedRows = null, noLabels = false }) => {
+const GridChart = ({ data, rowKeys, rowLabels, height = 'auto', header, selectedRows = null, noLabels = false }) => {
 
   // Fetch query state from context instead of router
   // because some params not present in the URL are injected in the context
@@ -178,7 +175,6 @@ GridChart.propTypes = {
   rowKeys: PropTypes.arrayOf(PropTypes.string),
   rowLabels: PropTypes.objectOf(PropTypes.string),
   selectedRows: PropTypes.arrayOf(PropTypes.string),
-  isGrouped: PropTypes.bool,
   height: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number

diff --git a/components/aggregation/mat/Resizable.js b/components/aggregation/mat/Resizable.js
@@ -1,29 +1,31 @@
-import React, { useEffect, useCallback, useState } from 'react'
 import { Box } from 'ooni-components'
 import styled from 'styled-components'
-import { useResizeDetector } from 'react-resize-detector'
+// import { useResizeDetector } from 'react-resize-detector'
 
 export const ResizableYBox = styled(Box)`
   position: relative;
-  border: 2px solid ${props => props.theme.colors.gray1};
+  // border: 2px solid ${props => props.theme.colors.gray1};
   /* Disabled resizability because of the onResize loop bug */
   /* resize: vertical; */
-  min-height: ${props => props.minHeight ?? 250}px;
+  // min-height: ${props => props.minHeight ?? 250}px;
   /* max-height: 100vh; */
-  padding: 16px;
+  // padding: 16px;
 `
 
 export const ResizableBox = ({ children, onResize, ...props}) => {
-  const { width, height, ref } = useResizeDetector({
-    onResize,
-    handleWidth: false,
-    skipOnMount: true,
-    refreshMode: 'debounce',
-    refreshRate: 500,
-  })
+  // const { width, height, ref } = useResizeDetector({
+  //   onResize,
+  //   handleWidth: false,
+  //   skipOnMount: true,
+  //   refreshMode: 'debounce',
+  //   refreshRate: 500,
+  // })
   return (
-    <ResizableYBox ref={ref} {...props}>
+    // <ResizableYBox ref={ref} {...props}>
+    //   {children}
+    // </ResizableYBox>
+    <Box>
       {children}
-    </ResizableYBox>
+    </Box>
   )
 }
diff --git a/components/aggregation/mat/RowChart.js b/components/aggregation/mat/RowChart.js
@@ -46,10 +46,10 @@ const chartProps1D = (query, intl) => ({
     round: false
   },
   margin: {
-    top: 50,
-    right: 30,
+    top: 30,
+    right: 20,
     bottom: 100,
-    left: 80
+    left: 70
   },
   padding: 0.3,
   borderColor: { from: 'color', modifiers: [ [ 'darker', 1.6 ] ] },

diff --git a/components/aggregation/mat/StackedBarChart.js b/components/aggregation/mat/StackedBarChart.js
@@ -9,15 +9,15 @@ import { NoCharts } from './NoCharts'
 
 const ChartContainer = styled(Flex)`
   position: relative;
-  border: 2px solid ${props => props.theme.colors.gray1};
-  padding: 16px;
+  // border: 2px solid ${props => props.theme.colors.gray1};
+  // padding: 16px;
 `
 
 export const StackedBarChart = ({ data, query }) => {
   const intl = useIntl()
 
   try { 
-    const [gridData, rows ] = prepareDataForGridChart(data.data.result, query, intl.locale)
+    const [gridData, rows ] = prepareDataForGridChart(data, query, intl.locale)
 
     return (
       <ChartContainer flexDirection={['column']}>

diff --git a/components/aggregation/mat/TableView.js b/components/aggregation/mat/TableView.js
@@ -71,7 +71,6 @@ const TableView = ({ data, query }) => {
           selectedRows={dataForCharts}
           rowKeys={rowKeys}
           rowLabels={rowLabels}
-          isGrouped={true}
         />
       </ResizableBox>
     </Flex>

diff --git a/components/dashboard/Charts.js b/components/dashboard/Charts.js
@@ -102,7 +102,6 @@ const Chart = React.memo(function Chart({ testName }) {
             data={chartData}
             rowKeys={rowKeys}
             rowLabels={rowLabels}
-            isGrouped={false}
             header={headerOptions}
           />
         )}

diff --git a/components/incidents/ReportDisplay.js b/components/incidents/ReportDisplay.js
@@ -1,7 +1,10 @@
-import { Heading, Flex, Box } from 'ooni-components'
+import { Heading, Flex, Box, Text } from 'ooni-components'
 import { Badge } from 'components/Badge'
+import Flag from 'components/Flag'
 import Markdown from 'markdown-to-jsx'
 import { MATChartReportWrapper } from 'components/MATChart'
+import { getLocalisedRegionName } from '../../utils/i18nCountries'
+import { useIntl } from 'react-intl'
 
 const FormattedMarkdown = ({ children }) => {
   return (
@@ -19,14 +22,29 @@ const FormattedMarkdown = ({ children }) => {
   )
 }
 
+const formatDate = (date, locale) => {
+ return new Intl.DateTimeFormat(locale, { dateStyle: 'long' }).format(new Date(date))
+}
+
 const ReportDisplay = ({ report }) => {
+  const intl = useIntl()
+
   return (
     <>
-      <Heading h={1}>{report?.title}</Heading>
+      <Heading h={1} mt={4} mb={3} sx={{borderBottom: '1px solid', borderColor: 'gray3'}}>{report?.title}</Heading>
       {/* <p>Published: {report.published}</p> */}
-      <p>Created by {report?.reported_by}</p>
-      <p>Start time: {report?.start_time}</p>
-      <p>End time: {report?.end_time}</p>
+      {/* {!!report?.CCs?.length && <p>Countries: {report.CCs.join(', ')}</p>} */}
+      {/* {!!report?.ASNs?.length && <p>ASNs: {report.ASNs.join(', ')}</p>} */}
+      {!!report?.CCs?.length && (
+        <Flex alignItems="center">
+          <Flag countryCode={report.CCs[0]} size={32} />
+          <Heading h={3} ml={2}>
+            {getLocalisedRegionName(report.CCs[0], intl.locale)} {!!report?.ASNs?.length && <>({report.ASNs.map((as) => (`AS${as}`)).join(', ')})</>}
+          </Heading>
+        </Flex>
+      )}
+      <p>{formatDate(report?.start_time, intl.locale)} - {report?.end_time ? formatDate(report?.end_time, intl.locale) : 'ongoing'}</p>
+      <p>created by {report?.reported_by}</p>
       {!!report?.tags?.length && (
         <Flex>
           {report.tags.map((tag) => (
@@ -36,8 +54,6 @@ const ReportDisplay = ({ report }) => {
           ))}
         </Flex>
       )}
-      {!!report?.ASNs?.length && <p>ASNs: {report.ASNs.join(', ')}</p>}
-      {!!report?.CCs?.length && <p>Countries: {report.CCs.join(', ')}</p>}
       {!!report?.domains?.length && <p>Domains: {report.domains.join(', ')}</p>}
       <Box mt={3}>{report?.text && <FormattedMarkdown>{report.text}</FormattedMarkdown>}</Box>
     </>

diff --git a/components/measurement/nettests/WebConnectivity.js b/components/measurement/nettests/WebConnectivity.js
@@ -14,7 +14,6 @@ import {
 import { Tick, Cross } from 'ooni-components/icons'
 import deepmerge from 'deepmerge'
 import styled from 'styled-components'
-import dayjs from 'services/dayjs'
 
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl'