fix(analytics): 🐛 indivdual chart options are interfering with other …

…charts TItles from one chart are applied in another one.
sledilnik · Oct 15, 2024 · 4d05037 · 4d05037
1 parent f5283c4
commit 4d05037
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 46 deletions.
diff --git a/src/pages/Analytics/ChartCard/ChartCard.module.css b/src/pages/Analytics/ChartCard/ChartCard.module.css
@@ -1,5 +1,7 @@
 .ChartCard {
-  padding: 2em;
+  --inline-padding: 1.25em;
+
+  padding-block: 1em;
   background: #ffffff;
   border-radius: 6px;
 }
@@ -22,6 +24,7 @@
   align-items: center;
   border-bottom: 1px solid #e6e6e6;
   margin-bottom: 2em;
+  padding-inline: var(--inline-padding);
 }
 
 .ChartSeriesButtons {
@@ -30,4 +33,9 @@
   flex-wrap: wrap;
   margin-bottom: 1em;
   padding-block: 0.2em;
+  padding-inline: var(--inline-padding);
+}
+
+.ChartFigure > figcaption {
+  padding-inline: var(--inline-padding);
 }
diff --git a/src/pages/Analytics/ChartCard/index.jsx b/src/pages/Analytics/ChartCard/index.jsx
@@ -8,24 +8,15 @@ import PropTypes from 'prop-types';
 import { useEffect, useRef, useState } from 'react';
 import Highcharts from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
-import drilldown from 'highcharts/modules/drilldown';
-import exporting from 'highcharts/modules/exporting';
-// import accessibility from 'highcharts/modules/accessibility';
+
 import * as Icons from 'components/Shared/Icons';
 import { getIsRequestFullscreenSupported } from 'utils';
-import { baseOptions } from '../Charts/options';
 import CustomSeriesButtons from '../CustomSeriesButtons';
 import Popover from '../CustomPopover';
 
 import styles from './ChartCard.module.css';
 import stylesIconButton from '../IconButton.module.css';
 
