Moonizer

Moonizer is a local-first CSV exploration, transformation, and visualization studio that runs entirely in your browser. Every byte stays on your machine, enabling teams to inspect sensitive datasets with the speed of a native tool and the simplicity of a web app.

Table of Contents

• Quick Start
• Why Moonizer
• Feature Highlights
• Data Workflow
• Security & Approvals
• Architecture
• Configuration
• Requirements
• Getting Started
• Usage
• Keyboard Shortcut Guide
• Advanced Guide: Using the Rule Engine
• Extending the Platform
• Localization
• Tooling & Scripts
• Project Structure
• Contributing
• FAQ
• License

Quick Start

| Adım | Komut / Eylem | Not | | --- | --- | --- | | 1 | npm install | Bağımlılıkları kur; yalnızca Node.js gerekir. | | 2 | npm run dev | Vite geliştirme sunucusunu başlat, tarayıcıyı aç. | | 3 | CSV içe aktar | Dosyayı sürükle-bırak yap veya dosya seçiciyi kullan. | | 4 | Profil + dönüştür | Profil panelini incele, gerekli dönüşümleri uygula. | | 5 | Dışa aktar / paylaş | Sonuçları CSV/JSON olarak indir ya da görselleri PNG olarak kaydet. |

Why Moonizer

Traditional spreadsheet tools choke on multi‑million row CSVs, leak data to remote services, or bury critical profiling insight behind add-ons. Moonizer delivers a focused analysis environment designed for analysts, data scientists, and less-technical stakeholders who need trustworthy answers fast:

• Zero install beyond Node.js; ship as a static site or embed inside internal tooling.
• All processing (parsing, profiling, transforms, visualization) happens client-side for compliance-friendly analysis.
• Opinionated but extensible UI that balances analyst power-features with shareable insights.

Feature Highlights

Data Ingestion

• Drag & drop or file picker uploads with instant feedback.
• Automatic delimiter detection (comma, semicolon, tab, pipe) and character set inference.
• Incremental loading strategy keeps the UI responsive even with large files.
• Built-in sample datasets and multi-dataset sessions for quick experimentation.

Profiling & Analysis

• Detects seven column archetypes (numeric, categorical, boolean, datetime, text, unique/ID, constant).
• Column-level metrics: counts, distinct values, missing ratios, distribution descriptors.
• Type-aware deep metrics: Gini, entropy, quartiles, outlier capture, and null highlighting.
• Row preview with null emphasis accelerates anomaly triage.

Transformation Workbench

• 30+ advanced column operations across text, numeric, boolean, categorical, and time-series data.
• Undo/redo with branched history so you can compare divergent transformation paths.
• Rich tooling for find & replace, regular expressions, column merge/split, imputation, and more.

Data Grid

• Trimodal sorting (ascending, descending, neutral) with multi-column selection.
• Middle-click 2D panning, keyboard navigation, and responsive pagination for deep datasets.
• Type-specific filtering, row/column highlighting, delta tracking, and outlier markers.

Visualization Studio

• Histogram, line, scatter, bar, pie, box plot, and area charts ready out-of-the-box.
• Dual-panel chart mode lets you compare two visuals side by side.
• Real-time customization panel with interactive control sets.

Export & Sharing

• Export transformed datasets as CSV, JSON, or Excel-friendly formats.
• Scope exports to filtered subsets for precise downstream workflows.
• Theme-aware PNG chart exports for reporting decks.

UX Enhancements

• Keyboard shortcuts, contextual menus, and tooltip-rich guidance reduce friction.
• Multilingual foundation with lightweight iconography, deliberate color tokens, and subtle motion.

Data Workflow

1. Load a CSV via drag & drop or the file picker; Moonizer streams large files chunk-by-chunk.
2. Profile columns automatically to surface schema drafts, anomalies, and type mismatches.
3. Transform data using the inspector panel; every change is tracked with undo/redo history.
4. Inspect results in the grid with filters, sorting, and delta highlights.
5. Visualize insights via charts, comparing multiple views simultaneously when needed.
6. Export cleaned datasets or generated visuals without leaving the browser.

Example Scenario: Rapid QA Pipeline

1. Finans ekibinden gelen 1M satırlık CSV’yi içe aktar.
2. Profil panelinde hatalı tarih biçimlerini ve beklenmedik null oranlarını tespit et.
3. Kolon editöründe tarihleri normalize eden ve 0 değerleri null’a dönüştüren dönüşümleri uygula.
4. Filtreleyip "Risk" kolonunu görselleştir; grafiği PNG olarak dışa aktar.
5. Temizlenmiş veri setini CSV olarak indir ve ilgili ekiple paylaş.

