25.8 كيلوبايت·بلا اعتماديات·MIT

مكتبة المخططات التي يستطيع وكيل الذكاء الاصطناعي قراءتها

Name: Arincen Charts
Author: Arincen

أخف، أسرع، أذكى

محرك رسم مخططات على الـ canvas بلا أي اعتماديات. ضعه في موقعك ليستطيع مستخدموك السؤال عن المخطط — فيقرأ الوكيل ما هو معروض على الشاشة ويرسم الإجابة عليه.

التوثيق الشيفرة المصدرية

chart.js

import { createChart, AreaSeries } from '@arincen/charts';

const chart = createChart(el, { autoSize: true });

chart.addSeries(AreaSeries).setData(data);
chart.toText();   // and a model can read it

25.8كيلوبايت: مضغوطاً، النسخة الخفيفة
0: اعتماديات
701: اختبارًا، جميعها تعمل على هذه النسخة
3: دوال لقراءة المخطط وتصويره والتعليق عليه

الجزء الذي لا يملكه أحد غيرنا

عين عملائك ويدهم على المخطط

كل مكتبات المخططات ترسم للعين البشرية. أما ما عداها — نموذج ذكاء اصطناعي، قارئ شاشة، مهمة تنبيهات — فعليه أن ينبش في تفاصيل السلاسل الداخلية ويعيد كتابة الملخّص نفسه، بشكل رديء، في كل مشروع. هذه المكتبة تقول ما تعرضه بالكلمات، وتستقبل الإجابة على هيئة علامات ومستويات ومناطق مظللة.

يعمل هنا، على هذه الصفحة. بلا مفتاح، وبلا طلب، ولا شيء يغادر متصفحك.

chart.toText()

chart.annotate()

// 1. the chart says what it is showing
const description = chart.toText();

// 2. your model reads it
const answer = await ask(`${description}

  Name the periods worth a second look. Reply as JSON:
  [{ "from": <unix>, "to": <unix>, "text": "<six words>" }]`);

// 3. the answer goes back on the chart
chart.annotate(JSON.parse(answer));

تطبيقك يملك البيانات أصلًا. وهذا الأمر لا علاقة له بالبيانات.

لديك السجلات، ولديك نموذجك الخاص — اسأله عمّا حدث في مارس الماضي وسيجيبك. ما لا يملكه أيٌّ منهما هو المخطط نفسه: أين يشير القارئ، وأي القراءات معروضة على الشاشة الآن، وطريقة لإعادة الإجابة إلى حيث ينظر. هذا هو الجزء الذي يكتبه أحدهم يدويًا لكل مخطط وفي كل مشروع، وهو ما تقوم به هذه المكتبة.

«لماذا قفز السعر هنا؟»: قاعدة بياناتك لا تعرف أين تقع «هنا». إحداثيات البكسل تتحول إلى وقت وسعر عبر مقياس يتغيّر مع كل تكبير. chart.pointer()
«كبّر على هبوط مارس.»: هذه ليست جملة تُجاب، بل إجراء يُنفَّذ. الوكيل يحرّك العرض الذي ينظر إليه القارئ. chart.timeScale().setVisibleRange()
«ارسم خط الاتجاه بين هذين القاعين.»: النموذج قادر على حساب المستويات. لكن يبقى على أحدهم أن يرسم الخط على الـ canvas بالإحداثيات الصحيحة — وأن يزيل ذلك الخط وحده حين تطلب الجملة التالية ذلك. chart.annotate()

وهي أقل تكلفة في الغالب: وصف ما هو معروض على الشاشة يساوي بضع عشرات من الرموز، أما القراءات العشرة آلاف خلفه فلا. النموذج يقرّر ما يحتاجه فعلًا ثم يطلب تلك السجلات. وليست هذه قاعدة مطلقة — فالحساب على آلاف القراءات يحتاج إلى القراءات — لكن التسع آلاف شمعة التي لم يسأل عنها أحد لا داعي لإرسالها أبدًا.

