gtap (Previously AnCUI)

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.

Functional Visuals

Functional Visuals 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.

Installation

First clone the repo with the following command.

git clone https://github.com/haroldcampbell/anemic-components

cd anemic-components

Browser Examples

To view the examples, you'll need nodejs.

From the gtap 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/

What can we do right now with gtap?

The code snippet below shows an example of the declarative nature of the library.

const ctx = container("c6", $id("parent-elm"));
renderVisuals(ctx, [
    $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

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

Pull Requests

Lots of work left to be done. Looking forward to pull requests.

Version History

• 0.0.5 (Pre-alpha): Add ability to redraw shapes based on new data