Ox.Chart: add 'limit' option

source/Ox.UI/js/List/Chart.js

@@ -8,6 +8,7 @@ Ox.Chart <f> Bar Chart
         formatKey <f|null> Format function for keys
         keyAlign <s|'right'> Alignment of keys
         keyWidth <n|128> Width of keys
+        limit <n|0> Number of items, or 0 for all
         rows <n|1> undocumented
         sort <o|{key: 'value', operator: '-'}> Sort
         title <s|''> Chart title
@@ -26,6 +27,7 @@ Ox.Chart = function(options, self) {
             formatKey: null,
             keyAlign: 'right',
             keyWidth: 128,
+            limit: 0,
             rows: 1,
             sort: {key: 'value', operator: '-'},
             sortKey: null,
@@ -39,12 +41,7 @@ Ox.Chart = function(options, self) {
                 renderChart();
             }
         })
-        .addClass('OxChart')
-        .css({
-            width: self.options.width + 'px',
-            height: 16 + Ox.len(self.options.data) * 16 + 'px',
-            overflowY: 'hidden'
-        });
+        .addClass('OxChart');
 
     self.valueWidth = self.options.width - self.options.keyWidth;
 
@@ -113,6 +110,9 @@ Ox.Chart = function(options, self) {
                 : key == 'value' && self.sort[a.key] > self.sort[b.key] ? 1
                 : 0;
         });
+    if (self.options.limit) {
+        self.items = self.items.slice(0, self.options.limit);
+    }
 
     if (self.options.rows == 2) {
         self.row = 0;
@@ -168,6 +168,11 @@ Ox.Chart = function(options, self) {
     }
 
     function renderChart() {
+        that.css({
+            width: self.options.width + 'px',
+            height: 16 + self.items.length * 16 + 'px',
+            overflowY: 'hidden'
+        });
         return Ox.TableList({
                 columns: getColumns(),
                 items: self.items,