<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HypeLive Chart Components Demo</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📊</text></svg>">
<!-- VChart Library -->
<script src="https://unpkg.com/@visactor/vchart@1.12.7/build/index.min.js"></script>
<style>
:root {
--primary: #667eea;
--secondary: #764ba2;
--bg-dark: #1a1a2e;
--bg-card: #16213e;
--text: #eee;
--text-muted: #a0a0a0;
--border: #2a2a4a;
--success: #10b981;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg-dark);
color: var(--text);
min-height: 100vh;
padding: 24px;
}
.header {
text-align: center;
margin-bottom: 32px;
}
.header h1 {
font-size: 2rem;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 8px;
}
.header p {
color: var(--text-muted);
}
.chart-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
gap: 24px;
max-width: 1600px;
margin: 0 auto;
}
.chart-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
}
.chart-header {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.chart-title {
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.chart-badge {
font-size: 0.7rem;
padding: 2px 8px;
background: rgba(102, 126, 234, 0.2);
color: var(--primary);
border-radius: 10px;
}
.chart-container {
height: 350px;
padding: 16px;
}
.chart-footer {
padding: 12px 20px;
border-top: 1px solid var(--border);
font-size: 0.8rem;
color: var(--text-muted);
}
.code-section {
max-width: 1600px;
margin: 48px auto 0;
}
.code-section h2 {
margin-bottom: 16px;
color: var(--text);
}
.code-block {
background: #0d1117;
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
overflow-x: auto;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 0.85rem;
line-height: 1.6;
}
.code-block code {
color: #c9d1d9;
}
.code-block .keyword { color: #ff7b72; }
.code-block .string { color: #a5d6ff; }
.code-block .comment { color: #8b949e; }
.code-block .function { color: #d2a8ff; }
.code-block .number { color: #79c0ff; }
@media (max-width: 768px) {
.chart-grid {
grid-template-columns: 1fr;
}
body {
padding: 16px;
}
}
</style>
</head>
<body>
<div class="header">
<h1>📊 HypeLive Chart Components</h1>
<p>Available chart types in hype-dash SDK - powered by VChart</p>
</div>
<div class="chart-grid">
<!-- Bar Chart -->
<div class="chart-card">
<div class="chart-header">
<div class="chart-title">
<span>📊</span>
<span>Bar Chart</span>
<span class="chart-badge">bar</span>
</div>
</div>
<div class="chart-container" id="bar-chart"></div>
<div class="chart-footer">Best for: Comparing categories, rankings</div>
</div>
<!-- Line Chart -->
<div class="chart-card">
<div class="chart-header">
<div class="chart-title">
<span>📈</span>
<span>Line Chart</span>
<span class="chart-badge">line</span>
</div>
</div>
<div class="chart-container" id="line-chart"></div>
<div class="chart-footer">Best for: Trends over time, continuous data</div>
</div>
<!-- Pie Chart -->
<div class="chart-card">
<div class="chart-header">
<div class="chart-title">
<span>🥧</span>
<span>Pie Chart</span>
<span class="chart-badge">pie</span>
</div>
</div>
<div class="chart-container" id="pie-chart"></div>
<div class="chart-footer">Best for: Part-to-whole relationships</div>
</div>
<!-- Area Chart -->
<div class="chart-card">
<div class="chart-header">
<div class="chart-title">
<span>🏔️</span>
<span>Area Chart</span>
<span class="chart-badge">area</span>
</div>
</div>
<div class="chart-container" id="area-chart"></div>
<div class="chart-footer">Best for: Volume over time, cumulative totals</div>
</div>
<!-- Scatter Chart -->
<div class="chart-card">
<div class="chart-header">
<div class="chart-title">
<span>⚬</span>
<span>Scatter Plot</span>
<span class="chart-badge">scatter</span>
</div>
</div>
<div class="chart-container" id="scatter-chart"></div>
<div class="chart-footer">Best for: Correlations, distributions</div>
</div>
<!-- Funnel Chart -->
<div class="chart-card">
<div class="chart-header">
<div class="chart-title">
<span>🔻</span>
<span>Funnel Chart</span>
<span class="chart-badge">funnel</span>
</div>
</div>
<div class="chart-container" id="funnel-chart"></div>
<div class="chart-footer">Best for: Conversion flows, sales pipelines</div>
</div>
<!-- Radar Chart -->
<div class="chart-card">
<div class="chart-header">
<div class="chart-title">
<span>🕸️</span>
<span>Radar Chart</span>
<span class="chart-badge">radar</span>
</div>
</div>
<div class="chart-container" id="radar-chart"></div>
<div class="chart-footer">Best for: Multi-dimensional comparisons</div>
</div>
<!-- Stacked Bar -->
<div class="chart-card">
<div class="chart-header">
<div class="chart-title">
<span>📊</span>
<span>Stacked Bar</span>
<span class="chart-badge">bar + stacked</span>
</div>
</div>
<div class="chart-container" id="stacked-bar-chart"></div>
<div class="chart-footer">Best for: Part-to-whole by category</div>
</div>
</div>
<div class="code-section">
<h2>Usage Example</h2>
<div class="code-block">
<code>
<span class="comment">// Import from hype-dash SDK</span>
<span class="keyword">import</span> { createQuickChartConfig, createChartBlockCreator } <span class="keyword">from</span> <span class="string">'hype-dash'</span>;
<span class="comment">// Create chart configuration</span>
<span class="keyword">const</span> chartConfig = <span class="function">createQuickChartConfig</span>({
type: <span class="string">'bar'</span>,
appToken: <span class="string">'your-lark-base-app-token'</span>,
tableId: <span class="string">'tblXXXXXXXXXX'</span>,
xAxisField: <span class="string">'Category'</span>,
yAxisField: <span class="string">'Sales'</span>,
title: <span class="string">'Sales by Category'</span>,
seriesField: <span class="string">'Region'</span> <span class="comment">// Optional: for grouped charts</span>
});
<span class="comment">// Create chart block with options</span>
<span class="keyword">const</span> chartBlock = <span class="function">createChartBlockCreator</span>({
apiKey: <span class="string">'your-api-key'</span>,
defaultOptions: {
showLegend: <span class="keyword">true</span>,
showDataLabels: <span class="keyword">false</span>,
animation: <span class="keyword">true</span>,
colors: [<span class="string">'#3370FF'</span>, <span class="string">'#34C759'</span>, <span class="string">'#FF9500'</span>]
},
refreshInterval: <span class="number">30000</span>
});
<span class="comment">// The chart will automatically fetch data from your Lark Base table</span>
<span class="comment">// and render using VChart</span>
</code>
</div>
</div>
<script>
// Color palette matching HypeLive brand
const colors = ['#667eea', '#764ba2', '#34C759', '#FF9500', '#FF3B30', '#AF52DE', '#5856D6'];
// Sample data for demos
const categoryData = [
{ x: 'Mon', y: 120 },
{ x: 'Tue', y: 200 },
{ x: 'Wed', y: 150 },
{ x: 'Thu', y: 80 },
{ x: 'Fri', y: 230 },
{ x: 'Sat', y: 180 },
{ x: 'Sun', y: 140 }
];
const trendData = [
{ x: 'Jan', y: 1200, series: 'Views' },
{ x: 'Feb', y: 1500, series: 'Views' },
{ x: 'Mar', y: 1800, series: 'Views' },
{ x: 'Apr', y: 2200, series: 'Views' },
{ x: 'May', y: 2800, series: 'Views' },
{ x: 'Jun', y: 3200, series: 'Views' },
{ x: 'Jan', y: 300, series: 'Likes' },
{ x: 'Feb', y: 450, series: 'Likes' },
{ x: 'Mar', y: 520, series: 'Likes' },
{ x: 'Apr', y: 680, series: 'Likes' },
{ x: 'May', y: 820, series: 'Likes' },
{ x: 'Jun', y: 950, series: 'Likes' }
];
const pieData = [
{ x: 'TikTok', y: 45 },
{ x: 'Instagram', y: 28 },
{ x: 'YouTube', y: 18 },
{ x: 'Facebook', y: 9 }
];
const funnelData = [
{ x: 'Impressions', y: 10000 },
{ x: 'Clicks', y: 4500 },
{ x: 'Sign-ups', y: 1200 },
{ x: 'Purchases', y: 350 }
];
const radarData = [
{ x: 'Reach', y: 85, series: 'Campaign A' },
{ x: 'Engagement', y: 70, series: 'Campaign A' },
{ x: 'Conversion', y: 55, series: 'Campaign A' },
{ x: 'Retention', y: 80, series: 'Campaign A' },
{ x: 'ROI', y: 65, series: 'Campaign A' },
{ x: 'Reach', y: 75, series: 'Campaign B' },
{ x: 'Engagement', y: 85, series: 'Campaign B' },
{ x: 'Conversion', y: 45, series: 'Campaign B' },
{ x: 'Retention', y: 60, series: 'Campaign B' },
{ x: 'ROI', y: 90, series: 'Campaign B' }
];
const scatterData = Array.from({ length: 50 }, () => ({
x: Math.floor(Math.random() * 100),
y: Math.floor(Math.random() * 100),
size: Math.floor(Math.random() * 20) + 5
}));
const stackedData = [
{ x: 'Q1', y: 300, series: 'Product A' },
{ x: 'Q2', y: 400, series: 'Product A' },
{ x: 'Q3', y: 350, series: 'Product A' },
{ x: 'Q4', y: 500, series: 'Product A' },
{ x: 'Q1', y: 200, series: 'Product B' },
{ x: 'Q2', y: 280, series: 'Product B' },
{ x: 'Q3', y: 320, series: 'Product B' },
{ x: 'Q4', y: 380, series: 'Product B' },
{ x: 'Q1', y: 150, series: 'Product C' },
{ x: 'Q2', y: 180, series: 'Product C' },
{ x: 'Q3', y: 220, series: 'Product C' },
{ x: 'Q4', y: 260, series: 'Product C' }
];
// Base chart options
const baseOptions = {
padding: { top: 20, right: 20, bottom: 40, left: 50 },
background: 'transparent',
color: colors
};
// 1. Bar Chart
const barChart = new VChart({
...baseOptions,
type: 'bar',
data: [{ values: categoryData }],
xField: 'x',
yField: 'y',
bar: { style: { cornerRadius: 4 } },
axes: [
{ orient: 'bottom', label: { style: { fill: '#a0a0a0' } } },
{ orient: 'left', label: { style: { fill: '#a0a0a0' } } }
]
}, { dom: 'bar-chart' });
barChart.renderSync();
// 2. Line Chart
const lineChart = new VChart({
...baseOptions,
type: 'line',
data: [{ values: trendData }],
xField: 'x',
yField: 'y',
seriesField: 'series',
point: { visible: true },
line: { style: { lineWidth: 3 } },
axes: [
{ orient: 'bottom', label: { style: { fill: '#a0a0a0' } } },
{ orient: 'left', label: { style: { fill: '#a0a0a0' } } }
],
legends: { visible: true, position: 'top' }
}, { dom: 'line-chart' });
lineChart.renderSync();
// 3. Pie Chart
const pieChart = new VChart({
...baseOptions,
type: 'pie',
data: [{ values: pieData }],
valueField: 'y',
categoryField: 'x',
outerRadius: 0.8,
innerRadius: 0.5,
label: { visible: true, position: 'outside' },
legends: { visible: true, position: 'right' }
}, { dom: 'pie-chart' });
pieChart.renderSync();
// 4. Area Chart
const areaChart = new VChart({
...baseOptions,
type: 'area',
data: [{ values: trendData }],
xField: 'x',
yField: 'y',
seriesField: 'series',
stack: true,
area: { style: { fillOpacity: 0.6 } },
axes: [
{ orient: 'bottom', label: { style: { fill: '#a0a0a0' } } },
{ orient: 'left', label: { style: { fill: '#a0a0a0' } } }
],
legends: { visible: true, position: 'top' }
}, { dom: 'area-chart' });
areaChart.renderSync();
// 5. Scatter Chart
const scatterChart = new VChart({
...baseOptions,
type: 'scatter',
data: [{ values: scatterData }],
xField: 'x',
yField: 'y',
sizeField: 'size',
size: { range: [5, 25] },
point: { style: { fillOpacity: 0.7 } },
axes: [
{ orient: 'bottom', label: { style: { fill: '#a0a0a0' } } },
{ orient: 'left', label: { style: { fill: '#a0a0a0' } } }
]
}, { dom: 'scatter-chart' });
scatterChart.renderSync();
// 6. Funnel Chart
const funnelChart = new VChart({
...baseOptions,
type: 'funnel',
data: [{ values: funnelData }],
categoryField: 'x',
valueField: 'y',
label: { visible: true, style: { fill: '#fff' } },
funnel: { style: { cornerRadius: 4 } }
}, { dom: 'funnel-chart' });
funnelChart.renderSync();
// 7. Radar Chart
const radarChart = new VChart({
...baseOptions,
type: 'radar',
data: [{ values: radarData }],
categoryField: 'x',
valueField: 'y',
seriesField: 'series',
area: { visible: true, style: { fillOpacity: 0.3 } },
point: { visible: true },
legends: { visible: true, position: 'top' },
axes: [
{ orient: 'radius', label: { style: { fill: '#a0a0a0' } } },
{ orient: 'angle', label: { style: { fill: '#a0a0a0' } } }
]
}, { dom: 'radar-chart' });
radarChart.renderSync();
// 8. Stacked Bar Chart
const stackedBarChart = new VChart({
...baseOptions,
type: 'bar',
data: [{ values: stackedData }],
xField: 'x',
yField: 'y',
seriesField: 'series',
stack: true,
bar: { style: { cornerRadius: 4 } },
axes: [
{ orient: 'bottom', label: { style: { fill: '#a0a0a0' } } },
{ orient: 'left', label: { style: { fill: '#a0a0a0' } } }
],
legends: { visible: true, position: 'top' }
}, { dom: 'stacked-bar-chart' });
stackedBarChart.renderSync();
</script>
</body>
</html>
