#!/bin/bash
###############################################################################
# Approach C (VChart Component) Quick Start Script
#
# This script helps you get started with the VChart component approach
###############################################################################
set -e
# Colors for output
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
BLUE='\033[0;34m'
BOLD='\033[1m'
NC='\033[0m' # No Color
echo -e "${BOLD}${BLUE}╔════════════════════════════════════════════════════════════════╗${NC}"
echo -e "${BOLD}${BLUE}║ TikTok Analytics - Approach C: VChart Component ║${NC}"
echo -e "${BOLD}${BLUE}║ Quick Start Guide ║${NC}"
echo -e "${BOLD}${BLUE}╚════════════════════════════════════════════════════════════════╝${NC}\n"
# Configuration
DEMO_HTML="src/vchart-component/demo.html"
PROJECT_ROOT="/Users/mdch/hype-dash"
# Step 1: Check dependencies
echo -e "${YELLOW}Step 1: Checking dependencies...${NC}"
if ! command -v node &> /dev/null; then
echo -e "${RED}✗ Node.js is not installed${NC}"
echo " Please install Node.js from https://nodejs.org/"
exit 1
else
NODE_VERSION=$(node --version)
echo -e "${GREEN}✓ Node.js installed: ${NODE_VERSION}${NC}"
fi
if ! command -v npm &> /dev/null; then
echo -e "${RED}✗ npm is not installed${NC}"
exit 1
else
NPM_VERSION=$(npm --version)
echo -e "${GREEN}✓ npm installed: ${NPM_VERSION}${NC}"
fi
# Check if VChart dependencies are installed
if npm list @visactor/vchart &> /dev/null; then
echo -e "${GREEN}✓ VChart dependencies installed${NC}"
else
echo -e "${YELLOW}! VChart dependencies not found${NC}"
echo " Installing now..."
npm install --no-save @visactor/vchart@latest @visactor/lark-vchart@latest
fi
echo ""
# Step 2: Verify demo.html exists
echo -e "${YELLOW}Step 2: Verifying demo files...${NC}"
if [ ! -f "$DEMO_HTML" ]; then
echo -e "${RED}✗ Demo file not found: ${DEMO_HTML}${NC}"
exit 1
else
echo -e "${GREEN}✓ Demo file found: ${DEMO_HTML}${NC}"
# Check demo.html contains required elements
if grep -q "VChart" "$DEMO_HTML" && \
grep -q "SAMPLE_DATA" "$DEMO_HTML" && \
grep -q "createLineChartSpec\|createBarChartSpec\|createPieChartSpec\|createDashboardSpec" "$DEMO_HTML"; then
echo -e "${GREEN}✓ Demo file contains all chart types${NC}"
else
echo -e "${YELLOW}! Demo file may be incomplete${NC}"
fi
fi
echo ""
# Step 3: Open demo.html in browser
echo -e "${YELLOW}Step 3: Opening demo in browser...${NC}"
FULL_PATH="${PROJECT_ROOT}/${DEMO_HTML}"
# Detect OS and open browser
if [[ "$OSTYPE" == "darwin"* ]]; then
# macOS
open "$FULL_PATH"
echo -e "${GREEN}✓ Demo opened in default browser (macOS)${NC}"
elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
# Linux
xdg-open "$FULL_PATH" 2>/dev/null || sensible-browser "$FULL_PATH" 2>/dev/null || echo -e "${YELLOW}! Please open manually: ${FULL_PATH}${NC}"
echo -e "${GREEN}✓ Demo opened in default browser (Linux)${NC}"
elif [[ "$OSTYPE" == "msys" ]] || [[ "$OSTYPE" == "cygwin" ]]; then
# Windows
start "$FULL_PATH"
echo -e "${GREEN}✓ Demo opened in default browser (Windows)${NC}"
else
echo -e "${YELLOW}! Could not detect OS. Please open manually:${NC}"
echo " ${FULL_PATH}"
fi
echo ""
# Step 4: Display usage instructions
echo -e "${BOLD}${BLUE}═══════════════════════════════════════════════════════════════${NC}"
echo -e "${BOLD}${GREEN}✓ Approach C Demo Launched Successfully!${NC}"
echo -e "${BOLD}${BLUE}═══════════════════════════════════════════════════════════════${NC}\n"
echo -e "${BOLD}What is Approach C?${NC}"
echo " - Custom React component using VChart library"
echo " - Works both standalone (demo.html) and in React apps"
echo " - 4 chart types: Line, Bar, Pie, Dashboard"
echo " - Fully customizable and production-ready"
echo ""
echo -e "${BOLD}Demo Controls:${NC}"
echo " • Chart Type: Select between Line, Bar, Pie, or Dashboard view"
echo " • Data Source: Toggle between Sample Data and Lark API"
echo " • Refresh: Reload data from selected source"
echo " • Export PNG: Download chart as image"
echo ""
echo -e "${BOLD}Using in Your React App:${NC}"
echo ""
echo " 1. Install dependencies:"
echo " ${BLUE}npm install @visactor/vchart @visactor/lark-vchart${NC}"
echo ""
echo " 2. Import the component:"
echo " ${BLUE}import { VChartComponent } from './src/vchart-component';${NC}"
echo ""
echo " 3. Use in your JSX:"
echo " ${BLUE}<VChartComponent${NC}"
echo " ${BLUE} data={yourTikTokData}${NC}"
echo " ${BLUE} chartType=\"dashboard\"${NC}"
echo " ${BLUE} width=\"100%\"${NC}"
echo " ${BLUE} height={500}${NC}"
echo " ${BLUE}/>${NC}"
echo ""
echo -e "${BOLD}Available npm Scripts:${NC}"
echo " ${GREEN}npm run approach-c:demo${NC} Open standalone demo"
echo " ${GREEN}npm run approach-c:build${NC} Build component for deployment"
echo " ${GREEN}npm run approach-c:quickstart${NC} Run this script again"
echo ""
echo -e "${BOLD}Integration with Lark MCP:${NC}"
echo " The demo can connect to Lark API via MCP proxy:"
echo " 1. Start MCP server: ${BLUE}npm run mcp:start${NC}"
echo " 2. In demo, select 'Data Source: Lark API (MCP Proxy)'"
echo " 3. Click 'Refresh' to load real TikTok data from Lark Base"
echo ""
echo -e "${BOLD}Customization:${NC}"
echo " • Colors: Edit TIKTOK_COLORS in src/vchart-component/index.tsx"
echo " • Chart specs: Modify files in src/vchart-component/specs/"
echo " • Responsive: Use src/vchart-component/responsive.ts utilities"
echo ""
echo -e "${BOLD}Next Steps:${NC}"
echo " 1. Explore the demo to see all chart types"
echo " 2. Try switching between Sample Data and API mode"
echo " 3. Export charts as PNG images"
echo " 4. Integrate into your React app using the component"
echo " 5. Deploy to Lark aPaaS: ${BLUE}npm run approach-c:build${NC}"
echo ""
echo -e "${BOLD}${BLUE}═══════════════════════════════════════════════════════════════${NC}"
echo -e "${BOLD}${GREEN}Happy charting! 📊${NC}"
echo -e "${BOLD}${BLUE}═══════════════════════════════════════════════════════════════${NC}\n"
exit 0
