visualifyjs 2.5.3 → 3.0.0

package/src/entries/portal.js

@@ -0,0 +1,204 @@
+/**
+ * Portal Application Entry Point
+ * @description Full data portal bundle with all visualization components
+ * Exports the complete Visualify application for standalone portals
+ * Global name: Visualify
+ */
+
+import CreateApp from '../core/visualify';
+import Recharts from '../core/recharts';
+import LiveEditor from '../core/liveEditor';
+import { VisualifyProvider, useAppContext } from '../core/appContext';
+
+// Import shared components directly (not via shared.js to avoid code-splitting issues with UMD)
+// Core chart components
+export { default as ReCharts } from '../core/modules/echarts';
+export { default as EChartSwitcher } from '../core/modules/echartswitcher';
+
+// Chart utilities and parsers
+export * from '../core/parser/echart.data';
+export * from '../core/parser/echart.features';
+export * from '../core/parser/echart.series';
+export * from '../core/parser/echart.types';
+export * from '../core/parser/echart.parser';
+export * from '../core/parser/echart.hilbert';
+
+// Plotly support
+export { default as Replotly } from '../core/modules/replotly';
+export * from '../core/parser/plotly.data';
+export * from '../core/parser/plotly.layout';
+export * from '../core/parser/plotly.config';
+export * from '../core/parser/plotly.violin';
+
+// ECharts utilities and presets
+export * from '../core/modules/echartsUtils';
+export { fetchPresetFromURL, getEmbeddedPreset } from '../core/modules/echarts/presetHandler';
+export * from '../core/modules/echarts/common';
+
+// Theme system
+export { default as ThemeSelector } from '../core/themes/themeSelector';
+export * from '../core/themes/modern';
+
+// Shared widgets
+export { default as ErrorBoundary } from '../core/widgets/errorBoundary';
+export { default as CircularProgress } from '../core/widgets/circularProgress';
+
+// Data fetching utilities
+export { default as fetchData } from '../core/fetch/fetch';
+export { default as condFetch } from '../core/fetch/condfetch';
+export { default as vfetch } from '../core/fetch/vfetch';
+export { default as jsonFetch } from '../core/fetch/json';
+
+// Re-export core application classes
+export { CreateApp, Recharts, LiveEditor, VisualifyProvider, useAppContext };
+
+// Import and re-export page components
+export { default as JsonPage } from '../core/pages/jsonPage';
+export { default as LoadingPage } from '../core/pages/loading';
+export { default as ErrorPage } from '../core/pages/error';
+export { default as NotFoundPage } from '../core/pages/404';
+
+// Import and re-export widget components
+export { default as Layout } from '../core/widgets/layout';
+export { default as Header } from '../core/widgets/header';
+export { default as Footer } from '../core/widgets/footer';
+export { default as Controller } from '../core/widgets/controller';
+export { default as GridLayout } from '../core/widgets/layout/Grid';
+export { default as Mapping } from '../core/widgets/mapping';
+
+// Import and re-export visualization components
+export { default as Scatter } from '../core/components/Scatter';
+export { default as ScatterBio } from '../core/components/ScatterBio';
+export { default as ScatterL } from '../core/components/scatterL';
+export { default as VisiumPlot } from '../core/components/VisiumPlot';
+export { default as Visium } from '../core/components/visium';
+export { default as DotPlot } from '../core/components/dotplot';
+export { default as Macaron } from '../core/components/macaron';
+export { default as Ratio } from '../core/components/ratio';
+export { default as Timeline } from '../core/components/timeline';
+export { default as Selection } from '../core/components/selection';
+export { default as SearchBar } from '../core/components/searchbar';
+export { default as Browser } from '../core/components/browser';
+export { default as List } from '../core/components/list';
+export { default as Html } from '../core/components/html';
+export { default as Markdown } from '../core/components/markdown';
+
+// Router components
+export { default as JsonRouter } from '../core/router/jsonRouter';
+export * from '../core/router/alias';
+
+// Web vitals reporting
+export { default as reportWebVitals } from '../_utils/reportWebVitals';
+
+/**
+ * Visualify Portal namespace
+ * Contains all exports for the full portal application
+ */
+const Visualify = {
+	// Version info (replaced during build)
+	version: process.env.VISUALIFY_VERSION || 'dev',
+
+	// Core application
+	createApp: CreateApp,
+
+	// Charting classes
+	Recharts,
+	LiveEditor,
+
+	// React context
+	VisualifyProvider,
+	useAppContext,
+
+	/**
+	 * Initialize the Visualify portal application
+	 * @param {Object} config - Application configuration
+	 * @param {string} config.el - DOM selector for mounting
+	 * @param {string} config.theme - Theme name (default: 'modern')
+	 * @param {Object} config.routes - Route configuration
+	 * @param {Object} config.data - Initial data
+	 */
+	init(config) {
+		if (!config) {
+			throw new Error('[Visualify] Configuration object is required');
+		}
+
+		if (!config.el) {
+			throw new Error('[Visualify] config.el is required (DOM selector)');
+		}
+
+		// Set default mode to pages for portal
+		config.mode = config.mode || 'pages';
+
+		// Initialize the application
+		CreateApp(config);
+
+		// Report web vitals if enabled
+		if (config.reportWebVitals !== false) {
+			reportWebVitals();
+		}
+
+		console.log(`[Visualify] Portal v${this.version} initialized`);
+	},
+
+	/**
+	 * Create a chart instance (convenience method)
+	 * @param {Object} config - Chart configuration
+	 * @returns {Recharts} Recharts instance
+	 */
+	chart(config) {
+		return new Recharts(config);
+	},
+
+	/**
+	 * Create a live editor instance (convenience method)
+	 * @param {Object} config - Editor configuration
+	 * @returns {LiveEditor} LiveEditor instance
+	 */
+	editor(config) {
+		return new LiveEditor(config);
+	},
+
+	/**
+	 * Check if running in browser environment
+	 * @returns {boolean}
+	 */
+	get isBrowser() {
+		return typeof window !== 'undefined';
+	},
+
+	/**
+	 * Check if running in Node.js environment
+	 * @returns {boolean}
+	 */
+	get isNode() {
+		return typeof window === 'undefined';
+	},
+};
+
+// Auto-initialize if window.$visualify is already set (legacy support)
+if (typeof window !== 'undefined' && window.$visualify) {
+	const config = window.$visualify;
+	if (config.mode === 'pages' || config.mode === undefined) {
+		Visualify.init(config);
+	}
+}
+
+// Also support the property setter pattern for deferred initialization
+if (typeof window !== 'undefined') {
+	let _visualifyConfig = null;
+
+	Object.defineProperty(window, '$visualify', {
+		set(config) {
+			_visualifyConfig = config;
+			if (config && (config.mode === 'pages' || config.mode === undefined)) {
+				Visualify.init(config);
+			}
+		},
+		get() {
+			return _visualifyConfig;
+		},
+		configurable: true,
+	});
+}
+
+export default Visualify;

