pivotick v3.0.0

---

Pivotick

Pivotick é uma biblioteca de visualização de gráficos TypeScript hackeável construída sobre simulações de força D3. Ele renderiza gráficos direcionados ou não direcionados com controles interativos, simulação de força, suporte a layout de árvore e elementos de UI opcionais, como barra lateral, tabela de dados, menus de contexto e dicas de ferramentas.

Ele também faz o que lhe dá nome: um pivot busca mais gráficos de onde quer que seus dados estejam, organiza os resultados como candidatos que você faz a triagem em vez de soltá-los na tela e pode escrever de volta o que você mantém - com um histórico de desfazer sobre tudo o que a tela contém.

Recursos principais

• Renderização de gráfico direcionada e não direcionada
• Pivôs — execute um enriquecimento com base no que está na tela, faça a triagem dos resultados em um painel de encaixe e ingira apenas o que você mantém
• Salvar os resultados de um pivô de volta ao sistema de onde vieram, com um registro do que foi cruzado e do que não foi
• Desfazer e refazer o que a tela contém – ingestões, exclusões, ocultações e elementos desenhados à mão – como uma linha do tempo
• Proveniência: cada nó e borda sabe quais fontes atestam isso, e a contribuição de uma fonte pode ser descartada
• Simulação baseada em força com suporte opcional ao trabalhador
• Suporte a layout de árvore/hierarquia, com a hierarquia inferida ou declarada pelos dados
• Layout de força com autoajuste ou ajustado manualmente no submenu Física
• Uma tabela de dados encaixada na tela, compartilhando uma seleção com a tela e a barra lateral
• Minimapa, uma legenda de filtragem multichave e um painel de filtro declarativo
• Camadas de borda — bordas codificadas por tipo, estilizadas por tipo e ativadas e desativadas sem mover o gráfico
• Diferentes modos de UI (full, light, viewer, static)
• Estilos de nós/bordas configuráveis, rótulos, emblemas de aro e retornos de chamada
• Edição interativa — edição de nós e criação de bordas (arrastar ou clicar) com ganchos de validação e enriquecimento
• API de plug-in extensível para adicionar UI personalizada, incluindo seu próprio modo no painel esquerdo

Projetos que usam o Pivotick

O Pivotick ajuda a comunidade a explorar dados conectados em inteligência de ameaças, pesquisa de vulnerabilidades e investigações de segurança. Conheça os projetos listados na nossa vitrine da comunidade:

Projeto	O que isso faz
Rulezet	Explore, compartilhe e gerencie regras de detecção de cibersegurança.
CTI Transmute	Converta inteligência de ameaças cibernéticas entre os formatos MISP e STIX.
CPE Editor · Código-fonte	Pesquise e edite entradas da Common Platform Enumeration (CPE).
Vulnerability-Lookup · Instância do CIRCL	Colete, correlacione e compartilhe informações sobre vulnerabilidades.
AIL Project	Colete, rastreie e analise dados não estruturados para inteligência de ameaças.
Threat Actor Explorer	Explore no navegador os agentes de ameaça do conjunto de dados MISP galaxy.
FlowIntel	Organize investigações de segurança, casos e tarefas de analistas.
CIRCL	Conheça os projetos de cibersegurança de código aberto mantidos pelo CIRCL.
MISP	Compartilhe, armazene e correlacione inteligência de ameaças usando padrões abertos.

Está criando algo com o Pivotick? Adoraríamos mostrá-lo aqui! Compartilhe o nome do projeto, um link e uma breve descrição de como você usa o Pivotick na issue #34. Projetos de todos os tamanhos são bem-vindos.

Veja a vitrine de projetos na documentação.

Primeiros passos

Uso Básico

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

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

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

npm install pivotick

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

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

Construção do navegador

<script src="./dist/pivotick.iife.js"></script>

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;
}

Documentação e referência da API

• Documentação completa: https://pivotick.github.io/Pivotick/
• Referência de API digitada: https://pivotick.github.io/Pivotick/api/html/classes/Pivotick.html

Scripts do projeto

npm run dev               # Start Vite dev server
npm run build             # Build full project (types + all bundles)
npm run build:es          # Build ES module bundle
npm run build:browser     # Build browser (UMD + IIFE) bundle
npm run build:worker      # Build worker bundle
npm run preview           # Preview production build

npm run lint              # Run ESLint
npm run lint_fix          # Fix lint issues

npm run vitepress:dev     # Run documentation site locally
npm run vitepress:build   # Build documentation site
npm run vitepress:preview # Preview documentation build

npm run typedoc:dev       # Watch TypeDoc output
npm run typedoc:build     # Generate API docs

npm run docs:build        # Build full documentation (typedoc + vitepress)

Como contribuir

1. Crie uma filial
2. Execute npm run build e npm run lint
3. Abra uma solicitação pull com um resumo conciso do comportamento e das alterações da API
4. Mantenha os PRs focados e pequenos