Added pie chart to sidebar view (#16)

* initial code * ENhanced chart & tooltips * update version files
bixat · Aug 21, 2023 · e0183c3 · e0183c3
1 parent 4371d51
commit e0183c3
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -36,4 +36,8 @@
 ## v0.1.4
 
 - Create .vscode folder if not exisT
-- Fixed timer issue
+- Fixed timer issue
+
+## v0.1.5
+
+- Added pie chart to sidebar view
diff --git a/README.md b/README.md
@@ -66,4 +66,9 @@ if you show branch timer before it branch will be undefined.
 
 - Create .vscode folder if not exisT
 - Fixed timer issue
+
+## v0.1.5
+
+- Added pie chart to sidebar view
+
 ---
diff --git a/media/main.css b/media/main.css
@@ -1,12 +1,23 @@
 body {
 	background-color: transparent;
 }
+
 .percent {
 	text-align: center;
-  }
+}
 
 .add-color-button {
 	display: block;
 	border: none;
 	margin: 0 auto;
 }
+
+.tooltip {
+	position: absolute;
+	display: none;
+	padding: 5px;
+	background-color: rgba(0, 0, 0, 0.7);
+	color: #fff;
+	font-size: 12px;
+	border-radius: 4px
+}
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "branch-timer",
   "displayName": "Branch Timer",
   "description": "Timer for every branch",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "icon": "icon.png",
   "publisher": "vscode-branch-timer",
   "engines": {

diff --git a/src/view.ts b/src/view.ts
@@ -72,8 +72,98 @@ export class ColorsViewProvider implements vscode.WebviewViewProvider {
 				<title>Branches duration</title>
 			</head>
 			<body>
-				${buildTable()}
-				<button class="refresh-button">Refresh</button>
+      <div class="col">
+      <div class="chart-container">
+        <svg id="chart" viewBox="0 0 100 100"></svg>
+        <div id="tooltip" class="tooltip"></div>
+      </div>
+      <button class="refresh-button">Refresh</button>
+      <script nonce="${nonce}" src="${scriptUri}"></script>
+      <script nonce="${nonce}">
+        const data = ${JSON.stringify(data)};
+        const total = Object.values(data).reduce((acc, value) => acc + value, 0);
+        const chart = document.getElementById('chart');
+        const tooltip = document.getElementById('tooltip');
+
+        const createChart = () => {
+          let startAngle = 0;
+          let endAngle = 0;
+
+          for (let key in data) {
+            const value = data[key];
+            const percent = (value / total) * 100;
+            endAngle += (percent / 100) * 360;
+
+            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path.setAttribute('fill', getRandomColor());
+            path.setAttribute('d', describeArc(50, 50, 45, startAngle, endAngle));
+            path.setAttribute('data-branch', key);
+            path.setAttribute('data-percent', percent.toFixed(2));
+
+            path.addEventListener('mouseover', showTooltip);
+            path.addEventListener('mouseout', hideTooltip);
+
+            chart.appendChild(path);
+
+            startAngle = endAngle;
+          }
+        };
+
+        const describeArc = (x, y, radius, startAngle, endAngle) => {
+          const start = polarToCartesian(x, y, radius, endAngle);
+          const end = polarToCartesian(x, y, radius, startAngle);
+          const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+
+          const d = [
+            'M', start.x, start.y,
+            'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y,
+            'L', x, y,
+            'L', start.x, start.y
+          ].join(' ');
+
+          return d;
+        };
+
+        const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
+          const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
+
+          return {
+            x: centerX + (radius * Math.cos(angleInRadians)),
+            y: centerY + (radius * Math.sin(angleInRadians))
+          };
+        };
+
+        const getRandomColor = () => {
+          const letters = "0123456789ABCDEF";
+          let color = "#";
+          for (let i = 0; i < 6; i++) {
+            color += letters[Math.floor(Math.random() * 16)];
+          }
+          color += "80";
+        
+          return color;
+        };
+
+        const showTooltip = (event) => {
+          const branch = event.target.getAttribute('data-branch');
+          const percent = event.target.getAttribute('data-percent');
+          const tooltipText = branch + " | " + percent + "%";
+
+          tooltip.textContent = tooltipText;
+          tooltip.style.display = 'block';
+          tooltip.style.left = (event.pageX + 10) + 'px';
+          tooltip.style.top = (event.pageY + 10) + 'px';
+        };
+
+        const hideTooltip = () => {
+          tooltip.style.display = 'none';
+        };
+
+        createChart();
+      </script>
+    </div>
+      ${buildTable()}
+      </div>
 				<script nonce="${nonce}" src="${scriptUri}"></script>
 			</body>
 			</html>`;