Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from "react";
- import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardHeader, IonCardTitle, IonGrid, IonRow, IonCol } from "@ionic/react";
- import {
- LineChart, Line, XAxis, YAxis,
- } from 'recharts';
- //Commment
- import CanvasJSReact from "../external-libs/canvasjs.react";
- import "./css/Evolucao.css";
- interface registoAvaliacao {
- data: Date,
- peso: number
- }
- class Evolucao extends React.Component {
- state: {
- peso: Array<registoAvaliacao>
- cintura: Array<registoAvaliacao>
- }
- constructor(props: any) {
- super(props);
- this.state = ({
- peso: new Array<registoAvaliacao>(),
- cintura: new Array<registoAvaliacao>()
- });
- }
- componentDidMount() {
- this.setState({
- peso: [
- {x: new Date(2020, 0, 21), y: 98},
- {x: new Date(2020, 3, 2), y: 95},
- {x: new Date(2020, 5, 23), y: 93},
- {x: new Date(2020, 7, 12), y: 88},
- {x: new Date(2020, 10, 18), y: 82}
- ],
- cintura:[
- {x: new Date(2020, 0, 21), y: 98},
- {x: new Date(2020, 3, 2), y: 95},
- {x: new Date(2020, 5, 23), y: 93},
- {x: new Date(2020, 7, 12), y: 88},
- {x: new Date(2020, 10, 18), y: 82}
- ]
- });
- }
- render() {
- const optionsPeso = {
- animationEnabled: true,
- exportEnabled: true,
- theme: "light2", // "light1", "dark1", "dark2"
- title:{
- text: "Peso by Week of Year"
- },
- axisY: {
- title: "Peso(em Kg)",
- includeZero: false,
- suffix: "%"
- },
- axisX: {
- title: "Week of Year",
- prefix: "",
- interval: 2
- },
- data: [{
- type: "line",
- toolTipContent: "No mês {x} tinhas {y} kg",
- dataPoints:this.state.peso
- }]
- }
- const optionsCintura = {
- animationEnabled: true,
- exportEnabled: false,
- theme: "light2", // "light1", "dark1", "dark2"
- title:{
- text: "Cintura by Week of Year"
- },
- axisY: {
- title: "Cintura(em cm)",
- includeZero: false,
- suffix: "%"
- },
- axisX: {
- title: "Week of Year",
- prefix: "",
- interval: 2
- },
- data: [{
- type: "line",
- toolTipContent: "No mês {x} tinhas {y} cm de Cintura",
- dataPoints:this.state.cintura
- }]
- }
- return(
- <IonPage>
- <IonHeader>
- <IonToolbar color="primary">
- <IonTitle id="page-title">Evolução</IonTitle>
- </IonToolbar>
- </IonHeader>
- <IonContent>
- <IonGrid className="grid">
- <IonRow>
- <IonCol sizeXs="12" size-Sm ="12" sizeMd="12" sizeLg="6">
- <IonCard className="pesoCard">
- <IonCardHeader>
- <IonCardTitle><div className="textWrapper">Peso</div></IonCardTitle>
- </IonCardHeader>
- </IonCard>
- <div className="evoStats">
- <LineChart className="evoStats"
- width={500}
- height={200}
- data={this.state.peso}
- syncId="anyId"
- margin={{
- top: 10, right: 1, left: 30, bottom: 1,
- }}
- >
- <XAxis dataKey="x" />
- <YAxis dataKey="y" label="Peso" />
- <Line type="monotone" dataKey="x" stroke="#8884d8" fill="#8884d8" />
- </LineChart>
- </div>
- </IonCol>
- <IonCol>
- <IonCard className="cinturaCard">
- <IonCardHeader>
- <IonCardTitle><div className="textWrapper">Cintura</div></IonCardTitle>
- </IonCardHeader>
- </IonCard>
- <div className="evoStats">
- <CanvasJSReact.CanvasJSChart options = {optionsCintura} />
- </div>
- </IonCol>
- <IonCol sizeXs="12" size-Sm ="12" sizeMd="12" sizeLg="6">
- <IonCard className="pesoCard">
- <IonCardHeader>
- <IonCardTitle><div className="textWrapper">Peso</div></IonCardTitle>
- </IonCardHeader>
- </IonCard>
- <div className="evoStats">
- <CanvasJSReact.CanvasJSChart options = {optionsPeso} />
- </div>
- </IonCol>
- <IonCol>
- <IonCard className="cinturaCard">
- <IonCardHeader>
- <IonCardTitle><div className="textWrapper">Cintura</div></IonCardTitle>
- </IonCardHeader>
- </IonCard>
- <CanvasJSReact.CanvasJSChart className="canvas" options = {optionsCintura} />
- </IonCol>
- </IonRow>
- </IonGrid>
- </IonContent>
- </IonPage>
- );
- }
- }
- export default Evolucao;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement