Dataviz · piloté par store

DataImage

Documenté

Image résolue depuis une ligne de données : image décrit comment construire src et alt (valeur fixe, champ de ligne ou gabarit {{champ}}), row fournit la ligne. Sans import DS : l’adaptateur rend sa propre <img>.

Disponibilité par framework

Framework	Forme
`Svelte`	Composant DataImage (démo live ci-dessous).
`React`	Composant DataImage (démo live ci-dessous, attributs img natifs en plus).
`Vue`	Composant DataImage (démo live ci-dessous).
`Angular`	Absent : aucun adaptateur.

Exemples

La ligne Atlas d’un vrai store minimal alimente le gabarit : le nom du produit est inscrit dans l’image et son texte alternatif.

Image liée à une ligne

Voir le code (Svelte)

<div class="chart-wrapper">
  <DataImage
    image={{"srcTemplate":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200' viewBox='0 0 320 200'%3E%3Crect width='320' height='200' fill='%23eef2f7'/%3E%3Cpath d='M42 144h236L214 71l-46 54-32-37z' fill='%234e79a7'/%3E%3Ccircle cx='92' cy='66' r='20' fill='%23f28e2b'/%3E%3Ctext x='16' y='182' font-family='sans-serif' font-size='20' fill='%230f172a'%3E{{product}}%3C/text%3E%3C/svg%3E","altTemplate":"Product chart for {{product}}","fallbackSrc":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200' viewBox='0 0 320 200'%3E%3Crect width='320' height='200' fill='%23eef2f7'/%3E%3C/svg%3E"}}
    row={{"product":"Atlas","revenue":120}}
  />
</div>

DataImage natif (props src/alt)

Amorce du store

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

const store = createDashboardStore({
  model: {
    dimensions: [{ id: "product", label: "Product", type: "discrete" }],
    measures: [{ id: "revenue", label: "Revenue", aggregation: "sum" }]
  },
  data: [
    { product: "Atlas", revenue: 120 },
    { product: "Beacon", revenue: 80 }
  ]
});

// The row wired into the demo comes from the live store.
const row = store.data[0];

API du composant

Prop	Type	Défaut	Description
`image.src` / `srcField` / `srcTemplate`	`string`	`fallbackSrc` puis `""`	Source, par priorité : gabarit, champ de ligne, valeur fixe.
`image.alt` / `altField` / `altTemplate`	`string`	`""`	Texte alternatif, même priorité (gabarit, champ, valeur).
`image.fallbackSrc`	`string`	non défini	Source de repli quand aucune source ne se résout.
`row`	`Row`	non défini	Ligne alimentant champs et gabarits (tokens {{champ}}).
`class`	`string`	non défini	Classe transmise à l’img (attributs img natifs en plus côté React).

Faux ami assumé : l’homonyme natif DataImage (src, alt, width, height, fit, radius, loading, decoding) prend une URL directe ; cette page documente l’adaptateur dataviz, qui résout son image depuis une ligne et ne compose aucun composant DS.