package/src/entries/shared.js

@@ -0,0 +1,50 @@
+/**
+ * Shared Components Entry Point
+ * @description Exports components and utilities used by both docs and portal modes
+ * This enables code-splitting and reduces bundle duplication
+ */
+
+// Core chart components
+export { default as ReCharts } from '../core/modules/echarts';
+export { default as EChartSwitcher } from '../core/modules/echartswitcher';
+
+// Chart utilities and parsers
+export * from '../core/parser/echart.data';
+export * from '../core/parser/echart.features';
+export * from '../core/parser/echart.series';
+export * from '../core/parser/echart.types';
+export * from '../core/parser/echart.parser';
+export * from '../core/parser/echart.hilbert';
+
+// Plotly support
+export { default as Replotly } from '../core/modules/replotly';
+export * from '../core/parser/plotly.data';
+export * from '../core/parser/plotly.layout';
+export * from '../core/parser/plotly.config';
+export * from '../core/parser/plotly.violin';
+
+// ECharts utilities and presets
+export * from '../core/modules/echartsUtils';
+export { fetchPresetFromURL, getEmbeddedPreset } from '../core/modules/echarts/presetHandler';
+export * from '../core/modules/echarts/common';
+
+// Theme system
+export { default as ThemeSelector } from '../core/themes/themeSelector';
+export * from '../core/themes/modern';
+
+// Context
+export { VisualifyProvider, useAppContext } from '../core/appContext';
+
+// Shared widgets
+export { default as ErrorBoundary } from '../core/widgets/errorBoundary';
+export { default as CircularProgress } from '../core/widgets/circularProgress';
+
+// Data fetching utilities
+export { default as fetchData } from '../core/fetch/fetch';
+export { default as condFetch } from '../core/fetch/condfetch';
+export { default as vfetch } from '../core/fetch/vfetch';
+export { default as jsonFetch } from '../core/fetch/json';
+
+// Shared CSS (will be extracted by rollup)
+import '../_css/index.css';
+import 'bootstrap/dist/css/bootstrap.min.css';

