feat(analytics): 🐛 add availability change by institution type chart …

…and update styles
sledilnik · Nov 17, 2024 · ce86151 · ce86151
1 parent f39fa59
commit ce86151
Show file tree

Hide file tree

Showing 10 changed files with 155 additions and 18 deletions.
diff --git a/src/index.css b/src/index.css
@@ -25,10 +25,10 @@ body {
 }
 
 [id] {
-  scroll-margin-top: 64px;
+  scroll-margin-top: 5rem;
 
   @media (min-width: 600px) {
-    scroll-margin-top: 72px;
+    scroll-margin-top: 6rem;
   }
 }
 

diff --git a/src/pages/Analytics/Cards/ChartCard/index.jsx b/src/pages/Analytics/Cards/ChartCard/index.jsx
@@ -74,7 +74,7 @@ const ChartCard = function ChartCard({ id = undefined, options }) {
         <div className={styles.SeriesButtons}>
           <CustomSeriesButtons chart={chart} />
         </div>
-        <figcaption className="highcharts-description">{options.caption.text}</figcaption>
+        <figcaption className="highcharts-description">{options?.caption?.text}</figcaption>
       </figure>
     </article>
   );

diff --git a/src/pages/Analytics/Data/examples/index.js b/src/pages/Analytics/Data/examples/index.js
@@ -256,7 +256,7 @@ export const SLO_UE_MAP = {
   order: 4,
   section: 'examples 1',
   componentName: 'MapCard',
-  fakeHeight: '662px',
+  fakeHeight: '610px',
   options: {
     chart: { map: sloUEMap },
     title: { text: 'Slo UE Map' },
@@ -341,7 +341,7 @@ const SLO_OB_MAP = {
   order: 1,
   section: 'examples 1',
   componentName: 'MapCard',
-  fakeHeight: '662px',
+  fakeHeight: '610px',
   options: {
     chart: { map: sloOBMap },
     title: { text: 'Slo OB Map' },

diff --git a/src/pages/Analytics/Data/production/availability-change-by-institution-type.js b/src/pages/Analytics/Data/production/availability-change-by-institution-type.js
@@ -0,0 +1,134 @@
+/** @import * as Types from "../../types" */
+
+import Highcharts from 'highcharts';
+
+/**
+ * @type {Types.ChartData} - Column chart data.
+ */
+export const availabilityChangeByInstitutionType = {
+  section: 'real section 1',
+  order: 1,
+  id: 'availabilityChangeByInstitutionType',
+  componentName: 'ChartCard',
+  fakeHeight: '524px',
+  options: {
+    chart: {
+      type: 'scatter',
+      zoomType: 'xy',
+    },
+    title: {
+      text: 'Institution Performance',
+    },
+    xAxis: {
+      title: {
+        text: 'Contractual programme of an institution [number of programs in contract]',
+      },
+      tickInterval: 10,
+      zoomEnabled: true,
+    },
+    yAxis: {
+      title: {
+        text: 'Number of services rendered',
+      },
+      tickInterval: 5000,
+    },
+    legend: {
+      enabled: false,
+    },
+    series: [
+      {
+        name: 'Zasebno',
+        color: Highcharts.getOptions().colors[0],
+        data: [
+          [5.896819161743402, 3372.1936129712194],
+          [5.463782314232986, 3956.6672675724185],
+          [4.0564125598241425, 3789.6747948292177],
+          [4.0564125598241425, 3789.6747948292177],
+          [3.2985980766809178, 3873.1710312008145],
+          [3.2985980766809178, 3873.1710312008145],
+          [2.7573020172929006, 8047.982849780827],
+          [6.13900467860018, 5229.110813146421],
+          [7.13900467860018, 5249.110813146421],
+        ],
+        marker: {
+          radius: 4,
+        },
+      },
+      {
+        name: 'Javno',
+        color: Highcharts.getOptions().colors[1],
+        data: [
+          [4.0564125598241425, 3789.6747948292177],
+          [4.0564125598241425, 3789.6747948292177],
+          [4.0564125598241425, 3789.6747948292177],
+          [3.2985980766809178, 3873.1710312008145],
+          [3.2985980766809178, 3873.1710312008145],
+          [3.2985980766809178, 3873.1710312008145],
+          [5.63900467860018, 5239.110813146421],
+          [5.33900467860018, 5219.110813146421],
+          [5.53900467860018, 5259.110813146421],
+        ],
+        marker: {
+          radius: 4,
+          symbol: 'circle',
+        },
+      },
+      {
+        showInLegend: false,
+        name: 'Regression Line (Private)',
+        type: 'line',
+        data: [
+          [0, 0],
+          [30, 24000],
+        ],
+        color: Highcharts.getOptions().colors[0],
+        marker: {
+          enabled: false,
+        },
+        enableMouseTracking: false,
+      },
+      {
+        showInLegend: false,
+        name: 'Regression Line (Public)',
+        type: 'line',
+        data: [
+          [0, 0],
+          [30, 41000],
+        ],
+        color: Highcharts.getOptions().colors[1],
+        marker: {
+          enabled: false,
+        },
+        enableMouseTracking: false,
+      },
+    ],
+    annotations: [
+      {
+        labels: [
+          {
+            point: { x: 20, y: 18000, xAxis: 0, yAxis: 0 },
+            text: 'R²=0.600',
+            style: {
+              color: Highcharts.getOptions().colors[0],
+            },
+            useHtml: true,
+          },
+          {
+            point: { x: 20, y: 32000, xAxis: 0, yAxis: 0 },
+            text: 'R²=0.961',
+            style: {
+              color: Highcharts.getOptions().colors[1],
+            },
+            useHtml: true,
+          },
+        ],
+        labelOptions: {
+          backgroundColor: 'rgba(255,255,255,0.5)',
+          verticalAlign: 'bottom',
+          borderColor: 'transparent',
+          // y: 15,
+        },
+      },
+    ],
+  },
+};
diff --git a/src/pages/Analytics/Data/sections.js b/src/pages/Analytics/Data/sections.js
@@ -1,8 +1,9 @@
 /** @import * as Types from "../types" */
 
 import examples from './examples';
+import { availabilityChangeByInstitutionType } from './production/availability-change-by-institution-type';
 
-export const charts = [...Object.values(examples)];
+export const charts = [availabilityChangeByInstitutionType, ...Object.values(examples)];
 
 const groupedCharts = charts.reduce((acc, chart) => {
   const { section } = chart;

diff --git a/src/pages/Analytics/HighchartsOptions/index.js b/src/pages/Analytics/HighchartsOptions/index.js
@@ -4,17 +4,20 @@ import HighMaps from 'highcharts/highmaps';
 import drilldown from 'highcharts/modules/drilldown';
 import exporting from 'highcharts/modules/exporting';
 import accessibility from 'highcharts/modules/accessibility';
+import annotaitons from 'highcharts/modules/annotations';
 import loMerge from 'lodash/merge';
 
 import { baseOptions, commonOptions } from './options';
 
 accessibility(Highcharts);
 exporting(Highcharts);
 drilldown(Highcharts);
+annotaitons(Highcharts);
 
 accessibility(HighMaps);
 exporting(HighMaps);
 drilldown(HighMaps);
+annotaitons(HighMaps);
 
 Highcharts.setOptions(loMerge(baseOptions, commonOptions));
 HighMaps.setOptions(loMerge(baseOptions, commonOptions));
diff --git a/src/pages/Analytics/HighchartsOptions/options.js b/src/pages/Analytics/HighchartsOptions/options.js
@@ -15,6 +15,7 @@ export const lang = {
   downloadJPEG: 'Prenesi JPEG',
   downloadSVG: 'Prenesi SVG',
   printChart: 'Natisni graf',
+  resetZoom: 'Ponastavi povečavo',
   viewFullscreen: 'Celozaslonski pogled',
   exitFullscreen: 'Zapri celozaslonski pogled',
   decimalPoint: ',',

diff --git a/src/pages/Analytics/Layout.module.css b/src/pages/Analytics/Layout.module.css
@@ -121,12 +121,8 @@
   margin-bottom: 1rem;
 }
 
-.ChartsSection:first-of-type {
-  min-height: 670px; /* 670px is the height of the chart and section title */
-}
-
-.ChartsSection:not(:first-of-type) {
-  margin-top: 2rem;
+.ChartSection:not(:last-child) {
+  margin-bottom: 2rem;
 }
 
 .CardWrapper:not(:last-child) {

diff --git a/src/pages/Analytics/index.jsx b/src/pages/Analytics/index.jsx
@@ -38,12 +38,14 @@ const Analytics = function Analytics() {
         <Sidebar />
         <h1 className={styles.MainTitle}>{t('SEO.title.analytics')}</h1>
         <section className={styles.ChartSection}>
-          <h2 className={styles.SectionTitle}>Some section title</h2>
-          <RichInfoClick />
+          <div className={styles.CardWrapper}>
+            <h2 className={styles.SectionTitle}>Some section title</h2>
+            <RichInfoClick />
+          </div>
         </section>
 
         {SECTIONS.map(section => (
-          <section key={section.sectionTitle} className={styles.ChartsSection}>
+          <section key={section.sectionTitle} className={styles.ChartSection}>
             <h2 className={styles.SectionTitle}>
               {section.sectionTitle[0].toUpperCase() + section.sectionTitle.slice(1)}
             </h2>
@@ -58,8 +60,8 @@ const Analytics = function Analytics() {
                     <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>
+                          <h3 id={chartProxy.id}>{chartProxy.options.title?.text}</h3>
+                          <p>{chartProxy.options.subtitle?.text}</p>
                         </div>
                       </CardHeader>
                     </div>

diff --git a/src/pages/Analytics/types.js b/src/pages/Analytics/types.js
@@ -32,7 +32,7 @@
  * @property {HighMapsOptions} options
  */
 
-/** @typedef {("examples 1" | "examples 2")[]} SectionNames */
+/** @typedef {("real section 1" | "examples 1" | "examples 2")[]} SectionNames */
 
 /**
  * @typedef {('top' | 'top-start' | 'start | 'end' | 'bottom' | 'bottom-start' | 'bottom-end' )} Placement