Dataviz · piloté par store

TimeSeriesLineChart

Documenté

Série temporelle continue dérivée d’un DashboardStore : l’axe du temps accepte des horodatages numériques ou des chaînes parsables, avec regroupement optionnel par série, légende et bascule de séries. Sans composant DS sous-jacent : le tracé est propre à l’adaptateur.

Disponibilité par framework

Framework	Forme
`Svelte`	Absent : composant React uniquement.
`React`	Composant TimeSeriesLineChart (démo live ci-dessous).
`Vue`	Absent : composant React uniquement.
`Angular`	Absent : composant React uniquement.

Exemples

Cinq jours de revenu sur un store minimal réel. Seul l’onglet React rend le graphique ; les autres onglets l’énoncent au lieu de rester vides.

Revenu journalier

TimeSeriesLineChart n’existe que côté React : aucun adaptateur Svelte.

Voir le code (Svelte)

<div class="chart-wrapper">
  <TimeSeriesLineChart
    store={store}
    viewId="ts"
    time="t"
    measure="revenue"
    label="Revenu journalier"
  />
</div>

Amorce du store

import { createDashboardStore } from "@sentropic/dataviz-core";
import { TimeSeriesLineChart } from "@sentropic/dataviz-react";

const store = createDashboardStore({
  model: {
    dimensions: [{ id: "t", label: "Day", type: "continuous" }],
    measures: [{ id: "revenue", label: "Revenue", aggregation: "sum" }]
  },
  data: [
    { t: 1, revenue: 42 },
    { t: 2, revenue: 65 },
    { t: 3, revenue: 51 },
    { t: 4, revenue: 88 },
    { t: 5, revenue: 73 }
  ]
});

API du composant

Prop	Type	Défaut	Description
`store`	`DashboardStore`	requis	Store partagé (filtres croisés appliqués pour viewId).
`viewId`	`string`	requis	Identifiant de vue (cross-filter).
`time`	`string`	requis	Dimension temporelle (nombres ou chaînes parsables en dates).
`measure`	`string`	requis	Mesure agrégée par pas de temps.
`series`	`string`	non défini	Dimension de regroupement en séries multiples.
`label`	`string`	requis	Label aria-label du graphique (a11y).
`legend`	`boolean`	`false`	Affiche la légende des séries.
`tone`	`TimeSeriesLineChartTone`	`"category1"`	Gamme sémantique (category1 à category8).
`width` / `height`	`number`	non défini	Dimensions du tracé.
`hiddenSeries` / `onToggleSeries`	`string[] / (id: string) => void`	non défini	Séries masquées et rappel de bascule (contrôle externe).
`formatTime` / `formatValue`	`(value, context) => string`	non défini	Formatteurs d’axe et de valeurs.
`className`	`string`	non défini	Classe transmise au conteneur.