Merge pull request #2 from chartshq/migrate

Add chart demos

examples/src/Examples/CrossInteractive/Canvas.js

@@ -0,0 +1,41 @@
+import * as React from "react";
+import Muze, { Canvas } from "@chartshq/react-muze/components";
+
+async function createDataModel() {
+    const data = await fetch("/data/cars.json")
+        .then((d) => d.json());
+    const schema = await fetch("/data/cars-schema.json")
+        .then((d) => d.json());
+    const DataModelClass = await Muze.DataModel.onReady();
+    const formattedData = await DataModelClass.loadData(data, schema);
+    return new DataModelClass(formattedData);
+}
+
+class CanvasInteractive extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            dm: null,
+        };
+    }
+
+    componentDidMount() {
+        createDataModel().then((dm) => {
+            this.setState({ dm });
+        });
+    }
+
+    render() {
+        const { dm } = this.state;
+
+        return (
+            <Muze data={dm}>
+                <Canvas rows={['Miles_per_Gallon']} columns={['Cylinders']} crossInteractive />
+                <Canvas rows={['Miles_per_Gallon']} columns={['Origin']} />
+                <Canvas rows={['Acceleration']} columns={['Cylinders']} crossInteractive />
+            </Muze>
+        );
+    }
+}
+
+export default CanvasInteractive;

examples/src/Examples/CrossInteractive/Global.js

@@ -0,0 +1,41 @@
+import * as React from "react";
+import Muze, { Canvas } from "@chartshq/react-muze/components";
+
+async function createDataModel() {
+    const data = await fetch("/data/cars.json")
+        .then((d) => d.json());
+    const schema = await fetch("/data/cars-schema.json")
+        .then((d) => d.json());
+    const DataModelClass = await Muze.DataModel.onReady();
+    const formattedData = await DataModelClass.loadData(data, schema);
+    return new DataModelClass(formattedData);
+}
+
+class MuzeInteractive extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            dm: null,
+        };
+    }
+
+    componentDidMount() {
+        createDataModel().then((dm) => {
+            this.setState({ dm });
+        });
+    }
+
+    render() {
+        const { dm } = this.state;
+
+        return (
+            <Muze data={dm} crossInteractive>
+                <Canvas rows={['Miles_per_Gallon']} columns={['Cylinders']} />
+                <Canvas rows={['Horsepower']} columns={['Cylinders']} />
+                <Canvas rows={['Acceleration']} columns={['Cylinders']} />
+            </Muze>
+        );
+    }
+}
+
+export default MuzeInteractive;

examples/src/Examples/General/AxisPadding.js

@@ -0,0 +1,42 @@
+import * as React from "react";
+import Muze, { Canvas } from "@chartshq/react-muze/components";
+import { Axes } from "@chartshq/react-muze/configurations";
+
+async function createDataModel() {
+    const data = await fetch("/data/cars.json")
+        .then((d) => d.json());
+    const schema = await fetch("/data/cars-schema.json")
+        .then((d) => d.json());
+    const DataModelClass = await Muze.DataModel.onReady();
+    const formattedData = await DataModelClass.loadData(data, schema);
+    return new DataModelClass(formattedData);
+}
+
+const axesConfig = Axes.LinearAxis.config().padding(0.2).create();
+
+class AxisPadding extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            dm: null,
+        };
+    }
+
+    componentDidMount() {
+        createDataModel().then((dm) => {
+            this.setState({ dm });
+        });
+    }
+
+    render() {
+        const { dm } = this.state;
+
+        return (
+            <Muze data={dm}>
+                <Canvas rows={['Acceleration']} columns={['Cylinders']} xAxis={axesConfig} />
+            </Muze>
+        );
+    }
+}
+
+export default AxisPadding;

examples/src/Examples/General/AxisPosition.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+import Muze, { Canvas } from "@chartshq/react-muze/components";
+
+async function createDataModel() {
+    const data = await fetch("/data/cars.json")
+        .then((d) => d.json());
+    const schema = await fetch("/data/cars-schema.json")
+        .then((d) => d.json());
+    const DataModelClass = await Muze.DataModel.onReady();
+    const formattedData = await DataModelClass.loadData(data, schema);
+    return new DataModelClass(formattedData);
+}
+
+class AxisPosition extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            dm: null,
+        };
+    }
+
+    componentDidMount() {
+        createDataModel().then((dm) => {
+            this.setState({ dm });
+        });
+    }
+
+    render() {
+        const { dm } = this.state;
+
+        return (
+            <Muze data={dm}>
+                <Canvas rows={[[], ['Acceleration']]} columns={['Year']} />
+            </Muze>
+        );
+    }
+}
+
+export default AxisPosition;

examples/src/Examples/General/Border.js

