Cómo funciona

Tres diagramas de la biblioteca vista por dentro, con los nombres que usa el código, para que encuentres cada pieza en el fuente. Pasa el puntero por un paso, o llega a él con Tab, para ver las cajas de las que habla. No necesitas nada de esto para usar el gráfico; ayuda cuando escribes una fuente de datos, un plugin o un cambio en la propia biblioteca.

De una fuente de datos a la pantalla

Una vela recorre el mismo camino tanto si viene de un exchange como de tu propio código, y un único almacén la guarda. Todo lo que se dibuja se calcula a partir de ese almacén y de la vista.

1. 1 Entran las velas. A un DataFeed se le pide el histórico (getBars) y se le suscribe para las velas en vivo; un DataAdapter, como BinanceAdapter, lo envía todo como eventos. StreamManager convierte un feed en un adapter, remuestrea al intervalo del gráfico y construye velas a partir de ticks.
2. 2 El gráfico las recibe. chart.connect() escucha los eventos snapshot, barUpdate, barClose y barCorrection. Tu propio código escribe las mismas velas con setData, appendBar, updateLastBar o updateBar, sin necesidad de ningún feed.
3. 3 Un solo almacén. Toda escritura pasa por SeriesStore. Guarda las velas que se muestran, la serie completa mientras se ocultan las velas fuera de horario y la serie en vivo apartada durante una repetición, y le dice al gráfico qué hizo cada escritura.
4. 4 Se calcula lo que se dibuja. DisplaySeries construye lo que dibuja el tipo de gráfico (Heikin Ashi, Renko, Kagi…), en caché hasta que cambian las velas. IndicatorEngine recalcula solo desde la primera vela que cambió. PriceFit ajusta la escala de precios y PaneLayout da tamaño a los paneles.
5. 5 La vista. Viewport guarda qué velas se ven, qué ancho tiene cada una y cuánto se ha desplazado. Arrastrar, la rueda y las teclas la desplazan y la amplían a través de InteractionManager.
6. 6 Un fotograma. RenderEngine marca las capas que cambiaron y las dibuja en el siguiente fotograma de animación; los ticks en vivo se agrupan antes, así que una ráfaga es un solo fotograma. El canvas scene tiene la cuadrícula, las series, los indicadores, los dibujos y los ejes; el canvas top, la cruz y la leyenda, así que mover el puntero solo redibuja ese. Con renderer: 'webgl', un canvas de GPU dibuja debajo las velas y el volumen.
7. 7 De vuelta a tu app. El gráfico informa mediante eventos: crosshairMove, dataUpdate, visibleRangeChange, symbolChange y los demás, listados en la referencia de la API.

Cómo escribir tu propia fuente, en Tiempo real y repetición; el coste de cada fotograma, en Rendimiento.

De qué está hecho ChartWidget

ChartWidget es toda la pantalla de trading alrededor de un Chart. Sus partes son clases pequeñas que solo ven lo que se les entrega.

1. 1 Una clase pública. ChartWidget guarda los métodos públicos y la puesta en marcha. Su constructor es una lista de pasos en el orden en que las partes se necesitan: readOptions, buildRoot, buildToolbar, buildBody, buildChart … finishSetup.
2. 2 Áreas, cada una a través de un host. La repetición, el trading, las alertas, las comparaciones, las listas de seguimiento, la leyenda, los menús, los comandos, los layouts, el dock, Chart Settings, la edición de dibujos y los intervalos son clases propias. Cada una recibe una interfaz host que enumera exactamente lo que usa del widget, y un método público de ChartWidget pasa la llamada a su área.
3. 3 Un gráfico. buildChart crea el único Chart que envuelve el widget. Cada área llega a él a través de su host; ninguna tiene un gráfico propio. El widget escucha los eventos del gráfico para mantener al día la barra de herramientas y la leyenda.
4. 4 Signals. El estado que muestran varias partes es un signal: el tema (look), qué botones de la barra están abiertos (openRoles) y Chart Settings. Un effect actualiza todo lo que lo muestra, así que quien escribe nunca llama a cada actualización a mano.
5. 5 Diálogos al abrirse por primera vez. Los diálogos grandes, el de indicadores, la paleta de comandos y la búsqueda de símbolos están en DIALOGS y cargan su código la primera vez que se abren. Se abren en overlayHost, que pasa dentro del widget en pantalla completa.

Una repetición de velas

Una repetición reproduce el pasado vela a vela en el mismo gráfico, con las velas en vivo apartadas hasta que termina.

1. 1 Elegir una vela. El botón de repetición abre la barra de repetición; hacer clic en una vela, o llamar a replayFrom(), elige dónde empieza.
2. 2 Empezar. chart.replayStart() hace que SeriesStore aparte las velas en vivo y luego carga las velas a reproducir en ReplayManager, que espera en pausa al principio.
3. 3 Paso a paso. Reproducir, pausar, avanzar o retroceder una vela y la velocidad van a ReplayManager. Cada paso envía un evento bar; el gráfico muestra las velas hasta ahí (showReplayed, o appendReplayed al avanzar).
4. 4 Lo que sigue a la repetición. Los indicadores se recalculan desde la vela que cambió, la línea de precio muestra el cierre reproducido y una cuenta de papel opera a los precios reproducidos. Las órdenes y alertas de una cuenta real siguen en vivo.
5. 5 Terminar. En la última vela la repetición se pausa. Al salir se llama a replayStop(): SeriesStore devuelve la serie en vivo y el gráfico vuelve a estar en vivo.

Las opciones y los eventos están en Tiempo real y repetición.