A small library originally made for chartist.js which takes uniform length graph labels and returns an optimal, evenly distributed set for the available width. Always returns the first and last value.
npm install --save responsive-graph-labels
Since the tests are written in ES6 they need to be webpacked so the build
and test
commands do the same thing.
-
To build the files and run tests you can use
npm test
in the cli -
To build the project run
npm run build
-
Run the tests only by running
jasmine
in your cli -
Webpack similarly is triggered by running
webpack
in your cli -
eslint is automatically executed with webpack care of eslint-loader and airbnb eslint config
-
The module is written in vanilla ES6 and transpiled into ES5 by babel.
The calculation requires 5 arguments:
argument | description |
---|---|
labels | an array containing the labels to be resized |
labelWidth | the pixel width of rendered labels |
labelPadding | the pixel width of padding on the labels |
emptyLabelValue | the value to place in slots which are removed |
labelContainerWidth | the containers width in pixels |
For example:
const result = responsiveLabels.scale({
labels: ['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec','jan'],
labelWidth 10,
labelPadding 5,
emptyLabelValue: '',
labelContainerWidth 100,
});
The above example would give the resulting array:
[ 'jan', '', '', 'apr', '', '', 'jul', '', '', 'oct', '', '', 'jan' ]
There are two scenarios we have to handle. the majority case is an odd number of labels(n)
or an even number of labels(n) where (n - 1)
is not a prime number. The second
case is that where (n - 1)
is a prime number.
The basis of the primary calculation is: x = ((n-1) / m) + 1
x
= the number of evenly divided spacesn
= the number of points on the axism
= a factor of(n-1)
note that we need to add one to the total in order to prevent a fencepost error
The above formula is used when n
is either an odd number or is an even number that does
not satisfy: (n-1) = P
- where
P
is a prime number
Where we have a prime number, it is not divisible and so we fall back to an estimation this technique calculates a step which is used to pick items from the labels array it does this using the following calculation:
i * ((n - 1) / (w / l + p)) = x
x
= the index within the original array from which to take the next labeli
= the index within the looping construct(0...((w / l + p)-1))
n
= number of points on the axisw
= the width of the graph spacel
= the width of the labelp
= the padding between labels