pivotick v3.0.0

Pivotick

Pivotick は、D3 フォースシミュレーションに基づいて構築された、ハッキング可能な TypeScript グラフ視覚化ライブラリです。インタラクティブなコントロール、フォースシミュレーション、ツリーレイアウトのサポート、およびサイドバー、データテーブル、コンテキストメニュー、ツールヒントなどのオプションの UI 要素を備えた有向グラフまたは無向グラフをレンダリングします。

また、その名前のとおり、ピボット は、データが存在する場所からさらにグラフを取得し、結果をキャンバスにドロップするのではなく優先順位付けする候補としてステージングし、キャンバスに保持されているすべての元に戻す履歴を使用して、保存したものを書き戻すことができます。

Pivotick フル UI

コア機能

有向グラフと無向グラフのレンダリング
ピボット - キャンバス上の内容に対してエンリッチメントを実行し、ドックペインで結果を優先順位付けし、保持するもののみを取り込みます
ピボットの結果を元のシステムに保存し、何が交差したか、何が交差していないかの台帳を作成します。
キャンバスに保持されている内容 (取り込み、削除、非表示、手描き要素) を 1 つのタイムラインとして元に戻したりやり直したりできます。
来歴: すべてのノードとエッジはどのソースがそれを保証しているかを知っており、1 つのソースの貢献を削除することができます。
オプションのワーカーサポートを備えた力ベースのシミュレーション
データによって推論または宣言された階層を使用したツリー/階層レイアウトのサポート
力のレイアウトを自動調整、または物理フライアウトから手動で調整
キャンバスの下にドッキングされたデータテーブル。1 つの選択範囲をキャンバスとサイドバーと共有します。
ミニマップ、マルチキーフィルタリング凡例、および宣言型フィルタパネル
エッジレイヤー - 種類ごとにキー設定され、種類ごとにスタイル設定され、グラフを移動せずにオン/オフが切り替えられるエッジ
さまざまな UI モード (full、light、viewer、static)
構成可能なノード/エッジスタイル、ラベル、リムバッジ、およびコールバック
インタラクティブな編集 — 検証フックとエンリッチメントフックを使用したノード編集とエッジ作成 (ドラッグまたはクリック)
左側のレールに独自のモードを含むカスタム UI を追加するための拡張可能なプラグイン API

Pivotick を使用したプロジェクト

Pivotick は、コミュニティが脅威インテリジェンス全体にわたって接続されたデータを探索するのに役立ちます。脆弱性調査とセキュリティ調査。にリストされているプロジェクトを発見してください私たちのコミュニティショーケース:

プロジェクト	何をするのか
ルールゼット	サイバーセキュリティ検出ルールを探索、共有、管理します。
CTI変換	サイバー脅威インテリジェンスを MISP 形式と STIX 形式の間で変換します。
CPEエディタ · ソースコード	Common Platform Enumeration (CPE) エントリを検索および編集します。
脆弱性検索 · CIRCL インスタンス	脆弱性情報を収集、関連付け、共有します。
AILプロジェクト	脅威インテリジェンスのために非構造化データを収集、クロール、分析します。
脅威アクターエクスプローラー	ブラウザーで MISP 銀河データセットから脅威アクターを探索します。
FlowIntel	セキュリティ調査、ケース、アナリストのタスクを整理します。
サークル	CIRCL が管理するオープンソースのサイバーセキュリティプロジェクトをご覧ください。
ミス	オープンスタンダードを使用して脅威インテリジェンスを共有、保存、関連付けます。

Pivotick? で何かを構築することをここで紹介したいと思います。プロジェクトを共有する名前、リンク、および Pivotick の使用方法の簡単な説明第34号。あらゆる規模のプロジェクトを歓迎します。

ドキュメントのプロジェクト紹介をご覧ください。

はじめに

基本的な使い方

Pivotick は、最新の JavaScript モジュールとして、またはスクリプトタグを介してブラウザで直接使用できます。

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

インストール

bash

npm install pivotick

1. GitHub リリースを使用します (ビルドは必要ありません)

自分でプロジェクトをビルドしたくない場合は、GitHub から最新リリースをダウンロードしてください。

手順:

リポジトリの「リリース」ページに移動します。
最新の dist バンドルをダウンロードする
プロジェクトに抽出します

次のようなファイルを取得する必要があります。

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

次に、環境に応じてそれらを使用します。

ES モジュール (推奨)

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

ブラウザ (IIFE / UMD)

html

<!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. ソースからビルドする (開発に推奨)

ライブラリを完全に制御したい場合、またはライブラリを変更する必要がある場合は、これを使用します。

bash

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

ビルド後、コンパイルされたファイルは次の場所で利用可能になります。

dist/

その後、環境に応じてそれらを直接インポートできます。

ESモジュール

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

ブラウザのビルド

html

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

スタイリング

Pivotick には、pivotick.css に含まれるデフォルトのスタイルが付属しています。

外観は次の 2 つの方法でカスタマイズできます。

Pivotick の組み込みクラスを使用します。
CSS 変数を使用してスタイルをオーバーライドします。

css

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

.pvt-node circle {
  fill: cyan;
}

ドキュメントと API リファレンス

完全なドキュメント: https://pivotick.github.io/Pivotick/
型付き API リファレンス: https://pivotick.github.io/Pivotick/api/html/classes/Pivotick.html

プロジェクトスクリプト

bash

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)

貢献する

ブランチを作成する
npm run build と npm run lint を実行します
動作と API 変更の簡潔な概要を含むプルリクエストを開きます
PR は焦点を絞って小規模に保つ

Pivotick ​

コア機能 ​

Pivotick を使用したプロジェクト ​

はじめに ​

基本的な使い方 ​

インストール ​

1. GitHub リリースを使用します (ビルドは必要ありません) ​

2. ソースからビルドする (開発に推奨) ​

スタイリング ​

ドキュメントと API リファレンス ​

プロジェクトスクリプト ​

貢献する ​

Pivotick

コア機能

Pivotick を使用したプロジェクト

はじめに

基本的な使い方

インストール

1. GitHub リリースを使用します (ビルドは必要ありません)

2. ソースからビルドする (開発に推奨)

スタイリング

ドキュメントと API リファレンス

プロジェクトスクリプト

貢献する