formir/src/less/core/components/chart.less

Pure CSS / HTML Framework

.chart-value(@n, @i: 0) when (@i =< @n) {
  &.@{chart-value}-@{i}, &[data-value="@{i}"], &[value="@{i}"] {
    &.@{chart-value} {
      &:before {
        content: "@{i}%";
      }
      &.@{chart-value-colored}:before {
        color: mix(@chart-color, @chart-background, unit(@i, %));
      }
    } 
    > *:first-child:before {
      & when (@i > 0) {
        transform: rotate(unit((@i/100)*360, deg));
      }
      & when (@i > 50) {
        transform: rotate(unit(((@i - 50)/100)*360, deg));
        background: currentColor;
      }
    }
  }
  .chart-value(@n, (@i + 1));
}

.chart-control-value(@n, @i: 0) when (@i =< @n) {
  &[value="@{i}"] ~ .chart {
    &.@{chart-value} {
      &:before {
        content: "@{i}%";
      }
      &.@{chart-value-colored}:before {
        color: mix(@chart-color, @chart-background, unit(@i, %));
      }
    }
    > *:first-child:before {
      & when (@i > 0) {
        transform: rotate(unit((@i/100)*360, deg));
      }
      & when (@i > 50) {
        transform: rotate(unit(((@i - 50)/100)*360, deg));
        background: currentColor;
      }
    }
  }
  .chart-control-value(@n, (@i + 1));
}

.@{chart} {
  display: inline-block;
  position: relative;
  background: inherit;
  vertical-align: middle;
  .chart-value(100);
  &.@{chart-ring} {
    &:after {
      content: "";
      background: inherit;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      border-radius: 50%;
    }
  }
  &.@{chart-value} {
    &:before {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      text-align: center;
      z-index: 1;
      content: "0%";
    }
  }
  > *:first-child {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: linear-gradient(to right, transparent 50%, currentColor 0);
    &:before {
      content: '';
      display: block;
      margin-left: 50%;
      height: 100%;
      border-radius: ~"0 100% 100% 0 / 50%";
      background-color: inherit;
      transform-origin: left;
      background-color: inherit;
    }
  }
}

input.@{chart-control} {
  .chart-control-value(100);
}