creative-charts

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