visualifyjs 2.5.3-2.dev → 3.0.0

package/src/i18n/index.js

@@ -0,0 +1,169 @@
+/**
+ * @fileoverview Internationalization (i18n) module for Visualify.js
+ * @module i18n
+ *
+ * Provides multi-language support with:
+ * - 4+ languages (English, Chinese, Spanish, German)
+ * - RTL (Right-to-Left) layout support
+ * - Locale-aware formatting (dates, numbers, currency)
+ * - Language detection (browser, URL parameter, config)
+ * - Manual language override
+ */
+
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+// Import translation files
+import en from './locales/en.json';
+import zh from './locales/zh.json';
+import es from './locales/es.json';
+import de from './locales/de.json';
+import ar from './locales/ar.json';
+import he from './locales/he.json';
+
+// Translation resources
+const resources = {
+  en: { translation: en },
+  zh: { translation: zh },
+  es: { translation: es },
+  de: { translation: de },
+  ar: { translation: ar },
+  he: { translation: he },
+};
+
+// RTL (Right-to-Left) languages
+const RTL_LANGUAGES = ['ar', 'he'];
+
+/**
+ * Check if a language is RTL
+ * @param {string} lng - Language code
+ * @returns {boolean} True if RTL language
+ */
+export function isRTLLanguage(lng) {
+  return RTL_LANGUAGES.includes(lng);
+}
+
+/**
+ * Get the current text direction
+ * @returns {string} 'rtl' or 'ltr'
+ */
+export function getTextDirection() {
+  const lng = i18n.language || 'en';
+  return isRTLLanguage(lng) ? 'rtl' : 'ltr';
+}
+
+/**
+ * Set the HTML dir attribute based on current language
+ */
+export function setDocumentDirection() {
+  const dir = getTextDirection();
+  if (typeof document !== 'undefined') {
+    document.documentElement.setAttribute('dir', dir);
+    document.documentElement.setAttribute('lang', i18n.language);
+  }
+}
+
+/**
+ * Initialize i18n with configuration
+ * @param {Object} config - i18n configuration
+ * @param {string} config.locale - Locale setting ('auto' or specific language code)
+ * @param {string} config.fallbackLocale - Fallback locale
+ * @returns {Object} i18n instance
+ */
+export function initializeI18n(config = {}) {
+  const {
+    locale = 'auto',
+    fallbackLocale = 'en',
+  } = config;
+
+  const detectionOptions = locale === 'auto' ? {
+    order: ['querystring', 'localStorage', 'navigator', 'htmlTag'],
+    lookupQuerystring: 'lang',
+    lookupLocalStorage: 'visualify-language',
+    caches: ['localStorage'],
+  } : {
+    order: ['localStorage'],
+    lookupLocalStorage: 'visualify-language',
+    caches: ['localStorage'],
+  };
+
+  i18n
+    .use(LanguageDetector)
+    .use(initReactI18next)
+    .init({
+      resources,
+      debug: false, // Suppress default logger warnings in production
+      lng: locale === 'auto' ? undefined : locale,
+      fallbackLng: fallbackLocale,
+      detection: detectionOptions,
+      interpolation: {
+        escapeValue: false, // React already escapes values
+        prefix: '{',
+        suffix: '}',
+      },
+      react: {
+        useSuspense: false,
+      },
+    });
+
+  // Set initial document direction
+  setDocumentDirection();
+
+  // Listen for language changes to update direction
+  i18n.on('languageChanged', setDocumentDirection);
+
+  return i18n;
+}
+
+/**
+ * Change the current language
+ * @param {string} lng - Language code
+ */
+export function changeLanguage(lng) {
+  if (resources[lng]) {
+    i18n.changeLanguage(lng);
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem('visualify-language', lng);
+    }
+  } else {
+    console.warn(`[i18n] Language '${lng}' not available. Falling back to 'en'.`);
+    i18n.changeLanguage('en');
+  }
+}
+
+/**
+ * Get available languages
+ * @returns {Array<{code: string, name: string, nativeName: string, rtl: boolean}>}
+ */
+export function getAvailableLanguages() {
+  return [
+    { code: 'en', name: 'English', nativeName: 'English', rtl: false },
+    { code: 'zh', name: 'Chinese', nativeName: '中文', rtl: false },
+    { code: 'es', name: 'Spanish', nativeName: 'Español', rtl: false },
+    { code: 'de', name: 'German', nativeName: 'Deutsch', rtl: false },
+    { code: 'ar', name: 'Arabic', nativeName: 'العربية', rtl: true },
+    { code: 'he', name: 'Hebrew', nativeName: 'עברית', rtl: true },
+  ];
+}
+
+/**
+ * Translate a key with interpolation
+ * @param {string} key - Translation key
+ * @param {Object} options - Interpolation options
+ * @returns {string} Translated string
+ */
+export function t(key, options = {}) {
+  return i18n.t(key, options);
+}
+
+/**
+ * Get current language
+ * @returns {string} Current language code
+ */
+export function getCurrentLanguage() {
+  return i18n.language || 'en';
+}
+
+// Export the i18n instance as default
+export default i18n;

