MDL-57501 block_myoverview: add progress-chart template

Part of MDL-55611 epic.
ragusa87 · Apr 3, 2017 · cab053f · cab053f
1 parent 213dcf5
commit cab053f
Show file tree

Hide file tree

Showing 4 changed files with 586 additions and 0 deletions.
diff --git a/blocks/myoverview/templates/progress-chart.mustache b/blocks/myoverview/templates/progress-chart.mustache
@@ -0,0 +1,49 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template block_myoverview/progress-chart
+
+    This template renders a doughnut chart to show course progress.
+
+    Example context (json):
+    {
+        "progress": "60",
+    }
+}}
+<div class="progress-chart-container">
+    {{#hasprogress}}
+    <div class="progress-doughnut">
+        <div class="progress-text {{#progress}}has-percent{{/progress}}">{{progress}}&#37;</div>
+        <div class="progress-indicator">
+            <svg xmlns="http://www.w3.org/2000/svg">
+                <g>
+                    <title>{{progress}}&#37;</title>
+                    <circle class="circle percent-{{progress}}"
+                            r="32.5"
+                            cx="40"
+                            cy="40"/>
+                </g>
+            </svg>
+        </div>
+    </div>
+    {{/hasprogress}}
+    {{^hasprogress}}
+    <div class="no-progress">
+        {{#pix}} i/course {{/pix}}
+    </div>
+    {{/hasprogress}}
+</div>
diff --git a/theme/boost/scss/moodle/blocks.scss b/theme/boost/scss/moodle/blocks.scss
@@ -70,3 +70,87 @@ $blocks-plus-gutter: $blocks-column-width + $grid-gutter-width;
         width: 100%;
     }
 }
+
+$chart-size: 80px;
+$doughnut-border-size: 15px;
+$doughnut-dasharray: 204;
+$doughnut-empty-colour: $gray-lighter;
+$doughnut-fill-colour: $brand-warning;
+
+.progress-chart-container {
+    height: $chart-size;
+    width: $chart-size;
+
+    .progress-doughnut {
+        position: relative;
+        height: $chart-size;
+        width: $chart-size;
+        background-clip: padding-box;
+        border: $doughnut-border-size solid $doughnut-empty-colour;
+        border-radius: 50%;
+        box-sizing: border-box;
+
+        .progress-text {
+            position: absolute;
+            top: 50%;
+            /*rtl:ignore*/
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: $doughnut-empty-colour;
+
+            &.has-percent {
+                color: $doughnut-fill-colour;
+            }
+        }
+
+        .progress-indicator {
+            position: absolute;
+            top: ($doughnut-border-size * -1);
+            left: ($doughnut-border-size * -1);
+            height: $chart-size;
+            width: $chart-size;
+
+            svg {
+                position: relative;
+                height: 100%;
+                width: 100%;
+
+                .circle {
+                    stroke-width: $doughnut-border-size;
+                    stroke: $doughnut-fill-colour;
+                    fill: none;
+                    stroke-dasharray: $doughnut-dasharray;
+                    stroke-dashoffset: $doughnut-dasharray;
+                    transform: rotate(-90deg);
+                    transform-origin: center center;
+
+                    @for $i from 1 through 100 {
+                        &.percent-#{$i} {
+                            stroke-dashoffset: $doughnut-dasharray - ($i / 100 * $doughnut-dasharray);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .no-progress {
+        height: $chart-size;
+        width: $chart-size;
+        background-color: $doughnut-empty-colour;
+        border-radius: 50%;
+        position: relative;
+
+        .icon {
+            position: absolute;
+            top: 50%;
+            /*rtl:ignore*/
+            left: 50%;
+            margin: 0;
+            transform: translate(-45%, -45%);
+            color: #fff;
+            height: ($chart-size / 2);
+            width: ($chart-size / 2);
+        }
+    }
+}
diff --git a/theme/bootstrapbase/less/moodle/blocks.less b/theme/bootstrapbase/less/moodle/blocks.less
@@ -240,3 +240,92 @@
         }
     }
 }
+
+@chart-size: 80px;
+@doughnut-border-size: 15px;
+@doughnut-dasharray: 204;
+@doughnut-empty-colour: @grayLighter;
+@doughnut-fill-colour: @orange;
+
+.generate-percents(@i: 1) when (@i =< 100) {
+    &.percent-@{i} {
+        stroke-dashoffset: @doughnut-dasharray - (@i / 100 * @doughnut-dasharray);
+    }
+
+    .generate-percents((@i + 1));
+}
+
+.progress-chart-container {
+    height: @chart-size;
+    width: @chart-size;
+
+    .progress-doughnut {
+        position: relative;
+        height: @chart-size;
+        width: @chart-size;
+        background-clip: padding-box;
+        border: @doughnut-border-size solid @doughnut-empty-colour;
+        border-radius: 50%;
+        box-sizing: border-box;
+
+        .progress-text {
+            position: absolute;
+            top: 50%;
+            /*rtl:ignore*/
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: @doughnut-empty-colour;
+
+            &.has-percent {
+                color: @doughnut-fill-colour;
+            }
+        }
+
+        .progress-indicator {
+            position: absolute;
+            top: (@doughnut-border-size * -1);
+            left: (@doughnut-border-size * -1);
+            height: @chart-size;
+            width: @chart-size;
+
+            svg {
+                position: relative;
+                height: 100%;
+                width: 100%;
+
+                .circle {
+                    stroke-width: @doughnut-border-size;
+                    stroke: @doughnut-fill-colour;
+                    fill: none;
+                    stroke-dasharray: @doughnut-dasharray;
+                    stroke-dashoffset: @doughnut-dasharray;
+                    transform: rotate(-90deg);
+                    transform-origin: center center;
+
+                    .generate-percents();
+                }
+            }
+        }
+    }
+
+    .no-progress {
+        height: @chart-size;
+        width: @chart-size;
+        background-color: @doughnut-empty-colour;
+        border-radius: 50%;
+        position: relative;
+
+        .icon,
+        .smallicon {
+            position: absolute;
+            top: 50%;
+            /*rtl:ignore*/
+            left: 50%;
+            margin: 0;
+            transform: translate(-45%, -45%);
+            color: #fff;
+            height: (@chart-size / 2);
+            width: (@chart-size / 2);
+        }
+    }
+}