Docs Charts Flow & network

AdjacencyMatrixChart

import { useState } from "react";
const nodeRows = [
  ["web", "Web storefront", 8, "Channels", "var(--accent)"],
  ["mobile", "Mobile app", 6, "Channels", "var(--accent)"],
  ["pos", "Store POS", 4, "Channels", "var(--accent)"],
  ["partner", "Partner portal", 3, "Channels", "var(--accent)"],
  ["gateway", "API gateway", 14, "Edge", "var(--vs-success)"],
  ["cdn", "CDN", 7, "Edge", "var(--vs-success)"],
  ["identity", "Identity", 6, "Core services", "var(--vs-warning)"],
  ["catalog", "Catalog", 10, "Core services", "var(--vs-warning)"],
  ["checkout", "Checkout", 9, "Core services", "var(--vs-warning)"],
  ["search", "Search", 8, "Core services", "var(--vs-warning)"],
  ["inventory", "Inventory", 7, "Platform services", "var(--vs-info)"],
  ["payments", "Payments", 5, "Platform services", "var(--vs-info)"],
  ["orders", "Orders", 8, "Platform services", "var(--vs-info)"],
  ["events", "Event bus", 6, "Platform services", "var(--vs-info)"],
  ["notifications", "Notifications", 4, "Platform services", "var(--vs-info)"],
  ["orders-db", "Orders database", 10, "Data systems", "var(--vs-error)"],
  ["catalog-db", "Catalog database", 8, "Data systems", "var(--vs-error)"],
  ["analytics", "Analytics", 5, "Data systems", "var(--vs-error)"],
] as const;
 
const linkRows = [
  ["web", "gateway", 50], ["mobile", "gateway", 34], ["pos", "gateway", 18],
  ["partner", "gateway", 12], ["web", "cdn", 22], ["mobile", "cdn", 16],
  ["gateway", "identity", 28], ["gateway", "catalog", 42], ["gateway", "checkout", 22],
  ["gateway", "search", 31], ["cdn", "catalog", 14], ["checkout", "identity", 8],
  ["checkout", "catalog", 13], ["checkout", "inventory", 16], ["checkout", "payments", 12],
  ["checkout", "orders", 14], ["checkout", "events", 13], ["catalog", "inventory", 31],
  ["catalog", "catalog-db", 24], ["catalog", "search", 19], ["search", "catalog-db", 11],
  ["orders", "orders-db", 14], ["orders", "notifications", 9], ["orders", "events", 8],
  ["payments", "events", 9], ["payments", "notifications", 6], ["inventory", "events", 5],
  ["inventory", "orders", 7], ["events", "analytics", 27], ["events", "notifications", 8],
] as const;
 
const networkChartDemoFixture = {
  graphNodes: nodeRows.map(([id, label, value, group, color]) => ({ id, label, value, group, color })),
  graphLinks: linkRows.map(([source, target, value]) => ({ source, target, value })),
} as const;
 
import { AdjacencyMatrixChart } from "@grassroot/charts-react";
import { VariantToggle } from "./VariantToggle";
const { graphNodes, graphLinks } = networkChartDemoFixture;
 
export default function AdjacencyMatrixChartDemo() {
  const [values, setValues] = useState<"raw" | "correlation">("raw");
  const [ordering, setOrdering] = useState<"none" | "cluster">("none");
  return (
    <div>
      <VariantToggle
        label="Values"
        options={[
          { value: "raw" as const, label: "Raw" },
          { value: "correlation" as const, label: "Correlation" },
        ]}
        value={values}
        onChange={setValues}
      />
      <VariantToggle
        label="Ordering"
        options={[
          { value: "none" as const, label: "Input" },
          { value: "cluster" as const, label: "Clustered" },
        ]}
        value={ordering}
        onChange={setOrdering}
      />
      <AdjacencyMatrixChart
        nodes={graphNodes}
        links={graphLinks}
        values={values}
        ordering={ordering}
        ariaLabel="Service-to-service request matrix for eighteen commerce platform services; controls switch values and clustering" />
    </div>
  );
}

