Welcome to ChaiChai!

ChaiChai is a React library for dealing with Vallaris, JetStream 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
• MainContextProvide
• Component
  • Map
    • Usage-Map
    • mapservice props structure
    • vector props structure
    • vectorTile props structure
  • Chart
    • Usage-Chart
• Hook function
  • Andaman-Hook
    • useMapserviceA
    • useDatasetA
    • useVoListA
    • useStorageListA
    • useCallbackStorageListA
    • useStorageFieldsA
    • useCallbackStorageFieldsA
    • useLastObjectsA
    • useCallbackLastObjectA
  • Vallaris-Hook
    • useMapserviceV
    • useDatasetV

Installation

Use the package manager npm to install ChaiChai.

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 . | | vector | array | [] | array of GeoJson . follow chaichai vector structure . | | vectorTile | array | [] | array of VectorTile . follow vectorTile chaichai structure . |

Usage-Map

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 |

Usage-Chart

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 :

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 :

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 :

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 :

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 :

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 :

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 :

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 :

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 :

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 :

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 :

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