Latest updates

drawtriangleinverted.js

@@ -1,6 +1,4 @@
 
-
-
 function drawtriangleinverted(id,text,colour,values,rag,offset,mean)
 {
 
@@ -34,7 +32,8 @@ axes.forEach(d => d.angle = (d.angle - 90) * Math.PI / 180);
 
 // Sample data: [0-1] scale
 // const values = [0.8, 0.1, 0.76]; Now passed in function args
-
+// Don't draw if class "no-axis"
+if (!svg.classed("no-axis")) {
 // Draw axis lines
 svg.append("g")
   .attr("class", "axis")
@@ -45,6 +44,9 @@ svg.append("g")
   .attr("y1", center.y)
   .attr("x2", d => center.x + radius * Math.cos(d.angle))
   .attr("y2", d => center.y + radius * Math.sin(d.angle));
+}
+
+
 
 // Draw grid rings (polygons)
 const levels = 7;
@@ -61,10 +63,14 @@ for (let i = 1; i <= levels; i++) {
     .attr("points", points.map(p => p.join(",")).join(" "));
 }
 
+
 // Draw axis ticks
-const tickLength = 5;
+let tickLength = 5;
+if (svg.classed("no-axis")) {
+    tickLength = 0;
+}
 axes.forEach(axis => {
-  for (let i = 1; i <= levels; i++) {
+  for (let i = 1; i <= levels - 1; i++) {   // -1 so that tick doesn't stick out
     const r = (radius / levels) * i;
     const angle = axis.angle;
 
@@ -114,7 +120,7 @@ svg.append("polygon")
   .attr("points", outerPoints.map(p => p.join(",")).join(" "))
   .attr("fill","none")
   .attr("stroke", colour)               // Outer line color
-  .attr("stroke-width", 9);             // Thicker outer line
+  .attr("stroke-width", 5);             // Thicker outer line
 
 // Put label in bottom centre of triangle (adjust for flat top)
 const bottomLeft = outerPoints[0];
@@ -123,6 +129,8 @@ const bottomRight = outerPoints[2];
 const midX = (bottomLeft[0] + bottomRight[0]) / 2;
 const midY = (bottomLeft[1] + bottomRight[1]) / 2;
 
+//Don't draw the label for 'no-text' class
+if (!svg.classed("no-text")){
 svg.append("text")
   .attr("x", midX)
   .attr("y", midY + 30)   // Adjust for correct height (moved to bottom)
@@ -131,14 +139,21 @@ svg.append("text")
   .attr("font-size", "22px")
   .attr("font-weight", "bold")
   .text(`${text}`);
+}
 
 // And now a central number
+let bigy = midY-45;
+let bigfont = "36px";
+if (svg.classed("big-number")){
+    bigy = midY-85;
+    bigfont = "70px";
+}
 svg.append("text")
   .attr("x", midX)
-  .attr("y", midY + 80)
+  .attr("y", midY + 70)
   .attr("text-anchor", "middle")
   .attr("fill", "black") // 🎨 customize color
-  .attr("font-size", "24px")
+  .attr("font-size", bigfont)
   .attr("font-weight", "bold")
   .attr("font-family", "Courier New, monospace")
   .text(`${mean}`);