@mree/mre-react-widget

mre-react-widget

Inclui os componentes que atuam como ferramentas para visualização de dados, um exemplo bem claro são os componentes encontrados em dashboards como os gráficos e eventos em um calendário.

Instalação:

npm i -save @mree/mre-react-widget

Importar Componentes:

import Widget from '@mree/mre-react-widget';
//ou individualmente
import {BaseCard} from '@mree/mre-react-widget';
import {Calendar} from '@mree/mre-react-widget';
import {Circle} from '@mree/mre-react-widget';
import {Simulator} from '@mree/mre-react-widget';
import {Subtitle} from '@mree/mre-react-widget';
import {Square} from '@mree/mre-react-widget';
import {GoogleMaps} from '@mree/mre-react-widget';
import {PanelEvent} from '@mree/mre-react-widget';
import {Signature} from '@mree/mre-react-widget';

Exemplos de Utilização

import {BaseCard} from '@mree/mre-react-widget';

class CardChild extends BaseCard {

    constructor(props, states) {
        super(props, states);
        this._bind();
    }

    //A função é chamada no BaseCard quando recebe uma nova props
    load(value) {this.setState({conteudo: value.conteudo});}

    //A função é chamada no BaseCard quando recebe uma nova props vazia
    clean() {this.setState({conteudo: ''});}

    render() {
        return (
            <Card>
                <CardHeader title={"Teste"}/>
                <CardText>
                    {this.state.conteudo}
                </CardText>
            </Card>
        );
    }
}

import {Calendar} from '@mree/mre-react-widget';
let events =  [{'title': 'Evento 1','start': new Date(2017, 2, 9),'end': new Date(2017, 2, 10),}];
...
render() {
    return (
        <CalendarRender events={events}/>
    );
}

import {Simulator} from '@mree/mre-react-widget';
const blocks = [
    {
        title: "Bloco 1",
        lines: [
            {
                titleLeft: "1º",
                titleRigth: "Linha",
                subtitleLeft: ["Coluna 1L", "Coluna 2L"],
                subtitleRigth: ["Coluna 1R", "Coluna 2R"],
                align: "center",
                squares: [
                    {
                        title: "1",
                        color: "red",
                    },
                    {},
                    {
                        title: "2",
                        color: "blue",
                        values: ["valor 1", "valor 2"]
                    }
                ]
            },
     }
];
...
render() {
    return (
        <Simulator blocks={blocks}/>
    );
}

/* Para o GoogleMaps funcionar é necessário inserir o script do googleapis com sua key de acesso, conforme o exemplo:
* <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJstWQwSVqSeLdhDJkUKHG6z4-tHIJfWg&amp;callback=initialize;libraries=drawing"/>
*/
import {GoogleMaps} from '@mree/mre-react-widget';
const markers = [{
      "endereco" : "R LUIS ANTONIO BERTAGLIA, 167, NOVA CARIOBA, Americana, 13473720",
      "postalCode" : "13473720",
      "lat" : "-22.7115503",
      "lng" : "-47.317224899999985",
      "color" : "orange"
    }, {
      "endereco" : "Rua Abril, 133, Nova Campinas, Campinas, 13333330",
      "color" : "green"
    }
];
...
render() {
    return (
        <GoogleMaps ref="map" markers={markers} zoom={10} limit={1000} maxDelay={500}/>
    );
}