Merge pull request #480 from Vizzuality/client/LSE-156-fe-new-time-se…

…ries-graph-at-area-ep-2 Add country benchmarks chart
Vizzuality · Nov 22, 2023 · 228c3ea · 228c3ea
2 parents 120617d + ea2e053
commit 228c3ea
Show file tree

Hide file tree

Showing 7 changed files with 245 additions and 3 deletions.
diff --git a/app/assets/stylesheets/tpi.scss b/app/assets/stylesheets/tpi.scss
@@ -45,7 +45,7 @@
 @import "tpi/mq-beta-modal";
 @import "tpi/selector";
 @import "tpi/emissions-chart";
-
+@import "tpi/ascor-benchmarks";
 @import "tpi/pages/*";
 @import "tpi/shared/*";
 

diff --git a/app/assets/stylesheets/tpi/_ascor-benchmarks.scss b/app/assets/stylesheets/tpi/_ascor-benchmarks.scss
@@ -0,0 +1,41 @@
+@import "colors";
+@import "typography";
+
+.ascor-benchmarks {
+  height: 500px;
+  margin-top: 24px;
+  .highcharts-graph {
+    stroke-width: 4px !important;
+  }
+  .highcharts-axis-title {
+    font-family: $font-family-regular;
+    background-color: white;
+    font-weight: 600;
+  }
+  &__legend {
+    margin-bottom: 26px;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    gap: 28px;
+    font-family: $font-family-regular;
+    color: #595b5d;
+    font-size: 12px;
+    &__line {
+      border-top: 4px solid #595b5d;
+      width: 37px;
+      display: inline-block;
+      margin-right: 8px;
+      transform: translateY(-2px);
+
+      &.--targeted-pathway {
+        border-top-style: dashed;
+      }
+    }
+  }
+}
+
+.highcharts-root,
+.highcharts-container {
+  overflow: visible !important;
+}
diff --git a/app/javascript/components/tpi/charts/ascor-benchmarks/Chart.js b/app/javascript/components/tpi/charts/ascor-benchmarks/Chart.js
@@ -0,0 +1,84 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import Highcharts from 'highcharts';
+import HighchartsReact from 'highcharts-react-official';
+import { options } from './options';
+
+const Chart = ({ data: { data, metadata } }) => {
+  const chartData = useMemo(
+    () => [
+      {
+        name: 'Country emissions pathway',
+        custom: { unit: metadata.unit },
+        data: Object.entries(data.emissions).map(([year, value]) => ({
+          x: Number(year),
+          y: value
+        })),
+        zoneAxis: 'x',
+        zones: [
+          {
+            value: data.last_historical_year
+          },
+          {
+            dashStyle: 'dash'
+          }
+        ]
+      },
+      ...data?.benchmarks.map((d) => ({
+        custom: { unit: metadata.unit },
+        name: d.benchmark_type,
+        data: Object.entries(d.emissions).map(([year, value]) => ({
+          x: Number(year),
+          y: value
+        }))
+      }))
+    ],
+    [data, metadata.unit]
+  );
+
+  return (
+    <div className="ascor-benchmarks">
+      <div className="ascor-benchmarks__legend">
+        <span>
+          <span className="ascor-benchmarks__legend__line" />
+          Trend
+        </span>
+        <span>
+          <span className="ascor-benchmarks__legend__line --targeted-pathway" />
+          Targeted pathway
+        </span>
+      </div>
+      <HighchartsReact
+        highcharts={Highcharts}
+        options={{
+          ...options,
+          yAxis: {
+            ...options.yAxis,
+            title: { ...options.yAxis.title, text: metadata.unit }
+          },
+          series: chartData
+        }}
+      />
+    </div>
+  );
+};
+
+Chart.propTypes = {
+  data: PropTypes.shape({
+    data: PropTypes.shape({
+      benchmarks: PropTypes.arrayOf(
+        PropTypes.shape({
+          benchmark_type: PropTypes.string,
+          emissions: PropTypes.objectOf(PropTypes.number)
+        })
+      ),
+      emissions: PropTypes.objectOf(PropTypes.number),
+      last_historical_year: PropTypes.number
+    }),
+    metadata: PropTypes.shape({
+      unit: PropTypes.string
+    })
+  }).isRequired
+};
+
+export default Chart;
diff --git a/app/javascript/components/tpi/charts/ascor-benchmarks/index.js b/app/javascript/components/tpi/charts/ascor-benchmarks/index.js
@@ -0,0 +1,3 @@
+import Chart from './Chart';
+
+export { Chart };
diff --git a/app/javascript/components/tpi/charts/ascor-benchmarks/options.js b/app/javascript/components/tpi/charts/ascor-benchmarks/options.js
@@ -0,0 +1,112 @@
+export const colors = ['#5454C4', '#A3A3A3', '#17B091'];
+
+export const options = {
+  title: { text: '' },
+  colors,
+  yAxis: {
+    lineColor: '#595B5D',
+    lineWidth: 1,
+    visible: true,
+    tickColor: '#595B5D',
+    labels: {
+      align: 'right',
+      style: {
+        color: '#595B5D',
+        fontSize: '12px'
+      },
+      format: '{value}'
+    },
+    title: {
+      useHTML: true,
+      align: 'high',
+      rotation: 0,
+      offset: -50
+    }
+  },
+  credits: {
+    enabled: false
+  },
+  xAxis: {
+    lineColor: '#595B5D',
+    lineWidth: 1,
+    tickColor: '#595B5D',
+    tickInterval: 5,
+    min: 2005,
+    max: 2030,
+    labels: {
+      style: {
+        fontSize: '14px'
+      }
+    }
+  },
+  legend: {
+    layout: 'horizontal',
+    align: 'left',
+    verticalAlign: 'bottom',
+    padding: 22,
+    itemDistance: 28,
+    symbolWidth: 37,
+    useHTML: true,
+    itemMarginBottom: 10
+  },
+  tooltip: {
+    shared: true,
+    headerFormat: `<div class='emissions__chart__tooltip__header'>
+          <span>{point.key}</span> <span>{series.userOptions.custom.unit}</span>
+        </div>`,
+    style: {
+      color: '#191919',
+      fontSize: '14px'
+    },
+    borderWidth: 0,
+    crosshairs: true,
+    padding: 0,
+    shadow: false,
+    className: 'emissions__chart__tooltip',
+    useHTML: true
+  },
+  chart: {
+    height: 450,
+    showAxes: true,
+    backgroundColor: 'transparent'
+  },
+  plotOptions: {
+    lineWidth: 4,
+    series: {
+      marker: {
+        enabled: false,
+        states: {
+          hover: {
+            enabled: false
+          }
+        }
+      }
+    }
+  },
+  series: [],
+  responsive: {
+    rules: [
+      {
+        condition: {
+          maxWidth: 992
+        },
+        chartOptions: {
+          yAxis: {
+            labels: {
+              distance: 5,
+              padding: 0,
+              style: {
+                fontSize: '10px'
+              }
+            },
+            title: {
+              style: {
+                fontSize: '10px'
+              }
+            }
+          }
+        }
+      }
+    ]
+  }
+};
diff --git a/app/views/tpi/ascor/_assessment.html.erb b/app/views/tpi/ascor/_assessment.html.erb
@@ -29,7 +29,9 @@
             <% if ascor_sub_indicators_for(area, indicators).present? %>
               <%= render 'tpi/ascor/assessment_indicators', area: area, indicators: ascor_sub_indicators_for(area, indicators), metrics: metrics %>
               <% if area.code == 'EP.2' %>
-                <%= render 'tpi/ascor/benchmarks_chart' %>
+                <div class="country-assessment__metric-block">
+                  <%= render 'tpi/ascor/benchmarks_chart' %>
+                </div>
               <% end %>
             <% else %>
               <%= render 'tpi/ascor/assessment_metrics', metrics: ascor_sub_indicators_for(area, metrics) %>

diff --git a/app/views/tpi/ascor/_benchmarks_chart.html.erb b/app/views/tpi/ascor/_benchmarks_chart.html.erb
@@ -1,3 +1,3 @@
-<%#= react_component('charts/ascor-benchmarks', { # TODO: Finalise react component
+<%= react_component('charts/ascor-benchmarks/Chart', {
   data: Api::ASCOR::BenchmarksChart.new(@assessment_date, @country.id).call
 }) %>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Chart from './Chart';

		export { Chart };