@@ -0,0 +1,76 @@
+import * as React from "react";
+import Muze, { Canvas } from "@chartshq/react-muze/components";
+import { Border } from "@chartshq/react-muze/configurations";
+import { MuzeConstants } from "@chartshq/react-muze/constants";
+
+async function createDataModel() {
+    const data = await fetch("/data/coffee.csv")
+        .then((d) => d.text());
+    const schema = [
+        {
+            "name": "Market",
+            "type": "dimension"
+        },
+        {
+            "name": "Product Type",
+            "type": "dimension"
+        },
+        {
+            "name": "Revenue",
+            "type": "measure",
+            "format": val => `$${val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`
+        },
+        {
+            "name": "Expense",
+            "type": "measure",
+            "format": val => `$${val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`
+        },
+        {
+            "name": "Profit",
+            "type": "measure"
+        }
+    ];
+    const DataModelClass = await Muze.DataModel.onReady();
+    const formattedData = await DataModelClass.loadData(data, schema);
+    return new DataModelClass(formattedData);
+}
+
+const border = Border.config()
+    .showRowBorders({ top: true, bottom: true, left: true, right: true })
+    .showColBorders({ top: true, bottom: true, left: true, right: true })
+    .showValueBorders({ top: false, bottom: false, left: false, right: false })
+    .width(1)
+    .style(MuzeConstants.BORDER_STYLE.DASHED)
+    .color("#a2a2a2")
+    .create();
+
+class BorderConfig extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            dm: null,
+        };
+    }
+
+    componentDidMount() {
+        createDataModel().then((dm) => {
+            this.setState({ dm });
+        });
+    }
+
+    render() {
+        const { dm } = this.state;
+
+        return (
+            <Muze data={dm}>
+                <Canvas
+                    rows={['Market', 'Product Type']}
+                    columns={[['Revenue', 'Expense'], ['Revenue', 'Expense']]}
+                    border={border}
+                />
+            </Muze>
+        );
+    }
+}
+
+export default BorderConfig;

examples/src/Examples/General/ColorScheme.js

@@ -0,0 +1,40 @@
+import * as React from "react";
+import Muze, { Canvas } from "@chartshq/react-muze/components";
+
+async function createDataModel() {
+    const data = await fetch("/data/cars.json")
+        .then((d) => d.json());
+    const schema = await fetch("/data/cars-schema.json")
+        .then((d) => d.json());
+    const DataModelClass = await Muze.DataModel.onReady();
+    const formattedData = await DataModelClass.loadData(data, schema);
+    return new DataModelClass(formattedData);
+}
+
+class ColorScheme extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            dm: null,
+        };
+    }
+
+    componentDidMount() {
+        createDataModel().then((dm) => {
+            this.setState({ dm });
+        });
+    }
+
+    render() {
+        const { dm } = this.state;
+
+        return (
+            <Muze data={dm} colorScheme={['#00876C', '#E88E63', 'magenta']}>
+                <Canvas rows={['Acceleration']} columns={['Cylinders']} color="Origin" />
+                <Canvas rows={['Acceleration']} columns={['Year']} color="Origin" />
+            </Muze>
+        );
+    }
+}
+
+export default ColorScheme;

examples/src/Examples/General/ConnectNullData.js

@@ -0,0 +1,44 @@
+import * as React from "react";
+import Muze, { Canvas, Layer } from "@chartshq/react-muze/components";
+
+async function createDataModel() {
+    const data = await fetch("/data/cars-with-null.json")
+        .then((d) => d.json());
+    const schema = await fetch("/data/cars-schema.json")
+        .then((d) => d.json());
+    const DataModelClass = await Muze.DataModel.onReady();
+    const formattedData = await DataModelClass.loadData(data, schema);
+    return new DataModelClass(formattedData);
+}
+
+class ConnectNullDataChart extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            dm: null,
+        };
+    }
+
+    componentDidMount() {
+        createDataModel().then((dm) => {
+            this.setState({ dm });
+        });
+    }
+
+    render() {
+        const { dm } = this.state;
+
+        return (
+            <Muze data={dm}>
+                <Canvas rows={['Acceleration']} columns={['Year']} color="Origin">
+                    <Layer mark='line' />
+                </Canvas>
+                <Canvas rows={['Acceleration']} columns={['Year']} color="Origin">
+                    <Layer mark='line' connectNullData />
+                </Canvas>
+            </Muze>
+        );
+    }
+}
+
+export default ConnectNullDataChart;

examples/src/Examples/General/Creation.js

@@ -0,0 +1,40 @@
+import * as React from "react";
+import Muze, { Canvas } from "@chartshq/react-muze/components";
+
+async function createDataModel() {
+    const data = await fetch("/data/cars.json")
+        .then((d) => d.json());
+    const schema = await fetch("/data/cars-schema.json")
+        .then((d) => d.json());
+    const DataModelClass = await Muze.DataModel.onReady();
+    const formattedData = await DataModelClass.loadData(data, schema);
+    return new DataModelClass(formattedData);
+}
+
+class BasicChart extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            dm: null,
+        };
+    }
+
+    componentDidMount() {
+        createDataModel().then((dm) => {
+            this.setState({ dm });
+        });
+    }
+
+    render() {
+        const { dm } = this.state;
+
+        return (
+            <Muze data={dm}>
+                <Canvas rows={['Acceleration']} columns={['Origin']} />
+                <Canvas rows={['Acceleration']} columns={['Year']} />
+            </Muze>
+        );
+    }
+}
+
+export default BasicChart;