A rich-data presentation library written in JavaScript (ES6) that demonstrates how Anemic Components can be used for presenting rich-data.
This library is still in its infancy.
Anemic Components adhere to five core design principles. When adopted, the resulting components/libraries can be used to:
- visualize rich-data
- perform analytics
- perform statistical analysis
Please take a look the wiki from information.
First clone the repo with the following command.
git clone https://github.com/haroldcampbell/anemic-components
cd anemic-components
To view the examples, you'll need nodejs.
From the anemic-components folder install node.js packages.
npm install
Build the packages.
npm run bundle
npm run bundle-examples
Start the server.
npm start
In your browser, navigate to examples:
http://localhost:8001/examples/
The code snippet below shows an example of the declarative nature of the library.
container("c6", _ => {
_.bars(barsData, [$group("c6-be"), $maxHeight(50), $y(50), $yOffset(30), $width(150)]);
_.ellipses(ex6EllipsesData1, [$group("c6-e1"), $maxDiameter(50), $y(50), $cyOffset(30), $x(150)]);
_.ellipses(ex6EllipsesData2, [$group("c6-e2"), $maxDiameter(60), $y(55), $cyOffset(80), $x(400)]);
_.connectingLines(linesData1, [$joinGroupItems(["c6-e1", "c6-e2"]), $group("c6-e3"), $maxStrokeWidth(15)]);
_.onRenderCompleted(() => {
$moveBelow("c6-e3", "c6-be")
});
});This produces the following image:
Please take a look the wiki from information.
Tests were written using TapeJS
npm install babel-tape-runner -g
You’ll also need a .babelrc file:
{
"presets": ["@babel/preset-env"]
}
From the root folder run the tests.
babel-tape-runner ./tests/tap.js ./tests/**/*.test.js
More information here: TapeJS vs Everything else
Lots of work left to be done. Looking forward to pull requests.
- 0.0.5 (Pre-alpha): Add ability to redraw shapes based on new data