<commit_before>import {LitElement, css, html} from 'lit-element';
import SHARED_STYLES from '../css/shared.css';

class ChromedashXMeter extends LitElement {
  static get properties() {
    return {
      value: {type: Number},
      max: {type: Number}, // Normalized, maximum width for the bar
      valueFormatted: {attribute: false},
      href: {type: String},
    };
  }

  constructor() {
    super();
    this.value = 0;
    this.max = 100;
    this.href = '#';
  }

  static get styles() {
    return [
      SHARED_STYLES,
      css`
      :host {
        display: inline-block;
        contain: content;
        background: var(--barchart-background);
        border-radius: var(--border-radius);
        overflow: hidden;
        height: 1.7em;
        color: var(--barchart-color);
      }

      div {
        background: var(--barchart-foreground);
        height: 100%;
        white-space: nowrap;
        padding: 3px 0;
        text-indent: 5px;
      }
    `];
  }

  firstUpdated() {
    this.valueFormatted = this.value <= 0.000001 ? '<=0.000001%' : this.value + '%';
    this.addEventListener('click', this.showTimeline);
  }

  showTimeline() {
    window.location.href = this.href;
  }

  render() {
    return html`  
      <div style="width: ${(this.value / this.max * 100)}%">  
        <span>${this.valueFormatted}</span> 
      </div>  
    `;
  }
}

customElements.define('chromedash-x-meter', ChromedashXMeter);<commit_msg>Fix sorting of percentage values (#1224)<commit_after>import {LitElement, css, html} from 'lit-element';
import SHARED_STYLES from '../css/shared.css';

class ChromedashXMeter extends LitElement {
  static get properties() {
    return {
      value: {type: Number},
      max: {type: Number}, // Normalized, maximum width for the bar
      href: {type: String},
    };
  }

  constructor() {
    super();
    this.value = 0;
    this.max = 100;
    this.href = '#';
  }

  static get styles() {
    return [
      SHARED_STYLES,
      css`
      :host {
        display: inline-block;
        contain: content;
        background: var(--barchart-background);
        border-radius: var(--border-radius);
        overflow: hidden;
        height: 1.7em;
        color: var(--barchart-color);
      }

      div {
        background: var(--barchart-foreground);
        height: 100%;
        white-space: nowrap;
        padding: 3px 0;
        text-indent: 5px;
      }
    `];
  }

  showTimeline() {
    window.location.href = this.href;
  }

  render() {
    return html`  
      <div @click="${this.showTimeline}" style="width: ${(this.value / this.max * 100)}%">  
        <span>${this.value <= 0.000001 ? '<=0.000001%' : this.value + '%'}
        </span> 
      </div>  
    `;
  }
}

customElements.define('chromedash-x-meter', ChromedashXMeter);
{'fraction_non_alphanumeric': 0.15313390313390313, 'fraction_numerical': 0.02207977207977208, 'mean_word_length': 2.188422247446084, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 11, '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': '5921260', 'n_tokens_mistral': 998, 'n_tokens_neox': 917, 'n_words': 196}