Untitled

<td valign="top" style="direction: ltr" align="center" ng-repeat="periodData in data.periodsData"
          ng-class=" $last ? 'baseline-col' : 'period-col'">
          <table cellspacing="0" cellpadding="5" class="period">
            <!-- Upper -->
            <tbody>
              <!-- Critical Attribute !-->
              <!-- Period -->
              <tr height="48">
                <th class="pivot_caption pivot_top pivot_left aqua" colspan="4" ng-if="!$last">
                  Period {{ 3 - $index }} {{ periodData[$index].created }}
                </th>
                <th class="pivot_caption pivot_top pivot_left aqua" colspan="4" ng-if="$last">
                  Baseline {{ periodData[$index].created }}
                </th>
              </tr>

              <!-- Label -->
              <tr height="70">
                <td class="pivot_caption pivot_left aqua">Progress</td>
                <td class="pivot_caption aqua">Total Deployed Assets</td>
                <td class="pivot_caption aqua">Assets Missing Attributes</td>
                <td class="pivot_caption aqua">%</td>
              </tr>

              <!-- Datas -->
              <tr ng-repeat="periodLineData in periodData" height="35">
                <td class="pivot_cell pivot_left first_col">
                  <!-- {{ periodLineData.progress }} -->
                  ↔
                </td>
                <td class="pivot_cell">
                  <a href="{{ periodLineData.total_deployed_assets_url }}" target="_blank"
                    ng-if="periodLineData.is_latest_period">
                    {{ periodLineData.total_deployed_assets }}
                  </a>
                  <span ng-if="!periodLineData.is_latest_period">{{ periodLineData.total_deployed_assets }}</span>
                </td>
                <td class="pivot_cell">
                  <!-- <a
                    href="/$pa_dashboard.do?sysparm_dashboard=1fa6881093514ad0ffb4bb2c5cba107c"
                    target="_blank"
                    ng-if="periodLineData.is_latest_period"
                  > -->
                  {{ periodLineData.total_attributes_missing }}
                  </a>
                  <!-- <span ng-if="!periodLineData.is_latest_period">{{ periodLineData.total_attributes_missing }}</span> -->
                </td>
                <td class="pivot_cell percent-col"
                  ng-class="periodLineData.percent != 0 ? periodLineData.percent >= 95 ? 'green' : periodLineData.percent < 90 ? 'pink': 'orange' : ''">
                  {{periodLineData.percent }}%
                </td>
              </tr>
            </tbody>

            <!-- Bottom -->
            <tbody>
              <!-- Online Offline Data ! -->
              <!-- Label -->
              <tr height="60">
                <td class="pivot_caption pivot_left aqua">Less than 30 Days</td>
                <td class="pivot_caption aqua">30 - 60 Days</td>
                <td class="pivot_caption aqua">60 - 90 Days</td>
                <td class="pivot_caption aqua">Over 90 Days</td>
              </tr>

              <!-- Datas -->
              <!-- periodLineDatas have 4 elements -->
              <tr ng-repeat="periodLineData in periodData[$index].onOffDevices track by $ind">
                <!-- insert here -->
                <td class="pivot_cell pivot_left" ng-class="periodLineData.total_deployed_assets > 0 ? 'green': ''">
                  <a href="{{ periodLineData.evaluated.evaluate_less_than_30_days_url }}" target="_blank">
                    {{ periodLineData.lessThan30 }}
                  </a>
                </td>
                <td class="pivot_cell" ng-class="periodLineData.total_deployed_assets > 0 ? 'green': ''">
                  <a href="{{ periodLineData.evaluated.evaluate_less_than_30_days_url }}" target="_blank">
                    {{ periodLineData.from30To60 }}
                  </a>
                </td>
                <td class="pivot_cell" ng-class="periodLineData.total_deployed_assets > 0 ? 'orange': ''">
                  <a href="{{ periodLineData.evaluated.evaluate_less_than_30_days_url }}" target="_blank">
                    {{ periodLineData.from60To90 }}
                  </a>
                </td>
                <td class="pivot_cell" ng-class="periodLineData.total_deployed_assets > 0 ? 'pink': ''">
                  <a href="{{ periodLineData.evaluated.evaluate_less_than_30_days_url }}" target="_blank">
                    {{ periodLineData.moreThan90 }}
                  </a>
                </td>
              </tr>

            </tbody>
          </table>
        </td>