<script setup lang="ts">
const nodeRows = [
  ["web", "Web storefront", 8, "Channels", "var(--accent)"],
  ["mobile", "Mobile app", 6, "Channels", "var(--accent)"],
  ["pos", "Store POS", 4, "Channels", "var(--accent)"],
  ["partner", "Partner portal", 3, "Channels", "var(--accent)"],
  ["gateway", "API gateway", 14, "Edge", "var(--vs-success)"],
  ["cdn", "CDN", 7, "Edge", "var(--vs-success)"],
  ["identity", "Identity", 6, "Core services", "var(--vs-warning)"],
  ["catalog", "Catalog", 10, "Core services", "var(--vs-warning)"],
  ["checkout", "Checkout", 9, "Core services", "var(--vs-warning)"],
  ["search", "Search", 8, "Core services", "var(--vs-warning)"],
  ["inventory", "Inventory", 7, "Platform services", "var(--vs-info)"],
  ["payments", "Payments", 5, "Platform services", "var(--vs-info)"],
  ["orders", "Orders", 8, "Platform services", "var(--vs-info)"],
  ["events", "Event bus", 6, "Platform services", "var(--vs-info)"],
  ["notifications", "Notifications", 4, "Platform services", "var(--vs-info)"],
  ["orders-db", "Orders database", 10, "Data systems", "var(--vs-error)"],
  ["catalog-db", "Catalog database", 8, "Data systems", "var(--vs-error)"],
  ["analytics", "Analytics", 5, "Data systems", "var(--vs-error)"],
] as const;
 
const linkRows = [
  ["web", "gateway", 50], ["mobile", "gateway", 34], ["pos", "gateway", 18],
  ["partner", "gateway", 12], ["web", "cdn", 22], ["mobile", "cdn", 16],
  ["gateway", "identity", 28], ["gateway", "catalog", 42], ["gateway", "checkout", 22],
  ["gateway", "search", 31], ["cdn", "catalog", 14], ["checkout", "identity", 8],
  ["checkout", "catalog", 13], ["checkout", "inventory", 16], ["checkout", "payments", 12],
  ["checkout", "orders", 14], ["checkout", "events", 13], ["catalog", "inventory", 31],
  ["catalog", "catalog-db", 24], ["catalog", "search", 19], ["search", "catalog-db", 11],
  ["orders", "orders-db", 14], ["orders", "notifications", 9], ["orders", "events", 8],
  ["payments", "events", 9], ["payments", "notifications", 6], ["inventory", "events", 5],
  ["inventory", "orders", 7], ["events", "analytics", 27], ["events", "notifications", 8],
] as const;
 
const networkChartDemoFixture = {
  graphNodes: nodeRows.map(([id, label, value, group, color]) => ({ id, label, value, group, color })),
  graphLinks: linkRows.map(([source, target, value]) => ({ source, target, value })),
} as const;
 
import { ref } from "vue";
import { AdjacencyMatrixChart } from "@grassroot/charts-vue";
import VariantToggle from "./VariantToggle.vue";
 
const values = ref<"raw" | "correlation">("raw");
const ordering = ref<"none" | "cluster">("none");
const valueModes = [
  { value: "raw", label: "Raw" },
  { value: "correlation", label: "Correlation" },
];
const orderingModes = [
  { value: "none", label: "Input" },
  { value: "cluster", label: "Clustered" },
];
const { graphNodes, graphLinks } = networkChartDemoFixture;
</script>
 
<template>
  <div>
    <VariantToggle v-model="values" label="Values" :options="valueModes" />
    <VariantToggle v-model="ordering" label="Ordering" :options="orderingModes" />
    <AdjacencyMatrixChart
      :nodes="graphNodes"
      :links="graphLinks"
      :values="values"
      :ordering="ordering"
      aria-label="Service-to-service request matrix for eighteen commerce platform services; controls switch values and clustering" />
  </div>
</template>

