ManageIQ/manageiq-ui-classic

- if chart_data[chart_index][:data2]
  %div{"style" => "margin-bottom: 50px"}
    .card-pf
      %div
        .chart_parent{"id" => "miq_chart_parent_#{chart_set}_#{chart_index}"}
          %div
            .card-pf-heading
              %h2.card-pf-title= _(charts[chart_index][:title])
            .overlay-container{"style" => "position: relative"}
              .card-pf-body
                = react('PerformanceChartWidget',:data => chart_data[chart_index][:data], :id => "miq_chart_#{chart_set}_#{chart_index}", :size =>'400px', :title => charts[chart_index][:title])
                .overlay{"style" => "display: none; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 500"}
          %ul.dropdown-menu{"role"            => "menu",
                          "aria-labelledby" => "miq_chart_#{chart_set}_#{chart_index}",
                          "id"              => "miq_chartmenu_#{chart_set}_#{chart_index}",
                          "style"           => "position:fixed;"}
        :javascript
          $("#miq_chart_parent_#{chart_set}_#{chart_index}").on('hidden.bs.dropdown', function() {
            $("#miq_chartmenu_#{chart_set}_#{chart_index}").empty();
            $("#miq_chart_parent_#{chart_set}_#{chart_index} .overlay").hide();
          });
        .chart_parent{"id" => "miq_chart_parent_#{chart_set}_#{chart_index}_2"}
          %div
            .overlay-container{"style" => "position: relative"}
              .card-pf-body
                = react('PerformanceChartWidget',:data => chart_data[chart_index][:data2], :id => "miq_chart_#{chart_set}_#{chart_index}", :size =>'150px', :title => charts[chart_index][:title])
                .overlay{"style" => "display: none; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 500"}
                  %div
          %ul.dropdown-menu{"role"            => "menu",
                          "aria-labelledby" => "miq_chart_#{chart_set}_#{chart_index}_2",
                          "id"              => "miq_chartmenu_#{chart_set}_#{chart_index}_2",
                          "style"           => "position: fixed;"}
        :javascript
          $("#miq_chart_parent_#{chart_set}_#{chart_index}_2").on('hidden.bs.dropdown', function() {
            $("#miq_chartmenu_#{chart_set}_#{chart_index}_2").empty();
            $("#miq_chart_parent_#{chart_set}_#{chart_index}_2 .overlay").hide();
          });
- else
  .card-pf
    .chart_parent{"id" => "miq_chart_parent_#{chart_set}_#{chart_index}", "style" => "margin-bottom: 50px"}
      %div
        .card-pf-heading
          %h2.card-pf-title= _(charts[chart_index][:title])
        .card-pf-body
          .overlay-container{"style" => "position: relative"}
            = react('PerformanceChartWidget',:data => chart_data[chart_index][:data],:id => "miq_chart_#{chart_set}_#{chart_index}", :size =>'400px', :title => charts[chart_index][:title])
            .overlay{"style" => "display: none; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 500"}
            %div
      %ul.dropdown-menu{"role"            => "menu",
                        "aria-labelledby" => "miq_chart_#{chart_set}_#{chart_index}",
                        "id"              => "miq_chartmenu_#{chart_set}_#{chart_index}",
                        "style"           => "position: fixed;"}
    :javascript
      miqChartBindEvents("#{chart_set}", #{chart_index});
      $("#miq_chart_parent_#{chart_set}_#{chart_index}").on('hidden.bs.dropdown', function() {
        $("#miq_chartmenu_#{chart_set}_#{chart_index}").empty();
        $("#miq_chart_parent_#{chart_set}_#{chart_index} .overlay").hide();
      });