Migrar a la 2.0

La 2.0 cambia el aspecto por defecto del gráfico y del widget, elimina los nombres que la 1.x había marcado como obsoletos y cambia cuatro comportamientos. Los datos, los diseños guardados, los indicadores, los dibujos, el trading y los temas siguen como estaban. Esta página recoge cada cambio y qué hacer con él.

Instalación

La 2.0 es la versión actual: todos los paquetes son 2.0.0 con la etiqueta latest de npm. La 1.x sigue donde estaba, como @tradecanvas/chart@1, para una página que aún no pueda pasar.

npm install @tradecanvas/chart

# con un componente de framework, también su paquete
npm install @tradecanvas/react
npm install @tradecanvas/vue
npm install @tradecanvas/svelte

El aspecto por defecto

El gráfico y el widget se abren con más aire alrededor de lo que dibujan. Una sola opción conserva el aspecto de la 1.x:

// El widget como era en la 1.x
new ChartWidget(host, { ui: { density: 'classic' } })
widget.setUI({ density: 'classic' })

// Un gráfico propio como era en la 1.x
new Chart(host, { density: 'compact' })

ui: { density: 'compact' } (controles más pequeños) no cambia.

Lo que es distinto por defecto:

Qué	1.x	2.0
Espacio tras la barra más reciente	5 huecos	8 huecos
Libre por encima y por debajo de los precios	9% de la altura	11,5% de la altura
Las barras de un `Chart` por sí solo	classic	golden, con el cuerpo al 62% de su hueco, como ya las dibujaba el widget
La leyenda, desde la esquina del área de dibujo	8 px hacia dentro	12 px hacia dentro
Las cifras de un `Chart` solo (ejes, etiquetas, leyenda)	Una tipografía monoespaciada	La sans del sistema, como el widget y los gráficos financieros; `font: { family: MONO_FONT_FAMILY }` conserva la anterior
El espaciado del widget, `--tcw-space-1` … `-7`	2 · 3 · 5 · 8 · 13 · 21 · 34 px	2 · 4 · 6 · 8 · 12 · 20 · 32 px
El botón de Print	33 px	34 px
Relleno a cada lado del texto de un botón	8 px	12 px

Todos los tamaños y espacios del widget son ahora un número par de píxeles, y las líneas finas miden un píxel de dispositivo de ancho con la pantalla al 125% y al 150% de escala.

Revisa esto en tu código:

CSS que sobrescribe --tcw-space-*, o que da por hecho un control de 33 px.
Código que pasa rightMargin. Cuando se fija, sigue teniendo prioridad.
Los componentes de React, Vue y Svelte ya no fijan rightMargin: 5 por su cuenta. Para conservarlo, pasa density: 'compact' o rightMargin: 5 en options.
Código que lee PRICE_SCALE_MARGIN de @tradecanvas/core o DEFAULT_CHART_OPTIONS.rightMargin: ambos han cambiado de valor.

// React; los componentes de Vue y Svelte reciben las mismas options
<TradeCanvas options={{ density: 'compact' }} />
<TradeCanvas options={{ rightMargin: 5 }} />

Todo lo que fija cada densidad está en Estilos → Densidad.

Nombres eliminados

Todos quedaron obsoletos en la 1.x y ya no existen en la 2.0.

Eliminado	Usa en su lugar
`chart.setTimezone(tz)`	`chart.setTimeZone(tz)`
`chart.getTimezone()`	`chart.getTimeZone()`
`chart.getEffectiveTimezone()`	`chart.getEffectiveTimeZone()`
`chart.getExchangeTimezone()`	`chart.getExchangeTimeZone()`
`chart.setTimezoneOffset(minutes)`	`chart.setTimeZone(minutes)`: minutos al este de UTC, o `null` para la zona del navegador
`EXCHANGE_TIMEZONE`	`EXCHANGE_TIME_ZONE`
`DEFAULT_FONT_FAMILY`	`MONO_FONT_FAMILY`: la monoespaciada, que ya no es la predeterminada
`SymbolInfo.timezone`	`SymbolInfo.timeZone`
`TimeFormatContext.kind === 'date'` en un `timeFormatter`	El eje da `'year'`, `'month'` o `'day'`. Ya no daba `'date'` desde la 1.x, y el tipo ha dejado de incluirlo.
`SessionBreaks.setLocale()` y `SessionBreaks.renderLabels()` (`@tradecanvas/core`)	Quita las llamadas: ninguna de las dos hacía nada.
La clave de texto del widget `replay.barsPerSecond`	Quítala de tu `messages`: no se usaba. El texto de la velocidad de la reproducción es `replay.rate`.

El `timezone` de un símbolo ya no se lee

El campo antiguo no se lee en absoluto. Un símbolo que solo da timezone, venga de tus symbols, de resolveSymbol, de un feed o de un adaptador, se queda sin zona propia:

setTimeZone('exchange') y las fechas de las barras diarias recurren a la zona del mercado, o a UTC;
sus propias sessions no se sombrean (sí las horas del mercado, cuando hay un mercado puesto);
su estado se muestra como el de un mercado que opera las 24 horas, y el panel del símbolo no muestra zona horaria.

Un timezone que sigas pasando se conserva tal cual en getSymbolInfo(), pero nada lo lee.

// 1.x
chart.setSymbolInfo({ symbol: 'AAPL', timezone: 'America/New_York' })

// 2.0
chart.setSymbolInfo({ symbol: 'AAPL', timeZone: 'America/New_York' })

Nombres que no han cambiado

Los nombres se parecen, así que cuidado al buscar y reemplazar. El ajuste del widget se sigue escribiendo timezone:

widget.setSettings({ timezone: 'exchange' })
widget.getSettings().timezone       // 'exchange'

Las claves de texto del widget settings.timezone y menu.chart.timezone también conservan su nombre.

Cómo encontrarlos

Busca en tu código Timezone( y EXCHANGE_TIMEZONE, y timezone: dentro de los objetos de símbolo. TypeScript señala cada nombre eliminado.

Comportamiento que ha cambiado

Estos cambios no van acompañados de ningún cambio de nombre.

Etiquetas del eje de precios en el borde de un panel. La etiqueta que el borde superior o inferior de su panel cortaría no se dibuja. Su línea de la cuadrícula se mantiene.
El panel de precios entre muchos paneles. Por muchos paneles de indicadores que haya abiertos, el panel de precios conserva al menos el 38,2% de la altura del gráfico, y los paneles abiertos se reparten el resto en proporción a sus tamaños. El tamaño fijado para un panel se guarda y vuelve a verse en un gráfico más alto. Antes los paneles conservaban su altura y podían dejar sin ninguna al panel de precios.
Anchos de línea entre píxeles enteros. Una línea con un ancho así ocupa los píxeles de dispositivo enteros inmediatamente inferiores: 1,5 px es un píxel de dispositivo al 100%, donde antes eran dos.
setBarLayout() y setDensity(). La disposición de barras fijada con chart.setBarLayout() en tiempo de ejecución se conserva tras un setDensity() posterior.

Sin cambios

Datos: DataAdapter, DataFeed, setData, appendBar y updateLastBar.
Los diseños y ajustes guardados con la 1.x se cargan como antes.
Los indicadores, los dibujos, el trading, los temas y las claves de estilo conservan sus nombres.