Plotly: a theme's line interpolation overrides an explicit `interpolate: "linear"`

Aperta Adatta ai principianti
  • Qualcosa non va?
#149 1 commento 1 reazione 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
79/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
plotly, typescript
Ambito
data-visualization

Direzione di ricerca

Inizia da packages/flint-js/src/plotly/theme.ts e segui come il modello Line Chart imposta line.shape e come il tema applica l’interpolazione; confrontalo con la gestione di _preserveLineShape in Connected Scatter. Riproduci il caso con l’esempio assemblePlotly fornito e controlla il line.shape risultante. Il lavoro è completato quando un interpolate: "linear" esplicito rimane lineare con entrambi i temi, mentre le altre scelte di interpolazione continuano a funzionare.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

What happens

With a theme that sets its own line interpolation (Cartoon: monotone, De Stijl: step), a Line Chart whose chartProperties ask for interpolate: "linear" is drawn curved or stepped on Plotly. Other curves are kept, and Vega-Lite keeps all three.

Theme interpolate Plotly line.shape Vega-Lite mark interpolate
(none) linear linear linear
cartoon linear spline linear
cartoon monotone spline monotone
cartoon step-after hv step-after
de-stijl linear hv linear
de-stijl monotone spline monotone
de-stijl step-after hv step-after

Reproduction (flint-chart 1.0.0)

import { assemblePlotly } from "flint-chart/plotly";

const input = {
  data: {
    values: [
      { date: "2025-01-01", value: 4 },
      { date: "2025-06-01", value: 6 },
      { date: "2026-01-01", value: 5 },
    ],
  },
  semantic_types: { date: "DateTime", value: "Quantity" },
  chart_spec: {
    chartType: "Line Chart",
    encodings: {
      x: { field: "date", type: "temporal" },
      y: { field: "value", type: "quantitative" },
    },
    chartProperties: { interpolate: "linear" },
  },
  theme_spec: "cartoon",
};

console.log(assemblePlotly(input).data[0].line.shape); // "spline", expected "linear"

Likely cause

In packages/flint-js/src/plotly/theme.ts, the theme fills in the line shape when it's unset or 'linear':

if (m.interpolate && !trace._preserveLineShape
    && (!trace.line.shape || trace.line.shape === 'linear')) {

The Line Chart template always sets line.shape ('linear' when no curve is asked for), so the theme can't tell an explicit linear from no choice. Connected Scatter avoids this with _preserveLineShape. Perhaps the Line Chart template could set that flag when chartProperties.interpolate is given, or leave line.shape unset when it isn't.

Why it matters to me

I let people pick a curve (straight, smooth, steps) for lab results over time, and a theme on top of that. Straight matters there: it doesn't suggest values between readings that were never measured.

Lingua principale
TypeScript
Stelle
4.5k
Fork
268
Merge medio
1g 16h
PR unite (30g)
9

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di microsoft/flint-chart

Tutte le issue di microsoft/flint-chart

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.