Harmoware-VIS Control component リファレンス

#前提
Harmoware-VISについては別記事
「[Harmoware-VISの紹介](https://qiita.com/ucl_Harmoware_VIS/items/e861e0f651ffde647b6a)」
「[Harmoware-VIS はじめに](https://qiita.com/ucl_Harmoware_VIS/items/8cad0b3c7737a1996e81)」
「[Harmoware-VIS APIリファレンス](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca)」
「[Harmoware-VIS Layersリファレンス](https://qiita.com/ucl_Harmoware_VIS/items/cc65d90488d2f0d66ae1)」
をご覧ください。
#Control component リファレンス
Harmoware-VIS の Control component のリファレンスを解説します。
<hr>
##MovesInput
MovesInputでは、[`movesbase`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#movesbase-object-array)のファイルを選択するダイアログが表示されます。
ファイルを読み込んだ後、[`bounds`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#bounds-object)、[`timeBegin`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#timebegin-number)、[`timeLength`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#timelength-number)、[`movesbase`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#movesbase-object-array)をHarmoware-VISのプロパティに設定します。
[`movesbase`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#movesbase-object-array)の更新には`actions.setMovesBase`を使用します。
更に[`inputFileName`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#inputfilename-object)プロパティの`movesFileName`に入力ファイルの名前を設定します。
<table>
<tr><th>表示サンプル</th></tr>
<tr><td>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/e52d7621-7070-5d7a-1a62-6407be7e81ac.png">
</td></tr></table>

```Examples.js
<MovesInput actions={this.props.actions} />
```

<dl>
<dt>actions(object required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#actions">actions</a>を設定（必須）</dd>
<br>
<dt>i18n(Object option)</dt>
<dd>・Default : <code>{formatError: 'データ形式不正'}</code><br>
フォーマットエラー発生時のアラートキャプションを<code>i18n.formatError</code>に設定</dd>
<br>
<dt>id(string option)</dt>
<dd>htmlタグの属性ID</dd>
<br>
<dt>className(Object option)</dt>
<dd>htmlタグ属性クラス</dd>
<br>
<dt> style(Object option)</dt>
<dd>htmlタグの属性スタイル</dd>
</dl>
<hr>
##DepotsInput
DepotsInputでは、[`depotsBase`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#depotsbase-object-array)のファイルを選択するダイアログが表示されます。
ファイルを読み込んだ後、[`depotsBase`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#depotsbase-object-array)をHarmoware-VISのプロパティに設定します。
[`depotsBase`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#depotsbase-object-array)の更新には`actions.setDepotsBase`を使用します。
更に[`inputFileName`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#inputfilename-object)プロパティの`depotsFileName`に入力ファイルの名前を設定します。
<table>
<tr><th>表示サンプル</th></tr>
<tr><td>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/e52d7621-7070-5d7a-1a62-6407be7e81ac.png">
</td></tr></table>

```Examples.js
<DepotsInput actions={this.props.actions} />
```

<dl>
<dt>actions(object required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#actions">actions</a>を設定（必須）</dd>
<br>
<dt>i18n(Object option)</dt>
<dd>・Default : <code>{formatError: 'データ形式不正'}</code><br>
フォーマットエラー発生時のアラートキャプションを<code>i18n.formatError</code>に設定</dd>
<br>
<dt>id(string option)</dt>
<dd>htmlタグの属性ID</dd>
<br>
<dt>className(Object option)</dt>
<dd>htmlタグ属性クラス</dd>
<br>
<dt> style(Object option)</dt>
<dd>htmlタグの属性スタイル</dd>
</dl>
<hr>
##LinemapInput
LinemapInputでは、[`linemapData`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#linemapdata-object)のファイルを選択するダイアログが表示されます。
ファイルを読み込んだ後、[`linemapData`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#linemapdata-object)をHarmoware-VISのプロパティに設定します。
[`linemapData`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#linemapdata-object)の更新には`actions.setLinemapData`を使用します。
更に[`inputFileName`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#inputfilename-object)プロパティの`linemapFileName`に入力ファイルの名前を設定します。
<table>
<tr><th>表示サンプル</th></tr>
<tr><td>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/e52d7621-7070-5d7a-1a62-6407be7e81ac.png">
</td></tr></table>

```Examples.js
<LinemapInput actions={this.props.actions} />
```

<dl>
<dt>actions(object required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#actions">actions</a>を設定（必須）</dd>
<br>
<dt>i18n(Object option)</dt>
<dd>・Default : <code>{formatError: 'データ形式不正'}</code><br>
フォーマットエラー発生時のアラートキャプションを<code>i18n.formatError</code>に設定</dd>
<br>
<dt>id(string option)</dt>
<dd>htmlタグの属性ID</dd>
<br>
<dt>className(Object option)</dt>
<dd>htmlタグ属性クラス</dd>
<br>
<dt> style(Object option)</dt>
<dd>htmlタグの属性スタイル</dd>
</dl>
<hr>
##LoadingIcon
LoadingIconは、プロパティの`loading`がtrueの場合に画面中央に読み込み中のアイコンを表示します。
<table>
<tr><th>表示サンプル</th></tr>
<tr><td>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/91fdcf08-bb16-0de6-735a-537d88f86ad8.png">
</td></tr></table>

```Examples.js
<LoadingIcon loading={this.props.loading} />
```

<dl>
<dt>loading(boolean required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#loading-boolean"><code>loading</code></a>を設定（必須）</dd>
<br>
<dt>color(string option)</dt>
<dd>・Default : <code>'white'</code><br>
<code>'#XXXXXX'</code>または<code>'#XXX'</code>の形式のカラーハッシュを受け付けます。<br>
また、以下のような基本的な色も受け取ることができます。<br>
<blockquote>
maroon, red, orange, yellow, olive, green, purple, white, fuchsia, lime, teal, aqua, blue, navy, black, gray, silver
</blockquote>
</dd>
</dl>
<hr>
##AddMinutesButton
AddMinutesButtonは、プロパティの`addMinutes`に設定された値（分）で、Harmoware-VIS のプロパティの[`settime`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#settime-number)を更新するボタンを表示します。
<table>
<tr><th>表示サンプル</th></tr>
<tr><td>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/d8997aa2-991d-7c8c-f3b0-08b91322710b.png">
</td></tr></table>

```Examples.js
<AddMinutesButton addMinutes={-5} actions={this.props.actions} />
<AddMinutesButton addMinutes={5} actions={this.props.actions} />
```

<dl>
<dt>addMinutes(number required)</dt>
<dd>・Default : 10<br>
<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#settime-number"><code>settime</code></a>に加算する値（単位：分）を設定（必須）</dd>
<br>
<dt>actions(object required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#actions"><code>actions</code></a>を設定（必須）</dd>
<br>
<dt>children(React.ReactNode option)</dt>
<dd>・Default : （※上記表示サンプルのデータ）<br>
buttonタグのchildrenを設定</dd>
<br>
<dt>i18n(Object option)</dt>
<dd>・Default : <code>{minutesCaption: '️min'}</code><br>
ボタンの単位キャプションを<code>i18n.minutesCaption</code>に設定</dd>
<br>
<dt>className(string option)</dt>
<dd>・Default : <code>'harmovis_button'</code><br>
htmlタグ属性クラス</dd>
<br>
<dt>title(string option)</dt>
<dd>htmlタグ属性クラス</dd>
</dl>
<hr>
##ElapsedTimeRange
ElapsedTimeRangeは、Harmoware-VIS のプロパティの[`settime`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#settime-number)を表示＆更新するスライダーを表示します。
表示する値はシミュレーション開始時間（[`timeBegin`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#timebegin-number)）から経過時間（[`settime`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#settime-number)）を差し引いた秒数です。
<table>
<tr><th>表示サンプル</th></tr>
<tr><td>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/29b95cfe-bc67-f640-5039-3f1fa3c2a201.png">
</td></tr></table>

```Examples.js
<ElapsedTimeRange settime={this.props.settime} timeBegin={this.props.timeBegin}
timeLength={this.props.timeLength} actions={this.props.actions} />
```

<dl>
<dt>settime(number required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#settime-number"><code>settime</code></a>を設定（必須）</dd>
<br>
<dt>timeBegin(number required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#timebegin-number"><code>timeBegin</code></a>を設定（必須）</dd>
<br>
<dt>timeLength(number required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#timelength-number"><code>timeLength</code></a>を設定（必須）</dd>
<br>
<dt>actions(object required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#actions"><code>actions</code></a>を設定（必須）</dd>
<br>
<dt>min(number option)</dt>
<dd>・Default : -100<br>
<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#timebegin-number">timeBegin</a>を基準時間（ゼロ）とした場合のスライダー範囲の最小値（秒）</dd>
<br>
<dt>step(number option)</dt>
<dd>・Default : 1<br>
スライダーの更新単位（秒）</dd>
<br>
<dt>id(string option)</dt>
<dd>htmlタグの属性ID</dd>
<br>
<dt>className(Object option)</dt>
<dd>・Default : <code>'harmovis_input_range'</code><br>
htmlタグ属性クラス</dd>
</dl>
<hr>
##ElapsedTimeValue
ElapsedTimeValueは、Harmoware-VIS のプロパティの[`settime`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#settime-number)を表示＆更新するテキストBOXを表示します。
表示する値はシミュレーション開始時間（[`timeBegin`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#timebegin-number)）から経過時間（[`settime`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#settime-number)）を差し引いた秒数です。
<table>
<tr><th>表示サンプル</th></tr>
<tr><td>
2021年12月分のアップロード上限超えのため後日
<img src="">
</td></tr></table>

```Examples.js
<ElapsedTimeValue settime={this.props.settime} timeBegin={this.props.timeBegin}
timeLength={this.props.timeLength} actions={this.props.actions} />
```

<dl>
<dt>settime(number required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#settime-number"><code>settime</code></a>を設定（必須）</dd>
<br>
<dt>timeBegin(number required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#timebegin-number"><code>timeBegin</code></a>を設定（必須）</dd>
<br>
<dt>timeLength(number required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#timelength-number"><code>timeLength</code></a>を設定（必須）</dd>
<br>
<dt>actions(object required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#actions"><code>actions</code></a>を設定（必須）</dd>
<br>
<dt>min(number option)</dt>
<dd>・Default : -100<br>
<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#timebegin-number">timeBegin</a>を基準時間（ゼロ）とした場合のスライダー範囲の最小値（秒）</dd>
<br>
<dt>id(string option)</dt>
<dd>htmlタグの属性ID</dd>
<br>
<dt>className(Object option)</dt>
<dd>・Default : <code>'harmovis_input_number'</code><br>
htmlタグ属性クラス</dd>
</dl>
<hr>
##PauseButton
PauseButtonは、Harmoware-VIS のプロパティの[`animatePause`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#animatepause-boolean)を<b>true</b>に更新するボタンを表示します。
<table>
<tr><th>表示サンプル</th></tr>
<tr><td>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/2540720e-2aa0-c146-f6ad-847875546e7a.png">
</td></tr></table>

```Examples.js
<PauseButton actions={this.props.actions} />
```

<dl>
<dt>actions(object required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#actions"><code>actions</code></a>を設定（必須）</dd>
<br>
<dt>children(React.ReactNode option)</dt>
<dd>・Default : （※上記表示サンプルのデータ）<br>
buttonタグのchildrenを設定</dd>
<br>
<dt>i18n(Object option)</dt>
<dd>・Default : <code>{pauseButtonCaption: 'PAUSE'}</code><br>
ボタンのキャプションを<code>i18n.pauseButtonCaption</code>に設定</dd>
<br>
<dt>className(string option)</dt>
<dd>・Default : <code>'harmovis_button'</code><br>
htmlタグ属性クラス</dd>
<br>
<dt>title(string option)</dt>
<dd>htmlタグ属性クラス</dd>
</dl>
<hr>
##PlayButton
PlayButtonは、Harmoware-VIS のプロパティの[`animatePause`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#animatepause-boolean)を<b>false</b>に更新するボタンを表示します。
<table>
<tr><th>表示サンプル</th></tr>
<tr><td>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/3723be5f-75e8-8e9a-5247-defd61fc3a09.png">
</td></tr></table>

```Examples.js
<PlayButton actions={this.props.actions} />
```

<dl>
<dt>actions(object required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#actions"><code>actions</code></a>を設定（必須）</dd>
<br>
<dt>children(React.ReactNode option)</dt>
<dd>・Default : （※上記表示サンプルのデータ）<br>
buttonタグのchildrenを設定</dd>
<br>
<dt>i18n(Object option)</dt>
<dd>・Default : <code>{playButtonCaption: '️PLAY'}</code><br>
ボタンのキャプションを<code>i18n.playButtonCaption</code>に設定</dd>
<br>
<dt>className(string option)</dt>
<dd>・Default : <code>'harmovis_button'</code><br>
htmlタグ属性クラス</dd>
<br>
<dt>title(string option)</dt>
<dd>htmlタグ属性クラス</dd>
</dl>
<hr>
##ForwardButton
ForwardButtonは、Harmoware-VIS のプロパティの[`animateReverse`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#animatereverse-boolean)を<b>false</b>に更新するボタンを表示します。
<table>
<tr><th>表示サンプル</th></tr>
<tr><td>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/e64ddd9f-6649-41a2-c0c5-20bf862ffb1d.png">
</td></tr></table>

```Examples.js
<ForwardButton actions={this.props.actions} />
```

<dl>
<dt>actions(object required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#actions"><code>actions</code></a>を設定（必須）</dd>
<br>
<dt>children(React.ReactNode option)</dt>
<dd>・Default : （※上記表示サンプルのデータ）<br>
buttonタグのchildrenを設定</dd>
<br>
<dt>i18n(Object option)</dt>
<dd>・Default : <code>{forwardButtonCaption: '️FORWARD'}</code><br>
ボタンのキャプションを<code>i18n.forwardButtonCaption</code>に設定</dd>
<br>
<dt>className(string option)</dt>
<dd>・Default : <code>'harmovis_button'</code><br>
htmlタグ属性クラス</dd>
<br>
<dt>title(string option)</dt>
<dd>htmlタグ属性クラス</dd>
</dl>
<hr>
##ReverseButton
ReverseButtonは、Harmoware-VIS のプロパティの[`animateReverse`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#animatereverse-boolean)を<b>true</b>に更新するボタンを表示します。
<table>
<tr><th>表示サンプル</th></tr>
<tr><td>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/eb85dd30-8b74-92be-2a77-a7e86c3487ae.png">
</td></tr></table>

```Examples.js
<ReverseButton actions={this.props.actions} />
```

<dl>
<dt>actions(object required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#actions"><code>actions</code></a>を設定（必須）</dd>
<br>
<dt>children(React.ReactNode option)</dt>
<dd>・Default : （※上記表示サンプルのデータ）<br>
buttonタグのchildrenを設定</dd>
<br>
<dt>i18n(Object option)</dt>
<dd>・Default : <code>{reverseButtonCaption: '️REVERSE'}</code><br>
ボタンのキャプションを<code>i18n.reverseButtonCaption</code>に設定</dd>
<br>
<dt>className(string option)</dt>
<dd>・Default : <code>'harmovis_button'</code><br>
htmlタグ属性クラス</dd>
<br>
<dt>title(string option)</dt>
<dd>htmlタグ属性クラス</dd>
</dl>
<hr>
##NavigationButton
NavigationButtonは、Harmoware-VIS のプロパティの[`viewport`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#viewport-object)を更新するボタンを表示します。
<table>
<tr><th>表示サンプル</th></tr>
<tr><td>
2021年12月分のアップロード上限超えのため後日
<img src="">
</td></tr></table>

```Examples.js
<NavigationButton buttonType="compass"
actions={this.props.actions} viewport={this.props.viewport} />
<NavigationButton buttonType="zoom-in"
actions={this.props.actions} viewport={this.props.viewport} />
<NavigationButton buttonType="zoom-out"
actions={this.props.actions} viewport={this.props.viewport} />
```

<dl>
<dt>buttonType(string required)</dt>
<dd>（必須）
<table>
<tr><th>buttonType</th><th>Description</th></tr>
<tr><td>'compass'</td><td>viewportのzoom値とpitch値をデフォルト値に更新（視点リセット）</td></tr>
<tr><td>'zoom-in'</td><td>viewportのzoom値を0.5加算して更新（ズームイン）</td></tr>
<tr><td>'zoom-out'</td><td>viewportのzoom値を0.5減算して更新（ズームアウト）</td></tr>
</table>
</dd>
<br>
<dt>actions(object required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#actions"><code>actions</code></a>を設定（必須）</dd>
<br>
<dt>viewport(Viewport required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#viewport-object"><code>viewport</code></a>を設定（必須）</dd>
<br>
<dt>className(string option)</dt>
<dd>・Default : <code>'harmovis_button'</code><br>
htmlタグ属性クラス</dd>
<br>
<dt>title(string option)</dt>
<dd>htmlタグ属性クラス</dd>
</dl>
<hr>
##SimulationDateTime
SimulationDateTimeは、Harmoware-VIS のプロパティの[`settime`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#settime-number)を指定の日付書式で表示テキストBOXを表示します。
<table>
<tr><th>表示サンプル</th></tr>
<tr><td>
2021年12月分のアップロード上限超えのため後日
<img src="">
</td></tr></table>

```Examples.js
<SimulationDateTime settime={settime} />
// output example (ja-JP) => 1970/01/01(木) 9:00:00
```

<dl>
<dt>settime(number required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#settime-number"><code>settime</code></a>を設定（必須）</dd>
<br>
<dt>caption(string option)</dt>
<dd>・Default : ''<br>
書式日付の前方に付加するキャプション</dd>
<br>
<dt>locales(string option)</dt>
<dd>・Default : 'ja-JP'<br>
書式言語ロケール指定<br>
localesとoptionsの詳細はJavascriptの <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString">Date.prototype.toLocaleString() のリファレンス</a> を参照</dd>
<br>
<dt>options(Object option)</dt>
<dd>・Default :<br>
<code>{ year: 'numeric', month: '2-digit', day: '2-digit',<br>
 hour: '2-digit', minute: '2-digit', second: '2-digit',<br>
 weekday: 'short' }</code><br>
書式言語オプション指定<br>
localesとoptionsの詳細はJavascriptの <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString">Date.prototype.toLocaleString() のリファレンス</a> を参照</dd>
<br>
<dt>className(Object option)</dt>
<dd>htmlタグ属性クラス</dd>
</dl>
<hr>
##SpeedRange
SpeedRangeは、Harmoware-VIS のプロパティの[`secperhour`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#secperhour-number)又は[`multiplySpeed`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#multiplyspeed-number)を表示＆更新するスライダーを表示します。
[`secperhour`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#secperhour-number)表示中の値はMAX値とMIN値を入れ替えた値になります。（既定では 3600 ⇒ 1 又は 1 ⇒ 3600）
<table>
<tr><th>表示サンプル</th></tr>
<tr><td>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/29b95cfe-bc67-f640-5039-3f1fa3c2a201.png">
</td></tr></table>

```Examples.js
<SpeedRange secperhour={this.props.secperhour} actions={this.props.actions} />
<SpeedRange multiplySpeed={this.props.multiplySpeed} actions={this.props.actions} />
```

<dl>
<dt>secperhour(number required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#secperhour-number"><code>secperhour</code></a>を設定（必須）<br>
※<code>secperhour</code>か<code>multiplySpeed</code>のどちらかを設定</dd>
<br>
<dt>multiplySpeed(number required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#multiplyspeed-number"><code>multiplySpeed</code></a>を設定（必須）<br>
※<code>secperhour</code>か<code>multiplySpeed</code>のどちらかを設定</dd>
<br>
<dt>actions(object required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#actions"><code>actions</code></a>を設定（必須）</dd>
<br>
<dt>maxsecperhour(number option)</dt>
<dd>・Default : 3600<br>
<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#secperhour-number"><code>secperhour</code></a>のスライダー範囲の最大値</dd>
<br>
<dt>maxmultiplySpeed(number option)</dt>
<dd>・Default : 3600<br>
<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#multiplyspeed-number"><code>multiplySpeed</code></a>のスライダー範囲の最大値</dd>
<br>
<dt>min(number option)</dt>
<dd>・Default : -100<br>
スライダー範囲の最小値</dd>
<br>
<dt>step(number option)</dt>
<dd>・Default : 1<br>
スライダーの更新単位</dd>
<br>
<dt>id(string option)</dt>
<dd>htmlタグの属性ID</dd>
<br>
<dt>className(Object option)</dt>
<dd>・Default : <code>'harmovis_input_range'</code><br>
htmlタグ属性クラス</dd>
</dl>
<hr>
##SpeedValue
SpeedValueは、Harmoware-VIS のプロパティの[`secperhour`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#secperhour-number)又は[`multiplySpeed`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#multiplyspeed-number)を表示＆更新するテキストBOXを表示します。
<table>
<tr><th>表示サンプル</th></tr>
<tr><td>
2021年12月分のアップロード上限超えのため後日
<img src="">
</td></tr></table>

```Examples.js
<SpeedValue secperhour={this.props.secperhour} actions={this.props.actions} />
<SpeedValue multiplySpeed={this.props.multiplySpeed} actions={this.props.actions} />
```

<dl>
<dt>secperhour(number required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#secperhour-number"><code>secperhour</code></a>を設定（必須）<br>
※<code>secperhour</code>か<code>multiplySpeed</code>のどちらかを設定</dd>
<br>
<dt>multiplySpeed(number required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#multiplyspeed-number"><code>multiplySpeed</code></a>を設定（必須）<br>
※<code>secperhour</code>か<code>multiplySpeed</code>のどちらかを設定</dd>
<br>
<dt>actions(object required)</dt>
<dd>通常はHarmoware-VISのプロパティの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#actions"><code>actions</code></a>を設定（必須）</dd>
<br>
<dt>maxsecperhour(number option)</dt>
<dd>・Default : 3600<br>
<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#secperhour-number"><code>secperhour</code></a>のスライダー範囲の最大値</dd>
<br>
<dt>maxmultiplySpeed(number option)</dt>
<dd>・Default : 3600<br>
<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#multiplyspeed-number"><code>multiplySpeed</code></a>のスライダー範囲の最大値</dd>
<br>
<dt>min(number option)</dt>
<dd>・Default : 1<br>
スライダー範囲の最小値</dd>
<br>
<dt>id(string option)</dt>
<dd>htmlタグの属性ID</dd>
<br>
<dt>className(Object option)</dt>
<dd>・Default : <code>'harmovis_input_number'</code><br>
htmlタグ属性クラス</dd>
</dl>
<hr>
##FpsDisplay
FpsDisplayは、FPS情報ウィンドウを表示します。
<table>
<tr><th>表示サンプル</th></tr>
<tr><td>
2021年12月分のアップロード上限超えのため後日
<img src="">
</td></tr></table>

```Examples.js
<FpsDisplay />
```

<dl>
<dt>width(number option)</dt>
<dd>・Default : 60<br>
FPS情報ウィンドウの幅</dd>
<br>
<dt>height(number option)</dt>
<dd>・Default : 40<br>
FPS情報ウィンドウの高さ</dd>
<br>
<dt>colorCode(string option)</dt>
<dd>・Default : '#00FF00'<br>
FPS情報ウィンドウのグラフのバーの色</dd>
<br>
<dt>className(Object option)</dt>
<dd>・Default : <code>'harmovis_fpsRate'</code><br>
htmlタグ属性クラス</dd>
<dt>UnitCaption(string option)</dt>
<dd>・Default : 'fps'<br>
FPS単位のキャプション</dd>
</dl>

#css リファレンス
Harmoware-VIS の css リファレンスについては別記事「[Harmoware-VIS css リファレンス](https://qiita.com/ucl_Harmoware_VIS/items/9c75210ed07b23e7255b)」をご覧ください。