Merge pull request #468 from Vizzuality/client/feature/LSE-141-fe-cou…

…ntry-emission-pathways-graph-changes Add min Y axis value and change X axis ticks
Vizzuality · Nov 6, 2023 · 9d87dc6 · 9d87dc6
2 parents 8f69b88 + 798b8d6
commit 9d87dc6
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/app/assets/stylesheets/tpi/_emissions-chart.scss b/app/assets/stylesheets/tpi/_emissions-chart.scss
@@ -159,6 +159,9 @@
         }
       }
     }
+    .highcharts-root {
+      overflow: visible !important;
+    }
     .highcharts-legend > div > div {
       display: flex;
       gap: 12px;

diff --git a/app/javascript/components/tpi/charts/ascor-emissions/Chart.js b/app/javascript/components/tpi/charts/ascor-emissions/Chart.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import Highcharts from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
@@ -10,6 +10,11 @@ import { options } from './options';
 const EmissionsChart = ({ chartData }) => {
   const { data, metadata } = chartData;
 
+  const hasNegative = useMemo(
+    () => data.every((series) => series.data?.every((point) => point?.y < 0)),
+    [data]
+  );
+
   return (
     <div className="emissions__chart">
       <HighchartsReact
@@ -18,10 +23,11 @@ const EmissionsChart = ({ chartData }) => {
           ...options,
           yAxis: {
             ...options.yAxis,
+            min: hasNegative ? null : 0,
+            max: hasNegative ? 0 : null,
             title: { ...options.yAxis.title, text: metadata.unit }
           },
-          series: data,
-          title: { text: '' }
+          series: data
         }}
       />
     </div>

diff --git a/app/javascript/components/tpi/charts/ascor-emissions/options.js b/app/javascript/components/tpi/charts/ascor-emissions/options.js
@@ -6,7 +6,9 @@ export const colors = [
   '#FFDD49',
   '#00A8FF',
   '#F602B4',
-  '#191919'
+  '#191919',
+  '#9747FF',
+  '#595B5D'
 ];
 
 const tooltipLegendLine = (
@@ -28,9 +30,8 @@ export const options = {
     lineWidth: 1,
     visible: true,
     tickColor: '#595B5D',
-    tickAmount: 8,
     labels: {
-      padding: 10,
+      align: 'right',
       style: {
         color: '#595B5D',
         fontSize: '12px'
@@ -49,6 +50,8 @@ export const options = {
     lineWidth: 1,
     tickColor: '#595B5D',
     tickInterval: 5,
+    min: 2005,
+    max: 2030,
     labels: {
       style: {
         color: '#0A4BDC',