Chart refactor

ooni · Nov 4, 2024 · deec60a · deec60a
1 parent ec20e61
commit deec60a
Show file tree

Hide file tree

Showing 12 changed files with 96 additions and 198 deletions.
diff --git a/components/Chart.js b/components/Chart.js
@@ -87,19 +87,15 @@ const Chart = ({ queryParams = {}, setState = null, headerOptions = {} }) => {
   return (
     <MATContextProvider {...queryParams}>
       <div className="flex flex-col">
-        {!chartData && !error ? (
-          <ChartSpinLoader />
-        ) : (
-          <>
-            <GridChart
-              data={chartData}
-              rowKeys={rowKeys}
-              rowLabels={rowLabels}
-              header={headerOptions}
-            />
-            {!!chartData?.size && <MATLink query={queryParams} />}
-          </>
-        )}
+        <>
+          <GridChart
+            data={chartData}
+            rowKeys={rowKeys}
+            rowLabels={rowLabels}
+            header={headerOptions}
+          />
+          {!!chartData?.size && <MATLink query={queryParams} />}
+        </>
         {error && (
           <DetailsBox
             collapsed={false}

diff --git a/components/ChartWrapper.tsx → components/ChartIntersectionObserver.tsx b/components/ChartWrapper.tsx → components/ChartIntersectionObserver.tsx
@@ -3,17 +3,17 @@ import { useRouter } from 'next/router'
 import { useMemo } from 'react'
 import { useInView } from 'react-intersection-observer'
 
-type ChartWrapperProps = {
+type ChartIntersectionObserverProps = {
   domain?: string
   testName?: string
   headerOptions?: object
 }
 
-const ChartWrapper = ({
+const ChartIntersectionObserver = ({
   domain,
   testName = 'web_connectivity',
   headerOptions,
-}: ChartWrapperProps) => {
+}: ChartIntersectionObserverProps) => {
   const router = useRouter()
 
   const {
@@ -44,16 +44,12 @@ const ChartWrapper = ({
   return (
     <div ref={ref}>
       {inView ? (
-        <Chart
-          // testName={testName}
-          queryParams={query}
-          headerOptions={headerOptions}
-        />
+        <Chart queryParams={query} headerOptions={headerOptions} />
       ) : (
         <ChartSpinLoader />
       )}
     </div>
   )
 }
 
-export default ChartWrapper
+export default ChartIntersectionObserver
diff --git a/components/DomainChart.js b/components/DomainChart.js
diff --git a/components/MATChart.js b/components/MATChart.js
@@ -87,35 +87,26 @@ const MATChart = ({ query, showFilters = true }) => {
     swrOptions,
   )
 
-  const showLoadingIndicator = useMemo(() => isValidating, [isValidating])
-
   return (
     <>
       <MATContextProvider queryParams={query}>
         {error && <NoCharts message={error?.info ?? JSON.stringify(error)} />}
-        {showLoadingIndicator ? (
-          // <h2>{intl.formatMessage({ id: 'General.Loading' })}</h2>
-          <ChartSpinLoader height={580} />
+        {isValidating ? (
+          <ChartSpinLoader height="500px" />
         ) : (
           <>
-            {data?.data?.result?.length > 0 ? (
-              <>
-                {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}
-                    showFilters={showFilters}
-                  />
-                )}
-              </>
-            ) : (
-              <NoCharts />
+            {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}
+                showFilters={showFilters}
+              />
             )}
           </>
         )}

diff --git a/components/ThematicPage.tsx b/components/ThematicPage.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 
-import ChartWrapper from 'components/ChartWrapper'
+import ChartIntersectionObserver from 'components/ChartIntersectionObserver'
 import FindingsSection from 'components/FindingsSection'
 import ReportsSection from 'components/ReportsSection'
 import {
@@ -88,7 +88,7 @@ const ThematicPage = ({
                 {filteredApps?.map((testName: string) => (
                   <div key={testName} className="my-6">
                     <AnchorLinkLower id={testName} />
-                    <ChartWrapper
+                    <ChartIntersectionObserver
                       testName={testName}
                       headerOptions={{ probe_cc: false }}
                     />
@@ -102,7 +102,7 @@ const ThematicPage = ({
               {filteredDomains?.map((domain: string) => (
                 <div key={domain} className="my-6">
                   <AnchorLinkLower id={domain} />
-                  <ChartWrapper
+                  <ChartIntersectionObserver
                     domain={domain}
                     testName="web_connectivity"
                     headerOptions={{ probe_cc: false, test_name: false }}

diff --git a/components/aggregation/mat/ChartHeader.js b/components/aggregation/mat/ChartHeader.js
@@ -84,6 +84,7 @@ export const ChartHeader = ({ options: opts }) => {
     probe_cc: true,
     test_name: true,
     legend: true,
+    logo: true,
     ...opts,
   }
 
@@ -129,7 +130,7 @@ export const ChartHeader = ({ options: opts }) => {
             />
           </div>
         )}
-        <OONILogo className="opacity-50" height="32px" />
+        {options.logo && <OONILogo className="opacity-50" height="32px" />}
       </div>
     </>
   )

diff --git a/components/aggregation/mat/GridChart.js b/components/aggregation/mat/GridChart.js
@@ -1,5 +1,6 @@
 import { Container } from '@nivo/core'
 import { Tooltip, TooltipProvider } from '@nivo/tooltip'
+import { ChartSpinLoader } from 'components/Chart'
 import PropTypes from 'prop-types'
 import { memo, useMemo, useRef } from 'react'
 import { ChartHeader } from './ChartHeader'
@@ -118,15 +119,11 @@ const GridChart = ({
     gridHeight = Math.min(XAXIS_HEIGHT + rowCount * ROW_HEIGHT, GRID_MAX_HEIGHT)
   }
 
-  if (!data || data.size < 1) {
-    return <NoCharts />
-  }
-
   // To correctly align with the rows, generate a data row with only x-axis values
   // e.g [ {measurement_start_day: '2022-01-01'}, {measurement_start_day: '2022-01-02'}... ]
-  const xAxisData = data
-    .get(rowKeys[0])
-    .map((d) => ({ [query.axis_x]: d[query.axis_x] }))
+  const xAxisData = data?.size
+    ? data.get(rowKeys[0]).map((d) => ({ [query.axis_x]: d[query.axis_x] }))
+    : null
 
   const rowHeight = noLabels ? 500 : ROW_HEIGHT
 
@@ -135,38 +132,46 @@ const GridChart = ({
       <TooltipProvider container={tooltipContainer}>
         <div className="flex flex-col" ref={tooltipContainer}>
           <div className="flex flex-col">
-            <ChartHeader options={header} />
-            {/* Fake axis on top of list. Possible alternative: dummy chart with axis and valid tickValues */}
-            {/* Use a virtual list only for higher count of rows */}
-            {rowsToRender.length < 10 ? (
-              <div
-                className="outerListElement flex flex-col"
-                style={{
-                  height: gridHeight,
-                }}
-              >
-                {!noLabels && <XAxis data={xAxisData} />}
-                {rowsToRender.map((rowKey, index) => (
-                  <RowChart
-                    key={rowKey}
-                    rowIndex={index}
-                    data={data.get(rowKey)}
+            <ChartHeader
+              options={{ ...header, logo: !!data?.size, legend: !!data?.size }}
+            />
+            {!data && <ChartSpinLoader />}
+            {data?.size === 0 && <NoCharts />}
+            {data?.size > 0 && (
+              // Fake axis on top of list. Possible alternative: dummy chart with axis and valid tickValues
+              // Use a virtual list only for higher count of rows
+              <>
+                {rowsToRender.length < 10 ? (
+                  <div
+                    className="outerListElement flex flex-col"
+                    style={{
+                      height: gridHeight,
+                    }}
+                  >
+                    {!noLabels && <XAxis data={xAxisData} />}
+                    {rowsToRender.map((rowKey, index) => (
+                      <RowChart
+                        key={rowKey}
+                        rowIndex={index}
+                        data={data.get(rowKey)}
+                        indexBy={indexBy}
+                        height={rowHeight}
+                        label={rowLabels[rowKey]}
+                      />
+                    ))}
+                  </div>
+                ) : (
+                  <VirtualRows
+                    xAxis={!noLabels && <XAxis data={xAxisData} />}
+                    data={data}
+                    rows={rowsToRender}
+                    rowLabels={rowLabels}
+                    gridHeight={gridHeight}
                     indexBy={indexBy}
-                    height={rowHeight}
-                    label={rowLabels[rowKey]}
+                    tooltipIndex={tooltipIndex}
                   />
-                ))}
-              </div>
-            ) : (
-              <VirtualRows
-                xAxis={!noLabels && <XAxis data={xAxisData} />}
-                data={data}
-                rows={rowsToRender}
-                rowLabels={rowLabels}
-                gridHeight={gridHeight}
-                indexBy={indexBy}
-                tooltipIndex={tooltipIndex}
-              />
+                )}
+              </>
             )}
           </div>
         </div>

diff --git a/components/aggregation/mat/NoCharts.js b/components/aggregation/mat/NoCharts.js
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl'
 export const NoCharts = ({ message }) => {
   return (
     <div className="flex flex-col justify-center h-[100%]">
-      <div className="text-2xl font-bold mb-2">
+      <div className="text-xl font-bold mb-2">
         <FormattedMessage id="MAT.Charts.NoData.Title" />
       </div>
       <div className="p-8 text-center bg-gray-200 font-bold">

diff --git a/components/aggregation/mat/TableView.js b/components/aggregation/mat/TableView.js
@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useIntl } from 'react-intl'
 
 import Filters from './Filters'
@@ -29,11 +29,11 @@ const prepareDataforTable = (data, query, locale) => {
       measurement_count: 0,
     }
 
-    rowData.forEach((d) => {
-      countKeys.forEach((countKey) => {
+    for (const d of rowData) {
+      for (const countKey of countKeys) {
         row[countKey] = row[countKey] + d[countKey]
-      })
-    })
+      }
+    }
 
     table.push(row)
   }