fix(analytics): 🐛 it navigates to the right chart but jumps

Hard code fake height for each chart see: commit 4638043
sledilnik · Nov 8, 2024 · f39fa59 · f39fa59
1 parent fd70f07
commit f39fa59
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 9 deletions.
diff --git a/src/pages/Analytics/Data/examples/index.js b/src/pages/Analytics/Data/examples/index.js
@@ -11,6 +11,7 @@ export const COLUMN = {
   section: 'examples 1',
   order: 2,
   componentName: 'ChartCard',
+  fakeHeight: '570px',
   options: {
     accessibility: {
       typeDescription: 'Column chart with 6 series.',
@@ -47,6 +48,7 @@ export const Line = {
   section: 'examples 2',
   order: 2,
   componentName: 'ChartCard',
+  fakeHeight: '570px',
   options: {
     chart: { type: 'line' },
     title: { text: 'Line' },
@@ -75,6 +77,7 @@ export const DRILLDOWN = {
   section: 'examples 2',
   order: 3,
   componentName: 'ChartCard',
+  fakeHeight: '541px',
   options: {
     chart: { type: 'column' },
     title: { text: 'Drilldown' },
@@ -253,6 +256,7 @@ export const SLO_UE_MAP = {
   order: 4,
   section: 'examples 1',
   componentName: 'MapCard',
+  fakeHeight: '662px',
   options: {
     chart: { map: sloUEMap },
     title: { text: 'Slo UE Map' },
@@ -337,6 +341,7 @@ const SLO_OB_MAP = {
   order: 1,
   section: 'examples 1',
   componentName: 'MapCard',
+  fakeHeight: '662px',
   options: {
     chart: { map: sloOBMap },
     title: { text: 'Slo OB Map' },

diff --git a/src/pages/Analytics/Layout.module.css b/src/pages/Analytics/Layout.module.css
@@ -132,9 +132,3 @@
 .CardWrapper:not(:last-child) {
   margin-bottom: 2rem;
 }
-
-.FakeChartTitlesWrapper {
-  background: #ffffff;
-  border-radius: 6px;
-  min-height: 600px;
-}
diff --git a/src/pages/Analytics/index.jsx b/src/pages/Analytics/index.jsx
@@ -11,10 +11,13 @@ import Footer from './Footer';
 import Sidebar from './Sidebar';
 
 import styles from './Layout.module.css';
+import stylesCard from './Cards/Card.module.css';
+
 import { SECTIONS } from './Data/sections';
 import { createChartDataProxy } from './Data/create-chart-data-proxy';
 import RichInfoClick from './RichInfoClick';
 import TouchdeviceNotification from './TouchDeviceNotification';
+import { CardHeader } from './Cards/CardHeader';
 
 const ChartCard = lazy(() => import('./Cards/ChartCard'));
 const MapCard = lazy(() => import('./Cards/MapCard'));
@@ -47,16 +50,22 @@ const Analytics = function Analytics() {
             {section.charts.map(chart => {
               const CardComponent = CARDS[chart.componentName];
               const chartProxy = createChartDataProxy(chart);
+
               return (
                 <RenderOnViewportEntry
                   key={chartProxy.id}
                   srOnlyComponentsBeforeEntered={
-                    <div className={styles.FakeChartTitlesWrapper}>
-                      <h3 id={chartProxy.id}>{chartProxy.options.title.text}</h3>
-                      <p>{chartProxy.options.subtitle.text}</p>
+                    <div className={`${stylesCard.Card} `} style={{ minHeight: chart.fakeHeight }}>
+                      <CardHeader>
+                        <div>
+                          <h3 id={chartProxy.id}>{chartProxy.options.title.text}</h3>
+                          <p>{chartProxy.options.subtitle.text}</p>
+                        </div>
+                      </CardHeader>
                     </div>
                   }
                   className={styles.CardWrapper}
+                  style={{ minHeight: chart.fakeHeight }}
                 >
                   <CardComponent id={chartProxy.id} options={chartProxy.options} />
                 </RenderOnViewportEntry>

diff --git a/src/pages/Analytics/types.js b/src/pages/Analytics/types.js
@@ -21,6 +21,7 @@
  * @property {string} id
  * @property {"ChartCard" } componentName
  * @property {HighchartsOptions} options
+ * @property {React.CSSProperties["minHeight"] fakeHeight
  */
 /**
  * @typedef {Object} MapData