<commit_before><template>
  <div class="component-StatsBarChart">
    <ul class="stat-list">
      <li 
        v-for="(status, index) in statuses" 
        :key="index" 
        class="stat-item">
        <div class="stat-item-field -label">
          <h3 class="label"><nuxt-link :to="{ name: 'dapps', query: { status: status.status }}">{{ status.status | formatDappStatus | capitalize }}</nuxt-link></h3>
        </div>
        <div class="stat-item-field -value">
          <div 
            :class="'-' + status.status" 
            :style="'width:' + (status.dappCount / maxCount) * 100 + '%;'" 
            class="value">          
            <p class="count">{{ status.dappCount | abbreviateNumber(2) || 0 }}</p>
          </div>
        </div>
        <div class="spacer"/>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    statuses: {
      type: Array,
      required: true
    }
  },
  computed: {
    maxCount() {
      let count = 0
      let statusCounts = []
      for (var status of this.statuses) {
        statusCounts.push(status.dappCount)
      }
      count = Math.max(...statusCounts)
      return count
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~assets/css/settings';

.count {
  @include title;
  margin: 0;
  font-size: 2.5rem;
  line-height: 50px;
  padding: 0 10px;
  text-align: right;
}

.label {
  font-weight: 300;
  margin: 5px 0;
  font-size: 1.2rem;
  letter-spacing: normal;
  @include tweakpoint('min-width', 1000px) {
    text-align: right;
    padding-right: 10px;
  }
}

.spacer {
  @include tweakpoint('min-width', 1000px) {
    width: 150px;
  }
}

.stat-item {
  margin: 16px 0;
  @include tweakpoint('min-width', 1000px) {
    display: flex;
    align-items: center;
    margin: 0;
  }
}

.stat-item-field {
  &.-label {
    @include tweakpoint('min-width', 1000px) {
      width: 150px;
    }
  }
  &.-value {
    @include tweakpoint('min-width', 1000px) {
      flex: 1;
      border-left: 1px solid $color--black;
      padding: 10px 0;
    }
  }
}

.value {
  color: $color--white;
  min-width: 30px;
  height: 50px;
  background: $color--light-purple;
}
</style><commit_msg>Make status bar more visually appealing<commit_after><template>
  <div class="component-StatsBarChart">
    <ul class="stat-list">
      <li 
        v-for="(status, index) in statuses" 
        :key="index" 
        class="stat-item">
        <div class="stat-item-field -label">
          <h3 class="label"><nuxt-link :to="{ name: 'dapps', query: { status: status.status }}">{{ status.status | formatDappStatus | capitalize }}</nuxt-link></h3>
        </div>
        <div class="stat-item-field -value">
          <div 
            :class="'-' + status.status" 
            :style="'width:' + (status.dappCount / maxCount) * 100 + '%;'" 
            class="value">          
            <p class="count">{{ status.dappCount | abbreviateNumber(2) || 0 }}</p>
          </div>
        </div>
        <div class="spacer"/>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    statuses: {
      type: Array,
      required: true
    }
  },
  computed: {
    maxCount() {
      let count = 0
      let statusCounts = []
      for (var status of this.statuses) {
        statusCounts.push(status.dappCount)
      }
      count = Math.max(...statusCounts)
      return count
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~assets/css/settings';

.count {
  @include title;
  margin: 0;
  font-size: 2.5rem;
  line-height: 50px;
  padding: 0 10px;
  text-align: right;
}

.label {
  font-weight: 300;
  margin: 5px 0;
  font-size: 1.2rem;
  letter-spacing: normal;
  @include tweakpoint('min-width', 1000px) {
    text-align: right;
    padding-right: 10px;
  }
}

.spacer {
  @include tweakpoint('min-width', 1000px) {
    width: 150px;
  }
}

.stat-item {
  margin: 16px 0;
  @include tweakpoint('min-width', 1000px) {
    display: flex;
    align-items: center;
    margin: 0;
  }
}

.stat-item-field {
  &.-label {
    @include tweakpoint('min-width', 1000px) {
      width: 150px;
    }
  }
  &.-value {
    @include tweakpoint('min-width', 1000px) {
      flex: 1;
      border-left: 1px solid $color--black;
      padding: 10px 0;
    }
  }
}

.value {
  color: $color--white;
  min-width: 30px;
  height: 50px;
  background: $gradient--main-1;
}
</style>
{'fraction_non_alphanumeric': 0.16997943797121315, 'fraction_numerical': 0.029472241261137764, 'mean_word_length': 2.2002923976608186, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 53, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2867713', 'n_tokens_mistral': 1712, 'n_tokens_neox': 1559, 'n_words': 334}