Funnel Analysis Library

A comprehensive Angular library for building funnel analysis dashboards with performance visualization and metrics analysis.

Installation

From NPM (once published)

npm install funnel-analysis-lib

Local Development (from this workspace)

# Build the library
npm run build:lib:prod

# The library will be available at dist/funnel-analysis-lib

Usage

Import Components

import { DashboardComponent } from 'funnel-analysis-lib';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, DashboardComponent],
  template: `
    <lib-dashboard [data]="performanceData"></lib-dashboard>
  `
})
export class AppComponent {
  performanceData = { /* your performance data */ };
}

Import Models and Interfaces

import { 
  PerformanceOverviewStructuredV3Interface,
  GradeEnum,
  MetricStatusEnum 
} from 'funnel-analysis-lib';

const assessment: PerformanceOverviewStructuredV3Interface = {
  // your data structure
};

Import Services

import { ModalService, FunnelOrderService } from 'funnel-analysis-lib';

@Injectable()
export class MyService {
  constructor(
    private modalService: ModalService,
    private funnelOrderService: FunnelOrderService
  ) {}
}

Features

• Dashboard Component: Main visualization component for funnel analysis
• Metric Cards: Individual metric display components
• Insight Cards: Actionable insights from funnel data
• Breakdown Sections: Detailed breakdowns by various dimensions (device, channel, etc.)
• Overall Assessment: Summary assessment of funnel health
• Modal Management: Built-in modal service for notifications and dialogs
• Funnel Ordering: Service for organizing and prioritizing funnel items

Styling

The library uses Tailwind CSS for all styling. To use this library in your project, follow these steps:

Step 1: Install Tailwind CSS (if not already installed)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step 2: Configure Tailwind to scan the library files

IMPORTANT: Update your tailwind.config.js to include the library's compiled files:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
    "./node_modules/@eric-emg/funnel-analysis-lib/**/*.{js,mjs}",  // ← ADD THIS LINE
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Note: The path ./node_modules/@eric-emg/funnel-analysis-lib/**/*.{js,mjs} tells Tailwind to scan the compiled library files for class names.

Step 3: Import Tailwind CSS in your global styles

/* In your global styles.css or main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Custom Colors

If you want to use the library's custom color palette, add to your tailwind.config.js:

theme: {
  extend: {
    colors: {
      'symphiq-blue': '#1a56db',
      'symphiq-dark': '#0f172a',
      'symphiq-gray': '#64748b',
    },
  },
}

Building the Library

# Build for production
npm run build:lib:prod

# Build for development
npm run build:lib

# Build everything (library + demo)
npm run build:all

Testing

# Run library tests
ng test funnel-analysis-lib

# Run library tests with watch mode
ng test funnel-analysis-lib --watch

Development

To develop and test the library:

1. Start the demo application which imports the library:

npm start

2. The demo app will hot-reload when you make changes to both the library and demo app

Publishing to NPM

1. Update the version in projects/funnel-analysis-lib/package.json
2. Build the library:

npm run build:lib:prod

3. Publish from the dist folder:

cd dist/funnel-analysis-lib
npm publish

License

MIT