Skip to content

Commit 87f2249

Browse files
author
Ritwik
committed
Merge branch 'release/v1.0.1'
2 parents 811798c + 50bed9c commit 87f2249

File tree

8 files changed

+429
-107
lines changed

8 files changed

+429
-107
lines changed

‎README.md‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
<h3 align="center">
2+
<br />
3+
<br />
4+
<a href="https://github.com/chartshq/react-muze">
5+
<img src="https://github.com/chartshq/react-muze/raw/master/logo.png" alt="react-muze" title="react-muze" />
6+
</a>
7+
</h3>
8+
<br />
9+
<br />
10+
<br />
11+
12+
[![License](https://img.shields.io/github/license/chartshq/react-muze.svg)](https://github.com/chartshq/react-muze/blob/master/LICENSE)
13+
[![NPM version](https://img.shields.io/npm/v/@chartshq/react-muze.svg)](https://www.npmjs.com/package/@chartshq/react-muze)
14+
[![Contributors](https://img.shields.io/github/contributors/chartshq/react-muze.svg)](https://github.com/chartshq/react-muze/graphs/contributors)
15+
116
# React-Muze
217

318
**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.
@@ -50,13 +65,13 @@ module.exports = function override(config, env) {
5065
}
5166
```
5267

53-
And finally, add the following scripts inside your `package.json` and you are ready to go
68+
And finally, replace old start and build commands in your `package.json` with the following ones, and you are ready to go
5469

5570
```json
5671
{
5772
"scripts": {
5873
"start": "react-app-rewired start",
59-
"build": "react-app-rewired build",
74+
"build": "react-app-rewired build"
6075
}
6176
}
6277
```

‎dist/LICENSE‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
Copyright (c) 2020 Charts.com
2+
3+
Permission is hereby granted, free of charge, to any person obtaining
4+
a copy of this software and associated documentation files (the
5+
"Software"), to deal in the Software without restriction, including
6+
without limitation the rights to use, copy, modify, merge, publish,
7+
distribute, sublicense, and/or sell copies of the Software, and to
8+
permit persons to whom the Software is furnished to do so, subject to
9+
the following conditions:
10+
11+
The above copyright notice and this permission notice shall be
12+
included in all copies or substantial portions of the Software.
13+
14+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎dist/README.md‎

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
<h3 align="center">
2+
<br />
3+
<br />
4+
<a href="https://github.com/chartshq/react-muze">
5+
<img src="https://github.com/chartshq/react-muze/raw/master/logo.png" alt="react-muze" title="react-muze" />
6+
</a>
7+
</h3>
8+
<br />
9+
<br />
10+
<br />
11+
12+
[![License](https://img.shields.io/github/license/chartshq/react-muze.svg)](https://github.com/chartshq/react-muze/blob/master/LICENSE)
13+
[![NPM version](https://img.shields.io/npm/v/@chartshq/react-muze.svg)](https://www.npmjs.com/package/@chartshq/react-muze)
14+
[![Contributors](https://img.shields.io/github/contributors/chartshq/react-muze.svg)](https://github.com/chartshq/react-muze/graphs/contributors)
15+
16+
# React-Muze
17+
18+
**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.
19+
20+
### What is Muze?
21+
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)
22+
23+
# Installation & Usage
24+
25+
## Installation
26+
27+
To use React-Muze in your React project, you need to install the **muze** and **react-muze** package from NPM.
28+
29+
```shell
30+
npm install @chartshq/muze @chartshq/react-muze
31+
```
32+
33+
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.
34+
35+
```shell
36+
npm install [email protected] -D
37+
```
38+
39+
### For a project created using Create-React-App
40+
41+
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)
42+
43+
```shell
44+
npm install react-app-rewired
45+
```
46+
47+
Next, we need to create a file named `config-overrides.js` at the root of the project and add the following code in it
48+
49+
```javascript
50+
const CopyWebpackPlugin = require('copy-webpack-plugin');
51+
const path = require("path");
52+
module.exports = function override(config, env) {
53+
//add webpack copy plugin
54+
const copyPlugin = new CopyWebpackPlugin([
55+
{
56+
from: path.resolve("node_modules", "@chartshq/muze/dist"),
57+
to: '.',
58+
}
59+
]);
60+
if (!config.plugins) {
61+
config.plugins = [];
62+
}
63+
config.plugins.push(copyPlugin);
64+
return config;
65+
}
66+
```
67+
68+
And finally, replace old start and build commands in your `package.json` with the following ones, and you are ready to go
69+
70+
```json
71+
{
72+
"scripts": {
73+
"start": "react-app-rewired start",
74+
"build": "react-app-rewired build"
75+
}
76+
}
77+
```
78+
79+
### For a custom React project
80+
81+
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
82+
83+
```javascript
84+
{
85+
plugins: [
86+
new CopyWebpackPlugin([
87+
{
88+
from: path.resolve("node_modules", "@chartshq/muze/dist"),
89+
to: '.',
90+
}
91+
])
92+
]
93+
}
94+
```
95+
## Creating your first Chart
96+
97+
For this illustration, we will be using the following data and schema.
98+
99+
```javascript
100+
const data = [
101+
{
102+
Name: "chevrolet chevelle malibu",
103+
Acceleration: 12,
104+
},
105+
{
106+
Name: "buick skylark 320",
107+
Acceleration: 11.5,
108+
},
109+
{
110+
Name: "plymouth satellite",
111+
Acceleration: 11,
112+
},
113+
{
114+
Name: "amc rebel sst",
115+
Acceleration: 12,
116+
},
117+
];
118+
const schema = [
119+
{
120+
name: "Name",
121+
type: "dimension",
122+
},
123+
{
124+
name: "Acceleration",
125+
type: "measure",
126+
defAggFn: "avg",
127+
},
128+
];
129+
```
130+
131+
### Step 1 - Import Muze, Canvas, DataModel as follows
132+
133+
```jsx
134+
import Muze, { Canvas } from "@chartshq/react-muze/components";
135+
```
136+
137+
### Step 2 - Create a DataModel Instance from the data
138+
139+
```jsx
140+
async function createDataModel() {
141+
const DataModelClass = await Muze.DataModel.onReady();
142+
const formattedData = await DataModelClass.loadData(data, schema);
143+
return new DataModelClass(formattedData);
144+
}
145+
```
146+
147+
### Step 3 - Rendering Muze
148+
149+
In the `render()` method of you react component, we need to put the following
150+
151+
```jsx
152+
render() {
153+
// carsDm is the a dataModel instance
154+
// created from `data` and `schema`,
155+
// and saved on state
156+
const { carsDm } = this.state;
157+
158+
return (
159+
<Muze data={carsDm}>
160+
<Canvas rows={["Acceleration"]} columns={["Name"]} />
161+
</Muze>
162+
);
163+
}
164+
```
165+
166+
### Full Code of the example
167+
168+
```javascript
169+
import React from "react";
170+
import Muze, { Canvas } from "@chartshq/react-muze/components";
171+
172+
const data = [
173+
{
174+
Name: "chevrolet chevelle malibu",
175+
Acceleration: 12,
176+
},
177+
{
178+
Name: "buick skylark 320",
179+
Acceleration: 11.5,
180+
},
181+
{
182+
Name: "plymouth satellite",
183+
Acceleration: 11,
184+
},
185+
{
186+
Name: "amc rebel sst",
187+
Acceleration: 12,
188+
},
189+
];
190+
const schema = [
191+
{
192+
name: "Name",
193+
type: "dimension",
194+
},
195+
{
196+
name: "Acceleration",
197+
type: "measure",
198+
defAggFn: "avg",
199+
},
200+
];
201+
202+
async function createDataModel() {
203+
const DataModelClass = await Muze.DataModel.onReady();
204+
const formattedData = await DataModelClass.loadData(data, schema);
205+
return new DataModelClass(formattedData);
206+
}
207+
208+
class Chart extends React.Component {
209+
constructor(props) {
210+
super(props);
211+
this.state = {
212+
carsDm: null,
213+
};
214+
}
215+
216+
componentDidMount() {
217+
createDataModel().then((carsDm) => {
218+
this.setState({ carsDm });
219+
});
220+
}
221+
222+
render() {
223+
const { carsDm } = this.state;
224+
225+
return (
226+
<Muze data={carsDm}>
227+
<Canvas rows={["Acceleration"]} columns={["Name"]} />
228+
</Muze>
229+
);
230+
}
231+
}
232+
233+
export default Chart;
234+
```
235+
236+
# Examples
237+
238+
In the example directory, you will find a react application that has many examples as individual components.
239+
240+
### How to run the examples
241+
242+
Setup the project in your local environment
243+
244+
```shell
245+
yarn install
246+
yarn build
247+
cd dist && yarn link / npm link --only=production
248+
yarn watch-build
249+
```
250+
251+
Go to the examples directory and run the following commands
252+
253+
```shell
254+
yarn install
255+
yarn link @chartshq/react-muze
256+
yarn start
257+
```
258+
259+
To try out all the other examples, inside the `examples/src/index.js` file import an example component and render on `jsx`. For example,
260+
261+
```jsx
262+
// import BoxPlot from './Examples/Composability/BoxPlot';
263+
import SimplePieChart from './Examples/Pie/SimplePie';
264+
265+
ReactDOM.render(
266+
<React.StrictMode>
267+
<SimplePieChart />
268+
</React.StrictMode>,
269+
document.getElementById("root")
270+
);
271+
```
272+
273+
# Contributing
274+
275+
Your PRs and stars are always welcome :). Checkout the [Contributing](https://github.com/chartshq/react-muze/blob/master/CONTRIBUTING.md) guides.
276+
277+
# Roadmap
278+
279+
Please contribute to our public wishlist or upvote an existing feature at [Muze Public Wishlist & Roadmap](https://github.com/orgs/chartshq/projects/1).
280+
281+
# License
282+
283+
MIT

0 commit comments

Comments
 (0)