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 byhasOwnProperty()
Usefor-of
loop in combination withkeys()
,values()
and/orentries()
from thecore/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においてそれらを比較すること
目視の完全な過程は以下のとおりである.
リポジトリを変更し、新しいテストを作成したり、既存のテストを更新したりします。
使用
node make tests
あなたのシステムで変更をインクリメンタルにテストします。テキストベースの変更を提出する (
test/baselines/*
)。変更をGitHubにプッシュし、構成項目の完了を待ちます。
新しいテストが追加されると、CIは意外に失敗し、“Missing Baseline Images”(ベースライン画像不足)エラーメッセージを表示する。
もしテストに合格したら、あなたは終わりです。
テストに失敗したら、BokehJS‘sに行ってください GitHub_Actions ペイジ。PRの最新テスト実行を検索し、関連するものをダウンロードします
bokehjs-report
神器。ワークアーカイブを解凍する。
Assuming devtools server is running in the background, go to
/integration/report?platform=name
wherename
is eitherlinux
,macos
orwindows
and review the test output for each platform. If there are no unintentional differences, then commit all new or modified files undertest/baselines/{linux,macos,windows}
.再度あなたの変更を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
それがそうです。周囲コードで観察されたパターンに従い,常識を適用する.