chaichai

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

---