Cohort Analysis Chart

components/cohort-analysis-chart/README.md

@@ -0,0 +1,106 @@
+# Create a downloadable README.md file for the Cohort Analysis Chart
+
+content = """# 📊 Cohort Analysis Chart
+
+An interactive, data-driven cohort heatmap component built with React and Retool Custom Components.  
+It automatically detects dimensions and metrics from your dataset and renders a responsive cohort table with dynamic heatmap visualization and cell-level insights.
+
+---
+
+## ✨ Features
+
+- Automatic field detection (X, Y, Value)
+- Manual field override
+- Heatmap visualization with intensity scaling
+- Cohort table layout (rows = cohorts, columns = time)
+- Interactive cells with selection panel
+- Fully customizable UI (colors, fonts, layout)
+- Max column control (1–12)
+- Optimized performance using React hooks
+- Seamless Retool integration
+
+---
+
+## 🏗️ Tech Stack
+
+- React
+- TypeScript
+- Retool Custom Component API
+
+---
+
+## 📦 Installation
+
+npm install @tryretool/custom-component-support
+
+---
+
+## 🚀 Usage
+
+### Import Component
+
+import CohortAnalysisChart from "./CohortAnalysisChart";
+
+---
+
+## 📊 Sample Data
+
+[
+  { "cohort": "Jan 2024", "month": 1, "retention": 100 },
+  { "cohort": "Jan 2024", "month": 2, "retention": 78 },
+  { "cohort": "Jan 2024", "month": 3, "retention": 65 },
+  { "cohort": "Jan 2024", "month": 4, "retention": 52 },
+
+  { "cohort": "Feb 2024", "month": 1, "retention": 100 },
+  { "cohort": "Feb 2024", "month": 2, "retention": 72 },
+  { "cohort": "Feb 2024", "month": 3, "retention": 60 },
+  { "cohort": "Feb 2024", "month": 4, "retention": 48 },
+
+  { "cohort": "Mar 2024", "month": 1, "retention": 100 },
+  { "cohort": "Mar 2024", "month": 2, "retention": 70 },
+  { "cohort": "Mar 2024", "month": 3, "retention": 58 },
+  { "cohort": "Mar 2024", "month": 4, "retention": 45 }
+]
+
+---
+
+## ▶️ Render
+
+<CohortAnalysisChart />
+
+---
+
+## 🧠 Smart Detection
+
+- Y-axis → cohort (e.g., Jan 2024)
+- X-axis → time (month/week)
+- Value → numeric metric (retention, revenue)
+
+---
+
+## 📊 Visualization
+
+- Heatmap grid
+- Color intensity based on values
+- Handles missing values gracefully
+
+---
+
+## ⚠️ Notes
+
+- Requires Retool environment
+- Data must be an array of objects
+- Only flat data supported
+
+---
+
+## 📄 License
+
+MIT License
+"""
+
+file_path = "/mnt/data/Cohort_Analysis_Chart_README.md"
+with open(file_path, "w") as f:
+    f.write(content)
+
+file_path

components/cohort-analysis-chart/metadata.json

@@ -0,0 +1,17 @@
+{
+  "id": "cohort-analysis-chart",
+  "title": "Cohort Analysis Chart",
+  "author": "@widlestudiollp",
+  "shortDescription": "An interactive cohort heatmap that auto-detects data fields and visualizes retention and trends with dynamic intensity scaling.",
+  "tags": [
+    "Charts",
+    "React",
+    "Data Visualization",
+    "Analytics",
+    "Dashboard",
+    "Heatmap",
+    "Cohort Analysis",
+    "Interactive",
+    "Custom"
+  ]
+}

components/cohort-analysis-chart/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "my-react-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@tryretool/custom-component-support": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "scripts": {
+    "dev": "npx retool-ccl dev",
+    "deploy": "npx retool-ccl deploy",
+    "test": "vitest"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.55",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.1",
+    "postcss-modules": "^6.0.0",
+    "prettier": "^3.0.3",
+    "vitest": "^4.0.17"
+  },
+  "retoolCustomComponentLibraryConfig": {
+    "name": "CohortAnalysisChart",
+    "label": "Cohort Analysis Chart",
+    "description": "Dynamic Chart",
+    "entryPoint": "src/index.tsx",
+    "outputPath": "dist"
+  }
+}