pivotick v3.0.0

---

Pivotick

Pivotick is een hackbare TypeScript bibliotheek voor grafiekvisualisatie, gebouwd bovenop D3-krachtsimulaties. Het geeft gerichte of ongerichte grafieken weer met interactieve bedieningselementen, krachtsimulatie, ondersteuning voor boomindeling en optionele UI-elementen zoals een zijbalk, een gegevenstabel, contextmenu's en tooltips.

Het doet ook waarvoor het is genoemd: een pivot haalt meer grafieken op, waar uw gegevens zich ook bevinden, stelt de resultaten op als kandidaten die u triaget in plaats van ze op het canvas te plaatsen, en kan terugschrijven wat u bewaart - met een ongedaan gemaakte geschiedenis voor alles wat op het canvas staat.

Kernfuncties

• Gerichte en ongerichte grafiekweergave
• Draaipunten: voer een verrijking uit op basis van wat er op het canvas staat, beoordeel de resultaten in een dockvenster en neem alleen op wat u bewaart
• Het opslaan van de resultaten van een pivot terug naar het systeem waar ze vandaan kwamen, met een grootboek van wat er is gekruist en wat niet
• Ongedaan maken en opnieuw uitvoeren van wat het canvas bevat (opnamen, verwijderingen, verbergingen en handgetekende elementen) als één tijdlijn
• Herkomst: elk knooppunt en elke rand weet welke bronnen daarvoor instaan, en de bijdrage van één bron kan worden geschrapt
• Op krachten gebaseerde simulatie met optionele werknemersondersteuning
• Ondersteuning voor boom-/hiërarchie-indeling, waarbij de hiërarchie wordt afgeleid of gedeclareerd door de gegevens
• Zelfafstemmende krachtindeling, of met de hand afgestemd via de vervolgpagina Natuurkunde
• Een gegevenstabel die onder het canvas is vastgezet en één selectie deelt met het canvas en de zijbalk
• Minimap, een filterlegenda met meerdere sleutels en een declaratief filterpaneel
• Randlagen — randen gesorteerd op soort, opgemaakt per soort en in- en uitgeschakeld zonder de grafiek te verplaatsen
• Verschillende UI-modi (full, light, viewer, static)
• Configureerbare knooppunt-/randstijlen, labels, randbadges en callbacks
• Interactief bewerken – bewerken van knooppunten en het maken van randen (slepen of klikken) met validatie- en verrijkingshakes
• Uitbreidbare plug-in-API voor het toevoegen van een aangepaste gebruikersinterface, inclusief uw eigen modus op de linkerrail

Projecten die Pivotick gebruiken

Pivotick helpt de community bij het verkennen van verbonden gegevens via dreigingsinformatie, kwetsbaarheidsonderzoek en veiligheidsonderzoek. Ontdek de projecten vermeld in onze communityshowcase:

Project	Wat het doet
Regelzet	Ontdek, deel en beheer de detectieregels voor cyberbeveiliging.
CTI transmuteren	Converteer informatie over cyberdreigingen tussen MISP- en STIX-formaten.
CPE-editor · Broncode	Zoek en bewerk Common Platform Enumeration (CPE)-vermeldingen.
Kwetsbaarheid opzoeken · CIRCL-instantie	Verzamel, correleer en deel informatie over kwetsbaarheden.
AIL-project	Verzamel, crawl en analyseer ongestructureerde gegevens voor informatie over bedreigingen.
Verkenner van bedreigingsacteurs	Ontdek bedreigingsactoren uit de MISP Galaxy-dataset in uw browser.
FlowIntel	Organiseer beveiligingsonderzoeken, zaken en analistentaken.
CIRCL	Ontdek open-source cyberbeveiligingsprojecten die worden onderhouden door CIRCL.
MISP	Deel, bewaar en correleer informatie over bedreigingen met behulp van open standaarden.

Iets bouwen met Pivotick? We willen het hier graag laten zien! Deel uw project naam, een link en een korte beschrijving van hoe je Pivotick gebruikt uitgave #34. Projecten van elke omvang zijn welkom.

Blader door de projectshowcase in de documentatie.

Aan de slag

Basisgebruik

Pivotick kan worden gebruikt als een moderne JavaScript-module of rechtstreeks in de browser via een scripttag.

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

Installatie

npm install pivotick

1. Gebruik een GitHub-release (geen build vereist)

Als u het project niet zelf wilt bouwen, download dan de nieuwste release van GitHub.

Stappen:

1. Ga naar de Releases-pagina van de repository
2. Download de nieuwste dist-bundel
3. Pak het uit in uw project

Je zou bestanden moeten krijgen zoals:

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

Gebruik ze dan afhankelijk van uw omgeving:

ES-module (aanbevolen)

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. Bouwen vanuit de broncode (aanbevolen voor ontwikkeling)

Gebruik dit als u volledige controle over de bibliotheek wilt of deze wilt wijzigen.

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

Na het bouwen zijn de gecompileerde bestanden beschikbaar in:

dist/

Afhankelijk van uw omgeving kunt u ze vervolgens rechtstreeks importeren:

ES-module

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

Browser bouwen

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

Styling

Pivotick wordt geleverd met standaardstijlen in pivotick.css:

Je kunt het uiterlijk op twee manieren aanpassen:

• Gebruik de ingebouwde klassen van Pivotick.
• Stijlen overschrijven met CSS variabelen.

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

.pvt-node circle {
  fill: cyan;
}

Documenten en API-referentie

• Volledige documentatie: https://pivotick.github.io/Pivotick/
• Getypte API-referentie: https://pivotick.github.io/Pivotick/api/html/classes/Pivotick.html

Projectscripts

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)

Bijdragen

1. Maak een filiaal
2. Voer npm run build en npm run lint uit
3. Open een pull-request met een beknopte samenvatting van gedrag en API-wijzigingen
4. Houd PR’s gefocust en klein