Redmineの進捗度バーに色付けすると捗る

今年Redmineに導入してよかったカスタマイズ。
Redmineの進捗度バーに10%ごとに同系色、1%毎に濃くしていくと進捗が一目でわかって捗る。

進捗度バーを色付け

@for $i from 1 through 100 {
  table.progress.progress-#{$i} td.closed {
    @if $i%10 == 0{
      background-color: unquote("hsla(#{(floor($i/10))*36}, 100%, 60%, 1)");
    } @else {
      background-color: unquote("hsla(#{(floor($i/10))*36}, 100%, #{($i - 1)*3+73}%, 0.75)");
    }
  }
}

適用にはView Customizeを使ったが、SASSを受け付けないためCSSにコンパイル後適用した。

進捗度バーを色付け

table.progress.progress-1 td.closed {
  background-color: hsla(0, 100%, 73%,0.75);
}

table.progress.progress-2 td.closed {
  background-color: hsla(0, 100%, 76%,0.75);
}

table.progress.progress-3 td.closed {
  background-color: hsla(0, 100%, 79%,0.75);
}

table.progress.progress-4 td.closed {
  background-color: hsla(0, 100%, 82%,0.75);
}

table.progress.progress-5 td.closed {
  background-color: hsla(0, 100%, 85%,0.75);
}

table.progress.progress-6 td.closed {
  background-color: hsla(0, 100%, 88%,0.75);
}

table.progress.progress-7 td.closed {
  background-color: hsla(0, 100%, 91%,0.75);
}

table.progress.progress-8 td.closed {
  background-color: hsla(0, 100%, 94%,0.75);
}

table.progress.progress-9 td.closed {
  background-color: hsla(0, 100%, 97%,0.75);
}

table.progress.progress-10 td.closed {
  background-color: hsla(36, 100%, 60%,1);
}

table.progress.progress-11 td.closed {
  background-color: hsla(36, 100%, 73%,0.75);
}

table.progress.progress-12 td.closed {
  background-color: hsla(36, 100%, 76%,0.75);
}

table.progress.progress-13 td.closed {
  background-color: hsla(36, 100%, 79%,0.75);
}

table.progress.progress-14 td.closed {
  background-color: hsla(36, 100%, 82%,0.75);
}

table.progress.progress-15 td.closed {
  background-color: hsla(36, 100%, 85%,0.75);
}

table.progress.progress-16 td.closed {
  background-color: hsla(36, 100%, 88%,0.75);
}

table.progress.progress-17 td.closed {
  background-color: hsla(36, 100%, 91%,0.75);
}

table.progress.progress-18 td.closed {
  background-color: hsla(36, 100%, 94%,0.75);
}

table.progress.progress-19 td.closed {
  background-color: hsla(36, 100%, 97%,0.75);
}

table.progress.progress-20 td.closed {
  background-color: hsla(72, 100%, 60%,1);
}

table.progress.progress-21 td.closed {
  background-color: hsla(72, 100%, 73%,0.75);
}

table.progress.progress-22 td.closed {
  background-color: hsla(72, 100%, 76%,0.75);
}

table.progress.progress-23 td.closed {
  background-color: hsla(72, 100%, 79%,0.75);
}

table.progress.progress-24 td.closed {
  background-color: hsla(72, 100%, 82%,0.75);
}

table.progress.progress-25 td.closed {
  background-color: hsla(72, 100%, 85%,0.75);
}

table.progress.progress-26 td.closed {
  background-color: hsla(72, 100%, 88%,0.75);
}

table.progress.progress-27 td.closed {
  background-color: hsla(72, 100%, 91%,0.75);
}

table.progress.progress-28 td.closed {
  background-color: hsla(72, 100%, 94%,0.75);
}

table.progress.progress-29 td.closed {
  background-color: hsla(72, 100%, 97%,0.75);
}

table.progress.progress-30 td.closed {
  background-color: hsla(108, 100%, 60%,1);
}

table.progress.progress-31 td.closed {
  background-color: hsla(108, 100%, 73%,0.75);
}

table.progress.progress-32 td.closed {
  background-color: hsla(108, 100%, 76%,0.75);
}

table.progress.progress-33 td.closed {
  background-color: hsla(108, 100%, 79%,0.75);
}

table.progress.progress-34 td.closed {
  background-color: hsla(108, 100%, 82%,0.75);
}

table.progress.progress-35 td.closed {
  background-color: hsla(108, 100%, 85%,0.75);
}

table.progress.progress-36 td.closed {
  background-color: hsla(108, 100%, 88%,0.75);
}

table.progress.progress-37 td.closed {
  background-color: hsla(108, 100%, 91%,0.75);
}

table.progress.progress-38 td.closed {
  background-color: hsla(108, 100%, 94%,0.75);
}

table.progress.progress-39 td.closed {
  background-color: hsla(108, 100%, 97%,0.75);
}

table.progress.progress-40 td.closed {
  background-color: hsla(144, 100%, 60%,1);
}

table.progress.progress-41 td.closed {
  background-color: hsla(144, 100%, 73%,0.75);
}

table.progress.progress-42 td.closed {
  background-color: hsla(144, 100%, 76%,0.75);
}

table.progress.progress-43 td.closed {
  background-color: hsla(144, 100%, 79%,0.75);
}

table.progress.progress-44 td.closed {
  background-color: hsla(144, 100%, 82%,0.75);
}

table.progress.progress-45 td.closed {
  background-color: hsla(144, 100%, 85%,0.75);
}

table.progress.progress-46 td.closed {
  background-color: hsla(144, 100%, 88%,0.75);
}