Security & Approvals

• Veri yerelde kalır: Tüm parsing, profil çıkarma ve görselleştirme işlemleri tarayıcı içinde çalışır; ağ trafiği yoktur.
• Offline çalışma: Uygulama statik olarak servis edildiği için internet bağlantısı olmadan çalıştırılabilir.
• İç onay süreci: Moonizer’ı kurum içine alırken güvenlik ekibine; kullanılan bağımlılık listesi (package-lock.json), çalışma zamanı gereksinimleri ve build sürecini iletin.
• Yapılandırılabilir izinler: Paylaşılan makinelerde tarayıcı izinlerini (dosya erişimi, clipboard) kısıtlayarak veri sızıntısı riskini azaltın.

Architecture

• Stack: React 18 + TypeScript + Vite for a fast, typed SPA foundation.
• State Management: Zustand + Immer for efficient and predictable state management. The state is divided into several stores:
  • useDatasetStore: Manages the list of datasets, the active dataset, and performs dataset-level operations like adding, removing, and transforming data.
  • useDataViewStore: Manages the state of the data grid, including cell coloring modes and selections.
  • useLayoutStore: Manages the visibility of the side panels.
  • useColumnEditorStore: Manages the state of the column editor, including the active column and the undo/redo history for transformations. It uses a snapshot-based approach for reliable undo/redo functionality.
• Dataset Engine: src/core/dataset handles CSV parsing, sample loading, transformation pipelines, and export tooling.
• Profiling: src/core/profiling surfaces type detection and statistic computation for every column.
• UI Composition: Component modules under src/components and src/ui deliver reusable panels, inspectors, charts, and grid utilities.
• Styling: CSS Modules with a centralized design token system in src/styles/tokens.css. This approach ensures theme consistency, maintainability, and allows for easy customization of the application's appearance.
• Routing: React Router 6 powers navigation between workspace surfaces.

Configuration

• Vite (vite.config.ts): The build tool and development server are configured in this file. It includes settings for the React plugin, build output directory (dist), and path aliases.
• TypeScript (tsconfig.json): This file contains the TypeScript compiler options. It enforces strict type checking and defines path aliases (e.g., @/* for src/*) to simplify import statements across the project.

Requirements

Core Dependencies

| Library | Version | | --- | --- | | react | ^18.2.0 | | react-dom | ^18.2.0 | | react-router-dom | ^6.8.0 | | zustand | ^4.4.0 | | immer | ^10.0.0 | | i18next | ^25.6.0 | | react-i18next | ^16.0.1 | | i18next-browser-languagedetector | ^8.2.0 |

Development Dependencies

| Library | Version | | --- | --- | | vite | ^7.1.2 | | typescript | ^5.9.2 | | eslint | ^8.57.0 | | @vitejs/plugin-react | ^4.0.0 |

Getting Started

Installation

Clone the repository and install the dependencies:

git clone https://github.com/Asreonn/moonizer.git
cd moonizer
npm install

Usage

Development Server

To start the local development server:

npm run dev

Visit http://localhost:3000 in your browser to start exploring datasets. The application will automatically reload when you make changes to the source code.

Production Build

To create a production-ready build of the application:

npm run build

The optimized and minified files will be generated in the dist/ directory.

Preview Production Build

To preview the production build locally:

npm run preview

This command starts a local web server that serves the files from the dist/ directory.

Keyboard Shortcut Guide

| Action | Shortcut (Windows/Linux) | Shortcut (macOS) | | --- | --- | --- | | Undo | Ctrl + Z | Cmd + Z | | Redo | Ctrl + Y or Ctrl + Shift + Z | Cmd + Shift + Z |

Advanced Guide: Using the Rule Engine

Moonizer includes a powerful rule engine that allows you to create complex, custom data transformations using a set of logical conditions. This is particularly useful for creating new columns based on the values of other columns, or for advanced data cleaning and feature engineering.

The rule engine is located in src/core/dataset/ruleEngine.ts. You can define a RuleSet that consists of RuleGroups and RuleConditions to perform transformations.

Example: Creating a "High_Value_Customer" Column

Let's say you have a dataset with order_count and total_spent columns. You can create a new boolean column named High_Value_Customer for customers who have placed more than 10 orders AND spent over $500.

Here's how you could define a RuleSet for this scenario:

import { createRuleSet, createRuleGroup, createCondition } from './src/core/dataset/ruleEngine.ts';

// Define the conditions for a high-value customer
const highValueCustomerRule = c