Move overview table on keys page into its own tab

2 files changed, 26 insertions, 40 deletions

diff --git a/web/public/css/taginfo.css b/web/public/css/taginfo.css
index 3764dee..ed7490e 100644
--- a/web/public/css/taginfo.css
+++ b/web/public/css/taginfo.css
@@ -159,46 +159,6 @@ div#tabs form {
 
 /* ==========  */
 
-table#overview {
-    position: absolute;
-    border-collapse: collapse;
-    right: 20px;
-    margin-top: 8px;
-    background-color: #d0e0f0;
-    background-image: url('/img/bg-blue.png');
-    background-repeat: repeat-x;
-    -moz-border-radius: 4px;
-    -khtml-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    -chrome-border-radius: 4px;
-    -o-border-radius: 4px;
-}
-
-table#overview th {
-    border-bottom: 1px solid #ffffff;
-    font-weight: normal;
-    padding: 4px;
-}
-
-table#overview td {
-    padding: 4px;
-    color: #404040;
-}
-
-table#overview div.bar {
-    background-color: #4080e0;
-}
-
-table#overview .count {
-    width: 300px;
-}
-
-table#overview .values {
-    text-align: right;
-}
-
-/* ========== */
-
 table.stats {
     margin-top: 0;
     margin-left: 16px;
diff --git a/web/public/js/taginfo.js b/web/public/js/taginfo.js
index 47b4ca0..0d0777b 100644
--- a/web/public/js/taginfo.js
+++ b/web/public/js/taginfo.js
@@ -420,6 +420,32 @@ var create_flexigrid_for = {
         }
     },
     key: {
+        overview: function(key, filter_type) {
+            create_flexigrid('grid-overview', {
+                url: '/api/3/db/keys/overview?key=' + encodeURIComponent(key),
+                colModel: [
+                    { display: 'Type', name: 'type', width: 100, sortable: true },
+                    { display: 'Number of objects', name: 'count', width: 260, sortable: true, align: 'center' },
+                    { display: 'Number of values', name: 'value', width: 140, sortable: true, align: 'right' }
+                ],
+                usepager: false,
+                useRp: false,
+                height: 130,
+                preProcess: function(data) {
+                    return {
+                        total: 4,
+                        page: 1,
+                        rows: jQuery.map(data, function(row, i) {
+                            return { 'cell': [
+                                print_image(row.type) + ' ' + texts.osm[row.type],
+                                print_value_with_percent(row.count, row.count_fraction),
+                                print_with_ts(row.values)
+                            ]};
+                        })
+                    };
+                }
+            });
+        },
         values: function(key, filter_type) {
             create_flexigrid('grid-values', {
                 url: '/api/2/db/keys/values?key=' + encodeURIComponent(key) + '&filter=' + encodeURIComponent(filter_type),