From c37f9bc71b43dc5f4dd8103cfa339ec8d226e751 Mon Sep 17 00:00:00 2001
From: Peter Edmond <peter.edmond@telos.digital>
Date: Wed, 14 May 2025 07:47:50 +0100
Subject: [PATCH] Corrected 4 triangle structure and position to round up
 rather than down 0.6, and also to allow for border thickness

---
 IndexUsingJS.html |  9 ++++---
 amber.html        |  2 +-
 index3axis.html   | 67 ++++++++++++++++++++++++++++++++++++++++++-----
 3 files changed, 66 insertions(+), 12 deletions(-)
diff --git a/IndexUsingJS.html b/IndexUsingJS.html
index 2cd70ba..462f623 100644
--- a/IndexUsingJS.html
+++ b/IndexUsingJS.html
@@ -6,6 +6,7 @@
   <script src="https://d3js.org/d3.v7.min.js"></script>
   <script src="./drawtriangle.js"></script>
   <script src="./drawtriangleinverted.js"></script>
+  <script src="./savesvg.js"></script>
 
   <style>
     body {
@@ -52,14 +53,14 @@
 </head>
 <body onload="drawtriangle('#svg1','Roles','#316443',[0.5,0.6,0.5],'red', { x: 0, y: 350 },-0.7);
     drawtriangle('#svg1','Actions','#6e6e6e',[0.1,0.6,0.5],'green',{ x: 370, y: 350 },2.3);
-    drawtriangle('#svg1','Approach','#d76a23',[0.3,0.6,0.5],'#ffbf00',{ x: 185, y: 30 },1.4);
+    drawtriangle('#svg1','Approach','#d76a23',[0.3,0.6,0.5],'#ffbf00',{ x: 185, y: 32 },1.4);
     drawtriangleinverted('#svg1','Impact','#9f84b8',[0.7,0.6,0.8],'green',{ x: 185, y: 244},2.4);
+    makeSvgRightClickable('svg1');
     ">
-<svg id="svg1" width="1000" height="1000"></svg>
+<svg xmlns="http://www.w3.org/2000/svg" id="svg1" width="1000" height="1000"></svg>
 
-<svg id="svg2" width="500" height="500"></svg>
+<svg xmlns="http://www.w3.org/2000/svg" id="svg2" width="500" height="500"></svg>
 
 </body>
 </html>
 
-
diff --git a/amber.html b/amber.html
index 24da09e..8d78c43 100644
--- a/amber.html
+++ b/amber.html
@@ -132,7 +132,7 @@ const valuePoints = axes.map((d, i) => {
 svg.append("polygon")
   .attr("class", "area")
   .attr("points", valuePoints.map(p => p.join(",")).join(" "))
-  .attr("fill", "#ffbf00") // #d76a23 with 30% opacity (translucent)
+  .attr("fill", "#ffbf00") // #ffbf00 with 30% opacity (translucent)
   .attr("fill-opacity", 0.6)
   .attr("stroke", "#ffbf00")               // Outer line color
   .attr("stroke-width", 2);                // Thin outer line
diff --git a/index3axis.html b/index3axis.html
index 44d325e..e187e28 100644
--- a/index3axis.html
+++ b/index3axis.html
@@ -34,11 +34,11 @@
       stroke-dasharray: 2,2;
     }
 
-    .area {
-      fill: rgba(70, 130, 180, 0.3); /* steelblue with transparency */
-      stroke: rgba(70, 130, 180, 0.6);
-      stroke-width: 2;
-    }
+    //.area {
+    //  fill: rgba(215, 96, 35, 0.1); /* steelblue with transparency */
+    //  stroke: rgba(215, 96, 35, 0.6);
+    //  stroke-width: 2;
+    //}
 
     .label {
       font-size: 12px;
@@ -80,7 +80,7 @@ svg.append("g")
   .attr("y2", d => center.y + radius * Math.sin(d.angle));
 
 // Draw grid rings (polygons)
-const levels = 5;
+const levels = 7;
 for (let i = 1; i <= levels; i++) {
   const r = (radius / levels) * i;
   const points = axes.map(d => {
@@ -94,6 +94,7 @@ for (let i = 1; i <= levels; i++) {
     .attr("points", points.map(p => p.join(",")).join(" "));
 }
 
+
 // Draw axis ticks
 const tickLength = 5;
 axes.forEach(axis => {
@@ -131,9 +132,60 @@ const valuePoints = axes.map((d, i) => {
 svg.append("polygon")
   .attr("class", "area")
   .attr("points", valuePoints.map(p => p.join(",")).join(" "))
+  .attr("fill", "rgba(215, 106, 35, 0.3)") // #d76a23 with 30% opacity (translucent)
+  .attr("stroke", "#d76a23")               // Outer line color
+  .attr("stroke-width", 1);                // Thin outer line
+
+// Draw outer triangle border (goes to edge of chart)
+const outerPoints = axes.map(d => [
+  center.x + radius * Math.cos(d.angle),
+  center.y + radius * Math.sin(d.angle)
+]);
+
+// Draw border separately (on top)
+svg.append("polygon")
+  .attr("points", outerPoints.map(p => p.join(",")).join(" "))
+  .attr("fill","none")
+  .attr("stroke", "#d76a23")               // Outer line color
+  .attr("stroke-width", 3);                // Thin outer line
+
+// Put label in bottom centre of triangle
+const bottomLeft = outerPoints[1];
+const bottomRight = outerPoints[2];
+
+const midX = (bottomLeft[0] + bottomRight[0]) / 2;
+const midY = (bottomLeft[1] + bottomRight[1]) / 2;
+
+svg.append("text")
+  .attr("x", midX)
+  .attr("y", midY - 15)   // Alter for correct height
+  .attr("text-anchor", "middle")
+  .attr("fill", "#d76a23")    /// My Colour
+  .attr("font-size", "24px")
+  .attr("font-weight", "bold")
+  .text("Approach");
+
+// And now a central number
+svg.append("text")
+  .attr("x", midX)
+  .attr("y", midY -60)
+  .attr("text-anchor", "middle")
+  .attr("fill", "black") // 🎨 customize color
+  .attr("font-size", "22px")
+  .attr("font-weight", "bold")
+  .attr("font-family", "Courier New, monospace")
+  .text("-2.1");
+
+
+
+
+
+
+
 
 // Add axis labels
-svg.selectAll(".label")
+/*
+  svg.selectAll(".label")
   .data(axes)
   .join("text")
   .attr("class", "label")
@@ -145,6 +197,7 @@ svg.selectAll(".label")
     return center.y + (radius + 20 + 30) * Math.sin(d.angle)
   })
   .text(d => d.name);
+*/
 </script>
 </body>
 </html>
