<commit_before>%dashboard-chart-box {
  @extend %pull-left;
  border-left: 0 solid $c-black;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;

  &:first-child {
    margin-left: 0;
  }
}

%dashboard-chart-basic {
  @extend %pull-left;

  margin-bottom: $dashboard-margin;
  position: relative;
}

.dashboard-sub-bar-menu {
  @extend %pull-right;
  @extend %icon-neutral;
  cursor: pointer;
  position: absolute;
  right: 9px;
  top: 6px;
}

.detail-chart {
  @extend %clear-float;
}


.dashboard-sub-bar {
  @extend %clear-float;

  .dashboard-sub-bar-title {
    @extend %pull-left;
  }
}


.dashboard-large-chart {
  @extend %dashboard-chart-basic;
  margin-right: 12px;
  border: 1px solid rgba(104, 103, 102, 0.10);
  border-radius: 3px;

  .dashboard-large-chart-inner {
    @extend %dashboard-chart-box;
    @extend %pull-left;
    background-color: $c-white;
    border-left: $dashboard-borderwidth solid $c-white;
    border-right: $dashboard-borderwidth solid $c-white;
    border-top: $dashboard-borderwidth solid $c-white;
    padding-top: $dashboard-padding + 2px;
    padding-bottom: $dashboard-padding;

    .dashboard-interior-chart {
      @extend %pull-left;
      margin-bottom: 0;
    }
  }
}


.dashboard-small-chart {
  @extend %dashboard-chart-basic;
  border: 1px solid rgba(104, 103, 102, 0.10);
  border-radius: 3px;

  .dashboard-small-chart-inner {
    @extend %dashboard-chart-box;
    @extend %pull-left;
    background-color: $c-white;
    border-left: $dashboard-borderwidth solid $c-white;
    border-right: $dashboard-borderwidth solid $c-white;
    border-top: $dashboard-borderwidth solid $c-white;
    padding-bottom: $dashboard-padding;
    padding-top: $dashboard-padding - 5px;

    .dashboard-interior-chart {
      @extend %pull-left;

      .nv-bar rect {
        fill-opacity: .15;
        stroke-opacity: 1;
        stroke-width: 1px;
      }
    }
  }
}

.dashboard-medium-chart-outer {
  border: 1px solid rgba(104, 103, 102, 0.10);
  border-radius: 3px;

  &:first-child {
    margin-right: 10px;
  }
}
.dashboard-medium-chart {
  @extend %dashboard-chart-box;
  @extend %dashboard-chart-basic;
  background-color: $c-white;
  border-left: $dashboard-borderwidth solid $c-white;
  border-right: $dashboard-borderwidth solid $c-white;
  border-top: $dashboard-borderwidth solid $c-white;
  padding-top: $dashboard-padding;
  margin-bottom: 0;

  &:first-child {
    margin-right: 12px;
  }

  .dashboard-interior-chart {
    @extend %pull-left;
    margin-bottom: 0;
  }

  .dashboard-medium-chart-outer {
    border: 1px solid rgba(104, 103, 102, 0.10);
    border-radius: 3px;
  }

  .dashboard-medium-chart-menu {
    @extend %clear-float;
    @include border-radius(2px);

    border: 0 solid $c-halfsemi-transp;
    color: $c-halfsemi-transp;
    cursor: pointer;
    padding: 0 4px;
    position: absolute;
    z-index: 1000;
  }

  .dashboard-medium-chart-menu:hover {
    color: $c-low-transp;
  }

  .dashboard-medium-chart-inner {
    @extend %clear-float;
    padding-bottom: $dashboard-padding;
  }

  .clusterChart .slice path {
    fill-opacity: .15;
    stroke-opacity: 1;
    stroke-width: 1.5px;
  }

}


