@lumel/ap-viz-cli

🚀 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

• Create Project

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

• Install Dependencies

  npm install
  

• Start Development

  npm run dev
  

• 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