pivotick v3.0.0

---

Pivotick

Pivotick es una biblioteca de visualización de gráficos TypeScript pirateable construida sobre simulaciones de fuerza D3. Representa gráficos dirigidos o no dirigidos con controles interactivos, simulación de fuerza, compatibilidad con diseño de árbol y elementos de interfaz de usuario opcionales, como una barra lateral, una tabla de datos, menús contextuales e información sobre herramientas.

También hace lo que le da nombre: un pivote obtiene más gráficos de dondequiera que se encuentren sus datos, organiza los resultados como candidatos que usted clasifica en lugar de dejarlos en el lienzo, y puede escribir lo que conserva, con un historial de deshacer sobre todo lo que contiene el lienzo.

Características principales

• Representación de gráficos dirigidos y no dirigidos.
• Pivotes: ejecute un enriquecimiento con respecto a lo que está en el lienzo, clasifique los resultados en un panel de acoplamiento e ingiera solo lo que conserva.
• Guardar los resultados de un pivote en el sistema del que proceden, con un libro de contabilidad de lo que se ha cruzado y lo que no.
• Deshacer y rehacer lo que contiene el lienzo (ingestas, eliminaciones, ocultaciones y elementos dibujados a mano) como una línea de tiempo.
• Procedencia: cada nodo y borde sabe qué fuentes lo avalan, y la contribución de una fuente puede descartarse
• Simulación basada en la fuerza con soporte opcional para el trabajador
• Soporte de diseño de árbol/jerarquía, con la jerarquía inferida o declarada por los datos
• Diseño de fuerza autoajustable o ajustado manualmente desde el menú lateral Física
• Una tabla de datos acoplada debajo del lienzo, que comparte una selección con el lienzo y la barra lateral.
• Minimapa, una leyenda de filtrado de múltiples claves y un panel de filtro declarativo
• Capas de borde: bordes codificados por tipo, con estilo por tipo y activados y desactivados sin mover el gráfico
• Diferentes modos de interfaz de usuario (full, light, viewer, static)
• Estilos de nodo/borde configurables, etiquetas, insignias de llanta y devoluciones de llamada
• Edición interactiva: edición de nodos y creación de bordes (arrastrar o hacer clic) con ganchos de validación y enriquecimiento.
• API de complemento extensible para agregar una interfaz de usuario personalizada, incluido su propio modo en el carril izquierdo

Proyectos que utilizan Pivotick

Pivotick ayuda a la comunidad a explorar datos conectados a través de inteligencia sobre amenazas, investigación de vulnerabilidades e investigaciones de seguridad. Descubra los proyectos listados en nuestro escaparate comunitario:

Proyecto	que hace
Rulezet	Explore, comparta y administre reglas de detección de ciberseguridad.
Transmutación CTI	Convierta la inteligencia sobre amenazas cibernéticas entre formatos MISP y STIX.
Editor CPE · Código fuente	Busque y edite entradas de enumeración de plataforma común (CPE).
Búsqueda de vulnerabilidades · instancia CIRCL	Recopilar, correlacionar y compartir información sobre vulnerabilidades.
Proyecto AIL	Recopile, rastree y analice datos no estructurados para obtener inteligencia sobre amenazas.
Explorador de actores de amenazas	Explore los actores de amenazas del conjunto de datos de galaxias MISP en su navegador.
FlowIntel	Organizar investigaciones de seguridad, casos y tareas de analistas.
CIRCL	Descubra proyectos de ciberseguridad de código abierto mantenidos por CIRCL.
MISP	Comparta, almacene y correlacione inteligencia sobre amenazas utilizando estándares abiertos.

Construyendo algo con Pivotick? ¡Nos encantaría presentarlo aquí! Comparte tu proyecto nombre, un enlace y una breve descripción de cómo usas Pivotick en número 34. Proyectos de todos los tamaños son bienvenidos.

Explore la muestra del proyecto en la documentación.

Empezando

Uso básico

Pivotick se puede utilizar como un módulo JavaScript moderno o directamente en el navegador mediante una etiqueta de secuencia de comandos.

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 }
    ]
  }
})

Instalación

npm install pivotick

1. Utilice una versión GitHub (no se requiere compilación)

Si no desea crear el proyecto usted mismo, descargue la última versión desde GitHub.

Pasos:

1. Vaya a la página de lanzamientos del repositorio.
2. Descargue el último paquete dist
3. Extráelo en tu proyecto

Deberías obtener archivos como:

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

Luego úsalos dependiendo de tu entorno:

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 desde el código fuente (recomendado para desarrollo)

Úselo si desea tener control total sobre la biblioteca o necesita modificarla.

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

Después de la compilación, los archivos compilados estarán disponibles en:

dist/

Luego puede importarlos directamente según su entorno:

Módulo ES

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

Compilación del navegador

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

Estilo

Pivotick viene con estilos predeterminados incluidos en pivotick.css:

Puedes personalizar el aspecto de dos maneras:

• Utilice las clases integradas de Pivotick.
• Anule los estilos usando CSS variables.

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

.pvt-node circle {
  fill: cyan;
}

Referencia de documentos y API

• Documentación completa: https://pivotick.github.io/Pivotick/
• Referencia de API escrita: https://pivotick.github.io/Pivotick/api/html/classes/Pivotick.html

Guiones de proyecto

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)

Contribuyendo

1. crear una sucursal
2. Ejecute npm run build y npm run lint
3. Abra una solicitud de extracción con un resumen conciso de comportamiento y cambios de API
4. Mantenga a los RP enfocados y pequeños