# Welcome to ChaiChai!

[![NPM](https://img.shields.io/npm/v/chaichai.svg)](https://www.npmjs.com/package/chaichai)
[![npm downloads](https://img.shields.io/npm/dm/chaichai.svg)](https://www.npmjs.com/package/chaichai)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-blue.svg)](https://github.com/microsoft/TypeScript)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

ChaiChai is a React library for dealing with **[Vallaris](https://vallaris.space/)**, **[JetStream](https://jetstream.gmbh)** and **Andaman** .

## Currently feature

- 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: [
                      [100.50275802612303, 13.762728849180755],

                      [100.51597595214844, 13.783069371890065],

                      [100.52885055541992, 13.793905812537924],

                      [100.54327011108398, 13.792238700563416]
                    ]
                  }
                },

                {
                  type: "Feature",

                  properties: {},

                  geometry: {
                    type: "Polygon",

                    coordinates: [
                      [
                        [100.50773620605469, 13.752224443932407],

                        [100.53949356079102, 13.757560073777029],

                        [100.55150985717773, 13.772732606134639],

                        [100.54344177246094, 13.784736549340208],

                        [100.52438735961914, 13.778401211724026],

                        [100.50773620605469, 13.752224443932407]
                      ]
                    ]
                  }
                },

                {
                  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>
  );
};
```

#### Mapservice

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 .          |

#### vector

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 .         |

#### vectorTile

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 . |

---

### Chart

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/)                                                                                             |

#### Usage-Chart

```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
```

## Hook

### Andaman-Hook

#### useMapserviceA

This hook for dealing mapservice list from Andaman

##### Usage :
```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
```

#### useDatasetA

This hook for dealing dataset list from Andaman

##### Usage :
```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
```

#### useVoListA

This hook for dealing vo list from Andaman

##### Usage :
```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
```

#### useStorageListA

This hook for dealing storage list from Andaman

##### Usage :
```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
```

#### useCallbackStorageListA

This hook for dealing storage list in function from Andaman

#### Parameter : 

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 .                                                                                |

##### Usage :
```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
```

#### useStorageFieldsA

This hook for dealing storage fields from Andaman

#### Parameter : 

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 .                                                                                |

##### Usage :
```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
```

#### useCallbackStorageFieldsA

This hook for dealing storage fields in function from Andaman

#### Parameter : 

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 .                                                                                |

##### Usage :
```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
```

#### useLastObjectsA

This hook for dealing last object from Andaman

#### Parameter : 

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 .                                                                                |

##### Usage :
```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
```

#### useCallbackLastObjectA

This hook for dealing last object in function from Andaman

#### Parameter : 

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 .                                                                                |

##### Usage :
```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
```

### Vallaris-Hook

#### useMapserviceV

This hook for dealing mapservice list from Vallaris

##### Usage :
```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
```

#### useDatasetV

This hook for dealing dataset list from Vallaris

##### Usage :
```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
```

## License

MIT © [I-bitz company limited](https://www.i-bitz.co.th/)

---