react chartjs corebos question

README.md

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

yarn add react-chartjs-2 chart.js corebos-ws-lib

tested with

"chart.js": "^2.9.3",
"react-chartjs-2": "^2.9.0",

adapt and deploy the code in the files index.js and pie.js

related to https://gist.github.com/joebordes/7a42f37a26610ab91891c0f3360451e8

BusinessQuestion.csv

index.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import RCPie from './pie';

import MainLayout from 'Hoc/MainLayout'
import H1 from 'Components/H1'

class Home extends Component {
  static propTypes = {}

  render() {
    return (
      <MainLayout>
        <H1>This is a secondary page</H1>
        <textarea
          rows="4"
          onChange={(e) => this.handleChange(e.target.value)}
        />
       <RCPie></RCPie>
      </MainLayout>
    )
  }
}

const mapStateToProps = state => ({})
const mapDispatchToProps = dispatch => ({})
export default connect(mapStateToProps, mapDispatchToProps)(Home)

pie.js

import React, { Component } from 'react'
import Chart from 'chart.js';
import {Pie} from 'react-chartjs-2';
import * as cbconn from 'corebos-ws-lib/WSClientm';

const apiUrl = 'http://localhost/coreBOSwork';
cbconn.setURL(apiUrl);

class RCPie extends Component {

	constructor(props) {
		super(props);
		this.state = {
			data : {
				labels: [
					'Red',
					'Blue',
					'Yellow',
					'Green',
				],
				datasets: [{
					data: [300, 50, 100],
					backgroundColor: [
					'#FF6384',
					'#36A2EB',
					'#FFCE56',
					'green'
					]
				}]
			}
		};
		this.getGraphData();
	}

	getGraphData = async () => {
		await cbconn.doLogin('admin', 'admin', true);
		let dt = await cbconn.doInvoke('cbQuestionAnswer', { qid: '48x47035', params: [] }, 'GET');
		/*
		data.answer array with row values
		data.title
		*/
		let ps = JSON.parse(dt.properties);
		let lbls = [];
		let dsets = [];
		for (let row=0; row<dt.answer.length; row++) {
			lbls.push(dt.answer[row][ps.key_label]);
			dsets.push(dt.answer[row][ps.key_value]);
		}
		this.setState({ data: {
			labels: lbls,
			datasets: [{data: dsets}]
		}});
	};

	render() {
		return (
		<div>
			<h2>Pie Example</h2>
			<Pie id="cbchart" data={this.state.data} width={400} height={200} options={{ maintainAspectRatio: false }} />
		</div>
		);
	}
};

export default RCPie;