package/src/i18n/locales/ar.json

@@ -0,0 +1,137 @@
+{
+  "charts": {
+    "scatter": "مخطط النقاط المبعثرة",
+    "scatter3d": "مخطط النقاط المبعثرة ثلاثي الأبعاد",
+    "bar": "مخطط الأعمدة",
+    "bar3d": "مخطط الأعمدة ثلاثي الأبعاد",
+    "line": "مخطط الخط",
+    "line3d": "مخطط الخط ثلاثي الأبعاد",
+    "pie": "مخطط دائري",
+    "surface3d": "سطح ثلاثي الأبعاد",
+    "violin": "مخطط الكمان",
+    "dotplot": "مخطط النقاط",
+    "visium": "رسم Visium",
+    "timeline": "الخط الزمني"
+  },
+  "ui": {
+    "loading": "جاري التحميل...",
+    "error": "خطأ",
+    "retry": "إعادة المحاولة",
+    "export": "تصدير",
+    "zoomIn": "تكبير",
+    "zoomOut": "تصغير",
+    "resetZoom": "إعادة تعيين التكبير",
+    "fullscreen": "ملء الشاشة",
+    "exitFullscreen": "خروج من ملء الشاشة",
+    "download": "تحميل",
+    "downloadImage": "تحميل الصورة",
+    "downloadData": "تحميل البيانات",
+    "close": "إغلاق",
+    "cancel": "إلغاء",
+    "confirm": "تأكيد",
+    "save": "حفظ",
+    "edit": "تحرير",
+    "delete": "حذف",
+    "add": "إضافة",
+    "remove": "إزالة",
+    "search": "بحث",
+    "filter": "تصفية",
+    "sort": "فرز",
+    "refresh": "تحديث",
+    "settings": "إعدادات",
+    "help": "مساعدة",
+    "about": "حول",
+    "home": "الرئيسية",
+    "back": "رجوع",
+    "next": "التالي",
+    "previous": "السابق",
+    "submit": "إرسال",
+    "apply": "تطبيق",
+    "clear": "مسح",
+    "selectAll": "تحديد الكل",
+    "deselectAll": "إلغاء تحديد الكل",
+    "view": "عرض",
+    "show": "إظهار",
+    "hide": "إخفاء",
+    "expand": "توسيع",
+    "collapse": "طي"
+  },
+  "errors": {
+    "invalidConfig": "تكوين غير صالح",
+    "dataNotFound": "البيانات غير موجودة",
+    "webglNotSupported": "WebGL غير مدعوم في متصفحك",
+    "chartRenderError": "فشل في عرض المخطط",
+    "dataLoadError": "فشل في تحميل البيانات",
+    "networkError": "خطأ في الشبكة. يرجى التحقق من اتصالك",
+    "timeoutError": "انتهت مهلة الطلب",
+    "validationError": "خطأ في التحقق",
+    "unknownError": "حدث خطأ غير معروف",
+    "fileNotFound": "الملف غير موجود",
+    "invalidFormat": "تنسيق ملف غير صالح",
+    "missingRequired": "الخاصية المطلوبة مفقودة",
+    "typeMismatch": "عدم تطابق النوع"
+  },
+  "aria": {
+    "chartDescription": "مخطط {type} يعرض {description}",
+    "dataPoint": "نقطة بيانات: {x}، {y}",
+    "dataPoint3d": "نقطة بيانات: {x}، {y}، {z}",
+    "chartContainer": "حاوية المخطط",
+    "loadingChart": "جاري تحميل بيانات المخطط",
+    "chartLoaded": "تم تحميل المخطط بنجاح",
+    "navigation": "التنقل",
+    "mainContent": "المحتوى الرئيسي",
+    "complementary": "معلومات تكميلية",
+    "search": "إدخال البحث",
+    "dataTable": "جدول البيانات"
+  },
+  "cli": {
+    "welcome": "مرحباً بك في Visualify CLI",
+    "initProject": "تهيئة مشروع Visualify جديد",
+    "startDev": "بدء خادم التطوير",
+    "buildProject": "بناء للإنتاج",
+    "serveDocs": "خدمة الوثائق",
+    "portalMode": "بدء وضع البوابة",
+    "configNotFound": "ملف التكوين غير موجود. قم بتشغيل 'visualify init' أولاً.",
+    "invalidCommand": "أمر غير صالح",
+    "serverStarted": "تم بدء الخادم في {url}",
+    "serverStopped": "تم إيقاف الخادم",
+    "building": "جاري بناء المشروع...",
+    "buildComplete": "اكتمل البناء",
+    "buildError": "فشل البناء",
+    "watchingFiles": "مراقبة تغييرات الملفات...",
+    "fileChanged": "تم تغيير الملف: {file}",
+    "reloading": "جاري إعادة التحميل...",
+    "tip": "نصيحة: {message}",
+    "example": "مثال: {command}"
+  },
+  "validation": {
+    "required": "الخاصية '{property}' مطلوبة",
+    "type": "يجب أن تكون الخاصية '{property}' من نوع {expected}، تم استلام {received}",
+    "enum": "يجب أن تكون الخاصية '{property}' واحدة من: {values}",
+    "minLength": "لا يمكن أن تكون الخاصية '{property}' فارغة",
+    "format": "الخاصية '{property}' لها تنسيق غير صالح",
+    "additionalProperties": "خاصية غير معروفة '{property}'",
+    "version": "عيّن الإصدار إلى '3.0.0'",
+    "mode": "استخدم واحداً من: 'docs'، 'portal'، 'hybrid'، 'auto'",
+    "defaultLibrary": "استخدم إما 'echarts' أو 'plotly'"
+  },
+  "format": {
+    "date": "{date, date, medium}",
+    "time": "{time, time, short}",
+    "datetime": "{datetime, date, medium} {datetime, time, short}",
+    "number": "{value, number}",
+    "percent": "{value, number, percent}",
+    "currency": "{value, number, currency}",
+    "bytes": "{value, number, bytes}"
+  },
+  "footer": {
+    "download": "تحميل:",
+    "copyright": "{name} حقوق النشر © {year} مدعوم بواسطة {app}@{version}",
+    "references": "المراجع"
+  },
+  "header": {
+    "viewSource": "عرض المصدر على GitHub",
+    "navigation": "التنقل",
+    "logo": "الشعار"
+  }
+}

package/src/i18n/locales/de.json

@@ -0,0 +1,137 @@
+{
+  "charts": {
+    "scatter": "Streudiagramm",
+    "scatter3d": "3D-Streudiagramm",
+    "bar": "Balkendiagramm",
+    "bar3d": "3D-Balkendiagramm",
+    "line": "Liniendiagramm",
+    "line3d": "3D-Liniendiagramm",
+    "pie": "Kreisdiagramm",
+    "surface3d": "3D-Oberfläche",
+    "violin": "Violinplot",
+    "dotplot": "Punktediagramm",
+    "visium": "Visium-Diagramm",
+    "timeline": "Zeitstrahl"
+  },
+  "ui": {
+    "loading": "Wird geladen...",
+    "error": "Fehler",
+    "retry": "Wiederholen",
+    "export": "Exportieren",
+    "zoomIn": "Vergrößern",
+    "zoomOut": "Verkleinern",
+    "resetZoom": "Zoom zurücksetzen",
+    "fullscreen": "Vollbild",
+    "exitFullscreen": "Vollbild beenden",
+    "download": "Herunterladen",
+    "downloadImage": "Bild herunterladen",
+    "downloadData": "Daten herunterladen",
+    "close": "Schließen",
+    "cancel": "Abbrechen",
+    "confirm": "Bestätigen",
+    "save": "Speichern",
+    "edit": "Bearbeiten",
+    "delete": "Löschen",
+    "add": "Hinzufügen",
+    "remove": "Entfernen",
+    "search": "Suchen",
+    "filter": "Filtern",
+    "sort": "Sortieren",
+    "refresh": "Aktualisieren",
+    "settings": "Einstellungen",
+    "help": "Hilfe",
+    "about": "Über",
+    "home": "Startseite",
+    "back": "Zurück",
+    "next": "Weiter",
+    "previous": "Zurück",
+    "submit": "Absenden",
+    "apply": "Anwenden",
+    "clear": "Löschen",
+    "selectAll": "Alle auswählen",
+    "deselectAll": "Alle abwählen",
+    "view": "Anzeigen",
+    "show": "Anzeigen",
+    "hide": "Ausblenden",
+    "expand": "Erweitern",
+    "collapse": "Reduzieren"
+  },
+  "errors": {
+    "invalidConfig": "Ungültige Konfiguration",
+    "dataNotFound": "Daten nicht gefunden",
+    "webglNotSupported": "WebGL wird in Ihrem Browser nicht unterstützt",
+    "chartRenderError": "Diagramm konnte nicht gerendert werden",
+    "dataLoadError": "Daten konnten nicht geladen werden",
+    "networkError": "Netzwerkfehler. Bitte überprüfen Sie Ihre Verbindung",
+    "timeoutError": "Zeitüberschreitung der Anforderung",
+    "validationError": "Validierungsfehler",
+    "unknownError": "Ein unbekannter Fehler ist aufgetreten",
+    "fileNotFound": "Datei nicht gefunden",
+    "invalidFormat": "Ungültiges Dateiformat",
+    "missingRequired": "Erforderliche Eigenschaft fehlt",
+    "typeMismatch": "Typ stimmt nicht überein"
+  },
+  "aria": {
+    "chartDescription": "{type}-Diagramm zeigt {description}",
+    "dataPoint": "Datenpunkt: {x}, {y}",
+    "dataPoint3d": "Datenpunkt: {x}, {y}, {z}",
+    "chartContainer": "Diagramm-Container",
+    "loadingChart": "Diagrammdaten werden geladen",
+    "chartLoaded": "Diagramm erfolgreich geladen",
+    "navigation": "Navigation",
+    "mainContent": "Hauptinhalt",
+    "complementary": "Ergänzende Informationen",
+    "search": "Sucheingabe",
+    "dataTable": "Datentabelle"
+  },
+  "cli": {
+    "welcome": "Willkommen bei Visualify CLI",
+    "initProject": "Neues Visualify-Projekt initialisieren",
+    "startDev": "Entwicklungsserver starten",
+    "buildProject": "Für Produktion erstellen",
+    "serveDocs": "Dokumentation bereitstellen",
+    "portalMode": "Portal-Modus starten",
+    "configNotFound": "Konfigurationsdatei nicht gefunden. Führen Sie zuerst 'visualify init' aus.",
+    "invalidCommand": "Ungültiger Befehl",
+    "serverStarted": "Server gestartet unter {url}",
+    "serverStopped": "Server gestoppt",
+    "building": "Projekt wird erstellt...",
+    "buildComplete": "Erstellung abgeschlossen",
+    "buildError": "Erstellung fehlgeschlagen",
+    "watchingFiles": "Dateiänderungen werden überwacht...",
+    "fileChanged": "Datei geändert: {file}",
+    "reloading": "Wird neu geladen...",
+    "tip": "Tipp: {message}",
+    "example": "Beispiel: {command}"
+  },
+  "validation": {
+    "required": "Eigenschaft '{property}' ist erforderlich",
+    "type": "Eigenschaft '{property}' sollte {expected} sein, empfangen wurde {received}",
+    "enum": "Eigenschaft '{property}' muss einer der folgenden sein: {values}",
+    "minLength": "Eigenschaft '{property}' darf nicht leer sein",
+    "format": "Eigenschaft '{property}' hat ein ungültiges Format",
+    "additionalProperties": "Unbekannte Eigenschaft '{property}'",
+    "version": "Setzen Sie die Version auf '3.0.0'",
+    "mode": "Verwenden Sie einen der folgenden: 'docs', 'portal', 'hybrid', 'auto'",
+    "defaultLibrary": "Verwenden Sie entweder 'echarts' oder 'plotly'"
+  },
+  "format": {
+    "date": "{date, date, medium}",
+    "time": "{time, time, short}",
+    "datetime": "{datetime, date, medium} {datetime, time, short}",
+    "number": "{value, number}",
+    "percent": "{value, number, percent}",
+    "currency": "{value, number, currency}",
+    "bytes": "{value, number, bytes}"
+  },
+  "footer": {
+    "download": "Herunterladen:",
+    "copyright": "{name} Copyright © {year} powered by {app}@{version}",
+    "references": "Referenzen"
+  },
+  "header": {
+    "viewSource": "Quellcode auf GitHub anzeigen",
+    "navigation": "Navigation",
+    "logo": "Logo"
+  }
+}