كل واحدة منها تعمل الآن على هذه الصفحة

أربعة مخططات وأربع دوال. أشِر إلى الأول، وحرّك عرض الثاني، وارسم على الثالث ثم أزل خطًا واحدًا منه، ودع الرابع يعثر على كل مخطط في هذه الصفحة تمامًا كما يفعل الوكيل.

chart.pointer()أشِر إلى المخطط

chart.timeScale().setVisibleRange()اضغط زرًا

chart.annotate()اضغط زرًا

window.arincenChartsاضغط زرًا

يصف ولا يفسّر

لا "صاعد"، ولا "مقاومة"، ولا حكم على الاتجاه. الاستنتاج بشأن أموال غيرك من حقه هو — ولدينا اختبار يُفشل البناء إذا ظهرت أي من هذه الكلمات في المخرجات.

يصف ما هو معروض على الشاشة

ويقول ذلك صراحةً. النموذج الذي يُخبَر أن القمة 150 على مخطط يحمل خمس سنوات سيقول شيئًا خاطئًا عن السنوات الأربع الأخرى، لذلك يُذكر النطاق المعروض بوضوح.

الدالة نفسها تخدم قارئ الشاشة

هو أوضح وصف نصي لمخطط على الإطلاق، وهذا سبب ثانٍ لوجوده. التنقّل الكامل بلوحة المفاتيح ومنطقة إعلان حيّة تأتيان في النسخة نفسها.

واحد وعشرون مخططًا، كلها تعمل

كل ما ترسمه المكتبة، يُرسم الآن أمامك

ليست صورًا ثابتة. كل مربّع بالأسفل مخطط حيّ من الملف نفسه الذي حمّلته هذه الصفحة، وكل واحد منها أصغر عرض صادق لفكرة واحدة.

الشموع اليابانية

أجسام بحواف دائرية، وفتائل تُرسم على حدة، وأخضرنا وأحمرنا نحن لا ألوان غيرنا.

مساحة، بتعبئة تمتد إلى المحاور

تأخذ حواف المحاور التدرّج نفسه، فيبدو المخطط كتلة واحدة بدل وسط ملوّن بين شريطين رماديين.

خطوط، بالعدد الذي تريد

سعر ومتوسطه لعشر فترات. مرّر فوق أحدها فتتراجع البقية.

الأساس

أخضر فوق المستوى الذي تحدده، وأحمر تحته، مع تعبئة في الاتجاهين.

أعمدة الافتتاح والإغلاق والقمة والقاع

أقدم تدوين على مخطط الأسعار، وما زال أكثفها معلومات.

حجم التداول

مدرّج تكراري ملوّن لكل عمود، ومنسّق بالآلاف والملايين دون أن تطلب.

لوحتان، ومحور زمني واحد

السعر أعلى، والحجم أسفل، ويتشاركان مؤشر التقاطع. اسحب الفاصل — عليه مقبض.

السعر يمينًا، والحجم يسارًا

سلسلتان على مقياسين، كل واحدة تُقاس بأرقامها هي.

أداتان، مقياس واحد

الوضع النسبي المئوي، حتى يمكن مقارنة سهم بأربعين دولارًا بآخر بأربعة آلاف.

مبدّل الفترات

اضغط أيًّا منها. تُستبدل البيانات ويُعاد ضبط العرض — بلا إعادة بناء، وبلا وميض، وبلا مخطط ثانٍ.

شراء وبيع وهدف

نقاط الدخول والخروج والمستوى الذي تراقبه. العلامات محاطة بلون الصفحة لتبقى واضحة فوق أي شمعة.

اسمك عليه

علامة مائية بنصّك أنت، خلف السلاسل ولا تحجب شيئًا.

نوع مخطط لا نشحنه معها

نطاق متحرك بين القمة والقاع، يرسمه راسم من كتابتك. السلاسل المخصّصة تستبدل الرسم بالكامل.

تلميح تفاعلي بلا كتابته

