Skip to content

Echarts extension #372

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Sep 14, 2023
Merged

Echarts extension #372

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1f233a3
feat: added map mode in echarts
raheeliftikhar5 Aug 31, 2023
114fb38
feat: added stream query for real time data updates
raheeliftikhar5 Sep 10, 2023
a2fd4b5
refactor: stream query code
raheeliftikhar5 Sep 13, 2023
1f41ce7
refactor: added more test data for map chart
raheeliftikhar5 Sep 13, 2023
b137622
fix: updated map chart options,examples url
raheeliftikhar5 Sep 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor: stream query code
  • Loading branch information
@raheeliftikhar5
raheeliftikhar5 committed Sep 13, 2023
commit a2fd4b587389c9b7098e985b463d008dc0a60b9a
235 changes: 44 additions & 191 deletions client/packages/lowcoder/src/comps/queries/httpQuery/streamQuery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,14 @@
import { ControlPropertyViewWrapper } from "components/control";
import { Input } from "components/Input";
import { KeyValueList } from "components/keyValueList";
import { QueryConfigItemWrapper, QueryConfigLabel, QueryConfigWrapper } from "components/query";
import { simpleMultiComp } from "comps/generators/multi";
import { ReactNode } from "react";
import { JSONValue } from "../../../util/jsonTypes";
import { keyValueListControl } from "../../controls/keyValueControl";
import { ParamsJsonControl, ParamsStringControl } from "../../controls/paramsControl";
import { list } from "../../generators/list";
import { valueComp, withDefault } from "../../generators/simpleGenerators";
import { FunctionProperty, toQueryView } from "../queryCompUtils";
import { ParamsStringControl } from "../../controls/paramsControl";
import {
HttpHeaderPropertyView,
HttpParametersPropertyView,
HttpPathPropertyView,
} from "./httpQueryConstants";
import { QueryResult } from "../queryComp";
import { QUERY_EXECUTION_ERROR, QUERY_EXECUTION_OK } from "constants/queryConstants";
import { FunctionControl } from "comps/controls/codeControl";
import { JSONValue } from "util/jsonTypes";