.dashboard-tendency-container {
  @extend %dashboard-chart-box;
  @extend %dashboard-chart-basic;
  border: 1px solid rgba(104, 103, 102, 0.10);
  border-radius: 3px;

  .dashboard-tendency-chart {
    @extend %clear-float;
    background-color: $c-white;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top: $dashboard-borderwidth solid $c-white;
    border-left: 5px solid $c-white;
    border-right: 5px solid $c-white;
    border-top: 5px solid $c-white;
    padding-bottom: $dashboard-padding-tendency;

    .dashboard-tendency {
      @extend %pull-left;
      background-color: $c-white;
      margin-top: 5px;
      padding: 0 8px;
      
      &:first-child {
        border-right: 1px solid $c-e1grey;
      }

      .dashboard-subtitle-bar {
        @extend %pull-left;
        border-bottom: 1px solid $c-e1grey;
        text-align: right;
      }

      .dashboard-figure {
        @extend %pull-left;
        text-align: center;
      }
    }
  }
}


.dashboard-bar-chart-container {
  @extend %dashboard-chart-box;
  @extend %dashboard-chart-basic;
  border: 1px solid rgba(104, 103, 102, 0.10);
  border-radius: 3px;

  .dashboard-bar-chart {
    @extend %clear-float;
    background-color: $c-white;
    border-left: 5px solid $c-white;
    border-right: 5px solid $c-white;
    border-top: 5px solid $c-white;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding-bottom: $dashboard-padding-tendency;

    .dashboard-bar-chart-title {
      @extend %pull-left;
      margin-top: 5px;
      padding: 0 8px;

      .percentage {
        @extend %pull-left;
        font-weight: 400;
      }

      .absolut {
        @extend %pull-left;
        text-align: right;
      }
    }

    .dashboard-bar-chart-chart {
      @extend %pull-left;

      .nv-bar rect {
        fill-opacity: .15;
        stroke-opacity: 1;
        stroke-width: 1px;
      }
    }
  }
}


.dashboard-legend {
  @extend %pull-left;

  .dashboard-legend-inner {
    padding: 0 5px 5px 0;
  }
}


.dashboard-sub-bar {
  @extend %pull-left;
  background-color: $c-bar-bg;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  color: $c-white;
  height: 24px;
  line-height: 24px;
  margin: 0;
  padding: 0 6px;
}<commit_msg>dashboard ui<commit_after>%dashboard-chart-box {
  @extend %pull-left;
  border-left: 0 solid $c-black;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;

  &:first-child {
    margin-left: 0;
  }
}

%dashboard-chart-basic {
  @extend %pull-left;

  margin-bottom: $dashboard-margin;
  position: relative;
}

.dashboard-sub-bar-menu {
  @extend %pull-right;
  @extend %icon-neutral;
  cursor: pointer;
  position: absolute;
  right: 9px;
  top: 6px;
}

.detail-chart {
  @extend %clear-float;
}


.dashboard-sub-bar {
  @extend %clear-float;

  .dashboard-sub-bar-title {
    @extend %pull-left;
  }
}


.dashboard-large-chart {
  @extend %dashboard-chart-basic;
  margin-right: 12px;
  border: 1px solid rgba(104, 103, 102, 0.10);
  border-radius: 3px;

  .dashboard-large-chart-inner {
    @extend %dashboard-chart-box;
    @extend %pull-left;
    background-color: $c-white;
    border-left: $dashboard-borderwidth solid $c-white;
    border-right: $dashboard-borderwidth solid $c-white;
    border-top: $dashboard-borderwidth solid $c-white;
    padding-top: $dashboard-padding + 2px;
    padding-bottom: $dashboard-padding;

    .dashboard-interior-chart {
      @extend %pull-left;
      margin-bottom: 0;
    }
  }
}


.dashboard-small-chart {
  @extend %dashboard-chart-basic;
  border: 1px solid rgba(104, 103, 102, 0.10);
  border-radius: 3px;

  .dashboard-small-chart-inner {
    @extend %dashboard-chart-box;
    @extend %pull-left;
    background-color: $c-white;
    border-left: $dashboard-borderwidth solid $c-white;
    border-right: $dashboard-borderwidth solid $c-white;
    border-top: $dashboard-borderwidth solid $c-white;
    padding-bottom: $dashboard-padding;
    padding-top: $dashboard-padding - 5px;

    .dashboard-interior-chart {
      @extend %pull-left;

      .nv-bar rect {
        fill-opacity: .15;
        stroke-opacity: 0.8;
        stroke-width: 0.5px;
      }
    }
  }
}

