562 lines
18 KiB
JavaScript
562 lines
18 KiB
JavaScript
import React, { Component } from 'react';
|
|
|
|
import { formatNumber } from '../../numbers';
|
|
|
|
class Results extends Component {
|
|
state = {};
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
oldWheelDiameter: this.props.oldWheelDiameter,
|
|
oldWheelWidth: this.props.oldWheelWidth,
|
|
oldWheelET: this.props.oldWheelET,
|
|
oldTyreWidth: this.props.oldTyreWidth,
|
|
oldTyreHeight: this.props.oldTyreHeight,
|
|
newWheelDiameter: this.props.newWheelDiameter,
|
|
newWheelWidth: this.props.newWheelWidth,
|
|
newWheelET: this.props.newWheelET,
|
|
newTyreWidth: this.props.newTyreWidth,
|
|
newTyreHeight: this.props.newTyreHeight,
|
|
diffET: null,
|
|
}
|
|
}
|
|
|
|
componentDidMount () {
|
|
// Rim
|
|
const _ETOld=(2.54*Number(this.state.oldWheelWidth)/2)+Number(this.state.oldWheelET)/10;
|
|
const _ETNew=(2.54*Number(this.state.newWheelWidth)/2)+Number(this.state.newWheelET)/10;
|
|
const _wayOld=(2.54*Number(this.state.oldTyreWidth)/2)-Number(this.state.oldWheelET)/10;
|
|
const _wayNew=(2.54*Number(this.state.newWheelWidth)/2)-Number(this.state.newWheelET)/10;
|
|
const diffET=(_ETNew-_ETOld)*10;
|
|
const diffWay=(_wayNew-_wayOld)*10;
|
|
|
|
|
|
// Tyres
|
|
const diamRimOld=Number(this.state.oldWheelDiameter)*2.54;
|
|
const tyreHOld=Number(this.state.oldTyreWidth)*(Number(this.state.oldTyreHeight))/1000;
|
|
const diamWheelOld=diamRimOld+2*Number(this.state.oldTyreWidth)*(Number(this.state.oldTyreHeight))/1000;
|
|
const diamRimNew=Number(this.state.newWheelDiameter)*2.54;
|
|
const tyreHNew=Number(this.state.newTyreWidth)*(Number(this.state.newTyreHeight))/1000;
|
|
const diamWheelNew=diamRimNew+2*Number(this.state.newTyreWidth)*(Number(this.state.newTyreHeight))/1000;
|
|
const diffDiam=diamWheelNew-diamWheelOld;
|
|
const diffRayon=diffDiam/2;
|
|
const tolerance=tyreHOld*0.03;
|
|
const limitDown=diamWheelOld*0.97;
|
|
const limitUp=diamWheelOld*1.03;
|
|
|
|
|
|
// Wheel
|
|
let libelleColA='';
|
|
let libelleColB='';
|
|
let libelleColC='';
|
|
let libelleColD='';
|
|
let diamColA=0;
|
|
let diamColB=0;
|
|
let diamColC=0;
|
|
let diamColD=0;
|
|
let clsColA='';
|
|
let clsColB='';
|
|
let clsColC='';
|
|
let clsColD='';
|
|
const horsTolerance="Diamètre hors tolérance";
|
|
const ToleranceBasse="Tolérance mini autorisée";
|
|
const ToleranceHaute="Tolérance maxi autorisée";
|
|
const DiametreOrigine="Diamètre origine";
|
|
const DiametreNew="Nouveau diamètre";
|
|
|
|
if(diamWheelNew<limitDown){
|
|
libelleColA=horsTolerance;
|
|
libelleColB=ToleranceBasse;
|
|
libelleColC=DiametreOrigine;
|
|
libelleColD=ToleranceHaute;
|
|
diamColA=diamWheelNew;
|
|
diamColB=limitDown;
|
|
diamColC=diamWheelOld;
|
|
diamColD=limitUp;
|
|
clsColA="error";
|
|
clsColC="default";
|
|
}else if(diamWheelNew>limitUp){
|
|
libelleColA=ToleranceBasse;
|
|
libelleColB=DiametreOrigine;
|
|
libelleColC=ToleranceHaute;
|
|
libelleColD=horsTolerance;
|
|
diamColA=limitDown;
|
|
diamColB=diamWheelOld;
|
|
diamColC=limitUp;
|
|
diamColD=diamWheelNew;
|
|
clsColD="error";
|
|
clsColB="default";
|
|
}else{
|
|
if(diamWheelNew<diamWheelOld){
|
|
libelleColA=ToleranceBasse;
|
|
libelleColB=DiametreNew;
|
|
libelleColC=DiametreOrigine;
|
|
libelleColD=ToleranceHaute;
|
|
diamColA=limitDown;
|
|
diamColB=diamWheelNew;
|
|
diamColC=diamWheelOld;
|
|
diamColD=limitUp;
|
|
clsColB="ok";
|
|
clsColC="default";
|
|
}else{
|
|
libelleColA=ToleranceBasse;
|
|
libelleColB=DiametreOrigine;
|
|
libelleColC=DiametreNew;
|
|
libelleColD=ToleranceHaute;
|
|
diamColA=limitDown;
|
|
diamColB=diamWheelOld;
|
|
diamColC=diamWheelNew;
|
|
diamColD=limitUp;
|
|
clsColB="default";
|
|
clsColC="ok";
|
|
}
|
|
}
|
|
|
|
|
|
// SPeed
|
|
const pi=Math.PI;
|
|
const speed=90;
|
|
const rayonOld=(diamWheelOld*10);
|
|
const rayonNew=(diamWheelNew*10);
|
|
const tpm=speed/(pi*rayonOld);
|
|
const vitesseNew=(pi*rayonNew*tpm);
|
|
|
|
// Set state
|
|
this.setState({
|
|
diffET: diffET,
|
|
diffWay: diffWay,
|
|
diffDiam: diffDiam,
|
|
diffRayon: diffRayon,
|
|
tolerance: tolerance,
|
|
limitDown: limitDown,
|
|
limitUp: limitUp,
|
|
libelleColA: libelleColA,
|
|
libelleColB: libelleColB,
|
|
libelleColC: libelleColC,
|
|
libelleColD: libelleColD,
|
|
diamColA: diamColA,
|
|
diamColB: diamColB,
|
|
diamColC: diamColC,
|
|
diamColD: diamColD,
|
|
clsColA: clsColA,
|
|
clsColB: clsColB,
|
|
clsColC: clsColC,
|
|
clsColD: clsColD,
|
|
speed: speed,
|
|
vitesseNew: vitesseNew
|
|
});
|
|
|
|
this.drawWheel(diamWheelOld,diamWheelNew,diamRimOld,diamRimNew);
|
|
this.drawET(diamRimOld,diamRimNew,tyreHOld,tyreHNew);
|
|
}
|
|
|
|
drawWheel(diamWheelOld,diamWheelNew,diamRimOld,diamRimNew){
|
|
let c = this.refs.roue_face;
|
|
var ctx=c.getContext("2d");
|
|
var scalling=2;
|
|
var YText=c.height-15;
|
|
var YArcOld=c.height-20-diamWheelOld*scalling;
|
|
var YArcNew=c.height-20-diamWheelNew*scalling;
|
|
var YTopWheelOld=c.height-20-diamWheelOld*scalling*2;
|
|
|
|
ctx.clearRect(0,0,c.width,c.height);
|
|
ctx.beginPath();
|
|
ctx.moveTo(0,0);
|
|
ctx.lineTo(0,c.height);
|
|
ctx.lineTo(c.width,c.height);
|
|
ctx.lineTo(c.width,0);
|
|
ctx.lineTo(0,0);
|
|
ctx.setLineDash([0]);
|
|
ctx.lineJoin="bevel";
|
|
ctx.lineCap="butt";
|
|
ctx.strokeStyle="black";
|
|
ctx.lineWidth=2;
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
ctx.beginPath();
|
|
ctx.moveTo(0,c.height-20);
|
|
ctx.lineTo(c.width,c.height-20);
|
|
ctx.setLineDash([0]);
|
|
ctx.lineJoin="bevel";
|
|
ctx.lineCap="butt";
|
|
ctx.strokeStyle="black";
|
|
ctx.lineWidth=2;
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
ctx.beginPath();
|
|
ctx.moveTo(0,YTopWheelOld);
|
|
ctx.lineTo(c.width,YTopWheelOld);
|
|
ctx.strokeStyle="red";
|
|
ctx.setLineDash([8,3]);
|
|
ctx.lineWidth=2;
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
ctx.beginPath();
|
|
var XAncien=diamWheelOld*scalling+20;
|
|
ctx.arc(XAncien,YArcOld,diamWheelOld*scalling,0,Math.PI*2,true);
|
|
ctx.setLineDash([0]);
|
|
ctx.strokeStyle="black";
|
|
ctx.fillStyle="black";
|
|
ctx.fill();ctx.stroke();
|
|
ctx.closePath();
|
|
ctx.beginPath();
|
|
ctx.arc(XAncien,YArcOld,diamRimOld*scalling,0,Math.PI*2,true);
|
|
ctx.setLineDash([0]);
|
|
ctx.strokeStyle="white";
|
|
ctx.fillStyle="white";
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
ctx.font="10pt Verdana";
|
|
ctx.textAlign="center";
|
|
ctx.textBaseline="top";
|
|
ctx.fillStyle="#333";
|
|
ctx.fillText('Ancienne roue',XAncien,YText);
|
|
var imageAncienneWheel=new Image();
|
|
imageAncienneWheel.src='jante-face.png';
|
|
imageAncienneWheel.onload=function(){
|
|
var centreOldWheel=c.height-20-(diamWheelOld-diamRimOld)*scalling-diamRimOld*scalling*2;
|
|
ctx.drawImage(this,XAncien-diamRimOld*scalling,centreOldWheel,diamRimOld*scalling*2,diamRimOld*scalling*2);
|
|
};
|
|
|
|
ctx.beginPath();
|
|
var XNew=diamWheelOld*scalling*2+40+diamWheelNew*scalling;
|
|
ctx.arc(XNew,YArcNew,diamWheelNew*scalling,0,Math.PI*2,true);
|
|
ctx.setLineDash([0]);
|
|
ctx.strokeStyle="black";
|
|
ctx.fillStyle="black";
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
ctx.beginPath();
|
|
ctx.arc(XNew,YArcNew,diamRimNew*scalling,0,Math.PI*2,true);
|
|
ctx.setLineDash([0]);
|
|
ctx.strokeStyle="white";
|
|
ctx.fillStyle="white";
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
ctx.font="10pt Verdana";
|
|
ctx.textAlign="center";
|
|
ctx.textBaseline="top";
|
|
ctx.fillStyle="#333";
|
|
ctx.fillText('Nouvelle roue',XNew,YText);
|
|
var image=new Image();
|
|
image.src='jante-face.png';
|
|
image.onload=function(){
|
|
var centreNouvelleWheel=c.height-20-(diamWheelNew-diamRimNew)*scalling-diamRimNew*scalling*2;
|
|
ctx.drawImage(this,XNew-diamRimNew*scalling,centreNouvelleWheel,diamRimNew*scalling*2,diamRimNew*scalling*2);
|
|
};
|
|
}
|
|
|
|
drawET(diamRimOld,diamRimNew,tyreHOld,tyreHNew){
|
|
var c = this.refs.roue_profil;
|
|
var ctx=c.getContext("2d");
|
|
var scalling=5;
|
|
var YOld=c.height-50;
|
|
var YNew=c.height-50;
|
|
var XmoyeuOld=120;
|
|
var XmoyeuNew=395;
|
|
var actuel_jante_largeur=Number(this.state.oldWheelWidth);
|
|
var actuel_jante_ET=Number(this.state.oldWheelET);
|
|
var actuel_tyre_largeur=Number(this.state.oldTyreWidth);
|
|
var nouveau_jante_largeur=Number(this.state.newWheelWidth);
|
|
var nouveau_jante_ET=Number(this.state.newWheelET);
|
|
var nouveau_tyre_largeur=Number(this.state.newTyreWidth);
|
|
|
|
ctx.clearRect(0,0,c.width,c.height);
|
|
ctx.beginPath();
|
|
ctx.moveTo(0,0);
|
|
ctx.lineTo(0,c.height);
|
|
ctx.lineTo(c.width,c.height);
|
|
ctx.lineTo(c.width,0);
|
|
ctx.lineTo(0,0);
|
|
ctx.setLineDash([0]);
|
|
ctx.lineJoin="bevel";
|
|
ctx.lineCap="butt";
|
|
ctx.strokeStyle="black";
|
|
ctx.lineWidth=2;
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
ctx.beginPath();
|
|
ctx.moveTo(20,0);
|
|
ctx.lineTo(20,c.height);
|
|
ctx.setLineDash([0]);
|
|
ctx.lineJoin="bevel";
|
|
ctx.lineCap="butt";
|
|
ctx.strokeStyle="black";
|
|
ctx.lineWidth=4;
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
ctx.beginPath();
|
|
ctx.moveTo(20,YOld);
|
|
ctx.lineTo(XmoyeuOld,YOld);
|
|
ctx.setLineDash([0]);
|
|
ctx.lineJoin="bevel";
|
|
ctx.lineCap="butt";
|
|
ctx.strokeStyle="black";
|
|
ctx.lineWidth=16;
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
|
|
var largeurRimOld=scalling*(2.54*actuel_jante_largeur);
|
|
var rebordInterneOld=largeurRimOld/2+scalling*actuel_jante_ET/10;
|
|
var demiRimOld=scalling*diamRimOld/2;
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(XmoyeuOld-rebordInterneOld,YOld-8);
|
|
ctx.lineTo(XmoyeuOld-rebordInterneOld,YOld-demiRimOld);
|
|
ctx.setLineDash([0]);
|
|
ctx.lineJoin="bevel";
|
|
ctx.lineCap="butt";
|
|
ctx.strokeStyle="#959595";
|
|
ctx.lineWidth=1;
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
ctx.beginPath();
|
|
ctx.moveTo(XmoyeuOld-rebordInterneOld,YOld-demiRimOld);
|
|
ctx.lineTo(XmoyeuOld+largeurRimOld-rebordInterneOld,YOld-demiRimOld);
|
|
ctx.lineTo(XmoyeuOld+largeurRimOld-rebordInterneOld,YOld-demiRimOld+10);
|
|
ctx.lineTo(XmoyeuOld,YOld-10);
|
|
ctx.lineTo(XmoyeuOld,YOld+10);
|
|
ctx.setLineDash([0]);
|
|
ctx.lineJoin="bevel";
|
|
ctx.lineCap="butt";
|
|
ctx.strokeStyle="#959595";
|
|
ctx.lineWidth=6;
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
|
|
var largeurPneuOld=actuel_tyre_largeur/10;
|
|
var ETPneuOld=((2.54*actuel_jante_largeur)-largeurPneuOld)/2;
|
|
var Y=YOld;
|
|
|
|
if(tyreHOld>largeurPneuOld){
|
|
Y=Math.sqrt(ETPneuOld*ETPneuOld-tyreHOld*tyreHOld);
|
|
}else{
|
|
Y=Math.sqrt(tyreHOld*tyreHOld-ETPneuOld*ETPneuOld);
|
|
}
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo((XmoyeuOld-rebordInterneOld),YOld-demiRimOld);
|
|
ctx.lineTo((XmoyeuOld-rebordInterneOld+ETPneuOld*scalling),(YOld-demiRimOld-Y*scalling));
|
|
ctx.lineTo((XmoyeuOld-rebordInterneOld+ETPneuOld*scalling+largeurPneuOld*scalling),(YOld-demiRimOld-Y*scalling));
|
|
ctx.lineTo(XmoyeuOld+largeurRimOld-rebordInterneOld,YOld-demiRimOld);
|
|
ctx.setLineDash([0]);
|
|
ctx.lineJoin="round";
|
|
ctx.lineCap="round";
|
|
ctx.strokeStyle="#000";
|
|
ctx.lineWidth=6;
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
ctx.font="10pt Verdana";
|
|
ctx.textAlign="center";
|
|
ctx.textBaseline="top";
|
|
ctx.fillStyle="#333";
|
|
ctx.fillText('Ancienne roue',XmoyeuOld,c.height-15);
|
|
ctx.beginPath();
|
|
ctx.moveTo(XmoyeuOld-115,YOld);
|
|
ctx.lineTo(XmoyeuOld+15,YOld);
|
|
ctx.setLineDash([8,3,4,3]);
|
|
ctx.lineJoin="bevel";
|
|
ctx.lineCap="butt";
|
|
ctx.strokeStyle="red";
|
|
ctx.lineWidth=1;
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
ctx.beginPath();
|
|
ctx.moveTo(c.width/2+20,0);
|
|
ctx.lineTo(c.width/2+20,c.height);
|
|
ctx.setLineDash([0]);
|
|
ctx.lineJoin="bevel";
|
|
ctx.lineCap="butt";
|
|
ctx.strokeStyle="black";
|
|
ctx.lineWidth=4;
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
ctx.beginPath();
|
|
ctx.moveTo(c.width/2+20,YNew);
|
|
ctx.lineTo(XmoyeuNew,YNew);
|
|
ctx.setLineDash([0]);
|
|
ctx.lineJoin="bevel";
|
|
ctx.lineCap="butt";
|
|
ctx.strokeStyle="black";
|
|
ctx.lineWidth=16;
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
|
|
var largeurRimNew=scalling*(2.54*nouveau_jante_largeur);
|
|
var rebordInterneNew=largeurRimNew/2+scalling*nouveau_jante_ET/10;
|
|
var demiRimNew=scalling*diamRimNew/2;
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(XmoyeuNew-rebordInterneNew,YNew-8);
|
|
ctx.lineTo(XmoyeuNew-rebordInterneNew,YNew-demiRimNew);
|
|
ctx.setLineDash([0]);
|
|
ctx.lineJoin="bevel";
|
|
ctx.lineCap="butt";
|
|
ctx.strokeStyle="#959595";
|
|
ctx.lineWidth=1;
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
ctx.beginPath();
|
|
ctx.moveTo(XmoyeuNew-rebordInterneNew,YNew-demiRimNew);
|
|
ctx.lineTo(XmoyeuNew+largeurRimNew-rebordInterneNew,YNew-demiRimNew);
|
|
ctx.lineTo(XmoyeuNew+largeurRimNew-rebordInterneNew,YNew-demiRimNew+10);
|
|
ctx.lineTo(XmoyeuNew,YNew-10);
|
|
ctx.lineTo(XmoyeuNew,YNew+10);
|
|
ctx.setLineDash([0]);
|
|
ctx.lineJoin="bevel";
|
|
ctx.lineCap="butt";
|
|
ctx.strokeStyle="#959595";
|
|
ctx.lineWidth=6;
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
|
|
console.log("== Information nouvelle jante ==");
|
|
console.log("Largeur : "+(2.54*nouveau_jante_largeur));
|
|
console.log("ET : "+nouveau_jante_ET/10);
|
|
console.log("Position rebord interne : "+rebordInterneNew);
|
|
console.log("== END ==");
|
|
|
|
var largeurPneuNew=nouveau_tyre_largeur/10;
|
|
var ETPneuNew=((2.54*nouveau_jante_largeur)-largeurPneuNew)/2;Y=YNew;
|
|
|
|
if(tyreHNew>largeurPneuNew){
|
|
Y=Math.sqrt(ETPneuNew*ETPneuNew-tyreHNew*tyreHNew);
|
|
}else{
|
|
Y=Math.sqrt(tyreHNew*tyreHNew-ETPneuNew*ETPneuNew);
|
|
}
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo((XmoyeuNew-rebordInterneNew),YNew-demiRimNew);
|
|
ctx.lineTo((XmoyeuNew-rebordInterneNew+ETPneuNew*scalling),(YNew-demiRimNew-Y*scalling)); //ERR
|
|
ctx.lineTo((XmoyeuNew-rebordInterneNew+ETPneuNew*scalling+largeurPneuNew*scalling),(YNew-demiRimNew-Y*scalling)); //ERR
|
|
ctx.lineTo(XmoyeuNew+largeurRimNew-rebordInterneNew,YNew-demiRimNew); //ERR
|
|
ctx.setLineDash([0]);
|
|
ctx.lineJoin="round";
|
|
ctx.lineCap="round";
|
|
ctx.strokeStyle="#000";
|
|
ctx.lineWidth=6;
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
ctx.font="10pt Verdana";
|
|
ctx.textAlign="center";
|
|
ctx.textBaseline="top";
|
|
ctx.fillStyle="#333";
|
|
ctx.fillText('Nouvelle roue',XmoyeuNew,c.height-15);
|
|
ctx.beginPath();
|
|
ctx.moveTo(XmoyeuNew-115,YNew);
|
|
ctx.lineTo(XmoyeuNew+15,YNew);
|
|
ctx.setLineDash([8,3,4,3]);
|
|
ctx.lineJoin="bevel";
|
|
ctx.lineCap="butt";
|
|
ctx.strokeStyle="red";
|
|
ctx.lineWidth=1;
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<h1>Résultat</h1>
|
|
<h2>Jante</h2>
|
|
<p>
|
|
{ this.state.diffET > 0 ?
|
|
(
|
|
"Vos nouvelles jantes seront plus proches de votre pivot de " + formatNumber(this.state.diffET,2,',',' ') + " mm."
|
|
)
|
|
:
|
|
(
|
|
"Vos nouvelles jantes seront plus éloignées de votre pivot de " + formatNumber(this.state.diffET,2,',',' ') + " mm."
|
|
)
|
|
}
|
|
<br />
|
|
{
|
|
this.state.diffWay > 0 ?
|
|
(
|
|
"Vos nouvelles jantes ressortiront de " + formatNumber( this.state.diffWay, 2, ',', ' ' ) + " mm par rapport à l'origine."
|
|
)
|
|
:
|
|
(
|
|
"Vos nouvelles jantes rentreront de " + formatNumber(-(this.state.diffWay), 2, ',', ' ' ) + " mm par rapport à l'origine."
|
|
)
|
|
}
|
|
</p>
|
|
|
|
<h2>Pneu</h2>
|
|
<p>
|
|
{ this.state.diffDiam > 0 ?
|
|
(
|
|
<span>
|
|
{`Votre nouveau pneu aura un diamètre plus petit de ${formatNumber(- (this.state.diffDiam),2,',',' ')} cm.`}
|
|
<br />
|
|
{`Votre véhicule sera ainsi rabaissé de ${formatNumber(- (this.state.diffRayon),2,',',' ')} cm.`}
|
|
</span>
|
|
)
|
|
:
|
|
(
|
|
<span>
|
|
{`Votre nouveau pneu aura un diamètre plus grand de ${formatNumber( this.state.diffDiam,2,',',' ')} cm.`}
|
|
<br />
|
|
{`Votre véhicule sera ainsi réhaussé de ${formatNumber( this.state.diffRayon,2,',',' ')} cm.`}
|
|
</span>
|
|
)
|
|
}
|
|
<br />
|
|
<span className='glyphicon glyphicon-link' aria-hidden='true'></span>
|
|
<a href={`http://tyrestretch.com/${formatNumber(this.state.newWheelWidth,1,'.','')}-${this.state.newTyreWidth}-${this.state.newTyreHeight}-R${this.state.newWheelDiameter}/`} target='_blank'>Aperçu</a> (Il se peut qu'il n'y ai aucun aperçu pour cette dimension)
|
|
</p>
|
|
|
|
<h2>Vitesse</h2>
|
|
<p>
|
|
Quand votre compteur indique <strong>{this.state.speed} km/h</strong> vous roulez en réalité à <strong>{formatNumber(this.state.vitesseNew,2,',',' ')} km/h</strong>
|
|
</p>
|
|
|
|
<h2>Roue</h2>
|
|
<table className='table table-bordered table-condensed table-centered'>
|
|
<thead>
|
|
<tr>
|
|
<th className={this.state.clsColA}>{this.state.libelleColA}</th>
|
|
<th className={this.state.clsColB}>{this.state.libelleColB}</th>
|
|
<th className={this.state.clsColC}>{this.state.libelleColC}</th>
|
|
<th className={this.state.clsColD}>{this.state.libelleColD}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td className='col-xs-3'>{formatNumber(this.state.diamColA,2,',',' ')}</td>
|
|
<td className='col-xs-3'>{formatNumber(this.state.diamColB,2,',',' ')}</td>
|
|
<td className='col-xs-3'>{formatNumber(this.state.diamColC,2,',',' ')}</td>
|
|
<td className='col-xs-3'>{formatNumber(this.state.diamColD,2,',',' ')}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<figure>
|
|
<canvas width="550" height="300" ref="roue_face">
|
|
Votre navigateur ne prends pas en charge la gestion des Canvas. Vous ne pourrez pas visualer le rendu de votre nouvelle roue.
|
|
</canvas>
|
|
<figcaption>Comparaison ancienne et nouvelle roue, vue de face</figcaption>
|
|
</figure>
|
|
|
|
<figure>
|
|
<canvas width="550" height="300" ref="roue_profil">
|
|
Votre navigateur ne prends pas en charge la gestion des Canvas. Vous ne pourrez pas visualer le rendu de votre nouvelle roue.
|
|
</canvas>
|
|
<figcaption>Comparaison ancienne et nouvelle roue, demie vue de profil</figcaption>
|
|
</figure>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Results;
|
|
|
|
/*
|
|
|
|
*/
|