مرّر المؤشر فوقه. لا أحد غيرنا يمنحك هذا — كل مشروع يكتب الصندوق العائم نفسه بيده.

ساعات إغلاق السوق

ثلاثة أيام بتفاصيل اليوم الواحد. التظليل يأتي من ساعات التداول التي تحددها أنت ومن قاعدة المناطق الزمنية في المتصفح نفسه.

تعليقات، من أي مصدر

منطقة ونقطة، مرسومتان من الصيغة التي يعيدها النموذج — أو من تحليلك أنت.

مخطط فاتح على صفحة داكنة

كلمة واحدة: theme. تسع قيم موزّعة على خمسة فروع في شجرة الخيارات، منها القيمة التي يغفل عنها الجميع.

لا شيء ليُرسم، ويقولها

بدل ترقيم محور من 0.00 إلى 1.00 فوق شبكة فارغة، وهو مخطط يذكر أسعارًا لا يملكها.

ثلاثة مخططات مصغّرة داخل جدول

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

مباشر

بث حيّ

قراءة كل ثانية عبر update()، مع نبض عند آخر سعر — ما لم يطلب القارئ تقليل الحركة.

الأرقام التي خلفه

‏toCSV() تعطيك القراءات، و‏toImage() تعطيك الصورة. أول سطرين مطبوعان على المخطط.

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

ميزة بميزة

بعض ما لا تجده إلا هنا

كل سطر هنا شيء لا تملك له مكتبات المخططات التي فحصناها أي واجهة برمجية — بما فيها المكتبة التي ينتقل منها أغلب الفرق، وقد قرأنا تعريفات أنواعها المنشورة بدل الاعتماد على الذاكرة. في أي مكان آخر، كل واحدة من هذه عليك أن تبنيها بنفسك.

الميزةمخططات أرينسنمكتبات أخرى

مخطط يستطيع النموذج قراءته والرسم عليه

‏toText() و‏toImage() و‏annotate(). بلا مزوّد، وبلا مفتاح، وبلا عميل مدمج.

✓—

تصدير الصورة والأرقام

صورة PNG لما هو معروض، وملف CSV للقراءات التي خلفه، بدالة واحدة لكل منهما.

✓—

تلميح يتبع مؤشر التقاطع

لا توجد لديها واجهة تلميحات أصلًا، فيكتب كل مشروع التلميح نفسه بيده.

✓—

دعم لوحة المفاتيح وقارئ الشاشة

الأسهم ومفاتيح الصفحات وHome وEnd، مع الإعلان عن كل حركة. مفعّل افتراضيًا، لأن مخططًا لا يمكن الوصول إليه دون فأرة يحبس أسعاره خلفها.

✓—

الوضع الداكن بكلمة واحدة

يدويًا هو تسع قيم في خمسة فروع من شجرة الخيارات، والقيمة التي يغفل عنها الجميع تجعل السعر تحت المؤشر نصًا داكنًا على بطاقة داكنة.

✓—

مخطط يقول إنه بلا بيانات

بدل ترقيم محور من 0.00 إلى 1.00 فوق شبكة فارغة، وهو مخطط يذكر أسعارًا لا يملكها.

✓—

يخبرك بما هو خاطئ في بياناتك

غير مرتّبة، أو مكرّرة، أو قيمة NaN، أو سعر جاء كنص — تُحصى وتُسمّى، بدل أن يُرسم مخطط ناقص في صمت.

✓—

أعطال الإضافات يُبلَّغ عنها ولا تُبتلع

العنصر الأولي الذي يرمي خطأً يخسر رسمه هو، ويخبرك أي دالة فشلت، بدل أن يختفي وتبقى نافذة الأخطاء فارغة.

✓—

ساعات إغلاق السوق

مظللة من ساعات تحددها أنت ومن قاعدة المناطق الزمنية في المنصة نفسها، فالتوقيت الصيفي لا يحتاج شيئًا من أحد.

✓—

مخطط مصغّر بدالة واحدة

