React-Muze is a React wrapper over the core Muze library. It provides React bindings for Muze and makes it easier to create charts using Muze for your React applications.
Muze is a free library for creating exploratory data visualizations in the browser that is powered by WebAssembly. It is ideal for use in visual analytics dashboards & applications to create highly performant, interactive, multi-dimensional, and composable visualizations with the Grammar of Graphics approach. More about Muze here: https://muzejs.org/docs/wa/latest/introduction
To use React-Muze in your React project, you need to install the muze and react-muze package from NPM.
npm install @chartshq/muze @chartshq/react-muze
Next, as Muze is built on top of WebAssembly, we need to copy some WebAssembly assets to our build directory. To accomplish that we are going to use the copy-webpack-plugin
NPM package in our build config.
npm install copy-webpack-plugin@5.1.1 -D
Since applications built with Create-React-App does not expose webpack config until ejected, we need to use the react-app-rewired
package, to add the custom webpack config. How it works here: react-app-rewired
npm install react-app-rewired
Next, we need to create a file named config-overrides.js
at the root of the project and add the following code in it
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require("path");
module.exports = function override(config, env) {
//add webpack copy plugin
const copyPlugin = new CopyWebpackPlugin([
{
from: path.resolve("node_modules", "@chartshq/muze/dist"),
to: '.',
}
]);
if (!config.plugins) {
config.plugins = [];
}
config.plugins.push(copyPlugin);
return config;
}
And finally, replace old start and build commands in your package.json
with the following ones, and you are ready to go
{
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build"
}
}
In a custom setup, since we have direct access to webpack config, we can simply add copy-webpack-plugin
configuration directly inside out webpack config. Just add the following config in the plugins
section of your webpack.config.js
file
{
plugins: [
new CopyWebpackPlugin([
{
from: path.resolve("node_modules", "@chartshq/muze/dist"),
to: '.',
}
])
]
}
For this illustration, we will be using the following data and schema.
const data = [
{
Name: "chevrolet chevelle malibu",
Acceleration: 12,
},
{
Name: "buick skylark 320",
Acceleration: 11.5,
},
{
Name: "plymouth satellite",
Acceleration: 11,
},
{
Name: "amc rebel sst",
Acceleration: 12,
},
];
const schema = [
{
name: "Name",
type: "dimension",
},
{
name: "Acceleration",
type: "measure",
defAggFn: "avg",
},
];
import Muze, { Canvas } from "@chartshq/react-muze/components";
async function createDataModel() {
const DataModelClass = await Muze.DataModel.onReady();
const formattedData = await DataModelClass.loadData(data, schema);
return new DataModelClass(formattedData);
}
In the render()
method of you react component, we need to put the following
render() {
// carsDm is the a dataModel instance
// created from `data` and `schema`,
// and saved on state
const { carsDm } = this.state;
return (
<Muze data={carsDm}>
<Canvas rows={["Acceleration"]} columns={["Name"]} />
</Muze>
);
}
import React from "react";
import Muze, { Canvas } from "@chartshq/react-muze/components";
const data = [
{
Name: "chevrolet chevelle malibu",
Acceleration: 12,
},
{
Name: "buick skylark 320",
Acceleration: 11.5,
},
{
Name: "plymouth satellite",
Acceleration: 11,
},
{
Name: "amc rebel sst",
Acceleration: 12,
},
];
const schema = [
{
name: "Name",
type: "dimension",
},
{
name: "Acceleration",
type: "measure",
defAggFn: "avg",
},
];
async function createDataModel() {
const DataModelClass = await Muze.DataModel.onReady();
const formattedData = await DataModelClass.loadData(data, schema);
return new DataModelClass(formattedData);
}
class Chart extends React.Component {
constructor(props) {
super(props);
this.state = {
carsDm: null,
};
}
componentDidMount() {
createDataModel().then((carsDm) => {
this.setState({ carsDm });
});
}
render() {
const { carsDm } = this.state;
return (
<Muze data={carsDm}>
<Canvas rows={["Acceleration"]} columns={["Name"]} />
</Muze>
);
}
}
export default Chart;
In the example directory, you will find a react application that has many examples as individual components.
Setup the project in your local environment
yarn install
yarn build
cd dist && yarn link / npm link --only=production
yarn watch-build
Go to the examples directory and run the following commands
yarn install
yarn link @chartshq/react-muze
yarn start
To try out all the other examples, inside the examples/src/index.js
file import an example component and render on jsx
. For example,
// import BoxPlot from './Examples/Composability/BoxPlot';
import SimplePieChart from './Examples/Pie/SimplePie';
ReactDOM.render(
<React.StrictMode>
<SimplePieChart />
</React.StrictMode>,
document.getElementById("root")
);
Your PRs and stars are always welcome :). Checkout the Contributing guides.
Please contribute to our public wishlist or upvote an existing feature at Muze Public Wishlist & Roadmap.
Author: chartshq
The Demo/Documentation: View The Demo/Documentation
Download Link: Download The Source Code
Official Website: https://github.com/chartshq/react-muze
License: MIT
#react