Advertisement
HCHexY

evolucao.tsx

Mar 21st, 2020
919
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from "react";
  2. import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardHeader, IonCardTitle,  IonGrid, IonRow, IonCol } from "@ionic/react";
  3. import {
  4.     LineChart, Line, XAxis, YAxis,
  5.   } from 'recharts';
  6. //Commment
  7. import CanvasJSReact from "../external-libs/canvasjs.react";
  8.  
  9. import "./css/Evolucao.css";
  10.  
  11. interface registoAvaliacao {
  12.     data: Date,
  13.     peso: number
  14. }
  15.  
  16. class Evolucao extends React.Component {
  17.  
  18.     state: {
  19.         peso: Array<registoAvaliacao>
  20.         cintura: Array<registoAvaliacao>
  21.     }
  22.  
  23.    
  24.  
  25.     constructor(props: any) {
  26.  
  27.         super(props);        
  28.         this.state = ({
  29.             peso: new Array<registoAvaliacao>(),
  30.             cintura: new Array<registoAvaliacao>()
  31.         });
  32.     }
  33.  
  34.     componentDidMount() {
  35.  
  36.         this.setState({
  37.             peso: [
  38.                 {x: new Date(2020, 0, 21), y: 98},
  39.                 {x: new Date(2020, 3, 2), y: 95},
  40.                 {x: new Date(2020, 5, 23), y: 93},
  41.                 {x: new Date(2020, 7, 12), y: 88},
  42.                 {x: new Date(2020, 10, 18), y: 82}
  43.             ],
  44.             cintura:[
  45.                 {x: new Date(2020, 0, 21), y: 98},
  46.                 {x: new Date(2020, 3, 2), y: 95},
  47.                 {x: new Date(2020, 5, 23), y: 93},
  48.                 {x: new Date(2020, 7, 12), y: 88},
  49.                 {x: new Date(2020, 10, 18), y: 82}
  50.             ]
  51.         });
  52.     }
  53.  
  54.     render() {
  55.        
  56.         const optionsPeso = {
  57.             animationEnabled: true,
  58.             exportEnabled: true,
  59.             theme: "light2", // "light1", "dark1", "dark2"
  60.             title:{
  61.                 text: "Peso by Week of Year"
  62.             },
  63.             axisY: {
  64.                 title: "Peso(em Kg)",
  65.                 includeZero: false,
  66.                 suffix: "%"
  67.             },
  68.             axisX: {
  69.                 title: "Week of Year",
  70.                 prefix: "",
  71.                 interval: 2
  72.             },
  73.             data: [{
  74.                 type: "line",
  75.                 toolTipContent: "No mês {x} tinhas {y} kg",
  76.                 dataPoints:this.state.peso
  77.             }]
  78.  
  79.         }
  80.         const optionsCintura = {
  81.             animationEnabled: true,
  82.             exportEnabled: false,
  83.             theme: "light2", // "light1", "dark1", "dark2"
  84.             title:{
  85.                 text: "Cintura by Week of Year"
  86.             },
  87.             axisY: {
  88.                 title: "Cintura(em cm)",
  89.                 includeZero: false,
  90.                 suffix: "%"
  91.             },
  92.             axisX: {
  93.                 title: "Week of Year",
  94.                 prefix: "",
  95.                 interval: 2
  96.             },
  97.             data: [{
  98.                 type: "line",
  99.                 toolTipContent: "No mês {x} tinhas {y} cm de Cintura",
  100.                 dataPoints:this.state.cintura
  101.             }]
  102.  
  103.         }
  104.  
  105.         return(
  106.             <IonPage>
  107.  
  108.                 <IonHeader>
  109.                     <IonToolbar color="primary">
  110.                         <IonTitle id="page-title">Evolução</IonTitle>
  111.                     </IonToolbar>
  112.                 </IonHeader>
  113.             <IonContent>
  114.                 <IonGrid className="grid">
  115.                     <IonRow>
  116.                         <IonCol sizeXs="12" size-Sm ="12" sizeMd="12" sizeLg="6">
  117.             <IonCard className="pesoCard">
  118.              <IonCardHeader>
  119.                 <IonCardTitle><div className="textWrapper">Peso</div></IonCardTitle>
  120.             </IonCardHeader>
  121.             </IonCard>
  122.             <div className="evoStats">
  123.  
  124.             <LineChart className="evoStats"
  125.          width={500}
  126.          height={200}
  127.          data={this.state.peso}
  128.          syncId="anyId"
  129.          margin={{
  130.            top: 10, right: 1, left: 30, bottom: 1,
  131.          }}
  132.            >
  133.           <XAxis dataKey="x"  />
  134.           <YAxis dataKey="y" label="Peso" />
  135.           <Line type="monotone" dataKey="x" stroke="#8884d8" fill="#8884d8" />
  136.         </LineChart>
  137.             </div>
  138.             </IonCol>
  139.             <IonCol>
  140.             <IonCard className="cinturaCard">
  141.              <IonCardHeader>
  142.                 <IonCardTitle><div className="textWrapper">Cintura</div></IonCardTitle>
  143.             </IonCardHeader>
  144.             </IonCard>
  145.             <div className="evoStats">
  146.        
  147.                 <CanvasJSReact.CanvasJSChart options = {optionsCintura} />
  148.                
  149.             </div>
  150.             </IonCol>
  151.             <IonCol sizeXs="12" size-Sm ="12" sizeMd="12" sizeLg="6">
  152.             <IonCard className="pesoCard">
  153.              <IonCardHeader>
  154.                 <IonCardTitle><div className="textWrapper">Peso</div></IonCardTitle>
  155.             </IonCardHeader>
  156.             </IonCard>
  157.             <div className="evoStats">
  158.                 <CanvasJSReact.CanvasJSChart options = {optionsPeso} />
  159.             </div>
  160.             </IonCol>
  161.             <IonCol>
  162.             <IonCard className="cinturaCard">
  163.              <IonCardHeader>
  164.                 <IonCardTitle><div className="textWrapper">Cintura</div></IonCardTitle>
  165.             </IonCardHeader>
  166.             </IonCard>
  167.  
  168.            
  169.                 <CanvasJSReact.CanvasJSChart className="canvas" options = {optionsCintura} />
  170.          
  171.             </IonCol>
  172.             </IonRow>
  173.             </IonGrid>
  174.             </IonContent>
  175.  
  176.             </IonPage>
  177.         );
  178.     }
  179.  
  180. }
  181.  
  182. export default Evolucao;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement