Cardinal Chart PCF para Canvas Apps y Custom Pages

Cardinal Chart es un componente de Microsoft Power Platform construido con Power Apps Component Framework (PCF). Renderiza una curva XY desde JSON, con reglas de orden claras, manejo de duplicados, e integracion con Power Fx para hover y seleccion.

Esta pensado para escenarios reales donde el grafico debe comportarse de forma consistente en Canvas Apps y Custom Pages.

Que es este componente

Es un componente PCF reutilizable para equipos de Power Apps que necesitan una curva XY ligera con contrato JSON claro y comportamiento predecible dentro de la logica de la app.

Para quien es

• Desarrolladores de Power Platform que trabajan con Canvas Apps y Custom Pages
• Equipos que publican componentes PCF con contratos JSON documentados
• Consultores y equipos de producto que necesitan estabilidad en entrega

Get it

• Repositorio GitHub: Just-Boring-Cat/cardinal-chart-pcf
• Listing en PCF Gallery: https://pcf.gallery/ (esta guia se actualizara cuando el listing este activo)

Compatibilidad

• Microsoft Power Platform, Power Apps Canvas Apps y Custom Pages
• Entrada JSON mediante seriesJson con Power Fx para binding y eventos
• Limite practico inicial de render con maxPointsToRender = 2000

Casos de uso comunes

• Tendencias y KPIs donde el orden de los puntos importa
• Series de tiempo donde los duplicados se deben permitir o rechazar de forma intencional
• Graficos interactivos donde un clic dispara logica de la app (filtros, detalles, navegacion)

Inicio rapido

1. Agrega el control a una Canvas App o Custom Page.
2. Vincula seriesJson a un texto JSON compacto.
3. Empieza con valores seguros:
   • orderingMode = "input_order"
   • duplicatePolicy = "allow"
   • hoverValueLabelEnabled = true
   • showPoints = true
   • maxPointsToRender = 2000
4. Conecta acciones del componente:
   • onHoverChanged
   • onSelectionChanged

JSON basico (array)

[
  { "x": 0, "y": 1.23, "label": "Start" },
  { "x": 1, "y": 1.1 }
]

JSON avanzado (object)

{
  "mode": "x_ascending_unique",
  "duplicatePolicy": "error",
  "points": [
    { "x": 1, "y": 1.1 },
    { "x": 0, "y": 1.23 }
  ]
}

Notas:

• mode y duplicatePolicy dentro del JSON tienen prioridad sobre las propiedades del componente.
• Se soporta t como alias de x.

Ejemplo Power Fx

Set(
  varSeriesJson,
  JSON(
    {
      mode: "x_ascending",
      duplicatePolicy: "keep_last",
      points: Table(
        { x: 1, y: 1.23, label: "Start" },
        { x: 1, y: 1.10, label: "Adjusted" },
        { x: 2, y: 1.44 }
      )
    },
    JSONFormat.Compact
  )
);

Modos de orden y duplicados

Modo	Que hace
input_order	Mantiene el orden de entrada. Si existe index, ordena por index.
x_ascending	Ordena por x ascendente.
x_ascending_unique	Ordena por x y exige x unico.
x_strict	Requiere que la entrada ya este en orden estrictamente ascendente por x.

Politica de duplicados (para modos ordenados):

• allow: mantiene duplicados
• error: rechaza duplicados
• keep_first: conserva el primero de cada grupo
• keep_last: conserva el ultimo de cada grupo

Ejemplos (capturas)

Ejemplo 1: orden por indice (input order)

Ejemplo 2: salida ordenada por X

Eventos y salidas

Acciones del componente:

• onHoverChanged
• onSelectionChanged

Salidas utiles:

• Hover: hoveredX, hoveredY, hoveredPointIndex, hoveredPointJson
• Seleccion: selectedX, selectedY, selectedPointIndex, selectedPointJson

Ejemplo:

// CurveChart1.onSelectionChanged
Set(varSelectedPointJson, CurveChart1.selectedPointJson);

// CurveChart1.onHoverChanged
Set(varHoveredPointJson, CurveChart1.hoveredPointJson);

Troubleshooting (rapido)

• Invalid mode '...': usa input_order, x_ascending, x_ascending_unique, o x_strict.
• Invalid duplicatePolicy '...': usa allow, error, keep_first, o keep_last.
• Grafico vacio: valida que cada punto tenga x y y numericos finitos.
• Error en x_strict: ordena primero o cambia a x_ascending.

Enlaces

• Repositorio GitHub: Just-Boring-Cat/cardinal-chart-pcf
• PCF Gallery: objetivo de publicacion https://pcf.gallery/ (esta guia se actualizara cuando el listing este activo)