Visualisation avec Kino TheoryCraft

Kino TheoryCraft est une librairie de visualisation pour TheoryCraft qui affiche des graphiques de trading interactifs dans les notebooks Livebook. Elle est construite sur TradingView Lightweight Charts, une librairie JavaScript pour la création de graphiques financiers.

Cette librairie est un outil de visualisation. Elle affiche les données de marché (bars, indicateurs) produites par les pipelines TheoryCraft. Elle n'exécute pas de stratégies et ne gère pas de portfolios.

⚠️ Kino TheoryCraft est en développement actif. L'API peut changer.

Installation

Ajoutez à votre notebook Livebook :

Mix.install([
  {:kino_theory_craft, github: "theorycraft-trading/kino_theory_craft"},
  {:theory_craft, github: "theorycraft-trading/theory_craft"},
  # Aussi votre DataFeed si nécessaire
  {:dukascopy, github: "theorycraft-trading/dukascopy"}
])

Modules

La librairie fournit deux modules principaux :

Module Chart

KinoTheoryCraft.Chart fournit une API fluide pour construire des configurations de graphiques.

Créer un Graphique

iex> alias KinoTheoryCraft.Chart

iex> chart = Chart.new(width: :auto, height: 600)

La fonction new/1 crée une struct chart avec une largeur et une hauteur optionnelles.

Attacher une Source de Données

Utilisez set_source/2 pour attacher un MarketSource ou tout enumerable :

iex> chart = Chart.set_source(chart, market_source)

La source fournit les données que les séries peuvent référencer par nom.

Ajouter des Séries

La fonction add_data_from_source/4 ajoute une série qui charge les données de manière lazy depuis la source attachée :

iex> chart =
...>   chart
...>   |> Chart.add_data_from_source("EURUSD", :candlestick)
...>   |> Chart.add_data_from_source("SMA_20", :line)
...>   |> Chart.add_data_from_source("RSI", :line, pane: 1, options: %{color: "#2962ff"})

Paramètres :

• Premier argument : le nom de la donnée dans la source
• Deuxième argument : le type de série
• Options : index de pane et options pour le style de la série

Pour des données pré-calculées, utilisez add_data/5 :

iex> data = [
...>   %{time: ~U[2024-01-01 00:00:00Z], open: 1.10, high: 1.11, low: 1.09, close: 1.105},
...>   %{time: ~U[2024-01-01 00:05:00Z], open: 1.105, high: 1.12, low: 1.10, close: 1.115}
...> ]
iex> chart = Chart.add_data(chart, "EURUSD", :candlestick, data)

Pour des séries vides qui recevront des mises à jour live, utilisez add_series/4 :

iex> chart = Chart.add_series(chart, "EURUSD", :candlestick)

Types de Séries

Style

Les options de graphique et de série suivent l'API Lightweight Charts. Passez chart_options à Chart.new/1 et options lors de l'ajout de séries.

Voir examples.livemd pour des exemples pratiques.

iex> candlestick_options = %{
...>   up_color: "#00bfff",
...>   down_color: "#683ab6",
...>   border_up_color: "#0288d1",
...>   border_down_color: "#4527a0",
...>   wick_up_color: "#0288d1",
...>   wick_down_color: "#4527a0"
...> }

iex> chart_options = %{
...>   time_scale: %{time_visible: true, seconds_visible: true}
...> }

iex> Chart.new(width: :auto, height: 400, chart_options: chart_options)
...> |> Chart.set_source(market_source)
...> |> Chart.add_data_from_source("data_m5", :candlestick, options: candlestick_options)

Disposition Multi-Panneaux

L'option pane organise les séries dans des sections de graphique séparées :

iex> chart =
...>   Chart.new(width: :auto, height: 600)
...>   |> Chart.set_source(market_source)
...>   |> Chart.add_data_from_source("data_m5", :candlestick, pane: 0)
...>   |> Chart.add_data_from_source("sma_20", :line, pane: 0)
...>   |> Chart.add_data_from_source("rsi", :line, pane: 1)
...>   |> Chart.add_data_from_source("volume", :histogram, pane: 2)

Les indices de pane commencent à 0. Les séries dans le même pane partagent la même échelle de prix.