-// accessibility(Highcharts);
-exporting(Highcharts);
-drilldown(Highcharts);
-
-Highcharts.setOptions(baseOptions);
-
 /**
  * ChartCard component renders a card with a chart header and children content.
  *
@@ -35,6 +26,7 @@ Highcharts.setOptions(baseOptions);
  * @returns {JSX.Element} The rendered ChartCard component.
  */
 const ChartCard = function ChartCard({ id = undefined, options }) {
+  const [chartOptions] = useState(options);
   const chartRef = useRef(null);
   const chart = chartRef.current?.chart;
   const [, setInit] = useState(false);
@@ -83,11 +75,11 @@ const ChartCard = function ChartCard({ id = undefined, options }) {
           <Icons.Icon name="VerticalDots" aria-label="more actions" />
         </Popover>
       </header>
-      <figure>
+      <figure className={styles.ChartFigure}>
         <HighchartsReact
           ref={chartRef}
           highcharts={Highcharts}
-          options={options}
+          options={chartOptions}
           aria-label={chart?.title}
         />
         <div className={styles.ChartSeriesButtons}>

diff --git a/src/pages/Analytics/Charts/examples/ColumnChartExample.jsx b/src/pages/Analytics/Charts/examples/ColumnChartExample.jsx
@@ -2,7 +2,7 @@ import loMerge from 'lodash/merge';
 import PropTypes from 'prop-types';
 
 import ChartCard from '../../ChartCard';
-import { commonOptions } from '../options';
+import { commonOptions } from '../../HighchartsOptions/options';
 
 /**
  * @typedef {import('highcharts').Options} HighchartsOptions
@@ -17,8 +17,11 @@ export const columnChartOptions = {
     {
       chart: { type: 'column' },
       title: { text: 'Column' },
-      subtitle: { text: 'Subtitle' },
-      caption: { text: 'Caption' },
+      subtitle: { text: 'Column Subtitle' },
+      caption: { text: 'Column Caption' },
+      legend: {
+        enabled: false,
+      },
     },
   ),
   series: [

diff --git a/src/pages/Analytics/Charts/examples/DrilldownChartExample.jsx b/src/pages/Analytics/Charts/examples/DrilldownChartExample.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import loMerge from 'lodash/merge';
 
 import ChartCard from '../../ChartCard';
-import { commonOptions } from '../options';
+import { commonOptions } from '../../HighchartsOptions/options';
 
 /**
  * @typedef {import('highcharts').Options} HighchartsOptions
@@ -23,6 +23,9 @@ const drilldownChartOptions = {
         text: 'Click the slices to view versions. ',
       },
       caption: { text: 'Caption' },
+      legend: {
+        enabled: false,
+      },
       accessibility: {
         announceNewData: {
           enabled: true,

diff --git a/src/pages/Analytics/Charts/examples/LineChartExample.jsx b/src/pages/Analytics/Charts/examples/LineChartExample.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import loMerge from 'lodash/merge';
 
 import ChartCard from '../../ChartCard';
-import { commonOptions } from '../options';
+import { commonOptions } from '../../HighchartsOptions/options';
 
 /**
  * @typedef {import('highcharts').Options} HighchartsOptions
@@ -17,8 +17,11 @@ export const lineChartOptions = {
     {
       chart: { type: 'line' },
       title: { text: 'Line' },
-      subtitle: { text: 'Subtitle' },
-      caption: { text: 'Caption' },
+      subtitle: { text: 'Line Subtitle' },
+      caption: { text: 'Line Caption' },
+      legend: {
+        enabled: false,
+      },
     },
   ),
   series: [

diff --git a/src/pages/Analytics/Charts/examples/SloUEMapExample.jsx b/src/pages/Analytics/Charts/examples/SloUEMapExample.jsx
@@ -5,7 +5,7 @@ import sloUEMap from 'assets/maps/UE.geo.json';
 
 // import theme from 'const/theme';
 import MapCard from '../../MapCard';
-import { commonOptions } from '../options';
+import { commonOptions } from '../../HighchartsOptions/options';
 
 /**
  * @typedef {import('highcharts/highmaps').Options} HighMapsOptions
@@ -20,13 +20,13 @@ export const SloUEMapOptions = {
     {
       chart: { map: sloUEMap },
       title: { text: 'Slo UE Map' },
-      subtitle: { text: 'Subtitle' },
-      caption: { text: 'Caption' },
+      subtitle: { text: 'Slo UE Subtitle' },
+      caption: { text: 'Slo UE Caption' },
       legend: {
         enabled: true,
         align: 'right',
         verticalAlign: 'bottom',
-        layout: 'horizontal',
+        layout: 'vertical',
         floating: true,
         useHTML: true,
       },
@@ -49,8 +49,15 @@ export const SloUEMapOptions = {
               chart: {
                 height: `${(9 / 16) * 100}%`, // 16:9 ratio,
               },
-              legend: {
-                layout: 'vertical',
+            },
+          },
+          {
+            condition: {
+              maxWidth: 670,
+            },
+            chartOptions: {
+              chart: {
+                height: 400, // 16:9 ratio,
               },
             },
           },

diff --git a/src/pages/Analytics/HighchartsOptions/index.js b/src/pages/Analytics/HighchartsOptions/index.js
@@ -0,0 +1,18 @@
+import Highcharts from 'highcharts';
+import HighMaps from 'highcharts/highmaps';
+
+import drilldown from 'highcharts/modules/drilldown';
+import exporting from 'highcharts/modules/exporting';
+import { baseOptions } from './options';
+// import accessibility from 'highcharts/modules/accessibility';
+
+// accessibility(Highcharts);
+exporting(Highcharts);
+drilldown(Highcharts);
+
+// accessibility(Highcharts);
+exporting(HighMaps);
+drilldown(HighMaps);
+
+Highcharts.setOptions(baseOptions);
+HighMaps.setOptions(baseOptions);
diff --git a/src/pages/Analytics/Charts/options.js → ...es/Analytics/HighchartsOptions/options.js b/src/pages/Analytics/Charts/options.js → ...es/Analytics/HighchartsOptions/options.js
@@ -60,6 +60,7 @@ export const baseOptions = {
   chart: {
     className: 'font-sans',
   },
+  legend: { enabled: false },
 };
 
 export const srOnly = {

diff --git a/src/pages/Analytics/Layout.module.css b/src/pages/Analytics/Layout.module.css
@@ -4,7 +4,7 @@
 }
 .AnalyticsLayout,
 .FullWidth {
-  --minimum-content-padding: 2rem;
+  --minimum-content-padding: 0.8rem;
 
   /** TRACK WIDTHS **/
   --full-max-width: 1fr;
@@ -35,6 +35,10 @@
     [popout-end]
     var(--full)
     [full-end];
+
+  @media screen and (width > 599px) {
+    --minimum-content-padding: 1.5rem;
+  }
 }
 
 /** CLASSES **/

diff --git a/src/pages/Analytics/MapCard/index.jsx b/src/pages/Analytics/MapCard/index.jsx
@@ -8,26 +8,15 @@ import PropTypes from 'prop-types';
 import { useEffect, useRef, useState } from 'react';
 import HighMaps from 'highcharts/highmaps';
 import HighchartsReact from 'highcharts-react-official';
-// import loMerge from 'lodash/merge';
-import drilldown from 'highcharts/modules/drilldown';
-import exporting from 'highcharts/modules/exporting';
-// import accessibility from 'highcharts/modules/accessibility';
 
 import * as Icons from 'components/Shared/Icons';
 import { getIsRequestFullscreenSupported } from 'utils';
-import { baseOptions } from '../Charts/options';
 import CustomSeriesButtons from '../CustomSeriesButtons';
 import Popover from '../CustomPopover';
 
 import styles from '../ChartCard/ChartCard.module.css';
 import stylesIconButton from '../IconButton.module.css';
 
-// accessibility(Highcharts);
-exporting(HighMaps);
-drilldown(HighMaps);
-
-HighMaps.setOptions(baseOptions);
-
 /**
  * MapCard component renders a HighMaps chart with optional series buttons and fullscreen/print functionality.
  *
@@ -39,6 +28,7 @@ HighMaps.setOptions(baseOptions);
  * @returns {JSX.Element} The rendered MapCard component.
  */
 const MapCard = function MapCard({ id = undefined, options, showSeriesButtons = false }) {
+  const [chartOptions] = useState(options);
   const chartRef = useRef(null);
   const chart = chartRef.current?.chart;
   const [, setInit] = useState(false);
@@ -87,12 +77,12 @@ const MapCard = function MapCard({ id = undefined, options, showSeriesButtons =
           <Icons.Icon name="VerticalDots" aria-label="more actions" />
         </Popover>
       </header>
-      <figure>
+      <figure className={styles.ChartFigure}>
         <HighchartsReact
           ref={chartRef}
           highcharts={HighMaps}
           constructorType="mapChart"
-          options={options}
+          options={chartOptions}
           aria-label={chart?.title}
         />
         {showSeriesButtons ? (

diff --git a/src/pages/Analytics/Sidebar/index.jsx b/src/pages/Analytics/Sidebar/index.jsx
@@ -32,6 +32,9 @@ const Sidebar = function Sidebar() {
           <a href="#drilldown-chart" onClick={closeModal} className="link">
             Drilldown chart
           </a>
+          <a href="#slo-ue-map" onClick={closeModal} className="link">
+            Slo UE map
+          </a>
         </div>
       </Modal>
     </aside>

diff --git a/src/pages/Analytics/index.jsx b/src/pages/Analytics/index.jsx
@@ -4,16 +4,17 @@ import { useParams } from 'react-router';
 import * as SEO from 'components/SEO';
 import { t } from 'i18next';
 
+import './HighchartsOptions';
 import RenderOnViewportEntry from 'components/RenderOnViewportEntry';
 import Footer from './Footer';
 import Sidebar from './Sidebar';
 
 import styles from './Layout.module.css';
-import SloUEMapExample from './Charts/examples/SloUEMapExample';
 
 const LineChartExample = lazy(() => import('./Charts/examples/LineChartExample'));
 const ColumnChartExample = lazy(() => import('./Charts/examples/ColumnChartExample'));
 const DrilldownChartExample = lazy(() => import('./Charts/examples/DrilldownChartExample'));
+const SloUEMapExample = lazy(() => import('./Charts/examples/SloUEMapExample'));
 
 const Analytics = function Analytics() {
   const { lng } = useParams();
@@ -27,13 +28,35 @@ const Analytics = function Analytics() {
           {t('SEO.title.analytics')}
         </h1>
         <Sidebar />
-        <RenderOnViewportEntry>
-          <SloUEMapExample id="slo-ue-map" />
-        </RenderOnViewportEntry>
 
-        <RenderOnViewportEntry>
+        <RenderOnViewportEntry
+          intersectionObserverInit={{
+            threshold: 0,
+            rootMargin: '0px',
+          }}
+          srOnlyComponentsBeforeEntered={
+            <div id="column-chart">
+              <h2>Column chart</h2>
+              <h3>Column subtitle</h3>
+            </div>
+          }
+        >
           <ColumnChartExample id="column-chart" />
         </RenderOnViewportEntry>
+        <RenderOnViewportEntry
+          intersectionObserverInit={{
+            threshold: 0.5,
+            rootMargin: '0px',
+          }}
+          srOnlyComponentsBeforeEntered={
+            <div id="drilldown-chart">
+              <h2>Slo UE Map</h2>
+              <h3>Map subtitle</h3>
+            </div>
+          }
+        >
+          <SloUEMapExample id="slo-ue-map" />
+        </RenderOnViewportEntry>
         <RenderOnViewportEntry
           intersectionObserverInit={{
             threshold: 0.5,
@@ -42,7 +65,7 @@ const Analytics = function Analytics() {
           srOnlyComponentsBeforeEntered={
             <div id="line-chart">
               <h2>Line</h2>
-              <h3>Subtitle</h3>
+              <h3>Line subtitle</h3>
             </div>
           }
         >