ستة خيارات للمخطط وثلاثة للسلسلة يجب إطفاؤها قبل أن يصير المخطط شكلًا داخل خلية جدول. أو دالة واحدة.

✓—

يحترم تقليل الحركة

نبض آخر سعر والانزلاق بعد السحب السريع يتوقفان عندما يطلب القارئ حركة أقل.

✓—

نص من اليمين إلى اليسار، دون عكس المخطط

التسميات تتبع لغة الواجهة؛ أما الزمن فيبقى من اليسار إلى اليمين، لأن عكس المحور يضع أحدث شمعة في المكان الذي يبحث فيه كل قارئ عن أقدمها.

✓—

وهذه بعضها فقط. الباقي — تلميح يكتب محتواه بنفسه، والعناصر الأولية، والسلاسل المخصّصة، والتسميات من اليمين إلى اليسار، ودمج مئة ألف شمعة — تجده في التوثيق.

نسختان، مصدر واحد

الميزات التي لا تستخدمها ليست موجودة أصلاً

معظم ما تحمله مكتبة المخططات بنيوي، ومعظم الصفحات لا تستخدمه. لا يستطيع الـ bundler حذفه — النواة تشير إليه، ولا شيء يثبت أن صفحتك ذات لوحة واحدة. لذلك يُحذف قبل ذلك، عند بناء المكتبة.

بدّل النسخة وراقب ما يبقى المخطط قادراً على فعله.

✓Line, area, baseline, candlestick, bar and histogram series
✓Crosshair, markers, price lines and primitives
✓Pan, zoom, pinch and axis drag
✓Panes
✓Logarithmic, percentage and indexed-to-100 price scales
✓Left and overlay price scales
✓Custom series
✓Watermarks, touch tracking and kinetic scroll

ليست معطّلة، بل غائبة — الدالة غير معرّفة والشيفرة ليست في الملف.

لماذا نحن

لماذا هذه المكتبة

مخططات أرينسن

25.8 كيلوبايت

lightweight-charts

60 كيلوبايت

شيء غير العين يستطيع قراءته

دالة واحدة تسلّم النموذج ما هو معروض بالضبط، بالكلمات. وأخرى ترسم إجابته على هيئة مناطق ونقاط ومستويات. بلا مفتاح، وبلا عميل مدمج، وبلا مزوّد ترتبط به — والدالة نفسها هي أوضح وصف حصل عليه قارئ شاشة لمخطط يومًا.

صغيرة إلى حد يجعلك تنساها

المخططات عادةً أثقل ما في الصفحة المالية. هذه أصغر من معظم حزم الأيقونات.

لا شيء يحتاج تدقيقاً

بلا اعتماديات إطلاقاً. لا شيء يُحدَّث، ولا شيء تُسجَّل ضده ثغرة، ولا شيء يجرّ خلفه شجرة اعتماديات.

تعمل فعلياً على زيارات حقيقية

كل مخطط في أرينسن مرسوم بها، على النطاقين معًا — صفحات الأدوات، والمحافظ، والمقالات، وتطبيق الجوال، والأدوات القابلة للتضمين.

وسّعها دون أن تنسخها

العناصر الأولية ترسم فوق مخطط يعمل أصلًا. والسلاسل المخصّصة تستبدل الرسم بالكامل. وكلاهما يقبل كائنات عادية، فما تحتاجه لاحقًا تكتبه أنت ولا تنتظر موافقتنا.

ابدأ

ابدأ من هنا

أمر واحد، أو وسم script بلا أي خطوة بناء.

يعمل مع

ReactVueSvelteAngularSolidAstroوسم script فقطواجهات WebView في iOS وأندرويد

اقرأ التوثيق npm الشيفرة المصدرية

import { createChart, AreaSeries } from '@arincen/charts';

const chart = createChart(document.getElementById('chart'), {
    autoSize: true,
});

const series = chart.addSeries(AreaSeries, {
    lineColor: '#db2777',
});

series.setData(data);
chart.timeScale().fitContent();