summaryrefslogtreecommitdiff
path: root/web/viewsjs/reports/key_lengths.js.erb
blob: 40628088cfafae39ceef9cacfb92329a0219db48 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<%
    osm = @trans.t.osm
    misc = @trans.t.misc
    page = @trans.t.reports.key_lengths
 %>
var create_flexigrid_for = {
    keys: function() {
        create_flexigrid('grid-keys', {
            url: '/api/4/keys/all?include=prevalent_values',
            colModel: [
                { display: '<%= misc.length %>', name: 'length', width: 60, sortable: true, align: 'right' },
                { display: '<%= osm.key %>', name: 'key', width: 180, sortable: true },
                { display: '<span title="<%= misc.objects_tooltip %>"><img src="/img/types/all.16.png" width="16" height="16" alt=""/> <%= osm.objects %></span>', name: 'count_all', width: 250, sortable: true, align: 'center' },
                { display: '<img src="/img/sources/wiki.16.png" alt="Wiki" width="16" height="16" title="<%= misc.in_wiki_tooltip %>"/>', name: 'in_wiki', width: 20, sortable: true, align: 'center' },
                { display: '<img src="/img/sources/josm.16.png" alt="JOSM" width="16" height="16" title="<%= misc.in_josm_tooltip %>"/>', name: 'in_josm', width: 20, sortable: true, align: 'center' },
                { display: '<span title="<%= misc.values_tooltip %>"><%= osm.values %></span>', name: 'values_all', width: 70, sortable: true, align: 'right' },
                { display: '<span title="<%= misc.prevalent_values_tooltip %>"><%= misc.prevalent_values %></span>', name: 'prevalent_values', width: 500, sortable: true }
            ],
            searchitems: [
                { display: '<%= osm.key %>', name: 'key' }
            ],
            sortname: 'length',
            sortorder: 'asc',
            preProcess: function(data) {
                data.rows = jQuery.map(data.data, function(row, i) {
                    return { 'cell': [
                        row.key.length,
                        link_to_key(row.key),
                        print_value_with_percent(row.count_all,       row.count_all_fraction),
                        row.in_wiki       ? '&#x2714;' : '-',
                        row.in_josm       ? '&#x2714;' : '-',
                    //       row.in_potlatch   ? '&#x2714;' : '-',
                    //       row.in_merkaartor ? '&#x2714;' : '-',
                        print_with_ts(row.values_all),
                        print_prevalent_value_list(row.key, row.prevalent_values)
                    ] };
                });
                return data;
            }
        });
    }
};

<%
hist = Array.new
@db.execute('SELECT length(key) AS length, count(*) AS count FROM db.keys GROUP BY length(key) ORDER BY length(key)') do |row|
    hist[row['length'].to_i] = row['count'].to_i
end
hist = hist.map{ |item| item.nil? ? 0 : item } %>

function page_init() {
    init_tabs([]);

    var bar_width = 6,
        bar_skip = 2,
        bar_step = bar_width + bar_skip,
        data = <%= hist.to_json %>,
        w = bar_step * data.length,
        h = 400,
        margin = { top: 10, right: 15, bottom: 60, left: 60 };

    var scale_y = d3.scale.linear()
                    .domain([0, <%= hist.max %>])
                    .range([h, 0]);

    var axis_y = d3.svg.axis()
                    .scale(scale_y)
                    .orient('left');

    var chart = d3.select('#canvas-histogram').append('svg')
                    .attr('width', w + margin.left + margin.right)
                    .attr('height', h + margin.top + margin.bottom)
                    .append('g')
                        .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')
                        .call(function(c) {
                            c.append('rect')
                                .attr('width', w)
                                .attr('height', h + 10)
                                .attr('y', -5)
                                .style('fill', 'white')
                                .style('stroke', '#d0d0c8')
                        });

    chart.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0, ' + (h + 10) + ')')
        .append('text')
            .attr('x', w/2)
            .attr('y', 36)
            .style('text-anchor', 'middle')
            .text('<%= page.histogram.key_length %>');

    chart.append('g')
        .attr('class', 'y axis')
        .call(axis_y)
        .append('text')
            .attr('transform', 'rotate(-90)')
            .attr('x', -h/2)
            .attr('y', -50)
            .style('text-anchor', 'middle')
            .text('<%= page.histogram.number_of_keys %>');

    chart.selectAll('rect')
        .data(data)
        .enter()
        .append('g')
            .call(function(c) {
                c.append('g')
                    .attr('transform', function(d, i) { return 'translate(' + (i * bar_step + bar_step/2) + ', ' + (h+10) + ')';})
                    .style('display', function(d, i) { return i == 1 || i % 10 == 0 ? '' : 'none'; })
                    .call(function(t) {
                        t.append('text')
                            .attr('y', 16)
                            .style('text-anchor', 'middle')
                            .text(function(d, i) { return i; })
                    })
                    .append('line')
                        .style('stroke', 'black')
                        .style('shape-rendering', 'crispEdges')
                        .attr('y2', 6);
            })
        .append('rect')
            .style('fill', '#083e76')
            .attr('x', function(d, i) { return i * bar_step; })
            .attr('y', function(d) { return scale_y(d); })
            .attr('width', bar_width)
            .attr('height', function(d) { return h - scale_y(d); })
            .attr('title', function(d, i) { return '' + d + ' keys of length ' + i; });

}