source: spip-zone/_plugins_/shortcut_url/trunk/prive/objets/editer/shortcut_url_logs_graphs.html @ 96915

Last change on this file since 96915 was 96915, checked in by cyp@…, 3 years ago

Nettoyage et amélioration

File size: 10.0 KB
Line 
1<BOUCLE_liste_shortcut_url_logs_detail(SHORTCUT_URLS){id_shortcut_url}>
2
3<h1><:shortcut_url:titre_shortcut_url_log_detail:> #URL_SITE_SPIP/#TITRE</h1>
4
5<div class="sites syndic">
6<table class='spip liste'>
7<caption><strong class="caption"><:shortcut_url:titre_details_url:></strong></caption>
8        <thead>
9                <tr class='first_row'>
10                        <th class='description' scope='col'><:shortcut_url:titre_page:></th>
11                        <td>#DESCRIPTION</td>
12                </tr>
13                <tr class='first_row'>
14                        <th class='description' scope='col'><:shortcut_url:titre_url:></th>
15                        <td>#URL</td>
16                </tr>
17                <tr class='first_row'>
18                        <th class='description' scope='col'><:shortcut_url:form_date_modif:></th>
19                        <td>[(#DATE_MODIF|affdate_jourcourt)]</td>
20                </tr>
21        </thead>
22</table>
23</div>
24
25<br class="nettoyeur" />
26
27<B_si_plugins_d3js>
28<BOUCLE_si_plugins_d3js(CONDITION) {si #PLUGIN{D3JS}}>
29
30<h2><:shortcut_url:titre_shortcut_url_graph_carte:></h2>
31
32<script type="text/javascript">
33
34var data = [(#INCLURE{fond=json/compteur_pays,id_shortcut_url}|trim)];
35var data_full = [(#INCLURE{fond=json/compteur_pays,id_shortcut_url,limite=300}|trim)];
36
37$(document).ready(function($) {
38        var scale = [1, 10, 50, 100, 500],
39                colors = ["couleur1","couleur2","couleur3","couleur4","couleur5"];
40        if(data.length > 0){
41                max = d3.max(data, function(d) { return d.value+1; });
42                if(max > 500){
43                        var interval = (max - 500) / 5,
44                                last = 500;
45                        for (i = 0; i < 4; i++) {
46                                last = last +interval;
47                                scale.push(Math.floor(last));
48                                colors.push("couleur"+(6+i));
49                        }
50                       
51                        scale.push(max);
52                        colors.push("couleur10");
53                }
54        }
55        // Affiche les stats sur la carte
56        var color = d3.scale.threshold()
57                .domain(scale)
58                .range(colors);
59
60        var width = 760, 
61                height = 500;
62
63        var m_width = $("#map").width(),
64                width = width,
65                height = height;
66
67        var projection = d3.geo.mercator()
68                .scale(100)
69                .translate([width / 2, height / 1.5]);
70
71        var path = d3.geo.path()
72                .projection(projection);
73
74        var svg = d3.select("#map").append("svg")
75                        .attr("width", width)
76                        .attr("height", height);
77
78        var path = d3.geo.path()
79                .projection(projection);
80
81        var g = svg.append("g");
82
83        var color_fill = [];
84        var tooltip_click = [];
85
86        // Récupérer le TopoJSON des pays
87        d3.json('[(#CHEMIN{json/regions.json})]', function(error, borders) {
88                collection = topojson.feature(borders, borders.objects.maedi_pays);
89                var tooltip = d3.select("body")
90                                .append("div")
91                                .attr("class", "tooltip")
92                                .style("opacity", 0);
93                for (var i = 0; i < collection.features.length; i++) {
94                        var iso2 = collection.features[i].properties.ISO2;
95                        data_full.forEach(function(d) {
96                                        if(iso2 == d.label) {
97                                                color_fill[d.label] = color(d.value);
98                                                tooltip_click[d.label] = d.value;
99                                                return false;
100                                        }
101                        });
102                }
103
104                g.attr("id", "countries")
105                        .selectAll("path")
106                        .data(collection.features)
107                        .enter()
108                        .append("path")
109                        .attr("class", function(d) { return color_fill[d.properties['ISO2']]; })
110                        .attr("d", path)
111                        .on("mouseenter", function (d,event) {
112                                if(tooltip_click[d.properties['ISO2']] == undefined) 
113                                        var tooltip_data = "";
114                                else
115                                        var tooltip_data = tooltip_click[d.properties['ISO2']] + " <:shortcut_url:nb_click:>";
116
117                                tooltip.html("<strong>" + d.properties['NAME_ISO'].toLowerCase() + "</strong> " + tooltip_data);
118                                if(d3.event.pageX && d3.event.pageY) {
119                                        tooltip.style("left", (d3.event.pageX + 20)+ "px")
120                                                .style("top",(d3.event.pageY + 20) + "px").style("opacity", "1");
121                                }
122
123                        }).on("mousemove", function (d) {
124                                if(d3.event.pageX && d3.event.pageY){
125                                        tooltip.style("left", (d3.event.pageX + 20)+ "px")
126                                                .style("top",(d3.event.pageY + 20) + "px");
127                                }
128
129                        }).on("mouseout", function (d) {
130                                return tooltip.style("opacity", "0");
131                        });
132        });
133
134        // Affiche les barres horizontales
135        var margin = {top: 20, right:20, bottom: 20, left: 60},
136                width = 760 - margin.left - margin.right,
137                height = 300 - margin.top - margin.bottom;
138
139        var x = d3.scale.linear().range([0, width]),
140                y = d3.scale.ordinal().rangeRoundBands([0, height], .1);
141
142        var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(-height),
143                yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0);
144
145        var svg = d3.select("#bar").append("svg")
146                .attr("width", width + margin.right + margin.left)
147                .attr("height", height + margin.top + margin.bottom)
148                .append("g")
149                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
150
151        var tooltip2 = d3.select("body")
152                                .append("div")
153                                .attr("class", "tooltip tooltip2")
154                                .style("opacity", 0);
155                data.forEach(function(d) { d.value = +d.value; });
156                data.sort(function(a, b) { return b.value - a.value; });
157
158                x.domain([0, d3.max(data, function(d) { return d.value; })]);
159                y.domain(data.map(function(d) { return d.label; }));
160
161                var bar = svg.selectAll("g.bar")
162                        .data(data)
163                        .enter().append("g")
164                        .attr("class",  function(d) { return color(d.value); })
165                        .attr("transform", function(d) { return "translate(0," + y(d.label) + ")"; })
166                        .on("mouseenter", function (d,event) {
167                                tooltip2.html("<strong>" + d.value + " <:shortcut_url:nb_click:></strong> (" + d.percent + " %) ");
168                                if(d3.event.pageX && d3.event.pageY) {
169                                        tooltip2.style("left", (d3.event.pageX +20)+ "px")
170                                                .style("top",(d3.event.pageY + 20) + "px").style("opacity", "1");
171                                }
172
173                        }).on("mousemove", function (d) {
174                                if(d3.event.pageX && d3.event.pageY){
175                                        tooltip2.style("left", (d3.event.pageX + 20)+ "px")
176                                                .style("top",(d3.event.pageY + 20) + "px");
177                                }
178                        }).on("mouseout", function (d) {
179                                return tooltip2.style("opacity", "0");
180                        });
181
182                bar.append("rect")
183                        .attr("width", function(d) { return x(d.value); })
184                        .attr("height", y.rangeBand());
185
186                svg.append("g")
187                        .attr("class", "y axis")
188                        .call(yAxis);
189
190});
191</script>
192
193#BOITE_OUVRIR
194        <div id="map"></div>
195        <div class="tooltip_map"></div>
196        <div id="bar"></div>
197#BOITE_FERMER
198
199<h2><:shortcut_url:titre_shortcut_url_graph_humain_click:></h2>
200
201<script type="text/javascript">
202        var d3_locale_fr = d3.locale({
203                decimal: ".",
204                thousands: " ",
205                grouping: [ 3 ],
206                currency: [ "$", "" ],
207                dateTime: "%a %b %e %X %Y",
208                date: "%m/%d/%Y",
209                time: "%H:%M:%S",
210                periods: [ "AM", "PM" ],
211                days: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
212                shortDays: [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ],
213                months: [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ],
214                shortMonths: [ "Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil", "Aou", "Sep", "Oct", "Nov", "Déc" ]
215        });
216        $(document).ready(function($) {
217                        var json = [
218                                <BOUCLE_liste_shortcut_url_click_graph(SHORTCUT_URLS){id_shortcut_url}>
219                                        <BOUCLE_shortcut_url_dateclick_graph(SHORTCUT_URLS_LOGS){id_shortcut_url}{humain=oui}{fusion DATE_FORMAT(date_modif, '%Y-%m-%d')}{!par date_modif}>#SET{date_modif,#DATE_MODIF|affdate{Y-m-d}}
220                                        <BOUCLE_shortcut_url_dateclick_graph_nb(SHORTCUT_URLS_LOGS){id_shortcut_url}{humain=oui}{date_modif LIKE (#GET{date_modif})%}> </BOUCLE_shortcut_url_dateclick_graph_nb>
221                                                {
222                                                        "label": "[(#GET{date_modif})]",
223                                                        "value": "#TOTAL_BOUCLE"
224                                                },
225                                        </B_shortcut_url_dateclick_graph_nb>
226                                        </BOUCLE_shortcut_url_dateclick_graph>
227                                </BOUCLE_liste_shortcut_url_click_graph>
228                        ];
229
230                        var title_value = "<:shortcut_url:nb_click:>";
231
232                        var margin = {top: 60, right: 60, bottom: 88, left: 60},
233                                width = 760 - margin.left - margin.right,
234                                height = 400 - margin.top - margin.bottom;
235
236                        var parseDate = d3_locale_fr.timeFormat("%Y-%m-%d");
237                        var tooltipDate = d3_locale_fr.timeFormat("%e %b");
238
239                        var x = d3.time.scale()
240                                .range([0, width]);
241
242                        var y = d3.scale.linear()
243                                .range([height, 0]);
244
245                        var xAxis = d3.svg.axis()
246                                .scale(x)
247                                .tickSize(-height)
248                                .tickFormat(d3_locale_fr.timeFormat("%B %Y"))
249                                .tickSubdivide(1);
250
251                        var yAxis = d3.svg.axis()
252                                .scale(y)
253                                .ticks(6)
254                                .orient("left");
255
256                        var line = d3.svg.area()
257                                .x(function(d) { return x(d.label); })
258                                .y(function(d) { return y(d.value); });
259
260                        var div = d3.select("body")
261                                .append("div")
262                                .attr("class", "tooltip")
263                                .style("opacity", 0);
264
265                        var svg = d3.select("#d3_click").append("svg")
266                                .attr("width", (width + margin.left + margin.right))
267                                .attr("height", height + margin.top + margin.bottom)
268                                .append("g")
269                                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
270
271                        json.forEach(function(d) {
272                                d.label = parseDate.parse(d.label);
273                                d.value = +d.value;
274                        });
275
276                        x.domain(d3.extent(json, function(d) { return d.label; }));
277                        y.domain(d3.extent(json, function(d) { return d.value; }));
278
279                        svg.append("g")
280                                .attr("class", "x axis")
281                                .attr("transform", "translate(0," + height + ")")
282                                .call(xAxis)
283                                .selectAll("text") 
284                                        .style("text-anchor", "end")
285                                        .attr("dx", "-.8em")
286                                        .attr("dy", ".15em")
287                                        .attr("transform", "rotate(-65)" );
288
289                        svg.append("g")
290                                .attr("class", "y axis")
291                                .call(yAxis)
292                                .append("text")
293                                .attr("y", -16)
294                                .attr("dy", ".71em")
295                                .style("text-anchor", "end")
296                                .text(title_value);
297
298                        svg.append("path")
299                                .datum(json)
300                                .attr("class", "line")
301                                .attr("d", line);
302
303                        svg.selectAll("dot")
304                                .data(json)
305                                .enter().append("circle")
306                                .attr("class", "circle")
307                                .attr("r", 6)
308                                .attr("cx", function(d) { return x(d.label); })
309                                .attr("cy", function(d) { return y(d.value); })
310                                .on("mouseover", function(d) {
311                                        div.transition()
312                                                .duration(500)
313                                                .style("opacity", 0);
314                                        div.transition()
315                                                .duration(200)
316                                                .style("opacity", .9);
317                                        div.html(tooltipDate(d.label) + "<br/>"  + d.value + " " + title_value)
318                                                .style("left", (d3.event.pageX) + "px")
319                                                .style("top", (d3.event.pageY - 28) + "px")
320                                                .style("z-index", 5000);
321                                })
322                                .on("mousemove", function (d) {
323                                        div.style("left", (d3.event.pageX)+ "px")
324                                                .style("top",(d3.event.pageY - 48) + "px");
325                                })
326                                .on("mouseout", function(d) {
327                                        div.style("opacity", 0);
328                                });
329
330                });
331</script>
332
333#BOITE_OUVRIR
334        <div id="d3_click"></div>
335#BOITE_FERMER
336
337</BOUCLE_si_plugins_d3js>
338</B_si_plugins_d3js>
339        <p><:shortcut_url:plugin_d3js_noninstalle:></p>
340<//B_si_plugins_d3js>
341</BOUCLE_liste_shortcut_url_logs_detail>
Note: See TracBrowser for help on using the repository browser.