Dataviz · piloté par store

UrlSync

Documenté

Synchronisation déclarative entre un DashboardStore et la chaîne de requête de l’URL (deep-linking) : <UrlSync store /> hydrate le store depuis l’URL au montage, y répercute les mutations du store et se réhydrate sur popstate. Ne rend rien : c’est du câblage, pas du balisage.

Disponibilité par framework

Framework	Forme
`Svelte`	Composant <UrlSync> (démo live ci-dessous).
`React`	Pas de composant : hook useUrlSync(store, options).
`Vue`	Pas de composant : composable useUrlSync(store, options).
`Angular`	Absent : ni composant, ni hook.

Exemples

Un vrai DashboardStore minimal, filtré sur la France : la ligne sous la démo montre la chaîne de requête exacte que la liaison écrit dans l’URL.

Store synchronisé avec l’URL

Voir le code (Svelte)

<div class="chart-wrapper">
  <UrlSync store={store} />
</div>
<p class="docs-demo-context">État encodé dans l’URL : ??dash=%257B%2522filters%2522%253A%257B%2522country%2522%253A%257B%2522kind%2522%253A%2522include%2522%252C%2522values%2522%253A%255B%2522FR%2522%255D%257D%257D%252C%2522selections%2522%253A%257B%257D%252C%2522drill%2522%253A%257B%257D%257D</p>

Amorce du store

import { createDashboardStore } from "@sentropic/dataviz-core";
import { UrlSync } from "@sentropic/dataviz-svelte";

const store = createDashboardStore({
  model: {
    dimensions: [{ id: "country", label: "Country", type: "discrete" }],
    measures: [{ id: "revenue", label: "Revenue", aggregation: "sum" }]
  },
  data: [
    { country: "FR", revenue: 120 },
    { country: "BE", revenue: 80 }
  ]
});

API du composant

Prop	Type	Défaut	Description
`store`	`DashboardStore`	requis	Le store à synchroniser avec la requête (identité capturée une fois).
`options.param`	`string`	`"dash"`	Nom du paramètre de requête lu et écrit.
`options.debounceMs`	`number`	`0`	Fenêtre anti-rebond (ms) avant d’écrire les mutations rapides.
`options.history`	`"replace" \| "push"`	`"replace"`	Stratégie d’historique : replaceState par défaut, pushState sur demande.

Sans composant DS sous-jacent : il n’y a ni table de props héritée, ni tokens. L’état est entièrement sérialisable (filtres, sélections, drill) via stateToQuery / queryToState.