package/src/i18n/formatters.js

@@ -0,0 +1,455 @@
+/**
+ * @fileoverview Locale-aware formatters for Visualify.js i18n
+ * @module i18n/formatters
+ *
+ * Provides locale-aware formatting for:
+ * - Dates and times
+ * - Numbers (decimals, percentages)
+ * - Currency
+ * - File sizes (bytes)
+ * - Relative time
+ */
+
+import { getCurrentLanguage } from './index';
+
+/**
+ * Get Intl.DateTimeFormat options based on locale
+ * @param {string} locale - Locale string
+ * @returns {Object} DateTimeFormat options
+ */
+function getDateTimeFormatOptions(locale) {
+  const region = locale.split('-')[1] || locale;
+
+  // Locale-specific date formats
+  const dateFormats = {
+    'en-US': { month: '2-digit', day: '2-digit', year: 'numeric' },
+    'en-GB': { day: '2-digit', month: '2-digit', year: 'numeric' },
+    'zh': { year: 'numeric', month: '2-digit', day: '2-digit' },
+    'zh-CN': { year: 'numeric', month: '2-digit', day: '2-digit' },
+    'de': { day: '2-digit', month: '2-digit', year: 'numeric' },
+    'de-DE': { day: '2-digit', month: '2-digit', year: 'numeric' },
+    'es': { day: '2-digit', month: '2-digit', year: 'numeric' },
+    'es-ES': { day: '2-digit', month: '2-digit', year: 'numeric' },
+    'ar': { year: 'numeric', month: '2-digit', day: '2-digit' },
+    'ar-SA': { year: 'numeric', month: '2-digit', day: '2-digit' },
+    'he': { day: '2-digit', month: '2-digit', year: 'numeric' },
+    'he-IL': { day: '2-digit', month: '2-digit', year: 'numeric' },
+  };
+
+  return dateFormats[locale] || dateFormats[region] || dateFormats['en-US'];
+}
+
+/**
+ * Format a date according to the current locale
+ * @param {Date|string|number} date - Date to format
+ * @param {Object} options - Intl.DateTimeFormat options
+ * @returns {string} Formatted date string
+ */
+export function formatDate(date, options = {}) {
+  const locale = getCurrentLanguage();
+  const dateObj = date instanceof Date ? date : new Date(date);
+
+  if (isNaN(dateObj.getTime())) {
+    return '';
+  }
+
+  const defaultOptions = getDateTimeFormatOptions(locale);
+  const formatOptions = { ...defaultOptions, ...options };
+
+  return new Intl.DateTimeFormat(locale, formatOptions).format(dateObj);
+}
+
+/**
+ * Format a time according to the current locale
+ * @param {Date|string|number} time - Time to format
+ * @param {Object} options - Intl.DateTimeFormat options
+ * @returns {string} Formatted time string
+ */
+export function formatTime(time, options = {}) {
+  const locale = getCurrentLanguage();
+  const dateObj = time instanceof Date ? time : new Date(time);
+
+  if (isNaN(dateObj.getTime())) {
+    return '';
+  }
+
+  const defaultOptions = {
+    hour: '2-digit',
+    minute: '2-digit',
+    ...options,
+  };
+
+  return new Intl.DateTimeFormat(locale, defaultOptions).format(dateObj);
+}
+
+/**
+ * Format date and time together
+ * @param {Date|string|number} datetime - DateTime to format
+ * @param {Object} options - Intl.DateTimeFormat options
+ * @returns {string} Formatted datetime string
+ */
+export function formatDateTime(datetime, options = {}) {
+  const locale = getCurrentLanguage();
+  const dateObj = datetime instanceof Date ? datetime : new Date(datetime);
+
+  if (isNaN(dateObj.getTime())) {
+    return '';
+  }
+
+  const defaultOptions = {
+    ...getDateTimeFormatOptions(locale),
+    hour: '2-digit',
+    minute: '2-digit',
+    ...options,
+  };
+
+  return new Intl.DateTimeFormat(locale, defaultOptions).format(dateObj);
+}
+
+/**
+ * Format a number according to the current locale
+ * @param {number} value - Number to format
+ * @param {Object} options - Intl.NumberFormat options
+ * @returns {string} Formatted number string
+ */
+export function formatNumber(value, options = {}) {
+  const locale = getCurrentLanguage();
+
+  if (typeof value !== 'number' || isNaN(value)) {
+    return '';
+  }
+
+  const defaultOptions = {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+    ...options,
+  };
+
+  return new Intl.NumberFormat(locale, defaultOptions).format(value);
+}
+
+/**
+ * Format a percentage according to the current locale
+ * @param {number} value - Value to format as percentage (0-1 or 0-100)
+ * @param {Object} options - Intl.NumberFormat options
+ * @returns {string} Formatted percentage string
+ */
+export function formatPercent(value, options = {}) {
+  const locale = getCurrentLanguage();
+
+  if (typeof value !== 'number' || isNaN(value)) {
+    return '';
+  }
+
+  // Normalize value to 0-1 range if it appears to be 0-100
+  const normalizedValue = value > 1 ? value / 100 : value;
+
+  const defaultOptions = {
+    style: 'percent',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+    ...options,
+  };
+
+  return new Intl.NumberFormat(locale, defaultOptions).format(normalizedValue);
+}
+
+/**
+ * Format currency according to the current locale
+ * @param {number} value - Value to format
+ * @param {string} currency - Currency code (e.g., 'USD', 'EUR', 'CNY')
+ * @param {Object} options - Intl.NumberFormat options
+ * @returns {string} Formatted currency string
+ */
+export function formatCurrency(value, currency = 'USD', options = {}) {
+  const locale = getCurrentLanguage();
+
+  if (typeof value !== 'number' || isNaN(value)) {
+    return '';
+  }
+
+  const defaultOptions = {
+    style: 'currency',
+    currency,
+    ...options,
+  };
+
+  return new Intl.NumberFormat(locale, defaultOptions).format(value);
+}
+
+/**
+ * Format bytes to human-readable format
+ * @param {number} bytes - Bytes to format
+ * @param {Object} options - Formatting options
+ * @returns {string} Formatted bytes string
+ */
+export function formatBytes(bytes, options = {}) {
+  const locale = getCurrentLanguage();
+
+  if (typeof bytes !== 'number' || isNaN(bytes)) {
+    return '';
+  }
+
+  const { decimals = 2, binary = false } = options;
+  const base = binary ? 1024 : 1000;
+  const units = binary
+    ? ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB']
+    : ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+
+  if (bytes === 0) {
+    return `0 ${units[0]}`;
+  }
+
+  const exponent = Math.min(
+    Math.floor(Math.log(bytes) / Math.log(base)),
+    units.length - 1
+  );
+  const value = bytes / Math.pow(base, exponent);
+
+  const formattedValue = new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: decimals,
+  }).format(value);
+
+  return `${formattedValue} ${units[exponent]}`;
+}
+
+/**
+ * Format relative time (e.g., "2 days ago", "in 3 hours")
+ * @param {Date|string|number} date - Date to compare
+ * @param {Date|string|number} [relativeTo] - Date to compare against (default: now)
+ * @returns {string} Formatted relative time string
+ */
+export function formatRelativeTime(date, relativeTo = new Date()) {
+  const locale = getCurrentLanguage();
+  const dateObj = date instanceof Date ? date : new Date(date);
+  const relativeObj = relativeTo instanceof Date ? relativeTo : new Date(relativeTo);
+
+  const diffMs = dateObj.getTime() - relativeObj.getTime();
+  const diffSeconds = Math.round(diffMs / 1000);
+  const diffMinutes = Math.round(diffSeconds / 60);
+  const diffHours = Math.round(diffMinutes / 60);
+  const diffDays = Math.round(diffHours / 24);
+
+  // Use Intl.RelativeTimeFormat if available
+  if (typeof Intl.RelativeTimeFormat !== 'undefined') {
+    const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+
+    if (Math.abs(diffSeconds) < 60) {
+      return rtf.format(diffSeconds, 'second');
+    } else if (Math.abs(diffMinutes) < 60) {
+      return rtf.format(diffMinutes, 'minute');
+    } else if (Math.abs(diffHours) < 24) {
+      return rtf.format(diffHours, 'hour');
+    } else if (Math.abs(diffDays) < 30) {
+      return rtf.format(diffDays, 'day');
+    } else if (Math.abs(diffDays) < 365) {
+      return rtf.format(Math.round(diffDays / 30), 'month');
+    } else {
+      return rtf.format(Math.round(diffDays / 365), 'year');
+    }
+  }
+
+  // Fallback for browsers without RelativeTimeFormat
+  const absSeconds = Math.abs(diffSeconds);
+  const absMinutes = Math.abs(diffMinutes);
+  const absHours = Math.abs(diffHours);
+  const absDays = Math.abs(diffDays);
+
+  let value, unit;
+  if (absSeconds < 60) {
+    value = absSeconds;
+    unit = 'second';
+  } else if (absMinutes < 60) {
+    value = absMinutes;
+    unit = 'minute';
+  } else if (absHours < 24) {
+    value = absHours;
+    unit = 'hour';
+  } else {
+    value = absDays;
+    unit = 'day';
+  }
+
+  const suffix = diffMs > 0 ? 'from now' : 'ago';
+  return `${value} ${unit}${value !== 1 ? 's' : ''} ${suffix}`;
+}
+
+/**
+ * Format a list according to locale conventions
+ * @param {Array<string>} items - Items to format
+ * @param {Object} options - Intl.ListFormat options
+ * @returns {string} Formatted list string
+ */
+export function formatList(items, options = {}) {
+  const locale = getCurrentLanguage();
+
+  if (!Array.isArray(items) || items.length === 0) {
+    return '';
+  }
+
+  // Use Intl.ListFormat if available
+  if (typeof Intl.ListFormat !== 'undefined') {
+    const listFormat = new Intl.ListFormat(locale, options);
+    return listFormat.format(items);
+  }
+
+  // Fallback
+  if (items.length === 1) {
+    return items[0];
+  } else if (items.length === 2) {
+    const conjunctions = {
+      'en': ' and ',
+      'zh': '和',
+      'es': ' y ',
+      'de': ' und ',
+      'ar': ' و ',
+      'he': ' ו ',
+    };
+    const lang = locale.split('-')[0];
+    return items.join(conjunctions[lang] || ' and ');
+  } else {
+    const conjunctions = {
+      'en': ', and ',
+      'zh': '和',
+      'es': ', y ',
+      'de': ', und ',
+      'ar': ', و ',
+      'he': ', ו ',
+    };
+    const lang = locale.split('-')[0];
+    const lastItem = items[items.length - 1];
+    const otherItems = items.slice(0, -1);
+    return otherItems.join(', ') + (conjunctions[lang] || ', and ') + lastItem;
+  }
+}
+
+/**
+ * Get number formatting info for the current locale
+ * @returns {Object} Formatting info (decimal separator, group separator)
+ */
+export function getNumberFormatInfo() {
+  const locale = getCurrentLanguage();
+  const number = 1234.5;
+  const formatted = new Intl.NumberFormat(locale).format(number);
+
+  // Extract separators from formatted number
+  const parts = formatted.split('');
+  let decimalSeparator = '.';
+  let groupSeparator = ',';
+
+  for (let i = 0; i < parts.length; i++) {
+    if (parts[i] === '4') {
+      // Found the decimal part start
+      decimalSeparator = parts[i - 1];
+    } else if (parts[i] === '1' && i > 0) {
+      // Found the group separator
+      groupSeparator = parts[i - 1];
+    }
+  }
+
+  return {
+    decimalSeparator,
+    groupSeparator,
+  };
+}
+
+/**
+ * Parse a localized number string back to a number
+ * @param {string} value - Localized number string
+ * @returns {number|null} Parsed number or null if invalid
+ */
+export function parseNumber(value) {
+  if (typeof value !== 'string') {
+    return typeof value === 'number' ? value : null;
+  }
+
+  const { decimalSeparator, groupSeparator } = getNumberFormatInfo();
+
+  // Remove group separators and normalize decimal separator
+  const normalized = value
+    .replace(new RegExp(`\\${groupSeparator}`, 'g'), '')
+    .replace(decimalSeparator, '.');
+
+  const parsed = parseFloat(normalized);
+  return isNaN(parsed) ? null : parsed;
+}
+
+/**
+ * Format chart axis label with locale-aware number formatting
+ * @param {number} value - Value to format
+ * @param {string} type - Axis type ('value', 'log', 'time')
+ * @returns {string} Formatted label
+ */
+export function formatAxisLabel(value, type = 'value') {
+  const locale = getCurrentLanguage();
+
+  if (type === 'time') {
+    return formatDate(value, { month: 'short', day: 'numeric' });
+  }
+
+  if (type === 'log') {
+    // For log scales, use scientific notation for very small/large numbers
+    if (Math.abs(value) < 0.001 || Math.abs(value) > 10000) {
+      return new Intl.NumberFormat(locale, {
+        notation: 'scientific',
+        maximumFractionDigits: 2,
+      }).format(value);
+    }
+  }
+
+  // Standard number formatting
+  return formatNumber(value, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 3,
+  });
+}
+
+/**
+ * Format data value for tooltip display
+ * @param {*} value - Value to format
+ * @param {string} dataType - Type of data ('number', 'date', 'category', 'currency')
+ * @param {Object} options - Formatting options
+ * @returns {string} Formatted value
+ */
+export function formatTooltipValue(value, dataType = 'number', options = {}) {
+  if (value === null || value === undefined) {
+    return '-';
+  }
+
+  switch (dataType) {
+    case 'date':
+      return formatDate(value, options);
+    case 'datetime':
+      return formatDateTime(value, options);
+    case 'currency':
+      return formatCurrency(value, options.currency || 'USD', options);
+    case 'percent':
+      return formatPercent(value, options);
+    case 'bytes':
+      return formatBytes(value, options);
+    case 'number':
+    default:
+      if (typeof value === 'number') {
+        return formatNumber(value, options);
+      }
+      return String(value);
+  }
+}
+
+// Default export with all formatters
+export default {
+  formatDate,
+  formatTime,
+  formatDateTime,
+  formatNumber,
+  formatPercent,
+  formatCurrency,
+  formatBytes,
+  formatRelativeTime,
+  formatList,
+  getNumberFormatInfo,
+  parseNumber,
+  formatAxisLabel,
+  formatTooltipValue,
+};