BathHacked/energy-sparks

<% content_for :page_title, t(@title_key) %>

<div class="d-flex justify-content-between align-items-center">
  <% if @split_meters %>
    <% if @period == :daily %>
      <h1><%= t('charts.usage.show.compare_message.split_meter.daily_html', supply: @supply.to_s) %></h1>
    <% else %>
      <h1><%= t('charts.usage.show.compare_message.split_meter.weekly_html', supply: @supply.to_s) %></h1>
    <% end %>
  <% else %>
    <% if @period == :daily %>
      <h1><%= t('charts.usage.show.compare_message.other.daily_html', supply: @supply.to_s) %></h1>
    <% else %>
      <h1><%= t('charts.usage.show.compare_message.other.weekly_html', supply: @supply.to_s) %></h1>
    <% end %>
  <% end %>
  <div>
    <%= link_to t('charts.usage.show.explore_data'), pupils_school_analysis_path(@school), class: 'btn btn-outline-dark rounded-pill font-weight-bold' %>
  </div>
</div>

<div class="charts">
  <div>
    <h3><%= t(@title_key)  %></h3>
  </div>

  <div class="row">
    <div class="col-md-12">
      <%= component 'chart',
                    school: @school,
                    chart_type: @chart_config[@period],
                    analysis_controls: true,
                    no_zoom: true,
                    analysis_controls: false,
                    chart_config: create_chart_config(@school, @chart_config[@period]),
                    html_class: 'usage-chart'
      %>
    </div>
  </div>

  <%= render 'shared/usage_controls', chart_config: @chart_config, period: @period, supply: @supply, split_meters: @split_meters, meters: @meters  %>
</div>