source: spip-zone/_plugins_/shortcut_url/trunk/prive/objets/editer/shortcut_url_bots_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: 7.9 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_bots:></h2>
31
32<script type="text/javascript">
33$(document).ready(function($) {
34
35        var data = #INCLURE{fond=json/compteur_bots,id_shortcut_url};
36        var scale = [1, 10, 50, 100, 500],
37                colors = ["couleur1","couleur2","couleur3","couleur4","couleur5"];
38        if(data.length > 0){
39                max = d3.max(data, function(d) { return d.value+1; });
40                if(max > 500){
41                        var interval = (max - 500) / 5,
42                                last = 500;
43                        for (i = 0; i < 4; i++) {
44                                last = last +interval;
45                                scale.push(Math.floor(last));
46                                colors.push("couleur"+(6+i));
47                        }
48                       
49                        scale.push(max);
50                        colors.push("couleur10");
51                }
52        }
53        var color = d3.scale.threshold()
54                .domain(scale)
55                .range(colors);
56
57        var margin = {top: 20, right: 20, bottom: 20, left: 30},
58                width = 660 - margin.left - margin.right,
59                height = 600 - margin.top - margin.bottom;
60
61        var x = d3.scale.ordinal()
62                .rangeRoundBands([0, width], .1);
63
64        var y = d3.scale.linear()
65                .range([height, 0]);
66
67        var xAxis = d3.svg.axis()
68                .scale(x)
69                .orient("bottom");
70
71        var yAxis = d3.svg.axis()
72                .scale(y)
73                .orient("left")
74                .ticks(6);
75
76        var tooltip = d3.select("body")
77                .append("div")
78                .attr("class", "tooltip")
79                .style("opacity", 0);
80
81        var svg = d3.select("#d3bar").append("svg")
82                .attr("width", width + margin.left + margin.right)
83                .attr("height", height + margin.top + margin.bottom)
84                .append("g")
85                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
86
87                x.domain(data.map(function(d) {return d.label; }));
88                y.domain([0, d3.max(data, function(d) { return d.value; })]);
89
90                svg.append("g")
91                        .attr("class", "y axis")
92                        .call(yAxis)
93                        .append("text")
94                        .attr("y", -15)
95                        .attr("dy", ".71em")
96                        .style("text-anchor", "end")
97                        .text("<:shortcut_url:nb_click:>");
98
99                svg.selectAll(".d3bar")
100                        .data(data)
101                        .enter().append("rect")
102                        .attr("class", function(d) { return color(d.value); })
103                        .attr("x", function(d) { return x(d.label); })
104                        .attr("width", x.rangeBand())
105                        .attr("y", function(d) { return y(d.value); })
106                        .attr("height", function(d) { return height - y(d.value); })
107                        .on("mouseenter", function(d) {
108                                tooltip.transition()
109                                        .duration(500)
110                                        .style("opacity", 0);
111                                tooltip.transition()
112                                        .duration(200)
113                                        .style("opacity", .9);
114                                tooltip.html(d.label + "<br /><strong>" + d.value + " <:shortcut_url:nb_click:></strong>")
115                                        .style("left", (d3.event.pageX) + "px")
116                                        .style("top", (d3.event.pageY - 28) + "px")
117                                        .style("z-index", 5000);
118                        })
119                        .on("mousemove", function (d) {
120                                if(d3.event.pageX && d3.event.pageY){
121                                        tooltip.style("left", (d3.event.pageX + 20)+ "px")
122                                                .style("top",(d3.event.pageY + 20) + "px");
123                                }
124                        }).on("mouseout", function (d) {
125                                return tooltip.style("opacity", "0");
126                        });
127});
128</script>
129
130#BOITE_OUVRIR
131        <div id="d3bar"></div>
132#BOITE_FERMER
133
134<h2><:shortcut_url:titre_shortcut_url_graph_bot_click:></h2>
135
136<script type="text/javascript">
137        var d3_locale_fr = d3.locale({
138                decimal: ".",
139                thousands: " ",
140                grouping: [ 3 ],
141                currency: [ "$", "" ],
142                dateTime: "%a %b %e %X %Y",
143                date: "%m/%d/%Y",
144                time: "%H:%M:%S",
145                periods: [ "AM", "PM" ],
146                days: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
147                shortDays: [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ],
148                months: [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ],
149                shortMonths: [ "Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil", "Aou", "Sep", "Oct", "Nov", "Déc" ]
150        });
151        $(document).ready(function($) {
152                        var json = [
153                                <BOUCLE_liste_shortcut_url_click_graph(SHORTCUT_URLS){id_shortcut_url}>
154                                        <BOUCLE_shortcut_url_dateclick_graph(SHORTCUT_URLS_LOGS){id_shortcut_url}{humain=bot}{fusion DATE_FORMAT(date_modif, '%Y-%m-%d')}{!par date_modif}>#SET{date_modif,#DATE_MODIF|affdate{Y-m-d}}
155                                        <BOUCLE_shortcut_url_dateclick_graph_nb(SHORTCUT_URLS_LOGS){id_shortcut_url}{humain=bot}{date_modif LIKE (#GET{date_modif})%}> </BOUCLE_shortcut_url_dateclick_graph_nb>
156                                                {
157                                                        "label": "[(#GET{date_modif})]",
158                                                        "value": "#TOTAL_BOUCLE"
159                                                },
160                                        </B_shortcut_url_dateclick_graph_nb>
161                                        </BOUCLE_shortcut_url_dateclick_graph>
162                                </BOUCLE_liste_shortcut_url_click_graph>
163                        ];
164                       
165                        var title_value = "<:shortcut_url:nb_click:>";
166
167                        var margin = {top: 60, right: 60, bottom: 88, left: 60},
168                                width = 760 - margin.left - margin.right,
169                                height = 400 - margin.top - margin.bottom;
170                       
171                        var parseDate = d3_locale_fr.timeFormat("%Y-%m-%d");
172                        var tooltipDate = d3_locale_fr.timeFormat("%e %b");
173                       
174                        var x = d3.time.scale()
175                                .range([0, width]);
176
177                        var y = d3.scale.linear()
178                                .range([height, 0]);
179
180                        var xAxis = d3.svg.axis()
181                                .scale(x)
182                                .tickSize(-height)
183                                .tickFormat(d3_locale_fr.timeFormat("%B %Y"))
184                                .tickSubdivide(1);
185
186                        var yAxis = d3.svg.axis()
187                                .scale(y)
188                                .ticks(6)
189                                .orient("left");
190
191                        var line = d3.svg.area()
192                                .x(function(d) { return x(d.label); })
193                                .y(function(d) { return y(d.value); });
194
195                        var tooltip = d3.select("body")
196                                .append("div")
197                                .attr("class", "tooltip")
198                                .style("opacity", 0);
199
200                        var svg = d3.select("#d3_click").append("svg")
201                                .attr("width", (width + margin.left + margin.right))
202                                .attr("height", height + margin.top + margin.bottom)
203                                .append("g")
204                                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
205
206                        json.forEach(function(d) {
207                                d.label = parseDate.parse(d.label);
208                                d.value = +d.value;
209                        });
210
211                        x.domain(d3.extent(json, function(d) { return d.label; }));
212                        y.domain(d3.extent(json, function(d) { return d.value; }));
213
214                        svg.append("g")
215                                .attr("class", "x axis")
216                                .attr("transform", "translate(0," + height + ")")
217                                .call(xAxis)
218                                .selectAll("text") 
219                                        .style("text-anchor", "end")
220                                        .attr("dx", "-.8em")
221                                        .attr("dy", ".15em")
222                                        .attr("transform", "rotate(-65)" );
223
224                        svg.append("g")
225                                .attr("class", "y axis")
226                                .call(yAxis)
227                                .append("text")
228                                .attr("y", -16)
229                                .attr("dy", ".71em")
230                                .style("text-anchor", "end")
231                                .text(title_value);
232
233                        svg.append("path")
234                                .datum(json)
235                                .attr("class", "line")
236                                .attr("d", line);
237
238                        svg.selectAll("dot")
239                                .data(json)
240                                .enter().append("circle")
241                                .attr("class", "circle")
242                                .attr("r", 6)
243                                .attr("cx", function(d) { return x(d.label); })
244                                .attr("cy", function(d) { return y(d.value); })
245                                .on("mouseover", function(d) {
246                                        tooltip.transition()
247                                                .duration(500)
248                                                .style("opacity", 0);
249                                        tooltip.transition()
250                                                .duration(200)
251                                                .style("opacity", .9);
252                                        tooltip.html(tooltipDate(d.label) + "<br/>"  + d.value + " " + title_value)
253                                                .style("left", (d3.event.pageX) + "px")
254                                                .style("top", (d3.event.pageY - 28) + "px")
255                                                .style("z-index", 5000);
256                                })
257                                .on("mousemove", function (d) {
258                                        tooltip.style("left", (d3.event.pageX)+ "px")
259                                                .style("top",(d3.event.pageY - 48) + "px");
260                                })
261                                .on("mouseout", function(d) {
262                                        tooltip.style("opacity", 0);
263                                });
264
265                });
266</script>
267
268#BOITE_OUVRIR
269        <div id="d3_click"></div>
270#BOITE_FERMER
271
272</BOUCLE_si_plugins_d3js>
273</B_si_plugins_d3js>
274        <p><:shortcut_url:plugin_d3js_noninstalle:></p>
275<//B_si_plugins_d3js>
276</BOUCLE_liste_shortcut_url_logs_detail>
Note: See TracBrowser for help on using the repository browser.