@agentix-e/causality-analyzer-visual

Lit 3 Web Components for causal graph and time series visualization — framework-agnostic, self-describing.

Overview

@agentix-e/causality-analyzer-visual provides three Web Components for rendering causal analysis results. Built with Lit 3 and HTML Canvas / uPlot, they work in any framework (React, Vue, Svelte, vanilla JS) with zero framework lock-in.

Components

Installation

npm install @agentix-e/causality-analyzer-visual
Copy

Quick Start

Causal Graph

<ca-causal-graph></ca-causal-graph>
Copy

import '@agentix-e/causality-analyzer-visual';
import { buildGraphVizData } from '@agentix-e/causality-analyzer-pipeline';

const graphEl = document.querySelector('ca-causal-graph');
const vizData = buildGraphVizData(nodes, edges, rootCauses, anomalousNodes);
graphEl.data = vizData;
Copy

Time Series with Anomaly Regions

<ca-time-series></ca-time-series>
Copy

import { buildTimeseriesVizData } from '@agentix-e/causality-analyzer-pipeline';

const chartEl = document.querySelector('ca-time-series');
chartEl.data = buildTimeseriesVizData(metricData, timestamps, anomalousIndices, 'Memory');
// Anomaly regions are automatically rendered as semi-transparent bands
Copy

Root Cause Ranking

<ca-root-cause-ranking></ca-root-cause-ranking>
Copy

import { buildRankingVizData } from '@agentix-e/causality-analyzer-pipeline';

const rankingEl = document.querySelector('ca-root-cause-ranking');
rankingEl.data = buildRankingVizData(rootCauses, paths);
Copy

Customization

All components use CSS custom properties for theming:

ca-causal-graph {
  --ca-text: #1e293b;
  --ca-anomaly: #dc2626;
  --ca-root-cause: #f59e0b;
  --ca-healthy: #22c55e;
  --ca-edge-weight: #94a3b8;
}
Copy

API Reference

<ca-causal-graph>

<ca-time-series>

<ca-root-cause-ranking>

License

MIT