@momsfriendlydevco/vote-tally

Angular directive to show vote totals - accepted, rejected, abstaining, totals etc.


Keywords
vote, voting, tally
License
MIT
Install
npm install @momsfriendlydevco/vote-tally@0.0.8

Documentation

vote-tally

Simple UI widget to show and calculate vote tallies.

Screenshot

Demo

Installation

NOTE: This module requires angular-bs-tooltip.

  1. Grab the NPM
npm install --save @momsfriendlydevco/vote-tally
  1. 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"/>
  1. Include the router in your main angular.module() call:
var app = angular.module('app', ['angular-ui-vote-tally'])
  1. 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