🚀 AP Visualization CLI

Official CLI tool for creating and building custom visualizations for Analytics Plus. Generate professional templates with AP SDK integration, modern styling, and development tools.

📦 Installation

npm install -g @lumel/ap-viz-cli

🚀 Quick Start

Create a new visualization project:

# Create a React TypeScript project
apviz create my-dashboard --template react-ts

# Create a vanilla JavaScript project
apviz create my-chart --template vanilla

# Create in current directory
apviz create . --template react

Build your project for production:

apviz build

📋 Available Templates

| Template | Description | Best For | |----------|-------------|----------| | vanilla | Pure JavaScript with AP SDK | Simple visualizations, learning | | vanilla-ts | TypeScript with type safety | Type-safe JavaScript development | | react | React with modern hooks | Interactive components | | react-ts | React + TypeScript | Enterprise-grade applications |

🛠️ Commands

apviz create [folder] [options]

Create a new AP visualization project with professional templates.

Arguments:

• folder - Target folder name (use "." for current directory)

Options:

• -t, --template <template> - Choose project template (default: vanilla)

Examples:

apviz create my-dashboard --template react-ts
apviz create chart-widget -t vanilla
apviz create . --template react

apviz build

Build and package your visualization project for production.

Features:

• Compiles source code
• Optimizes assets for production
• Creates distribution files
• Validates AP visualization requirements

✨ What's Included

Every template includes:

• 🔧 AP SDK Integration - Pre-configured with Analytics Plus SDK
• 📊 Data Configuration - Ready-to-use pivot configurations
• 🎨 Modern Styling - Professional CSS with responsive design
• 📝 Documentation - Comprehensive comments and guides
• ⚡ Development Server - Hot reload with Vite
• 📦 Build System - Production-ready build configuration
• 🔍 TypeScript Support - Full type safety (TS templates)

📁 Project Structure

my-visualization/
├── src/
│   ├── main.tsx          # AP SDK integration
│   ├── App.tsx           # Main component
│   └── index.css         # Styling
├── public/
│   └── index.html        # HTML template
├── package.json          # Dependencies
├── vite.config.ts        # Build configuration
└── apviz.json           # AP visualization metadata

🔧 Development Workflow

1. Create Project

   apviz create my-chart --template react-ts
   cd my-chart

2. Install Dependencies

   npm install

3. Start Development

   npm run dev

4. Build for Production

   apviz build

📊 AP SDK Features

All templates include pre-configured:

• Data Roles - Category and Value mappings
• Matrix Data View - Structured data access
• Drill-down Support - Interactive data exploration
• Update Handlers - Real-time data updates
• Selection Management - User interaction handling

🎯 Template Details

Vanilla JavaScript

• Pure ES6+ JavaScript
• DOM manipulation
• AP SDK integration
• Modern CSS styling

Vanilla TypeScript

• Full TypeScript support
• Type-safe AP SDK usage
• Enhanced IDE experience
• Compile-time error checking

React

• Modern React with hooks
• Component-based architecture
• JSX templating
• State management

React TypeScript

• Enterprise-grade setup
• Full type safety
• React + TypeScript best practices
• Professional development experience

🔍 Requirements

• Node.js 16.0 or higher
• npm 7.0 or higher
• Analytics Plus environment for deployment

📧 Support

For questions, issues, or feature requests, contact Lumel Technologies.

📄 License

ISC License - Copyright (c) Lumel Technologies

Developed by Lumel Technologies