pivotick v3.0.0

---

Pivotick

Pivotick عبارة عن مكتبة تصور رسومية TypeScript قابلة للاختراق مبنية على أعلى D3 محاكاة القوة. فهو يعرض رسومًا بيانية موجهة أو غير موجهة باستخدام عناصر تحكم تفاعلية ومحاكاة القوة ودعم تخطيط الشجرة وعناصر واجهة المستخدم الاختيارية مثل الشريط الجانبي وجدول البيانات وقوائم السياق وتلميحات الأدوات.

كما أنه يفعل الشيء الذي سُمي باسمه: pivot يجلب المزيد من الرسم البياني من أي مكان توجد فيه بياناتك، وينظم النتائج كمرشحين تقوم بفرزهم بدلاً من إسقاطهم على اللوحة القماشية، ويمكنه إعادة كتابة ما تحتفظ به - مع سجل التراجع عن كل ما تحتويه اللوحة القماشية.

الميزات الأساسية

• عرض الرسم البياني الموجه وغير الموجه
• المحاور - إجراء عملية إثراء مقابل ما هو موجود على اللوحة القماشية، وفرز النتائج في جزء الإرساء، واستيعاب ما تحتفظ به فقط
• حفظ نتائج المحور مرة أخرى إلى النظام الذي أتت منه، مع سجل لما تم تجاوزه وما لم يتم تجاوزه
• التراجع والإعادة عما تحتويه اللوحة القماشية - الاستيعاب والحذف والإخفاء والعناصر المرسومة يدويًا - كخط زمني واحد
• المصدر: كل عقدة وحافة تعرف المصادر التي تضمنها، ويمكن إسقاط مساهمة مصدر واحد
• محاكاة تعتمد على القوة مع دعم اختياري للعمال
• دعم تخطيط الشجرة/التسلسل الهرمي، مع استنتاج التسلسل الهرمي أو الإعلان عنه بواسطة البيانات
• تخطيط قوة الضبط الذاتي، أو ضبطه يدويًا من القائمة المنبثقة للفيزياء
• تم إرساء جدول بيانات أسفل اللوحة القماشية، ومشاركة تحديد واحد مع اللوحة القماشية والشريط الجانبي
• Minimap، وسيلة إيضاح تصفية متعددة المفاتيح ولوحة تصفية تعريفية
• طبقات الحواف — يتم تحديد الحواف حسب النوع، وتصميمها حسب النوع، وتشغيلها وإيقاف تشغيلها دون تحريك الرسم البياني
• أوضاع مختلفة لواجهة المستخدم (full، light، viewer، static)
• أنماط العقدة/الحافة القابلة للتكوين، والتسميات، وشارات الحافة، وعمليات الاسترجاعات
• التحرير التفاعلي - تحرير العقدة وإنشاء الحواف (السحب أو النقر) مع خطافات التحقق والإثراء
• واجهة برمجة التطبيقات الإضافية القابلة للتوسيع لإضافة واجهة مستخدم مخصصة، بما في ذلك الوضع الخاص بك على الشريط الأيسر

المشاريع التي تستخدم Pivotick

Pivotick يساعد المجتمع على استكشاف البيانات المتصلة عبر معلومات التهديدات، أبحاث الضعف والتحقيقات الأمنية. اكتشف المشاريع المدرجة في عرض مجتمعنا:

مشروع	ماذا يفعل
قواعد	استكشاف ومشاركة وإدارة قواعد الكشف عن الأمن السيبراني.
تحويل CTI	تحويل معلومات التهديدات السيبرانية بين تنسيقات MISP وSTIX.
محرر CPE · رمز المصدر	بحث وتحرير إدخالات تعداد النظام الأساسي المشترك (CPE).
البحث عن الثغرات الأمنية · مثيل CIRCL	جمع وربط وتبادل معلومات الضعف.
مشروع AIL	جمع البيانات غير المنظمة والزحف إليها وتحليلها لمعلومات التهديدات.
مستكشف التهديد	اكتشف الجهات الفاعلة التي تهدد التهديد من مجموعة بيانات MISP galaxy في متصفحك.
FlowIntel	تنظيم التحقيقات الأمنية والقضايا ومهام المحللين.
سيركل	اكتشف مشاريع الأمن السيبراني مفتوحة المصدر التي تديرها CIRCL.
MISP	مشاركة وتخزين وربط المعلومات المتعلقة بالتهديدات باستخدام معايير مفتوحة.

قم ببناء شيء باستخدام 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 }
    ]
  }
})

التثبيت

npm install pivotick

1. استخدم الإصدار GitHub (لا يلزم إنشاء)

إذا كنت لا ترغب في بناء المشروع بنفسك، قم بتنزيل أحدث إصدار من GitHub.

الخطوات:

1. انتقل إلى صفحة الإصدارات الخاصة بالمستودع
2. قم بتنزيل أحدث حزمة dist
3. استخرجه في مشروعك

يجب أن تحصل على ملفات مثل:

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)

<!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. البناء من المصدر (موصى به للتطوير)

استخدم هذا إذا كنت تريد التحكم الكامل في المكتبة أو تحتاج إلى تعديلها.

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'

تصميم المتصفح

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

التصميم

Pivotick يأتي مع الأنماط الافتراضية المضمنة في pivotick.css:

يمكنك تخصيص المظهر بطريقتين:

• استخدم Pivotick الفصول المدمجة.
• تجاوز الأنماط باستخدام المتغيرات CSS.

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

.pvt-node circle {
  fill: cyan;
}

مرجع المستندات وواجهة برمجة التطبيقات

• التوثيق الكامل: https://pivotick.github.io/Pivotick/
• مرجع واجهة برمجة التطبيقات المكتوبة: https://pivotick.github.io/Pivotick/api/html/classes/Pivotick.html

مخطوطات المشروع

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)

المساهمة

1. إنشاء فرع
2. تشغيل npm run build و npm run lint
3. افتح طلب سحب مع ملخص موجز للسلوك وتغييرات واجهة برمجة التطبيقات
4. حافظ على تركيز العلاقات العامة وصغر حجمها