https://github.com/hfagerlund/elections-carousel-component

API-based React carousel component (demo)
https://github.com/hfagerlund/elections-carousel-component

babel enzyme es6 jest react react-components sass webpack2

Last synced: 27 days ago
JSON representation

API-based React carousel component (demo)

• Host: GitHub
• URL: https://github.com/hfagerlund/elections-carousel-component
• Owner: hfagerlund
• License: bsd-3-clause
• Created: 2018-03-21T04:32:40.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-04T01:58:02.000Z (almost 2 years ago)
• Last Synced: 2024-09-28T22:01:18.855Z (about 1 month ago)
• Topics: babel, enzyme, es6, jest, react, react-components, sass, webpack2
• Language: JavaScript
• Homepage: https://hfagerlund.github.io/elections-carousel-component/
• Size: 1.09 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# elections-carousel-component

[![Build Status](https://travis-ci.org/hfagerlund/elections-carousel-component.svg?branch=master)](https://travis-ci.org/hfagerlund/elections-carousel-component) [![Codacy Badge](https://app.codacy.com/project/badge/Grade/66889e34a3ed41cea5320c0ce2f12cd9)](https://www.codacy.com/gh/hfagerlund/elections-carousel-component/dashboard?utm_source=github.com&utm_medium=referral&utm_content=hfagerlund/elections-carousel-component&utm_campaign=Badge_Grade) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

A component-based carousel presentation of election results data from an external (JSON) API using pure [React](https://github.com/facebook/react).

Enables scrolling through the election results for all ridings using the Next and Back controls (via mouse or keyboard), displaying the number of votes and automatically calculating the percentage of the vote won by each candidate in each riding.

Results data is automatically checked for updates every 5 minutes (by [default](https://github.com/hfagerlund/elections-carousel-component#customizable-options)).




*Figure 1: screenshot of elections.html page*

- - -

## Demo

Available at: https://hfagerlund.github.io/elections-carousel-component/

- - -

## Quick start

```console

# clone the repo

$ git clone https://github.com/hfagerlund/elections-carousel-component.git

# install dependencies

$ yarn

# launch local server (for data feed)

$ http-server

## browse to http://127.0.0.1:8080/elections.html

```

- - -

## Usage

### Customizable Options

The following props can be set on the `App` component in order to customize it:

| Prop | Type
(Default value) | Description |

| --- | --- | --- |

| **componentTitle** | `string`
*default value:* `Election Results` | Main `
` heading/title text (in the `` component) |

| **resultUpdatesEnabled** | `bool`
*default value:* `true` | Set to `true`|`false` to enable|disable automatic data updates from the (JSON) feed. |

| **updatesDisabledMessage** | `string`
*default value:* `Final results reported. All polls are now closed.` | Text displayed in the updates status 'bubble' (ie. directly following the `
` heading) when automatic data updates from the (JSON) feed are disabled. |

| **updateIntervalInMilliseconds** | `integer`
*default value:* `300000` (ie. 5 mins.) | Time intervals (in msec) at which the (JSON) feed is checked for data updates |

| **url** | `string`
*default value:* `http://127.0.0.1:8080/src/assets/fixtures/results.js?callback=` | The URL for the (JSON) data feed |


### Examples

**Example 1** - To display a (custom) title of '2011 Election Results', with the (default) status message 'Final results reported. All polls are now closed.', modify `/src/js/elections/index.jsx` as shown below:

**index.jsx** -

```

import React from 'react';

import { render } from 'react-dom';

import App from './components/App.jsx';

render(

  ,

  document.getElementById('app')

);

```

**Example 2** - Update data results at 3 minute intervals (instead of the default 5 mins.):

**index.jsx** -

```

// ...

render(, document.getElementById('app'));

```

**Example 3** - Use all default settings:

**[index.jsx](https://github.com/hfagerlund/elections-carousel-component/blob/master/src/js/elections/index.jsx)** -

```

// ...

render(, document.getElementById('app'));

```

- - -

## Running the Build

For a **development** environment:

```

$ yarn run dev

```

For a **production** environment:

```

$ yarn run build:production

```

- - -

## Running the Unit Tests

Run all tests:

```

$ yarn run test

```

- - -

## License

Copyright (c) 2018 Heini Fagerlund. Licensed under the [BSD-3-Clause license](https://github.com/hfagerlund/elections-carousel-component/blob/master/LICENSE).