fractal-format-protocol

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