table.progress.progress-47 td.closed {
  background-color: hsla(144, 100%, 91%,0.75);
}

table.progress.progress-48 td.closed {
  background-color: hsla(144, 100%, 94%,0.75);
}

table.progress.progress-49 td.closed {
  background-color: hsla(144, 100%, 97%,0.75);
}

table.progress.progress-50 td.closed {
  background-color: hsla(180, 100%, 60%,1);
}

table.progress.progress-51 td.closed {
  background-color: hsla(180, 100%, 73%,0.75);
}

table.progress.progress-52 td.closed {
  background-color: hsla(180, 100%, 76%,0.75);
}

table.progress.progress-53 td.closed {
  background-color: hsla(180, 100%, 79%,0.75);
}

table.progress.progress-54 td.closed {
  background-color: hsla(180, 100%, 82%,0.75);
}

table.progress.progress-55 td.closed {
  background-color: hsla(180, 100%, 85%,0.75);
}

table.progress.progress-56 td.closed {
  background-color: hsla(180, 100%, 88%,0.75);
}

table.progress.progress-57 td.closed {
  background-color: hsla(180, 100%, 91%,0.75);
}

table.progress.progress-58 td.closed {
  background-color: hsla(180, 100%, 94%,0.75);
}

table.progress.progress-59 td.closed {
  background-color: hsla(180, 100%, 97%,0.75);
}

table.progress.progress-60 td.closed {
  background-color: hsla(216, 100%, 60%,1);
}

table.progress.progress-61 td.closed {
  background-color: hsla(216, 100%, 73%,0.75);
}

table.progress.progress-62 td.closed {
  background-color: hsla(216, 100%, 76%,0.75);
}

table.progress.progress-63 td.closed {
  background-color: hsla(216, 100%, 79%,0.75);
}

table.progress.progress-64 td.closed {
  background-color: hsla(216, 100%, 82%,0.75);
}

table.progress.progress-65 td.closed {
  background-color: hsla(216, 100%, 85%,0.75);
}

table.progress.progress-66 td.closed {
  background-color: hsla(216, 100%, 88%,0.75);
}

table.progress.progress-67 td.closed {
  background-color: hsla(216, 100%, 91%,0.75);
}

table.progress.progress-68 td.closed {
  background-color: hsla(216, 100%, 94%,0.75);
}

table.progress.progress-69 td.closed {
  background-color: hsla(216, 100%, 97%,0.75);
}

table.progress.progress-70 td.closed {
  background-color: hsla(252, 100%, 60%,1);
}

table.progress.progress-71 td.closed {
  background-color: hsla(252, 100%, 73%,0.75);
}

table.progress.progress-72 td.closed {
  background-color: hsla(252, 100%, 76%,0.75);
}

table.progress.progress-73 td.closed {
  background-color: hsla(252, 100%, 79%,0.75);
}

table.progress.progress-74 td.closed {
  background-color: hsla(252, 100%, 82%,0.75);
}

table.progress.progress-75 td.closed {
  background-color: hsla(252, 100%, 85%,0.75);
}

table.progress.progress-76 td.closed {
  background-color: hsla(252, 100%, 88%,0.75);
}

table.progress.progress-77 td.closed {
  background-color: hsla(252, 100%, 91%,0.75);
}

table.progress.progress-78 td.closed {
  background-color: hsla(252, 100%, 94%,0.75);
}

table.progress.progress-79 td.closed {
  background-color: hsla(252, 100%, 97%,0.75);
}

table.progress.progress-80 td.closed {
  background-color: hsla(288, 100%, 60%,1);
}

table.progress.progress-81 td.closed {
  background-color: hsla(288, 100%, 73%,0.75);
}

table.progress.progress-82 td.closed {
  background-color: hsla(288, 100%, 76%,0.75);
}

table.progress.progress-83 td.closed {
  background-color: hsla(288, 100%, 79%,0.75);
}

table.progress.progress-84 td.closed {
  background-color: hsla(288, 100%, 82%,0.75);
}

table.progress.progress-85 td.closed {
  background-color: hsla(288, 100%, 85%,0.75);
}

table.progress.progress-86 td.closed {
  background-color: hsla(288, 100%, 88%,0.75);
}

table.progress.progress-87 td.closed {
  background-color: hsla(288, 100%, 91%,0.75);
}

table.progress.progress-88 td.closed {
  background-color: hsla(288, 100%, 94%,0.75);
}

table.progress.progress-89 td.closed {
  background-color: hsla(288, 100%, 97%,0.75);
}

table.progress.progress-90 td.closed {
  background-color: hsla(324, 100%, 60%,1);
}

table.progress.progress-91 td.closed {
  background-color: hsla(324, 100%, 73%,0.75);
}

table.progress.progress-92 td.closed {
  background-color: hsla(324, 100%, 76%,0.75);
}

table.progress.progress-93 td.closed {
  background-color: hsla(324, 100%, 79%,0.75);
}

table.progress.progress-94 td.closed {
  background-color: hsla(324, 100%, 82%,0.75);
}

table.progress.progress-95 td.closed {
  background-color: hsla(324, 100%, 85%,0.75);
}

table.progress.progress-96 td.closed {
  background-color: hsla(324, 100%, 88%,0.75);
}

table.progress.progress-97 td.closed {
  background-color: hsla(324, 100%, 91%,0.75);
}

table.progress.progress-98 td.closed {
  background-color: hsla(324, 100%, 94%,0.75);
}

table.progress.progress-99 td.closed {
  background-color: hsla(324, 100%, 97%,0.75);
}

table.progress.progress-100 td.closed {
  background-color: hsla(360, 100%, 60%,1);
}