Adding SVG based completion arc

amd/src/report-viewer-components.js

@@ -9,8 +9,13 @@ import {get_strings} from 'core/str';
 import {load_strings} from './string-helper';
 import {call} from 'core/ajax';
 import notification from 'core/notification';
+import {svgarcpath} from './svgarc';
 //import {fixLineWrappers} from './studyplan-processor';
 
+// Make π available as a constant
+const π = Math.PI;
+
+
 export default {
     install(Vue/*,options*/){
 
@@ -30,7 +35,7 @@ export default {
 
         /************************************
          *                                  *
-         * Treestudyplan Editor components  *
+         * Treestudyplan Viewer components  *
          *                                  *
          ************************************/
 
@@ -43,6 +48,81 @@ export default {
             return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
         }
 
+        Vue.component('r-progress-circle',{
+            props: {
+                value: {
+                    type: Number,
+                },
+                max: {
+                    type: Number,
+                    default: 100,
+                },
+                min: {
+                    type: Number,
+                    default: 0,
+                },
+                stroke: {
+                    type: Number,
+                    default: 0.2,
+                },
+                bgopacity: {
+                    type: Number,
+                    default: 0.2,
+                },
+            },
+            data() {
+                return {
+                    selectedstudyplan: null,
+                };
+            },
+            computed: {
+                range() {
+                    return this.max - this.min;
+                },
+                fraction(){
+                    if(this.max - this.min == 0){
+                        return 1;
+                        // 0 size is always full :)
+                    } else {
+                        return (this.value - this.min)/(this.max - this.min);
+                    }
+                },
+                center() {
+                    const x = (1+this.stroke)*50;
+                    const y = x;
+                    return { 'x' : x, 'y' : y };
+                },
+                size() {
+                    const w = (1+this.stroke)*100;
+                    const h = w;
+                    return { 'h' : h, 'w' : w };
+                }
+            },
+            methods: {
+                arcpath(cx, cy, r) {
+                    let fraction = 1; 
+                    if(this.max - this.min != 0){
+                        fraction = (this.value - this.min)/(this.max - this.min);
+                    }
+
+                    const Δ = fraction * 2*π;
+                    return svgarcpath([cx,cy],[r,r],[0,Δ],270);
+                },
+            },
+            template: `
+            <span class='r-progress-circle'><svg 
+                    :width="(1+stroke)+'em'" 
+                    :height="(1+stroke)+'em'" 
+                    :viewbox="'0 0 '+ size.w + ' '+size.h">
+                    <circle :cx="center.x" :cy="center.y" :r="50" 
+                        :style="'opacity: ' + bgopacity + ';stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'"/>
+                    <path :d="arcpath(center.x,center.y,50)" 
+                        :style="'stroke-width: ' + (stroke*100) +'; stroke: currentcolor; fill: none;'"/>
+            </svg></span>
+            `,
+        });
+
+
         Vue.component('r-report', {
             props: {
                 value: {
@@ -545,7 +625,13 @@ export default {
                     </b-col>
                     <b-col md="11">
                         <b-card-body class="align-items-center">
-                            <i  v-b-popover.top 
+                            <r-progress-circle v-if='value.course.completion'
+                                :value='value.course.completion.progress'
+                                :max='value.course.completion.count'
+                                :min='0'
+                                :class="'r-course-result r-completion-'+value.completion"
+                            ></r-progress-circle>
+                            <i  v-else v-b-popover.top 
                                 :class="'r-course-result fa fa-'+completion_icon(value.completion)+
                                         ' r-completion-'+value.completion"
                                 :title="text['completion_'+value.completion]"></i>

amd/src/svgarc.js

@@ -0,0 +1,63 @@
+/*
+Copyright © 2020 Xah Lee, © 2023 P.M Kuipers
+Permission is hereby granted, free of charge, to any person obtaining a
+copy of this software and associated documentation files (the “Software”),
+to deal in the Software without restriction, including without limitation
+the rights to use, copy, modify, merge, publish, distribute, sublicense,
+and/or sell copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included
+in all copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.
+URL: SVG Circle Arc http://xahlee.info/js/svg_circle_arc.html
+*/
+
+const cos = Math.cos;
+const sin = Math.sin;
+const π = Math.PI;
+
+const f_matrix_times = (( [[a,b], [c,d]], [x,y]) => [ a * x + b * y, c * x + d * y]);
+const f_rotate_matrix = (x => [[cos(x),-sin(x)], [sin(x), cos(x)]]);
+const f_vec_add = (([a1, a2], [b1, b2]) => [a1 + b1, a2 + b2]);
+
+// function modified by pmkuipers for text params
+/**
+ * Create svg path text for an arc
+ * @param {*} center [cx,cy] center of ellipse
+ * @param {*} radius [rx,ry] major minor radius
+ * @param {*} angle  [t1, Δ] start angle, in radian, angle to sweep, in radian. positive.
+ * @param {*} φ rotation on the whole, in radian
+ * @returns a SVG path element that represent a ellipse. Text describing the arc path in an svg path element
+ */
+const svgarcpath = (([cx,cy],[rx,ry], [t1, Δ], φ ) => {
+    Δ = Δ % (2*π);
+    const rotMatrix = f_rotate_matrix (φ);
+    const [sX, sY] = ( f_vec_add ( f_matrix_times ( rotMatrix, [rx * cos(t1), ry * sin(t1)] ), [cx,cy] ) );
+    const [eX, eY] = ( f_vec_add ( f_matrix_times ( rotMatrix, [rx * cos(t1+Δ), ry * sin(t1+Δ)] ), [cx,cy] ) );
+    const fA = ( (  Δ > π ) ? 1 : 0 );
+    const fS = ( (  Δ > 0 ) ? 1 : 0 );
+    return "M " + sX + " " + sY + " A " + [ rx , ry , φ / (2*π) *360, fA, fS, eX, eY ].join(" ");
+});
+
+/**
+ * Create an svg arc element
+ * @param {*} center [cx,cy] center of ellipse
+ * @param {*} radius [rx,ry] major minor radius
+ * @param {*} angle  [t1, Δ] start angle, in radian, angle to sweep, in radian. positive.
+ * @param {*} φ rotation on the whole, in radian
+ * @returns a SVG path element that represent a ellipse.
+ */
+const svgarc = (([cx,cy],[rx,ry], [t1, Δ], φ ) => {
+    const path_2wk2r = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    const d = svgarcpath([cx,cy],[rx,ry], [t1, Δ], φ );
+    path_2wk2r.setAttribute("d", d);
+    return path_2wk2r;
+});
+
+export {svgarc, svgarcpath};