@momsfriendlydevco/vote-tally

vote-tally

Simple UI widget to show and calculate vote tallies.

Demo

Installation

NOTE: This module requires angular-bs-tooltip.

1. Grab the NPM

npm install --save @momsfriendlydevco/vote-tally

2. Install the required script + CSS somewhere in your build chain or include it in a HTML header:

<script src="/libs/vote-tally/dist/votetally.min.js"/>
<link href="/libs/vote-tally/dist/vote-tally.min.css" rel="stylesheet" type="text/css"/>

3. Include the router in your main angular.module() call:

var app = angular.module('app', ['angular-ui-vote-tally'])

4. Use somewhere in your template:

<vote-tally total="100" approve="40" reject="20" abstain="10" method="2/3rds" summary="true"></vote-tally>

A demo is also available. To use this follow the instructions in the demo directory.

API

vote-tally exposes two main components: a generic service library which provides a list of voting schemas supported and information on voting methods and the UI component itself.

Within Node the API is accessed as an object:

var voteTally = require('@momsfriendlydevco/vote-tally');

// Calculate 2/3rds majority voting method with 100 people and 10 abstaining
var ratio = voteTally.getWinLose({
	method: '2/3rds',
	total: 100,
	abstain: 10,
});

Within AngularJS this is accessed as a service:

angular
	.module('app')
	.component('myController', {
		controller: function(VoteTally) {
			VoteTally.getWinLose(...);
		},
	});

methods

An array of objects for all supported voting methods. Each item will contain an id as well as a human readable title and a brief description.

getWinLose()

Calculate the ratios for a given voting method given the total number of voters and an optional number of voters abstaining.

// Calculate 2/3rds majority voting method with 100 people and 10 abstaining
var ratio = voteTally.getWinLose({
	method: '2/3rds',
	total: 100,
	abstain: 10,
});

UI Component

The UI widget is a AngularJS component which is declared as:

<vote-tally total="100" approve="30" reject="20" abstain="5" method="simpleMajority" summary="true" tooltips="hover"></vote-tally>

The following options are accepted:

Option	Type	Default	Description
method	string	"simpleMajority"	The voting method used to calculate the target votes. This can be any ID supported in the methods collection
total	number	100	The total number of voters
approve	number	0	The number of voters who accept the motion
reject	number	0	The number of voters who reject the motion
abstain	number	0	The number of voters who are abstaining
summary	boolean	false	Whether to show the summary area at the bottom of the widget
tooltips	string	"hover"	When to display tooltips. Values supported: "never", "hover" (default), "always"
onClickPass	function	undefined	A function to fire when the user clicks on the X / Y to pass summary pane or the far left progress bar
onClickReject	function	undefined	A function to fire when the user clicks on the X / Y to reject summary pane or the second to far right progress bar
onClickAbstain	function	undefined	A function to fire when the user clicks on the X abstaining summary pane or the far right progress bar
onClickWaiting	function	undefined	A function to fire when the user clicks on the X to vote summary pane or the remaining area of the progress bar