Hi Everybody,
I am currently trying to develop a custom component in react for displaying data using the recharts js library. At the moment I am just testing the code so everything in the code should be self contained and doesn't need to interact with retool to send/receive information. It is purely display functionally.
I have been following the "Develop custom components" page in guides section as well as the "custom-component-guide" tryretool github repository. I am using Webpack to bundle up the files to drop it into the iFrame code box (this appears to be how it was done in the github repository?) but I am not able to get the application to render inside the iFrame.
.babelrc :
{
"presets": [
[ "@babel/preset-env", {
"modules": false,
"targets": {
"browsers": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Safari versions",
"last 2 iOS versions",
"last 1 Android version",
"last 1 ChromeAndroid version",
"ie 11"
]
}
}
],
"@babel/preset-react"
],
"plugins": [ "@babel/plugin-proposal-class-properties" ]
}
webpack.config.js :
var path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist', 'assets'),
filename: 'bundle.js'
},
devServer: {
historyApiFallback: true,
allowedHosts: 'all',
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
},
client: {
webSocketURL: {
hostname: 'localhost'
}
},
},
devtool: false,
module: {
rules: [
{
test: /\.js$/,
use: "babel-loader",
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|j?g|svg|gif)?$/,
use: "file-loader",
}
]
}
}
index.js :
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const ConnectedComponent = Retool.connectReactComponent(App);
const root = ReactDOM.createRoot(document.getElementById('root'));
//<App />
root.render(
<React.StrictMode>
<ConnectedComponent />
</React.StrictMode>
);
App :
import CoachBarGraph from './Component/Coach/CoachBarGraph';
const App = ({ triggerQuery, model, modelUpdate }) => {
const testImportData = [
{
user_id: 19,
start_time: 1685995200000,
end_time: 1686009600000
},
{
user_id: 19,
start_time: 1685959200000,
end_time: 1685970000000
},
{
user_id: 19,
start_time: 1686171600000,
end_time: 1686182400000
},
{
user_id: 19,
start_time: 1686261600000,
end_time: 1686265200000
},
{
user_id: 23,
start_time: 1685995200000,
end_time: 1686009600000
},
{
user_id: 23,
start_time: 1685959200000,
end_time: 1685970000000
},
];
const testCurrentDate = new Date(1685937600000);
return (
<div className="App">
<div className="Container" style={{height: 500 + 'px'}}>
<CoachBarGraph data={ testImportData } date={ testCurrentDate } />
</div>
</div>
);
};
export default App;
I'm not sure what I'm doing wrong. I have removed as many things from the bundle as possible just incase something wasn't playing nice together but the component isn't rendering. I just get a blank/transparent box where the component is supposed to be. Any tips or things I may need to consider outside the two resources I've been using would be extremely helpful as, the examples I have had access to have been very basic so I have been unable to compare what I can or can't do with this custom component.
Please let me know if you require any additional information. Thank you!
