Moonizer

Status: Archived. Finished in 2025 (TypeScript). Live demo: https://moonizer.vercel.app

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.

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

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

Example Scenario: Rapid QA Pipeline

Finans ekibinden gelen 1M satırlık CSV’yi içe aktar.
Profil panelinde hatalı tarih biçimlerini ve beklenmedik null oranlarını tespit et.
Kolon editöründe tarihleri normalize eden ve 0 değerleri null’a dönüştüren dönüşümleri uygula.
Filtreleyip "Risk" kolonunu görselleştir; grafiği PNG olarak dışa aktar.
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 = createRuleSet(
  'High Value Customer Rule',
  createRuleGroup('AND', [
    createCondition('order_count', '>', 10),
    createCondition('total_spent', '>', 500),
  ]),
  {
    description: 'Flags customers with more than 10 orders and over $500 total spent.',
    resultType: 'boolean', // The output will be true or false
  }
);

You can then apply this RuleSet to your dataset to generate the new column. This functionality can be integrated into a new transformation in the "Column Inspector" panel.

Extending the Platform

Moonizer is built to be extended without forking core logic.

Custom transforms: Add a new helper to src/core/dataset/transforms.ts, returning a TransformResult. Then register it inside the column inspector configuration so it appears in the UI. For example, to add a "double value" transformation:
```
// in src/core/dataset/transforms.ts
export const doubleValue = (column: any[]): any[] => {
  return column.map(value => value * 2);
}
```
Then, you would call this transformation from a UI component and update the dataset using the useDatasetStore's updateDatasetData action.
Derived metrics: Augment profiling logic in src/core/profiling to compute domain-specific KPIs (e.g., churn, conversion, risk scores).
Visualization presets: Extend chart definitions in src/ui to add templates, saved views, or organization-specific themes.
Automation hooks: The Zustand stores in src/state expose accessor methods (applyDatasetTransform, updateDatasetData, etc.) that you can call from new React components, services, or background workers.

Localization

Moonizer ships with i18next, i18next-browser-languagedetector, and react-i18next.

Translation resources live in src/locales.
Generate compiled locale bundles with npm run build:locales.
Validate translation completeness via npm run validate:locales.
npm run watch:locales keeps bundles fresh during development.

Tooling & Scripts

Command	Description
`npm run dev`	Start the Vite dev server.
`npm run build`	Type-check then build the production bundle.
`npm run preview`	Preview the production build locally.
`npm run lint`	Run ESLint with strict TypeScript rules.
`npm run type-check`	Execute `tsc --noEmit` for type safety.
`npm run build:locales`	Compile locale JSON into distributable bundles.
`npm run validate:locales`	Ensure translation keys remain in sync.
`npm run watch:locales`	Watch localization files for changes.

Project Structure

Moonizer/
├── public/                 # Static assets served as-is
├── src/
│   ├── app/                # Application-scoped providers and layout wiring
│   ├── core/               # Dataset engine, profiling, hooks, utilities
│   ├── state/              # Zustand + Immer stores (datasets, layout, editor)
│   ├── components/         # Feature components (inspectors, panels, grid, charts)
│   ├── ui/                 # Presentational primitives and shared UI patterns
│   ├── locales/            # i18n resources and build scripts
│   ├── styles/             # CSS Modules and design tokens
│   ├── types/              # Shared TypeScript definitions
│   ├── App.tsx             # Root component
│   └── main.tsx            # Entry point bootstrapping the SPA
├── package.json            # Dependencies and npm scripts
├── vite.config.ts          # Vite + plugin configuration
├── tsconfig.json           # TypeScript compilation config
└── README.md               # You are here

Contributing

Issues, feature requests, and pull requests are all welcome. If you plan a substantial change:

Open a discussion or issue outlining the problem and proposed solution.
Keep transformations pure and state updates immutable—Immer handles mutation ergonomics under the hood.
Add or update localization strings when introducing user-facing text.
Run linting and type checks before submitting to ensure a smooth review.

Contributor Checklist

npm run lint ve npm run type-check komutlarının temiz geçtiğini doğrula.
Yeni özellikler için örnek veri veya test senaryoları ekle (varsa src/core altına doküman notu bırak).
Kullanıcıya görünür değişikliklerde ilgili i18n anahtarlarını güncelle.
PR açıklamasında veri gizliliği veya performans etkilerini kısaca belirt.
İncelemenin kolaylaşması için ilgili ekran görüntüsü veya kısa kullanım adımlarını ekle.

FAQ

CSV boyut sınırı nedir? Belleğe sığan her dosyayla çalışır; 1–2 GB üzerindeki dosyalar için tarayıcı belleğini izleyip gerektiğinde dataset’i parçalara böl.
Hangi tarayıcılar desteklenir? Chromium tabanlı tarayıcıların en güncel sürümleri + Firefox ESR testten geçmiştir. Safari’de büyük dosyalarda performans düşebilir.
Çevrimdışı kullanabilir miyim? Evet. npm run build ardından çıkan statik çıktıyı herhangi bir statik sunucuyla dağıtabilirsin.
Ekip içinde paylaşım nasıl yapılır? Build çıktısını kurum içi sunucuya yükle veya Git tabanlı artefaktlarla paylaş; hassas veri dosyalarını depo dışına tut.

License

Moonizer is released under the ISC License and is free for commercial and open-source use.

Project State

Status: PAUSED Completion: 55 Last reviewed: 2026-09-22 Family: visualization Resume cost: medium

Purpose

Veri görselleştirme. Git 2025-10-17.

Current state

package.json ve yaklaşık 22 bin satır ölçümü. README çeviri sistemini de anlatıyor olabilir.

Missing / unfinished

Tek cümlelik ürün durumu yok.

Next action

Son commit pngExport.ts. Oradan devam et, yeni görselleştirme repo'su açma.

Important files

Registry id moonizer. Source scan: 82 files, about 21936 lines, tests=False.

Related projects

none

Name		Name	Last commit message	Last commit date
src		src
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
FEATURES.md		FEATURES.md
PROJECT.md		PROJECT.md
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

Latest commit

History

Folders and files

Repository files navigation