import { ChangeDetectionStrategy, Component, signal } from "@angular/core";
const nodeRows = [
  ["web", "Web storefront", 8, "Channels", "var(--accent)"],
  ["mobile", "Mobile app", 6, "Channels", "var(--accent)"],
  ["pos", "Store POS", 4, "Channels", "var(--accent)"],
  ["partner", "Partner portal", 3, "Channels", "var(--accent)"],
  ["gateway", "API gateway", 14, "Edge", "var(--vs-success)"],
  ["cdn", "CDN", 7, "Edge", "var(--vs-success)"],
  ["identity", "Identity", 6, "Core services", "var(--vs-warning)"],
  ["catalog", "Catalog", 10, "Core services", "var(--vs-warning)"],
  ["checkout", "Checkout", 9, "Core services", "var(--vs-warning)"],
  ["search", "Search", 8, "Core services", "var(--vs-warning)"],
  ["inventory", "Inventory", 7, "Platform services", "var(--vs-info)"],
  ["payments", "Payments", 5, "Platform services", "var(--vs-info)"],
  ["orders", "Orders", 8, "Platform services", "var(--vs-info)"],
  ["events", "Event bus", 6, "Platform services", "var(--vs-info)"],
  ["notifications", "Notifications", 4, "Platform services", "var(--vs-info)"],
  ["orders-db", "Orders database", 10, "Data systems", "var(--vs-error)"],
  ["catalog-db", "Catalog database", 8, "Data systems", "var(--vs-error)"],
  ["analytics", "Analytics", 5, "Data systems", "var(--vs-error)"],
] as const;
 
const linkRows = [
  ["web", "gateway", 50], ["mobile", "gateway", 34], ["pos", "gateway", 18],
  ["partner", "gateway", 12], ["web", "cdn", 22], ["mobile", "cdn", 16],
  ["gateway", "identity", 28], ["gateway", "catalog", 42], ["gateway", "checkout", 22],
  ["gateway", "search", 31], ["cdn", "catalog", 14], ["checkout", "identity", 8],
  ["checkout", "catalog", 13], ["checkout", "inventory", 16], ["checkout", "payments", 12],
  ["checkout", "orders", 14], ["checkout", "events", 13], ["catalog", "inventory", 31],
  ["catalog", "catalog-db", 24], ["catalog", "search", 19], ["search", "catalog-db", 11],
  ["orders", "orders-db", 14], ["orders", "notifications", 9], ["orders", "events", 8],
  ["payments", "events", 9], ["payments", "notifications", 6], ["inventory", "events", 5],
  ["inventory", "orders", 7], ["events", "analytics", 27], ["events", "notifications", 8],
] as const;
 
const networkChartDemoFixture = {
  graphNodes: nodeRows.map(([id, label, value, group, color]) => ({ id, label, value, group, color })),
  graphLinks: linkRows.map(([source, target, value]) => ({ source, target, value })),
} as const;
 
import { GrassrootAdjacencyMatrixChart } from "@grassroot/charts-angular";
import { VariantToggleComponent } from "./VariantToggle.component";
 
