pivotick v3.0.0

---

Pivotick

Pivotick est une bibliothèque de visualisation de graphiques TypeScript piratable construite sur les simulations de force D3. Il restitue des graphiques orientés ou non avec des contrôles interactifs, une simulation de force, une prise en charge de la disposition en arborescence et des éléments d'interface utilisateur facultatifs tels qu'une barre latérale, un tableau de données, des menus contextuels et des info-bulles.

Il fait également ce pour quoi il porte son nom : un pivot récupère plus de graphiques partout où se trouvent vos données, met en scène les résultats en tant que candidats que vous triez plutôt que de les déposer sur le canevas, et peut réécrire ce que vous conservez - avec un historique d'annulation sur tout ce que contient le canevas.

Fonctionnalités principales

• Rendu graphique dirigé et non orienté
• Pivots : exécutez un enrichissement par rapport à ce qui se trouve sur le canevas, triez les résultats dans un volet Dock et ingérez uniquement ce que vous conservez.
• Sauvegarder les résultats d'un pivot dans le système d'où ils proviennent, avec un registre de ce qui a été croisé et de ce qui ne l'a pas été
• Annulez et refaites ce que contient le canevas (ingères, suppressions, masquages et éléments dessinés à la main) comme une seule chronologie.
• Provenance : chaque nœud et bord sait quelles sources en sont garantes, et la contribution d'une source peut être supprimée
• Simulation basée sur la force avec assistance optionnelle aux travailleurs
• Prise en charge de la disposition arborescente/hiérarchique, avec la hiérarchie déduite ou déclarée par les données
• Disposition des forces à réglage automatique ou réglage manuel à partir du menu déroulant Physique
• Un tableau de données ancré sous le canevas, partageant une sélection avec le canevas et la barre latérale
• Minimap, une légende de filtrage multi-clés et un panneau de filtre déclaratif
• Couches de bord : bords saisis par type, stylisés par type et activés et désactivés sans déplacer le graphique
• Différents modes d'interface utilisateur (full, light, viewer, static)
• Styles de nœuds/bords, étiquettes, badges de jante et rappels configurables
• Édition interactive — édition de nœuds et création de bords (glisser ou cliquer) avec des crochets de validation et d'enrichissement
• API de plugin extensible pour ajouter une interface utilisateur personnalisée, y compris votre propre mode sur le rail de gauche

Projets utilisant Pivotick

Pivotick aide la communauté à explorer des données connectées en renseignement sur les menaces, en recherche de vulnérabilités et en investigation de sécurité. Découvrez les projets répertoriés dans notre vitrine communautaire :

Projet	Ce que ça fait
Rulezet	Explorer, partager et gérer des règles de détection en cybersécurité.
CTI Transmute	Convertir le renseignement sur les cybermenaces entre les formats MISP et STIX.
CPE Editor · Code source	Rechercher et modifier des entrées Common Platform Enumeration (CPE).
Vulnerability-Lookup · Instance du CIRCL	Collecter, corréler et partager des informations sur les vulnérabilités.
AIL Project	Collecter, explorer et analyser des données non structurées pour le renseignement sur les menaces.
Threat Actor Explorer	Explorer dans le navigateur les acteurs de la menace du jeu de données MISP galaxy.
FlowIntel	Organiser les investigations de sécurité, les dossiers et les tâches des analystes.
CIRCL	Découvrir les projets open source de cybersécurité maintenus par le CIRCL.
MISP	Partager, stocker et corréler le renseignement sur les menaces avec des standards ouverts.

Vous construisez quelque chose avec Pivotick ? Nous serions ravis de le présenter ici ! Partagez le nom de votre projet, un lien et une courte description de votre usage de Pivotick dans l’issue #34. Les projets de toutes tailles sont les bienvenus.

Parcourez la vitrine des projets dans la documentation.

Bien démarrer

Utilisation de base

Pivotick peut être utilisé soit comme un module JavaScript moderne, soit directement dans le navigateur via une balise 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 }
    ]
  }
})

Installation

npm install pivotick

1. Utilisez une version GitHub (aucune build requise)

Si vous ne souhaitez pas créer le projet vous-même, téléchargez la dernière version depuis GitHub.

Étapes :

1. Accédez à la page Releases du référentiel
2. Téléchargez le dernier bundle de distribution
3. Extrayez-le dans votre projet

Vous devriez obtenir des fichiers comme :

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

Utilisez-les ensuite en fonction de votre environnement :

Module ES (recommandé)

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

Navigateur (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. Construire à partir des sources (recommandé pour le développement)

Utilisez-le si vous souhaitez un contrôle total sur la bibliothèque ou si vous devez la modifier.

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

Après la construction, les fichiers compilés seront disponibles dans :

dist/

Vous pouvez ensuite les importer directement en fonction de votre environnement :

Module ES

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

Construction du navigateur

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

Styles

Pivotick est livré avec les styles par défaut inclus dans pivotick.css :

Vous pouvez personnaliser l'apparence de deux manières :

• Utilisez les classes intégrées de Pivotick.
• Remplacez les styles en utilisant les variables CSS.

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

.pvt-node circle {
  fill: cyan;
}

Documentation et référence de l’API

• Documentation complète : https://pivotick.github.io/Pivotick/
• Référence API tapée : https://pivotick.github.io/Pivotick/api/html/classes/Pivotick.html

Scripts du projet

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)

Contribuer

1. Créer une succursale
2. Exécutez npm run build et npm run lint
3. Ouvrir une pull request avec un résumé concis du comportement et des modifications de l'API
4. Gardez les PR concentrés et petits