pivotick v3.0.0

---

Pivotick

Pivotick ist eine hackbare TypeScript Grafikvisualisierungsbibliothek, die auf D3-Kraftsimulationen aufbaut. Es rendert gerichtete oder ungerichtete Diagramme mit interaktiven Steuerelementen, Kraftsimulation, Baumlayout-Unterstützung und optionalen UI-Elementen wie einer Seitenleiste, einer Datentabelle, Kontextmenüs und Tooltips.

Es macht auch das, wofür es benannt ist: Ein Pivot ruft mehr Diagramme von jedem Ort ab, an dem sich Ihre Daten befinden, stellt die Ergebnisse als von Ihnen selektierte Kandidaten bereit, anstatt sie auf der Arbeitsfläche abzulegen, und kann zurückschreiben, was Sie behalten – mit einem Rückgängig-Verlauf über alles, was die Arbeitsfläche enthält.

Kernfunktionen

• Gerichtete und ungerichtete Graphdarstellung
• Pivots: Führen Sie eine Anreicherung anhand der Inhalte auf der Arbeitsfläche durch, selektieren Sie die Ergebnisse in einem Dock-Bereich und nehmen Sie nur das auf, was Sie behalten
• Speichern Sie die Ergebnisse eines Pivots zurück in dem System, aus dem sie stammen, mit einem Verzeichnis darüber, was sich gekreuzt hat und was nicht
• Machen Sie alle auf der Arbeitsfläche enthaltenen Elemente (Aufnahmen, Löschungen, Ausblendungen und handgezeichnete Elemente) in einer Zeitleiste rückgängig und wiederholen Sie sie
• Herkunft: Jeder Knoten und jede Kante weiß, welche Quellen dafür bürgen, und der Beitrag einer Quelle kann weggelassen werden
• Kraftbasierte Simulation mit optionaler Werkerunterstützung
• Unterstützung für Baum-/Hierarchielayouts, wobei die Hierarchie aus den Daten abgeleitet oder deklariert wird
• Selbstoptimierendes Kraftlayout oder manuell über das Physik-Flyout abgestimmt
• Eine unter der Arbeitsfläche angedockte Datentabelle, die eine Auswahl mit der Arbeitsfläche und der Seitenleiste teilt
• Minimap, eine Filterlegende mit mehreren Schlüsseln und ein deklaratives Filterfeld
• Kantenebenen – Kanten, die nach Typ gekeyt, nach Typ gestylt und ein- und ausgeschaltet werden können, ohne dass das Diagramm verschoben werden muss
• Verschiedene UI-Modi (full, light, viewer, static)
• Konfigurierbare Knoten-/Kantenstile, Beschriftungen, Randabzeichen und Rückrufe
• Interaktive Bearbeitung – Knotenbearbeitung und Kantenerstellung (Ziehen oder Klicken) mit Validierungs- und Anreicherungs-Hooks
• Erweiterbare Plugin-API zum Hinzufügen einer benutzerdefinierten Benutzeroberfläche, einschließlich Ihres eigenen Modus auf der linken Leiste

Projekte mit Pivotick

Pivotick hilft der Community, vernetzte Daten in Threat Intelligence, Schwachstellenforschung und Sicherheitsuntersuchungen zu erkunden. Entdecken Sie die Projekte in unserem Community-Schaufenster:

Projekt	Was es bewirkt
Rulezet	Regeln zur Erkennung von Cyberangriffen erkunden, teilen und verwalten.
CTI Transmute	Threat Intelligence zwischen den Formaten MISP und STIX umwandeln.
CPE Editor · Quellcode	Einträge der Common Platform Enumeration (CPE) suchen und bearbeiten.
Vulnerability-Lookup · CIRCL-Instanz	Schwachstelleninformationen sammeln, korrelieren und teilen.
AIL Project	Unstrukturierte Daten für Threat Intelligence sammeln, crawlen und analysieren.
Threat Actor Explorer	Bedrohungsakteure aus dem MISP-Galaxy-Datensatz im Browser erkunden.
FlowIntel	Sicherheitsuntersuchungen, Fälle und Analystenaufgaben organisieren.
CIRCL	Von CIRCL gepflegte Open-Source-Projekte für Cybersicherheit entdecken.
MISP	Threat Intelligence mit offenen Standards teilen, speichern und korrelieren.

Sie bauen etwas mit Pivotick? Wir stellen es gern hier vor! Teilen Sie den Namen Ihres Projekts, einen Link und eine kurze Beschreibung, wie Sie Pivotick einsetzen, in Issue #34. Projekte jeder Größe sind willkommen.

Sehen Sie sich das Projekt-Schaufenster in der Dokumentation an.

Erste Schritte

Grundlegende Verwendung

Pivotick kann entweder als modernes JavaScript-Modul oder direkt im Browser über einen Script-Tag verwendet werden.

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

Installation

npm install pivotick

1. Verwenden Sie eine GitHub-Version (kein Build erforderlich)

Wenn Sie das Projekt nicht selbst erstellen möchten, laden Sie die neueste Version von GitHub herunter.

Schritte:

1. Gehen Sie zur Seite „Releases“ des Repositorys
2. Laden Sie das neueste Dist-Bundle herunter
3. Extrahieren Sie es in Ihr Projekt

Sie sollten Dateien erhalten wie:

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

Dann verwenden Sie sie je nach Ihrer Umgebung:

ES-Modul (empfohlen)

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

Browser (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. Aus dem Quellcode erstellen (für die Entwicklung empfohlen)

Verwenden Sie diese Option, wenn Sie die volle Kontrolle über die Bibliothek haben möchten oder diese ändern müssen.

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

Nach dem Erstellen sind die kompilierten Dateien verfügbar in:

dist/

Anschließend können Sie diese je nach Umgebung direkt importieren:

ES-Modul

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

Browser-Build

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

Gestaltung

Pivotick wird mit den in pivotick.css enthaltenen Standardstilen geliefert:

Sie können das Aussehen auf zwei Arten anpassen:

• Verwenden Sie die integrierten Klassen von Pivotick.
• Überschreiben Sie Stile mit CSS Variablen.

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

.pvt-node circle {
  fill: cyan;
}

Dokumentation und API-Referenz

• Vollständige Dokumentation: https://pivotick.github.io/Pivotick/
• Typisierte API-Referenz: https://pivotick.github.io/Pivotick/api/html/classes/Pivotick.html

Projektskripte

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)

Mitwirken

1. Erstellen Sie einen Zweig
2. Führen Sie npm run build und npm run lint aus
3. Öffnen Sie eine Pull-Anfrage mit einer kurzen Zusammenfassung des Verhaltens und der API-Änderungen
4. Halten Sie PRs fokussiert und klein