Skip to content

Instantly share code, notes, and snippets.

@joebordes
Last active May 14, 2020 20:59
Show Gist options
  • Save joebordes/7a42f37a26610ab91891c0f3360451e8 to your computer and use it in GitHub Desktop.
Save joebordes/7a42f37a26610ab91891c0f3360451e8 to your computer and use it in GitHub Desktop.
react mermaid corebos question

Example and steps to show a coreBOS Business Question of type mermaid in a react application

yarn add mermaid debounce corebos-ws-lib

tested with

 "debounce": "^1.2.0",
 "mermaid": "^8.5.0",

adapt and deploy the code in the file index.js

cbqmermaidreact1

cbqmermaidreact2

Name Text Question No Type Status SQL Query Collection Module Page Size Assigned To Created By Created Time Modified Time Columns Condition Description Order by Column Group by Column Type Properties Main Table Alias Unique ID Field Materialized View Cron Map Id Materialized View Workflow Conditions in Filter Format CRM Entity Alias Update View when Related Changes Related Module List Unique Identifier
mm2 cbQ-0000002 Mermaid Active 0 Potentials 0.00 admin admin 2020-01-10 17:14:28 2020-05-12 23:22:06 A(( )) -->|contrat| B B(( )) -->|Avenants| C(( )) C(( )) -->|en cours| H D(( )) -->|Terrain| E E(( )) -->|Etudes| C(( )) F(( )) -->|Plans| G G(( )) -->|Métrés| C(( )) H((VT)) -->|"Control<br>Dossier"| I(( )) I(( )) -->|"Control<br>Prix"| J J((VA)) --> K LR 0 0 0 0 b7202078f993a21031ed4de2b3adcf0a33b12e92
import React, { Component } from 'react'
import { connect } from 'react-redux'
import * as cbconn from 'corebos-ws-lib/WSClientm';
import MainLayout from 'Hoc/MainLayout'
import H1 from 'Components/H1'
import mermaid from 'mermaid';
import debounce from 'debounce';
const apiUrl = 'http://localhost/coreBOSTest';
cbconn.setURL(apiUrl);
class Home extends Component {
static propTypes = {}
/**
* Debounce the code first. When the function
* fires, take the value and attempt to update
* the Mermaid chart.
*
* @memberof App
*/
handleChange = debounce(
(value) => {
console.log(value);
var output = document.getElementById('output');
try {
mermaid.parse(value);
output.innerHTML = '';
mermaid.render('theGraph', value, function(svgCode) {
console.log(svgCode);
output.innerHTML = svgCode;
});
} catch (err) {
console.error(err);
}
},
600,
false
);
/**
* Render an initial chart on mount.
*
* @memberof App
*/
componentDidMount() {
var output = document.getElementById('output');
mermaid.initialize({ startOnLoad: true });
cbconn.doLogin('admin', 'admin', true)
.then(()=> {
cbconn.doInvoke('cbQuestionAnswer', { qid: '48x44129', params: '{}'}, 'GET')
.then(data => {
mermaid.render('theGraph', data.answer, function(svgCode) {
output.innerHTML = svgCode;
});
});
});
}
render() {
return (
<MainLayout>
<H1>This is a secondary page</H1>
<textarea
rows="4"
onChange={(e) => this.handleChange(e.target.value)}
/>
<div id="output" />
</MainLayout>
)
}
}
const mapStateToProps = state => ({})
const mapDispatchToProps = dispatch => ({})
export default connect(mapStateToProps, mapDispatchToProps)(Home)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment