0.0.45 • Published 6 years ago
chaichai
Licence
MIT
Version
0.0.45
Deps
2
Size
15.5 MB
Vulns
0
Weekly
0
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)
- Andaman (Dealing with Andaman)
Table of Content
Installation
Use the package manager npm to install ChaiChai.
npm install --save chaichaiMainContextProvide
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 ExamChartHook
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 AppuseDatasetA
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 AppuseVoListA
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 AppuseStorageListA
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 AppuseCallbackStorageListA
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 AppuseStorageFieldsA
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 AppuseCallbackStorageFieldsA
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 AppuseLastObjectsA
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 AppuseCallbackLastObjectA
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 AppVallaris-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 AppuseDatasetV
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