diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..4decaab --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,28 @@ +# Changelog +All notable changes to this project will be documented in this file. + +The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) +and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). + +## [0.2.0] - 2018-08-08 +### Added +- Package commands for test and lint +- Example HTML, script and samples +## Changed +- CSS style now uses loaders +- Folder structure +- Base style is B/W now +- Variables, id, attributes and code style +### Fixed +- Wrong dimension labels + + +## [0.1.0] - 2018-06-21 +### Added +- Webpack project using Babel +- Jest and JHint for testing and lint +- First working version, hosted on NPM +- Base visualization using HTML and CSS +- Drag and drop using vanilla javascript +- User can provide a handler action for drops +- User can provide custom avatar for the items diff --git a/README.md b/README.md index baebba0..543079c 100644 --- a/README.md +++ b/README.md @@ -2,14 +2,36 @@ Stakeholder visualization. -## Develop +## Usage -### Run +Load this javascript, for example: + +```html + +``` + +Then, call the init function to load the visualization within a target div: + +```javascript +const target = document.querySelector('div#powerade'); +const elements = [{ + label: 'some label', + values: { + 'x-dimension': 1, + 'y-dimension': 2, + 'z-dimension': 3 + } +}]; +Powerade.init(target, elements); +``` + +### Develop ```sh yarn watch ``` -Check `dist/example.html`. + +Check the generated files at `dist/`. ### Test diff --git a/package.json b/package.json index 5707589..d2ed2dc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "powerade", - "version": "0.1.0", + "version": "0.2.0", "description": "stakeholder visualization", "scripts": { "watch": "webpack --watch --mode=development",