Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chartshq/react-muze

React SDK for Muze charting Library
https://github.com/chartshq/react-muze

charting-application charts datamodel javascript-charts muze react react-applications react-bindings webassembly

Last synced: about 2 months ago
JSON representation

React SDK for Muze charting Library

Awesome Lists containing this project

README 

        


  


  


  

    react-muze

  













[![License](https://img.shields.io/github/license/chartshq/react-muze.svg)](https://github.com/chartshq/react-muze/blob/master/LICENSE)

[![NPM version](https://img.shields.io/npm/v/@chartshq/react-muze.svg)](https://www.npmjs.com/package/@chartshq/react-muze)

[![Contributors](https://img.shields.io/github/contributors/chartshq/react-muze.svg)](https://github.com/chartshq/react-muze/graphs/contributors)



# React-Muze



**React-Muze** is a React wrapper over the core [Muze](https://github.com/chartshq/muze) library. It provides React bindings for **Muze** and makes it easier to create charts using Muze for your React applications.



### What is Muze?

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](https://muzejs.org/docs/wa/latest/introduction)



# Installation & Usage



## Installation



To use React-Muze in your React project, you need to install the **muze** and **react-muze** package from NPM.



```shell

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.



```shell

npm install [email protected] -D

```



### For a project created using Create-React-App 



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](https://github.com/timarney/react-app-rewired)



```shell

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



```javascript

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



```json

{

  "scripts": {

    "start": "react-app-rewired start",

    "build": "react-app-rewired build"

  }

}

```



### For a custom React project



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



```javascript

{

  plugins: [

    new CopyWebpackPlugin([

      {

        from: path.resolve("node_modules", "@chartshq/muze/dist"),

        to: '.',

      }

    ])

  ]

}

```

## Creating your first Chart 



For this illustration, we will be using the following data and schema.



```javascript

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",

  },

];

```



### Step 1 - Import Muze, Canvas, DataModel as follows



```jsx

import Muze, { Canvas } from "@chartshq/react-muze/components";

``` 



### Step 2 - Create a DataModel Instance from the data



```jsx

async function createDataModel() {

  const DataModelClass = await Muze.DataModel.onReady();

  const formattedData = await DataModelClass.loadData(data, schema);

  return new DataModelClass(formattedData);

}

```



### Step 3 - Rendering Muze 



In the `render()` method of you react component, we need to put the following



```jsx

render() {

  // carsDm is the a dataModel instance

  // created from `data` and `schema`,

  // and saved on state

  const { carsDm } = this.state;



  return (

    

      

    

  );

}

```



### Full Code of the example



```javascript

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 (

      

        

      

    );

  }

}



export default Chart;

```



# Examples



In the example directory, you will find a react application that has many examples as individual components.



### How to run the examples



Setup the project in your local environment



```shell

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



```shell

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,



```jsx

// import BoxPlot from './Examples/Composability/BoxPlot';

import SimplePieChart from './Examples/Pie/SimplePie';



ReactDOM.render(

  

    

  ,

  document.getElementById("root")

);

```



# Contributing



Your PRs and stars are always welcome :). Checkout the [Contributing](https://github.com/chartshq/react-muze/blob/master/CONTRIBUTING.md) guides.



# Roadmap



Please contribute to our public wishlist or upvote an existing feature at [Muze Public Wishlist & Roadmap](https://github.com/orgs/chartshq/projects/1).



# License



MIT