Charts + Addition + little fixes
This commit is contained in:
JosephK
parent
a846141268
commit
3458b9b51a
|
|
@ -281,6 +281,18 @@ table.results .btn-link.btn-sm {
|
|||
padding:2px;
|
||||
}
|
||||
|
||||
#addition {
|
||||
vertical-align:top;
|
||||
}
|
||||
|
||||
#showChart {
|
||||
margin-top:30px;
|
||||
}
|
||||
|
||||
#Chart {
|
||||
padding-right:30px;
|
||||
}
|
||||
|
||||
/* Formulaire de vote */
|
||||
#vote-form td ul, #vote-form td label {
|
||||
margin:0;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,518 @@
|
|||
(function (factory) {
|
||||
"use strict";
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['chart.js'], factory);
|
||||
} else if (typeof exports === 'object') {
|
||||
// Node/CommonJS
|
||||
module.exports = factory(require('chart.js'));
|
||||
} else {
|
||||
// Global browser
|
||||
factory(Chart);
|
||||
}
|
||||
}(function (Chart) {
|
||||
"use strict";
|
||||
|
||||
var helpers = Chart.helpers;
|
||||
|
||||
var defaultConfig = {
|
||||
scaleBeginAtZero : true,
|
||||
|
||||
//Boolean - Whether grid lines are shown across the chart
|
||||
scaleShowGridLines : true,
|
||||
|
||||
//String - Colour of the grid lines
|
||||
scaleGridLineColor : "rgba(0,0,0,.05)",
|
||||
|
||||
//Number - Width of the grid lines
|
||||
scaleGridLineWidth : 1,
|
||||
|
||||
//Boolean - Whether to show horizontal lines (except X axis)
|
||||
scaleShowHorizontalLines: true,
|
||||
|
||||
//Boolean - Whether to show vertical lines (except Y axis)
|
||||
scaleShowVerticalLines: true,
|
||||
|
||||
//Boolean - If there is a stroke on each bar
|
||||
barShowStroke : true,
|
||||
|
||||
//Number - Pixel width of the bar stroke
|
||||
barStrokeWidth : 2,
|
||||
|
||||
//Number - Spacing between each of the X value sets
|
||||
barValueSpacing : 5,
|
||||
|
||||
//Boolean - Whether bars should be rendered on a percentage base
|
||||
relativeBars : false,
|
||||
|
||||
//String - A legend template
|
||||
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
|
||||
|
||||
//Boolean - Show total legend
|
||||
showTotal: false,
|
||||
|
||||
//String - Color of total legend
|
||||
totalColor: '#fff',
|
||||
|
||||
//String - Total Label
|
||||
totalLabel: 'Total'
|
||||
};
|
||||
|
||||
Chart.Type.extend({
|
||||
name: "StackedBar",
|
||||
defaults : defaultConfig,
|
||||
initialize: function(data){
|
||||
//Expose options as a scope variable here so we can access it in the ScaleClass
|
||||
var options = this.options;
|
||||
|
||||
this.ScaleClass = Chart.Scale.extend({
|
||||
offsetGridLines : true,
|
||||
calculateBarX : function(barIndex){
|
||||
return this.calculateX(barIndex);
|
||||
},
|
||||
calculateBarY : function(datasets, dsIndex, barIndex, value){
|
||||
var offset = 0,
|
||||
sum = 0;
|
||||
|
||||
for(var i = 0; i < datasets.length; i++) {
|
||||
sum += datasets[i].bars[barIndex].value;
|
||||
}
|
||||
for(i = dsIndex; i < datasets.length; i++) {
|
||||
if(i === dsIndex && value) {
|
||||
offset += value;
|
||||
} else {
|
||||
offset = +offset + +datasets[i].bars[barIndex].value;
|
||||
}
|
||||
}
|
||||
|
||||
if(options.relativeBars) {
|
||||
offset = offset / sum * 100;
|
||||
}
|
||||
|
||||
return this.calculateY(offset);
|
||||
},
|
||||
calculateBaseWidth : function(){
|
||||
return (this.calculateX(1) - this.calculateX(0)) - (2*options.barValueSpacing);
|
||||
},
|
||||
calculateBaseHeight : function(){
|
||||
return (this.calculateY(1) - this.calculateY(0));
|
||||
},
|
||||
calculateBarWidth : function(datasetCount){
|
||||
//The padding between datasets is to the right of each bar, providing that there are more than 1 dataset
|
||||
return this.calculateBaseWidth();
|
||||
},
|
||||
calculateBarHeight : function(datasets, dsIndex, barIndex, value) {
|
||||
var sum = 0;
|
||||
|
||||
for(var i = 0; i < datasets.length; i++) {
|
||||
sum += datasets[i].bars[barIndex].value;
|
||||
}
|
||||
|
||||
if(!value) {
|
||||
value = datasets[dsIndex].bars[barIndex].value;
|
||||
}
|
||||
|
||||
if(options.relativeBars) {
|
||||
value = value / sum * 100;
|
||||
}
|
||||
|
||||
return this.calculateY(value);
|
||||
}
|
||||
});
|
||||
|
||||
this.datasets = [];
|
||||
|
||||
//Set up tooltip events on the chart
|
||||
if (this.options.showTooltips){
|
||||
helpers.bindEvents(this, this.options.tooltipEvents, function(evt){
|
||||
var activeBars = (evt.type !== 'mouseout') ? this.getBarsAtEvent(evt) : [];
|
||||
|
||||
this.eachBars(function(bar){
|
||||
bar.restore(['fillColor', 'strokeColor']);
|
||||
});
|
||||
helpers.each(activeBars, function(activeBar){
|
||||
activeBar.fillColor = activeBar.highlightFill;
|
||||
activeBar.strokeColor = activeBar.highlightStroke;
|
||||
});
|
||||
this.showTooltip(activeBars);
|
||||
});
|
||||
}
|
||||
|
||||
//Declare the extension of the default point, to cater for the options passed in to the constructor
|
||||
this.BarClass = Chart.Rectangle.extend({
|
||||
strokeWidth : this.options.barStrokeWidth,
|
||||
showStroke : this.options.barShowStroke,
|
||||
ctx : this.chart.ctx
|
||||
});
|
||||
|
||||
//Iterate through each of the datasets, and build this into a property of the chart
|
||||
helpers.each(data.datasets,function(dataset,datasetIndex){
|
||||
|
||||
var datasetObject = {
|
||||
label : dataset.label || null,
|
||||
fillColor : dataset.fillColor,
|
||||
strokeColor : dataset.strokeColor,
|
||||
bars : []
|
||||
};
|
||||
|
||||
this.datasets.push(datasetObject);
|
||||
|
||||
helpers.each(dataset.data,function(dataPoint,index){
|
||||
if (helpers.isNumber(dataPoint)){
|
||||
//Add a new point for each piece of data, passing any required data to draw.
|
||||
//Add 0 as value if !isNumber (e.g. empty values are useful when 0 values should be hidden in tooltip)
|
||||
datasetObject.bars.push(new this.BarClass({
|
||||
value : helpers.isNumber(dataPoint)?dataPoint:0,
|
||||
label : data.labels[index],
|
||||
datasetLabel: dataset.label,
|
||||
strokeColor : dataset.strokeColor,
|
||||
fillColor : dataset.fillColor,
|
||||
highlightFill : dataset.highlightFill || dataset.fillColor,
|
||||
highlightStroke : dataset.highlightStroke || dataset.strokeColor
|
||||
}));
|
||||
}
|
||||
},this);
|
||||
|
||||
},this);
|
||||
|
||||
this.buildScale(data.labels);
|
||||
|
||||
this.eachBars(function(bar, index, datasetIndex){
|
||||
helpers.extend(bar, {
|
||||
base: this.scale.endPoint,
|
||||
height: 0,
|
||||
width : this.scale.calculateBarWidth(this.datasets.length),
|
||||
x: this.scale.calculateBarX(index),
|
||||
y: this.scale.endPoint
|
||||
});
|
||||
bar.save();
|
||||
}, this);
|
||||
|
||||
this.render();
|
||||
},
|
||||
showTooltip : function(ChartElements, forceRedraw){
|
||||
// Only redraw the chart if we've actually changed what we're hovering on.
|
||||
if (typeof this.activeElements === 'undefined') this.activeElements = [];
|
||||
|
||||
helpers = Chart.helpers;
|
||||
|
||||
var isChanged = (function(Elements){
|
||||
var changed = false;
|
||||
|
||||
if (Elements.length !== this.activeElements.length){
|
||||
changed = true;
|
||||
return changed;
|
||||
}
|
||||
|
||||
helpers.each(Elements, function(element, index){
|
||||
if (element !== this.activeElements[index]){
|
||||
changed = true;
|
||||
}
|
||||
}, this);
|
||||
return changed;
|
||||
}).call(this, ChartElements);
|
||||
|
||||
if (!isChanged && !forceRedraw){
|
||||
return;
|
||||
}
|
||||
else{
|
||||
this.activeElements = ChartElements;
|
||||
}
|
||||
this.draw();
|
||||
if(this.options.customTooltips){
|
||||
this.options.customTooltips(false);
|
||||
}
|
||||
if (ChartElements.length > 0){
|
||||
// If we have multiple datasets, show a MultiTooltip for all of the data points at that index
|
||||
if (this.datasets && this.datasets.length > 1) {
|
||||
var dataArray,
|
||||
dataIndex;
|
||||
|
||||
for (var i = this.datasets.length - 1; i >= 0; i--) {
|
||||
dataArray = this.datasets[i].points || this.datasets[i].bars || this.datasets[i].segments;
|
||||
dataIndex = helpers.indexOf(dataArray, ChartElements[0]);
|
||||
if (dataIndex !== -1){
|
||||
break;
|
||||
}
|
||||
}
|
||||
var tooltipLabels = [],
|
||||
tooltipColors = [],
|
||||
medianPosition = (function(index) {
|
||||
|
||||
// Get all the points at that particular index
|
||||
var Elements = [],
|
||||
dataCollection,
|
||||
xPositions = [],
|
||||
yPositions = [],
|
||||
xMax,
|
||||
yMax,
|
||||
xMin,
|
||||
yMin;
|
||||
helpers.each(this.datasets, function(dataset){
|
||||
dataCollection = dataset.points || dataset.bars || dataset.segments;
|
||||
if (dataCollection[dataIndex] && dataCollection[dataIndex].hasValue()){
|
||||
Elements.push(dataCollection[dataIndex]);
|
||||
}
|
||||
});
|
||||
|
||||
var total = {
|
||||
datasetLabel: this.options.totalLabel,
|
||||
value: 0,
|
||||
fillColor: this.options.totalColor,
|
||||
strokeColor: this.options.totalColor
|
||||
};
|
||||
|
||||
helpers.each(Elements, function(element) {
|
||||
xPositions.push(element.x);
|
||||
yPositions.push(element.y);
|
||||
|
||||
total.value += element.value;
|
||||
|
||||
//Include any colour information about the element
|
||||
tooltipLabels.push(helpers.template(this.options.multiTooltipTemplate, element));
|
||||
tooltipColors.push({
|
||||
fill: element._saved.fillColor || element.fillColor,
|
||||
stroke: element._saved.strokeColor || element.strokeColor
|
||||
});
|
||||
|
||||
}, this);
|
||||
|
||||
if (this.options.showTotal) {
|
||||
tooltipLabels.push(helpers.template(this.options.multiTooltipTemplate, total));
|
||||
tooltipColors.push({
|
||||
fill: total.fillColor,
|
||||
stroke: total.strokeColor
|
||||
});
|
||||
}
|
||||
|
||||
yMin = helpers.min(yPositions);
|
||||
yMax = helpers.max(yPositions);
|
||||
|
||||
xMin = helpers.min(xPositions);
|
||||
xMax = helpers.max(xPositions);
|
||||
|
||||
return {
|
||||
x: (xMin > this.chart.width/2) ? xMin : xMax,
|
||||
y: (yMin + yMax)/2
|
||||
};
|
||||
}).call(this, dataIndex);
|
||||
|
||||
new Chart.MultiTooltip({
|
||||
x: medianPosition.x,
|
||||
y: medianPosition.y,
|
||||
xPadding: this.options.tooltipXPadding,
|
||||
yPadding: this.options.tooltipYPadding,
|
||||
xOffset: this.options.tooltipXOffset,
|
||||
fillColor: this.options.tooltipFillColor,
|
||||
textColor: this.options.tooltipFontColor,
|
||||
fontFamily: this.options.tooltipFontFamily,
|
||||
fontStyle: this.options.tooltipFontStyle,
|
||||
fontSize: this.options.tooltipFontSize,
|
||||
titleTextColor: this.options.tooltipTitleFontColor,
|
||||
titleFontFamily: this.options.tooltipTitleFontFamily,
|
||||
titleFontStyle: this.options.tooltipTitleFontStyle,
|
||||
titleFontSize: this.options.tooltipTitleFontSize,
|
||||
cornerRadius: this.options.tooltipCornerRadius,
|
||||
labels: tooltipLabels,
|
||||
legendColors: tooltipColors,
|
||||
legendColorBackground : this.options.multiTooltipKeyBackground,
|
||||
title: ChartElements[0].label,
|
||||
chart: this.chart,
|
||||
ctx: this.chart.ctx,
|
||||
custom: this.options.customTooltips
|
||||
}).draw();
|
||||
|
||||
} else {
|
||||
helpers.each(ChartElements, function(Element) {
|
||||
var tooltipPosition = Element.tooltipPosition();
|
||||
new Chart.Tooltip({
|
||||
x: Math.round(tooltipPosition.x),
|
||||
y: Math.round(tooltipPosition.y),
|
||||
xPadding: this.options.tooltipXPadding,
|
||||
yPadding: this.options.tooltipYPadding,
|
||||
fillColor: this.options.tooltipFillColor,
|
||||
textColor: this.options.tooltipFontColor,
|
||||
fontFamily: this.options.tooltipFontFamily,
|
||||
fontStyle: this.options.tooltipFontStyle,
|
||||
fontSize: this.options.tooltipFontSize,
|
||||
caretHeight: this.options.tooltipCaretSize,
|
||||
cornerRadius: this.options.tooltipCornerRadius,
|
||||
text: helpers.template(this.options.tooltipTemplate, Element),
|
||||
chart: this.chart,
|
||||
custom: this.options.customTooltips
|
||||
}).draw();
|
||||
}, this);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
},
|
||||
update : function(){
|
||||
this.scale.update();
|
||||
// Reset any highlight colours before updating.
|
||||
helpers.each(this.activeElements, function(activeElement){
|
||||
activeElement.restore(['fillColor', 'strokeColor']);
|
||||
});
|
||||
|
||||
this.eachBars(function(bar){
|
||||
bar.save();
|
||||
});
|
||||
this.render();
|
||||
},
|
||||
eachBars : function(callback){
|
||||
helpers.each(this.datasets,function(dataset, datasetIndex){
|
||||
helpers.each(dataset.bars, callback, this, datasetIndex);
|
||||
},this);
|
||||
},
|
||||
getBarsAtEvent : function(e){
|
||||
var barsArray = [],
|
||||
eventPosition = helpers.getRelativePosition(e),
|
||||
datasetIterator = function(dataset){
|
||||
barsArray.push(dataset.bars[barIndex]);
|
||||
},
|
||||
barIndex;
|
||||
|
||||
for (var datasetIndex = 0; datasetIndex < this.datasets.length; datasetIndex++) {
|
||||
for (barIndex = 0; barIndex < this.datasets[datasetIndex].bars.length; barIndex++) {
|
||||
if (this.datasets[datasetIndex].bars[barIndex].inRange(eventPosition.x,eventPosition.y)){
|
||||
helpers.each(this.datasets, datasetIterator);
|
||||
return barsArray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return barsArray;
|
||||
},
|
||||
buildScale : function(labels){
|
||||
var self = this;
|
||||
|
||||
var dataTotal = function(){
|
||||
var values = [];
|
||||
helpers.each(self.datasets, function(dataset) {
|
||||
helpers.each(dataset.bars, function(bar, barIndex) {
|
||||
if(!values[barIndex]) values[barIndex] = 0;
|
||||
if(self.options.relativeBars) {
|
||||
values[barIndex] = 100;
|
||||
} else {
|
||||
values[barIndex] = +values[barIndex] + +bar.value;
|
||||
}
|
||||
});
|
||||
});
|
||||
return values;
|
||||
};
|
||||
|
||||
var scaleOptions = {
|
||||
templateString : this.options.scaleLabel,
|
||||
height : this.chart.height,
|
||||
width : this.chart.width,
|
||||
ctx : this.chart.ctx,
|
||||
textColor : this.options.scaleFontColor,
|
||||
fontSize : this.options.scaleFontSize,
|
||||
fontStyle : this.options.scaleFontStyle,
|
||||
fontFamily : this.options.scaleFontFamily,
|
||||
valuesCount : labels.length,
|
||||
beginAtZero : this.options.scaleBeginAtZero,
|
||||
integersOnly : this.options.scaleIntegersOnly,
|
||||
calculateYRange: function(currentHeight){
|
||||
var updatedRanges = helpers.calculateScaleRange(
|
||||
dataTotal(),
|
||||
currentHeight,
|
||||
this.fontSize,
|
||||
this.beginAtZero,
|
||||
this.integersOnly
|
||||
);
|
||||
helpers.extend(this, updatedRanges);
|
||||
},
|
||||
xLabels : this.options.xLabels || labels,
|
||||
font : helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
|
||||
lineWidth : this.options.scaleLineWidth,
|
||||
lineColor : this.options.scaleLineColor,
|
||||
gridLineWidth : (this.options.scaleShowGridLines) ? this.options.scaleGridLineWidth : 0,
|
||||
gridLineColor : (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)",
|
||||
showHorizontalLines : this.options.scaleShowHorizontalLines,
|
||||
showVerticalLines : this.options.scaleShowVerticalLines,
|
||||
padding : (this.options.showScale) ? 0 : (this.options.barShowStroke) ? this.options.barStrokeWidth : 0,
|
||||
showLabels : this.options.scaleShowLabels,
|
||||
display : this.options.showScale
|
||||
};
|
||||
|
||||
if (this.options.scaleOverride){
|
||||
helpers.extend(scaleOptions, {
|
||||
calculateYRange: helpers.noop,
|
||||
steps: this.options.scaleSteps,
|
||||
stepValue: this.options.scaleStepWidth,
|
||||
min: this.options.scaleStartValue,
|
||||
max: this.options.scaleStartValue + (this.options.scaleSteps * this.options.scaleStepWidth)
|
||||
});
|
||||
}
|
||||
|
||||
this.scale = new this.ScaleClass(scaleOptions);
|
||||
},
|
||||
addData : function(valuesArray,label){
|
||||
//Map the values array for each of the datasets
|
||||
helpers.each(valuesArray,function(value,datasetIndex){
|
||||
if (helpers.isNumber(value)){
|
||||
//Add a new point for each piece of data, passing any required data to draw.
|
||||
//Add 0 as value if !isNumber (e.g. empty values are useful when 0 values should be hidden in tooltip)
|
||||
this.datasets[datasetIndex].bars.push(new this.BarClass({
|
||||
value : helpers.isNumber(value)?value:0,
|
||||
label : label,
|
||||
x: this.scale.calculateBarX(this.scale.valuesCount+1),
|
||||
y: this.scale.endPoint,
|
||||
width : this.scale.calculateBarWidth(this.datasets.length),
|
||||
base : this.scale.endPoint,
|
||||
strokeColor : this.datasets[datasetIndex].strokeColor,
|
||||
fillColor : this.datasets[datasetIndex].fillColor
|
||||
}));
|
||||
}
|
||||
},this);
|
||||
|
||||
this.scale.addXLabel(label);
|
||||
//Then re-render the chart.
|
||||
this.update();
|
||||
},
|
||||
removeData : function(){
|
||||
this.scale.removeXLabel();
|
||||
//Then re-render the chart.
|
||||
helpers.each(this.datasets,function(dataset){
|
||||
dataset.bars.shift();
|
||||
},this);
|
||||
this.update();
|
||||
},
|
||||
reflow : function(){
|
||||
helpers.extend(this.BarClass.prototype,{
|
||||
y: this.scale.endPoint,
|
||||
base : this.scale.endPoint
|
||||
});
|
||||
var newScaleProps = helpers.extend({
|
||||
height : this.chart.height,
|
||||
width : this.chart.width
|
||||
});
|
||||
this.scale.update(newScaleProps);
|
||||
},
|
||||
draw : function(ease){
|
||||
var easingDecimal = ease || 1;
|
||||
this.clear();
|
||||
|
||||
var ctx = this.chart.ctx;
|
||||
|
||||
this.scale.draw(easingDecimal);
|
||||
|
||||
//Draw all the bars for each dataset
|
||||
helpers.each(this.datasets,function(dataset,datasetIndex){
|
||||
helpers.each(dataset.bars,function(bar,index){
|
||||
var y = this.scale.calculateBarY(this.datasets, datasetIndex, index, bar.value),
|
||||
height = this.scale.calculateBarHeight(this.datasets, datasetIndex, index, bar.value);
|
||||
|
||||
//Transition then draw
|
||||
bar.transition({
|
||||
base : this.scale.endPoint - (Math.abs(height) - Math.abs(y)),
|
||||
x : this.scale.calculateBarX(index),
|
||||
y : Math.abs(y),
|
||||
height : Math.abs(height),
|
||||
width : this.scale.calculateBarWidth(this.datasets.length)
|
||||
}, easingDecimal).draw();
|
||||
},this);
|
||||
},this);
|
||||
}
|
||||
});
|
||||
}));
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -139,6 +139,10 @@
|
|||
"The bests choices at this time are:": "Die beste Optionen sind derzeit:",
|
||||
"Scroll to the left": "Links scrollen",
|
||||
"Scroll to the right": "Rechts scrollen"
|
||||
"polled user": "DE_votant",
|
||||
"polled users": "DE_votants",
|
||||
"Display the chart of the results": "DE_Afficher le graphique des résultats",
|
||||
"Chart": "DE_Graphique"
|
||||
},
|
||||
"Comments": {
|
||||
"Comments of polled people": "Kommentare von Teilnehmer",
|
||||
|
|
|
|||
|
|
@ -139,6 +139,8 @@
|
|||
"The bests choices at this time are:": "The bests choices at this time are:",
|
||||
"Scroll to the left": "Scroll to the left",
|
||||
"Scroll to the right": "Scroll to the right"
|
||||
"Display the chart of the results": "Display the chart of the results",
|
||||
"Chart": "Chart"
|
||||
},
|
||||
"Comments": {
|
||||
"Comments of polled people": "Comments of polled people",
|
||||
|
|
|
|||
|
|
@ -139,6 +139,10 @@
|
|||
"The bests choices at this time are:": "ES_Les meilleurs choix pour l'instant sont :",
|
||||
"Scroll to the left": "ES_Faire défiler à gauche",
|
||||
"Scroll to the right": "ES_Faire défiler à droite"
|
||||
"polled user": "ES_votant",
|
||||
"polled users": "ES_votants",
|
||||
"Display the chart of the results": "ES_Afficher le graphique des résultats",
|
||||
"Chart": "ES_Graphique"
|
||||
},
|
||||
"Comments": {
|
||||
"Comments of polled people": "ES_Commentaires de sondés",
|
||||
|
|
|
|||
|
|
@ -135,10 +135,14 @@
|
|||
"Addition": "Somme",
|
||||
"Best choice": "Meilleur choix",
|
||||
"Best choices": "Meilleurs choix",
|
||||
"The best choice at this time is:": "Le meilleur choix pour l'instant est :",
|
||||
"The bests choices at this time are:": "Les meilleurs choix pour l'instant sont :",
|
||||
"The best choice at this time is:": "Pour l'instant, le choix ayant reçu le plus grand nombre de votes est :",
|
||||
"The bests choices at this time are:": "Pour l'instant, les choix ayant reçu le plus grand nombre de votes sont :",
|
||||
"Scroll to the left": "Faire défiler à gauche",
|
||||
"Scroll to the right": "Faire défiler à droite"
|
||||
"Scroll to the right": "Faire défiler à droite",
|
||||
"polled user": "votant",
|
||||
"polled users": "votants",
|
||||
"Display the chart of the results": "Afficher le graphique des résultats",
|
||||
"Chart": "Graphique"
|
||||
},
|
||||
"Comments": {
|
||||
"Comments of polled people": "Commentaires de sondés",
|
||||
|
|
|
|||
|
|
@ -138,7 +138,11 @@
|
|||
"The best choice at this time is:": "La migliore scelta per ora è :",
|
||||
"The bests choices at this time are:": "Le migliori scelte per ora sono :",
|
||||
"Scroll to the left": "Spostare a sinistra",
|
||||
"Scroll to the right": "Spostare a destra"
|
||||
"Scroll to the right": "Spostare a destra",
|
||||
"polled user": "IT_votant",
|
||||
"polled users": "IT_votants",
|
||||
"Display the chart of the results": "IT_Afficher le graphique des résultats",
|
||||
"Chart": "IT_Graphique"
|
||||
},
|
||||
"Comments": {
|
||||
"Comments of polled people": "Commenti dei partecipanti",
|
||||
|
|
@ -331,4 +335,4 @@
|
|||
"You can't create a poll with hidden results with the following edition option:": "IT_Vous ne pouvez pas créer de sondage avec résulats cachés avec les options d'éditions suivantes : ",
|
||||
"Failed to delete column": "Impossibile eliminare colonna"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<td headers="C{$id}">
|
||||
<a href="{poll_url id=$admin_poll_id admin=true action='delete_column' action_value=$slot->title}"
|
||||
class="btn btn-link btn-sm" title="{__('adminstuds', 'Remove the column')} {$slot->title|html}">
|
||||
<span class="glyphicon glyphicon-remove text-danger"></span><span class="sr-only">{__('Genric', 'Remove')}</span>
|
||||
<span class="glyphicon glyphicon-remove text-danger"></span><span class="sr-only">{__('Generic', 'Remove')}</span>
|
||||
</a>
|
||||
</td>
|
||||
{/foreach}
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
<div class="input-group input-group-sm" id="edit">
|
||||
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
|
||||
<input type="hidden" name="edited_vote" value="{$vote->uniqId}"/>
|
||||
<input type="text" id="name" name="name" value="{$vote->name|html}" class="form-control" title="{__('Genric', 'Your name')}" placeholder="{__('Genric', 'Your name')}" />
|
||||
<input type="text" id="name" name="name" value="{$vote->name|html}" class="form-control" title="{__('Generic', 'Your name')}" placeholder="{__('Generic', 'Your name')}" />
|
||||
</div>
|
||||
</td>
|
||||
|
||||
|
|
@ -57,19 +57,19 @@
|
|||
<li class="yes">
|
||||
<input type="radio" id="y-choice-{$id}" name="choices[{$id}]" value="2" {if $choice==2}checked {/if}/>
|
||||
<label class="btn btn-default btn-xs" for="y-choice-{$id}" title="{__('Poll results', 'Vote yes for')|html} {$slots[$id]->title|html}">
|
||||
<span class="glyphicon glyphicon-ok"></span><span class="sr-only">{__('Genric', 'Yes')}</span>
|
||||
<span class="glyphicon glyphicon-ok"></span><span class="sr-only">{__('Generic', 'Yes')}</span>
|
||||
</label>
|
||||
</li>
|
||||
<li class="ifneedbe">
|
||||
<input type="radio" id="i-choice-{$id}" name="choices[{$id}]" value="1" {if $choice==1}checked {/if}/>
|
||||
<label class="btn btn-default btn-xs" for="i-choice-{$id}" title="{__('Poll results', 'Vote ifneedbe for')|html} {$slots[$id]->title|html}">
|
||||
(<span class="glyphicon glyphicon-ok"></span>)<span class="sr-only">{__('Genric', 'Ifneedbe')}</span>
|
||||
(<span class="glyphicon glyphicon-ok"></span>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span>
|
||||
</label>
|
||||
</li>
|
||||
<li class="no">
|
||||
<input type="radio" id="n-choice-{$id}" name="choices[{$id}]" value="0" {if $choice==0}checked {/if}/>
|
||||
<label class="btn btn-default btn-xs" for="n-choice-{$id}" title="{__('Poll results', 'Vote no for')|html} {$slots[$id]->title|html}">
|
||||
<span class="glyphicon glyphicon-ban-circle"></span><span class="sr-only">{__('Genric', 'No')}</span>
|
||||
<span class="glyphicon glyphicon-ban-circle"></span><span class="sr-only">{__('Generic', 'No')}</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -158,13 +158,15 @@
|
|||
{$max = max($best_choices['y'])}
|
||||
{if $max > 0}
|
||||
<tr id="addition">
|
||||
<td>{__('Poll results', 'Addition')}</td>
|
||||
<td>{__('Poll results', 'Addition')}<br/>{$votes|count} {if ($votes|count)==1}{__('Poll results', 'polled user')}{else}{__('Poll results', 'polled users')}{/if}</td>
|
||||
{foreach $best_choices['y'] as $i=>$best_choice}
|
||||
{if $max == $best_choice}
|
||||
{$count_bests = $count_bests +1}
|
||||
<td><span class="glyphicon glyphicon-star text-warning"></span>{$best_choice|html}{if $best_choices['inb'][$i]>0}<span class="very-small text-muted"> (+{$best_choices['inb'][$i]|html})</span>{/if}</td>
|
||||
<td><i class="glyphicon glyphicon-star text-info"></i><span class="yes-count">{$best_choice|html}</span>{if $best_choices['inb'][$i]>0}<br/><span class="small text-muted">(+<span class="inb-count">{$best_choices['inb'][$i]|html}</span>)</span>{/if}</td>
|
||||
{elseif $best_choice > 0}
|
||||
<td>{$best_choice|html}{if $best_choices['inb'][$i]>0}<span class="very-small text-muted"> (+{$best_choices['inb'][$i]|html})</span>{/if}</td>
|
||||
<td><span class="yes-count">{$best_choice|html}</span>{if $best_choices['inb'][$i]>0}<br/><span class="small text-muted">(+<span class="inb-count">{$best_choices['inb'][$i]|html}</span>)</span>{/if}</td>
|
||||
{elseif $best_choices['inb'][$i]>0}
|
||||
<td><br/><span class="small text-muted">(+<span class="inb-count">{$best_choices['inb'][$i]|html}</span>)</span></td>
|
||||
{else}
|
||||
<td></td>
|
||||
{/if}
|
||||
|
|
@ -177,6 +179,80 @@
|
|||
</form>
|
||||
</div>
|
||||
|
||||
{if !$hidden && $max > 0}
|
||||
<div class="row" aria-hidden="true">
|
||||
<div class="col-xs-12">
|
||||
<p class="text-center" id="showChart">
|
||||
<button class="btn btn-lg btn-default">
|
||||
<span class="fa fa-fw fa-bar-chart"></span> {__('Poll results', 'Display the chart of the results')}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$('#showChart').on('click', function() {
|
||||
$('#showChart').after("<h3>{__('Poll results', 'Chart')}</h3><canvas id=\"Chart\"></canvas>");
|
||||
$('#showChart').remove();
|
||||
|
||||
var resIfneedbe = [];
|
||||
var resYes = [];
|
||||
|
||||
$('#addition').find('td').each(function (colIndex) {
|
||||
if($(this).find('.inb-count').text()!='' && $(this).find('.inb-count').text()!=undefined) {
|
||||
resIfneedbe.push($(this).find('.inb-count').html())
|
||||
} else {
|
||||
resIfneedbe.push(0);
|
||||
}
|
||||
if($(this).find('.yes-count').text()!='' && $(this).find('.yes-count').text()!=undefined) {
|
||||
resYes.push($(this).find('.yes-count').html())
|
||||
} else {
|
||||
resYes.push(0);
|
||||
}
|
||||
});
|
||||
var cols = [
|
||||
{foreach $slots as $id=>$slot}
|
||||
$('<div/>').html('{$slot->title|markdown:true}').text(),
|
||||
{/foreach}
|
||||
];
|
||||
|
||||
resIfneedbe.shift(); resIfneedbe.pop();
|
||||
resYes.shift(); resYes.pop();
|
||||
console.log(resYes);
|
||||
console.log(resIfneedbe);
|
||||
var barChartData = {
|
||||
labels : cols,
|
||||
datasets : [
|
||||
{
|
||||
label: "{__('Generic', 'Ifneedbe')}",
|
||||
fillColor : "rgba(255,207,79,0.8)",
|
||||
highlightFill: "rgba(255,207,79,1)",
|
||||
barShowStroke : false,
|
||||
data : resIfneedbe
|
||||
},
|
||||
{
|
||||
label: "{__('Generic', 'Yes')}",
|
||||
fillColor : "rgba(103,120,53,0.8)",
|
||||
highlightFill : "rgba(103,120,53,1)",
|
||||
barShowStroke : false,
|
||||
data : resYes
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var ctx = document.getElementById("Chart").getContext("2d");
|
||||
window.myBar = new Chart(ctx).StackedBar(barChartData, {
|
||||
responsive : true
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
{if !$hidden}
|
||||
{* Best votes listing *}
|
||||
{$max = max($best_choices['y'])}
|
||||
|
|
@ -184,12 +260,12 @@
|
|||
<div class="row">
|
||||
{if $count_bests == 1}
|
||||
<div class="col-sm-12"><h3>{__('Poll results', 'Best choice')}</h3></div>
|
||||
<div class="col-sm-6 col-sm-offset-3 alert alert-success">
|
||||
<p><span class="glyphicon glyphicon-star text-warning"></span>{__('Poll results', 'The best choice at this time is:')}</p>
|
||||
<div class="col-sm-6 col-sm-offset-3 alert alert-info">
|
||||
<p><i class="glyphicon glyphicon-star text-info"></i> {__('Poll results', 'The best choice at this time is:')}</p>
|
||||
{elseif $count_bests > 1}
|
||||
<div class="col-sm-12"><h3>{__('Poll results', 'Best choices')}</h3></div>
|
||||
<div class="col-sm-6 col-sm-offset-3 alert alert-success">
|
||||
<p><span class="glyphicon glyphicon-star text-warning"></span>{__('Poll results', 'The bests choices at this time are:')}</p>
|
||||
<div class="col-sm-6 col-sm-offset-3 alert alert-info">
|
||||
<p><i class="glyphicon glyphicon-star text-info"></i> {__('Poll results', 'The bests choices at this time are:')}</p>
|
||||
{/if}
|
||||
|
||||
|
||||
|
|
@ -206,4 +282,4 @@
|
|||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<a href="{poll_url id=$admin_poll_id admin=true action='delete_column' action_value=$slot->day|cat:'@'|cat:$moment}"
|
||||
class="btn btn-link btn-sm"
|
||||
title="{__('adminstuds', 'Remove the column')} {$slot->day|date_format:$date_format.txt_short|html} - {$moment|html}">
|
||||
<span class="glyphicon glyphicon-remove text-danger"></span><span class="sr-only">{__('Genric', 'Remove')}</span>
|
||||
<span class="glyphicon glyphicon-remove text-danger"></span><span class="sr-only">{__('Generic', 'Remove')}</span>
|
||||
</a>
|
||||
</td>
|
||||
{$headersDCount = $headersDCount+1}
|
||||
|
|
@ -213,13 +213,15 @@
|
|||
{$max = max($best_choices['y'])}
|
||||
{if $max > 0}
|
||||
<tr id="addition">
|
||||
<td>{__('Poll results', 'Addition')}</td>
|
||||
<td>{__('Poll results', 'Addition')}<br/>{$votes|count} {if ($votes|count)==1}{__('Poll results', 'polled user')}{else}{__('Poll results', 'polled users')}{/if}</td>
|
||||
{foreach $best_choices['y'] as $i=>$best_moment}
|
||||
{if $max == $best_moment}
|
||||
{$count_bests = $count_bests +1}
|
||||
<td class="text-danger"><i class="glyphicon glyphicon-star text-warning"></i>{$best_moment|html}{if $best_choices['inb'][$i]>0}<span class="very-small text-muted"> (+{$best_choices['inb'][$i]|html})</span>{/if}</td>
|
||||
<td><i class="glyphicon glyphicon-star text-info"></i><span class="yes-count">{$best_moment|html}</span>{if $best_choices['inb'][$i]>0}<br/><span class="small text-muted">(+<span class="inb-count">{$best_choices['inb'][$i]|html}</span>)</span>{/if}</td>
|
||||
{elseif $best_moment > 0}
|
||||
<td>{$best_moment|html}{if $best_choices['inb'][$i]>0}<span class="very-small text-muted"> (+{$best_choices['inb'][$i]|html})</span>{/if}</td>
|
||||
<td><span class="yes-count">{$best_moment|html}</span>{if $best_choices['inb'][$i]>0}<br/><span class="small text-muted">(+<span class="inb-count">{$best_choices['inb'][$i]|html}</span>)</span>{/if}</td>
|
||||
{elseif $best_choices['inb'][$i]>0}
|
||||
<td><br/><span class="small text-muted">(+<span class="inb-count">{$best_choices['inb'][$i]|html}</span>)</span></td>
|
||||
{else}
|
||||
<td></td>
|
||||
{/if}
|
||||
|
|
@ -232,6 +234,80 @@
|
|||
</form>
|
||||
</div>
|
||||
|
||||
{if !$hidden && $max > 0}
|
||||
<div class="row" aria-hidden="true">
|
||||
<div class="col-xs-12">
|
||||
<p class="text-center" id="showChart">
|
||||
<button class="btn btn-lg btn-default">
|
||||
<span class="fa fa-fw fa-bar-chart"></span> {__('Poll results', 'Display the chart of the results')}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$('#showChart').on('click', function() {
|
||||
$('#showChart').after("<h3>{__('Poll results', 'Chart')}</h3><canvas id=\"Chart\"></canvas>");
|
||||
$('#showChart').remove();
|
||||
|
||||
var resIfneedbe = [];
|
||||
var resYes = [];
|
||||
|
||||
$('#addition').find('td').each(function (colIndex) {
|
||||
if($(this).find('.inb-count').text()!='') {
|
||||
resIfneedbe.push($(this).find('.inb-count').text())
|
||||
} else {
|
||||
resIfneedbe.push(0);
|
||||
}
|
||||
if($(this).find('.yes-count').text()!='') {
|
||||
resYes.push($(this).find('.yes-count').text())
|
||||
} else {
|
||||
resYes.push(0);
|
||||
}
|
||||
});
|
||||
var cols = [
|
||||
{foreach $slots as $slot}
|
||||
{foreach $slot->moments as $moment}
|
||||
$('<div/>').html('{$slot->day|date_format:$date_format.txt_short|html} - {$moment|html}').text(),
|
||||
{/foreach}
|
||||
{/foreach}
|
||||
];
|
||||
|
||||
resIfneedbe.shift(); resIfneedbe.pop();
|
||||
resYes.shift(); resYes.pop();
|
||||
console.log(resYes);
|
||||
console.log(resIfneedbe);
|
||||
var barChartData = {
|
||||
labels : cols,
|
||||
datasets : [
|
||||
{
|
||||
label: "{__('Generic', 'Ifneedbe')}",
|
||||
fillColor : "rgba(255,207,79,0.8)",
|
||||
highlightFill: "rgba(255,207,79,1)",
|
||||
barShowStroke : false,
|
||||
data : resIfneedbe
|
||||
},
|
||||
{
|
||||
label: "{__('Generic', 'Yes')}",
|
||||
fillColor : "rgba(103,120,53,0.8)",
|
||||
highlightFill : "rgba(103,120,53,1)",
|
||||
barShowStroke : false,
|
||||
data : resYes
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var ctx = document.getElementById("Chart").getContext("2d");
|
||||
window.myBar = new Chart(ctx).StackedBar(barChartData, {
|
||||
responsive : true
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{/if}
|
||||
|
||||
{if !$hidden}
|
||||
{* Best votes listing *}
|
||||
{$max = max($best_choices['y'])}
|
||||
|
|
@ -239,12 +315,12 @@
|
|||
<div class="row">
|
||||
{if $count_bests == 1}
|
||||
<div class="col-sm-12"><h3>{__('Poll results', 'Best choice')}</h3></div>
|
||||
<div class="col-sm-6 col-sm-offset-3 alert alert-success">
|
||||
<p><span class="glyphicon glyphicon-star text-warning"></span>{__('Poll results', 'The best choice at this time is:')}</p>
|
||||
<div class="col-sm-6 col-sm-offset-3 alert alert-info">
|
||||
<p><i class="glyphicon glyphicon-star text-info"></i> {__('Poll results', 'The best choice at this time is:')}</p>
|
||||
{elseif $count_bests > 1}
|
||||
<div class="col-sm-12"><h3>{__('Poll results', 'Best choices')}</h3></div>
|
||||
<div class="col-sm-6 col-sm-offset-3 alert alert-success">
|
||||
<p><span class="glyphicon glyphicon-star text-warning"></span>{__('Poll results', 'The bests choices at this time are:')}</p>
|
||||
<div class="col-sm-6 col-sm-offset-3 alert alert-info">
|
||||
<p><i class="glyphicon glyphicon-star text-info"></i> {__('Poll results', 'The bests choices at this time are:')}</p>
|
||||
{/if}
|
||||
|
||||
|
||||
|
|
@ -263,4 +339,4 @@
|
|||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
{extends file='page.tpl'}
|
||||
|
||||
{block name="header"}
|
||||
<script src="{"js/Chart.min.js"|resource}" type="text/javascript"></script>
|
||||
<script src="{"js/Chart.StackedBar.js"|resource}" type="text/javascript"></script>
|
||||
<script src="{"js/app/studs.js"|resource}" type="text/javascript"></script>
|
||||
{/block}
|
||||
|
||||
|
|
@ -63,4 +65,4 @@
|
|||
|
||||
{include 'part/comments.tpl' active=$poll->active comments=$comments}
|
||||
|
||||
{/block}
|
||||
{/block}
|
||||
|
|
|
|||
Loading…
Reference in New Issue