Skip to content
Project to create timeline based on a JSON response. The timeline with draw with SVG and responsive. This is a OSS project.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
imgs
test
.editorconfig
.eslintignore
.eslintrc.json
.gitattributes
.gitignore
.npmrc
.prettierrc
.travis.yml
CHANGELOG.md
LICENSE
README.md
Triglav.code-workspace
index.html
package.json
triglav.js

README.md

Triglav

EN

Create a responsive timeline using SVG

PT-BR

Criar uma timeline responsiva utilizando SVG

Example

EN

Example of the component, receive a JSON and render a single Knit. You could click or call to alert a single dot

PT-BR

Exemplo do componente, ele recebe um JSON e renderiza uma timeline unica. Voce pode exibir um alerta em um ponto especifico

Alt Text

Installation

Install package

$ npm install
$ npm start

Usage

let width = 300;
let height = 300;
let divId = "test";
let array = [
   [
      {
          "ordem": 1,
          "nome": "First",
          "id": "55"
      },
      {
          "ordem": 2,
          "nome": "Second",
          "id": "66"
      }
   ]
];
let opts = {
    dotColor: "#FFF",
    lineColor: "#FFF",
    blinkColor: '#F00'
};
var m = new Triglav(divId,width,heigth,array, function(id){
    console.log(id);
    },
    opts 
);

Development

  • Cloning the repo
$ git clone https://github.com/engaugusto/Triglav.git
  • Installing dependencies
$ npm install
  • Running scripts
Action Usage
Starting development mode npm start

Todos

Port to React as a Component. Port to Angular as a Component. Create more unit test. Automatizated the build with a minified distribution.

Author

Carlos Augusto

License

MIT

You can’t perform that action at this time.