chaichai v0.0.45

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:

Component

Map

This component accepts the following props:

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:

vector

This props accepts the following structure:

vectorTile

This props accepts the following structure:

Chart

This component accepts the following props:

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 :

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 :

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 :

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 :

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 :

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