Rendre des Graphiques Statiques

Les charts implémentent le protocole Kino.Render. Retournez simplement un chart depuis une cellule Livebook :

iex> chart

Ou rendez explicitement :

iex> Kino.render(chart)

Module LiveChart

KinoTheoryCraft.LiveChart rend des graphiques qui peuvent recevoir des mises à jour en temps réel.

Créer un LiveChart

iex> alias KinoTheoryCraft.{Chart, LiveChart}

iex> chart =
...>   Chart.new(width: :auto, height: 600)
...>   |> Chart.add_series("EURUSD", :candlestick)

iex> kino = LiveChart.render(chart)
iex> Kino.render(kino)

Mettre à Jour les Données

Remplacer toutes les données d'une série :

iex> LiveChart.set_data(kino, %{
...>   "EURUSD" => [
...>     %{time: ~U[2024-01-01 00:00:00Z], open: 1.10, high: 1.11, low: 1.09, close: 1.105},
...>     %{time: ~U[2024-01-01 00:05:00Z], open: 1.105, high: 1.12, low: 1.10, close: 1.115}
...>   ]
...> })

Ajouter ou mettre à jour des points individuels :

iex> LiveChart.update(kino, %{
...>   "EURUSD" => %{time: ~U[2024-01-01 00:10:00Z], open: 1.115, high: 1.12, low: 1.11, close: 1.118}
...> })

La fonction update/2 accepte aussi des structs MarketEvent des pipelines TheoryCraft.

Fonctions de Contrôle

# Effacer toutes les données des séries
iex> LiveChart.clear(kino)

# Ajuster la vue du graphique aux données visibles
iex> LiveChart.fit_content(kino)

Lightweight Charts

Kino TheoryCraft utilise TradingView Lightweight Charts pour le rendu. Cette librairie JavaScript fournit :

• Rendu performant de séries temporelles financières
• Plusieurs types de séries (chandelier, ligne, zone, histogramme, barre, baseline)
• Gestion des échelles de prix et de temps
• Fonctionnalité de crosshair et tooltip

La librairie gère l'intégration JavaScript en interne. Vous travaillez avec des structures de données Elixir ; la librairie les sérialise au format attendu par Lightweight Charts.

Les valeurs temporelles sont converties des structs DateTime Elixir en timestamps Unix (secondes avec précision milliseconde).

Intégration Livebook

Kino TheoryCraft est construit sur Kino, le framework de composants Livebook. Il utilise :

• Kino.JS pour le rendu de graphiques statiques
• Kino.JS.Live pour les mises à jour en temps réel

Les graphiques se rendent automatiquement dans les cellules Livebook. Les assets JavaScript sont intégrés à la librairie.

Exemples de Cas d'Usage

Inspection de Backtest

Après avoir exécuté un backtest, visualisez l'action de prix :

iex> alias KinoTheoryCraft.Chart
iex> alias TheoryCraft.MarketSource

iex> feed_options = [
...>   instrument: "EUR/USD",
...>   from: ~D[2025-01-01],
...>   to: ~D[2025-01-02]
...> ]

iex> market_source =
...>   %MarketSource{}
...>   |> MarketSource.add_data({Dukascopy.DataFeed, feed_options}, name: "eurusd")
...>   |> MarketSource.resample("m5", bar_only: true, data: "eurusd", name: "eurusd_m5")

iex> Chart.new(width: :auto, height: 400)
...> |> Chart.set_source(market_source)
...> |> Chart.add_data_from_source("eurusd_m5", :candlestick)

Debugging de Stratégies

Utilisez la visualisation pour comprendre pourquoi une stratégie s'est comportée de manière inattendue. Superposez les signaux d'entrée/sortie, les valeurs d'indicateurs et l'action de prix pour identifier les problèmes.

Exploration de Données

Avant de construire des stratégies, explorez visuellement les données de marché. Vérifiez la qualité des données, identifiez des patterns et comprenez le comportement du marché.

Prochaines Étapes

• Guide DataFeed Dukascopy - Téléchargez des données historiques pour la visualisation
• MarketSource et DataFeeds - Comprenez les pipelines de données
• Documentation Lightweight Charts - Apprenez-en plus sur la librairie de graphiques sous-jacente