const connect = async (socket: WebSocket, timeout = 10000) => {
const socketConnection = async (socket: WebSocket, timeout = 10000) => {
const isOpened = () => (socket.readyState === WebSocket.OPEN)

if (socket.readyState !== WebSocket.CONNECTING) {
Expand All @@ -37,6 +26,29 @@ const connect = async (socket: WebSocket, timeout = 10000) => {
}
}

const createSuccessResponse = (
data: JSONValue,
runTime?: number,
): QueryResult => {
return {
data,
runTime,
success: true,
code: QUERY_EXECUTION_OK,
}
}

const createErrorResponse = (
message: string,
): QueryResult => {
return {
message,
data: "",
success: false,
code: QUERY_EXECUTION_ERROR,
}
}

const childrenMap = {
path: ParamsStringControl,
destroySocketConnection: FunctionControl,
Expand All @@ -58,60 +70,37 @@ export class StreamQuery extends StreamTmpQuery {

try {
const timer = performance.now();
this.socket = new WebSocket(children.path.children.text.getView());

this.socket.onopen = function(e) {
console.log("[open] Connection established");
};
const socketUrl = children.path.children.text.getView();

this.socket = new WebSocket(socketUrl);
this.socket.onopen = () => {
console.log("[WebSocket] Connection established");
}

this.socket.onmessage = function(event) {
console.log(`[message] Data received from server: ${event.data}`);
this.socket.onmessage = (event) => {
console.log(`[WebSocket] Data received from server`);
if(typeof JSON.parse(event.data) === 'object') {
const result = {
data: JSON.parse(event.data),
code: QUERY_EXECUTION_OK,
success: true,
runTime: Number((performance.now() - timer).toFixed()),
}
const result = createSuccessResponse(JSON.parse(event.data))
p?.callback?.(result);
}
};
}

this.socket.onclose = function(event) {
if (event.wasClean) {
console.log(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
} else {
console.log('[close] Connection died');
}
};
this.socket.onclose = () => {
console.log(`[WebSocket] Connection closed`);
}

this.socket.onerror = function(error) {
throw new Error(error as any)
};
}

const isConnectionOpen = await connect(this.socket);
const isConnectionOpen = await socketConnection(this.socket);
if(!isConnectionOpen) {
return {
success: false,
data: "",
code: QUERY_EXECUTION_ERROR,
message: "Socket connection failed",
};
return createErrorResponse("Socket connection failed")
}

return {
data: "",
code: QUERY_EXECUTION_OK,
success: true,
runTime: Number((performance.now() - timer).toFixed()),
};
return createSuccessResponse("", Number((performance.now() - timer).toFixed()))
} catch (e) {
return {
success: false,
data: "",
code: QUERY_EXECUTION_ERROR,
message: (e as any).message || "",
};
return createErrorResponse((e as any).message || "")
}
};
}
Expand All @@ -138,139 +127,3 @@ const PropertyView = (props: { comp: InstanceType<typeof StreamQuery>; datasourc
</>
);
};



// import { ParamsStringControl } from "comps/controls/paramsControl";
// import { FunctionControl, StringControl, codeControl } from "comps/controls/codeControl";
// import { MultiCompBuilder } from "comps/generators";
// import { QueryResult } from "../queryComp";
// import { QueryTutorials } from "util/tutorialUtils";
// import { DocLink } from "lowcoder-design";
// import { getGlobalSettings } from "comps/utils/globalSettings";
// import { trans } from "i18n";
// import { QUERY_EXECUTION_ERROR, QUERY_EXECUTION_OK } from "constants/queryConstants";

// const connect = async (socket: WebSocket, timeout = 10000) => {
// const isOpened = () => (socket.readyState === WebSocket.OPEN)

// if (socket.readyState !== WebSocket.CONNECTING) {
// return isOpened()
// }
// else {
// const intrasleep = 100
// const ttl = timeout / intrasleep // time to loop
// let loop = 0
// while (socket.readyState === WebSocket.CONNECTING && loop < ttl) {
// await new Promise(resolve => setTimeout(resolve, intrasleep))
// loop++
// }
// return isOpened()
// }
// }

// export const StreamQuery = (function () {
// const childrenMap = {
// path: StringControl,
// destroySocketConnection: FunctionControl,
// };
// return new MultiCompBuilder(childrenMap, (props) => {
// const { orgCommonSettings } = getGlobalSettings();
// const runInHost = !!orgCommonSettings?.runJavaScriptInHost;

// console.log(props.path);
// return async (
// p: {
// args?: Record<string, unknown>,
// callback?: (result: QueryResult) => void
// }
// ): Promise<QueryResult> => {
// console.log('Stream Query', props)

// try {
// const timer = performance.now();
// // const url = 'wss://free.blr2.piesocket.com/v3/1?api_key=yWUvGQggacrrTdXYjvTpRD5qhm4RIsglS7YJlKzp&notify_self=1'
// const socket = new WebSocket(props.path);

// props.destroySocketConnection = () => {
// socket.close();
// };

// socket.onopen = function(e) {
// console.log("[open] Connection established");
// };

// socket.onmessage = function(event) {
// console.log(`[message] Data received from server: ${event.data}`);
// console.log(JSON.parse(event.data))
// if(typeof JSON.parse(event.data) === 'object') {
// const result = {
// data: JSON.parse(event.data),
// code: QUERY_EXECUTION_OK,
// success: true,
// runTime: Number((performance.now() - timer).toFixed()),
// }
// p?.callback?.(result);
// }
// };

// socket.onclose = function(event) {
// if (event.wasClean) {
// console.log(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
// } else {
// // e.g. server process killed or network down
// // event.code is usually 1006 in this case
// console.log('[close] Connection died');
// }
// };

// socket.onerror = function(error) {
// throw new Error(error as any)
// };
// const isConnectionOpen = await connect(socket);
// if(!isConnectionOpen) {
// return {
// success: false,
// data: "",
// code: QUERY_EXECUTION_ERROR,
// message: "Socket connection failed",
// };
// }

// // const data = await props.script(p.args, runInHost);
// return {
// data: "",
// code: QUERY_EXECUTION_OK,
// success: true,
// runTime: Number((performance.now() - timer).toFixed()),
// };
// } catch (e) {
// return {
// success: false,
// data: "",
// code: QUERY_EXECUTION_ERROR,
// message: (e as any).message || "",
// };
// }
// };
// })
// .setPropertyViewFn((children) => {
// return (
// <>
// {
// children.path.propertyView({
// label: "URL",
// placement: "bottom",
// placeholder:"wss://www.example.com/socketserver",
// })
// }

// {/* TODO: Add docs for Stream Query
// {QueryTutorials.js && (
// <DocLink href={QueryTutorials.js}>{trans("query.jsQueryDocLink")}</DocLink>
// )} */}
// </>
// );
// })
// .build();
// })();