creative-charts

A sophisticated collection of creative chart components with Material-UI theming support, featuring protected/obfuscated builds for commercial use.

Features

• 🎨 Material-UI Integration: Seamless integration with MUI themes
• 🔒 Smart Protection: Conditional debugger protection (production only)
• 📊 Interactive Components: Rich hover effects and tooltips
• 🎯 TypeScript Support: Full type safety and IntelliSense
• 🌙 Dark Mode Ready: Built-in dark theme support
• 📱 Responsive Design: Adapts to different screen sizes
• 🛠️ Development Friendly: Debug protection disabled in dev mode

Installation

npm install creative-charts

Quick Start

import React from "react";
import { Heatmap, darkTheme } from "creative-charts";
import { ThemeProvider } from "@mui/material/styles";

const data = [
  { row: 0, col: 0, value: 10, category: "Sales", avgScore: 85, gap: 5 },
  { row: 0, col: 1, value: 20, category: "Marketing", avgScore: 75, gap: -2 },
  // ... more data
];

function App() {
  return (
    <ThemeProvider theme={darkTheme}>
      <Heatmap data={data} rows={5} cols={5} cellSize={60} cellSpacing={4} />
    </ThemeProvider>
  );
}

Components

Heatmap

Interactive heatmap component with customizable styling and hover effects.

Props

| Prop | Type | Default | Description | | ------------- | ------------------------------------------ | ------- | --------------------------- | | data | HeatmapDataPoint[] | - | Array of data points | | rows | number | - | Number of rows | | cols | number | - | Number of columns | | cellSize | number | 60 | Size of each cell in pixels | | cellSpacing | number | 4 | Spacing between cells | | colorScale | (value: number) => string | - | Custom color scale function | | onCellHover | (data: HeatmapDataPoint \| null) => void | - | Hover callback |

Data Format

interface HeatmapDataPoint {
  row: number;
  col: number;
  value: number;
  category?: string;
  avgScore?: number;
  gap?: number;
}

Theming

The package includes a sophisticated dark theme with purple accents:

import { darkTheme } from "creative-charts";
import { ThemeProvider } from "@mui/material/styles";

// Use the included theme
<ThemeProvider theme={darkTheme}>{/* Your components */}</ThemeProvider>;

Custom Theming

Components automatically adapt to your MUI theme's primary color:

import { createTheme } from "@mui/material/styles";

const customTheme = createTheme({
  palette: {
    primary: {
      main: "#your-color",
    },
  },
});

Environment Utilities

The package includes utilities for environment detection and development-friendly logging:

import { isProduction, isDevelopment, devLog } from "creative-charts";

// Check environment
if (isProduction()) {
  // Production-specific code
  // Debugger protection is active
}

if (isDevelopment()) {
  // Development-specific code
  // Full debugging capabilities
}

// Development-only logging
devLog("This only appears in development");

Debug Protection

The protected build includes smart debugger protection that:

• ✅ Only activates in production (NODE_ENV === 'production')
• ✅ SSR/Hydration Safe: No server-side interference
• ✅ Allows normal debugging in development
• ✅ Detects DevTools and debugging attempts
• ✅ Includes console output protection
• ✅ Post-hydration initialization: Starts after React hydration completes

Preventing Hydration Mismatches

For Next.js applications, use the included ClientOnly component to prevent hydration issues:

import { ClientOnly, Heatmap } from "creative-charts";

function MyPage() {
  return (
    <ClientOnly fallback={<div>Loading chart...</div>}>
      <Heatmap data={data} rows={5} cols={5} />
    </ClientOnly>
  );
}

Development

# Install dependencies
npm install

# Start development playground
npm run dev:playground

# Build for development (with source maps)
npm run build:dev

# Build for production
npm run build

# Build protected version (with anti-debug)
npm run build:protected

License

ISC License

Support