Charts
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<%
data = @data || [{:year=>2020, :percent => 41.3879}]
chart_id = "areachart-#{Random.rand(100000)}"
empty_text = @empty_text || ""
%>
<div class="d-flex flex-column align-items-center w-100">
<h5 class="mb-1"><%= @title %></h5>
<div id="<%= chart_id %>" class="w-100"></div>
</div>
<script>
(function() {
const data = <%= data.to_json %>
Highcharts.chart(<%= chart_id.to_json %>, {
chart: {
type: 'area'
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
lang: {
noData: <%= empty_text.to_json%>
},
noData: {
attr: {
class: "h6 mb-0 font-weight-lighter"
},
style: {
fontFamily: "inherit",
fontWeight: 'inherit',
fontSize: 'inherit',
color: 'inherit'
},
useHTML: true,
},
title: {
text: "<%= @title %>"
},
xAxis: {
tickmarkPlacement: 'on',
tickWidth: 1,
title: {
enabled: false
},
showLastLabel: true,
tickPositions: [<%= @data_year.to_i %>, 2025, 2030, 2035, 2040, 2045, 2050,]
<% if empty_text != "" %>
min: 2020,
max: 2050
<% end %>
},
yAxis: {
labels: {
format: '{value}%'
},
title: {
enabled: false
},
showLastLabel: true,
<% if empty_text != "" %>
min: 0,
max: 100,
gridLineWidth: 0
<% end %>
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b>',
shared: true
},
title: false,
plotOptions: {
area: {
stacking: 'percent',
marker: {
enabled:false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
},
},
},
},
},
legend: {
itemStyle: {
fontWeight: 'lighter',
fontFamily: 'inherit',
}
},
series: [{
name: 'Not at Risk',
data: data.map((value) => [value.year, 100 - value.percent] ),
color: '#DAEFDD',
tooltip: {
pointFormat: ""
}
}, {
name: 'At Risk',
data: data.map((value) => [value.year, value.percent] ),
color: '#DFA37F',
}]
});
})()
</script>
Horizontal Barchart
Women
<% chart_id = (@gender) ? disambiguate_id("#{@gender[:group].downcase.split.join}-#{@gender[:gender].split.join}") : "horizontal-bar-chart-example" %>
<% color_one = @color_one || '#7e55d5' %>
<% color_two = @color_two || '#4bc4aa' %>
<% gender = (@gender && @gender[:gender]) ? @gender[:gender] : 'Women' %>
<% entity = (@gender && @gender[:entity]) ? @gender[:entity] : 0 %>
<% benchmark = (@gender && @gender[:benchmark]) ? @gender[:benchmark] : 0 %>
<div>
<h5 class="mb-0"><%= gender %></h5>
<div id="<%= chart_id %>" style="width: 350px; height:100px;">
</div>
</div>
<script>
Highcharts.chart("<%= chart_id %>", {
chart: {
type: 'bar'
},
credits: {
enabled: false,
},
title: false,
xAxis: {
categories: ['Entity', 'Benchmark'],
labels: {
enabled: true
},
style: {
fontWeight: 700,
fontFamily: "DINWeb"
}
},
exporting: {
enabled: false
},
yAxis: {
min: 0,
max: 100,
tickInterval: 25,
title: false,
width: '97%',
labels:{
format: '{text}%'
},
style: {
fontWeight: 700,
fontFamily: "DINWeb"
}
},
legend: {
enabled: false,
reversed: true
},
plotOptions: {
series: {
stacking: "normal",
colorByPoint: true,
colors: ["<%= color_one %>", "<%= color_two %>"],
groupPadding: 0,
pointPadding: 0,
borderWidth: 0
}
},
tooltip: {
formatter: function () {
let str = '<b>' + this.point.category + '</b><br/>';
str += 'Percentage: ' + new Intl.NumberFormat('en').format(this.point.y.toFixed(2));
return str;
},
},
series: [{
data: [parseFloat("<%= entity %>"), parseFloat("<%= benchmark %>")],
showInLegend: false,
dataLabels: {
allowOverlap: true
}
}]
});
</script>
Horizontal Barchart opt 2
This Entity
Benchmark
N/A
N/A
<% color_one = @color_one || 'bg-primary' %>
<% color_two = @color_two || 'bg-dark' %>
<% entity = @entity || "N/A" %>
<%
benchmark = @benchmark
if !benchmark && entity != "N/A"
benchmark = "0"
elsif !benchmark && entity === "N/A"
benchmark = "N/A"
end
%>
<div class="d-flex mb-3" style="width: 400px;">
<div class="d-flex flex-column align-items-center" style="border-right: 1px solid black;">
<div class="small p-2 font-weight-light">This Entity</div>
<div class="small p-2 font-weight-light">Benchmark</div>
</div>
<div class="d-flex flex-column justify-content-around" style="flex: 1;">
<div class="d-flex bg-gray-100" style="height: 48%;">
<% if entity != "N/A" && entity.to_i > 10 %>
<div style="width: <%= entity %>%; color: white;" class="d-flex justify-content-end align-items-center inner <%= color_one %>">
<span class="small pr-1"><%= entity %>%</span>
</div>
<% elsif entity != "N/A" && entity.to_i <= 10 %>
<div style="width: <%= entity %>%; color: black;" class="d-flex justify-content-end align-items-center inner <%= color_one %>"></div>
<div style="color: black;" class="d-flex justify-content-end align-items-center">
<span class="small pl-1"><%= entity %>%</span>
</div>
<% else %>
<div class="d-flex align-items-center">
<span class="small pl-2" style="color: black;"><%= entity %></span>
</div>
<% end %>
</div>
<div class="d-flex bg-gray-100" style="height: 48%;">
<% if benchmark != "N/A" && benchmark.to_i > 10 %>
<div style="width: <%= benchmark %>%; color: white;" class="d-flex justify-content-end align-items-center inner <%= color_two %>">
<span class="small pr-2"><%= benchmark %>%</span>
</div>
<% elsif benchmark != "N/A" && benchmark.to_i <= 10 %>
<div style="width: <%= benchmark %>%;" class="d-flex justify-content-end align-items-center inner <%= color_two %>"></div>
<div style="color: black;" class="d-flex justify-content-end align-items-center">
<span class="small pl-1"><%= benchmark %>%</span>
</div>
<% else %>
<div class="d-flex align-items-center">
<span class="small pl-2" style="color: black;"><%= benchmark %></span>
</div>
<% end %>
</div>
</div>
</div>
Horizontal Barchart opt 3
<%
dict = {
'None' => 'Other'
}
%>
<% percent_gav = @percent_gav || [] %>
<div class="d-flex flex-column mt-4">
<% percent_gav.each do |gav|%>
<div class="d-flex align-items-center mb-2">
<h6 class="mb-0 mr-2 text-black font-weight-light w-40 text-right" style="width: 90px; word-wrap: break-word;">
<%= dict.fetch(gav[:property_type] || gav[:country], gav[:property_type] || gav[:country]) %>
</h6>
<div class="<%= ((gav[:property_type] || gav[:country]) == "None") ? "bg-gray-500" : "bg-primary" %>" style="width:<%= (gav[:percent].round == 1) ? 1 : gav[:percent] / 2 %>%; height:28px;"></div>
<h6 class=" mb-0 ml-2 text-black font-weight-light"><%= gav[:percent].round %>%</h6>
</div>
<%end%>
</div>
Horizontal Barchart opt 4
0%
Actual Data
<% actual_data = @actual_data || "" %>
<% color1 = @color1|| '' %>
<div class="d-flex mt-2 mb-1" style="width: 200px;">
<div class="d-flex flex-column justify-content-around" style="flex: 1;">
<div class="d-flex bg-gray-100" style="height: 20px;">
<div style="width: <%= actual_data.to_i %>%; color: white;" class="d-flex justify-content-end align-items-center inner <%= color1 %>">
<span class="small pr-1 font-weight-light" style="margin-top: 2px;"><%= actual_data.to_i %>%</span>
</div>
</div>
</div>
</div>
<div class="d-flex">
<div class="<%= color1 %> mr-2" style="height: 12px; width: 12px;"></div>
<h6 class="font-weight-light">Actual Data</h6>
</div>
Vertical Barchart Background
Entity and peers did not complete the indicator
Energy consumed (MWh) / Gross Asset Value (US$*)
The intensity is calculated by dividing the total energy consumed by the entity by the Gross Asset Value (GAV) as provided in the Entity & Reporting Characteristics.
*GAV has been converted to US dollars ($) to allow for comparisons to the peer group and the wider GRESB universe.
<%
chart_id = @chart_id || 'vertical-barchart-background'
content_title = @content_title || 'Energy consumed (MWh) / Gross Asset Value (US$*)'
content_info = @content_info || 'The intensity is calculated by dividing the total energy consumed by the entity by the Gross Asset Value (GAV) as provided in the Entity & Reporting Characteristics.'
content_bottom_info = @content_bottom_info || '*GAV has been converted to US dollars ($) to allow for comparisons to the peer group and the wider GRESB universe.'
denominator = (@intensity && @intensity[:denominator]) ? "#{@intensity[:denominator]}" : 'Gross Asset Value'
metric = (@intensity && @intensity[:metric]) ? @intensity[:metric] : "Habitat gain intensity (/GAV)"
entity = (@intensity && @intensity.key?(:entity)) ? @intensity[:entity] : 2
peer_group = (@intensity && @intensity.key?(:peer_group)) ? @intensity[:peer_group] : 1
universe = (@intensity && @intensity.key?(:universe)) ? @intensity[:universe] : 0
full_data_coverage = (@intensity && @intensity.key?(:is_full_data_coverage)) ? @intensity[:is_full_data_coverage] : true
intensity_coverage_is_null = @intensity && @intensity.key?(:is_full_data_coverage) && @intensity[:is_full_data_coverage].nil?
incomplete_data_coverage = !full_data_coverage.nil? && !full_data_coverage
%>
<div class="d-flex bg-white-gray p-4 mb-3 page-break-inside">
<% if @intensity && (!@intensity.key?(:available) || @intensity[:available])%>
<div class="bg-white">
<div id="<%= chart_id %>" style="height: 400px; width:723px">
</div>
<% if !full_data_coverage %>
<div class="h6 font-weight-light" style="padding: 0 5px 0 70px; font-size: 12px;">
**Incomplete data coverage = The entity has reported not to have full data coverage / or does not cover all facilities for the metric(s) reported, hence intensity values for this entity could not be calculated.
</div>
<% end %>
</div>
<script>
Highcharts.chart("<%= chart_id %>", {
"title": {
"style": {
"color": "black",
"fontWeight": "500"
},
"text": "Intensity - <%= denominator %>"
},
"exporting": {
"enabled": false
},
"credits": {
"enabled": false
},
"xAxis": {
"tickWidth": 1,
"labels": {
"style": {
"color": "black"
}
},
"categories": ["Entity", "Peer group", "GRESB Universe"]
},
"yAxis": {
"title": {
"style": {
"color": "black"
},
"text": "<%= metric %>"
},
"labels": {
"style": {
"color": "black"
}
},
"gridLineWidth": 0
},
"chart": {
"type": "column",
"backgroundColor": ""
},
"tooltip": {
formatter: function() {
if(this.x === "Entity" && <%= incomplete_data_coverage %>) {
return this.enabled = false;
} else if((this.x === "Entity" && <%= intensity_coverage_is_null %>)) {
return 0;
} else {
let strValue = this.y.toFixed(6);
for(let i = strValue.length - 1; i >= 0; i--) {
if ((strValue.charAt(i) != '0' && strValue.charAt(i) != '.') || strValue.charAt(i + 1) == '.') {
strValue = strValue.substring(0, i + 1);
break;
}
}
return strValue;
}
}
},
"colors": ["#4DC2A1"],
"plotOptions": {
"column": {
"stacking": "normal",
"dataLabels": {
"style": {
"color": "#4A5359",
"fontWeight": "500",
"fontSize": "10px"
},
"y": -20,
"enabled": true,
formatter: function() {
if(this.x === "Entity" && <%= incomplete_data_coverage %>) {
return "Incomplete data coverage**"
} else if((this.x === "Entity" && <%= intensity_coverage_is_null %>)) {
return 0;
} else {
let strValue = this.y.toFixed(6);
for(let i = strValue.length - 1; i >= 0; i--) {
if ((strValue.charAt(i) != '0' && strValue.charAt(i) != '.') || strValue.charAt(i + 1) == '.') {
strValue = strValue.substring(0, i + 1);
break;
}
}
return strValue;
}
}
}
}
},
"series": [{
"showInLegend": false,
"data": [<%= full_data_coverage ? format_numeric(entity) : 0 %>, <%= format_numeric(peer_group) %>, <%= format_numeric(universe) %>]
}]
});
</script>
<% else %>
<div class="mb-5 d-flex align-items-center justify-content-center" style="height: 400px; width:723px">
<h5 class="text-center">Entity and peers did not complete the indicator</h5>
</div>
<% end %>
<div class="d-flex flex-column justify-content-between ml-2 pl-2 full-height">
<div>
<h6 class="mb-2 mt-2 font-weight-bold"><%= content_title %></h6>
<p class="h6 font-weight-light"><%= content_info %></p>
</div>
<p class="h6 font-weight-light mb-0"><%= content_bottom_info %></p>
</div>
</div>
Vertical Barchart
Energy consumed
Entity and peers did not complete the indicator
<% data = @data || {
series: [
{
data: [1234129, 0, 0],
name: 'Renewable + non-renewable energy consumption',
color: '#7FBEB6'
}, {
data: [
0,
988485,
210022.63
],
name: 'Renewable energy consumption',
color: '#92D050'
}, {
data: [
0,
192031,
320102.7729
],
name: 'Non-renewable energy consumption',
color: '#AFAFAF'
}
],
units: 'MWh',
title: 'Total Energy Consumed: Trends',
categories: [
'Entity: <br> Previous-year performance',
'Entity:<br> Current-year performance',
'Peer Group:<br>Current-year performance',
'GRESB Universe:<br>Current-year performance'
],
y_title: 'Energy (MWh)',
chart_title: 'Energy consumed'
}
chart_id = "stacked-bar-#{Random.rand(100000)}"
title = @title || "Absolute Performance and Targets"
column_text_class = @column_text_class || 'text-dark'
%>
<h5 class="mb-2"> <%= data[:chart_title] %> </h5>
<% if data[:section_enabled] %>
<div class="border border-primary w-100;" style="height:2px;">
</div>
<h5 class="mt-3">
<%= title %>
</h5>
<div id=<%= chart_id.to_json %>></div>
<script>
Highcharts.chart(<%= chart_id.to_json %>, {
chart: {
type: 'column',
},
credits: {
enabled: false,
},
title: {
text: <%= data[:title].to_json %>,
style: {
fontWeight: '500'
}
},
xAxis: {
tickWidth: 1,
categories: <%= data[:categories].to_json %>
},
yAxis: {
title: {
text: <%= data[:y_title].to_json %>
},
stackLabels: {
enabled: false,
}
},
legend: {
itemStyle: {
fontWeight: 'normal',
fontFamily: '',
},
symbolRadius:0,
},
tooltip: {
formatter: function () {
let str = '<b>' + this.point.category + '</b><br/>';
str += this.series.name + ': ' + new Intl.NumberFormat('en').format(this.point.y.toFixed(2)) + '<br/>';
str += 'Total: ' + new Intl.NumberFormat('en').format(this.point.stackTotal.toFixed(2));
return str;
},
},
navigation: {
buttonOptions: {
enabled: false,
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
style: {
fontWeight: 'normal',
fontFamily: 'DINWeb',
color: 'inherit'
},
className: "<%= column_text_class %>",
useHTML: true,
formatter: function() {
return new Intl.NumberFormat('en').format(this.y.toFixed(2));
}
}
}
},
series: <%= data[:series].to_json %>
});
</script>
<% else %>
<br>
<div class="mb-5">
<h5 class="font-weight-light">Entity and peers did not complete the indicator</h5>
</div>
<% end %>
Vertical Barchart opt 2
2018
2019
<% data = @data || {
series: [{
name: 'This Entity',
data: [21, 60], className: "svg-fill-dark bg-dark", color: "transparant"
}, {
name: 'Benchmark',
data: [35, 87], className: "svg-fill-primary bg-primary", color: "transparant"
}],
title: 'Total Energy Consumed: Trends',
}
chart_id = "barchart-vertical-multiple-#{Random.rand(100000)}"
years = @years || [2018, 2019]
%>
<div style="position: relative;">
<div id=<%= chart_id.to_json %> >
</div>
<div class="xaxis" style="position: absolute; height: 25px; width: 419px; bottom: 49px; left: 10px; background-color: #f7f9eb; display: flex;">
<% years.each do |year| %>
<div class="small" style="width: 50%; display: flex; justify-content: center; align-items: center;">
<%= year %>
</div>
<% end %>
</div>
</div>
<script>
Highcharts.chart(<%= chart_id.to_json %>, {
chart: {
renderTo: 'container',
type: 'column',
width: 475
},
credits: {
enabled: false,
},
styleMode: true,
title: {
text: <%= data[:title].to_json %>
},
plotOptions: {
series: {
pointWidth: 40
}
},
xAxis: {
categories: <%= years %>,
labels: {
style: {
fontWeight: 900,
}
}
},
yAxis: {
title: {
enabled: false
},
opposite: true,
min: 0,
max:100,
tickInterval: 20
},
navigation: {
buttonOptions: {
enabled: false,
}
},
legend: {
itemStyle: {
fontWeight: 'normal',
fontFamily: '',
},
symbolRadius: 0,
},
series: <%= data[:series].to_json %>,
});
</script>
Vertical Barchart opt 3
Portfolio
Benchmark
<%
assets_full_data_coverage = @assets_full_data_coverage || 0
assets_not_full_data_coverage = @assets_not_full_data_coverage || 0
benchmark_high_efficiency = @benchmark_high_efficiency || 0
benchmark_low_efficiency = @benchmark_low_efficiency || 0
crrem_value = @crrem_value
y_axis_title = @y_axis_title || 'Energy Intensity (kWh/m2)'
chart_id = "barchart-vertical-multiple-3-#{Random.rand(100000)}"
right_side_columns_text = @type == "energy" ? "efficiency" : "intensities"
%>
<div style="position: relative;">
<div class="d-flex" style="font-size: 12px; font-weight: 500;">
<div class="w-50 text-center">Portfolio</div>
<div class="w-50 text-center" style="padding-left: 100px;">Benchmark</div>
</div>
<div id="<%= chart_id %>">
</div>
</div>
<script>
Highcharts.chart(<%= chart_id.to_json %>, {
chart: {
renderTo: 'container',
type: 'column'
},
credits: {
enabled: false,
},
tooltip: {
enabled: false
},
styleMode: true,
title: {
text: ''
},
legend: {
itemStyle: {
"color": "#85A684"
},
itemHoverStyle: {
"color": "#85A684"
}
},
plotOptions: {
series: {
pointWidth: 75,
states: {
hover: {
enabled: false
}
}
},
column: {
stacking: 'normal',
borderRadius: 0,
dataLabels: {
enabled: true,
inside: false,
verticalAlign: 'bottom',
crop: false,
overflow: 'none',
style: {
fontWeight: 400
},
color: 'black',
formatter: function() {
return this.y !== 0 ? this.y : '';
}
}
},
line: {
marker: {
enabled: false
}
}
},
xAxis: {
categories: [
'Assets with 100% Data Coverage',
'Assets with 75% Data Coverage or more',
'',
'Benchmark: High <%= right_side_columns_text %> (Top 10%)',
'Benchmark: Low <%= right_side_columns_text %> (Bottom 10%)'
],
labels: {
style: {
fontWeight: 400,
width: 90,
fontSize: 10
}
}
},
yAxis: {
min: 0,
title: {
text: '<%= y_axis_title %>'
},
plotLines: [{
color: '#85A684',
id: "<%= chart_id %>-cremm-line",
dashStyle: 'Dash',
value: <%= crrem_value ? crrem_value : 0 %>,
width: <%= crrem_value ? 2 : 0 %>,
zIndex: 6
}]
},
navigation: {
buttonOptions: {
enabled: false
}
},
series: [{
name: 'Assets with 100% Data Coverage',
data: [<%= assets_full_data_coverage %>, 0, null, 0, 0],
color: 'transparant',
className: 'svg-fill-<%= @first_color%> bg-<%= @first_color%>',
showInLegend: false
}, {
name: 'Assets with 75% Data Coverage or more',
data: [0, <%= assets_not_full_data_coverage %>, null, 0, 0],
color: 'transparant',
className: 'svg-fill-<%= @second_color%> bg-<%= @second_color%>',
showInLegend: false
}, {
name: 'Benchmark: High <%= right_side_columns_text %> (Top 10%)',
data: [0, 0, null, <%= benchmark_high_efficiency %>, 0],
color: '#4A5359',
showInLegend: false
}, {
name: 'Benchmark: Low <%= right_side_columns_text %> (Bottom 10%)',
data: [0, 0, null, 0, <%= benchmark_low_efficiency %>],
color: '#333333',
showInLegend: false
}, {
type: 'line',
name: 'CREMM current year value',
data: [<%= crrem_value ? crrem_value : 0 %>],
visible: <%= crrem_value ? true : false %>,
showInLegend: <%= crrem_value ? true : false %>,
color: '#85A684',
dashStyle: 'shortdash',
events: {
legendItemClick: function(e) {
if(!this.visible) {
this.chart.yAxis[0].removePlotLine("<%= chart_id %>-cremm-line");
}
else {
this.chart.yAxis[0].addPlotLine({
color: '#85A684',
id: "<%= chart_id %>-cremm-line",
dashStyle: 'Dash',
value: <%= crrem_value ? crrem_value : 0 %>,
width: <%= crrem_value ? 2 : 0 %>,
zIndex: 6
});
}
}
}
}]
});
</script>
Benchmark Distribution Chart
<%
chart_id = "benchmark-distribution-#{rand(1000000)}"
benchmark_name = @benchmark_name || "Benchmark Average"
%>
<div id="<%=chart_id%>"></div>
<% management = @management || {
"name": "Leadership",
"max_score": 7.55,
"weight_in_component": 25.2,
"weight_in_total": 25.2,
"entity_points": 7.55,
"entity_percent": 100,
"benchmark_points_mean": 6.85,
"benchmark_percent_mean": 90.8,
"benchmark_percents": [91.4, 91.4, 89.1, 100, 94.5, 78.1, 100, 80.5, 100, 100, 78.1, 72.7, 100, 78.1, 100, 100, 100, 100, 100, 84.2, 100, 49.4, 100],
"universe_percent_mean": 86.2
}
legend = @legend.presence || false
line = @businessline || 'infrastructure'
colors = get_benchmark_distribution_colors(line)
%>
<div id='management-<%= management[:name].hash %>'> </div>
<script>
Highcharts.chart('<%= chart_id%>',{
chart: {
zoomType: 'xy',
height: 160,
width: 390,
hover: {
enabled: false
},
events: {
load: function () {
// Fetch the maximum tick value after the chart has been rendered I added - 1 to not add 4 extra to the Y Axis
const maxY = this.yAxis[0].max - 1;
// Update the data to draw the line correctly
this.series[2].setData([
{ x: <%= management[:universe_percent_mean] || 0 %>, y: 0 },
{ x: <%= management[:universe_percent_mean] || 0 %>, y: maxY }
]);
this.series[3].setData([
{ x: <%= management[:benchmark_percent_mean] || 0 %>, y: 0 },
{ x: <%= management[:benchmark_percent_mean] || 0 %>, y: maxY }
]);
}
}
},
title: {
text: undefined
},
legend: {
enabled: <%= legend %>,
layout: 'horizontal',
align: 'right',
verticalAlign: 'bottom',
itemStyle: {
color: '#333333',
fontWeight: 'normal',
fontSize: 8
},
},
exporting: {
enabled: false,
buttons: {
printButton: {
enabled: false
}
}
},
xAxis: {
endOnTick: true,
tickInterval: 25,
tickLength: 5,
tickPosition: 'outside',
tickColor: "#999999",
lineColor: "#999999",
minorTicks: true,
minorGridLineWidth:0,
minorTickInterval:5,
minorTickLength:2,
minorTickPosition: "inside",
minorTickWidth: 1,
min: 0,
max: 100,
title: {
text: "% of Score",
},
labels: {
y: 15,
formatter: function() {
if(this.value === 100) {
return this.value + "%"
}
return this.value
}
},
},
yAxis: {
lineColor: "#999999",
lineWidth: 1,
gridLineWidth: 0,
tickLength: 5,
tickAmount: 2,
tickWidth: 1,
tickColor: "#999999",
startOnTick: true,
endOnTick: true,
allowDecimals: false,
title: {
text: "No. of Entities",
},
labels: {
x: -10,
},
},
credits: {
enabled: false,
},
tooltip: {
enabled: true
},
plotOptions: {
scatter: {
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.x}%'
}
},
line: {
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.x}%'
}
},
histogram: {
tooltip: {
pointFormat: '<span style="font-size: 10px">{point.x}% - {point.x2}%</span><br/><span style="color:{point.color}">●</span> <b>{point.y}</b><br/>',
},
borderRadius: 0
}
},
series: [{
type: 'histogram',
binWidth: 5,
baseSeries: 's1',
color: '#C5C7C8',
name: "",
zIndex: -1,
showInLegend: false
}, {
type: 'scatter',
data: <%= management[:benchmark_percents].map{|x| x || 0}.to_json %>,
id: 's1',
name: "Benchmark Percent",
visible: false,
showInLegend: false
}, {
type: 'line',
name: "GRESB Universe",
data: [
{x: <%= management[:universe_percent_mean] || 0 %>, y: 0}, {x: <%= management[:universe_percent_mean] || 0 %>, y: 0}
],
dashStyle: 'solid',
color: "<%= colors[:gresb_universe] %>",
marker: {
enabled: false
},
showInLegend: true
}, {
type: 'line',
dashStyle: 'ShortDash',
name: "<%= benchmark_name %>",
data: [
{x: <%= management[:benchmark_percent_mean] || 0 %>, y: 0}, {x: <%= management[:benchmark_percent_mean] || 0 %>, y: 0}
],
marker: {
enabled: false
},
color: "<%= colors[:peer_group_average] %>"
}, {
type: 'scatter',
data: [<%= [management[:entity_percent] || 0, 0].to_json %>],
name: "This Entity",
className: "svg-fill-primary",
color: 'inherit',
marker: {
radius: 4,
symbol: 'circle',
fillColor: 'inherit'
},
}]
});
</script>
<% unless @available.nil? || @available %>
<h6 class="font-weight-light pt-3 pb-3">None of the portfolio companies reported to this indicator</h6>
<% else %>
<svg width="305.0" height="216.0" style="background:#fff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<marker id="startarrow" markerWidth="8" markerHeight="8" refX="4" refY="1" orient="0">
<polygon points="0,8 4,0 8,8"></polygon>
</marker>
<marker id="endarrow" markerWidth="8" markerHeight="8" refX="4" refY="7" orient="0">
<polygon points="0,0 8,0 4,8"></polygon>
</marker>
</defs>
<% if @coverage %>
<text x="150" y="10" fill="grey" text-anchor="end" class="small">
<%= @coverage %> Data Coverage
</text>
<line x1="155" y1="7" x2="242.5" y2="7" stroke="grey"></line>
<line x1="242.5" y1="7" x2="242.5" y2="30" stroke="grey"></line>
<% end %>
<% if @first_item.present? %>
<% first_item_height = calc_height(@coverage, @first_item[:number], @first_item[:number], true) %>
<line x1="10" y1="<%= first_item_height %>" x2="242.5" y2="<%= first_item_height %>" style="stroke:<%= @first_item[:color] %>; stroke-width:1; stroke-dasharray:0 2 2 2"></line>
<line x1="10" y1="<%= first_item_height %>" x2="10" y2="155.0" style="stroke:<%= @first_item[:color] %>; stroke-width:0.6; marker-end:url(#endarrow); marker-start:url(#startarrow)"></line>
<text x="10" y="<%= first_item_height - 3 %>" fill="<%= @first_item[:color] %>" class="percent">
<%= number_to_delimited(@first_item[:number]) %>
</text>
<% end %>
<% if @second_item.present? %>
<% second_item_height = calc_height(@coverage, @first_item[:number], @second_item[:number], true) %>
<% text_down = (second_item_height - first_item_height <= 10)%>
<line x1="40" y1="<%= second_item_height %>" x2="242.5" y2="<%= second_item_height %>" style="stroke:<%= @second_item[:color] %>; stroke-width:1; stroke-dasharray:0 2 2 2"></line>
<line x1="40" y1="<%= second_item_height %>" x2="40" y2="155.0" style="stroke:<%= @second_item[:color] %>; stroke-width:0.6; marker-end:url(#endarrow); marker-start:url(#startarrow)"></line>
<text x="<%= text_down ? '45' : '40' %>" y="<%= text_down ? second_item_height + 15 : second_item_height - 3 %>" fill="<%= @second_item[:color] %>" class="percent">
<%= number_to_delimited(@second_item[:number]) %>
</text>
<% end %>
<% if @third_item.present? %>
<% third_item_height = calc_height(@coverage, @first_item[:number], @third_item[:number], true) %>
<line x1="70" y1="<%= third_item_height %>" x2="242.5" y2="<%= third_item_height %>" style="stroke:<%= @third_item[:color] %>; stroke-width:1; stroke-dasharray:0 2 2 2"></line>
<line x1="70" y1="<%= third_item_height %>" x2="70" y2="155.0" style="stroke:<%= @third_item[:color] %>; stroke-width:0.6; marker-end:url(#endarrow); marker-start:url(#startarrow)"></line>
<text x="70" y="<%= third_item_height - 3 %>" fill="<%= @third_item[:color] %>" class="percent">
<%= number_to_delimited(@third_item[:number]) %>
</text>
<% end %>
<% if @first_item.present? %>
<rect x="5" y="172.0" width="10" height="10" fill="<%= @first_item[:color] %>"></rect>
<text x="20" y="181.0" color="<%= @first_item[:color] %>" class="small" text-anchor="start">
<%= number_to_delimited(@first_item[:text]) %>
</text>
<% end %>
<% if @second_item.present? %>
<rect x="5" y="187.0" width="10" height="10" fill="<%= @second_item[:color] %>"></rect>
<text x="20" y="196.0" color="<%= @second_item[:color] %>" class="small" text-anchor="start">
<%= number_to_delimited(@second_item[:text]) %>
</text>
<% end %>
<% if @third_item.present? %>
<rect x="5" y="202.0" width="10" height="10" fill="<%= @third_item[:color] %>"></rect>
<text x="20" y="211.0" color="<%= @third_item[:color] %>" class="small" text-anchor="start">
<%= number_to_delimited(@third_item[:text]) %>
</text>
<% end %>
<% if @first_item.present? %>
<clipPath id="first-<%= @type %>">
<rect x="180.0" y="30" width="125.0" height="<%= calc_height(@coverage, @first_item[:number], @first_item[:number], false) %>"></rect>
</clipPath>
<% end %>
<% if @second_item.present? %>
<clipPath id="second-<%= @type %>">
<rect x="180.0" y="30" width="125.0" height="<%= calc_height(@coverage, @first_item[:number], @second_item[:number], false)%>"></rect>
</clipPath>
<% end %>
<% if @third_item.present? %>
<clipPath id="third-<%= @type %>">
<rect x="180.0" y="30" width="125.0" height="<%= calc_height(@coverage, @first_item[:number], @third_item[:number], false)%>"></rect>
</clipPath>
<% end %>
<% if @first_item.present? && @second_item.present? && @third_item.present? %>
<circle cx="242.5" cy="92.5" r="62.5" fill="<%= @third_item[:color] %>"></circle>
<circle cx="242.5" cy="92.5" r="62.5" fill="<%= @second_item[:color] %>" clip-path="url(#third-<%= @type %>)"></circle>
<circle cx="242.5" cy="92.5" r="62.5" fill="<%= @first_item[:color] %>" clip-path="url(#second-<%= @type %>)"></circle>
<% elsif @first_item.present? && @second_item.present? %>
<circle cx="242.5" cy="92.5" r="62.5" fill="<%= @second_item[:color] %>"></circle>
<circle cx="242.5" cy="92.5" r="62.5" fill="<%= @first_item[:color] %>" clip-path="url(#second-<%= @type %>)"></circle>
<% elsif @first_item.present? %>
<circle cx="242.5" cy="92.5" r="62.5" fill="<%= @first_item[:color] %>"></circle>
<% end %>
<circle cx="242.5" cy="92.5" r="61.5" fill="white" clip-path="url(#first-<%= @type %>)"></circle>
</svg>
<% end %>
Bubble Chart opt 2
Energy Consumption
N/A
N/A
Renewable Energy
<% chart_id = @chart_id || 'bubble-chart-2' %>
<% first_item = @first_item || {text: "Energy Consumption", value: nil} %>
<% second_item = @second_item || {text: "Renewable Energy", value: nil} %>
<% coverage = @coverage || 'N/A' %>
<% first_color = @first_color || 'chart-color2' %>
<% second_color = @second_color || 'primary' %>
<% unit = @unit || '' %>
<div class="mb-5">
<% first_item_height = calc_real_estate_two_side_line(coverage) %>
<% second_item_height = calc_real_estate_two_side_circle(second_item[:value].to_s.delete(",").to_f, first_item[:value].to_s.delete(",").to_f, coverage) %>
<div class="col-xs-6 mt-3 mb-3" style="position: relative;">
<div class="small font-weight-light text-<%= first_color %>" style="width: 90px; left: -10px; position: absolute; top: <%= first_item_height %>px;"><%= first_item[:text] %></div>
<div class="small font-weight-light text-<%= first_color %>" style="width: 80px; left: 80px; text-align: center; line-height: 14px; position: absolute; top: <%= (coverage.to_f > 20) ? (first_item_height + 3) : (first_item_height - 13) %>px;"><%= "#{first_item[:value].present? ? first_item[:value] : 'N/A'} #{unit}" %></div>
<div class="small font-weight-light text-<%= second_color %>" style="width: 80px; left: 325px; line-height: 14px; text-align: center; position: absolute; top: <%= second_item_height - 13 %>px;"><%= "#{second_item[:value].present? ? second_item[:value] : 'N/A'} #{unit}" %></div>
<div class="small font-weight-light text-<%= second_color %>" style="width: 90px; left: 420px; position: absolute; bottom: 0;"><%= second_item[:text] %></div>
<svg width="475.0" height="170.0" style="background:#fff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<marker id="first-startarrow-<%= chart_id%>" class="svg-fill-<%= first_color %>" markerWidth="12" markerHeight="12" refX="4" refY="1" orient="0">
<polygon points="0,8 4,0 8,8" class=""></polygon>
</marker>
<marker id="first-endarrow-<%= chart_id%>" class="svg-fill-<%= first_color %>" markerWidth="12" markerHeight="12" refX="4" refY="7" orient="0">
<polygon points="0,0 8,0 4,8"></polygon>
</marker>
<marker id="second-startarrow-<%= chart_id%>" class="svg-fill-<%= second_color %>" markerWidth="12" markerHeight="12" refX="4" refY="1" orient="0">
<polygon points="0,8 4,0 8,8" class=""></polygon>
</marker>
<marker id="second-endarrow-<%= chart_id%>" class="svg-fill-<%= second_color %>" markerWidth="12" markerHeight="12" refX="4" refY="7" orient="0">
<polygon points="0,0 8,0 4,8"></polygon>
</marker>
</defs>
<text x="150" y="10" fill="grey" text-anchor="end" class="small font-weight-light">
<%= coverage %> Data Coverage
</text>
<line x1="155" y1="7" x2="242.5" y2="7" stroke="grey"></line>
<line x1="242.5" y1="7" x2="242.5" y2="30" stroke="grey"></line>
<line x1="77" y1="<%= first_item_height %>" x2="242.5" y2="<%= first_item_height %>" class="svg-stroke-<%= first_color %>" style="stroke-width:1; stroke-dasharray:0 2 2 2"></line>
<line x1="77" y1="<%= first_item_height %>" x2="77" y2="170" class="svg-stroke-<%= first_color %>" style="stroke-width:0.6; marker-end:url(#first-endarrow-<%= chart_id%>); marker-start:url(#first-startarrow-<%= chart_id%>)"></line>
<line x1="410" y1="<%= second_item_height %>" x2="242.5" y2="<%= second_item_height %>" class="svg-stroke-<%= second_color %>" style="stroke-width:1; stroke-dasharray:0 2 2 2"></line>
<line x1="410" y1="<%= second_item_height %>" x2="410" y2="170" class="svg-stroke-<%= second_color %>" style="stroke-width:0.6; marker-end:url(#second-endarrow-<%= chart_id%>); marker-start:url(#second-startarrow-<%= chart_id%>)"></line>
<clipPath id="second-<%= chart_id %>">
<rect x="167.5" y="20" width="150.0" height="<%= second_item_height - 20 %>"></rect>
</clipPath>
<clipPath id="first-<%= chart_id %>">
<rect x="167.5" y="20" width="150.0" height="<%= first_item_height - 20 %>"></rect>
</clipPath>
<circle cx="242.5" cy="95" r="75" class="svg-fill-<%= second_color %>"></circle>
<circle cx="242.5" cy="95" r="75" class="svg-fill-<%= first_color %>" clip-path="url(#second-<%= chart_id %>)"></circle>
<circle cx="242.5" cy="95" r="74.5" fill="#F7F7F7" clip-path="url(#first-<%= chart_id %>)"></circle>
</svg>
</div>
</div>
Bubble Chart opt 3
<svg width="422" height="136" viewBox="0 0 422 136" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M87.2852 24.8707L168.285 24.8707" stroke="#00695C" stroke-dasharray="2 2" />
<path d="M87.7852 24.4283V132.441" stroke="#00695C" stroke-width="0.6" />
<path
d="M46.6183 34H40.4303V24.032H46.6183V24.984H41.4943V28.498H45.8623V29.45H41.4943V33.048H46.6183V34ZM54.0608 34H53.0528V29.758C53.0528 29.1607 52.9035 28.708 52.6048 28.4C52.3061 28.0827 51.8908 27.924 51.3588 27.924C50.8268 27.924 50.4068 28.0827 50.0988 28.4C49.8001 28.7173 49.6508 29.17 49.6508 29.758V34H48.6428V27.112H49.6508V27.868C50.1361 27.308 50.7801 27.028 51.5828 27.028C52.3295 27.028 52.9175 27.2427 53.3468 27.672C53.8228 28.1387 54.0608 28.778 54.0608 29.59V34ZM61.7821 30.822H57.1341C57.1341 31.5873 57.3068 32.1753 57.6521 32.586C57.9975 32.9967 58.5015 33.202 59.1641 33.202C59.5561 33.202 59.8828 33.1413 60.1441 33.02C60.4148 32.8987 60.6901 32.698 60.9701 32.418L61.6561 33.02C61.2828 33.3933 60.9095 33.664 60.5361 33.832C60.1628 34 59.6961 34.084 59.1361 34.084C58.1841 34.084 57.4421 33.7947 56.9101 33.216C56.3875 32.628 56.1261 31.7413 56.1261 30.556C56.1261 29.4453 56.3781 28.582 56.8821 27.966C57.3861 27.3407 58.0768 27.028 58.9541 27.028C59.8408 27.028 60.5315 27.3267 61.0261 27.924C61.5301 28.512 61.7821 29.3287 61.7821 30.374V30.822ZM60.7881 30.066C60.7508 29.534 60.6761 29.1513 60.5641 28.918C60.2375 28.2273 59.7008 27.882 58.9541 27.882C58.2075 27.882 57.6708 28.2273 57.3441 28.918C57.2321 29.1607 57.1621 29.5433 57.1341 30.066H60.7881ZM68.52 27.672L67.778 28.428C67.5913 28.2413 67.4093 28.1107 67.232 28.036C67.064 27.9613 66.8493 27.924 66.588 27.924C66.0933 27.924 65.692 28.1013 65.384 28.456C65.0853 28.8013 64.936 29.24 64.936 29.772V34H63.928V27.112H64.936V27.952C65.1226 27.6627 65.3886 27.4387 65.734 27.28C66.0886 27.112 66.4666 27.028 66.868 27.028C67.54 27.028 68.0906 27.2427 68.52 27.672ZM74.4787 34.21C74.4787 35.078 74.2221 35.7873 73.7087 36.338C73.1954 36.8887 72.4954 37.164 71.6087 37.164C71.1047 37.164 70.6801 37.094 70.3347 36.954C69.9987 36.814 69.6441 36.576 69.2707 36.24L69.9287 35.596C70.2087 35.848 70.4607 36.0253 70.6847 36.128C70.9087 36.2307 71.2074 36.282 71.5807 36.282C72.2154 36.282 72.6867 36.086 72.9947 35.694C73.3121 35.302 73.4707 34.7933 73.4707 34.168V33.09C73.0041 33.6873 72.3601 33.986 71.5387 33.986C70.8387 33.986 70.2834 33.7807 69.8727 33.37C69.3127 32.81 69.0327 31.8533 69.0327 30.5C69.0327 29.1467 69.3127 28.19 69.8727 27.63C70.2741 27.2287 70.8341 27.028 71.5527 27.028C72.3834 27.028 73.0274 27.3267 73.4847 27.924V27.112H74.4787V34.21ZM73.4007 31.452C73.4474 31.1813 73.4707 30.864 73.4707 30.5C73.4707 30.136 73.4474 29.8187 73.4007 29.548C73.3634 29.2773 73.2887 29.0113 73.1767 28.75C73.0647 28.4793 72.8874 28.274 72.6447 28.134C72.4114 27.994 72.1174 27.924 71.7627 27.924C71.4081 27.924 71.1094 27.994 70.8667 28.134C70.6241 28.274 70.4467 28.4793 70.3347 28.75C70.2227 29.0113 70.1434 29.2773 70.0967 29.548C70.0594 29.8187 70.0407 30.136 70.0407 30.5C70.0407 30.864 70.0594 31.1813 70.0967 31.452C70.1434 31.7227 70.2227 31.9933 70.3347 32.264C70.4467 32.5253 70.6241 32.726 70.8667 32.866C71.1094 33.006 71.4081 33.076 71.7627 33.076C72.1174 33.076 72.4114 33.006 72.6447 32.866C72.8874 32.726 73.0647 32.5253 73.1767 32.264C73.2887 31.9933 73.3634 31.7227 73.4007 31.452ZM81.8423 27.112L78.7063 35.666C78.5756 36.03 78.4123 36.3007 78.2163 36.478C77.8896 36.7953 77.4416 36.954 76.8723 36.954H76.4383V36.058H76.7463C77.0823 36.058 77.3249 35.9973 77.4743 35.876C77.6329 35.7547 77.7683 35.5307 77.8803 35.204L78.3703 33.86L75.8923 27.112H76.9843L78.8743 32.642L80.7503 27.112H81.8423ZM7.60761 45.116C7.43028 46.04 7.03361 46.768 6.41761 47.3C5.80161 47.8227 5.04561 48.084 4.14961 48.084C3.14161 48.084 2.31094 47.7573 1.65761 47.104C1.21894 46.6653 0.943609 46.1847 0.831609 45.662C0.719609 45.1393 0.663609 44.2573 0.663609 43.016C0.663609 41.7747 0.719609 40.8927 0.831609 40.37C0.943609 39.8473 1.21894 39.3667 1.65761 38.928C2.31094 38.2747 3.14161 37.948 4.14961 37.948C5.05494 37.948 5.81094 38.2093 6.41761 38.732C7.03361 39.2547 7.43028 39.9827 7.60761 40.916H6.51561C6.38494 40.2907 6.10961 39.8007 5.68961 39.446C5.27894 39.082 4.76561 38.9 4.14961 38.9C3.46828 38.9 2.89428 39.1333 2.42761 39.6C2.12894 39.908 1.93761 40.286 1.85361 40.734C1.76961 41.1727 1.72761 41.9333 1.72761 43.016C1.72761 44.0987 1.76961 44.864 1.85361 45.312C1.93761 45.7507 2.12894 46.124 2.42761 46.432C2.89428 46.8987 3.46828 47.132 4.14961 47.132C4.76561 47.132 5.28361 46.9547 5.70361 46.6C6.13294 46.236 6.41294 45.7413 6.54361 45.116H7.60761ZM15.0377 44.556C15.0377 45.816 14.7577 46.7307 14.1977 47.3C13.6937 47.8227 13.0357 48.084 12.2237 48.084C11.4117 48.084 10.7537 47.8227 10.2497 47.3C9.68967 46.7307 9.40967 45.816 9.40967 44.556C9.40967 43.2867 9.68967 42.372 10.2497 41.812C10.7537 41.2893 11.4117 41.028 12.2237 41.028C13.0357 41.028 13.6937 41.2893 14.1977 41.812C14.7577 42.372 15.0377 43.2867 15.0377 44.556ZM14.0297 44.556C14.0297 43.5013 13.8477 42.792 13.4837 42.428C13.1477 42.092 12.7277 41.924 12.2237 41.924C11.729 41.924 11.3137 42.092 10.9777 42.428C10.6043 42.8013 10.4177 43.5107 10.4177 44.556C10.4177 45.6013 10.6043 46.3107 10.9777 46.684C11.3137 47.02 11.729 47.188 12.2237 47.188C12.7277 47.188 13.1477 47.02 13.4837 46.684C13.8477 46.3107 14.0297 45.6013 14.0297 44.556ZM22.6155 48H21.6075V43.758C21.6075 43.1607 21.4582 42.708 21.1595 42.4C20.8608 42.0827 20.4455 41.924 19.9135 41.924C19.3815 41.924 18.9615 42.0827 18.6535 42.4C18.3548 42.7173 18.2055 43.17 18.2055 43.758V48H17.1975V41.112H18.2055V41.868C18.6908 41.308 19.3348 41.028 20.1375 41.028C20.8842 41.028 21.4722 41.2427 21.9015 41.672C22.3775 42.1387 22.6155 42.778 22.6155 43.59V48ZM30.0288 45.984C30.0288 46.6373 29.7722 47.1507 29.2588 47.524C28.7548 47.8973 28.0782 48.084 27.2288 48.084C26.0155 48.084 25.0728 47.7527 24.4008 47.09L25.0728 46.418C25.5768 46.95 26.2908 47.216 27.2148 47.216C27.7935 47.216 28.2415 47.1133 28.5588 46.908C28.8855 46.7027 29.0488 46.3993 29.0488 45.998C29.0488 45.3913 28.6662 45.0553 27.9008 44.99L26.7668 44.892C25.3948 44.78 24.7088 44.164 24.7088 43.044C24.7088 42.428 24.9422 41.938 25.4088 41.574C25.8755 41.21 26.4868 41.028 27.2428 41.028C28.2788 41.028 29.1048 41.2753 29.7208 41.77L29.0628 42.428C28.5868 42.064 27.9755 41.882 27.2288 41.882C26.7342 41.882 26.3515 41.98 26.0808 42.176C25.8195 42.372 25.6888 42.652 25.6888 43.016C25.6888 43.324 25.7868 43.5573 25.9828 43.716C26.1788 43.8747 26.4915 43.9773 26.9208 44.024L27.9988 44.122C28.6522 44.1873 29.1515 44.36 29.4968 44.64C29.8515 44.92 30.0288 45.368 30.0288 45.984ZM37.3521 48H36.3581V47.23C35.8635 47.7993 35.2148 48.084 34.4121 48.084C33.6561 48.084 33.0635 47.8693 32.6341 47.44C32.1675 46.9827 31.9341 46.3387 31.9341 45.508V41.112H32.9421V45.354C32.9421 45.9513 33.0868 46.4087 33.3761 46.726C33.6748 47.034 34.0901 47.188 34.6221 47.188C35.1541 47.188 35.5741 47.0293 35.8821 46.712C36.1901 46.3947 36.3441 45.942 36.3441 45.354V41.112H37.3521V48ZM49.7215 48H48.7135V43.758C48.7135 43.1607 48.5641 42.708 48.2655 42.4C47.9668 42.0827 47.5515 41.924 47.0195 41.924C46.5061 41.924 46.0908 42.078 45.7735 42.386C45.4561 42.694 45.2975 43.114 45.2975 43.646V48H44.2895V43.758C44.2895 43.1607 44.1401 42.708 43.8415 42.4C43.5428 42.0827 43.1275 41.924 42.5955 41.924C42.0635 41.924 41.6435 42.0827 41.3355 42.4C41.0275 42.7173 40.8735 43.17 40.8735 43.758V48H39.8655V41.112H40.8735V41.868C41.3588 41.308 42.0075 41.028 42.8195 41.028C43.7995 41.028 44.5041 41.4107 44.9335 42.176C45.4748 41.4107 46.2308 41.028 47.2015 41.028C47.9388 41.028 48.5315 41.2427 48.9795 41.672C49.4741 42.148 49.7215 42.7873 49.7215 43.59V48ZM57.6442 44.556C57.6442 45.9373 57.3642 46.9127 56.8042 47.482C56.4028 47.8833 55.8428 48.084 55.1242 48.084C54.3028 48.084 53.6542 47.7853 53.1782 47.188V51.08H52.1702V41.112H53.1782V41.924C53.6542 41.3267 54.3028 41.028 55.1242 41.028C55.8428 41.028 56.4028 41.2287 56.8042 41.63C57.3642 42.19 57.6442 43.1653 57.6442 44.556ZM56.5662 45.55C56.6128 45.27 56.6362 44.9387 56.6362 44.556C56.6362 44.1733 56.6128 43.842 56.5662 43.562C56.5288 43.282 56.4542 43.0113 56.3422 42.75C56.2302 42.4793 56.0528 42.274 55.8102 42.134C55.5675 41.994 55.2688 41.924 54.9142 41.924C54.6248 41.924 54.3728 41.9753 54.1582 42.078C53.9435 42.1713 53.7708 42.2973 53.6402 42.456C53.5188 42.6147 53.4208 42.8153 53.3462 43.058C53.2808 43.3007 53.2342 43.5387 53.2062 43.772C53.1875 43.996 53.1782 44.2573 53.1782 44.556C53.1782 44.8547 53.1875 45.1207 53.2062 45.354C53.2342 45.578 53.2808 45.8113 53.3462 46.054C53.4208 46.2967 53.5188 46.4973 53.6402 46.656C53.7708 46.8147 53.9435 46.9453 54.1582 47.048C54.3728 47.1413 54.6248 47.188 54.9142 47.188C55.2688 47.188 55.5675 47.118 55.8102 46.978C56.0528 46.838 56.2302 46.6373 56.3422 46.376C56.4542 46.1053 56.5288 45.83 56.5662 45.55ZM62.4451 48H61.7311C61.1617 48 60.7231 47.8273 60.4151 47.482C60.1164 47.1367 59.9671 46.6933 59.9671 46.152V41.882H59.0991V41.112H59.9671V38.998H60.9751V41.112H62.4451V41.882H60.9751V46.124C60.9751 46.796 61.2877 47.132 61.9131 47.132H62.4451V48ZM65.4555 48H64.4475V41.112H65.4555V48ZM65.5255 39.152H64.3915V38.018H65.5255V39.152ZM73.2388 44.556C73.2388 45.816 72.9588 46.7307 72.3988 47.3C71.8948 47.8227 71.2368 48.084 70.4248 48.084C69.6128 48.084 68.9548 47.8227 68.4508 47.3C67.8908 46.7307 67.6108 45.816 67.6108 44.556C67.6108 43.2867 67.8908 42.372 68.4508 41.812C68.9548 41.2893 69.6128 41.028 70.4248 41.028C71.2368 41.028 71.8948 41.2893 72.3988 41.812C72.9588 42.372 73.2388 43.2867 73.2388 44.556ZM72.2308 44.556C72.2308 43.5013 72.0488 42.792 71.6848 42.428C71.3488 42.092 70.9288 41.924 70.4248 41.924C69.9302 41.924 69.5148 42.092 69.1788 42.428C68.8055 42.8013 68.6188 43.5107 68.6188 44.556C68.6188 45.6013 68.8055 46.3107 69.1788 46.684C69.5148 47.02 69.9302 47.188 70.4248 47.188C70.9288 47.188 71.3488 47.02 71.6848 46.684C72.0488 46.3107 72.2308 45.6013 72.2308 44.556ZM80.8167 48H79.8087V43.758C79.8087 43.1607 79.6593 42.708 79.3607 42.4C79.062 42.0827 78.6467 41.924 78.1147 41.924C77.5827 41.924 77.1627 42.0827 76.8547 42.4C76.556 42.7173 76.4067 43.17 76.4067 43.758V48H75.3987V41.112H76.4067V41.868C76.892 41.308 77.536 41.028 78.3387 41.028C79.0853 41.028 79.6733 41.2427 80.1027 41.672C80.5787 42.1387 80.8167 42.778 80.8167 43.59V48Z"
fill="#00695C" />
<path d="M224.285 102.871H300.285" stroke="#58A195" stroke-dasharray="2 2" />
<path d="M30.2129 132.161V132.441" stroke="#7EC689" stroke-width="0.6" />
<path
d="M282.817 95.8707H278.101V95.1027L281.473 90.8187C281.793 90.4027 281.953 89.9827 281.953 89.5587C281.953 89.0947 281.821 88.7227 281.557 88.4427C281.293 88.1627 280.929 88.0227 280.465 88.0227C280.033 88.0227 279.677 88.1507 279.397 88.4067C279.117 88.6627 278.977 89.0507 278.977 89.5707H278.113C278.113 88.8907 278.329 88.3347 278.761 87.9027C279.193 87.4707 279.761 87.2547 280.465 87.2547C281.169 87.2547 281.737 87.4667 282.169 87.8907C282.601 88.3067 282.817 88.8627 282.817 89.5587C282.817 89.8867 282.765 90.1787 282.661 90.4347C282.557 90.6907 282.381 90.9747 282.133 91.2867L279.145 95.1027H282.817V95.8707ZM289.087 95.8707H284.371V95.1027L287.743 90.8187C288.063 90.4027 288.223 89.9827 288.223 89.5587C288.223 89.0947 288.091 88.7227 287.827 88.4427C287.563 88.1627 287.199 88.0227 286.735 88.0227C286.303 88.0227 285.947 88.1507 285.667 88.4067C285.387 88.6627 285.247 89.0507 285.247 89.5707H284.383C284.383 88.8907 284.599 88.3347 285.031 87.9027C285.463 87.4707 286.031 87.2547 286.735 87.2547C287.439 87.2547 288.007 87.4667 288.439 87.8907C288.871 88.3067 289.087 88.8627 289.087 89.5587C289.087 89.8867 289.035 90.1787 288.931 90.4347C288.827 90.6907 288.651 90.9747 288.403 91.2867L285.415 95.1027H289.087V95.8707ZM293.148 90.0987V88.8867C293.148 88.1907 292.84 87.8427 292.224 87.8427C291.6 87.8427 291.288 88.1907 291.288 88.8867V90.0987C291.288 90.7867 291.6 91.1307 292.224 91.1307C292.84 91.1307 293.148 90.7867 293.148 90.0987ZM293.844 90.1227C293.844 90.6107 293.692 91.0027 293.388 91.2987C293.092 91.5867 292.704 91.7307 292.224 91.7307C291.744 91.7307 291.352 91.5867 291.048 91.2987C290.752 91.0027 290.604 90.6107 290.604 90.1227V88.8627C290.604 88.3747 290.756 87.9827 291.06 87.6867C291.364 87.3907 291.752 87.2427 292.224 87.2427C292.696 87.2427 293.084 87.3907 293.388 87.6867C293.692 87.9827 293.844 88.3747 293.844 88.8627V90.1227ZM298.356 94.3107V93.1107C298.356 92.4147 298.048 92.0667 297.432 92.0667C296.808 92.0667 296.496 92.4147 296.496 93.1107V94.3107C296.496 95.0067 296.808 95.3547 297.432 95.3547C298.048 95.3547 298.356 95.0067 298.356 94.3107ZM299.052 94.3467C299.052 94.8347 298.9 95.2267 298.596 95.5227C298.292 95.8107 297.904 95.9547 297.432 95.9547C296.96 95.9547 296.572 95.8107 296.268 95.5227C295.964 95.2267 295.812 94.8347 295.812 94.3467V93.0867C295.812 92.5987 295.964 92.2067 296.268 91.9107C296.572 91.6147 296.96 91.4667 297.432 91.4667C297.904 91.4667 298.292 91.6147 298.596 91.9107C298.9 92.2067 299.052 92.5987 299.052 93.0867V94.3467ZM297.192 87.3267L293.184 95.8707H292.464L296.472 87.3267H297.192Z"
fill="#58A195" />
<path
d="M209.928 132.441C245.889 132.441 275.042 103.289 275.042 67.327C275.042 31.3655 245.889 2.21295 209.928 2.21295C173.966 2.21295 144.813 31.3655 144.813 67.327C144.813 103.289 173.966 132.441 209.928 132.441Z"
fill="#00695C" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M154.722 101.871C166.235 120.233 186.656 132.441 209.928 132.441C233.2 132.441 253.62 120.233 265.134 101.871H154.722Z"
fill="#58A195" />
<path d="M86.0531 25.9582L87.7852 22.9582L89.5172 25.9582H86.0531Z" fill="#00695C" stroke="#00695C" />
<path d="M89.5172 131.871L87.7852 134.871L86.0531 131.871H89.5172Z" fill="#00695C" stroke="#00695C" />
<path d="M298 103L298 132" stroke="#58A195" stroke-width="0.6" />
<path d="M296.553 102.958L298.285 99.9582L300.017 102.958H296.553Z" fill="#58A195" stroke="#58A195" />
<path d="M300.017 131.871L298.285 134.871L296.553 131.871H300.017Z" fill="#58A195" stroke="#58A195" />
<path
d="M311.517 92.8287C311.517 93.7154 311.228 94.4294 310.649 94.9707C310.08 95.5027 309.342 95.7687 308.437 95.7687H305.791V99.8707H304.727V89.9027H308.437C309.352 89.9027 310.094 90.1734 310.663 90.7147C311.232 91.2467 311.517 91.9514 311.517 92.8287ZM309.879 94.3127C310.262 93.9674 310.453 93.4727 310.453 92.8287C310.453 92.1847 310.262 91.6947 309.879 91.3587C309.506 91.0227 308.997 90.8547 308.353 90.8547H305.791V94.8167H308.353C308.997 94.8167 309.506 94.6487 309.879 94.3127ZM318.505 96.6927H313.857C313.857 97.4581 314.029 98.0461 314.375 98.4567C314.72 98.8674 315.224 99.0727 315.887 99.0727C316.279 99.0727 316.605 99.0121 316.867 98.8907C317.137 98.7694 317.413 98.5687 317.693 98.2887L318.379 98.8907C318.005 99.2641 317.632 99.5347 317.259 99.7027C316.885 99.8707 316.419 99.9547 315.859 99.9547C314.907 99.9547 314.165 99.6654 313.633 99.0867C313.11 98.4987 312.849 97.6121 312.849 96.4267C312.849 95.3161 313.101 94.4527 313.605 93.8367C314.109 93.2114 314.799 92.8987 315.677 92.8987C316.563 92.8987 317.254 93.1974 317.749 93.7947C318.253 94.3827 318.505 95.1994 318.505 96.2447V96.6927ZM317.511 95.9367C317.473 95.4047 317.399 95.0221 317.287 94.7887C316.96 94.0981 316.423 93.7527 315.677 93.7527C314.93 93.7527 314.393 94.0981 314.067 94.7887C313.955 95.0314 313.885 95.4141 313.857 95.9367H317.511ZM325.929 96.6927H321.281C321.281 97.4581 321.453 98.0461 321.799 98.4567C322.144 98.8674 322.648 99.0727 323.311 99.0727C323.703 99.0727 324.029 99.0121 324.291 98.8907C324.561 98.7694 324.837 98.5687 325.117 98.2887L325.803 98.8907C325.429 99.2641 325.056 99.5347 324.683 99.7027C324.309 99.8707 323.843 99.9547 323.283 99.9547C322.331 99.9547 321.589 99.6654 321.057 99.0867C320.534 98.4987 320.273 97.6121 320.273 96.4267C320.273 95.3161 320.525 94.4527 321.029 93.8367C321.533 93.2114 322.223 92.8987 323.101 92.8987C323.987 92.8987 324.678 93.1974 325.173 93.7947C325.677 94.3827 325.929 95.1994 325.929 96.2447V96.6927ZM324.935 95.9367C324.897 95.4047 324.823 95.0221 324.711 94.7887C324.384 94.0981 323.847 93.7527 323.101 93.7527C322.354 93.7527 321.817 94.0981 321.491 94.7887C321.379 95.0314 321.309 95.4141 321.281 95.9367H324.935ZM332.666 93.5427L331.924 94.2987C331.738 94.1121 331.556 93.9814 331.378 93.9067C331.21 93.8321 330.996 93.7947 330.734 93.7947C330.24 93.7947 329.838 93.9721 329.53 94.3267C329.232 94.6721 329.082 95.1107 329.082 95.6427V99.8707H328.074V92.9827H329.082V93.8227C329.269 93.5334 329.535 93.3094 329.88 93.1507C330.235 92.9827 330.613 92.8987 331.014 92.8987C331.686 92.8987 332.237 93.1134 332.666 93.5427ZM342.535 100.081C342.535 100.949 342.279 101.658 341.765 102.209C341.252 102.759 340.552 103.035 339.665 103.035C339.161 103.035 338.737 102.965 338.391 102.825C338.055 102.685 337.701 102.447 337.327 102.111L337.985 101.467C338.265 101.719 338.517 101.896 338.741 101.999C338.965 102.101 339.264 102.153 339.637 102.153C340.272 102.153 340.743 101.957 341.051 101.565C341.369 101.173 341.527 100.664 341.527 100.039V98.9607C341.061 99.5581 340.417 99.8567 339.595 99.8567C338.895 99.8567 338.34 99.6514 337.929 99.2407C337.369 98.6807 337.089 97.7241 337.089 96.3707C337.089 95.0174 337.369 94.0607 337.929 93.5007C338.331 93.0994 338.891 92.8987 339.609 92.8987C340.44 92.8987 341.084 93.1974 341.541 93.7947V92.9827H342.535V100.081ZM341.457 97.3227C341.504 97.0521 341.527 96.7347 341.527 96.3707C341.527 96.0067 341.504 95.6894 341.457 95.4187C341.42 95.1481 341.345 94.8821 341.233 94.6207C341.121 94.3501 340.944 94.1447 340.701 94.0047C340.468 93.8647 340.174 93.7947 339.819 93.7947C339.465 93.7947 339.166 93.8647 338.923 94.0047C338.681 94.1447 338.503 94.3501 338.391 94.6207C338.279 94.8821 338.2 95.1481 338.153 95.4187C338.116 95.6894 338.097 96.0067 338.097 96.3707C338.097 96.7347 338.116 97.0521 338.153 97.3227C338.2 97.5934 338.279 97.8641 338.391 98.1347C338.503 98.3961 338.681 98.5967 338.923 98.7367C339.166 98.8767 339.465 98.9467 339.819 98.9467C340.174 98.9467 340.468 98.8767 340.701 98.7367C340.944 98.5967 341.121 98.3961 341.233 98.1347C341.345 97.8641 341.42 97.5934 341.457 97.3227ZM349.647 93.5427L348.905 94.2987C348.718 94.1121 348.536 93.9814 348.359 93.9067C348.191 93.8321 347.976 93.7947 347.715 93.7947C347.22 93.7947 346.819 93.9721 346.511 94.3267C346.212 94.6721 346.063 95.1107 346.063 95.6427V99.8707H345.055V92.9827H346.063V93.8227C346.25 93.5334 346.516 93.3094 346.861 93.1507C347.216 92.9827 347.594 92.8987 347.995 92.8987C348.667 92.8987 349.218 93.1134 349.647 93.5427ZM355.788 96.4267C355.788 97.6867 355.508 98.6014 354.948 99.1707C354.444 99.6934 353.786 99.9547 352.974 99.9547C352.162 99.9547 351.504 99.6934 351 99.1707C350.44 98.6014 350.16 97.6867 350.16 96.4267C350.16 95.1574 350.44 94.2427 351 93.6827C351.504 93.1601 352.162 92.8987 352.974 92.8987C353.786 92.8987 354.444 93.1601 354.948 93.6827C355.508 94.2427 355.788 95.1574 355.788 96.4267ZM354.78 96.4267C354.78 95.3721 354.598 94.6627 354.234 94.2987C353.898 93.9627 353.478 93.7947 352.974 93.7947C352.479 93.7947 352.064 93.9627 351.728 94.2987C351.354 94.6721 351.168 95.3814 351.168 96.4267C351.168 97.4721 351.354 98.1814 351.728 98.5547C352.064 98.8907 352.479 99.0587 352.974 99.0587C353.478 99.0587 353.898 98.8907 354.234 98.5547C354.598 98.1814 354.78 97.4721 354.78 96.4267ZM363.296 99.8707H362.302V99.1007C361.807 99.6701 361.158 99.9547 360.356 99.9547C359.6 99.9547 359.007 99.7401 358.578 99.3107C358.111 98.8534 357.878 98.2094 357.878 97.3787V92.9827H358.886V97.2247C358.886 97.8221 359.03 98.2794 359.32 98.5967C359.618 98.9047 360.034 99.0587 360.566 99.0587C361.098 99.0587 361.518 98.9001 361.826 98.5827C362.134 98.2654 362.288 97.8127 362.288 97.2247V92.9827H363.296V99.8707ZM371.283 96.4267C371.283 97.8081 371.003 98.7834 370.443 99.3527C370.041 99.7541 369.481 99.9547 368.763 99.9547C367.941 99.9547 367.293 99.6561 366.817 99.0587V102.951H365.809V92.9827H366.817V93.7947C367.293 93.1974 367.941 92.8987 368.763 92.8987C369.481 92.8987 370.041 93.0994 370.443 93.5007C371.003 94.0607 371.283 95.0361 371.283 96.4267ZM370.205 97.4207C370.251 97.1407 370.275 96.8094 370.275 96.4267C370.275 96.0441 370.251 95.7127 370.205 95.4327C370.167 95.1527 370.093 94.8821 369.981 94.6207C369.869 94.3501 369.691 94.1447 369.449 94.0047C369.206 93.8647 368.907 93.7947 368.553 93.7947C368.263 93.7947 368.011 93.8461 367.797 93.9487C367.582 94.0421 367.409 94.1681 367.279 94.3267C367.157 94.4854 367.059 94.6861 366.985 94.9287C366.919 95.1714 366.873 95.4094 366.845 95.6427C366.826 95.8667 366.817 96.1281 366.817 96.4267C366.817 96.7254 366.826 96.9914 366.845 97.2247C366.873 97.4487 366.919 97.6821 366.985 97.9247C367.059 98.1674 367.157 98.3681 367.279 98.5267C367.409 98.6854 367.582 98.8161 367.797 98.9187C368.011 99.0121 368.263 99.0587 368.553 99.0587C368.907 99.0587 369.206 98.9887 369.449 98.8487C369.691 98.7087 369.869 98.5081 369.981 98.2467C370.093 97.9761 370.167 97.7007 370.205 97.4207ZM382.202 96.6927H377.554C377.554 97.4581 377.727 98.0461 378.072 98.4567C378.417 98.8674 378.921 99.0727 379.584 99.0727C379.976 99.0727 380.303 99.0121 380.564 98.8907C380.835 98.7694 381.11 98.5687 381.39 98.2887L382.076 98.8907C381.703 99.2641 381.329 99.5347 380.956 99.7027C380.583 99.8707 380.116 99.9547 379.556 99.9547C378.604 99.9547 377.862 99.6654 377.33 99.0867C376.807 98.4987 376.546 97.6121 376.546 96.4267C376.546 95.3161 376.798 94.4527 377.302 93.8367C377.806 93.2114 378.497 92.8987 379.374 92.8987C380.261 92.8987 380.951 93.1974 381.446 93.7947C381.95 94.3827 382.202 95.1994 382.202 96.2447V96.6927ZM381.208 95.9367C381.171 95.4047 381.096 95.0221 380.984 94.7887C380.657 94.0981 380.121 93.7527 379.374 93.7527C378.627 93.7527 378.091 94.0981 377.764 94.7887C377.652 95.0314 377.582 95.4141 377.554 95.9367H381.208ZM389.766 99.8707H388.758V95.6287C388.758 95.0314 388.609 94.5787 388.31 94.2707C388.011 93.9534 387.596 93.7947 387.064 93.7947C386.532 93.7947 386.112 93.9534 385.804 94.2707C385.505 94.5881 385.356 95.0407 385.356 95.6287V99.8707H384.348V92.9827H385.356V93.7387C385.841 93.1787 386.485 92.8987 387.288 92.8987C388.035 92.8987 388.623 93.1134 389.052 93.5427C389.528 94.0094 389.766 94.6487 389.766 95.4607V99.8707ZM394.855 99.8707H394.141C393.572 99.8707 393.133 99.6981 392.825 99.3527C392.527 99.0074 392.377 98.5641 392.377 98.0227V93.7527H391.509V92.9827H392.377V90.8687H393.385V92.9827H394.855V93.7527H393.385V97.9947C393.385 98.6667 393.698 99.0027 394.323 99.0027H394.855V99.8707ZM397.866 99.8707H396.858V92.9827H397.866V99.8707ZM397.936 91.0227H396.802V89.8887H397.936V91.0227ZM403.031 99.8707H402.317C401.748 99.8707 401.309 99.6981 401.001 99.3527C400.702 99.0074 400.553 98.5641 400.553 98.0227V93.7527H399.685V92.9827H400.553V90.8687H401.561V92.9827H403.031V93.7527H401.561V97.9947C401.561 98.6667 401.874 99.0027 402.499 99.0027H403.031V99.8707ZM406.041 99.8707H405.033V92.9827H406.041V99.8707ZM406.111 91.0227H404.977V89.8887H406.111V91.0227ZM413.839 96.6927H409.191C409.191 97.4581 409.363 98.0461 409.709 98.4567C410.054 98.8674 410.558 99.0727 411.221 99.0727C411.613 99.0727 411.939 99.0121 412.201 98.8907C412.471 98.7694 412.747 98.5687 413.027 98.2887L413.713 98.8907C413.339 99.2641 412.966 99.5347 412.593 99.7027C412.219 99.8707 411.753 99.9547 411.193 99.9547C410.241 99.9547 409.499 99.6654 408.967 99.0867C408.444 98.4987 408.183 97.6121 408.183 96.4267C408.183 95.3161 408.435 94.4527 408.939 93.8367C409.443 93.2114 410.133 92.8987 411.011 92.8987C411.897 92.8987 412.588 93.1974 413.083 93.7947C413.587 94.3827 413.839 95.1994 413.839 96.2447V96.6927ZM412.845 95.9367C412.807 95.4047 412.733 95.0221 412.621 94.7887C412.294 94.0981 411.757 93.7527 411.011 93.7527C410.264 93.7527 409.727 94.0981 409.401 94.7887C409.289 95.0314 409.219 95.4141 409.191 95.9367H412.845ZM420.955 97.8547C420.955 98.5081 420.698 99.0214 420.185 99.3947C419.681 99.7681 419.004 99.9547 418.155 99.9547C416.941 99.9547 415.999 99.6234 415.327 98.9607L415.999 98.2887C416.503 98.8207 417.217 99.0867 418.141 99.0867C418.719 99.0867 419.167 98.9841 419.485 98.7787C419.811 98.5734 419.975 98.2701 419.975 97.8687C419.975 97.2621 419.592 96.9261 418.827 96.8607L417.693 96.7627C416.321 96.6507 415.635 96.0347 415.635 94.9147C415.635 94.2987 415.868 93.8087 416.335 93.4447C416.801 93.0807 417.413 92.8987 418.169 92.8987C419.205 92.8987 420.031 93.1461 420.647 93.6407L419.989 94.2987C419.513 93.9347 418.901 93.7527 418.155 93.7527C417.66 93.7527 417.277 93.8507 417.007 94.0467C416.745 94.2427 416.615 94.5227 416.615 94.8867C416.615 95.1947 416.713 95.4281 416.909 95.5867C417.105 95.7454 417.417 95.8481 417.847 95.8947L418.925 95.9927C419.578 96.0581 420.077 96.2307 420.423 96.5107C420.777 96.7907 420.955 97.2387 420.955 97.8547ZM313.267 106.983L311.097 113.871H310.159L308.353 108.523L306.561 113.871H305.623L303.439 106.983H304.531L306.113 112.513L307.919 106.983H308.787L310.607 112.513L312.175 106.983H313.267ZM315.684 113.871H314.676V106.983H315.684V113.871ZM315.754 105.023H314.62V103.889H315.754V105.023ZM320.849 113.871H320.135C319.566 113.871 319.127 113.698 318.819 113.353C318.521 113.007 318.371 112.564 318.371 112.023V107.753H317.503V106.983H318.371V104.869H319.379V106.983H320.849V107.753H319.379V111.995C319.379 112.667 319.692 113.003 320.317 113.003H320.849V113.871ZM328.27 113.871H327.262V109.615C327.262 109.017 327.112 108.565 326.814 108.257C326.524 107.949 326.114 107.795 325.582 107.795C325.04 107.795 324.616 107.949 324.308 108.257C324.009 108.565 323.86 109.017 323.86 109.615V113.871H322.852V103.903H323.86V107.739C324.364 107.179 325.008 106.899 325.792 106.899C326.566 106.899 327.173 107.127 327.612 107.585C328.05 108.042 328.27 108.663 328.27 109.447V113.871ZM339.141 112.933C338.787 113.315 338.441 113.581 338.105 113.731C337.769 113.88 337.359 113.955 336.873 113.955C335.968 113.955 335.231 113.651 334.661 113.045C334.101 112.438 333.821 111.565 333.821 110.427C333.821 109.288 334.101 108.415 334.661 107.809C335.231 107.202 335.968 106.899 336.873 106.899C337.359 106.899 337.769 106.973 338.105 107.123C338.441 107.272 338.787 107.538 339.141 107.921L338.455 108.565C338.194 108.275 337.947 108.075 337.713 107.963C337.48 107.851 337.2 107.795 336.873 107.795C336.173 107.795 335.641 108.056 335.277 108.579C334.979 108.999 334.829 109.615 334.829 110.427C334.829 111.239 334.979 111.855 335.277 112.275C335.641 112.797 336.173 113.059 336.873 113.059C337.2 113.059 337.48 113.003 337.713 112.891C337.947 112.769 338.194 112.564 338.455 112.275L339.141 112.933ZM346.411 113.871H345.417V113.101C344.922 113.67 344.273 113.955 343.471 113.955C342.715 113.955 342.122 113.74 341.693 113.311C341.226 112.853 340.993 112.209 340.993 111.379V106.983H342.001V111.225C342.001 111.822 342.145 112.279 342.435 112.597C342.733 112.905 343.149 113.059 343.681 113.059C344.213 113.059 344.633 112.9 344.941 112.583C345.249 112.265 345.403 111.813 345.403 111.225V106.983H346.411V113.871ZM353.516 107.543L352.774 108.299C352.587 108.112 352.405 107.981 352.228 107.907C352.06 107.832 351.845 107.795 351.584 107.795C351.089 107.795 350.688 107.972 350.38 108.327C350.081 108.672 349.932 109.111 349.932 109.643V113.871H348.924V106.983H349.932V107.823C350.119 107.533 350.385 107.309 350.73 107.151C351.085 106.983 351.463 106.899 351.864 106.899C352.536 106.899 353.087 107.113 353.516 107.543ZM359.409 107.543L358.667 108.299C358.48 108.112 358.298 107.981 358.121 107.907C357.953 107.832 357.738 107.795 357.477 107.795C356.982 107.795 356.581 107.972 356.273 108.327C355.974 108.672 355.825 109.111 355.825 109.643V113.871H354.817V106.983H355.825V107.823C356.011 107.533 356.277 107.309 356.623 107.151C356.977 106.983 357.355 106.899 357.757 106.899C358.429 106.899 358.979 107.113 359.409 107.543ZM365.563 110.693H360.915C360.915 111.458 361.088 112.046 361.433 112.457C361.779 112.867 362.283 113.073 362.945 113.073C363.337 113.073 363.664 113.012 363.925 112.891C364.196 112.769 364.471 112.569 364.751 112.289L365.437 112.891C365.064 113.264 364.691 113.535 364.317 113.703C363.944 113.871 363.477 113.955 362.917 113.955C361.965 113.955 361.223 113.665 360.691 113.087C360.169 112.499 359.907 111.612 359.907 110.427C359.907 109.316 360.159 108.453 360.663 107.837C361.167 107.211 361.858 106.899 362.735 106.899C363.622 106.899 364.313 107.197 364.807 107.795C365.311 108.383 365.563 109.199 365.563 110.245V110.693ZM364.569 109.937C364.532 109.405 364.457 109.022 364.345 108.789C364.019 108.098 363.482 107.753 362.735 107.753C361.989 107.753 361.452 108.098 361.125 108.789C361.013 109.031 360.943 109.414 360.915 109.937H364.569ZM373.127 113.871H372.119V109.629C372.119 109.031 371.97 108.579 371.671 108.271C371.373 107.953 370.957 107.795 370.425 107.795C369.893 107.795 369.473 107.953 369.165 108.271C368.867 108.588 368.717 109.041 368.717 109.629V113.871H367.709V106.983H368.717V107.739C369.203 107.179 369.847 106.899 370.649 106.899C371.396 106.899 371.984 107.113 372.413 107.543C372.889 108.009 373.127 108.649 373.127 109.461V113.871ZM378.217 113.871H377.503C376.933 113.871 376.495 113.698 376.187 113.353C375.888 113.007 375.739 112.564 375.739 112.023V107.753H374.871V106.983H375.739V104.869H376.747V106.983H378.217V107.753H376.747V111.995C376.747 112.667 377.059 113.003 377.685 113.003H378.217V113.871ZM383.859 110.567H380.023V109.629H383.859V110.567ZM391.024 106.983L387.888 115.537C387.757 115.901 387.594 116.171 387.398 116.349C387.071 116.666 386.623 116.825 386.054 116.825H385.62V115.929H385.928C386.264 115.929 386.507 115.868 386.656 115.747C386.815 115.625 386.95 115.401 387.062 115.075L387.552 113.731L385.074 106.983H386.166L388.056 112.513L389.932 106.983H391.024ZM397.583 110.693H392.935C392.935 111.458 393.108 112.046 393.453 112.457C393.798 112.867 394.302 113.073 394.965 113.073C395.357 113.073 395.684 113.012 395.945 112.891C396.216 112.769 396.491 112.569 396.771 112.289L397.457 112.891C397.084 113.264 396.71 113.535 396.337 113.703C395.964 113.871 395.497 113.955 394.937 113.955C393.985 113.955 393.243 113.665 392.711 113.087C392.188 112.499 391.927 111.612 391.927 110.427C391.927 109.316 392.179 108.453 392.683 107.837C393.187 107.211 393.878 106.899 394.755 106.899C395.642 106.899 396.332 107.197 396.827 107.795C397.331 108.383 397.583 109.199 397.583 110.245V110.693ZM396.589 109.937C396.552 109.405 396.477 109.022 396.365 108.789C396.038 108.098 395.502 107.753 394.755 107.753C394.008 107.753 393.472 108.098 393.145 108.789C393.033 109.031 392.963 109.414 392.935 109.937H396.589ZM404.643 113.871H403.635V113.213C403.364 113.483 403.079 113.675 402.781 113.787C402.482 113.899 402.104 113.955 401.647 113.955C400.779 113.955 400.13 113.745 399.701 113.325C399.355 112.989 399.183 112.522 399.183 111.925C399.183 111.309 399.388 110.823 399.799 110.469C400.219 110.114 400.811 109.937 401.577 109.937H403.635V109.279C403.635 108.765 403.495 108.387 403.215 108.145C402.944 107.893 402.496 107.767 401.871 107.767C401.441 107.767 401.096 107.827 400.835 107.949C400.583 108.07 400.349 108.275 400.135 108.565L399.449 107.935C399.738 107.543 400.069 107.272 400.443 107.123C400.816 106.973 401.297 106.899 401.885 106.899C403.723 106.899 404.643 107.664 404.643 109.195V113.871ZM403.635 111.435V110.693H401.717C400.681 110.693 400.163 111.099 400.163 111.911C400.163 112.695 400.695 113.087 401.759 113.087C402.44 113.087 402.949 112.933 403.285 112.625C403.518 112.401 403.635 112.004 403.635 111.435ZM411.69 107.543L410.948 108.299C410.761 108.112 410.579 107.981 410.402 107.907C410.234 107.832 410.019 107.795 409.758 107.795C409.263 107.795 408.862 107.972 408.554 108.327C408.255 108.672 408.106 109.111 408.106 109.643V113.871H407.098V106.983H408.106V107.823C408.293 107.533 408.559 107.309 408.904 107.151C409.259 106.983 409.637 106.899 410.038 106.899C410.71 106.899 411.261 107.113 411.69 107.543ZM307.191 127.871H306.477C305.908 127.871 305.469 127.698 305.161 127.353C304.862 127.007 304.713 126.564 304.713 126.023V121.753H303.845V120.983H304.713V118.869H305.721V120.983H307.191V121.753H305.721V125.995C305.721 126.667 306.034 127.003 306.659 127.003H307.191V127.871ZM314.039 127.871H313.031V127.213C312.761 127.483 312.476 127.675 312.177 127.787C311.879 127.899 311.501 127.955 311.043 127.955C310.175 127.955 309.527 127.745 309.097 127.325C308.752 126.989 308.579 126.522 308.579 125.925C308.579 125.309 308.785 124.823 309.195 124.469C309.615 124.114 310.208 123.937 310.973 123.937H313.031V123.279C313.031 122.765 312.891 122.387 312.611 122.145C312.341 121.893 311.893 121.767 311.267 121.767C310.838 121.767 310.493 121.827 310.231 121.949C309.979 122.07 309.746 122.275 309.531 122.565L308.845 121.935C309.135 121.543 309.466 121.272 309.839 121.123C310.213 120.973 310.693 120.899 311.281 120.899C313.12 120.899 314.039 121.664 314.039 123.195V127.871ZM313.031 125.435V124.693H311.113C310.077 124.693 309.559 125.099 309.559 125.911C309.559 126.695 310.091 127.087 311.155 127.087C311.837 127.087 312.345 126.933 312.681 126.625C312.915 126.401 313.031 126.004 313.031 125.435ZM321.086 121.543L320.344 122.299C320.158 122.112 319.976 121.981 319.798 121.907C319.63 121.832 319.416 121.795 319.154 121.795C318.66 121.795 318.258 121.972 317.95 122.327C317.652 122.672 317.502 123.111 317.502 123.643V127.871H316.494V120.983H317.502V121.823C317.689 121.533 317.955 121.309 318.3 121.151C318.655 120.983 319.033 120.899 319.434 120.899C320.106 120.899 320.657 121.113 321.086 121.543ZM327.045 128.081C327.045 128.949 326.788 129.658 326.275 130.209C325.762 130.759 325.062 131.035 324.175 131.035C323.671 131.035 323.246 130.965 322.901 130.825C322.565 130.685 322.21 130.447 321.837 130.111L322.495 129.467C322.775 129.719 323.027 129.896 323.251 129.999C323.475 130.101 323.774 130.153 324.147 130.153C324.782 130.153 325.253 129.957 325.561 129.565C325.878 129.173 326.037 128.664 326.037 128.039V126.961C325.57 127.558 324.926 127.857 324.105 127.857C323.405 127.857 322.85 127.651 322.439 127.241C321.879 126.681 321.599 125.724 321.599 124.371C321.599 123.017 321.879 122.061 322.439 121.501C322.84 121.099 323.4 120.899 324.119 120.899C324.95 120.899 325.594 121.197 326.051 121.795V120.983H327.045V128.081ZM325.967 125.323C326.014 125.052 326.037 124.735 326.037 124.371C326.037 124.007 326.014 123.689 325.967 123.419C325.93 123.148 325.855 122.882 325.743 122.621C325.631 122.35 325.454 122.145 325.211 122.005C324.978 121.865 324.684 121.795 324.329 121.795C323.974 121.795 323.676 121.865 323.433 122.005C323.19 122.145 323.013 122.35 322.901 122.621C322.789 122.882 322.71 123.148 322.663 123.419C322.626 123.689 322.607 124.007 322.607 124.371C322.607 124.735 322.626 125.052 322.663 125.323C322.71 125.593 322.789 125.864 322.901 126.135C323.013 126.396 323.19 126.597 323.433 126.737C323.676 126.877 323.974 126.947 324.329 126.947C324.684 126.947 324.978 126.877 325.211 126.737C325.454 126.597 325.631 126.396 325.743 126.135C325.855 125.864 325.93 125.593 325.967 125.323ZM334.843 124.693H330.195C330.195 125.458 330.367 126.046 330.713 126.457C331.058 126.867 331.562 127.073 332.225 127.073C332.617 127.073 332.943 127.012 333.205 126.891C333.475 126.769 333.751 126.569 334.031 126.289L334.717 126.891C334.343 127.264 333.97 127.535 333.597 127.703C333.223 127.871 332.757 127.955 332.197 127.955C331.245 127.955 330.503 127.665 329.971 127.087C329.448 126.499 329.187 125.612 329.187 124.427C329.187 123.316 329.439 122.453 329.943 121.837C330.447 121.211 331.137 120.899 332.015 120.899C332.901 120.899 333.592 121.197 334.087 121.795C334.591 122.383 334.843 123.199 334.843 124.245V124.693ZM333.849 123.937C333.811 123.405 333.737 123.022 333.625 122.789C333.298 122.098 332.761 121.753 332.015 121.753C331.268 121.753 330.731 122.098 330.405 122.789C330.293 123.031 330.223 123.414 330.195 123.937H333.849ZM339.635 127.871H338.921C338.351 127.871 337.913 127.698 337.605 127.353C337.306 127.007 337.157 126.564 337.157 126.023V121.753H336.289V120.983H337.157V118.869H338.165V120.983H339.635V121.753H338.165V125.995C338.165 126.667 338.477 127.003 339.103 127.003H339.635V127.871Z"
fill="#58A195" />
<path
d="M95.2452 18.8707H94.3812V11.2867L92.7852 12.6907V11.7067L94.3812 10.3267H95.2452V18.8707ZM103.027 16.5907C103.027 17.2867 102.803 17.8547 102.355 18.2947C101.915 18.7267 101.359 18.9427 100.687 18.9427C100.007 18.9427 99.4467 18.7267 99.0067 18.2947C98.5667 17.8627 98.3467 17.2947 98.3467 16.5907V12.6067C98.3467 11.9027 98.5667 11.3347 99.0067 10.9027C99.4467 10.4707 100.007 10.2547 100.687 10.2547C101.359 10.2547 101.915 10.4747 102.355 10.9147C102.803 11.3467 103.027 11.9107 103.027 12.6067V16.5907ZM102.163 16.5427V12.6547C102.163 12.1747 102.031 11.7827 101.767 11.4787C101.511 11.1747 101.151 11.0227 100.687 11.0227C100.223 11.0227 99.8587 11.1747 99.5947 11.4787C99.3387 11.7827 99.2107 12.1747 99.2107 12.6547V16.5427C99.2107 17.0227 99.3387 17.4147 99.5947 17.7187C99.8587 18.0227 100.223 18.1747 100.687 18.1747C101.151 18.1747 101.511 18.0227 101.767 17.7187C102.031 17.4147 102.163 17.0227 102.163 16.5427ZM109.296 16.5907C109.296 17.2867 109.072 17.8547 108.624 18.2947C108.184 18.7267 107.628 18.9427 106.956 18.9427C106.276 18.9427 105.716 18.7267 105.276 18.2947C104.836 17.8627 104.616 17.2947 104.616 16.5907V12.6067C104.616 11.9027 104.836 11.3347 105.276 10.9027C105.716 10.4707 106.276 10.2547 106.956 10.2547C107.628 10.2547 108.184 10.4747 108.624 10.9147C109.072 11.3467 109.296 11.9107 109.296 12.6067V16.5907ZM108.432 16.5427V12.6547C108.432 12.1747 108.3 11.7827 108.036 11.4787C107.78 11.1747 107.42 11.0227 106.956 11.0227C106.492 11.0227 106.128 11.1747 105.864 11.4787C105.608 11.7827 105.48 12.1747 105.48 12.6547V16.5427C105.48 17.0227 105.608 17.4147 105.864 17.7187C106.128 18.0227 106.492 18.1747 106.956 18.1747C107.42 18.1747 107.78 18.0227 108.036 17.7187C108.3 17.4147 108.432 17.0227 108.432 16.5427ZM113.418 13.0987V11.8867C113.418 11.1907 113.11 10.8427 112.494 10.8427C111.87 10.8427 111.558 11.1907 111.558 11.8867V13.0987C111.558 13.7867 111.87 14.1307 112.494 14.1307C113.11 14.1307 113.418 13.7867 113.418 13.0987ZM114.114 13.1227C114.114 13.6107 113.962 14.0027 113.658 14.2987C113.362 14.5867 112.974 14.7307 112.494 14.7307C112.014 14.7307 111.622 14.5867 111.318 14.2987C111.022 14.0027 110.874 13.6107 110.874 13.1227V11.8627C110.874 11.3747 111.026 10.9827 111.33 10.6867C111.634 10.3907 112.022 10.2427 112.494 10.2427C112.966 10.2427 113.354 10.3907 113.658 10.6867C113.962 10.9827 114.114 11.3747 114.114 11.8627V13.1227ZM118.626 17.3107V16.1107C118.626 15.4147 118.318 15.0667 117.702 15.0667C117.078 15.0667 116.766 15.4147 116.766 16.1107V17.3107C116.766 18.0067 117.078 18.3547 117.702 18.3547C118.318 18.3547 118.626 18.0067 118.626 17.3107ZM119.322 17.3467C119.322 17.8347 119.17 18.2267 118.866 18.5227C118.562 18.8107 118.174 18.9547 117.702 18.9547C117.23 18.9547 116.842 18.8107 116.538 18.5227C116.234 18.2267 116.082 17.8347 116.082 17.3467V16.0867C116.082 15.5987 116.234 15.2067 116.538 14.9107C116.842 14.6147 117.23 14.4667 117.702 14.4667C118.174 14.4667 118.562 14.6147 118.866 14.9107C119.17 15.2067 119.322 15.5987 119.322 16.0867V17.3467ZM117.462 10.3267L113.454 18.8707H112.734L116.742 10.3267H117.462Z"
fill="#00695C" />
</svg>
<% section_available = @available.nil? ? true : @available %>
<div class="mb-5">
<h5><%= @title %></h5>
<% if section_available %>
<% if @first_item.present? %>
<% first_item_height = calc_bubble_two_side_line(@first_item[:line_text]) %>
<% end %>
<% if @second_item.present? %>
<% second_item_height = calc_bubble_two_side_line(@second_item[:line_text]) %>
<% end %>
<div class="col-xs-6 mt-3 mb-3" style="position: relative;">
<% if @first_item.present? %>
<div class="medium" style="width: 90px; left: 5px; position: absolute; color: <%= @first_item[:color] %>; top: <%= first_item_height %>px;"><%= @first_item[:text] %></div>
<% end %>
<% if @second_item.present? %>
<div class="medium" style="width: 90px; left: 390px; position: absolute; color: <%= @second_item[:color] %>; bottom: 0;"><%= @second_item[:text] %></div>
<% end %>
<svg width="475.0" height="170.0" style="background:#fff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<marker id="startarrow" markerWidth="12" markerHeight="12" refX="4" refY="1" orient="0">
<polygon points="0,8 4,0 8,8"></polygon>
</marker>
<marker id="endarrow" markerWidth="12" markerHeight="12" refX="4" refY="7" orient="0">
<polygon points="0,0 8,0 4,8"></polygon>
</marker>
</defs>
<% if @first_item.present? %>
<line x1="100" y1="<%= first_item_height %>" x2="242.5" y2="<%= first_item_height %>" style="stroke:<%= @first_item[:color] %>; stroke-width:1; stroke-dasharray:0 2 2 2"></line>
<line x1="100" y1="<%= first_item_height %>" x2="100" y2="170" style="stroke:<%= @first_item[:color] %>; stroke-width:0.6; marker-end:url(#endarrow); marker-start:url(#startarrow)"></line>
<text x="100" y="<%= first_item_height - 3 %>" fill="<%= @first_item[:color] %>" class="percent">
<%= @first_item[:line_text] %>
</text>
<% end %>
<% if @second_item.present? %>
<line x1="380" y1="<%= second_item_height %>" x2="242.5" y2="<%= second_item_height %>" style="stroke:<%= @second_item[:color] %>; stroke-width:1; stroke-dasharray:0 2 2 2"></line>
<line x1="380" y1="<%= second_item_height %>" x2="380" y2="170" style="stroke:<%= @second_item[:color] %>; stroke-width:0.6; marker-end:url(#endarrow); marker-start:url(#startarrow)"></line>
<text x="325" y="<%= second_item_height - 3 %>" fill="<%= @second_item[:color] %>" class="percent">
<%= @second_item[:line_text] %>
</text>
<% end %>
<% if @second_item.present? %>
<clipPath id="second-<%= @type %>">
<rect x="167.5" y="20" width="150.0" height="<%= calc_bubble_two_side_circle(@second_item[:line_text]) %>"></rect>
</clipPath>
<% end %>
<% if @first_item.present? %>
<clipPath id="first-<%= @type %>">
<rect x="167.5" y="20" width="150.0" height="<%= calc_bubble_two_side_circle(@first_item[:line_text]) %>"></rect>
</clipPath>
<% end %>
<% if @first_item.present? && @second_item.present? %>
<circle cx="242.5" cy="95" r="75" fill="<%= @second_item[:color] %>"></circle>
<circle cx="242.5" cy="95" r="75" fill="<%= @first_item[:color] %>" clip-path="url(#second-<%= @type %>)"></circle>
<circle cx="242.5" cy="95" r="74.5" fill="#F7F7F7" clip-path="url(#first-<%= @type %>)"></circle>
<% elsif @first_item.present? %>
<circle cx="242.5" cy="95" r="75" fill="<%= @first_item[:color] %>"></circle>
<circle cx="242.5" cy="95" r="74.5" fill="#F7F7F7" clip-path="url(#first-<%= @type %>)"></circle>
<% end %>
</svg>
</div>
<% else %>
<h5 class="font-weight-light">Entity and peers did not complete the indicator</h5>
<% end %>
</div>
Donut portfolio coverage
<%
chart_id = "donut-portfolio-#{rand(1000000)}"
series = [{
y: @percentage.to_i,
borderWidth: 0,
className: "svg-fill-#{@className}"
},
{
y: 100 - @percentage.to_i,
borderWidth: 0,
className: "svg-fill-gray-200"
}]
%>
<div class="d-flex flex-column mr-2">
<div class="d-flex">
<div id="<%= chart_id %>" class="mr-2" style="height: 133px; width: 133px;">
</div>
<div style="z-index: 1; margin-top: 2px; margin-left: 1px; position: relative;">
<% if @percentage %>
<svg class="dotted-line" xmlns="http://www.w3.org/2000/svg" width="26" height="8" style="position: absolute; left: -36px; top: 11px;">
<line x1="0" y1="8" x2="26" y2="1" class="svg-stroke-<%= @className %>" stroke-width="2" stroke-dasharray="4, 4"/>
</svg>
<div class="text-<%= @className %> mb-1"><%= @percentage %>% Floor area covered</div>
<% else %>
<div style="margin-bottom: 20px;"></div>
<% end %>
<% if @assets %>
<div class="small font-weight-light"><%= @assets %> assets</div>
<% end %>
<% if @area_size %>
<div class="small font-weight-light"><%= @area_size %> <%= @area_unit %></div>
<% end %>
<% if @vacancy_rate %>
<div class="small font-weight-light"><%= @vacancy_rate %>% vacancy rate</div>
<% end %>
</div>
</div>
<div class="d-flex flex-column">
<div class="d-flex align-items-center p-1 small font-weight-light">
<div style="width: 15px; height: 15px;" class="bg-<%= @className %> mr-2 flex-shrink-0"></div>
<%= @legend %>
</div>
</div>
</div>
<script>
Highcharts.chart("<%= chart_id %>", {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
margin: [0, 0, 0, 0]
},
accessibility: {
point: {
valueSuffix: '%'
}
},
title: {
text: undefined
},
plotOptions: {
pie: {
enableMouseTracking: false,
dataLabels: {
enabled: false,
},
states:{
hover: {
enabled: false
},
},
},
},
credits: {
enabled:false
},
tooltip: {
enabled: false
},
exporting: {
enabled: false,
buttons: {
printButton: {
enabled: false
}
}
},
series: [{
type: 'pie',
innerSize: '60%',
size: "100%",
center: ["50%","40%"],
data: <%= series.to_json %>
}]
});
</script>
Donut table
75% |
Equator Principles (Data coverage: )
10% |
Something else (Data coverage: )
15% |
Other (Data coverage: )
<%
colors = ["900", "800", "700", "600", "500", "400", "300"]
indicator = @indicator || {}
legend = @legend || [
{
percentage: '75%',
text: 'Equator Principles',
class: 'svg-fill-gray-700 bg-gray-700',
checked: false
}, {
percentage: '10%',
text: 'Something else',
class: 'svg-fill-gray-900 bg-gray-900',
checked: false
}, {
percentage: '15%',
text: 'Other',
class: 'svg-fill-darkblue bg-darkblue',
checked: true
}
]
if indicator[0] && indicator[1]
legend = []
indicator[1][:sector_breakdown].each_with_index do |ind, i|
legend << { text: ind[:sector].to_s.humanize,
class: "svg-fill-gray-#{colors[i]} bg-gray-#{colors[i]}",
percentage: "#{ind[:reported]}%",
coverage: "#{ind[:data_coverage]}%"}
end
else
legend = [
{
percentage: '75%',
text: 'Equator Principles',
class: 'svg-fill-gray-700 bg-gray-700',
checked: false
}, {
percentage: '10%',
text: 'Something else',
class: 'svg-fill-gray-900 bg-gray-900',
checked: false
}, {
percentage: '15%',
text: 'Other',
class: 'svg-fill-darkblue bg-darkblue',
checked: true
}
]
end
series = legend.map do |item|
{
y: item[:percentage].to_i,
className: item[:class]
}
end
chart_id = "donut-table-#{rand(1000000)}"
radio_group_name = "flexRadioDefault-#{rand(1000000)}"
%>
<% if indicator[0] && indicator[1] %>
<div>
<h4 class="text-primary mb-0"><%= indicator[0].to_s.humanize.split.map(&:capitalize).join(' ').gsub('Ghg', 'GHG') %></h4>
<div class= "border-bottom border-dark mb-1 pb-1"></div>
<div class="d-flex mt-2">
<h6 class="mb-0 mr-1">Total:</h6>
<h6 class="text-primary"><%= number_to_delimited(indicator[1][:total]) %> <%= indicator[1][:unit] %></h6>
</div>
</div>
<% end %>
<div class="d-flex" >
<div id="<%= chart_id %>" class="mr-2 flex-shrink-0" style="height:115px; width:115px;">
</div>
<div class="d-flex flex-column pt-3">
<% legend.each do |item| %>
<div class="h6 font-weight-light mb-1">
<%= item[:percentage] %> |
<%= item[:text] %> (Data coverage: <span class="text-primary"><%= item[:coverage] %></span>)
</div>
<% end %>
</div>
</div>
<script>
Highcharts.chart("<%= chart_id %>", {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
margin: [0, 0, 0, 0]
},
accessibility: {
point: {
valueSuffix: '%'
}
},
title: {
text: undefined
},
credits: {
enabled:false
},
tooltip: {
enabled: false
},
exporting: {
enabled: false,
buttons: {
printButton: {
enabled: false
}
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: false,
},
states:{
hover: {
halo: {
size: 4,
},
},
},
},
},
series: [{
type: 'pie',
innerSize: '50%',
data: <%= series.to_json %>
}]
});
</script>
Donut table
[75%]
Equator Principles
[10%]
Something else
[15%]
Other
<%
legend = @legend || [
{
percentage: '75%',
text: 'Equator Principles',
class: 'svg-fill-gray-900 bg-gray-900',
checked: false
}, {
percentage: '10%',
text: 'Something else',
class: 'svg-fill-dark bg-dark',
checked: false
}, {
percentage: '15%',
text: 'Other',
class: 'svg-fill-primary bg-primary',
checked: true
}
]
series = legend.map do |item|
{
y: item[:percentage].to_i,
className: item[:class]
}
end
input_enabled = @input_enabled.nil? ? true : @input_enabled
chart_id = "donut-table-#{rand(1000000)}"
radio_group_name = "flexRadioDefault-#{rand(1000000)}"
%>
<div class="d-flex page-break-inside mt-2">
<div id="<%= chart_id %>" class="mr-2 flex-shrink-0" style="height:115px; width:115px;">
</div>
<div class="d-flex flex-column">
<% legend.each do |item| %>
<div class="d-flex align-items-center p-2 border-bottom <%= item[:checked] ? 'bg-primary-100' : '' %>">
<% if input_enabled%>
<input disabled class="mr-2" type="radio" name="<%= radio_group_name %>" <%= item[:checked] ? 'checked' : '' %> />
<% end %>
<div style="width: 15px; height: 15px;" class="<%= item[:class] %> mr-2 flex-shrink-0"></div>
<strong class="mr-1">[<%= item[:percentage] %>]</strong>
<%= item[:text] %>
</div>
<% end %>
</div>
</div>
<script>
Highcharts.chart("<%= chart_id %>", {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
margin: [0, 0, 0, 0]
},
accessibility: {
point: {
valueSuffix: '%'
}
},
title: {
text: undefined
},
credits: {
enabled:false
},
tooltip: {
enabled: false
},
exporting: {
enabled: false,
buttons: {
printButton: {
enabled: false
}
}
},
plotOptions: {
pie: {
enableMouseTracking: false,
dataLabels: {
enabled: false,
},
states:{
hover: {
halo: {
size: 4,
},
},
},
},
},
series: [{
type: 'pie',
innerSize: '50%',
data: <%= series.to_json %>
}]
});
</script>
Double donut chart
This Entity
No data available
Benchmark
No data available
<% title = @title || "" %>
<% donut_order = @donut_order || [] %>
<%
dict = {
'Diverted recycling' => 'Recycling (diverted)',
'Diverted energy' => 'Waste to energy (diverted)',
'Diverted reuse' => 'Reuse (diverted)'
}
%>
<%
colors = ["900", "800", "700", "600", "500", "400", "300"]
entity = @entity || {
training_fund: 75,
aspect: 32,
performance: 43,
}
benchmark = @benchmark || {
training_fund: 75,
aspect: 32,
management: 43,
}
legend = []
hasEntityValues = false
donut_order.each do |order|
legend << {text: order[1], entity: "#{entity[order[0].to_sym] ? entity[order[0].to_sym] : 0}%", benchmark: "#{benchmark[order[0].to_sym] ? benchmark[order[0].to_sym] : 0}%", color: colors[legend.size]}
end
entity.each do |key, value|
if !value.nil?
hasEntityValues = true
end
end
hasBenchmarkValues = false
benchmark.each do |key, value|
if !value.nil?
hasBenchmarkValues = true
end
end
entity_series = legend.map{ |item| { y: item[:entity].to_i, className: "svg-fill-gray-#{item[:color]}"} }
benchmark_series = legend.map{ |item| { y: item[:benchmark].to_i, className: "svg-fill-gray-#{item[:color]}"} }
chart_id = "double-donut-chart-#{Random.rand(100000)}"
%>
<div class="d-flex flex-column" style="width: 600px;">
<h4 class="text-center"><%= title %></h4>
<% if legend.size > 0 %>
<div class="d-flex">
<% if hasEntityValues %>
<div id="<%= chart_id %>-entity" class="w-50"></div>
<script>
Highcharts.chart("<%= chart_id %>-entity", {
chart: {
height: 250,
hover: {
enabled: false
}
},
title: {
useHTML: true,
text: 'This Entity',
style: {
fontSize: "16px",
fontFamily: 'DINWeb'
}
},
plotOptions: {
pie: {
enableMouseTracking: false,
dataLabels: {
enabled: false,
},
states:{
hover: {
enabled: false
},
},
},
},
credits: {
enabled:false
},
tooltip: {
enabled: false
},
exporting: {
enabled: false,
buttons: {
printButton: {
enabled: false
}
}
},
series: [{
type: 'pie',
innerSize: '60%',
size: "60%",
center: ["50%","40%"],
data: <%= entity_series.to_json %>
}]
});
</script>
<% else %>
<div class="d-flex flex-column align-items-center" style="flex: 1;">
<div class="mb-5 mt-2">This Entity</div>
<div>No data available</div>
</div>
<% end%>
<% if hasBenchmarkValues %>
<div id="<%= chart_id %>-benchmark" class="w-50"></div>
<script>
Highcharts.chart("<%= chart_id %>-benchmark", {
chart: {
height: 250,
hover: {
enabled: false
}
},
title: {
useHTML: true,
text: 'Benchmark',
style: {
fontSize: "16px",
fontFamily: 'DINWeb'
}
},
plotOptions: {
pie: {
enableMouseTracking: false,
dataLabels: {
enabled: false,
},
states:{
hover: {
enabled: false
},
},
},
},
credits: {
enabled:false
},
tooltip: {
enabled: false
},
exporting: {
enabled: false,
buttons: {
printButton: {
enabled: false
}
}
},
series: [{
type: 'pie',
innerSize: '60%',
size: "60%",
center: ["50%","40%"],
data: <%= benchmark_series.to_json %>
}]
});
</script>
<% else %>
<div class="d-flex flex-column align-items-center" style="flex: 1;">
<div class="mb-5 mt-2">Benchmark</div>
<div>No data available</div>
</div>
<% end%>
</div>
<% if hasEntityValues || hasBenchmarkValues %>
<div class="d-flex flex-column" style="z-index: 1;">
<% legend.each do |item| %>
<div class="d-flex align-items-center p-1">
<div style="width: 15px; height: 15px;" class="bg-gray-<%= item[:color] %> mr-2 flex-shrink-0"></div>
<%= dict.fetch(item[:text], item[:text]) %> (<%= item[:entity] %> | <%= item[:benchmark] %>)*
</div>
<% end %>
<div class="d-flex align-items-center p-1">
<div style="width: 15px; height: 15px; background-color: transparent;" class="mr-2 flex-shrink-0"></div>
* (This Entity | Benchmark)
</div>
</div>
<% end %>
<% else %>
<div class="d-flex">
<div class="d-flex flex-column align-items-center" style="flex: 1;">
<div class="mb-5 mt-2">This Entity</div>
<div>No data available</div>
</div>
<div class="d-flex flex-column align-items-center" style="flex: 1;">
<div class="mb-5 mt-2">Benchmark</div>
<div>No data available</div>
</div>
</div>
<% end %>
</div>
Featured Score
N/A
<%
chart_id = disambiguate_id('feature-score')
name = @name || "Performance Score within Americas / Listed"
current = @current
max = @max
color = @color || "svg-fill-dark"
background = @background || "#EDEEEE"
%>
<div class="d-flex mb-3 w-100">
<div class="mr-1 d-flex position-relative">
<% if @current %>
<div id="<%=chart_id%>"></div>
<div
class="d-flex flex-row align-items-center position-absolute justify-content-center"
style="width: 102px; height: 102px;">
<div class="text-center">
<div class="h3 border-bottom mb-1 font-weight-bold"><%= @current %></div>
<div class="font-weight-light h6 mb-0"><%= @max %></div>
</div>
</div>
<% else %>
<div
class="d-flex flex-row align-items-center position-relative justify-content-center"
style="width: 80px; height: 80px; margin: 0 10px; border: 8px solid rgba(237, 238, 238, 0.3); border-radius: 50px; background-color: white;">
<div class="text-center">
<div class="h3 font-weight-bold border-bottom mb-1">N/A</div>
<div class="font-weight-light h6 mb-0"><%= @max %></div>
</div>
</div>
<% end %>
</div>
<div class="d-flex flex-column justify-content-center w-100">
<div class="border-bottom border-dark pb-1 mb-1">
<div class = "d-flex justify-content-between">
<strong> <%= @name %></strong>
<% if @green_star %>
<strong class="text-primary"> Green Star </strong>
<% end %>
</div>
</div>
<div class="d-flex justify-content-between h6 mb-0">
<% if !@gresb_average.nil? %>
<div class="mr-2 font-weight-light small">
<strong> GRESB Average </strong> <%= @gresb_average %>
</div>
<% end %>
<% if !@benchmark_average.nil? %>
<div class="font-weight-light small">
<strong> Benchmark Average </strong> <%= @benchmark_average %>
</div>
<% end %>
<% if !@peer_average.nil? %>
<div class="font-weight-light small">
<strong> Peer Average </strong> <%= @peer_average %>
</div>
<% end %>
<% if !@peer_group_average.nil? %>
<div class="font-weight-light small">
<strong> Peer Group Average </strong> <%= @peer_group_average %>
</div>
<% end %>
</div>
</div>
</div>
<% if @current && @max %>
<script>
function alignLabel() {
const chart = this;
const newX = chart.plotWidth / 2 + chart.plotLeft;
const newY = chart.plotHeight / 2 + chart.plotTop;
const message = ""
chart.renderer.text(message, newX, newY)
.attr({
align: 'center',
})
.css({
color: '#000'
}).add();
}
Highcharts.chart('<%= chart_id%>', {
chart: {
type: 'solidgauge',
height: 107,
width: 102,
backgroundColor: 'transparent',
events: {
load: alignLabel,
redraw: alignLabel,
}
},
title: {
text: '',
},
tooltip: {
enabled: false
},
credits: {
enabled: false,
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.color('<%= background %>')
.setOpacity(0.3)
.get(),
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: <%= max %>,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
stickyTracking: true,
rounded: true
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
series: [{
data: [{
className: '<%= color %>',
radius: '112%',
innerRadius: '88%',
y: <%= current %>
}]
}]
});
</script>
<% end %>
Historical Score
53
2020
54
2021
<% scores = @scores || {"2020": {
"score": 53,
"response_id": 16947
},
"2021": {
"score": 54,
"response_id": 19542
} } %>
<%
if @bigger
small_width = 66
small_height = 30
big_width = 88
big_height = 40
spacing = -12
else
small_width = 44
small_height = 20
big_width = 75
big_height = 34
spacing = -8
end
%>
<% report_type = @report_type || 'br' %>
<div class="d-flex flex-row align-items-center">
<% scores.each_with_index do |(key, value), index| %>
<% value ||= {} %>
<% next if value[:score].to_s == '' && @ignore_missing %>
<% if index+1 < scores.size() then %>
<% if value[:product_report_id]%>
<% report_path = "product_report/#{value[:product_report_id]}" %>
<a href="/<%= report_path %>" style="text-decoration: none;">
<div class="d-flex flex-column" style="margin-right: <%= spacing %>px;">
<svg width="<%= small_width %>" height="<%= small_height %>" viewBox="0 0 66 30" class="svg-fill-gray-500" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H51L66 15L51 30H0L15 15L0 0Z" fill="#B1B3B5" />
</svg>
<div class="d-flex align-items-center position-absolute justify-content-center" style="width: <%= small_width %>px; height: <%= small_height %>px;">
<div class="h6 text-center text-light mb-0"><%= value[:score] || '' %><%= value[:grade] || '' %></div>
</div>
<div class="d-flex flex-column align-items-center" style="width: <%= small_width %>px;">
<div class="bg-gray-500" style="width: 2px; height: 6px;"></div>
<small class="text-gray-500 mt-1"> <%= key %> </small>
</div>
</div>
</a>
<% else %>
<div class="d-flex flex-column" style="margin-right: <%= spacing %>px;">
<svg width="<%= small_width %>" height="<%= small_height %>" viewBox="0 0 66 30" class="svg-fill-gray-500" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H51L66 15L51 30H0L15 15L0 0Z" fill="#B1B3B5" />
</svg>
<div class="d-flex align-items-center position-absolute justify-content-center" style="width: <%= small_width %>px; height: <%= small_height %>px;">
<div class="h6 text-center text-light mb-0"><%= value[:score] || '' %><%= value[:grade] || '' %></div>
</div>
<div class="d-flex flex-column align-items-center" style="width: <%= small_width %>px;">
<div class="bg-gray-500" style="width: 2px; height: 6px;"></div>
<small class="text-gray-500 mt-1"> <%= key %> </small>
</div>
</div>
<% end %>
<% else %>
<div class="d-flex flex-column">
<svg width="<%= big_width %>" height="<%= big_height %>" viewBox="0 0 88 40" class="svg-fill-primary" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H68L88 20L68 40H0L20 20L0 0Z" />
</svg>
<div class="d-flex align-items-center position-absolute justify-content-center" style="width: <%= big_width %>px; height: <%= big_height %>px;">
<div class="h4 text-center text-light mb-0"><%= value[:score] || '' %><%= value[:grade] || '' %></div>
</div>
<div class="d-flex flex-column align-items-center" style="width: 75px;">
<div class="bg-primary" style="width: 2px; height: 6px;"></div>
<small class="text-primary mt-1"><%= key %> </small>
</div>
</div>
<% end %>
<% end %>
</div>
Historical Trend Chart
<% chart_id = "historical-trendchart-#{rand(1000000)}" %>
<% size = @size || 960 %>
<% real_estate = @real_estate || false %>
<div id="<%=chart_id%>" class="historical-trend-chart"></div>
<%
data = @data.presence || {
"rating": 4,
"rating_change": "+1",
"items": [
{
"year": 2017,
"value": nil,
"gresb_range": [16, 73],
"gresb_average": 50,
"peer_group_range": [49, 69],
"peer_group_average": 60
},
{
"year": 2018,
"value": 47,
"value_change": "+47",
"gresb_range": [4, 81],
"gresb_average": 55,
"peer_group_range": [47, 89],
"peer_group_average": 66
},
{
"year": 2019,
"value": 57,
"value_change": "+10",
"gresb_range": [16, 87],
"gresb_average": 55,
"peer_group_range": [48, 80],
"peer_group_average": 65
},
{
"year": 2020,
"value": 50,
"value_change": "-7",
"gresb_range": [33, 96],
"gresb_average": 65,
"peer_group_range": [39, 91],
"peer_group_average": 74
}
]
}
years, values, gresb_ranges, peer_group_ranges, gresb_averages, peer_group_averages, real_estate_values = [], [], [], [], [], [], []
data[:items].each do |item|
if item[:year] && (item[:value] || item[:value_change] || item[:gresb_range] || item[:gresb_average] || item[:peer_group_range] || item[:peer_group_average])
years << item[:year]
values << [item[:year], item[:value].to_i] if item[:value] && (!real_estate || real_estate && item[:year] <= 2019)
gresb_ranges << [item[:year], item[:gresb_range]].flatten if item[:gresb_range]
peer_group_ranges << [item[:year], item[:peer_group_range]].flatten if item[:peer_group_range]
gresb_averages << [item[:year], item[:gresb_average]] if item[:gresb_average]
peer_group_averages << [item[:year], item[:peer_group_average]] if item[:peer_group_average]
real_estate_values << [item[:year], item[:value].to_i] if item[:value] && (real_estate && item[:year] >= 2020)
end
end
min_year = years.min
%>
<script>
var customSymbol, linesToPath, rotate;
customSymbol = function(n, f) {
Highcharts.SVGRenderer.prototype.symbols[n] = f;
if (Highcharts.VMLRenderer) {
return Highcharts.VMLRenderer.prototype.symbols[n] = f;
}
};
rotate = function(cx, cy, px, py, degrees) {
var dx, dy, r, radians, theta;
if (degrees == null) {
degrees = 45;
}
radians = Math.PI * degrees / 180;
dx = px - cx;
dy = py - cy;
r = dx === 0 ? Math.abs(dy) : dy === 0 ? Math.abs(dx) : Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
theta = Math.atan2(dy, dx);
theta += radians;
px = r * Math.cos(theta);
py = r * Math.sin(theta);
return [px + cx, py + cy];
};
customSymbol('triangle-left', function(x, y, w, h) {
var x1, x2, y1, y2, y3;
x1 = x + w;
x2 = x;
y1 = y + w;
y2 = y + w / 2;
y3 = y;
return ['M', x1, y1, 'L', x2, y2, 'L', x1, y3, 'L', x1, y1, 'z'];
});
customSymbol('triangle-right', function(x, y, w, h) {
var x1, x2, y1, y2, y3;
x1 = x;
x2 = x + w;
y1 = y + w;
y2 = y + w / 2;
y3 = y;
return ['M', x1, y1, 'L', x2, y2, 'L', x1, y3, 'L', x1, y1, 'z'];
});
Highcharts.chart('<%= chart_id%>',{
chart: {
type: 'columnrange',
plotBorderWidth: 1,
spacingRight: 0,
width: <%= size %>
},
title: {
text: undefined
},
xAxis: {
categories: [<%= years.join(', ') %>],
labels: {
style: {
fontWeight: 700,
fontFamily: 'DINWeb'
},
},
},
yAxis: {
title: {
text: 'Overall score',
style: {
fontWeight: 700,
fontFamily: 'DINWeb'
},
},
labels: {
style: {
fontWeight: 700,
fontFamily: 'DINWeb'
},
},
tickInterval: 50,
lineWidth: 1,
min: 0,
max: 102,
gridLineWidth: 0,
endOnTick: false,
plotLines: [
{
width: 1,
value: 50,
color: '#C0C0C0',
dashStyle: 'shortDot',
},
{
width: 1,
value: 102,
color: '#C0C0C0',
}
],
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'bottom',
y: -40,
borderWidth: 0,
floating: false,
itemMarginBottom: 10,
itemStyle: {
width: 200,
fontSize: '13px',
fontFamily: 'DINWeb',
fontWeight: 200,
stroke: 'none',
},
},
tooltip: {
shared: true,
},
plotOptions: {
columnrange: {
grouping: false,
shadow: false
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
credits: {
enabled: false,
},
series: [{
type:"columnrange",
name: 'GRESB Range',
pointWidth: 30,
color: '#d9dadb',
legendIndex: 3,
marker: {
symbol: 'square',
radius: 6
},
data: [<%= gresb_ranges.map { |items| "[#{items.join(',')}]" }.join(', ') %>]
}, {
type:"columnrange",
name: 'Peer Group Range',
pointWidth: 30,
color: '#4A5359',
legendIndex: 2,
marker: {
symbol: 'square',
radius: 6
},
data: [<%= peer_group_ranges.map { |items| "[#{items.join(',')}]" }.join(', ') %>]
},{
type: 'line',
name: 'Peer Group Average',
legendIndex: 4,
lineWidth: 0,
states: {
hover: {
enabled: false,
halo: false
}
},
marker: {
symbol: 'triangle-right',
lineWidth: 1,
radius: 6,
fillColor: '#4A5359',
lineColor: '#eceef1'
},
data: [<%= peer_group_averages.map { |items| "[#{items.join(',')}]" }.join(', ') %>]
}, {
type: 'line',
name: 'GRESB Average',
legendIndex: 5,
lineWidth: 0,
states: {
hover: {
enabled: false,
halo: false
}
},
marker: {
symbol: 'triangle-left',
lineWidth: 1,
radius: 6,
fillColor: '#eceef1',
lineColor: '#4A5359'
},
data: [<%= gresb_averages.map { |items| "[#{items.join(',')}]" }.join(', ') %>]
}, {
type: 'line',
name: 'This Entity',
legendIndex: 0,
className: "svg-stroke-primary svg-fill-primary",
color: 'inherit',
marker: {
symbol: 'circle',
lineWidth: 1,
lineColor: '#000',
radius: 6,
fillColor: 'inherit'
},
tooltip: {
pointFormatter: function() {
var point = '<span style="color: #00695C;">\u25CF</span> ' + this.series.name + ': <b>' + this.y + '</b><br/>';
var prev_point = this.series.points[this.x- <%= min_year + 1 %>];
if (prev_point) {
point += '<span style="color: #00695C;">\u25CF</span> Change to previous year: <b>' + (this.y - prev_point.y) + '</b><br/>'
}
return point;
}
},
data: [<%= values.map { |items| "[#{items.join(',')}]" }.join(', ') %>]
}, {
type: 'line',
name: 'This Entity',
legendIndex: 0,
className: "svg-stroke-primary svg-fill-primary",
color: 'inherit',
showInLegend: false,
marker: {
symbol: '<%= (real_estate) ? 'circle' : 'diamond' %>',
lineWidth: 1,
lineColor: '#000',
radius: 6,
fillColor: 'inherit'
},
tooltip: {
pointFormatter: function() {
var point = '<span style="color: #00695C;">\u25CF</span> ' + this.series.name + ': <b>' + this.y + '</b><br/>';
var prev_point = this.series.points[this.x- <%= min_year + 1 %>];
if (prev_point) {
point += '<span style="color: #00695C;">\u25CF</span> Change to previous year: <b>' + (this.y - prev_point.y) + '</b><br/>'
}
return point;
}
},
data: [<%= real_estate_values.map { |items| "[#{items.join(',')}]" }.join(', ') %>]
}]
}, function(chart) {
chart.series[2].data.forEach(function(point) {
point.graphic.translate(-12, 10);
});
chart.series[3].data.forEach(function(point) {
point.graphic.translate(16, 10);
});
});
</script>
Horizontal Barcharts
<% topics = @topics || [] %>
<% data_year = @data_year %>
<% if topics.size > 0 %>
<div id="public-horizontal-barcharts" class="d-flex flex-column">
<div class="d-flex">
<div style="width: 25%; padding: 5px 15px 5px 0; line-height: 1.3;"></div>
<div style="width: 12%; padding-right: 16px;"></div>
<div class="d-flex" style="flex: 1;">
<% ["E", "D", "C", "B", "A"].each do |score| %>
<div class="text-center font-weight-bold pb-2 <%= ["B", "A"].include?(score) ? "text-primary" : "text-darkblue" %>" style="flex: 1;"><%= score %></div>
<% end %>
</div>
</div>
<% topics.each do |topic| %>
<div class="d-flex" style="height: 40px;">
<div class="font-weight-normal d-flex justify-content-center flex-column" style="width: 25%; padding: 5px 15px 5px 0; line-height: 1.3; font-size: 14px;">
<% if topic.first.to_s === "disclosure_methods" %>
<%= topic.first.to_s.humanize.titleize %>
<% else %>
Disclosure of <%= topic.first.to_s.humanize.titleize %>
<% end %>
</div>
<div class="d-flex align-items-center" style="width: 11%; padding-right: 16px; text-align: center;
text-transform: uppercase;">
<div style="padding: 4px 0 1px; border: 2px solid #4A5359; width: 100%;">
<%= sprintf("%g", topic.second[:score].to_f.round(2)) %> / <%= sprintf("%g", topic.second[:max_score].to_f.round(2)) %>
</div>
</div>
<div class="d-flex" style="flex: 1; border-left: 1px solid #4A5359; border-right: 1px solid #4A5359; position: relative">
<div class="position-absolute" style="width: <%= topic.second[:percent_score] %>%; background-color: #4A5359; height: 25px; top: 8px">
</div>
<div class="position-absolute" style="width: 100%; background-color: rgba(74, 83, 89, 0.1); height: 25px; top: 8px">
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none" style="position: absolute; bottom: 0; left: calc(<%=topic.second[:previous_year_score] %>% - 6px)">
<rect x="0.707107" y="7.07104" width="9" height="9" transform="rotate(-45 0.707107 7.07104)" fill="white" stroke="#B1B3B5"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="7" viewBox="0 0 14 7" fill="none" style="position: absolute; bottom: 0; left: <%=topic.second[:comparison_group_average] %>%">
<path d="M7 0L13.9282 6.75H0.0717969L7 0Z" fill="#4A5359"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="7" viewBox="0 0 14 7" fill="none" style="position: absolute; top: 1px; left: <%=topic.second[:global_average] %>%">
<path xmlns="http://www.w3.org/2000/svg" d="M13.3134 0.500001L7 6.65096L0.686649 0.500001L13.3134 0.500001Z" fill="#B1B3B5" stroke="#3B3C3C" stroke-width="0.5"/>
</svg>
<div style="flex: 1; border-right: 2px solid rgba(74, 83, 89, 0.1);"></div>
<div style="flex: 1; border-right: 2px solid rgba(74, 83, 89, 0.1);"></div>
<div style="flex: 1; border-right: 2px solid rgba(74, 83, 89, 0.1);"></div>
<div style="flex: 1; border-right: 2px solid rgba(74, 83, 89, 0.1);"></div>
<div style="flex: 1;"></div>
</div>
</div>
<% end %>
<div class="d-flex mt-2">
<div style="width: 25%; padding: 5px 15px 5px 0; line-height: 1.3;"></div>
<div style="width: 12%; padding-right: 16px;"></div>
<div class="d-flex" style="flex: 1;">
<div class="d-flex" style="font-size: 12px; margin-right: 12px;">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="7" viewBox="0 0 14 7" fill="none" style="margin-right: 5px;">
<path xmlns="http://www.w3.org/2000/svg" d="M13.3134 0.500001L7 6.65096L0.686649 0.500001L13.3134 0.500001Z" fill="#B1B3B5" stroke="#3B3C3C" stroke-width="0.5"/>
</svg>
GRESB Public Disclosure Average
</div>
<div class="d-flex" style="font-size: 12px; margin-right: 12px;">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="7" viewBox="0 0 14 7" fill="none" style="margin-right: 5px;">
<path d="M7 0L13.9282 6.75H0.0717969L7 0Z" fill="#4A5359"/>
</svg>
Comparison Group Average
</div>
<div class="d-flex" style="font-size: 12px; margin-right: 12px;">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none" style="margin-right: 5px;">
<rect x="0.707107" y="7.07104" width="9" height="9" transform="rotate(-45 0.707107 7.07104)" fill="white" stroke="#B1B3B5"/>
</svg>
This entity's <%= data_year %> Score
</div>
</div>
</div>
</div>
<% end %>
Performance Chart
N/A
<% value = @value %>
<% negative_class = @negative.presence || 'bg-dark' %>
<% positive_class = @positive.presence || 'bg-dark' %>
<% show_values = @show_values.nil? ? false : @show_values %>
<% if value.nil? %>
N/A
<% else %>
<div class="d-flex align-items-center justify-content-center">
<% if value < 0 %>
<% if show_values %>
<div class="mb-0 small font-weight-light">-<%= value.abs.round(1) %>%</div>
<% end %>
<div class="<%= negative_class %>" style="height:10px; width:<%= value.abs %>%;"></div>
<%end%>
<div class="bg-dark" style="width:1px; height:30px;">
</div>
<% if value > 0 %>
<div class="<%= positive_class %>" style="height:10px; width:<%= value.abs %>%;"></div>
<% if show_values %>
<div class="mb-0 small font-weight-light"><%= value.abs.round(1) %>%</div>
<% end %>
<%end%>
</div>
<% end %>
N/A
<div class="mr-3 d-flex">
<svg width="82" height="82" viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M67.3594 14.6697L41.0115 3.7522L14.6637 14.6697L3.75195 41.0176L14.6637 67.3654L41.0115 78.2771L67.3594 67.3654L78.2769 41.0176L67.3594 14.6697Z" class="svg-fill-dark" />
<path d="M69.1731 12.8268L40.9912 1.1571L12.8093 12.8268L1.13965 41.0087L12.8093 69.1905L40.9912 80.8602L69.1731 69.1905L80.8485 41.0087L69.1731 12.8268Z" class="svg-stroke-primary" stroke-width="2"/>
</svg>
<div
class="d-flex flex-row align-items-center position-absolute justify-content-center"
style="width: 82px; height: 82px">
<div class="d-flex text-white align-items-center">
<div class="h3 m-0"><%= @rank || "N/A" %></div>
<% if @rank %>
<sup><%= @rank.ordinal %></sup>
<% end %>
</div>
</div>
</div>
N/A
Entities
<%
group_characteristics = @group_characteristics || {}
property_types = if group_characteristics[:property_type]
pt = group_characteristics[:property_type]
pt = pt.flatten if pt.first.is_a?(Array)
pt.join(', ')
else
''
end
%>
<div class="d-flex mb-3" style="flex: 1; opacity: <%= (@rank && @size) ? 1 : 0.2%>;">
<div class="mr-3 d-flex">
<svg width="74" height="74" viewBox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4340_1018)">
<path d="M37 67.6475C28.8134 67.6475 21.1177 64.4598 15.3295 58.6706C9.54131 52.8814 6.35254 45.1857 6.35254 37C6.35254 28.8144 9.54029 21.1177 15.3295 15.3295C21.1187 9.54131 28.8144 6.35254 37 6.35254C45.1857 6.35254 52.8824 9.54029 58.6706 15.3295C64.4588 21.1187 67.6475 28.8144 67.6475 37C67.6475 45.1857 64.4598 52.8824 58.6706 58.6706C52.8814 64.4588 45.1857 67.6475 37 67.6475ZM37 6.86504C20.3838 6.86504 6.86504 20.3838 6.86504 37C6.86504 53.6163 20.3838 67.135 37 67.135C53.6163 67.135 67.135 53.6163 67.135 37C67.135 20.3838 53.6163 6.86504 37 6.86504Z" fill="#4A535A"/>
<path d="M36.9998 73.1823C32.1157 73.1823 27.3771 72.226 22.9163 70.3389C18.6072 68.5165 14.7379 65.9079 11.4158 62.5848C8.09278 59.2618 5.48416 55.3924 3.66171 51.0843C1.77468 46.6235 0.818359 41.8849 0.818359 37.0008C0.818359 32.1167 1.77468 27.3781 3.66171 22.9173C5.48416 18.6082 8.09278 14.7388 11.4158 11.4168C14.7389 8.09376 18.6083 5.48514 22.9163 3.66269C27.3771 1.77566 32.1157 0.819336 36.9998 0.819336C41.884 0.819336 46.6225 1.77566 51.0833 3.66269C55.3924 5.48514 59.2618 8.09376 62.5838 11.4168C65.9069 14.7399 68.5155 18.6092 70.338 22.9173C72.225 27.3781 73.1813 32.1167 73.1813 37.0008C73.1813 41.8849 72.225 46.6235 70.338 51.0843C68.5155 55.3934 65.9069 59.2628 62.5838 62.5848C59.2608 65.9079 55.3914 68.5165 51.0833 70.3389C46.6225 72.226 41.884 73.1823 36.9998 73.1823ZM36.9998 1.32979C17.3311 1.32979 1.32983 17.3311 1.32983 36.9998C1.32983 56.6685 17.3311 72.6698 36.9998 72.6698C56.6686 72.6698 72.6698 56.6685 72.6698 36.9998C72.6698 17.3311 56.6686 1.32979 36.9998 1.32979Z" fill="#4A535A"/>
<path d="M8.77359 48.9599C7.16741 45.1726 6.35254 41.1484 6.35254 37.0002C6.35254 33.7018 6.87324 30.4566 7.90131 27.355L8.38819 27.5159C7.37754 30.5653 6.86606 33.7561 6.86606 36.9992C6.86606 41.0787 7.66659 45.0352 9.24714 48.759L8.77564 48.9589L8.77359 48.9599Z" fill="#84A684"/>
<path d="M67.6474 36.9999H67.1349C67.1349 31.6371 65.7091 26.3716 63.0103 21.7735L63.452 21.5142C66.196 26.1912 67.6463 31.5469 67.6463 36.9999H67.6474Z" fill="#00695D"/>
<path d="M37.0001 70.4151C32.7689 70.4151 28.6443 69.6351 24.7432 68.0956L24.9307 67.6189C28.7724 69.1349 32.8335 69.9026 37.0001 69.9026C44.5287 69.9026 51.6146 67.4283 57.4899 62.7461L57.8097 63.1469C54.9151 65.4541 51.6863 67.251 48.2146 68.4871C44.622 69.7663 40.849 70.4151 37.0011 70.4151H37.0001Z" fill="#00695D"/>
<path d="M17.9301 10.1839L17.6328 9.76674C23.3093 5.72209 30.0066 3.58496 37.0002 3.58496C40.805 3.58496 44.537 4.21944 48.0927 5.46994L47.9226 5.95374C44.4212 4.72169 40.7466 4.09746 37.0002 4.09746C30.1142 4.09746 23.5194 6.20179 17.9301 10.1839Z" fill="#7CB9B6"/>
<path d="M73.1827 37H72.6702C72.6702 21.9397 63.1418 8.43119 48.9609 3.38512L49.1331 2.90234C56.1042 5.38284 62.0789 9.88567 66.4136 15.9239C70.8416 22.0934 73.1827 29.3812 73.1827 37.001V37Z" fill="#84A684"/>
<path d="M23.7499 70.6793C19.2737 68.9174 15.2465 66.3149 11.781 62.9457C8.31954 59.5806 5.60739 55.6344 3.71729 51.2156L4.18879 51.0137C7.91876 59.7344 15.1173 66.729 23.9375 70.2017L23.7499 70.6783V70.6793Z" fill="#A1CE5D"/>
</g>
<defs>
<clipPath id="clip0_4340_1018">
<rect width="74" height="74" fill="white"/>
</clipPath>
</defs>
</svg>
<div
class="d-flex flex-row align-items-center position-absolute justify-content-center"
style="width: 74px; height: 74px">
<div class="d-flex align-items-center">
<div class="h3 m-0"><%= @rank || "N/A" %></div>
<% if @rank %>
<sup><%= @rank.ordinal %></sup>
<% end %>
</div>
</div>
</div>
<div class="d-flex flex-column justify-content-start flex-grow-1" style="font-size: 12px;">
<div class="border-bottom text-dark border-dark mb-1 pb-1 d-flex align-items-end">
<%= @size %> Entities<%= group_characteristics[:modified_selection] ? '*' : '' %>
</div>
<% if group_characteristics[:modified_selection] %>
<div class="mb-3" style="color: #6B7984;">
*Some entities have been added or excluded from the categories below. See the full list of constituents on the <a href="#scorecards_standing_investment_entity" style="text-decoration: underline; color: #6B7984;">Entity & Peer Group Characteristics</a>.
</div>
<% end %>
<% if group_characteristics[:location] %>
<%= render "/partials/components/ranked-display-text.erb", item: "Location", value: group_characteristics[:location].compact.join(', ') %>
<% end %>
<% if group_characteristics[:property_type] %>
<%= render "/partials/components/ranked-display-text.erb", item: "Property Type", value: property_types %>
<% end %>
<% if group_characteristics[:strategy] %>
<%= render "/partials/components/ranked-display-text.erb", item: "Strategy", value: group_characteristics[:strategy].join(', ') %>
<% end %>
<% if group_characteristics[:tenant_controlled] %>
<%= render "/partials/components/ranked-display-text.erb", item: "Tenant Controlled", value: "Yes" %>
<% end %>
<% if group_characteristics[:commencement_date] && !group_characteristics[:commencement_date].empty? %>
<%= render "/partials/components/ranked-display-text.erb", item: "Entity Commencement Date", value: group_characteristics[:commencement_date] %>
<% end %>
<% if group_characteristics[:size_in_gav] && !group_characteristics[:size_in_gav].empty? %>
<%= render "/partials/components/ranked-display-text.erb", item: "Size in GAV", value: group_characteristics[:size_in_gav] %>
<% end %>
<% if group_characteristics[:asset_count] && !group_characteristics[:asset_count].empty? %>
<%= render "/partials/components/ranked-display-text.erb", item: "Asset Count", value: group_characteristics[:asset_count] %>
<% end %>
</div>
</div>
N/A
Entities
<%
group_characteristics = @group_characteristics || {}
%>
<div class="d-flex mb-3" style="flex: 1; opacity: <%= (@rank && @size) ? 1 : 0.2%>;">
<%= render "/partials/charts/_rank.erb", rank: @rank %>
<div class="d-flex flex-column justify-content-start flex-grow-1 pr-4" style="font-size: 12px;">
<div class="border-bottom text-dark border-dark mb-1 pb-1 d-flex align-items-end">
<%= @size %> Entities
</div>
<% if group_characteristics[:location] %>
<%= render "/partials/components/ranked-display-text.erb", item: "Location", value: group_characteristics[:location] %>
<% end %>
<% if group_characteristics[:property_type] %>
<%= render "/partials/components/ranked-display-text.erb", item: "Property Type", value: group_characteristics[:property_type] %>
<% end %>
<% if group_characteristics[:strategy] %>
<%= render "/partials/components/ranked-display-text.erb", item: "Strategy", value: group_characteristics[:strategy] %>
<% end %>
<% if group_characteristics[:tenant_controlled] %>
<%= render "/partials/components/ranked-display-text.erb", item: "Tenant Controlled", value: "Yes" %>
<% end %>
</div>
</div>
Rankings
N/A
Performance Score within Americas / Listed
<%
name = @name || 'Performance Score within Americas / Listed'
complete_name = name.kind_of?(Array) ? name.join(' | ') : name
%>
<div class="d-flex mb-3" style="max-width: 350px; opacity: <%= (@rank && @size) ? 1 : 0.2%>;">
<%= render "/partials/charts/_rank.erb", rank: @rank %>
<div class="d-flex flex-column justify-content-center flex-grow-1">
<div class="border-bottom border-dark mb-1 pb-1 d-flex align-items-end" style="flex: 1;">
<div class=<%= (complete_name.length > 55) ? "small m-0" : "m-0" %>>
<strong><%= complete_name %></strong>
</div>
</div>
<div class="text-muted h6 mb-0 font-weight-light" style="flex: 1;">
<% if @size %>
Out of <%= @size %>
<% end %>
</div>
</div>
</div>
Scatter Chart opt 2
Total energy consumed: Peer Group
<%
chart_id = @chart_id || 'scatter-chart'
title = @title || 'Total energy consumed: Peer Group'
side_text = @side_text || 'Energy (MWh)'
data = @data || {
"series": [
{
"name": "Entity",
"type": "scatter",
"data": [
{"label": "Previous year performance", "x": 2018, "y": 2645296.0},
{"label": "Current year target", "x": 2019, "y": nil, "dataLabels": {"align": "right"}},
{"label": "Current year performance", "x": 2019, "y": 5818361.0},
nil
]
},
{
"name": "Peer Group",
"type": "scatter",
"data": [
{"label": "Previous year performance", "x": 2018, "y": 1968438.12},
{"label": "Current year target", "x": 2019, "y": 2671440.37, "dataLabels": {"align": "right"}},
{"label": "Current year performance", "x": 2019, "y": 2789327.8}
]
}
],
"unit": "MWh/USD",
"survey_year": 2019,
}
min = @this_year || data[:survey_year].to_i - 1
%>
<% unless data.empty? %>
<h5 class="mt-5"><%= title %></h5>
<div id="<%= chart_id %>" class="mb-5"></div>
<script>
Highcharts.chart("<%= chart_id %>", {
"title": {
"text": null
}, "series": <%= data[:series].to_json %>
,
"exporting": {
"enabled": false
},
"credits": {
"enabled": false
},
"xAxis": {
"tickInterval": 1,
"gridLineWidth": 1,
"min": <%= (min) %>,
"max": <%= (data[:show_future]) ? data[:future_year].to_i : (data[:survey_year].to_i + 1) %>
},
"yAxis": {
"title": {
"text": "<%= side_text %>"
},
"min": 0,
"gridLineWidth": 1
},
"plotOptions": {
"scatter": {
"tooltip": {
pointFormatter: function() {
return this.x + ": " + Intl.NumberFormat('en').format(this.y.toFixed(2)) + " <%= data[:unit] %>"
},
}
},
"series": {
"dataLabels": {
"align": "left",
"enabled": true,
"format": "{point.label}",
"y": 8
}
}
}
});
</script>
<% else %>
<div class="mb-5">
<h5 class="mt-5"><%= title %></h5>
<h6 class="font-weight-light">Entity and peers did not complete the indicator</h6>
</div>
<% end %>
Scatter Chart with 2 series
Total energy consumed: Peer Group
<%
chart_id = @chart_id || 'scatter-chart-for-emissions-and-coverage'
title = @title || 'Total energy consumed: Peer Group'
side_text = @side_text || 'tCO<sub>2</sub>e'
converage_map = {
'No coverage' => 0,
'Partial coverage (<50%)' => 1,
'Partial coverage (>=50%)' => 2,
'Full coverage (100%)' => 3
}
data = @data || [
{
emissions: 231,
data_coverage: 'Partial coverage (>=50%)',
values_for: 'Entity'
},
{
emissions: 661,
data_coverage: 'No coverage',
values_for: 'Peer Group'
},
{
emissions: 761,
data_coverage: 'Partial coverage (<50%)',
values_for: 'Peer Group'
},
{
emissions: 634.5,
data_coverage: 'Full coverage (100%)',
values_for: 'Peer Group'
}
]
series = scattered_chart_data_for_2_series(data, converage_map)
%>
<% unless data.empty? %>
<h5 class="mt-5"><%= title %></h5>
<div id="<%= chart_id %>" class="mb-5">
</div>
<script>
coverageMap = <%= converage_map.invert.to_json %>
Highcharts.chart("<%= chart_id %>", {
"title": {"text": null},
"series": <%= series.to_json %>,
"exporting": {"enabled": false},
"credits": {"enabled": false},
"plotOptions": {
"scatter": {
"tooltip": {
pointFormatter: function() {
return new Intl.NumberFormat('en').format(this.y.toFixed(2)) + " <%= side_text %>, " + coverageMap[this.x];
}
}
},
},
"xAxis": {
"tickInterval": 1,
"gridLineWidth": 1,
"min": <%= (converage_map.values.min) %>,
"max": <%= (converage_map.values.max) %>,
labels: {
rotation: 0,
autoRotation: undefined,
align: "center",
formatter: function() { return coverageMap[this.value]; }
}
},
"yAxis": {
"title": {"text": "<%= side_text %>"},
"gridLineWidth": 1,
"min": 0
}
});
</script>
<% else %>
<div class="mb-5">
<h5 class="mt-5"><%= title %></h5>
<h6 class="font-weight-light">Entity and peers did not complete the indicator</h6>
</div>
<% end %>
Single Bar with Legend
<% title = @title || '' %>
<%
if @bar_items.present?
total = single_bar_with_legend_total(@bar_items)
bars = single_bar_with_legend_content(@type, @bar_items)
extra_char = (@type == 'floor_area') ? '%' : ''
end
%>
<div class="d-flex flex-column mt-4" style="width: 50%;">
<% if title %>
<h5 class="mb-1"><%= title %></h5>
<% end %>
<% if bars %>
<div class="d-flex bar" style="width: 280px; height: 24px;">
<% bars.each do |bar| %>
<% if bar[:number].to_f > 0 %>
<div
style="width: <%= (bar[:number].to_f / total.to_f) * 100 %>%; height: 24px; background-color: <%= bar[:color] %>;"
data-toggle="tooltip"
data-placement="top"
title="<%= "#{bar[:number]}#{extra_char}" %>"
></div>
<% end %>
<% end %>
</div>
<div class="d-flex flex-column mt-2" style="width: 100%; flex-wrap: wrap;">
<% bars.each do |bar| %>
<div class='legend-item d-flex mb-2' style='margin-right: 20px; font-size: 14px;'>
<div style="width: 12px; height: 12px; background-color: <%= bar[:color] %>; margin-right: 5px;"></div>
<%= "<span>#{bar[:text]} <b>(#{bar[:number]}#{extra_char})</b></span>" %>
</div>
<% end %>
</div>
<% end %>
</div>
<script>
window.addEventListener('load',() => {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
Single Bar
N/A
<% title = @title || '' %>
<% number = @number || nil %>
<% coverage = @coverage || nil %>
<% inner_text = @inner_text || nil %>
<% coverage_title = @coverage_title || "Portfolio Coverage" %>
<div class="d-flex flex-column" style="padding-left: 12.5px;">
<% if title %>
<h5 class="mb-0"><%= title %></h5>
<% end %>
<div class="bg-light d-flex flex-column-reverse" style="height:80px; width:75px;">
<% if number && number.to_f.positive? %>
<div class="bg-chart-color1 d-flex justify-content-center align-items-center" style="width:100%; height:25px;">
<div class="text-light h6 m-0"><%= "+#{ number.to_f }%"%></div>
</div>
<div class="d-flex justify-content-center align-items-center" style="width:100%; height:0; border-left: 37.5px solid transparent; border-right: 37.5px solid transparent; border-bottom: 15px solid #e75b25"></div>
<% elsif number && !number.to_f.positive? && inner_text %>
<div class="small font-weight-light pb-1" style="width: 100%;"><%= inner_text %></div>
<% end %>
</div>
<div class="bg-dark" style="width:100px; height:1px; margin-left: -12.5px;"></div>
<div class="bg-light d-flex align-items-start flex-column" style="height:80px; width:75px;">
<% if number && !number.to_f.positive? %>
<div class="bg-chart-color4 d-flex justify-content-center align-items-center" style="width:100%; height:25px;">
<div class="text-light h6 m-0"><%= "#{ number.to_f }%"%></div>
</div>
<div class="d-flex justify-content-center align-items-center" style="width:100%; height:0; border-left: 37.5px solid transparent; border-right: 37.5px solid transparent; border-top: 15px solid #7ec689"></div>
<% elsif number && number.to_f.positive? && inner_text %>
<div class="small font-weight-light pt-1" style="width: 100%;"><%= inner_text %></div>
<% elsif !number %>
<div class="d-flex justify-content-center align-items-center" style="width:100%; height:25px; background-color: #333333;">
<div class="text-light h6 m-0">N/A</div>
</div>
<% end %>
</div>
<% if coverage && coverage != "%" && coverage.to_f >= 0 %>
<div class="d-flex mb-4" style="position: relative; padding-left: 30px; padding-top: 10px;">
<div style="position: absolute; display: block; width: 20px; height: 20px; border-bottom: 1px solid #4a5359; border-left: 1px solid #4a5359; z-index: -1; left: 5px; top: 0px;"></div>
<div class="small font-weight-light position-absolute text-nowrap" style="text-align: left;">
<%= "#{ coverage }"%>
<br/>
<%= coverage_title %>
</div>
</div>
<% end %>
</div>
Single Bar opt 2
Entity
0
kWh/sq.ft
Benchmark
0
kWh/sq.ft
<% chart_id = @chart_id || 'single-bar-chart-2-chart' %>
<% unit = @unit || 'kWh/sq.ft' %>
<% entity = @entity || 0 %>
<% benchmark = @benchmark || 0 %>
<% heights = calc_single_bar_heights(entity, benchmark) %>
<% first_color = @first_color || "bg-chart-color2" %>
<div class="d-flex">
<div class="d-flex flex-column align-items-center mr-2">
<h5 class="mb-2">Entity</h5>
<div class="d-flex align-items-end" style="width:60px; height:250px;">
<div class="<%= first_color %> d-flex justify-content-center align-items-start" style="width:60px; height:<%= heights[:entity] %>;">
<div class="text-light h5 m-0 mt-2"><%= entity %></div>
</div>
</div>
<div class="bg-dark" style="width:70px; height:1px;"></div>
<h6 class="mt-2 font-weight-light"><%= unit %></h6>
</div>
<div class="d-flex flex-column align-items-center mr-2">
<h5 class="mb-2">Benchmark</h5>
<div class="d-flex align-items-end" style="width:60px; height:250px;">
<div class="bg-dark d-flex justify-content-center align-items-start" style="width:60px; height:<%= heights[:benchmark] %>;">
<div class="text-light h5 m-0 mt-2"><%= benchmark %></div>
</div>
</div>
<div class="bg-dark" style="width:70px; height:1px;"></div>
<h6 class="mt-2 font-weight-light"><%= unit %></h6>
</div>
</div>
Single Bar opt 3
Data Coverage by Asset Weight
N/A%
<% color = @color %>
<% coverage = @coverage || "N/A" %>
<div class="d-flex flex-column">
<h4 class="mb-2 pr-2" >Data Coverage by Asset Weight</h4>
<div class="d-flex align-items-center">
<div class="d-flex bg-gray-100 mr-2" style="width: 400px; height: 20px;">
<div style="width: <%= coverage %>%;" class="<%= color %>"></div>
</div>
<div style="font-size: 12px;"><%= coverage %>%</div>
</div>
</div>
Single Bar table
<% title = @title %>
<% color = @color %>
<% width = @width %>
<div class="d-flex flex-column mb-2">
<div class="mb-1"><%= title %></div>
<div class="d-flex align-items-center">
<div style="min-width: 1px; width: <%= width.to_i %>px; height: 14px;" class="<%= color %> mr-1"></div>
<div style="font-size: 12px;"><%= width %></div>
</div>
</div>
Tracker Chart
<% chart_id = "windrose-chart-#{rand(1000000)}" %>
<% order = @order || false %>
<% compare_name = @compare_name || "Benchmark Group Average" %>
<% line_class = @line_class || "svg-fill-primary" %>
<div id="<%=chart_id%>"></div>
<% data = @data.presence || [
{
name: 'Leadership',
icon: [
'Leadership',
asset_url('/assets/svg/custom-icons/leadership.svg'),
32,
32
],
weight: 12.5,
entity: 100,
benchmark: 89.5,
color: 'rgba(74,83,89,0.35)'
},
{
name: 'Policies',
icon: [
'Policies',
asset_url('/assets/svg/custom-icons/policies.svg'),
32,
32
],
weight: 5.4,
entity: 85.8,
benchmark: 74,
color: 'rgba(74,83,89,0.35)'
},
{
name: 'Reporting',
icon: [
'Reporting',
asset_url('/assets/svg/custom-icons/reporting.svg'),
32,
32
],
weight: 5.3,
entity: 96.8,
benchmark: 68,
color: 'rgba(74,83,89,0.35)'
},
{
name: 'Risk Management',
icon: [
'Risk Management',
asset_url('/assets/svg/custom-icons/risk_management.svg'),
32,
32
],
weight: 19.6,
entity: 80.8,
benchmark: 57.5,
color: 'rgba(74,83,89,0.35)'
},
{
name: 'Stakeholder Engagement',
icon: [
'Stakeholder Engagement',
asset_url('/assets/svg/custom-icons/stakeholder_engagement.svg'),
32,
32
],
weight: 7.2,
entity: 94.8,
benchmark: 89.3,
color: 'rgba(74,83,89,0.35)'
},
{
name: 'Energy',
icon: [
'Energy',
asset_url('/assets/svg/custom-icons/energy.svg'),
32,
32
],
weight: 3.4,
entity: 80,
benchmark: 93.3,
color: 'rgba(74,83,89,0.35)'
},
{
name: 'Air Pollution',
icon: [
'Air Pollution',
asset_url('/assets/svg/custom-icons/air_pollution.svg'),
32,
32
],
weight: 3.4,
entity: 80,
benchmark: 97.8,
color: 'rgba(74,83,89,0.35)'
},
{
name: 'Certifications & Awards',
icon: [
'Certifications & Awards',
asset_url('/assets/svg/custom-icons/certifications_&_awards.svg'),
32,
32
],
weight: 2.4,
entity: 15,
benchmark: 22,
color: 'rgba(74,83,89,0.35)'
},
{
name: 'Customers',
icon: [
'Customers',
asset_url('/assets/svg/custom-icons/customers.svg'),
32,
32
],
weight: 3.4,
entity: 44,
benchmark: 34,
color: 'rgba(74,83,89,0.35)'
},
{
name: 'Employees',
icon: [
'Employees',
asset_url('/assets/svg/custom-icons/employees.svg'),
32,
32
],
weight: 6.8,
entity: 97.2,
benchmark: 52.4,
color: 'rgba(74,83,89,0.35)'
},
{
name: 'Greenhouse Gas Emissions',
icon: [
'Greenhouse Gas Emissions',
asset_url('/assets/svg/custom-icons/greenhouse_gas_emissions.svg'),
32,
32
],
weight: 3.4,
entity: 80,
benchmark: 95.6,
color: 'rgba(74,83,89,0.35)'
},
{
name: 'Health & Safety',
icon: [
'Health & Safety',
asset_url('/assets/svg/custom-icons/health_&_safety.svg'),
32,
32
],
weight: 13.6,
entity: 93.3,
benchmark: 93.2,
color: 'rgba(74,83,89,0.35)'
},
{
name: 'Waste',
icon: [
'Waste',
asset_url('/assets/svg/custom-icons/waste.svg'),
32,
32
],
weight: 3.4,
entity: 100,
benchmark: 84.4,
color: 'rgba(74,83,89,0.35)'
},
{
name: 'Water',
icon: [
'Water',
asset_url('/assets/svg/custom-icons/water.svg'),
32,
32
],
weight: 10.2,
entity: 60,
benchmark: 85.7,
color: 'rgba(74,83,89,0.35)'
}
]
data = order_data(data) if order
%>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var comparisonColor, individualColor, comparisonSeries, cumulativeWeights, datum, i, sum, weight, xTickPositions;
comparisonColor = "rgba(74,83,89,0.35)";
individualColor = "rgb(152, 176, 10)";
weights = [<%= data.map { |x| x[:weight] }.join(', ') %>]
individualData = [<%= data.map { |x| x[:entity] || 0.01 }.join(', ') %>]
comparisonData = [<%= data.map { |x| x[:benchmark] || 0.01 }.join(', ') %>]
sum = 0;
cumulativeWeights = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = weights.length; _i < _len; _i++) {
weight = weights[_i];
sum += weight;
_results.push(sum - weight / 2);
}
return _results;
})();
sum = 0;
xTickPositions = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = weights.length; _i < _len; _i++) {
weight = weights[_i];
sum += weight;
_results.push(sum - weight);
}
return _results;
})();
function calculateY(leftHalf, currentY, topHalf, yPoints) {
update = false
for (var i = 0; i < yPoints.length; i++) {
x = yPoints[i][0]
if (leftHalf === yPoints[i][1] && (currentY >= (x - 16) && currentY <= (x + 16))) {
update = true
if ((topHalf && !leftHalf) || (topHalf && leftHalf)) {
labelY = x - 17;
if (isArrayInArray(yPoints, [labelY, leftHalf])) {
calculateY(leftHalf, labelY, topHalf, yPoints)
}
} else if ((!topHalf && leftHalf) || (!topHalf && !leftHalf)) {
labelY = x + 17;
if (isArrayInArray(yPoints, [labelY, leftHalf])) {
calculateY(leftHalf, labelY, topHalf, yPoints)
}
}
}
}
if (!update) {
labelY = currentY
}
return labelY
}
function calculateX(leftHalf, currentX, topHalf, xPoints) {
if (leftHalf) {
for (var i = 0; i < xPoints.length; i++) {
x = xPoints[i][0]
if (leftHalf === xPoints[i][1] && (currentX >= (x - 25) && currentX <= (x + 25))) {
labelX = x - 26;
if (isArrayInArray(xPoints, [labelX, leftHalf])) {
calculateX(leftHalf, labelX, topHalf, xPoints)
} else {
return labelX
}
}
}
return currentX
} else {
return currentX
}
}
function isArrayInArray(x, check) {
for (var i = 0, len = x.length; i < len; i++) {
if (x[i][0] === check[0] && x[i][1] === check[1]) {
return true;
}
}
return false;
}
comparisonSeries = (function() {
var _i, _len, _results;
_results = [];
for (i = _i = 0, _len = comparisonData.length; _i < _len; i = ++_i) {
datum = comparisonData[i];
_results.push((function(datum, i) {
var start;
weight = weights[i];
start = cumulativeWeights[i];
return {
type: 'column',
color: comparisonColor,
name: "<%= compare_name %>",
dataLabels: {
enabled: false
},
data: [datum],
pointRange: weight,
pointStart: start,
linkedTo: i ? ':previous' : void 0
};
})(datum, i));
}
return _results;
})();
var i, individualSeries, w;
individualSeries = {
className: "<%= line_class %>",
color: 'inherit',
type: 'line',
name: 'This Entity',
lineWidth: 0,
data: (function() {
var _i, _len, _results;
_results = [];
for (i = _i = 0, _len = cumulativeWeights.length; _i < _len; i = ++_i) {
w = cumulativeWeights[i];
_results.push([w, individualData[i]]);
}
return _results;
})(),
dataLabels: {
enabled: true,
formatter: function() {
if (this.y <= 0.01) {
return 0;
} else {
return this.y;
}
}
}
};
var series, icons;
series = comparisonSeries.concat([individualSeries]);
icons = <%= data.map { |x| x[:icon] }.to_json %>;
var totalWeight = 0;
for (var i = 0; i < weights.length; i++) {
totalWeight += weights[i];
}
Highcharts.chart('<%= chart_id%>', {
credits: false,
legend: {
layout: "horizontal",
align: "center",
verticalAlign: "bottom",
borderWidth: 0,
x:0,
useHTML: true,
itemStyle: {
lineHeight: '24px',
fontSize: '12px',
fontFamily: 'DINWeb',
fontWeight: 200,
},
reversed: true,
y: 40
},
tooltip: {
shared: true,
useHTML: true,
style: {
background: '#FFF'
},
formatter: function() {
var idx, s;
s = '';
idx = cumulativeWeights.indexOf(this.points[0].x);
if (idx >= 0) {
s += '<strong>' + icons[idx][0] + '</strong><br/>';
s += 'Weight: ' + weights[idx] + '%<br/>';
}
$.each(this.points, function() {
var y;
y = this.y <= 0.01 ? 0 : this.y;
return s += '<br/>' + this.series.name + ': ' + y;
});
return s;
}
},
chart: {
borderRadius: 0,
borderWidth: 0,
plotBorderWidth: 0,
plotBorderColor: '#FFF',
polar: true,
marginTop: 40,
marginRight: 0,
marginBottom: 40,
marginLeft: 0,
spacingTop: 0,
spacingLeft: 0,
spacingBottom: 30,
spacingRight: 0
},
title: undefined,
pane: {
size: '85%'
},
xAxis: {
tickPositions: xTickPositions,
labels: {
enabled: false,
distance: 30,
useHTML: true,
style: {
minWidth: '120px',
whiteSpace: 'normal'
}
},
gridLineColor: '#CED3D6',
allowDecimals: false,
min: 0,
max: totalWeight
},
yAxis: {
min: 0,
max: 100,
gridLineColor: '#CED3D6',
tickPositions: [25, 50, 75, 101],
labels: {
zIndex: 1,
style: {
color: '#EEE'
},
enabled: false
},
startOnTick: false,
endOnTick: true,
x: 27
},
plotOptions: {
column: {
animation: false,
pointPadding: 0,
borderWidth: 0
},
line: {
animation: false,
lineWidth: 0,
marker: {
enabled: true,
radius: 2,
symbol: 'circle'
},
dataLabels: {
borderRadius: 3,
fontSize: '16px',
style: {
fontSize: '13px'
},
backgroundColor: 'rgba(255,255,255,0.85)',
allowOverlap: true,
},
states: {
hover: {
lineWidth: 0,
lineWidthPlus: 0,
}
},
},
series: {
grouping: false,
groupPadding: 0,
pointPlacement: 'on'
},
},
series: series,
exporting: {
buttons: {
contextButton: {
enabled: false
}
},
}
}, function(chart) {
var H, adjustPos, arcEnd, arcLength, arcLength2, arcStart, arcStartX, arcStartX2, arcStartY, arcStartY2, attempts, centerX, centerY, cosTheta, cosTheta2, cumulativeArcStart, cz, estimatedWidth, fractionOfTurn, fractionOfTurn2, height, idx, image, imageX, imageY, labelX, labelY, leftHalf, maxLen, nextIdx, nextPoint, p1, p2, parts, point, pointX, pointX2, pointY, pointY2, pollingInterval, radius, series, sinTheta, sinTheta2, startTrying, tau, textX, textY, theta, theta2, title, topHalf, width, x, x1, x2, y, y1, y2, _i, _len, _ref, _ref1, _results;
cumulativeArcStart = -Math.PI / 2;
series = chart.series[chart.series.length - 1];
chart = series.chart;
p2 = null;
tau = 2 * Math.PI;
centerX = chart.chartWidth / 2;
centerY = chart.chartHeight / 2;
H = Highcharts;
yPoints = []
xPoints = []
_ref = series.points;
_results = [];
var totalWeight = 0;
for (var i = 0; i < weights.length; i++) {
totalWeight += weights[i];
}
for (idx = _i = 0, _len = _ref.length; _i < _len; idx = ++_i) {
point = _ref[idx];
if (idx === weights.length) {
break;
}
nextIdx = (idx + 1) % weights.length;
nextPoint = series.points[nextIdx];
fractionOfTurn = weights[idx] / totalWeight;
fractionOfTurn2 = weights[nextIdx] / totalWeight;
arcLength = tau * fractionOfTurn;
arcLength2 = tau * fractionOfTurn2;
pointX = point.plotX + series.xAxis.pos;
pointY = H.pick(point.plotClose, point.plotY) + series.yAxis.pos;
pointX2 = nextPoint.plotX + series.xAxis.pos;
pointY2 = H.pick(nextPoint.plotClose, nextPoint.plotY) + series.yAxis.pos;
arcStart = cumulativeArcStart;
arcEnd = arcStart + arcLength;
theta = arcLength / 2;
theta2 = -arcLength2 / 2;
cumulativeArcStart += arcLength;
x = pointX - centerX;
y = pointY - centerY;
x2 = pointX2 - centerX;
y2 = pointY2 - centerY;
sinTheta = Math.sin(theta);
cosTheta = Math.cos(theta);
arcStartX = centerX + (x * cosTheta) - (y * sinTheta);
arcStartY = centerY + (x * sinTheta) + (y * cosTheta);
sinTheta2 = Math.sin(theta2);
cosTheta2 = Math.cos(theta2);
arcStartX2 = centerX + (x2 * cosTheta2) - (y2 * sinTheta2);
arcStartY2 = centerY + (x2 * sinTheta2) + (y2 * cosTheta2);
radius = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
chart.renderer.arc(centerX, centerY, radius - 2, radius + 2, arcStart, arcEnd).attr({
class: "<%= line_class %>",
zIndex: 3
}).add();
chart.renderer.path(['M', arcStartX2, arcStartY2, 'L', arcStartX, arcStartY]).attr({
style: "stroke-width: 4px; stroke-linecap: round;",
class: "svg-stroke-primary <%= line_class %>",
zIndex: 3
}).add();
individualDataItem = individualData[idx] > 0 ? individualData[idx] : 100;
p1 = 100.0 / individualDataItem;
commonWeight = 0;
for (var i = 0; i < idx; i++) {
commonWeight += weights[i];
}
commonWeight = commonWeight + weights[idx] / 2;
pointAngle = commonWeight / totalWeight * 360;
if (x == 0 && y == 0) {
x = 140 * Math.sin(pointAngle * Math.PI / 180);
y = -140 * Math.cos(pointAngle * Math.PI / 180);
}
x1 = p1 * x;
y1 = p1 * y;
topHalf = y < 0;
leftHalf = x < 0;
if (p2 == null) {
p2 = 5 / Math.sqrt(Math.pow(x1, 2) + Math.pow(y1, 2));
}
x2 = p2 * x1;
y2 = p2 * y1;
currentY = centerY + y1 + y2
currentX = centerX + x1 + x2
labelX = calculateX(leftHalf, currentX, topHalf, xPoints);
labelY = calculateY(leftHalf, currentY, topHalf, yPoints)
yPoints.push([labelY, leftHalf])
xPoints.push([labelX, leftHalf])
_ref1 = icons[idx], title = _ref1[0], image = _ref1[1], width = _ref1[2], height = _ref1[3];
imageX = labelX;
imageY = labelY;
if (leftHalf) {
imageX -= width + 15;
}
if (topHalf) {
imageY -= height;
}
if (image) {
chart.renderer.image(image, imageX, imageY, width, height).add();
}
if (title.length > 25) {
title = title.replace(' & ', ' <br>& ');
textY = imageY + height / 2;
} else {
textY = imageY + height * 2 / 3;
}
textX = leftHalf ? (title.search('<br>') > -1 ? (parts = title.split('<br>'), maxLen = Math.max.apply(null, parts), estimatedWidth = maxLen * 3) : estimatedWidth = title.length * 4.9, imageX - width - 5 - estimatedWidth) : imageX + width + 5;
if (leftHalf) {
cz = "rj" + idx;
chart.renderer.label(title, textX, textY, null, null, null, false, true, cz).add();
attempts = 9;
pollingInterval = 20;
adjustPos = function() {
var $t, delta, relX, trueLength;
$t = $('#<%= chart_id %> .highcharts-' + cz + ' > text');
if ($t.length) {
trueLength = $t[0].getComputedTextLength();
delta = estimatedWidth - trueLength;
relX = $t[0].x.baseVal.getItem(0).value;
return $t.attr('x', relX + delta + 20);
} else if (attempts) {
attempts -= 1;
return setTimeout(adjustPos, pollingInterval);
}
};
startTrying = function() {
if (document.getElementById('<%= chart_id %>').offsetLeft >= 0) {
return adjustPos();
} else {
return setTimeout(startTrying, pollingInterval);
}
};
_results.push(startTrying());
} else {
_results.push(chart.renderer.text(title, textX, textY).add());
}
}
return _results;
});
});
</script>