fractal-format-protocol
v1.0.5
Published
![](https://scontent-waw1-1.xx.fbcdn.net/v/t1.0-1/p320x320/56877160_1084398265040452_1604797376051019776_n.png?_nc_cat=104&_nc_oc=AQkIgYrwS6JRIe1zCrB1HcjCySmFm8UU6owplXMixda_aowE6o6M5tCu0Q0CqL5G1N4&_nc_ht=scontent-waw1-1.xx&oh=fcc1df36f39a2a9908714cc183cb
Downloads
5
Maintainers
Readme
Fractal Protocol Format
##Instalation
####Using NPM
$ npm i fractal-format-protocol
##API
Constuctor()
| Key | Type | Description |
| ------------- | ------------- | ------------------------|
| instances
| object | Object of Fractal (Vue.js) instances (components). Ex: instances[class][object] |
| WebSocketClient
| object | Object of WebSocket |
| httpClient
| object | Class of Axios |
| httpBaseUrl
| string | Fractal server base url. Ex: "https://fractal.tools" |
Send()
| Key | Type | Description |
| ------------- | ------------- | ------------------------|
| method
| string | get / post / ws |
| url
| string | Request route |
| path
| string | Service path |
| class
| string | Class name of instance (service) |
| object
| string | Object name of instance (service) |
| function
| string | Function name of instance (service) |
| data
| object | Request params / body / payload |
##Usage ###Store.js #####initialize
import Format from 'fractal-format-protocol';
import Axios from 'axios';
const HTTP_BASE_URL = "https://fractal.tools";
const WEB_SOCKET_ENDPOINT = "wss://fractal.tools/ws"
const ws = new WebSocket(WEB_SOCKET_ENDPOINT);
const store = {
state: {
instances: [];
},
mutations: {
setFormat: (state) => {
const format = new Format({
WebSocketClient: ws,
httpClient: Axios,
httpBaseUrl: HTTP_BASE_URL,
instances: state.instances
});
state.format = format;
}
},
actions: {
onAppLoad: (context, payload) => {
context.commit("setFormat");
}
}
}
#####Send request for charts
const store = {
getters: {
getInstance: state => payload => {
if(state.instances[payload.class]
&& state.instances[payload.class][payload.object])
return state.instances[payload.class][payload.object];
else
return null;
}
},
actions: {
getChart: (context, payload) => {
const dateRangeComponent = context.getters.getInstance({
class: "DateRange",
object: "dateRange1"
});
const dropDownComponent = context.getters.getInstance({
class: "DropDown",
object: "dropDown5"
});
const dateRange = dateRangeComponent.getValue;
const filters = dropDownComponent.getvalue;
context.state.format.send({
method: "post",
url: "trends/chart",
path: "d1/d2",
class: "AnotherBackendService",
object: "someObject",
function: "trends/chart",
data: {
dateRange,
filters
}
})
}
}
}
###End