.dashboard-medium-chart-outer {
  border: 1px solid rgba(104, 103, 102, 0.10);
  border-radius: 3px;

  &:first-child {
    margin-right: 10px;
  }
}
.dashboard-medium-chart {
  @extend %dashboard-chart-box;
  @extend %dashboard-chart-basic;
  background-color: $c-white;
  border-left: $dashboard-borderwidth solid $c-white;
  border-right: $dashboard-borderwidth solid $c-white;
  border-top: $dashboard-borderwidth solid $c-white;
  padding-top: $dashboard-padding;
  margin-bottom: 0;

  &:first-child {
    margin-right: 12px;
  }

  .dashboard-interior-chart {
    @extend %pull-left;
    margin-bottom: 0;
  }

  .dashboard-medium-chart-outer {
    border: 1px solid rgba(104, 103, 102, 0.10);
    border-radius: 3px;
  }

  .dashboard-medium-chart-menu {
    @extend %clear-float;
    @include border-radius(2px);

    border: 0 solid $c-halfsemi-transp;
    color: $c-halfsemi-transp;
    cursor: pointer;
    padding: 0 4px;
    position: absolute;
    z-index: 1000;
  }

  .dashboard-medium-chart-menu:hover {
    color: $c-low-transp;
  }

  .dashboard-medium-chart-inner {
    @extend %clear-float;
    padding-bottom: $dashboard-padding;
  }

  .clusterChart .slice path {
    fill-opacity: .15;
    stroke-opacity: 1;
    stroke-width: 1.5px;
  }

}


.dashboard-tendency-container {
  @extend %dashboard-chart-box;
  @extend %dashboard-chart-basic;
  border: 1px solid rgba(104, 103, 102, 0.10);
  border-radius: 3px;

  .dashboard-tendency-chart {
    @extend %clear-float;
    background-color: $c-white;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top: $dashboard-borderwidth solid $c-white;
    border-left: 5px solid $c-white;
    border-right: 5px solid $c-white;
    border-top: 5px solid $c-white;
    padding-bottom: $dashboard-padding-tendency;

    .dashboard-tendency {
      @extend %pull-left;
      background-color: $c-white;
      margin-top: 5px;
      padding: 0 8px;
      
      &:first-child {
        border-right: 1px solid $c-e1grey;
      }

      .dashboard-subtitle-bar {
        @extend %pull-left;
        border-bottom: 1px solid $c-e1grey;
        text-align: right;
      }

      .dashboard-figure {
        @extend %pull-left;
        text-align: center;
      }
    }
  }
}


.dashboard-bar-chart-container {
  @extend %dashboard-chart-box;
  @extend %dashboard-chart-basic;
  border: 1px solid rgba(104, 103, 102, 0.10);
  border-radius: 3px;

  .dashboard-bar-chart {
    @extend %clear-float;
    background-color: $c-white;
    border-left: 5px solid $c-white;
    border-right: 5px solid $c-white;
    border-top: 5px solid $c-white;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding-bottom: $dashboard-padding-tendency;

    .dashboard-bar-chart-title {
      @extend %pull-left;
      margin-top: 5px;
      padding: 0 8px;

      .percentage {
        @extend %pull-left;
        font-weight: 400;
      }

      .absolut {
        @extend %pull-left;
        text-align: right;
      }
    }

    .dashboard-bar-chart-chart {
      @extend %pull-left;

      .nv-bar rect {
        fill-opacity: .15;
        stroke-opacity: .8;
        stroke-width: 0.5px;
      }
    }
  }
}


.dashboard-legend {
  @extend %pull-left;

  .dashboard-legend-inner {
    padding: 0 5px 5px 0;
  }
}


.dashboard-sub-bar {
  @extend %pull-left;
  background-color: $c-bar-bg;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  color: $c-white;
  height: 24px;
  line-height: 24px;
  margin: 0;
  padding: 0 6px;
}
{'fraction_non_alphanumeric': 0.1446862996158771, 'fraction_numerical': 0.029175050301810865, 'mean_word_length': 2.548020765736535, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '7590316', 'n_tokens_mistral': 4302, 'n_tokens_neox': 4042, 'n_words': 779}