@Component({
  selector: "app-adjacency-matrix-chart-chart-demo",
  standalone: true,
  imports: [GrassrootAdjacencyMatrixChart, VariantToggleComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<app-variant-toggle
      label="Values"
      [options]="valueModes"
      [value]="values()"
      (valueChange)="setValues($event)"
    /><app-variant-toggle
      label="Ordering"
      [options]="orderingModes"
      [value]="ordering()"
      (valueChange)="setOrdering($event)"
    /><grassroot-adjacency-matrix-chart
    [nodes]="graphNodes"
    [links]="graphLinks"
    [values]="values()"
    [ordering]="ordering()"
    ariaLabel="Service-to-service request matrix for eighteen commerce platform services; controls switch values and clustering"
  />`,
})
export class AdjacencyMatrixChartDemoComponent {
  readonly values = signal<"raw" | "correlation">("raw");
  readonly ordering = signal<"none" | "cluster">("none");
  readonly valueModes = [
    { value: "raw", label: "Raw" },
    { value: "correlation", label: "Correlation" },
  ] as const;
  readonly orderingModes = [
    { value: "none", label: "Input" },
    { value: "cluster", label: "Clustered" },
  ] as const;
  readonly graphNodes = networkChartDemoFixture.graphNodes;
  readonly graphLinks = networkChartDemoFixture.graphLinks;
  setValues(value: string): void {
    if (value === "raw" || value === "correlation") this.values.set(value);
  }
  setOrdering(value: string): void {
    if (value === "none" || value === "cluster") this.ordering.set(value);
  }
}
 
export default AdjacencyMatrixChartDemoComponent;

<script lang="ts">
const nodeRows = [
  ["web", "Web storefront", 8, "Channels", "var(--accent)"],
  ["mobile", "Mobile app", 6, "Channels", "var(--accent)"],
  ["pos", "Store POS", 4, "Channels", "var(--accent)"],
  ["partner", "Partner portal", 3, "Channels", "var(--accent)"],
  ["gateway", "API gateway", 14, "Edge", "var(--vs-success)"],
  ["cdn", "CDN", 7, "Edge", "var(--vs-success)"],
  ["identity", "Identity", 6, "Core services", "var(--vs-warning)"],
  ["catalog", "Catalog", 10, "Core services", "var(--vs-warning)"],
  ["checkout", "Checkout", 9, "Core services", "var(--vs-warning)"],
  ["search", "Search", 8, "Core services", "var(--vs-warning)"],
  ["inventory", "Inventory", 7, "Platform services", "var(--vs-info)"],
  ["payments", "Payments", 5, "Platform services", "var(--vs-info)"],
  ["orders", "Orders", 8, "Platform services", "var(--vs-info)"],
  ["events", "Event bus", 6, "Platform services", "var(--vs-info)"],
  ["notifications", "Notifications", 4, "Platform services", "var(--vs-info)"],
  ["orders-db", "Orders database", 10, "Data systems", "var(--vs-error)"],
  ["catalog-db", "Catalog database", 8, "Data systems", "var(--vs-error)"],
  ["analytics", "Analytics", 5, "Data systems", "var(--vs-error)"],
] as const;
 
const linkRows = [
  ["web", "gateway", 50], ["mobile", "gateway", 34], ["pos", "gateway", 18],
  ["partner", "gateway", 12], ["web", "cdn", 22], ["mobile", "cdn", 16],
  ["gateway", "identity", 28], ["gateway", "catalog", 42], ["gateway", "checkout", 22],
  ["gateway", "search", 31], ["cdn", "catalog", 14], ["checkout", "identity", 8],
  ["checkout", "catalog", 13], ["checkout", "inventory", 16], ["checkout", "payments", 12],
  ["checkout", "orders", 14], ["checkout", "events", 13], ["catalog", "inventory", 31],
  ["catalog", "catalog-db", 24], ["catalog", "search", 19], ["search", "catalog-db", 11],
  ["orders", "orders-db", 14], ["orders", "notifications", 9], ["orders", "events", 8],
  ["payments", "events", 9], ["payments", "notifications", 6], ["inventory", "events", 5],
  ["inventory", "orders", 7], ["events", "analytics", 27], ["events", "notifications", 8],
] as const;
 
const networkChartDemoFixture = {
  graphNodes: nodeRows.map(([id, label, value, group, color]) => ({ id, label, value, group, color })),
  graphLinks: linkRows.map(([source, target, value]) => ({ source, target, value })),
} as const;
 
import { AdjacencyMatrixChart } from "@grassroot/charts-svelte";
  import VariantToggle from "./VariantToggle.svelte";
  let values = $state<"raw" | "correlation">("raw");
  let ordering = $state<"none" | "cluster">("none");
  const valueModes = [
    { value: "raw", label: "Raw" },
    { value: "correlation", label: "Correlation" },
  ];
  const orderingModes = [
    { value: "none", label: "Input" },
    { value: "cluster", label: "Clustered" },
  ];
  const { graphNodes, graphLinks } = networkChartDemoFixture;
</script>
 
<div>
  <VariantToggle
    label="Values"
    options={valueModes}
    value={values}
    onchange={(value) => (values = value as typeof values)}
  />
  <VariantToggle
    label="Ordering"
    options={orderingModes}
    value={ordering}
    onchange={(value) => (ordering = value as typeof ordering)}
  />
  <AdjacencyMatrixChart
    nodes={graphNodes}
    links={graphLinks}
    {values}
    {ordering}
    ariaLabel="Service-to-service request matrix for eighteen commerce platform services; controls switch values and clustering" />
</div>

/** @jsxImportSource solid-js */
const nodeRows = [
  ["web", "Web storefront", 8, "Channels", "var(--accent)"],
  ["mobile", "Mobile app", 6, "Channels", "var(--accent)"],
  ["pos", "Store POS", 4, "Channels", "var(--accent)"],
  ["partner", "Partner portal", 3, "Channels", "var(--accent)"],
  ["gateway", "API gateway", 14, "Edge", "var(--vs-success)"],
  ["cdn", "CDN", 7, "Edge", "var(--vs-success)"],
  ["identity", "Identity", 6, "Core services", "var(--vs-warning)"],
  ["catalog", "Catalog", 10, "Core services", "var(--vs-warning)"],
  ["checkout", "Checkout", 9, "Core services", "var(--vs-warning)"],
  ["search", "Search", 8, "Core services", "var(--vs-warning)"],
  ["inventory", "Inventory", 7, "Platform services", "var(--vs-info)"],
  ["payments", "Payments", 5, "Platform services", "var(--vs-info)"],
  ["orders", "Orders", 8, "Platform services", "var(--vs-info)"],
  ["events", "Event bus", 6, "Platform services", "var(--vs-info)"],
  ["notifications", "Notifications", 4, "Platform services", "var(--vs-info)"],
  ["orders-db", "Orders database", 10, "Data systems", "var(--vs-error)"],
  ["catalog-db", "Catalog database", 8, "Data systems", "var(--vs-error)"],
  ["analytics", "Analytics", 5, "Data systems", "var(--vs-error)"],
] as const;
 
const linkRows = [
  ["web", "gateway", 50], ["mobile", "gateway", 34], ["pos", "gateway", 18],
  ["partner", "gateway", 12], ["web", "cdn", 22], ["mobile", "cdn", 16],
  ["gateway", "identity", 28], ["gateway", "catalog", 42], ["gateway", "checkout", 22],
  ["gateway", "search", 31], ["cdn", "catalog", 14], ["checkout", "identity", 8],
  ["checkout", "catalog", 13], ["checkout", "inventory", 16], ["checkout", "payments", 12],
  ["checkout", "orders", 14], ["checkout", "events", 13], ["catalog", "inventory", 31],
  ["catalog", "catalog-db", 24], ["catalog", "search", 19], ["search", "catalog-db", 11],
  ["orders", "orders-db", 14], ["orders", "notifications", 9], ["orders", "events", 8],
  ["payments", "events", 9], ["payments", "notifications", 6], ["inventory", "events", 5],
  ["inventory", "orders", 7], ["events", "analytics", 27], ["events", "notifications", 8],
] as const;
 
const networkChartDemoFixture = {
  graphNodes: nodeRows.map(([id, label, value, group, color]) => ({ id, label, value, group, color })),
  graphLinks: linkRows.map(([source, target, value]) => ({ source, target, value })),
} as const;
 
import { createSignal } from "solid-js";
import { AdjacencyMatrixChart } from "@grassroot/charts-solid";
import { VariantToggle } from "./VariantToggle";
const { graphNodes, graphLinks } = networkChartDemoFixture;
 
export default function AdjacencyMatrixChartDemo() {
  const [values, setValues] = createSignal<"raw" | "correlation">("raw");
  const [ordering, setOrdering] = createSignal<"none" | "cluster">("none");
  const valueModes = [
    { value: "raw", label: "Raw" },
    { value: "correlation", label: "Correlation" },
  ];
  const orderingModes = [
    { value: "none", label: "Input" },
    { value: "cluster", label: "Clustered" },
  ];
  return (
    <div>
      <VariantToggle
        label="Values"
        options={valueModes}
        value={values}
        onChange={(value) => setValues(value as "raw" | "correlation")}
      />
      <VariantToggle
        label="Ordering"
        options={orderingModes}
        value={ordering}
        onChange={(value) => setOrdering(value as "none" | "cluster")}
      />
      <AdjacencyMatrixChart
        nodes={graphNodes}
        links={graphLinks}
        values={values()}
        ordering={ordering()}
        ariaLabel="Service-to-service request matrix for eighteen commerce platform services; controls switch values and clustering" />
    </div>
  );
}

Installation

API Reference

Import

import { useState } from "react";
import { AdjacencyMatrixChart } from "@grassroot/charts-react";
import { VariantToggle } from "./VariantToggle";

Props

Prop

Type

Default

Requirement

Description

nodes

readonly NetworkNode[]

—

required

—

links

readonly NetworkLink[]

—

required

—

values

"raw" | "correlation" | undefined

—

optional

—

ordering

"none" | "cluster" | undefined

—

optional

—

legend

boolean | import("@grassroot/chart-spec").LegendConfig | undefined

—

optional

—

animation

boolean | import("./base").ExpandedChartAnimationConfig | undefined

—

optional

—

onHiddenSeriesChange

((ids: readonly string[]) => void) | undefined

—

optional

—

onActiveDatumChange

((id: string | null) => void) | undefined

—

optional

—

renderer

ChartRenderer | undefined

—

optional

—

className

string | undefined

—

optional

—

theme

import("@grassroot/theme").PartialChartTheme | undefined

—

optional

—

title

string | undefined

—

optional

—

description

string | undefined

—

optional

—

Prop: nodes
Type: readonly NetworkNode[]
Default: —
Requirement: required
Description: —

Prop: links
Type: readonly NetworkLink[]
Default: —
Requirement: required
Description: —

Prop: values
Type: "raw" | "correlation" | undefined
Default: —
Requirement: optional
Description: —

Prop: ordering
Type: "none" | "cluster" | undefined
Default: —
Requirement: optional
Description: —

Prop: legend
Type: boolean | import("@grassroot/chart-spec").LegendConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: tooltip
Type: boolean | import("./base").ExpandedChartTooltipConfig<unknown> | undefined
Default: —
Requirement: optional
Description: —

Prop: animation
Type: boolean | import("./base").ExpandedChartAnimationConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: onHiddenSeriesChange
Type: ((ids: readonly string[]) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: onActiveDatumChange
Type: ((id: string | null) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: renderer
Type: ChartRenderer | undefined
Default: —
Requirement: optional
Description: —

Prop: className
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: theme
Type: import("@grassroot/theme").PartialChartTheme | undefined
Default: —
Requirement: optional
Description: —

Prop: title
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: description
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: ariaLabel
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: keyboardNavigation
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: width
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: height
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: gpuBackend
Type: ChartGpuBackend | undefined
Default: —
Requirement: optional
Description: —

Prop: rendererStrategy
Type: Partial<import("@grassroot/core").ChartRendererStrategy> | undefined
Default: —
Requirement: optional
Description: —

Prop: renderPlanMode
Type: "svg" | "host" | undefined
Default: —
Requirement: optional
Description: —

Prop: showGrid
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: interactive
Type: boolean | undefined
Default: —
Requirement: optional
Description: Gates every pointer/keyboard interaction the shell owns (hit-test on pointer move, focus-to-first, arrow navigation, Escape) and, with `keyboardNavigation`, whether the plot surface is focusable at all.

Prop: hiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultHiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: activeDatum
Type: string | null | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultActiveDatum
Type: string | null | undefined
Default: —
Requirement: optional
Description: Uncontrolled initial value for the `activeDatum`/`onActiveDatumChange` pair.

Prop: speed
Type: number | undefined
Default: —
Requirement: optional
Description: Playback-speed multiplier for entrance/ambient motion.

Prop: morphDurationMs
Type: number | undefined
Default: —
Requirement: optional
Description: How long a dataset change tweens, in milliseconds.

Prop: replayToken
Type: string | number | undefined
Default: —
Requirement: optional
Description: Changing this value replays the entrance animation.

Prop: selectionMode
Type: SelectionMode | undefined
Default: —
Requirement: optional
Description: —

Prop: selectedIds
Type: SelectionValue | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultSelectedIds
Type: SelectionValue | undefined
Default: —
Requirement: optional
Description: —

Prop: onSelectedIdsChange
Type: ((ids: readonly string[]) => void) | undefined
Default: —
Requirement: optional
Description: —

Events

Event	Payload
`onHiddenSeriesChange`	`((ids: readonly string[]) => void) \| undefined`
`onActiveDatumChange`	`((id: string \| null) => void) \| undefined`
`onSelectedIdsChange`	`((ids: readonly string[]) => void) \| undefined`

Content regions

children
dataSummary

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.

Import

import { ref } from "vue";
import { AdjacencyMatrixChart } from "@grassroot/charts-vue";
import VariantToggle from "./VariantToggle.vue";

Props

Prop

Type

Default

Requirement

className

string | undefined

—

optional

gpuBackend

"auto" | "webgpu" | "webgl2" | undefined

—

optional

width

number | undefined

—

optional

height

number | undefined

—

optional

renderer

ChartRenderer | undefined

—

optional

rendererStrategy

Partial<ChartRendererStrategy> | undefined

—

optional

renderPlanMode

"svg" | "host" | undefined

"host"

optional

showGrid

boolean | undefined

—

optional

legend

boolean | LegendConfig | undefined

false

optional

animation

ChartAnimationInput | undefined

—

optional

interactive

boolean | undefined

true

optional

keyboardNavigation

boolean | undefined

true

optional

hiddenSeries

readonly string[] | undefined

—

optional

Prop: className
Type: string | undefined
Default: —
Requirement: optional

Prop: gpuBackend
Type: "auto" | "webgpu" | "webgl2" | undefined
Default: —
Requirement: optional

Prop: width
Type: number | undefined
Default: —
Requirement: optional

Prop: height
Type: number | undefined
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer | undefined
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy> | undefined
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host" | undefined
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean | undefined
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig | undefined
Default: false
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig | undefined
Default: true
Requirement: optional

Prop: animation
Type: ChartAnimationInput | undefined
Default: —
Requirement: optional

Prop: interactive
Type: boolean | undefined
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean | undefined
Default: true
Requirement: optional

Prop: hiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[] | undefined
Default: () => []
Requirement: optional

Prop: activeDatum
Type: string | null | undefined
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null | undefined
Default: —
Requirement: optional

Prop: speed
Type: number | undefined
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number | undefined
Default: —
Requirement: optional

Prop: replayToken
Type: string | number | undefined
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme | undefined
Default: —
Requirement: optional

Prop: title
Type: string | undefined
Default: —
Requirement: optional

Prop: description
Type: string | undefined
Default: —
Requirement: optional

Prop: ariaLabel
Type: string | undefined
Default: —
Requirement: optional

Prop: nodes
Type: readonly NetworkNode[]
Default: —
Requirement: required

Prop: links
Type: readonly NetworkLink[]
Default: —
Requirement: required

Prop: values
Type: "raw" | "correlation" | undefined
Default: —
Requirement: optional

Prop: ordering
Type: "none" | "cluster" | undefined
Default: —
Requirement: optional

Prop: selectionMode
Type: SelectionMode | undefined
Default: "none"
Requirement: optional

Prop: selectedIds
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: readonly string[] | undefined
Default: —
Requirement: optional

Events

Event	Payload
`hiddenSeriesChange`	`[ids: readonly string[]]`
`activeDatumChange`	`[id: string \| null]`
`selectedIdsChange`	`[ids: readonly string[]]`

Content regions

dataSummary
default

Import

import { ChangeDetectionStrategy, Component, signal } from "@angular/core";
import { GrassrootAdjacencyMatrixChart } from "@grassroot/charts-angular";
import { VariantToggleComponent } from "./VariantToggle.component";

Props

Prop

Type

Default

Requirement

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

—

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

ariaLabel

string

—

optional

title

string

—

optional

description

string

—

optional

theme

PartialChartTheme

—

optional

animation

ChartAnimationInput

—

optional

interactive

boolean

true

optional

keyboardNavigation

boolean

true

optional

legend

boolean | LegendConfig

—

optional

hiddenSeries

readonly string[]

—

optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: true
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: []
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: null
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: selectionMode
Type: SelectionMode
Default: "none"
Requirement: optional

Prop: selectedIds
Type: SelectionValue
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: SelectionValue
Default: —
Requirement: optional

Prop: onSelectedIdsChange
Type: (ids: SelectionValue) => void
Default: —
Requirement: optional

Prop: nodes
Type: readonly NetworkNode[]
Default: —
Requirement: required

Prop: links
Type: readonly NetworkLink[]
Default: —
Requirement: required

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: className
Type: string
Default: —
Requirement: optional

Prop: values
Type: AdjacencyMatrixChartOptions["values"]
Default: —
Requirement: optional

Prop: ordering
Type: AdjacencyMatrixChartOptions["ordering"]
Default: —
Requirement: optional

Events

Event	Payload
`activeDatumChange`	`string \| null`
`hiddenSeriesChange`	`readonly string[]`
`selectedIdsChange`	`readonly string[]`

Content regions

dataSummary
default

Import

import { AdjacencyMatrixChart } from "@grassroot/charts-svelte";
import VariantToggle from "./VariantToggle.svelte";

Props

Prop

Type

Default

Requirement

nodes

readonly NetworkNode[]

—

required

links

readonly NetworkLink[]

—

required

values

AdjacencyMatrixChartOptions["values"]

—

optional

ordering

AdjacencyMatrixChartOptions["ordering"]

—

optional

selectionMode

"none" | "single" | "multiple"

"none"

optional

selectedIds

readonly string[]

—

optional

defaultSelectedIds

readonly string[]

—

optional

onSelectedIdsChange

(ids: readonly string[]) => void

—

optional

onHiddenSeriesChange

(ids: readonly string[]) => void

—

optional

onActiveDatumChange

(id: string | null) => void

—

optional

class

string

—

optional

style

string

—

optional

width

number

—

optional

height

number

—

optional

Prop: nodes
Type: readonly NetworkNode[]
Default: —
Requirement: required

Prop: links
Type: readonly NetworkLink[]
Default: —
Requirement: required

Prop: values
Type: AdjacencyMatrixChartOptions["values"]
Default: —
Requirement: optional

Prop: ordering
Type: AdjacencyMatrixChartOptions["ordering"]
Default: —
Requirement: optional

Prop: selectionMode
Type: "none" | "single" | "multiple"
Default: "none"
Requirement: optional

Prop: selectedIds
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: readonly string[]
Default: —
Requirement: optional

Prop: onSelectedIdsChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: onActiveDatumChange
Type: (id: string | null) => void
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Prop: style
Type: string
Default: —
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: false
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: true
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: —
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`onSelectedIdsChange`	`(ids: readonly string[]) => void`
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`
`onActiveDatumChange`	`(id: string \| null) => void`

Content regions

children
dataSummary

Import

import { createSignal } from "solid-js";
import { AdjacencyMatrixChart } from "@grassroot/charts-solid";
import { VariantToggle } from "./VariantToggle";

Props

Prop

Type

Default

Requirement

nodes

readonly NetworkNode[]

—

required

links

readonly NetworkLink[]

—

required

values

AdjacencyMatrixChartOptions["values"]

—

optional

ordering

AdjacencyMatrixChartOptions["ordering"]

—

optional

onActiveDatumChange

(id: string | null) => void

—

optional

onHiddenSeriesChange

(ids: readonly string[]) => void

—

optional

class

string

—

optional

style

JSX.CSSProperties

—

optional

width

number

—

optional

height

number

—

optional

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

"auto"

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

Prop: nodes
Type: readonly NetworkNode[]
Default: —
Requirement: required

Prop: links
Type: readonly NetworkLink[]
Default: —
Requirement: required

Prop: values
Type: AdjacencyMatrixChartOptions["values"]
Default: —
Requirement: optional

Prop: ordering
Type: AdjacencyMatrixChartOptions["ordering"]
Default: —
Requirement: optional

Prop: onActiveDatumChange
Type: (id: string | null) => void
Default: —
Requirement: optional

Prop: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Prop: style
Type: JSX.CSSProperties
Default: —
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: "auto"
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: —
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: —
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: —
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Prop: selectionMode
Type: SelectionMode
Default: —
Requirement: optional

Prop: selectedIds
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: readonly string[]
Default: —
Requirement: optional

Prop: onSelectedIdsChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Events

Event	Payload
`onActiveDatumChange`	`(id: string \| null) => void`
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`
`onSelectedIdsChange`	`(ids: readonly string[]) => void`

Content regions

children
dataSummary