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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#149 1 comentario 1 reacción 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
79/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
plotly, typescript
Área
data-visualization

Línea de trabajo

Empieza en packages/flint-js/src/plotly/theme.ts y sigue cómo la plantilla Line Chart establece line.shape y cómo el tema aplica la interpolación; compáralo con el tratamiento de _preserveLineShape en Connected Scatter. Reproduce el caso con el ejemplo proporcionado de assemblePlotly y comprueba el line.shape resultante. El trabajo estará completo cuando un interpolate: "linear" explícito siga siendo lineal con ambos temas y las demás opciones de interpolación sigan funcionando.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
4.4k
Forks
256
Merge medio
1 d 16 h
PR fusionados (30 d)
9

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de microsoft/flint-chart

Todos los issues de microsoft/flint-chart

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.