WIP pie chart

Contents/Sketch/arc.cocoascript

@@ -0,0 +1,60 @@
+// Enter a percentage 1-25
+// var percent = 20;
+
+var alert = [NSAlert alertWithMessageText: "Insert Pie Chart"
+                               defaultButton:"Insert"
+                             alternateButton:"Cancel"
+                                 otherButton:nil
+                   informativeTextWithFormat:"What percent? (1-25 for now)"];
+
+var input = [[NSTextField alloc] initWithFrame:NSMakeRect(0, 0, 200, 24)];
+[input setStringValue:"25"];
+[input autorelease];
+[alert setAccessoryView:input];
+var button = [alert runModal];
+[input validateEditing];
+var percent = [input stringValue];
+
+var offset = (100 - percent * 4) * 2;
+var doc = context.document;
+var unit = 100;
+
+// create the pie
+var color = "#0000FF";
+var ovalShape = MSOvalShape.alloc().init();
+ovalShape.frame = MSRect.rectWithRect(NSMakeRect(0,0,unit*2,unit*2));
+var pie=MSShapeGroup.shapeWithPath(ovalShape);
+var fill = pie.style().fills().addNewStylePart();
+fill.color = MSColor.colorWithSVGString(color);
+pie.frame().constrainProportions = true;
+doc.currentPage().addLayers([pie]);
+
+// create the mask
+var color = "#FF0000";
+var ovalShape = MSOvalShape.alloc().init();
+ovalShape.frame = MSRect.rectWithRect(NSMakeRect(0,0,unit*2,unit*2));
+var mask=MSShapeGroup.shapeWithPath(ovalShape);
+var fill = mask.style().fills().addNewStylePart();
+fill.color = MSColor.colorWithSVGString(color);
+mask.frame().constrainProportions = true;
+
+// create the slice
+var path = NSBezierPath.bezierPath();
+path.moveToPoint(NSMakePoint(unit,unit));
+path.lineToPoint(NSMakePoint(unit,-unit));
+path.lineToPoint(NSMakePoint(-unit + offset,unit - offset));
+// path.lineToPoint(NSMakePoint(-unit,unit));
+path.lineToPoint(NSMakePoint(unit,unit));
+path.frame = MSRect.rectWithRect(NSMakeRect(0,0,unit*2,unit*2));
+
+var slice = MSShapeGroup.shapeWithBezierPath(path);
+
+doc.currentPage().addLayers([mask, slice]);
+
+// make the cut
+[mask select:true byExpandingSelection:false]
+[slice select:true byExpandingSelection:true]
+var intersectAction = doc.actionsController().actionWithName("MSIntersectAction");
+if (intersectAction.validate()) {
+    intersectAction.booleanIntersect(nil);
+}

Contents/Sketch/manifest.json

@@ -3,18 +3,19 @@
   "commands" : [
     {
       "script" : "script.cocoascript",
-      "handler" : "onRun",
+      "handler" : "bar",
       "shortcut" : "option c",
       "name" : "Bar Chart",
       "identifier" : "bar"
     },
+    {
+      "script" : "script.cocoascript",
+      "handler" : "pie",
+      "shortcut" : "option c",
+      "name" : "Pie Chart",
+      "identifier" : "pie"
+    },
   ],
-  "menu": {
-    "isRoot": true,
-    "items": [
-      "bar",
-    ],
-  },
   "identifier" : "com.github.nolastan.charts",
   "version" : "1.0",
   "description" : "Quickly insert charts into Sketch",

Contents/Sketch/script.cocoascript

@@ -1,12 +1,13 @@
-var onRun = function(context) {
+var bar = function(context) {
   var doc = context.document;
-  var percent;
-  showOptions();
-  createContainer();
+  var percent = getPercent('Bar');
+
+  drawContainer();
   drawFill();
-  // Put into group
+  // @TODO Put into group
+  // @TODO Apply styles
 
-  function createContainer() {
+  function drawContainer() {
     createBar(400, "#dd0000");
   }
 
@@ -26,22 +27,51 @@ var onRun = function(context) {
     // Add created shape group to the current page.
     doc.currentPage().addLayers([shapeGroup]);
   }
+};
+
+var pie = function(context) {
+  var doc = context.document;
+  var percent = getPercent('Pie');
+  drawContainer();
+  drawFill();
 
-  function showOptions() {
-    var alert = [NSAlert alertWithMessageText: "Insert Bar Graph"
-                                   defaultButton:"Insert"
-                                 alternateButton:"Cancel"
-                                     otherButton:nil
-                       informativeTextWithFormat:"What percent?"];
-
-    var input = [[NSTextField alloc] initWithFrame:NSMakeRect(0, 0, 200, 24)];
-    [input setStringValue:"50"];
-    [input autorelease];
-    [alert setAccessoryView:input];
-    var button = [alert runModal];
-    [input validateEditing];
-    percent = [input stringValue];
-    log(percent);
+  function drawContainer() {
+    createCircle(100, "#dd0000");
   }
 
+  function drawFill() {
+    createCircle(1 * percent, "#00dd00");
+  };
+
+  function createCircle(percent, color) {
+    // Create oval object
+    var ovalShape = MSOvalShape.alloc().init();
+    ovalShape.frame = MSRect.rectWithRect(NSMakeRect(0,0,100,100));
+
+    // Wrap it with MSShapeGroup and set simple fill style.
+    var shapeGroup=MSShapeGroup.shapeWithPath(ovalShape);
+    var fill = shapeGroup.style().fills().addNewStylePart();
+    fill.color = MSColor.colorWithSVGString(color);
+
+    shapeGroup.frame().constrainProportions = false; // Set to `true` if you want shape to be constrained.
+
+    // Add created shape group to the current page.
+    doc.currentPage().addLayers([shapeGroup]);
+  };
+};
+
+var getPercent = function(chartType) {
+  var alert = [NSAlert alertWithMessageText: "Insert " + chartType + " Graph"
+                                 defaultButton:"Insert"
+                               alternateButton:"Cancel"
+                                   otherButton:nil
+                     informativeTextWithFormat:"What percent?"];
+
+  var input = [[NSTextField alloc] initWithFrame:NSMakeRect(0, 0, 200, 24)];
+  [input setStringValue:"50"];
+  [input autorelease];
+  [alert setAccessoryView:input];
+  var button = [alert runModal];
+  [input validateEditing];
+  return [input stringValue];
 };