├── Barchart
    ├── J Barchart.sketchplugin
    └── L Barchart.sketchplugin
└── README.md


/Barchart/J Barchart.sketchplugin:
--------------------------------------------------------------------------------
 1 | selection = context.selection;
 2 | 
 3 | function alert(msg, title) {
 4 | 	var app = [NSApplication sharedApplication];
 5 |   title = title || "Whoops";
 6 |   [app displayDialog:msg withTitle:title];
 7 | }
 8 | 
 9 | function generateChart(s,m){
10 | 
11 | 	var _sel = s;
12 | 	var _highest = m.y();
13 | 	var _tallest = m.height()
14 | 	var _layer;
15 | 
16 | 	for (var i = 0; i < _sel.count(); i++){
17 | 			_layer = _sel[i].absoluteRect();
18 | 
19 | 			if(i == _sel.count()-1){
20 | 				_layer.height = _tallest;
21 | 			}else{
22 | 				var _hbase = _tallest/Math.pow(_sel.count()-i,0.45);
23 | 				_hbase = Math.floor(_hbase * (1 + Math.random()*0.3 - 0.5*0.3));
24 | 				_layer.height = _hbase > _tallest ? _tallest : _hbase;
25 | 			}
26 | 
27 | 			_layer.y = _highest + _tallest - _layer.height();
28 | 	}
29 | }
30 | 
31 | function render(sel){
32 | 	var _sel = sel;
33 | 	var _layer;
34 | 	var _tallestItem = _sel[0].absoluteRect();
35 | 
36 | 	for (var i=1; i<_sel.count(); i++) {
37 | 		_layer = _sel[i].absoluteRect();
38 | 		_tallestItem = _tallestItem.height() < _layer.height() ? _layer : _tallestItem;
39 | 	}
40 | 
41 | 	generateChart(_sel, _tallestItem);
42 | }
43 | 
44 | if(!(selection && selection.length())) {
45 | 	alert("Make sure you've selected some rectangles to generate your barchart","No rectangles selected.");
46 | }else{
47 | 	render(selection);
48 | }
49 | 


--------------------------------------------------------------------------------
/Barchart/L Barchart.sketchplugin:
--------------------------------------------------------------------------------
 1 | selection = context.selection;
 2 | 
 3 | function alert(msg, title) {
 4 | 	var app = [NSApplication sharedApplication];
 5 |   title = title || "Whoops";
 6 |   [app displayDialog:msg withTitle:title];
 7 | }
 8 | 
 9 | function generateChart(s,m){
10 | 
11 | 	var _sel = s;
12 | 	var _highest = m.y();
13 | 	var _tallest = m.height()
14 | 	var _layer;
15 | 
16 | 	for (var i = 0; i < _sel.count(); i++){
17 | 			_layer = _sel[i].absoluteRect();
18 | 
19 | 			if(i == 0){
20 | 				_layer.height = _tallest;
21 | 			}else{
22 | 				var _hbase = _tallest/Math.pow(i,0.45);
23 | 				_hbase = Math.floor(_hbase * (1 + Math.random()*0.3 - 0.5*0.3));
24 | 				_layer.height = _hbase > _tallest ? _tallest : _hbase;
25 | 			}
26 | 
27 | 			_layer.y = _highest + _tallest - _layer.height();
28 | 	}
29 | }
30 | 
31 | function render(sel){
32 | 	var _sel = sel;
33 | 	var _layer;
34 | 	var _tallestItem = _sel[0].absoluteRect();
35 | 
36 | 	for (var i=1; i<_sel.count(); i++) {
37 | 		_layer = _sel[i].absoluteRect();
38 | 		_tallestItem = _tallestItem.height() < _layer.height() ? _layer : _tallestItem;
39 | 	}
40 | 
41 | 	generateChart(_sel, _tallestItem);
42 | }
43 | 
44 | if(!(selection && selection.length())) {
45 | 	alert("Make sure you've selected some rectangles to generate your barchart","No rectangles selected.");
46 | }else{
47 | 	render(selection);
48 | }
49 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Sketch Charts plugin
 3 | 
 4 | **Disclaimer** - This is a WIP version of the plugin. 
 5 | 
 6 | ##Installation.
 7 | 1. [Download the plugin files](https://raw.githubusercontent.com/saleiva/sketch-charts/master/Barchart/Generate%20Barchart.sketchplugin)
 8 | 2. Double-click the '.sketchplugin' file you want to install. Sketch should open automatically and tell you that a new plugin was installed.
 9 | 
10 | ##Usage
11 | 
12 | #### Barcharts.
13 | 
14 | ![Barchart example](http://i.imgur.com/UJghvXY.png)
15 | 
16 | Create a rectangle and duplicate it as much times as you want. Each rectangle will become a bar in your new fake chart. Now select all the bars, click on the plugins menu and click on _Generate barchart_. The maximum height of the chart will be defined by the highest rectangle in your selection.
17 | 


--------------------------------------------------------------------------------