Primeiros passos

Pivotick é uma biblioteca de visualização de grafos em TypeScript, fácil de personalizar e construída sobre as simulações de forças do D3. Ela renderiza grafos direcionados ou não direcionados com controles interativos, simulação de forças, layouts em árvore e elementos opcionais de interface, como barras laterais, barras de ferramentas, menus de contexto e dicas.

Uso Básico

Pivotick pode ser usado como um módulo JavaScript moderno ou diretamente no navegador por meio de uma tag de script.

const app = new Pivotick({
    container: document.getElementById('app'),
    data: {
        nodes: [
            { id: 1, data: { label: 'A' } },
            { id: 2, data: { label: 'B' } }
        ],
        edges: [
            { from: 1, to: 2 }
        ]
    }
})

Instalação

1. Use uma versão GitHub (não é necessária compilação)

Se você não quiser construir o projeto sozinho, baixe a versão mais recente em GitHub.

Etapas:

1. Vá para a página Releases do repositório
2. Baixe o pacote dist mais recente
3. Extraia-o para o seu projeto

Você deve obter arquivos como:

pivotick.es.js
pivotick.umd.js
pivotick.iife.js
pivotick.css

Em seguida, use-os dependendo do seu ambiente:

Módulo ES (recomendado)

import { Pivotick } from 'pivotick'
import 'pivotick/dist/pivotick.css'

const app = new Pivotick({
    container: document.getElementById('app'),
    data: {
        nodes: [
            { id: 1, data: { label: 'A' } },
            { id: 2, data: { label: 'B' } }
        ],
        edges: [
            { from: 1, to: 2 }
        ]
    }
})

Navegador IIFE / UMD

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/assets/pivotick.css" />
    <script src="/assets/pivotick.iife.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script>
      const app = new Pivotick({
        container: document.getElementById('app'),
        data: {
          nodes: [
            { id: 1, data: { label: 'A' } },
            { id: 2, data: { label: 'B' } }
          ],
          edges: [
            { from: 1, to: 2 }
          ]
        }
      })
    </script>
  </body>
</html>

2. Construir a partir do código-fonte (recomendado para desenvolvimento)

Use isto se desejar controle total sobre a biblioteca ou precisar modificá-la.

git clone https://github.com/pivotick/pivotick.git
cd pivotick
npm install
npm run build

Após a construção, os arquivos compilados estarão disponíveis em:

dist/

Você pode então importá-los diretamente dependendo do seu ambiente:

Módulo ES (recomendado)

import { Pivotick } from 'pivotick'
import 'pivotick/dist/pivotick.css'

const app = new Pivotick({
    container: document.getElementById('app'),
    data: {
        nodes: [
            { id: 1, data: { label: 'A' } },
            { id: 2, data: { label: 'B' } }
        ],
        edges: [
            { from: 1, to: 2 }
        ]
    }
})

IIFE / UMD

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/assets/pivotick.css" />
    <script src="/assets/pivotick.iife.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script>
      const app = new Pivotick({
        container: document.getElementById('app'),
        data: {
          nodes: [
            { id: 1, data: { label: 'A' } },
            { id: 2, data: { label: 'B' } }
          ],
          edges: [
            { from: 1, to: 2 }
          ]
        }
      })
    </script>
  </body>
</html>

Estilos

Pivotick vem com estilos padrão incluídos em pivotick.css:

Você pode personalizar a aparência de duas maneiras:

• Use as classes integradas do Pivotick.
• Substitua estilos usando variáveis CSS.

:root {
  --pvt-node-color: #FDDA24;
  --pvt-node-stroke: #000000;
  --pvt-edge-stroke: #EF3340;
}

.pvt-node circle {
  fill: cyan;
}