Drill-down & hierarchies

import { useState } from 'react';
import { SquarifiedTreemap } from '@silverpoint/react/squarified-treemap';
import { SunburstChart } from '@silverpoint/react/sunburst-chart';

// One row per node: { id, parent, name, amount }; the root's parent is null.
export function Budget({ data }: { data: Node[] }) {
  const [root, setRoot] = useState<string | null>(null);
  const keys = { idKey: 'id', parentKey: 'parent', labelKey: 'name', valueKey: 'amount' } as const;
  return (
    <>
      <SquarifiedTreemap data={data} {...keys} rootId={root} onRootChange={setRoot} title="City budget" />
      <SunburstChart data={data} {...keys} rootId={root} onRootChange={setRoot} title="City budget" />
    </>
  );
}

<script setup lang="ts">
import { ref } from 'vue';
import { SpSquarifiedTreemap } from '@silverpoint/vue/squarified-treemap';
import { SpSunburstChart } from '@silverpoint/vue/sunburst-chart';

defineProps<{ data: Node[] }>();
const root = ref<string | null>(null);
</script>

<template>
  <SpSquarifiedTreemap
    :data="data" id-key="id" parent-key="parent" label-key="name" value-key="amount"
    :root-id="root" @root-change="root = $event" title="City budget"
  />
  <SpSunburstChart
    :data="data" id-key="id" parent-key="parent" label-key="name" value-key="amount"
    :root-id="root" @root-change="root = $event" title="City budget"
  />
</template>

import { Component, input, signal } from '@angular/core';
import { SpSquarifiedTreemap } from '@silverpoint/angular/squarified-treemap';
import { SpSunburstChart } from '@silverpoint/angular/sunburst-chart';

@Component({
  selector: 'app-budget',
  imports: [SpSquarifiedTreemap, SpSunburstChart],
  template: `
    <sp-squarified-treemap
      [data]="data()" idKey="id" parentKey="parent" labelKey="name" valueKey="amount"
      [rootId]="root()" (rootChange)="root.set($event)" title="City budget"
    />
    <sp-sunburst-chart
      [data]="data()" idKey="id" parentKey="parent" labelKey="name" valueKey="amount"
      [rootId]="root()" (rootChange)="root.set($event)" title="City budget"
    />
  `,
})
export class Budget {
  readonly data = input.required<Node[]>();
  protected readonly root = signal<string | null>(null);
}

import reflex as rx
from reflex_silverpoint_react import squarified_treemap, sunburst_chart


class Budget(rx.State):
    root: str | None = None

    @rx.event
    def drill(self, node_id: str | None):
        self.root = node_id


KEYS = {"id_key": "id", "parent_key": "parent", "label_key": "name", "value_key": "amount"}

rx.hstack(
    squarified_treemap(data=ROWS, **KEYS, root_id=Budget.root, on_root_change=Budget.drill),
    sunburst_chart(data=ROWS, **KEYS, root_id=Budget.root, on_root_change=Budget.drill),
)