BokehJS

BoehJSは，Bokehユーザが最終的にそれとインタラクションするブラウザ内のクライアント実行タイムライブラリである.このライブラリは主にタイピング原稿で書かれており，Bokeh描画システムのユニークな点の1つである.

BokehJS動機

広範なJavaScript描画ライブラリを研究したところ，それらのアーキテクチャや設計は他のJavaScriptと統合するためであることが分かった.いずれかのサーバ側ラッパを提供する場合、これらのラッパは、常に“第2のクラス”であり、フロントエンドJSのための簡単な構成を生成するように主に設計されている。任意のレベルのインタラクションを提供する少数のJSプロッタライブラリでは，インタラクションは実際にJS自体の外部から構成やカスタマイズすることはできない.JSプロッタライブラリが大型ストリーミングサーバ側データを考慮していることは少なく、Pythonのような別の言語からこれらの施設へのシームレスなアクセスを提供することは考慮されていません。

これにより、Python描画ライブラリの開発者はブラウザのみを“バックエンドターゲット”環境と見なし、その環境のために静止画像やJavaScriptの山を生成します。

目標

BokehJSは独立した一流のJavaScript絵画ライブラリになることを目指しています 交互動作時 動的で高度にカスタマイズ可能な情報可視化を実現する.

界面

BokehJSは、ブラウザにおいて動的かつインタラクティブな可視化を実現するための独立したJavaScriptライブラリである。HTML 5キャンバス上に構築され，より大きなデータセットの高性能プレゼンテーションのために設計されている。そのインタフェースは音響的でパターンは Protovis, しかしその実現は反応性シーン図で構成されています(同様に Chaco) それがそうです。

もっと情報を知りたいのですが、アクセスしてください JavaScriptを用いた開発 それがそうです。

CSSクラス名

The CSS for controlling Bokeh presentation are located in a bokeh.css file that is compiled from several separate .less files in the BokehJS source tree. All CSS classes specifically for Bokeh DOM elements are prefixed with the string bk-. For instance some examples are: .bk-plot, .bk-toolbar-button, etc.

発展

BokehJSのソースコードは bokehjs/ Bokehのmonorepoリポジトリ内のディレクトリ.他のすべての命令とシェル命令は仮定しています bokehjs/ 現在のカタログです。

BokehJSを使用する際に従うべきいくつかの基準：

  • Do not use for-in loops, especially unguarded by hasOwnProperty() Use for-of loop in combination with keys(), values() and/or entries() from the core/util/object module instead.

要求

  • ノード12。*

  • NPM 6.14+(最新バージョン)

  • Chrome Browser 80+または等価ブラウザ

Condaを使用してNodeJSをインストールすることができます：

$ conda install -c conda-forge nodejs

正式なインストールに従うか instructions それがそうです。

NodeJSのインストールまたは更新後またはNPM要求時にNPMをアップグレードしてください。

$ npm install -g npm

公式サポートのプラットフォームは以下の通り。

  • Linux Ubuntu 18.04+または同等のバージョン

  • Windows 10(またはServer 2019)

  • MacOS 10.15

BokehJSは、上記のソフトウェアの異なるプラットフォームやバージョンで開発することができるが、結果は、特にテスト(特に視覚テスト)において異なる可能性がある。

家を建てる.

BoehJSの構築は内部ツールを用いて保守されており，このツールはGUPPに視覚的に類似している.すべての命令は node make (GNU makeと混同しないでください)。

最も一般的なコマンド：

  • node make build

  • node make test

  • node make lint

使用 node make help すべての利用可能なコマンドを挙げてください。

node make 自動運転 npm install いつでもどこでも package.json 変化する。

ご利用いただけます tsc エラーチェックに直接使用します(例えばIDEで)。しかし，AST変換に依存して実行可能なライブラリコードを生成するため，コード発行には用いない.

テストをする

BokehJSテスト使用 node make test 指揮する。以下のコマンドを使用して個別のテストキットを実行することができます node make test:suite_name それがそうです。既知の試験キットは、

  • node make test:size

  • node make test:defaults

  • node make test:unit

  • node make test:integration

最後の2つは使えます node make test:lib それがそうです。ユニットおよび統合テストは、正しい設定を使用して自動的に起動され、テスト結果の一貫性を保証するWebブラウザで動作する(要求を参照)。

視覚テストの出力を見るには、BokehJSのDevToolsサーバを起動してください。

$ node test/devtools server
listening on 127.0.0.1:5777

