{% extends 'base.html' %} {% block css %}
<!-- Custom CSS for this module -->
<link rel='stylesheet' type='text/css' href='/omlet/static/css/omlet.css'>
<link rel='stylesheet' type='text/css' href='/dist/angular-material-data-table/dist/md-data-table.min.css'> {% endblock %} {% block content %}
<!-- Content for this module -->
<div>

  <div flex>

    <div ng-controller='InputController'>
      <!-- Use raw tags to show AngularJS variables -->
      {%raw%}

      <div class='container'>
        <md-toolbar class='md-menu-toolbar'>
          <div layout='row'>
            <md-button ng-click='showMetricsForTwitch()' class='buttons'>Twitch
              <img class='horizontal-badge' ng-src='{{imgSrcHorizontalTwitch}}' />
            </md-button>
            <md-button ng-if='isSelectedBS' ng-click='showMetricsForBroadcaster()' class='buttons'>
              <i class='fa fa-users fa-fw'></i> Broadcaster Success
              <img class='horizontal-badge' ng-src='{{imgSrcHorizontalBS}}' />
            </md-button>
            <md-button ng-if='isSelectedCape' ng-click='showMetricsForCape()' class='buttons'>
              <i class='fa fa-users fa-fw'></i> Cape
              <img class='horizontal-badge' ng-src='{{imgSrcHorizontalCape}}' />
            </md-button>
            <md-button ng-if='isSelectedCommerce' ng-click='showMetricsForCommerce()' class='buttons'>
              <i class='fa fa-users fa-fw'></i> Commerce
              <img class='horizontal-badge' ng-src='{{imgSrcHorizontalCommerce}}' />
            </md-button>
            <md-button ng-if='isSelectedCommunity' ng-click='showMetricsForCommunity()' class='buttons'>
              <i class='fa fa-users fa-fw'></i> Community
              <img class='horizontal-badge' ng-src='{{imgSrcHorizontalCommunity}}' />
            </md-button>
            <md-button ng-if='isSelectedContent' ng-click='showMetricsForContent()' class='buttons'>
              <i class='fa fa-users fa-fw'></i> Content
              <img class='horizontal-badge' ng-src='{{imgSrcHorizontalContent}}' />
            </md-button>
            <md-button ng-if='isSelectedDevSuccess' ng-click='showMetricsForDevSuccess()' class='buttons'>
              <i class='fa fa-users fa-fw'></i> Dev Success
              <img class='horizontal-badge' ng-src='{{imgSrcHorizontalDevSuccess}}' />
            </md-button>
            <div>
              <md-menu-bar>
                <md-menu>
                  <!-- This throws an error: -->
                  <!-- TypeError: Cannot read property 'setAttribute' of null -->
                  <md-button class='buttons' ng-click='$mdOpenMenu()'>
                    &nbsp; Twitch Business Units
                    <i class='fa fa-chevron-down'></i>
                    <md-tooltip md-direction='bottom'>Click to drill-down to BUs and Teams</md-tooltip>
                  </md-button>
                  <md-menu-content>
                    <md-menu-item>
                      <md-menu>
                        <md-button class='menu-items' ng-click=''>
                          Broadcaster Success
                        </md-button>
                        <md-menu-content>
                          <md-menu-item>
                            <md-button class='buttons' ng-click='showMetricsForBroadcaster()'>
                              <i class='fa fa-users fa-lg fa-fw'></i> &nbsp; <b>Broadcaster Success (27 Teams)</b>
                              <img class='horizontal-badge' ng-src='{{imgSrcHorizontalBS}}' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-divider></md-menu-divider>
                          <md-menu-item>
                            <md-button ng-click='showMetricsForAbuse()'>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Abuse
                              <img class='horizontal-badge' ng-src='{{imgSrcHorizontalAbuse}}' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Advertising And Promotions
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Applied Machine Learning
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Clips
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Core Data
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Creator Business
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                        </md-menu-content>
                      </md-menu>
                    </md-menu-item>
                    <md-menu-item>
                      <md-menu>
                        <md-button class='menu-items' ng-click=''>
                          Cape
                        </md-button>
                        <md-menu-content>
                          <md-menu-item>
                            <md-button class='buttons' ng-click='showMetricsForCape()'>
                              <i class='fa fa-users fa-lg fa-fw'></i> &nbsp; <b>Cape (19 Teams)</b>
                              <img class='horizontal-badge' ng-src='{{imgSrcHorizontalCape}}' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-divider></md-menu-divider>
                          <md-menu-item>
                            <md-button ng-click='showMetricsForAdminServices()'>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Admin Services
                              <img class='horizontal-badge' ng-src='{{imgSrcHorizontalAdminServices}}' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Android
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Browser Clients
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Capacity Planning
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Desktop
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; DevTools
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                        </md-menu-content>
                      </md-menu>
                    </md-menu-item>
                    <md-menu-item>
                      <md-menu>
                        <md-button class='menu-items' ng-click=''>
                          Commerce
                        </md-button>
                        <md-menu-content>
                          <md-menu-item>
                            <md-button class='buttons' ng-click='showMetricsForCommerce()'>
                              <i class='fa fa-users fa-lg fa-fw'></i> &nbsp; <b>Commerce (5 Teams)</b>
                              <img class='horizontal-badge' ng-src='{{imgSrcHorizontalCommerce}}' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-divider></md-menu-divider>
                          <md-menu-item>
                            <md-button ng-click='showMetricsForFuel()'>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Fuel
                              <img class='horizontal-badge' ng-src='{{imgSrcHorizontalFuel}}' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Moderation and Safety
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Payments
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Prime
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Subs
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                        </md-menu-content>
                      </md-menu>
                    </md-menu-item>
                    <md-menu-item>
                      <md-menu>
                        <md-button class='menu-items' ng-click=''>
                          Community
                        </md-button>
                        <md-menu-content>
                          <md-menu-item>
                            <md-button class='buttons' ng-click='showMetricsForCommunity()'>
                              <i class='fa fa-users fa-lg fa-fw'></i> &nbsp; <b>Community (5 Teams)</b>
                              <img class='horizontal-badge' ng-src='{{imgSrcHorizontalCommunity}}' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-divider></md-menu-divider>
                          <md-menu-item>
                            <md-button ng-click='showMetricsForChannelFeed()'>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Channel Feed
                              <img class='horizontal-badge' ng-src='{{imgSrcHorizontalChannelFeed}}' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Chat Infrastructure
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Communications and More
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Events
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Growth
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                        </md-menu-content>
                      </md-menu>
                    </md-menu-item>
                    <md-menu-item>
                      <md-menu>
                        <md-button class='menu-items' ng-click=''>
                          Content
                        </md-button>
                        <md-menu-content>
                          <md-menu-item>
                            <md-button class='buttons' ng-click='showMetricsForContent()'>
                              <i class='fa fa-users fa-lg fa-fw'></i> &nbsp; <b>Content (1 Team)</b>
                              <img class='horizontal-badge' ng-src='{{imgSrcHorizontalContent}}' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-divider></md-menu-divider>
                          <md-menu-item>
                            <md-button ng-click='showMetricsForPartnerships()'>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Partnerships
                              <img class='horizontal-badge' ng-src='{{imgSrcHorizontalPartnerships}}' />
                            </md-button>
                          </md-menu-item>
                        </md-menu-content>
                      </md-menu>
                    </md-menu-item>
                    <md-menu-item>
                      <md-menu>
                        <md-button class='menu-items' ng-click=''>
                          Dev Success
                        </md-button>
                        <md-menu-content>
                          <md-menu-item>
                            <md-button class='buttons' ng-click='showMetricsForDevSuccess()'>
                              <i class='fa fa-users fa-lg fa-fw'></i> &nbsp; <b>Dev Success (11 Teams)</b>
                              <img class='horizontal-badge' ng-src='{{imgSrcHorizontalDevSuccess}}' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-divider></md-menu-divider>
                          <md-menu-item>
                            <md-button ng-click='showMetricsForAPIInfra()'>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; API Infra
                              <img class='horizontal-badge' ng-src='{{imgSrcHorizontalAPIInfra}}' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Curseforge
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Devs On Twitch
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Extensions
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Helix
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                          <md-menu-item>
                            <md-button ng-click=''>
                              <i class='fa fa-user fa-lg fa-fw'></i> &nbsp; Identity
                              <img class='horizontal-badge' ng-src='' />
                            </md-button>
                          </md-menu-item>
                        </md-menu-content>
                      </md-menu>
                    </md-menu-item>
                  </md-menu-content>
                </md-menu>
              </md-menu-bar>
            </div>
          </div>
        </md-toolbar>

      </div>

      <br>
      <md-table-container class='container'>
        <div ng-if='showMetricsForTwoWeeks'>
          <md-button class='buttons' ng-click='showFourWeeksData()'>
            <i class='fa fa-eye fa-lg fa-fw'></i> &nbsp; Display 4 Weeks' Data
          </md-button>
        </div>
        <div ng-if='showMetricsForFourWeeks'>
          <md-button class='buttons' ng-click='showTwoWeeksData()'>
            <i class='fa fa-eye fa-lg fa-fw'></i> &nbsp; Display 2 Weeks' Data
          </md-button>
        </div>
        <table md-table>
          <tr>
            <td class='tableheadertext' colspan='1' width='20%'>
              <div>{{currentView}}</div>
            </td>
            <td ng-if='showMetricsForTwoWeeks' colspan='2'>
              <img class='tableheaderimage' ng-src='{{imgSrcVertical}}' />
            </td>
            <td ng-if='showMetricsForFourWeeks' colspan='4'>
              <img class='tableheaderimage' ng-src='{{imgSrcVertical}}' />
            </td>
          </tr>
          <tr ng-repeat='(key, value) in metricsForWeek2[0]'>
            <th>{{key}}</th>
            <td class='metric1' ng-repeat='metric1 in metricsForWeek1'>
              <div ng-if='key == "Date"'>
                {{metric1[key]}}
              </div>
              <div ng-if='key != "Date" && hasInscreased(metric1[key], value)' class='green-cell'>
                {{metric1[key]}}
                <i class='fa fa-chevron-up'></i>
              </div>
              <div ng-if='key != "Date" && hasDecreased(metric1[key], value)' class='red-cell'>
                {{metric1[key]}}
                <i class='fa fa-chevron-down'></i>
              </div>
              <div ng-if='key == "OML Level" || metric1[key] == value' class='yellow-cell'>
                {{metric1[key]}}
              </div>
            </td>
            <td class='metric2' ng-repeat='metric2 in metricsForWeek2'>
              {{metric2[key]}}
            </td>
            <td class='metric3' ng-if='showMetricsForFourWeeks' ng-repeat='metric3 in metricsForWeek3'>
              {{metric3[key]}}
            </td>
            <td class='metric4' ng-if='showMetricsForFourWeeks' ng-repeat='metric4 in metricsForWeek4'>
              {{metric4[key]}}
            </td>
          </tr>
        </table>
      </md-table-container>

      {%endraw%}
    </div>
  </div>
</div>
<div class='version'>
  <a href='https://wiki.twitch.com/display/QE/OML+UI+Release+Notes' target='_blank'> version 0.1 (alpha) </a>
</div>
{% endblock %} {% block scripts %}
<!-- Custom JS for this module -->
<script src='/dist/dashboard/omlet/omlet.min.js'></script>
<script src='/dist/angular-material-data-table/dist/md-data-table.min.js'></script>
<script src='/dist/jquery.browser/dist/jquery.browser.js'></script>
<script src='/dist/jquery.bbq/jquery.ba-bbq.min.js'></script>
{% endblock %}