chaichai
Version:
[](https://www.npmjs.com/package/chaichai) [](https://www.npmjs.com/package/chaichai) [ • 23.8 kB
Markdown
[](https://www.npmjs.com/package/chaichai)
[](https://www.npmjs.com/package/chaichai)
[](https://github.com/microsoft/TypeScript)
[](https://standardjs.com)
ChaiChai is a React library for dealing with **[Vallaris](https://vallaris.space/)**, **[JetStream](https://jetstream.gmbh)** and **Andaman** .
- Map component
- vector (Geojson)
- vector tile (Vallaris Dataset | vector tile pbf)
- mapservice (Vallaris Mapservice | WMS | TMS)
- Chart component
- Hook function
- Andaman (Dealing with Andaman)
- useMapserviceA (Mapservice list)
- useDatasetA (Dataset list)
- useVoListA (Vo list)
- useStorageListA (Storage list)
- useCallbackStorageListA (Storage list for use in function)
- useStorageFieldsA (Storage fields list tree)
- useCallbackStorageFieldsA (Storage fields list tree for use in function)
- useLastObjectsA (Last object list)
- useCallbackLastObjectA (Last object list for use in function)
- Vallaris (Dealing with Vallaris)
- useMapserviceV (Mapservice list)
- useDatasetV (Dataset list)
## Table of Content
- [Installation](#installation)
- [MainContextProvide](#MainContextProvide)
- [Component](#component)
- [Map](#map)
- [Usage-Map](#usage-map)
- [mapservice props structure](#mapservice)
- [vector props structure](#vector)
- [vectorTile props structure](#vectortile)
- [Chart](#chart)
- [Usage-Chart](#usage-chart)
- [Hook function](#hook)
- [Andaman-Hook](#andaman-hook)
- [useMapserviceA](#usemapservicea)
- [useDatasetA](#usedataseta)
- [useVoListA](#usevolista)
- [useStorageListA](#usestoragelista)
- [useCallbackStorageListA](#usecallbackstoragelista)
- [useStorageFieldsA](#usestoragefieldsa)
- [useCallbackStorageFieldsA](#usecallbackstoragefieldsa)
- [useLastObjectsA](#uselastobjectsa)
- [useCallbackLastObjectA](#usecallbacklastobjecta)
- [Vallaris-Hook](#vallaris-hook)
- [useMapserviceV](#usemapservicev)
- [useDatasetV](#usedatasetv)
## Installation
Use the package manager [npm](https://www.npmjs.com) to install [ChaiChai](https://www.npmjs.com/package/chaichai).
```bash
npm install --save chaichai
```
## MainContextProvide
This context accepts the following props:
| Name | Type | Default | Description |
| :--------------: | :--------- | :------ | :------------------------------------------------------------------------------------------------------ |
| _children_ | React Node | | element for control map from "props.map" . |
| _hostV_ | string | `https://api.vallaris.space/v2` | url of Vallaris host .|
| _apikeyV_ | string | | api key from Vallaris . |
| _tokenV_ | string | | token from Vallaris . |
| _userIdV_ | number | | userId from vallaris . |
| _hostA_ | string | `https://apiandaman.i-bitz.co.th` | url of Andaman host . |
| _tokenA_ | string | | token from Andaman . |
## Component
### Map
This component accepts the following props:
| Name | Type | Default | Description |
| :----------: | :--------- | :------ | :-------------------------------------------------------------------------------------------------------------- |
| _children_ | React Node | | element for control map from "props.map" . |
| _className_ | string | | name of className . |
| _center_ | array | [0, 0] | The inital geographical centerpoint of the map. If center is not specified in the constructor options . |
| _zoom_ | number | 0 | The initial zoom level of the map. If zoom is not specified in the constructor options . |
| _mapStyle_ | string | default | base map style on Open Street Map data, you can use one of "default", "dark" . |
| _mapservice_ | array | [] | array of mapservice request from mapserver or geoserver . follow chaichai [mapservice structure](#mapservice) . |
| _vector_ | array | [] | array of GeoJson . follow chaichai [vector structure](#vector) . |
| _vectorTile_ | array | [] | array of VectorTile . follow vectorTile chaichai structure . |
#### Usage-Map
```js
import React from "react";
import { Map } from "chaichai";
const ExampleControlMap = props => {
return (
<div>
<button
onClick={() => {
props.map.zoomIn();
}}
>
zoom In
</button>
</div>
);
};
const Example = () => {
return (
<div style={{ width: "100vw", height: "100vh" }}>
<Map
className="map"
center={[100.607727, 13.936825]}
zoom={10}
mapStyle="dark"
mapservice={[
{
id: "dam",
url:
"https://water-s03.gistda.or.th/geoserver/SmallWaterArea/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&CRS=EPSG:4326&WIDTH=256&HEIGHT=256&FORMAT=image/png&TILED=TRUE&STYLES&LAYERS=Dam&BBOX=11.050048828125,98.9571533203125,19.491943359375,103.2132568359375"
}
]}
vector={[
{
id: "test-vector",
data: {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
type: "LineString",
coordinates: [
[],
[],
[],
[]
]
}
},
{
type: "Feature",
properties: {},
geometry: {
type: "Polygon",
coordinates: [
[
[],
[],
[],
[],
[],
[]
]
]
}
},
{
type: "Feature",
properties: {},
geometry: {
type: "Point",
coordinates: [100.55459976196289, 13.79557291260343]
}
},
{
type: "Feature",
properties: {},
geometry: {
type: "Point",
coordinates: [100.5355453491211, 13.808742584307161]
}
}
]
}
}
]}
vectorTile={[
{
id: "Landuse-Nan",
url: [
"https://api.vallaris.space/v2/tile/190/{z}/{x}/{y}?key=vallaris-apikey"
],
sourceLayer: 190,
style: {
linestring: { stroke_color: "#e00f61ff", stroke_width: 3 },
point: {
fill_color: "#ded0c7ff",
radius: 5,
stroke_color: "#8e2121ff",
stroke_width: 2,
symbol: "circle",
text_field: "name",
text_fill_color: "#422fa2ff",
text_font: "noto",
text_offset_y: -15,
text_size: "16px",
text_stroke_color: "#f3f2f7ff",
text_stroke_width: 2,
text_weight: "normal"
},
polygon: {
fill_color: "#bb69163f",
stroke_color: "#ffffffff",
stroke_width: 1.3,
text_field: "name",
text_fill_color: "#0c0c0cff",
text_font: "sans-serif",
text_placement: "point",
text_size: "14px",
text_stroke_color: "#f1f0f5ff",
text_stroke_width: 2,
text_weight: "normal"
}
}
}
]}
>
<ExampleControlMap />
</Map>
</div>
);
};
```
This props accepts the following structure:
| Name | Type | Default | Description |
| :-------: | :---------------- | :------ | :--------------------------------------------------- |
| _id_ | string(Not null) | | Indentify name for map . |
| _url_ | string (Not null) | | mapservice request url from mapserver or geoserver . |
| _opacity_ | number | 1 | Optional number between 0 and 1 inclusive . |
This props accepts the following structure:
| Name | Type | Default | Description |
| :-----: | :---------------- | :------ | :--------------------------------------------------- |
| _id_ | string (Not null) | | Indentify name for map . |
| _data_ | object | | mapservice request url from mapserver or geoserver . |
| _style_ | object | null | Object style from vallaris style structure . |
This props accepts the following structure:
| Name | Type | Default | Description |
| :-----------: | :------------------------- | :------ | :------------------------------------------- |
| **id** | string (Not null) | | Identify name for map . |
| _url_ | string[] | [] | Array for Protobuf URL . |
| _sourceLayer_ | string / number (Not null) | [] | Id for Identify layer on Protobuf . |
| _style_ | object | null | Object style from Vallaris style structure . |
---
This component accepts the following props:
| Name | Type | Default | Description |
| :----------: | :--------- | :------ | :-------------------------------------------------------------------------------------------------------------- |
| _ref_ | React.Ref | | React.Ref . |
| _options_ | Object | | Option config of [Highcharts](https://api.highcharts.com/highcharts/) |
```js
import React, { useRef } from 'react'
import { Chart } from 'chaichai'
const ExamChart = () => {
const chartRef = useRef(null)
return <div>
<Chart
ref={chartRef}
options={{
title: { text: 'Solar Employment Growth by Sector, 2010-2016' },
subtitle: { text: 'Source: thesolarfoundation.com' },
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: { connectorAllowed: false },
pointStart: 2010
}
},
series: [
{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
},{
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
},{
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
},{
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
},{
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}
],
responsive: {
rules: [{
condition: { maxWidth: 500 },
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
}}
/>
</div>
}
export default ExamChart
```
This hook for dealing mapservice list from Andaman
```js
import React from 'react'
import { MainContextProvider, useMapserviceA} from 'chaichai'
const HookTest = () => {
const datalist = useMapserviceA()
return <div>{datalist ? JSON.stringify(datalist) : null}</div>
}
const App = () => {
return (
<MainContextProvider tokenA="andaman-token" >
<HookTest />
</MainContextProvider>
)
}
export default App
```
This hook for dealing dataset list from Andaman
```js
import React from 'react'
import { MainContextProvider, useDatasetA} from 'chaichai'
const HookTest = () => {
const datalist = useDatasetA()
return <div>{datalist ? JSON.stringify(datalist) : null}</div>
}
const App = () => {
return (
<MainContextProvider tokenA="andaman-token" >
<HookTest />
</MainContextProvider>
)
}
export default App
```
This hook for dealing vo list from Andaman
```js
import React from 'react'
import { MainContextProvider, useVoListA} from 'chaichai'
const HookTest = () => {
const datalist = useVoListA()
return <div>{datalist ? JSON.stringify(datalist) : null}</div>
}
const App = () => {
return (
<MainContextProvider tokenA="andaman-token" >
<HookTest />
</MainContextProvider>
)
}
export default App
```
This hook for dealing storage list from Andaman
```js
import React from 'react'
import { MainContextProvider, useStorageListA} from 'chaichai'
const HookTest = () => {
const datalist = useStorageListA()
return <div>{datalist ? JSON.stringify(datalist) : null}</div>
}
const App = () => {
return (
<MainContextProvider tokenA="andaman-token" >
<HookTest />
</MainContextProvider>
)
}
export default App
```
This hook for dealing storage list in function from Andaman
This hook function accepts the following parameter :
| Name | Type | Default | Description |
| :----------: | :--------- | :------ | :-------------------------------------------------------------------------------------------------------------- |
| _host_ | String (Not null) | | url pain text of Andaman host . |
| _token_ | String (Not null) | | pain text of Andaman token . |
| _vo_ | String (Not null) | | pain text of Andaman vo target name . |
```js
import React from 'react'
import { MainContext, MainContextProvider, useCallbackStorageListA} from 'chaichai'
const HookTest = () => {
const { hostA, tokenA } = useContext(MainContext);
const loadDatalist = useCallbackStorageListA
return <div>
<button
onClick={async ()=>{
const datalist = await loadDatalist(hostA, tokenA, `vo-name`)
console.log(datalist)
}}
>
Load data
</button>
</div>
}
const App = () => {
return (
<MainContextProvider tokenA="andaman-token" >
<HookTest />
</MainContextProvider>
)
}
export default App
```
This hook for dealing storage fields from Andaman
This hook accepts the following parameter :
| Name | Type | Default | Description |
| :----------: | :--------- | :------ | :-------------------------------------------------------------------------------------------------------------- |
| _vo_ | String (Not null) | | pain text of Andaman vo target name . |
| _storage_ | String (Not null) | | pain text of Andaman storage target name . |
```js
import React from 'react'
import { MainContextProvider, useStorageFieldsA} from 'chaichai'
const HookTest = () => {
const datalist = useStorageFieldsA(`vo-name`, `storage-name`)
return <div>{datalist ? JSON.stringify(datalist) : null}</div>
}
const App = () => {
return (
<MainContextProvider tokenA="andaman-token" >
<HookTest />
</MainContextProvider>
)
}
export default App
```
This hook for dealing storage fields in function from Andaman
This hook function accepts the following parameter :
| Name | Type | Default | Description |
| :----------: | :--------- | :------ | :-------------------------------------------------------------------------------------------------------------- |
| _host_ | String (Not null) | | url pain text of Andaman host . |
| _token_ | String (Not null) | | pain text of Andaman token . |
| _vo_ | String (Not null) | | pain text of Andaman vo target name . |
| _storage_ | String (Not null) | | pain text of Andaman storage target name . |
```js
import React from 'react'
import { MainContext, MainContextProvider, useCallbackStorageFieldsA} from 'chaichai'
const HookTest = () => {
const { hostA, tokenA } = useContext(MainContext);
const loadDatalist = useCallbackStorageFieldsA
return <div>
<button
onClick={async ()=>{
const datalist = await loadDatalist(hostA, tokenA, `vo-name`, `storage-name`)
console.log(datalist)
}}
>
Load data
</button>
</div>
}
const App = () => {
return (
<MainContextProvider tokenA="andaman-token" >
<HookTest />
</MainContextProvider>
)
}
export default App
```
This hook for dealing last object from Andaman
This hook accepts the following parameter :
| Name | Type | Default | Description |
| :----------: | :--------- | :------ | :-------------------------------------------------------------------------------------------------------------- |
| _vo_ | String (Not null) | | pain text of Andaman vo target name . |
| _storage_ | String (Not null) | | pain text of Andaman storage target name . |
| _limit_ | Number | 10 | integer of Andaman limit last object . |
```js
import React from 'react'
import { MainContextProvider, useLastObjectsA} from 'chaichai'
const HookTest = () => {
const datalist = useLastObjectsA(`vo-name`, `storage-name`, 20)
return <div>{datalist ? JSON.stringify(datalist) : null}</div>
}
const App = () => {
return (
<MainContextProvider tokenA="andaman-token" >
<HookTest />
</MainContextProvider>
)
}
export default App
```
This hook for dealing last object in function from Andaman
This hook function accepts the following parameter :
| Name | Type | Default | Description |
| :----------: | :--------- | :------ | :-------------------------------------------------------------------------------------------------------------- |
| _host_ | String (Not null) | | url pain text of Andaman host . |
| _token_ | String (Not null) | | pain text of Andaman token . |
| _vo_ | String (Not null) | | pain text of Andaman vo target name . |
| _storage_ | String (Not null) | | pain text of Andaman storage target name . |
| _limit_ | Number | 10 | integer of Andaman limit last object . |
```js
import React from 'react'
import { MainContext, MainContextProvider, useCallbackLastObjectA} from 'chaichai'
const HookTest = () => {
const { hostA, tokenA } = useContext(MainContext);
const loadDatalist = useCallbackLastObjectA
return <div>
<button
onClick={async ()=>{
const datalist = await loadDatalist(hostA, tokenA, `vo-name`, `storage-name`, 20)
console.log(datalist)
}}
>
Load data
</button>
</div>
}
const App = () => {
return (
<MainContextProvider tokenA="andaman-token" >
<HookTest />
</MainContextProvider>
)
}
export default App
```
This hook for dealing mapservice list from Vallaris
```js
import React from 'react'
import { MainContextProvider, useMapserviceV} from 'chaichai'
const HookTest = () => {
const datalist = useMapserviceV()
return <div>{datalist ? JSON.stringify(datalist) : null}</div>
}
const App = () => {
return (
<MainContextProvider
apikeyV={`vallaris-apikey`}
tokenV={`vallaris-token`}
userIdV={`vallaris-userId`}
>
<HookTest />
</MainContextProvider>
)
}
export default App
```
This hook for dealing dataset list from Vallaris
```js
import React from 'react'
import { MainContextProvider, useDatasetV} from 'chaichai'
const HookTest = () => {
const datalist = useDatasetV()
return <div>{datalist ? JSON.stringify(datalist) : null}</div>
}
const App = () => {
return (
<MainContextProvider
apikeyV={`vallaris-apikey`}
tokenV={`vallaris-token`}
userIdV={`vallaris-userId`}
>
<HookTest />
</MainContextProvider>
)
}
export default App
```
MIT © [I-bitz company limited](https://www.i-bitz.co.th/)
---