Widget de gráfico de área para MCP Apps

#Cuándo usar un gráfico de área

Un gráfico de área sirve para un valor que cambia con el tiempo, cuando la forma del cambio importa tanto como la última cifra. Es el widget para "¿cómo evoluciona X?":

• Métricas de producto: usuarios activos, altas o sesiones por día, semana o mes.
• Facturación y ventas en el tiempo, desde tu tool de cobros o tu CRM.
• Tráfico y rendimiento: visitas al día, tiempo de respuesta por hora, errores por versión.
• Cualquier cosa que una tool devuelva como serie con fechas: stock, volumen de soporte, consumo de energía.

Dibuja una sola serie. Para comparar categorías, usa el gráfico de barras; para poner varias cifras con su variación una al lado de otra, las métricas.

#Cómo lo rellena el modelo

El esquema es corto a propósito. title y points son obligatorios, subtitle y unit son opcionales, y cada punto es un label y un value. Hacen falta al menos dos puntos, porque una tendencia necesita un principio y un final.

Las etiquetas son cadenas, así que el modelo puede mandar "lun", "S12", "sep" o una fecha entera, lo que mejor se lea en el eje. Los puntos van del más antiguo al más reciente: la cabecera compara el último valor con el primero, así que el periodo que devuelva tu tool decide qué significa "cambio". Si la gente va a preguntar "¿desde cuándo?", pon el periodo en el subtitle (el esquema tiene sitio para él) o añade esa pista a la descripción del campo para que el modelo lo rellene.

unit sale junto al último valor, para cosas como "€", "ms" o "usuarios".

#Qué hace en el chat

Detrás no hay ninguna librería de gráficos. Dos filtros de Liquid, svg_line y svg_area, convierten los valores en trazados SVG al pintar la plantilla, así que el widget es autocontenido, no necesita dominios en la CSP y aparece en cuanto el host lo carga. Después la línea se dibuja de izquierda a derecha, el área en degradado aparece debajo y un punto se posa en el último valor. Quien prefiere movimiento reducido ve el gráfico terminado, sin animación.

La cabecera enseña el último valor en grande y el porcentaje de cambio frente al primer punto, con el color positivo del diseño si ha subido y el negativo si ha bajado. La base se queda en cero cuando la serie es positiva, para que una pequeña oscilación no se dibuje como un precipicio.

El gráfico no declara acciones del host: es una respuesta, no un mando.

#Hazlo tuyo

Cada diseño le da su carácter: una sola línea de tinta sobre un relleno apenas visible en Nórdico, una línea de dos colores que brilla en Aurora, un bloque plano con contorno negro y sombra desplazada en Brutalista, una figura impresa con línea roja en Editorial, un tubo luminoso sobre una rejilla de osciloscopio en Neón. También se pone los diseños inspirados en marcas y los que cree tu organización. El markup, los estilos y el esquema se pueden editar: añade una línea de objetivo, enseña el mínimo y el máximo o cambia cómo se calcula la variación.

#Llévalo a tu servidor

Enlaza el gráfico publicado desde tu servidor MCP para que siga cada cambio que publiques, o descarga el HTML y el manifiesto. La guía para añadir una interfaz a tu servidor MCP enseña los dos caminos, y la de temas en MCP Apps explica cómo siguen los colores al modo claro y oscuro.

{
  "title": "Usuarios activos",
  "subtitle": "Por semana",
  "points": [
    {
      "label": "S1",
      "value": 1240
    },
    {
      "label": "S2",
      "value": 1385
    },
    {
      "label": "S3",
      "value": 1310
    },
    {
      "label": "S4",
      "value": 1620
    },
    {
      "label": "S5",
      "value": 1795
    },
    {
      "label": "S6",
      "value": 1710
    },
    {
      "label": "S7",
      "value": 2040
    },
    {
      "label": "S8",
      "value": 2315
    }
  ]
}

{
  "name": "show_area_chart",
  "title": "Gráfico de área",
  "description": "Shows how one value evolves over time as a smooth area chart, with the latest value and its change against the first point. Use it for trends such as revenue, users or traffic per day, week or month.",
  "inputSchema": {
    "type": "object",
    "required": [
      "title",
      "points"
    ],
    "properties": {
      "title": {
        "type": "string"
      },
      "subtitle": {
        "type": "string"
      },
      "unit": {
        "type": "string"
      },
      "points": {
        "type": "array",
        "minItems": 2,
        "items": {
          "type": "object",
          "required": [
            "label",
            "value"
          ],
          "properties": {
            "label": {
              "type": "string"
            },
            "value": {
              "type": "number"
            }
          }
        }
      }
    }
  }
}