dashboard-technical-stack

Technical implementation guide for dashboard components including GridStack (drag/resize), ECharts (charts), and Tailwind CSS (styling). Referenced by dashboard-builder skill. Do not use directly - use dashboard-builder instead.

Aller à l'installation

Dépôt: BLSQ/mcp_servers
Dernière activité de la source: 29 janvier 2026 à 16:12
Langue détectée de SKILL.md: anglais
Étoiles: 0
Forks: 0

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.

npx skills add https://github.com/BLSQ/mcp_servers --skill dashboard-technical-stack

La commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.

Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

SKILL.md

Instructions source · Aperçu en lecture seule

Retour à la recherche Retour à l’installation

pipeline-builder

Guide for creating OpenHEXA data pipelines. Use when users ask to create a pipeline, build a data pipeline, automate data processing, or schedule data workflows.

2026-03-20

dhis2

Work with DHIS2 health information systems - extract data, query metadata, run validations, manage users, or check system info. Use this skill for ANY DHIS2-related request. It routes to specialized sub-skills and provides centralized client setup and API patterns.

2026-02-20

dhis2-analytics

Query aggregated analytics data from DHIS2. Use for calculated/aggregated values, indicator values, or cross-dimensional analysis. ALWAYS use with dhis2-query-optimization skill. Routed via dhis2 skill for general DHIS2 requests.

2026-02-20

Tout voir dans ce dépôt

/* GridStack item content - flex container */
.grid-stack-item-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* Drag handle styling */
.card-title {
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: #1E3A5F;
    cursor: move;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}

/* Chart wrapper - takes remaining space */
.chart-wrapper {
    flex: 1;
    min-height: 0;
    position: relative;
    padding: 0.5rem;
}

/* ECharts container - absolute positioning required */
.chart-container {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
}

/* Resize handle visibility */
.grid-stack-item:hover .ui-resizable-handle {
    opacity: 1;
}

.ui-resizable-handle {
    opacity: 0;
    transition: opacity 0.2s;
}

function initChart(containerId, option) {
    const container = document.getElementById(containerId);
    const chart = echarts.init(container);
    chart.setOption(option);

    // Store reference for resize handling
    container._echartInstance = chart;

    // ResizeObserver for automatic resizing
    const observer = new ResizeObserver(() => {
        setTimeout(() => chart.resize(), 50);
    });
    observer.observe(container);

    return chart;
}

const chartOption = {
    color: ['#ED4B82', '#4361EE', '#F472B6', '#6366F1', '#1E3A5F'],
    backgroundColor: 'transparent',
    textStyle: {
        color: '#1E3A5F',
        fontFamily: 'Inter, system-ui, sans-serif'
    },
    title: {
        textStyle: { color: '#1E3A5F', fontSize: 16, fontWeight: 600 }
    },
    tooltip: {
        backgroundColor: '#FFFFFF',
        borderColor: '#ED4B82',
        textStyle: { color: '#1E3A5F' }
    },
    legend: {
        textStyle: { color: '#1E3A5F' }
    },
    xAxis: {
        axisLine: { lineStyle: { color: '#E5E7EB' } },
        axisLabel: { color: '#1E3A5F' },
        splitLine: { lineStyle: { color: '#F3F4F6' } }
    },
    yAxis: {
        axisLine: { lineStyle: { color: '#E5E7EB' } },
        axisLabel: { color: '#1E3A5F' },
        splitLine: { lineStyle: { color: '#F3F4F6' } }
    }
};

// Resize all charts after GridStack operations
function resizeAllCharts() {
    document.querySelectorAll('.chart-container').forEach(container => {
        if (container._echartInstance) {
            setTimeout(() => container._echartInstance.resize(), 100);
        }
    });
}

// Listen to GridStack events
grid.on('resizestop', resizeAllCharts);
grid.on('dragstop', resizeAllCharts);
grid.on('change', resizeAllCharts);

// Window resize
window.addEventListener('resize', resizeAllCharts);

<div class="card-title">
    <span class="drag-indicator">⋮⋮</span> Chart Title
</div>

.drag-indicator {
    opacity: 0.5;
    margin-right: 0.5rem;
    font-size: 0.75rem;
}

<p class="text-sm text-gray-500">Drag titles to move • Drag corners to resize</p>

<!-- Container with responsive padding -->
<div class="p-2 md:p-4 lg:p-6">

<!-- Hide on mobile -->
<div class="hidden md:block">

<!-- Responsive text -->
<h1 class="text-lg md:text-xl lg:text-2xl">

<!-- Primary pink -->
<button class="bg-[#ED4B82] hover:bg-[#BE185D] text-white">

<!-- Primary blue -->
<a class="text-[#4361EE] hover:text-[#3730A3]">

<!-- Dark blue text -->
<p class="text-[#1E3A5F]">

<!-- Light pink background -->
<div class="bg-[#FDF2F8]">

<div class="grid-stack-item" gs-w="6" gs-h="4" gs-min-w="3" gs-min-h="3">
    <div class="grid-stack-item-content">
        <div class="card-title flex items-center justify-between">
            <span><span class="drag-indicator opacity-50 mr-2">⋮⋮</span>Chart Title</span>
        </div>
        <div class="chart-wrapper">
            <div id="chart1" class="chart-container"></div>
        </div>
    </div>
</div>

Charts	Layout	Widget Size
1-2	Full or half width	w: 12 or w: 6, h: 5
3-4	2x2 grid	w: 6, h: 4
5+	Distribute evenly	w: 4-6, h: 3-4

dashboard-technical-stack

Options d'installation

Vérifiez les fichiers source