ナビゲーションしています /integration/report それがそうです。DevToolsサーバはまた、手動検査およびデバッグテストのために使用することができる。そのため，以下の端点を用いることができる.

  • /unit

  • /defaults

  • /integration

これらはBokehJSとテストをロードするが，何の操作も実行しない.あなたは発表しなければならない Tests.run_all() JavaScriptコンソールにありますこれにより、コードを実行する前にブレークポイントを設定することができます。文字列キーワードまたは正規表現を提供することでテストを抽出することができます。あるいは、以下のエンドポイントを使用してすぐにテストを実行することができます。

  • /unit/run

  • /defaults/run

  • /integration/run

ご利用いただけます ?k=some%20text キーワードごとにテストを選別するには、以下の操作を実行してください。

CIと視覚テスト

test:integration 2つのタイプのテストを実行します

  • テキストベースラインテスト

  • 視覚/スクリーンショットテスト

テキストベースラインは、プラットフォームを介して互換性があり、ローカル(サポートされているプラットフォーム上)またはCIで生成することができる。視覚テストはプラットフォームに依存し、システム構成にかなり敏感である(特にフォント提示における差異)。視覚テストはローカルに実行されてもよいが、3つのサポートされているプラットフォームのすべての基準画像が更新されなければならないことを考慮すると、第1の方法は、画像を生成し、CIにおいてそれらを比較すること

目視の完全な過程は以下のとおりである.

  1. リポジトリを変更し、新しいテストを作成したり、既存のテストを更新したりします。

  2. 使用 node make tests あなたのシステムで変更をインクリメンタルにテストします。

  3. テキストベースの変更を提出する (test/baselines/* ）。

  4. 変更をGitHubにプッシュし、構成項目の完了を待ちます。

  5. 新しいテストが追加されると、CIは意外に失敗し、“Missing Baseline Images”(ベースライン画像不足)エラーメッセージを表示する。

  6. もしテストに合格したら、あなたは終わりです。

  7. テストに失敗したら、BokehJS‘sに行ってください GitHub_Actions ペイジ。PRの最新テスト実行を検索し、関連するものをダウンロードします bokehjs-report 神器。

  8. ワークアーカイブを解凍する。

  9. Assuming devtools server is running in the background, go to /integration/report?platform=name where name is either linux, macos or windows and review the test output for each platform. If there are no unintentional differences, then commit all new or modified files under test/baselines/{linux,macos,windows}.

  10. 再度あなたの変更をGitHubにプッシュし、今回のテストが合格したかどうかを検証します。

注釈

監視を確保する test/baselines カタログ、そうすれば、あなたは不必要な書類を提出しません。もしそうすれば、後続のテストは失敗するだろう。

最小モデル/ビューモジュール

モデル(およびビュー)には様々な形式や大きさがある.少なくとも，1つのモデルを実現した.“視覚”モデルが実現されている場合には，ビューが出現する可能性がある.最小モデル/ビューモジュールを以下に示す.

import {BaseModel, BaseModelView} from "models/..."

export class SomeModelView extends BaseModelView {
  model: SomeModel

  initialize(): void {
    super.initialize()
    // perform view initialization (remove if not needed)
  }

  async lazy_initialize(): Promise<void> {
    await super.lazy_initialize()
    // perform view lazy initialization (remove if not needed)
  }
}

export namespace SomeModel {
  export type Attrs = p.AttrsOf<Props>

  export type Props = BaseModel.Props & {
    some_property: p.Property<number>
    // add more property declarations
  }
}

export interface SomeModel extends SomeModel.Attrs {}

export class SomeModel extends BaseModel {
  properties: SomeModel.Props
  __view_type__: SomeModelView

  // do not remove this constructor, or you won't be
  // able to use `new SomeModel({some_property: 1})`
  constructor(attrs?: Partial<SomeModel.Attrs>) {
    super(attrs)
  }

  static init_SomeModel(): void {
    this.prototype.default_view = SomeModelView

    this.define<SomeModel.Props>({
      some_property: [ p.Number, 0 ],
      // add more property definitions
    })
  }
}

このような些細なモジュールの場合、コードの大部分はテンプレートにすぎず、BoehJSのコードが静的にタイプチェックを行い、さらに使用するための有用なタイプ宣言(テスト中またはユーザによって使用される)を生成するために有用なタイプ宣言を生成する。

コードスタイルガイド

BokehJSには明確なスタイルガイドがありません。あなたの変更をフォーマットで一致させます。使用 node make lint それがそうです。周囲コードで観察されたパターンに従い，常識を適用する.