Merge branch 'release/v1.0.0'

.gitignore

@@ -0,0 +1,49 @@
+# These are some examples of commonly ignored file patterns.
+# You should customize this list as applicable to your project.
+# Learn more about .gitignore:
+#     https://www.atlassian.com/git/tutorials/saving-changes/gitignore
+
+# Node artifact files
+node_modules/
+
+# Compiled Java class files
+*.class
+
+# Compiled Python bytecode
+*.py[cod]
+
+# Log files
+*.log
+
+# Package files
+*.jar
+
+# Maven
+target/
+# dist/
+
+# JetBrains IDE
+.idea/
+
+# Unit test reports
+TEST*.xml
+
+# Generated by MacOS
+.DS_Store
+
+# Generated by Windows
+Thumbs.db
+
+# Applications
+*.app
+*.exe
+*.war
+
+# Large media files
+*.mp4
+*.tiff
+*.avi
+*.flv
+*.mov
+*.wmv
+

CONTRIBUTING.md

@@ -0,0 +1,35 @@
+# Contribution Guidelines
+
+The new features and bug fixes are merged into `develop` branch. The `master` branch
+contains the latest stable release.
+
+Please, follow the following steps to contribute
+
+- Clone the repository.
+- Checkout `develop` branch.
+- Create feature or bug fixing branch using `git flow`
+- Install dependencies.
+- Add your new features or fixes.
+- Build the project.
+- Create a working example file.
+- Send PR.
+
+```sh
+$ git clone https://github.com/chartshq/react-muze.git
+$ cd react-muze
+$ git checkout develop
+$ git flow init
+$ git flow feature start <your-feature-branch-name>
+$ yarn install
+$ yarn build
+$ cd dist && yarn link
+```
+
+Create a working example for the fixed issue in /examples directory
+
+```sh
+$ yarn install
+$ cd examples
+$ yarn link @chartshq/react-muze
+$ yarn start
+```

LICENSE

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

README.md

@@ -1 +1,268 @@
-Hello
+# 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, add the following scripts inside your `package.json` 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 (
+    <Muze data={carsDm}>
+      <Canvas rows={["Acceleration"]} columns={["Name"]} />
+    </Muze>
+  );
+}
+```
+
+### 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 (
+      <Muze data={carsDm}>
+        <Canvas rows={["Acceleration"]} columns={["Name"]} />
+      </Muze>
+    );
+  }
+}
+
+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(
+  <React.StrictMode>
+    <SimplePieChart />
+  </React.StrictMode>,
+  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

decs.d.ts

@@ -0,0 +1,10 @@
+declare module muze {
+  export interface Env {}
+  export interface Canvas {
+    alias(): string;
+    data: Function;
+  }
+  export interface DataModel {}
+}
+
+declare module 'uuid';