package/src/i18n/locales/en.json

@@ -0,0 +1,137 @@
+{
+  "charts": {
+    "scatter": "Scatter Plot",
+    "scatter3d": "3D Scatter Plot",
+    "bar": "Bar Chart",
+    "bar3d": "3D Bar Chart",
+    "line": "Line Chart",
+    "line3d": "3D Line Chart",
+    "pie": "Pie Chart",
+    "surface3d": "3D Surface",
+    "violin": "Violin Plot",
+    "dotplot": "Dot Plot",
+    "visium": "Visium Plot",
+    "timeline": "Timeline"
+  },
+  "ui": {
+    "loading": "Loading...",
+    "error": "Error",
+    "retry": "Retry",
+    "export": "Export",
+    "zoomIn": "Zoom In",
+    "zoomOut": "Zoom Out",
+    "resetZoom": "Reset Zoom",
+    "fullscreen": "Fullscreen",
+    "exitFullscreen": "Exit Fullscreen",
+    "download": "Download",
+    "downloadImage": "Download Image",
+    "downloadData": "Download Data",
+    "close": "Close",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "save": "Save",
+    "edit": "Edit",
+    "delete": "Delete",
+    "add": "Add",
+    "remove": "Remove",
+    "search": "Search",
+    "filter": "Filter",
+    "sort": "Sort",
+    "refresh": "Refresh",
+    "settings": "Settings",
+    "help": "Help",
+    "about": "About",
+    "home": "Home",
+    "back": "Back",
+    "next": "Next",
+    "previous": "Previous",
+    "submit": "Submit",
+    "apply": "Apply",
+    "clear": "Clear",
+    "selectAll": "Select All",
+    "deselectAll": "Deselect All",
+    "view": "View",
+    "show": "Show",
+    "hide": "Hide",
+    "expand": "Expand",
+    "collapse": "Collapse"
+  },
+  "errors": {
+    "invalidConfig": "Invalid configuration",
+    "dataNotFound": "Data not found",
+    "webglNotSupported": "WebGL is not supported in your browser",
+    "chartRenderError": "Failed to render chart",
+    "dataLoadError": "Failed to load data",
+    "networkError": "Network error. Please check your connection",
+    "timeoutError": "Request timed out",
+    "validationError": "Validation error",
+    "unknownError": "An unknown error occurred",
+    "fileNotFound": "File not found",
+    "invalidFormat": "Invalid file format",
+    "missingRequired": "Missing required property",
+    "typeMismatch": "Type mismatch"
+  },
+  "aria": {
+    "chartDescription": "{type} chart showing {description}",
+    "dataPoint": "Data point: {x}, {y}",
+    "dataPoint3d": "Data point: {x}, {y}, {z}",
+    "chartContainer": "Chart container",
+    "loadingChart": "Loading chart data",
+    "chartLoaded": "Chart loaded successfully",
+    "navigation": "Navigation",
+    "mainContent": "Main content",
+    "complementary": "Complementary information",
+    "search": "Search input",
+    "dataTable": "Data Table"
+  },
+  "cli": {
+    "welcome": "Welcome to Visualify CLI",
+    "initProject": "Initialize a new Visualify project",
+    "startDev": "Start development server",
+    "buildProject": "Build for production",
+    "serveDocs": "Serve documentation",
+    "portalMode": "Start portal mode",
+    "configNotFound": "Configuration file not found. Run 'visualify init' first.",
+    "invalidCommand": "Invalid command",
+    "serverStarted": "Server started at {url}",
+    "serverStopped": "Server stopped",
+    "building": "Building project...",
+    "buildComplete": "Build complete",
+    "buildError": "Build failed",
+    "watchingFiles": "Watching for file changes...",
+    "fileChanged": "File changed: {file}",
+    "reloading": "Reloading...",
+    "tip": "Tip: {message}",
+    "example": "Example: {command}"
+  },
+  "validation": {
+    "required": "Property '{property}' is required",
+    "type": "Property '{property}' should be {expected}, received {received}",
+    "enum": "Property '{property}' must be one of: {values}",
+    "minLength": "Property '{property}' cannot be empty",
+    "format": "Property '{property}' has invalid format",
+    "additionalProperties": "Unknown property '{property}'",
+    "version": "Set version to '3.0.0'",
+    "mode": "Use one of: 'docs', 'portal', 'hybrid', 'auto'",
+    "defaultLibrary": "Use either 'echarts' or 'plotly'"
+  },
+  "format": {
+    "date": "{date, date, medium}",
+    "time": "{time, time, short}",
+    "datetime": "{datetime, date, medium} {datetime, time, short}",
+    "number": "{value, number}",
+    "percent": "{value, number, percent}",
+    "currency": "{value, number, currency}",
+    "bytes": "{value, number, bytes}"
+  },
+  "footer": {
+    "download": "Download:",
+    "copyright": "{name} Copyright © {year} powered by {app}@{version}",
+    "references": "References"
+  },
+  "header": {
+    "viewSource": "View source on GitHub",
+    "navigation": "Navigation",
+    "logo": "Logo"
+  }
+}