dmn-elex-historical-share

dmn-elex-historical-share

Chart module comparing Donald Trump's vote margin in Texas to previous republican presidential candidates with smart text.

Install

$ npm install --save dmn-elex-historical-share

Requirements

This module uses ES6 syntax. To use as a pre-compiled module, you'll need a compiler like babel.

Use

In the client, include the global-chart.js bundle, which defines a global chart object, HistoricalShare:

<script src="some/path/to/global-chart.js"></script>

To use as a module, simply import the chart object:

import HistoricalShare from 'dmn-elex-historical-share';

The chart object has two methods, one to create the chart, initially, and another to update it.

var myChart = new HistoricalShare();

// create needs a selection string and prefectched data
myChart.create('#chart', data);

// update needs only new data
myChart.update(newData);

The data is expected to be the complete results for U.S. president.

To apply this chart's default styles when using SCSS, simply define the variable $HistoricalShare-container to represent the ID or class of the chart's container(s) and import the _chart-styles.scss partial.

$HistoricalShare-container: '#chart';

@import 'path/to/dmn-elex-historical-share/src/scss/_chart-styles';

Positioning and styles

This chart should be in a container with a fixed height of 185px and a set style position: relative;. Position the container absolutely at the top or bottom of any containing div for more control. The chart will expand with the width of its container, but it's ideal range is between 250px and 320px.

Be sure to grab styles for this chart in styles.scss.

Hosted images

This chart requires two hosted images:

• http://elections.dallasnews.com/img/mugs/trump_win.png
• http://elections.dallasnews.com/img/mugs/trump_lose.png

Developing

Just run gulp:

$ gulp

Or to minimize javascript before publishing:

$ gulp --production