chore(charts): integrate pie chart

Author: masonlet

src/charts/geometry.js

@@ -11,9 +11,19 @@ export const polarToCartesian = (cx, cy, r, angleDeg) => {
 export const describeSegment = (cx, cy, innerR, outerR, startAngle, endAngle) => {
   const startOuter = polarToCartesian(cx, cy, outerR, endAngle);
   const endOuter   = polarToCartesian(cx, cy, outerR, startAngle);
+  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+
+  if (innerR === 0) {
+    return `
+      M ${cx} ${cy}
+      L ${startOuter.x} ${startOuter.y}
+      A ${outerR} ${outerR} 0 ${largeArcFlag} 0 ${endOuter.x} ${endOuter.y}
+      Z
+    `.trim();
+  }
+
   const startInner = polarToCartesian(cx, cy, innerR, startAngle);
   const endInner   = polarToCartesian(cx, cy, innerR, endAngle);
-  const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
 
   return `
     M ${startOuter.x} ${startOuter.y} 
@@ -28,9 +38,9 @@ export const createDonutSegments = (languages, cx, geometry, colours, stroke) =>
   let currentAngle = -0.1;
 
   return languages.map((lang, i) => {
-        let angle = (lang.pct / 100) * 360;
+    let angle = (lang.pct / 100) * 360;
 
-    const segmentAngle =  Math.min(currentAngle + angle + 0.1, FULL_CIRCLE_ANGLE); 
+    const segmentAngle =  Math.min(currentAngle + angle + 0.1, FULL_CIRCLE_ANGLE);
     const path = describeSegment(
       cx,
       geometry.CENTER_Y,
@@ -39,9 +49,9 @@ export const createDonutSegments = (languages, cx, geometry, colours, stroke) =>
       currentAngle,
       segmentAngle
     );
-    
+
     currentAngle += angle;
-const fillColour = colours[i % colours.length];
+    const fillColour = colours[i % colours.length];
     const strokeAttr = stroke
       ? ` stroke="#000" stroke-width="0.5" stroke-linejoin="round"`
       : ` stroke="${fillColour}" stroke-width="0.2"`;

src/constants/types.js

@@ -1 +1 @@
-export const VALID_TYPES = ["donut"];
+export const VALID_TYPES = ["donut", "pie"];

src/render/chart.js

@@ -1,10 +1,12 @@
 import { generateDonutChart } from "../charts/donut.js";
+import { generatePieChart } from "../charts/pie.js";
 
 const CHART_GENERATORS = {
   donut: generateDonutChart,
+  pie: generatePieChart,
 }
 
-export function generateChartData(data, selectedTheme, chartType, width) {
+export function generateChartData(data, theme, chartType, width, stroke) {
   const generator = CHART_GENERATORS[chartType] || CHART_GENERATORS.donut;
-  return generator(data, selectedTheme, width);
+  return generator(data, theme, width, stroke);
 }

tests/charts/geometry.test.js

@@ -22,6 +22,11 @@ describe("donut geometry", () => {
     expect(path).toMatch(/Z$/);
   });
 
+  it("describeSegment: filled pie starts at center", () => {
+    const path = describeSegment(100, 100, 0, 50, 0, 90);
+    expect(path.startsWith("M 100 100")).toBe(true);
+  });
+
   it("describeSegment: segments have stroke when enabled", () => {
     const paths = createDonutSegments(
       [{ pct: 50 }],