Fix: Wheel

app.py

@@ -134,7 +134,7 @@ def predict(review: str):
     #html_out = f"<b>{html.escape(review)}</b>"
 
     html_out = '''
-        <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <svg id="wheel" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
             
             <defs>
                 <path id="textPathU-68cfc5fd8ae1e" d="M 250, 250 m 0, 220 a -220,-220 0 1,1 0,-440 a -220,-220 0 1,1 0,440" style="stroke: red; fill: none;" />
@@ -204,7 +204,7 @@ def predict(review: str):
                 </textPath>
             </text>
             
-            <polyline class="graph" points style="fill: rgb(220, 155, 39)"></polyline>
+            <polyline class="graph" points></polyline>
 
             <circle class="point" style="stroke: black; fill: white;" cx="250" cy="250" r="3.5" />
             <circle class="point" style="stroke: black; fill: white;" cx="250" cy="250" r="3.5" />
@@ -217,43 +217,68 @@ def predict(review: str):
                         
         </svg>
 
+        <style>
+            svg#wheel > .circle,
+            svg#wheel > .line {
+                stroke: rgb(180, 180, 180) !important;
+            }
+            svg#wheel > .point {
+                stroke: rgb(120, 120, 120) !important;
+                fill: rgb(255, 255, 255) !important;
+            }
+            svg#wheel > .graph {
+                fill: rgb(250, 208, 72);
+                fill-opacity: 0.9;
+            }
+            svg#wheel > text {
+                font-family: 'Roboto Condensed', sans-serif;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 18px;
+                // text-transform: uppercase;
+                &.scale {
+                    fill: rgb(180, 180, 180);
+                }
+            }
+        </style>
+
         <script>
-        const setPoints = function (vals) {
+            const setPoints = function (vals) {
 
-            const elemsPoint = document.querySelectorAll('.point');
-            const elemGraph = document.querySelector('.graph');
+                const elemsPoint = document.querySelectorAll('.point');
+                const elemGraph = document.querySelector('.graph');
 
-            const points = [];
+                const points = [];
 
-            elemsPoint.forEach(function(elemPoint, i) {
-                //            steps                        offset                     convert to bogenmass
-                const angle = (360 / config.segments * i + config.offsetAngle - 90) * (Math.PI * 2 / 360);
+                elemsPoint.forEach(function(elemPoint, i) {
+                    //            steps                        offset                     convert to bogenmass
+                    const angle = (360 / config.segments * i + config.offsetAngle - 90) * (Math.PI * 2 / 360);
 
-                const val = vals[i];
+                    const val = vals[i];
 
-                const c = {
-                    x: Math.cos(angle) * (val * config.inputRatio + config.innerRadius) + config.offsetCenter,
-                    y: Math.sin(angle) * (val * config.inputRatio + config.innerRadius) + config.offsetCenter
-                }
+                    const c = {
+                        x: Math.cos(angle) * (val * config.inputRatio + config.innerRadius) + config.offsetCenter,
+                        y: Math.sin(angle) * (val * config.inputRatio + config.innerRadius) + config.offsetCenter
+                    }
 
-                points.push(`${c.x},${c.y}`);
+                    points.push(`${c.x},${c.y}`);
 
-                elemGraph.setAttribute('points', points.join(' '));
+                    elemGraph.setAttribute('points', points.join(' '));
 
-                elemPoint.setAttribute('cx', `${c.x}`);
-                elemPoint.setAttribute('cy', `${c.y}`);
-            });
-        }
+                    elemPoint.setAttribute('cx', `${c.x}`);
+                    elemPoint.setAttribute('cy', `${c.y}`);
+                });
+            }
 
-        const config = {
-            segments: 8,
-            offsetAngle: 0,
-            innerRadius: 40,
-            offsetCenter: 250,
-            inputRatio: 16
-        };
+            const config = {
+                segments: 8,
+                offsetAngle: 0,
+                innerRadius: 40,
+                offsetCenter: 250,
+                inputRatio: 16
+            };
 
-        setPoints([0, 1, 1.5, 0, 2, 0, 3.4, 2])
+            setPoints([0, 1, 1.5, 0, 2, 0, 3.4, 2])
         </script>
         '''