diff --git a/src/assets/icons/ico/euro-icon.svg b/src/assets/icons/ico/euro-icon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9cb2eb9abdaa02d3ae218188ef8da0bdc2501eea
--- /dev/null
+++ b/src/assets/icons/ico/euro-icon.svg
@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11" cy="11" r="10.5" fill="#121212" stroke="#E3B82A"/>
+<path d="M6 9.57631H7.064C7.18667 8.92565 7.38133 8.33898 7.648 7.81631C7.91467 7.28831 8.24 6.84031 8.624 6.47231C9.008 6.10431 9.44267 5.82165 9.928 5.62431C10.4133 5.42165 10.9413 5.32031 11.512 5.32031C12.2533 5.32031 12.888 5.46431 13.416 5.75231C13.944 6.03498 14.3867 6.41898 14.744 6.90431L14.048 7.65631C13.9947 7.71498 13.9387 7.76831 13.88 7.81631C13.8213 7.85898 13.7387 7.88031 13.632 7.88031C13.5573 7.88031 13.488 7.85898 13.424 7.81631C13.3653 7.77365 13.2987 7.72031 13.224 7.65631C13.1493 7.59231 13.0667 7.52298 12.976 7.44831C12.8853 7.37365 12.776 7.30431 12.648 7.24031C12.5253 7.17631 12.3787 7.12298 12.208 7.08031C12.0373 7.03765 11.8347 7.01631 11.6 7.01631C10.9707 7.01631 10.44 7.23231 10.008 7.66431C9.576 8.09631 9.27467 8.73365 9.104 9.57631H13.12V10.1843C13.12 10.307 13.0693 10.4216 12.968 10.5283C12.872 10.6296 12.7387 10.6803 12.568 10.6803H8.968C8.96267 10.771 8.96 10.8616 8.96 10.9523C8.96 11.0376 8.96 11.1256 8.96 11.2163C8.96 11.2803 8.96 11.3443 8.96 11.4083C8.96 11.4723 8.96267 11.5336 8.968 11.5923H12.36V12.1923C12.36 12.315 12.3093 12.4296 12.208 12.5363C12.1067 12.6376 11.9733 12.6883 11.808 12.6883H9.064C9.21333 13.6056 9.49867 14.291 9.92 14.7443C10.3467 15.1923 10.8747 15.4163 11.504 15.4163C11.888 15.4163 12.1947 15.3656 12.424 15.2643C12.6587 15.1576 12.848 15.0403 12.992 14.9123C13.1413 14.7843 13.264 14.6696 13.36 14.5683C13.4613 14.4616 13.5707 14.4083 13.688 14.4083C13.7467 14.4083 13.7973 14.419 13.84 14.4403C13.8827 14.4563 13.928 14.491 13.976 14.5443L14.832 15.3283C14.4587 15.9043 13.984 16.347 13.408 16.6563C12.832 16.9603 12.1627 17.1123 11.4 17.1123C10.7707 17.1123 10.2053 17.0083 9.704 16.8003C9.208 16.587 8.776 16.2883 8.408 15.9043C8.04 15.5203 7.73867 15.0563 7.504 14.5123C7.27467 13.9683 7.112 13.3603 7.016 12.6883H6V11.5923H6.928C6.92267 11.5336 6.92 11.4723 6.92 11.4083C6.92 11.3443 6.92 11.2803 6.92 11.2163C6.92 11.1256 6.92 11.0376 6.92 10.9523C6.92 10.8616 6.92267 10.771 6.928 10.6803H6V9.57631Z" fill="#E3B82A"/>
+</svg>
diff --git a/src/assets/icons/ico/profile-edit.svg b/src/assets/icons/ico/profile-edit.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cf363b03d39c821d56d6bb4bb820c14f09c992a7
--- /dev/null
+++ b/src/assets/icons/ico/profile-edit.svg
@@ -0,0 +1,11 @@
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="21.5" cy="16.5" r="5.5" fill="white"/>
+<path d="M11 29C11 25.4735 12.6077 22.4852 16 22C17.3163 23.1296 19.5 24 21.5 24C25 24 25.5 23 27 22C30.3923 22.4852 32 25.4735 32 29V30C32 30 28 31 21.5 31C15 31 11 30 11 30V29Z" fill="white"/>
+<mask id="path-4-outside-1" maskUnits="userSpaceOnUse" x="12.0213" y="13.5858" width="24.7487" height="24.7487" fill="black">
+<rect fill="white" x="12.0213" y="13.5858" width="24.7487" height="24.7487"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.1052 15.7151C31.5001 15.3202 32.216 15.3957 32.7042 15.8839L34.472 17.6517C34.9601 18.1398 35.0357 18.8557 34.6407 19.2506L32.5194 21.372L28.9839 17.8364L31.1052 15.7151ZM31.8123 22.0791L28.2768 18.5435L17.6701 29.1502L21.2057 32.6857L31.8123 22.0791ZM20.4986 33.3928L16.963 29.8573L16.6655 30.1548C16.5032 30.3172 16.4139 30.543 16.4125 30.7952L15.5573 34.1084C15.5553 34.4642 15.8916 34.8006 16.2475 34.7986L19.5607 33.9434C19.8128 33.9419 20.0387 33.8527 20.2011 33.6903L20.4986 33.3928Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.1052 15.7151C31.5001 15.3202 32.216 15.3957 32.7042 15.8839L34.472 17.6517C34.9601 18.1398 35.0357 18.8557 34.6407 19.2506L32.5194 21.372L28.9839 17.8364L31.1052 15.7151ZM31.8123 22.0791L28.2768 18.5435L17.6701 29.1502L21.2057 32.6857L31.8123 22.0791ZM20.4986 33.3928L16.963 29.8573L16.6655 30.1548C16.5032 30.3172 16.4139 30.543 16.4125 30.7952L15.5573 34.1084C15.5553 34.4642 15.8916 34.8006 16.2475 34.7986L19.5607 33.9434C19.8128 33.9419 20.0387 33.8527 20.2011 33.6903L20.4986 33.3928Z" fill="#E0E0E0"/>
+<path d="M31.1052 15.7151L31.8123 16.4222L31.1052 15.7151ZM34.6407 19.2506L33.9336 18.5435L34.6407 19.2506ZM32.5194 21.372L31.8123 22.0791L32.5194 22.7862L33.2265 22.0791L32.5194 21.372ZM28.9839 17.8364L28.2768 17.1293L27.5697 17.8364L28.2768 18.5435L28.9839 17.8364ZM28.2768 18.5435L28.9839 17.8364L28.2768 17.1293L27.5697 17.8364L28.2768 18.5435ZM31.8123 22.0791L32.5194 22.7862L33.2265 22.0791L32.5194 21.372L31.8123 22.0791ZM17.6701 29.1502L16.963 28.4431L16.2559 29.1502L16.963 29.8573L17.6701 29.1502ZM21.2057 32.6857L20.4986 33.3928L21.2057 34.0999L21.9128 33.3928L21.2057 32.6857ZM20.4986 33.3928L21.2057 34.0999L21.9128 33.3928L21.2057 32.6857L20.4986 33.3928ZM16.963 29.8573L17.6701 29.1502L16.963 28.4431L16.2559 29.1502L16.963 29.8573ZM16.4125 30.7952L17.3808 31.0451L17.4118 30.9249L17.4125 30.8008L16.4125 30.7952ZM15.5573 34.1084L14.589 33.8584L14.558 33.9786L14.5573 34.1027L15.5573 34.1084ZM16.2475 34.7986L16.2531 35.7985L16.3772 35.7978L16.4974 35.7668L16.2475 34.7986ZM19.5607 33.9434L19.555 32.9434L19.4309 32.9441L19.3107 32.9751L19.5607 33.9434ZM20.2011 33.6903L20.9082 34.3974L20.2011 33.6903ZM33.4113 15.1768C32.68 14.4454 31.3162 14.0899 30.3981 15.008L31.8123 16.4222C31.7597 16.4748 31.72 16.4581 31.7648 16.4628C31.812 16.4678 31.9043 16.4982 31.9971 16.591L33.4113 15.1768ZM35.1791 16.9445L33.4113 15.1768L31.9971 16.591L33.7649 18.3588L35.1791 16.9445ZM35.3478 19.9577C36.2659 19.0397 35.9104 17.6759 35.1791 16.9445L33.7649 18.3588C33.8576 18.4515 33.8881 18.5438 33.893 18.5911C33.8978 18.6358 33.8811 18.5961 33.9336 18.5435L35.3478 19.9577ZM33.2265 22.0791L35.3478 19.9577L33.9336 18.5435L31.8123 20.6648L33.2265 22.0791ZM28.2768 18.5435L31.8123 22.0791L33.2265 20.6648L29.691 17.1293L28.2768 18.5435ZM30.3981 15.008L28.2768 17.1293L29.691 18.5435L31.8123 16.4222L30.3981 15.008ZM27.5697 19.2507L31.1052 22.7862L32.5194 21.372L28.9839 17.8364L27.5697 19.2507ZM18.3773 29.8573L28.9839 19.2507L27.5697 17.8364L16.963 28.4431L18.3773 29.8573ZM16.963 29.8573L20.4986 33.3928L21.9128 31.9786L18.3773 28.4431L16.963 29.8573ZM31.1052 21.372L20.4986 31.9786L21.9128 33.3928L32.5194 22.7862L31.1052 21.372ZM21.2057 32.6857L17.6701 29.1502L16.2559 30.5644L19.7915 34.0999L21.2057 32.6857ZM17.3726 30.8619L17.6701 30.5644L16.2559 29.1502L15.9584 29.4477L17.3726 30.8619ZM17.4125 30.8008C17.4125 30.7911 17.4141 30.795 17.4087 30.8088C17.403 30.8231 17.3917 30.8428 17.3726 30.8619L15.9584 29.4477C15.5908 29.8153 15.4152 30.3025 15.4125 30.7896L17.4125 30.8008ZM16.5255 34.3583L17.3808 31.0451L15.4442 30.5453L14.589 33.8584L16.5255 34.3583ZM16.2419 33.7986C16.3784 33.7978 16.451 33.8563 16.4753 33.8805C16.4996 33.9048 16.558 33.9774 16.5573 34.114L14.5573 34.1027C14.5545 34.5952 14.7802 35.0139 15.0611 35.2948C15.342 35.5757 15.7607 35.8013 16.2531 35.7985L16.2419 33.7986ZM19.3107 32.9751L15.9975 33.8303L16.4974 35.7668L19.8106 34.9116L19.3107 32.9751ZM19.494 32.9832C19.513 32.9642 19.5327 32.9528 19.5471 32.9472C19.5608 32.9417 19.5648 32.9433 19.555 32.9434L19.5663 34.9433C20.0534 34.9406 20.5405 34.7651 20.9082 34.3974L19.494 32.9832ZM19.7915 32.6857L19.494 32.9832L20.9082 34.3974L21.2057 34.0999L19.7915 32.6857Z" fill="#121212" mask="url(#path-4-outside-1)"/>
+</svg>
+
diff --git a/src/assets/icons/tabbar/analysis/analysis-off.svg b/src/assets/icons/tabbar/analysis/analysis-off.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2f019901746ce03cbe0cb6f9a437e04e8a1c3384
--- /dev/null
+++ b/src/assets/icons/tabbar/analysis/analysis-off.svg
@@ -0,0 +1,17 @@
+<svg width="64" height="36" viewBox="0 0 64 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="18" y="5" width="18" height="21" fill="black">
+<rect fill="white" x="18" y="5" width="18" height="21"/>
+<path d="M33.881 6.22886C31.5689 5.78025 29.1772 5.99395 26.9813 6.84534C24.7854 7.69673 22.8747 9.15116 21.4693 11.0411C20.064 12.931 19.2211 15.1795 19.0379 17.5275C18.8547 19.8755 19.3385 22.2276 20.4337 24.3126L31.5 18.5L33.881 6.22886Z"/>
+</mask>
+<path d="M33.881 6.22886C31.5689 5.78025 29.1772 5.99395 26.9813 6.84534C24.7854 7.69673 22.8747 9.15116 21.4693 11.0411C20.064 12.931 19.2211 15.1795 19.0379 17.5275C18.8547 19.8755 19.3385 22.2276 20.4337 24.3126L31.5 18.5L33.881 6.22886Z" stroke="#ABABAB" stroke-width="2" mask="url(#path-1-outside-1)"/>
+<mask id="path-2-outside-2" maskUnits="userSpaceOnUse" x="18" y="5" width="27" height="27" fill="black">
+<rect fill="white" x="18" y="5" width="27" height="27"/>
+<path d="M33.881 6.22886C30.6713 5.60609 27.3454 6.26566 24.6163 8.06617C21.8872 9.86667 19.9722 12.6648 19.2818 15.8606C18.5915 19.0564 19.1807 22.3955 20.9232 25.1619C22.6657 27.9284 25.4228 29.9021 28.6033 30.6597C31.7838 31.4174 35.1346 30.8988 37.9372 29.215C40.7399 27.5313 42.7713 24.8165 43.5959 21.6527C44.4205 18.4889 43.9727 15.1279 42.3485 12.2903C40.7243 9.45278 38.053 7.36454 34.9073 6.47334L31.5 18.5L33.881 6.22886Z"/>
+</mask>
+<path d="M33.881 6.22886C30.6713 5.60609 27.3454 6.26566 24.6163 8.06617C21.8872 9.86667 19.9722 12.6648 19.2818 15.8606C18.5915 19.0564 19.1807 22.3955 20.9232 25.1619C22.6657 27.9284 25.4228 29.9021 28.6033 30.6597C31.7838 31.4174 35.1346 30.8988 37.9372 29.215C40.7399 27.5313 42.7713 24.8165 43.5959 21.6527C44.4205 18.4889 43.9727 15.1279 42.3485 12.2903C40.7243 9.45278 38.053 7.36454 34.9073 6.47334L31.5 18.5L33.881 6.22886Z" stroke="#ABABAB" stroke-width="2" stroke-linejoin="round" mask="url(#path-2-outside-2)"/>
+<mask id="path-3-outside-3" maskUnits="userSpaceOnUse" x="18" y="15" width="15" height="11" fill="black">
+<rect fill="white" x="18" y="15" width="15" height="11"/>
+<path d="M20.4708 24.3827C19.1081 21.8279 18.6746 18.8792 19.2444 16.0403L31.5 18.5L20.4708 24.3827Z"/>
+</mask>
+<path d="M20.4708 24.3827C19.1081 21.8279 18.6746 18.8792 19.2444 16.0403L31.5 18.5L20.4708 24.3827Z" stroke="#ABABAB" stroke-width="2" stroke-linejoin="round" mask="url(#path-3-outside-3)"/>
+</svg>
diff --git a/src/assets/icons/tabbar/analysis/analysis-on.svg b/src/assets/icons/tabbar/analysis/analysis-on.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a8daecc9afb5b2adab9e2c026747fe5d527bb093
--- /dev/null
+++ b/src/assets/icons/tabbar/analysis/analysis-on.svg
@@ -0,0 +1,14 @@
+<svg width="64" height="36" viewBox="0 0 64 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="18" y="5" width="18" height="15" fill="black">
+<rect fill="white" x="18" y="5" width="18" height="15"/>
+<path d="M34.0244 6.25756C32.4167 5.92605 30.7595 5.91444 29.1473 6.22341C27.5351 6.53237 25.9996 7.15585 24.6283 8.05825C23.2571 8.96065 22.077 10.1243 21.1555 11.4828C20.234 12.8412 19.5891 14.3679 19.2576 15.9756L31.5 18.5L34.0244 6.25756Z"/>
+</mask>
+<path d="M34.0244 6.25756C32.4167 5.92605 30.7595 5.91444 29.1473 6.22341C27.5351 6.53237 25.9996 7.15585 24.6283 8.05825C23.2571 8.96065 22.077 10.1243 21.1555 11.4828C20.234 12.8412 19.5891 14.3679 19.2576 15.9756L31.5 18.5L34.0244 6.25756Z" fill="#E3B82A"/>
+<path d="M34.0244 6.25756C32.4167 5.92605 30.7595 5.91444 29.1473 6.22341C27.5351 6.53237 25.9996 7.15585 24.6283 8.05825C23.2571 8.96065 22.077 10.1243 21.1555 11.4828C20.234 12.8412 19.5891 14.3679 19.2576 15.9756L31.5 18.5L34.0244 6.25756Z" stroke="#E3B82A" stroke-width="2" stroke-linejoin="round" mask="url(#path-1-outside-1)"/>
+<mask id="path-2-outside-2" maskUnits="userSpaceOnUse" x="18" y="15" width="15" height="11" fill="black">
+<rect fill="white" x="18" y="15" width="15" height="11"/>
+<path d="M20.4708 24.3827C19.1081 21.8279 18.6746 18.8792 19.2444 16.0403L31.5 18.5L20.4708 24.3827Z"/>
+</mask>
+<path d="M20.4708 24.3827C19.1081 21.8279 18.6746 18.8792 19.2444 16.0403L31.5 18.5L20.4708 24.3827Z" stroke="#E3B82A" stroke-width="2" stroke-linejoin="round" mask="url(#path-2-outside-2)"/>
+<circle cx="31.5" cy="18.5" r="13" stroke="#E3B82A"/>
+</svg>
diff --git a/src/assets/icons/tabbar/bilan/bilan-off.svg b/src/assets/icons/tabbar/bilan/bilan-off.svg
deleted file mode 100644
index 8089d23ff69069d9571df6d2c7100778f96812e8..0000000000000000000000000000000000000000
--- a/src/assets/icons/tabbar/bilan/bilan-off.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg width="50" height="36" viewBox="0 0 50 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.5 11.5H36.5V29C36.5 29.8284 35.8284 30.5 35 30.5H15C14.1716 30.5 13.5 29.8284 13.5 29V11.5Z" stroke="#A0A0A0"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M37 12H39C39.5523 12 40 12.4477 40 13C40 13.5523 39.5523 14 39 14H37V15H39C40.1046 15 41 14.1046 41 13C41 11.8954 40.1046 11 39 11H11C9.89543 11 9 11.8954 9 13C9 14.1046 9.89543 15 11 15H13V14H11C10.4477 14 10 13.5523 10 13C10 12.4477 10.4477 12 11 12H13H37Z" fill="#A0A0A0"/>
-<rect x="18" y="16" width="14" height="1" rx="0.5" fill="#A0A0A0"/>
-<rect x="18" y="20" width="14" height="1" rx="0.5" fill="#A0A0A0"/>
-<rect x="18" y="24" width="14" height="1" rx="0.5" fill="#A0A0A0"/>
-</svg>
diff --git a/src/assets/icons/tabbar/bilan/bilan-on.svg b/src/assets/icons/tabbar/bilan/bilan-on.svg
deleted file mode 100644
index 71cdab2585ab37b9e6ec121889f9db4f2ca7b46c..0000000000000000000000000000000000000000
--- a/src/assets/icons/tabbar/bilan/bilan-on.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="50" height="36" viewBox="0 0 50 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 13H36V14V29C36 29.5523 35.5523 30 35 30H15C14.4477 30 14 29.5523 14 29V14L14 13ZM18 16.5C18 16.2239 18.2239 16 18.5 16H31.5C31.7761 16 32 16.2239 32 16.5C32 16.7761 31.7761 17 31.5 17H18.5C18.2239 17 18 16.7761 18 16.5ZM18.5 20C18.2239 20 18 20.2239 18 20.5C18 20.7761 18.2239 21 18.5 21H31.5C31.7761 21 32 20.7761 32 20.5C32 20.2239 31.7761 20 31.5 20H18.5ZM18 24.5C18 24.2239 18.2239 24 18.5 24H31.5C31.7761 24 32 24.2239 32 24.5C32 24.7761 31.7761 25 31.5 25H18.5C18.2239 25 18 24.7761 18 24.5Z" fill="#E3B82A"/>
-<path d="M39 12C39.5523 12 40 12.4477 40 13C40 13.5523 39.5523 14 39 14H37V15H39C40.1046 15 41 14.1046 41 13C41 11.8954 40.1046 11 39 11H11C9.89543 11 9 11.8954 9 13C9 14.1046 9.89543 15 11 15H13V14H11C10.4477 14 10 13.5523 10 13C10 12.4477 10.4477 12 11 12H39Z" fill="#E3B82A"/>
-</svg>
diff --git a/src/components/Analysis/AnalysisConsumption.tsx b/src/components/Analysis/AnalysisConsumption.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2e2f80dec5d852f04d6a25af3defd569a7fd741d
--- /dev/null
+++ b/src/components/Analysis/AnalysisConsumption.tsx
@@ -0,0 +1,212 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
+import { formatNumberValues } from 'utils/utils'
+import { useHistory } from 'react-router-dom'
+import { FluidType } from 'enum/fluid.enum'
+import { PerformanceIndicator } from 'models'
+import { MonthlyForecast } from 'models/profileType.model'
+import './analysisConsumption.scss'
+import MuiButton from '@material-ui/core/Button'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledCard from 'components/CommonKit/Card/StyledCard'
+import EuroIcon from 'assets/icons/ico/euro-icon.svg'
+import ElecIcon from 'assets/icons/visu/elec-small.svg'
+import WaterIcon from 'assets/icons/visu/water-small.svg'
+import GasIcon from 'assets/icons/visu/gas-small.svg'
+import ProfileTypeService from 'services/profileType.service'
+
+interface AnalysisConsumptionProps {
+ aggregatedPerformanceIndicator: PerformanceIndicator
+ peformanceIndicator: PerformanceIndicator[]
+}
+
+const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
+ aggregatedPerformanceIndicator,
+ peformanceIndicator,
+}: AnalysisConsumptionProps) => {
+ const { t } = useI18n()
+ const history = useHistory()
+ const userPriceConsumption = formatNumberValues(
+ aggregatedPerformanceIndicator.value
+ ).toString()
+ const profile = useSelector((state: AppStore) => state.ecolyo.profile)
+ const [homePriceConsumption, setHomePriceConsumption] = useState<number>(0)
+ const [forecast, setForecast] = useState<MonthlyForecast | null>(null)
+ const [toggleHome, setToggleHome] = useState<string>('average')
+ const idealCoefficient = 0.1
+ const toggleAverage = () => {
+ setToggleHome('average')
+ forecast && setHomePriceConsumption(forecast.totalValue)
+ }
+ const toggleIdeal = () => {
+ setToggleHome('ideal')
+ if (forecast) {
+ const idealPriceConsumption =
+ forecast.totalValue - forecast.totalValue * idealCoefficient
+ setHomePriceConsumption(idealPriceConsumption)
+ }
+ }
+ const goToForm = useCallback(() => {
+ history.push('/profileType')
+ }, [history])
+
+ useEffect(() => {
+ let subscribed = true
+ async function loadAverageComsumption() {
+ const profileTypeService: ProfileTypeService = new ProfileTypeService(
+ profile.profileType
+ )
+ const MonthlyForecast: MonthlyForecast = await profileTypeService.getMonthlyForecast(
+ profile.monthlyReportDate.month
+ )
+ if (subscribed) {
+ setForecast(MonthlyForecast)
+ setHomePriceConsumption(MonthlyForecast.totalValue)
+ }
+ }
+ loadAverageComsumption()
+ return () => {
+ subscribed = false
+ }
+ }, [])
+ return (
+ <div className="analysis-graph">
+ <div className="consumption-title text-20-bold">
+ <div className="user-title">{t('analysis.user_consumption')}</div>
+ <div className={`${toggleHome}-title`}>
+ {t(`analysis.${toggleHome}_home`)}
+ </div>
+ </div>
+ <div className="consumption-price">
+ <div className="user-graph">
+ <div className="price text-15-bold">{userPriceConsumption} €</div>
+ <div
+ className="graph"
+ style={{
+ width: `${(parseInt(userPriceConsumption) /
+ Math.max(
+ parseInt(userPriceConsumption),
+ homePriceConsumption
+ )) *
+ 100}%`,
+ }}
+ ></div>
+ </div>
+ <div className="icon-container">
+ <StyledIcon icon={EuroIcon} size={22} />
+ </div>
+ <div className={`${toggleHome}-graph`}>
+ <div
+ className="graph"
+ style={{
+ width: `${(homePriceConsumption /
+ Math.max(
+ parseInt(userPriceConsumption),
+ homePriceConsumption
+ )) *
+ 100}%`,
+ }}
+ ></div>
+ <div className="price">{homePriceConsumption.toFixed(2)} €</div>
+ </div>
+ </div>
+ {forecast &&
+ forecast.fluidForecast.map((fluid, index) => {
+ const performanceValue = peformanceIndicator[fluid.fluidType].value
+ let fluidIcon = GasIcon
+ let fluidClass = 'gas'
+ let unitFluid = 'kWh'
+ let fluidLoad = fluid.load
+ if (fluid.fluidType === FluidType.ELECTRICITY) {
+ fluidIcon = ElecIcon
+ fluidClass = 'elec'
+ } else if (fluid.fluidType === FluidType.WATER) {
+ fluidIcon = WaterIcon
+ fluidClass = 'water'
+ unitFluid = 'L'
+ }
+ if (toggleHome === 'ideal') {
+ fluidLoad = fluid.load - fluid.load * idealCoefficient
+ }
+ return (
+ <div className={`consumption-${fluidClass}`} key={index}>
+ {performanceValue && (
+ <div className="user-graph">
+ <div className="price text-15-bold">
+ {Math.round(performanceValue) + ' ' + unitFluid}
+ </div>
+ <div
+ className="graph"
+ style={{
+ width: `${(performanceValue /
+ Math.max(fluid.load, performanceValue)) *
+ 100}%`,
+ }}
+ ></div>
+ </div>
+ )}
+ <div className="icon-container">
+ <StyledIcon icon={fluidIcon} size={22} />
+ </div>
+ <div className={`${toggleHome}-graph`}>
+ {performanceValue && (
+ <div
+ className="graph"
+ style={{
+ width: `${(fluidLoad /
+ Math.max(fluidLoad, performanceValue)) *
+ 100}%`,
+ }}
+ ></div>
+ )}
+ <div className="price">
+ {Math.round(fluidLoad) + ' ' + unitFluid}
+ </div>
+ </div>
+ </div>
+ )
+ })}
+ <StyledCard
+ onClick={toggleAverage}
+ className={`link-average ${toggleHome === 'average' && 'active'}`}
+ >
+ <span className="check-icon"></span>
+ <span className="link-label text-16-normal">
+ {t('analysis.average_home')}
+ </span>
+ </StyledCard>
+ <StyledCard
+ onClick={toggleIdeal}
+ className={`link-ideal ${toggleHome === 'ideal' && 'active'}`}
+ >
+ <span className="check-icon"></span>
+ <span className="link-label text-16-normal">
+ {t('analysis.ideal_home')}
+ </span>
+ </StyledCard>
+ {profile.isProfileTypeCompleted || (
+ <div className="card-adjust-profile">
+ <div className="title text-18-bold">
+ {t('analysis.approximate_title')}
+ </div>
+ <div className="text-16-normal">
+ {t('analysis.approximative_description')}
+ </div>
+ <MuiButton
+ onClick={goToForm}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-18-bold',
+ }}
+ >
+ {t('analysis.adjust_profile')}
+ </MuiButton>
+ </div>
+ )}
+ </div>
+ )
+}
+
+export default AnalysisConsumption
diff --git a/src/components/Report/ReportView.spec.tsx b/src/components/Analysis/AnalysisView.spec.tsx
similarity index 95%
rename from src/components/Report/ReportView.spec.tsx
rename to src/components/Analysis/AnalysisView.spec.tsx
index fd7707f94f40cb5d6f9238d685df983b8d46d563..8abf578c8b6bf4d4c8cf9890157d8a3740a9e2a0 100644
--- a/src/components/Report/ReportView.spec.tsx
+++ b/src/components/Analysis/AnalysisView.spec.tsx
@@ -2,7 +2,7 @@ import React from 'react'
import { mount } from 'enzyme'
import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
-import ReportView from 'components/Report/ReportView'
+import AnalysisView from 'components/Analysis/AnalysisView'
import { globalStateData } from '../../../test/__mocks__/globalStateData.mock'
import { profileData } from '../../../test/__mocks__/profile.mock'
import CozyBar from 'components/Header/CozyBar'
@@ -52,7 +52,7 @@ describe('ReportOptions component', () => {
useDispatchSpy.mockReturnValue(jest.fn())
const wrapper = mount(
<Provider store={store}>
- <ReportView />
+ <AnalysisView />
</Provider>
)
expect(wrapper.find(CozyBar)).toBeTruthy()
@@ -74,7 +74,7 @@ describe('ReportOptions component', () => {
useDispatchSpy.mockReturnValue(jest.fn())
mount(
<Provider store={store}>
- <ReportView />
+ <AnalysisView />
</Provider>
)
expect(updateProfileSpy).toBeCalledTimes(1)
@@ -99,7 +99,7 @@ describe('ReportOptions component', () => {
useDispatchSpy.mockReturnValue(jest.fn())
mount(
<Provider store={store}>
- <ReportView />
+ <AnalysisView />
</Provider>
)
expect(toogleReportNotificationSpy).toBeCalledTimes(1)
diff --git a/src/components/Report/ReportView.tsx b/src/components/Analysis/AnalysisView.tsx
similarity index 84%
rename from src/components/Report/ReportView.tsx
rename to src/components/Analysis/AnalysisView.tsx
index 43019f87da172e344ddc92e070a16743c07f126e..a0f0ec2f403135f5a75efb4610f53b44da78820c 100644
--- a/src/components/Report/ReportView.tsx
+++ b/src/components/Analysis/AnalysisView.tsx
@@ -7,9 +7,9 @@ import { AppStore } from 'store'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import Content from 'components/Content/Content'
-import MonthlyReport from 'components/Report/MonthlyReport'
+import MonthlyAnalysis from 'components/Analysis/MonthlyAnalysis'
-const ReportView: React.FC = () => {
+const AnalysisView: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
const {
global: { reportNotification },
@@ -42,16 +42,16 @@ const ReportView: React.FC = () => {
return (
<>
- <CozyBar titleKey={'report.viewTitle'} />
+ <CozyBar titleKey={'analysis.viewTitle'} />
<Header
setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={'report.viewTitle'}
+ desktopTitleKey={'analysis.viewTitle'}
></Header>
<Content height={headerHeight}>
- <MonthlyReport />
+ <MonthlyAnalysis />
</Content>
</>
)
}
-export default ReportView
+export default AnalysisView
diff --git a/src/components/Report/ChartReport.tsx b/src/components/Analysis/ChartAnalysis.tsx
similarity index 97%
rename from src/components/Report/ChartReport.tsx
rename to src/components/Analysis/ChartAnalysis.tsx
index 8c9063eb0a358f7eca6ded9bbc2fa385446c7552..3c8b782a99819392d6b8cea11283d37712c018ad 100644
--- a/src/components/Report/ChartReport.tsx
+++ b/src/components/Analysis/ChartAnalysis.tsx
@@ -1,18 +1,18 @@
import React, { useState, useEffect, useRef } from 'react'
import { scaleBand, ScaleBand, scaleLinear, ScaleLinear } from 'd3-scale'
import { detect } from 'detect-browser'
-import './chartreport.scss'
+import './chartanalysis.scss'
import { Dataload } from 'models/dataload.model'
import { formatNumberValues } from 'utils/utils'
-interface ChartReportProps {
+interface ChartAnalysisProps {
chartData: Dataload[]
}
-const ChartReport: React.FC<ChartReportProps> = ({
+const ChartAnalysis: React.FC<ChartAnalysisProps> = ({
chartData,
-}: ChartReportProps) => {
+}: ChartAnalysisProps) => {
const divRef = useRef(null)
const browser = detect()
@@ -256,4 +256,4 @@ const ChartReport: React.FC<ChartReportProps> = ({
)
}
-export default ChartReport
+export default ChartAnalysis
diff --git a/src/components/Report/ChartReport.spec.tsx b/src/components/Analysis/ChartReport.spec.tsx
similarity index 88%
rename from src/components/Report/ChartReport.spec.tsx
rename to src/components/Analysis/ChartReport.spec.tsx
index 1e903ee757624efcf83161ab1f6d081ca4524995..84a73aa192a29d5db6acbc4b5167aa93208673a2 100644
--- a/src/components/Report/ChartReport.spec.tsx
+++ b/src/components/Analysis/ChartReport.spec.tsx
@@ -1,7 +1,7 @@
import React from 'react'
import { shallow } from 'enzyme'
import { DateTime } from 'luxon'
-import ChartReport from './ChartReport'
+import ChartAnalysis from './ChartAnalysis'
import { Dataload } from 'models'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -28,7 +28,7 @@ const chartProps: Dataload[] = [
describe('MonthlyReport component', () => {
it('should be rendered correctly', () => {
const component = shallow(
- <ChartReport chartData={chartProps} />
+ <ChartAnalysis chartData={chartProps} />
).getElement()
expect(component).toMatchSnapshot()
})
diff --git a/src/components/Report/MonthlyReport.spec.tsx b/src/components/Analysis/MonthlyAnalysis.spec.tsx
similarity index 89%
rename from src/components/Report/MonthlyReport.spec.tsx
rename to src/components/Analysis/MonthlyAnalysis.spec.tsx
index abbd1cf3715b318273a3a262bff14c7c12153521..2e9f880b8517f8094997c696b3dacbfbe10b8e46 100644
--- a/src/components/Report/MonthlyReport.spec.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.spec.tsx
@@ -1,7 +1,7 @@
import React from 'react'
import { shallow } from 'enzyme'
-import MonthlyReport from './MonthlyReport'
+import MonthlyAnalysis from 'components/Analysis/MonthlyAnalysis'
import { DateTime } from 'luxon'
import * as reactRedux from 'react-redux'
@@ -30,7 +30,7 @@ describe('MonthlyReport component', () => {
useStateSpy.mockImplementationOnce(useStateMock)
useStateSpy.mockImplementationOnce(useStateLoad)
it('should be rendered correctly', () => {
- const component = shallow(<MonthlyReport />).getElement()
+ const component = shallow(<MonthlyAnalysis />).getElement()
expect(component).toMatchSnapshot()
})
})
diff --git a/src/components/Report/MonthlyReport.tsx b/src/components/Analysis/MonthlyAnalysis.tsx
similarity index 68%
rename from src/components/Report/MonthlyReport.tsx
rename to src/components/Analysis/MonthlyAnalysis.tsx
index c2cbbf043a529bc3bf360f394ae5ce920629bca8..078bc9ad04ef1c22cf669c349fb105d5162b845e 100644
--- a/src/components/Report/MonthlyReport.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.tsx
@@ -4,7 +4,7 @@ import { useClient } from 'cozy-client'
import { useSelector } from 'react-redux'
import { AppStore } from 'store'
import { DateTime } from 'luxon'
-import './monthlyreport.scss'
+import './monthlyanalysis.scss'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
@@ -16,12 +16,17 @@ import { convertDateToMonthString } from 'utils/date'
import PerformanceIndicatorContent from 'components/PerformanceIndicator/PerformanceIndicatorContent'
import FluidPerformanceIndicator from 'components/PerformanceIndicator/FluidPerformanceIndicator'
-import DateNavigator from 'components/DateNavigator/DateNavigator'
-import ChartReport from 'components/Report/ChartReport'
+import ProfileEditIcon from 'assets/icons/ico/profile-edit.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import MuiButton from '@material-ui/core/Button'
+import AnalysisConsumption from './AnalysisConsumption'
+import { useHistory } from 'react-router-dom'
+import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-const MonthlyReport: React.FC = () => {
+const MonthlyAnalysis: React.FC = () => {
const { t } = useI18n()
const client = useClient()
+ const history = useHistory()
const { fluidTypes } = useSelector((state: AppStore) => state.ecolyo.global)
const profile = useSelector((state: AppStore) => state.ecolyo.profile)
const [reportDate, setReportDate] = useState<DateTime>(
@@ -52,6 +57,9 @@ const MonthlyReport: React.FC = () => {
},
[reportDate]
)
+ const goToForm = useCallback(() => {
+ history.push('/profileType')
+ }, [history])
useEffect(() => {
let subscribed = true
@@ -103,49 +111,42 @@ const MonthlyReport: React.FC = () => {
<>
{isLoaded ? (
<div>
- <div className="report-root black">
- <div className="report-content">
- <DateNavigator
- timeStep={timeStep}
- date={reportDate}
- handleClickMove={handleClickMove}
- indexDisplayed={0}
- offset={{ month: -1 }}
- />
- <div className="flex-center">
- <div className="report-header text-16-normal-uppercase">
- {t('report.reportDate')}{' '}
- {convertDateToMonthString(reportDate.plus({ month: -1 }))}
+ <div className="analysis-root black">
+ <div className="analysis-content">
+ <div className="status-header">
+ <div className="text-16-normal-uppercase">
+ {t('analysis.status')}
</div>
- <PerformanceIndicatorContent
- performanceIndicator={aggregatedPerformanceIndicators}
- timeStep={timeStep}
- fluidLackOfData={fluidLackOfData}
- />
- <ChartReport
- chartData={[
- {
- date: reportDate.plus({ month: -2 }),
- value: aggregatedPerformanceIndicators.compareValue
- ? aggregatedPerformanceIndicators.compareValue
- : -1,
- },
- {
- date: reportDate.plus({ month: -1 }),
- value: aggregatedPerformanceIndicators.value
- ? aggregatedPerformanceIndicators.value
- : -1,
- },
- ]}
- />
+ <MuiButton
+ onClick={goToForm}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ <StyledIcon icon={ProfileEditIcon} size={40} />
+ </MuiButton>
</div>
+ <AnalysisConsumption
+ aggregatedPerformanceIndicator={aggregatedPerformanceIndicators}
+ peformanceIndicator={performanceIndicators}
+ />
</div>
</div>
- <div className="report-root">
- <div className="report-content">
+ <div className="analysis-root">
+ <div className="analysis-content">
+ <div className="analysis-header text-16-normal-uppercase">
+ {t('analysis.analysis_date')}{' '}
+ {convertDateToMonthString(reportDate.plus({ month: -1 }))}
+ </div>
+ <PerformanceIndicatorContent
+ performanceIndicator={aggregatedPerformanceIndicators}
+ timeStep={timeStep}
+ fluidLackOfData={fluidLackOfData}
+ />
<div>
- <div className="report-header text-16-normal-uppercase ">
- {t('report.detail')}
+ <div className="analysis-header text-16-normal-uppercase">
+ {t('analysis.detail')}
{convertDateToMonthString(reportDate.plus({ month: -1 }))}
</div>
{fluidConfig.map((fluid, index) => {
@@ -163,9 +164,13 @@ const MonthlyReport: React.FC = () => {
</div>
</div>
</div>
- ) : null}
+ ) : (
+ <div className="analysis-container-spinner">
+ <StyledSpinner size="5em" fluidTypes={fluidTypes} />
+ </div>
+ )}
</>
)
}
-export default MonthlyReport
+export default MonthlyAnalysis
diff --git a/src/components/Report/__snapshots__/ChartReport.spec.tsx.snap b/src/components/Analysis/__snapshots__/ChartReport.spec.tsx.snap
similarity index 100%
rename from src/components/Report/__snapshots__/ChartReport.spec.tsx.snap
rename to src/components/Analysis/__snapshots__/ChartReport.spec.tsx.snap
diff --git a/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..d717686dbeba28af9088d949884cdaf116c02489
--- /dev/null
+++ b/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MonthlyReport component should be rendered correctly 1`] = `
+<React.Fragment>
+ <div
+ className="analysis-container-spinner"
+ >
+ <StyledSpinner
+ size="5em"
+ />
+ </div>
+</React.Fragment>
+`;
diff --git a/src/components/Analysis/analysisConsumption.scss b/src/components/Analysis/analysisConsumption.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0392cede2f372d7b349d9337ec8fe35c1503d350
--- /dev/null
+++ b/src/components/Analysis/analysisConsumption.scss
@@ -0,0 +1,208 @@
+@import '../../styles/base/color';
+@import '../../styles/base/breakpoint';
+
+.analysis-graph {
+ margin-top: 1.5rem;
+ .consumption-title {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 2rem;
+ .user-title,
+ .average-title,
+ .ideal-title {
+ flex-basis: 50%;
+ }
+ .user-title {
+ text-align: right;
+ padding-right: 5%;
+ color: $multi-color;
+ }
+ .average-title,
+ .ideal-title {
+ padding-left: 5%;
+ }
+ .average-title {
+ color: $blue-grey;
+ }
+ .ideal-title {
+ color: $green-light;
+ }
+ }
+ .consumption-price,
+ .consumption-elec,
+ .consumption-water,
+ .consumption-gas {
+ display: flex;
+ margin-bottom: 1rem;
+ .user-graph {
+ .graph {
+ border-radius: 0.35rem 0 0 0.35rem;
+ }
+ }
+ .average-graph {
+ color: $blue-grey;
+ .price {
+ text-align: right;
+ }
+ .graph {
+ background-color: $blue-grey;
+ }
+ }
+ .ideal-graph {
+ color: $green-light;
+ .price {
+ text-align: right;
+ }
+ .graph {
+ background-color: $green-light;
+ }
+ }
+ }
+ .user-graph,
+ .average-graph,
+ .ideal-graph {
+ display: flex;
+ justify-content: space-between;
+ flex-basis: 45%;
+ align-items: center;
+ }
+ .consumption-price {
+ .user-graph {
+ color: $multi-color;
+ .graph {
+ background-color: $multi-color;
+ }
+ }
+ }
+ .consumption-elec {
+ .user-graph {
+ color: $elec-color;
+ .graph {
+ background-color: $elec-color;
+ }
+ }
+ }
+ .consumption-water {
+ .user-graph {
+ color: $water-color;
+ .graph {
+ background-color: $water-color;
+ }
+ }
+ }
+ .consumption-gas {
+ .user-graph {
+ color: $gas-color;
+ .graph {
+ background-color: $gas-color;
+ }
+ }
+ }
+ .icon-container {
+ flex-basis: 10%;
+ display: flex;
+ justify-content: center;
+ svg {
+ align-self: center;
+ }
+ }
+
+ .price {
+ min-width: 5.25rem;
+ }
+ .graph {
+ border-radius: 0 0.35rem 0.35rem 0;
+ padding-left: 0.25rem;
+ height: 2rem;
+ }
+ .link-average,
+ .link-ideal {
+ .check-icon {
+ display: inline-block;
+ background: $dark-light-2;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ vertical-align: middle;
+ margin-right: 1rem;
+ position: relative;
+ &::before,
+ &:after {
+ content: '';
+ display: none;
+ background-color: $blue-grey;
+ position: absolute;
+ border-radius: 0.5rem;
+ }
+ &::before {
+ top: 11px;
+ left: 3px;
+ width: 7px;
+ height: 3px;
+ transform: rotate(46deg);
+ }
+ &::after {
+ top: 9px;
+ left: 6px;
+ width: 13px;
+ height: 3px;
+ transform: rotate(-45deg);
+ }
+ }
+ .link-label {
+ display: inline-block;
+ vertical-align: middle;
+ font-weight: bold;
+ }
+ &.active {
+ .link-label {
+ color: $dark-light-2;
+ }
+ .check-icon {
+ &::before,
+ &:after {
+ display: inline-block;
+ }
+ }
+ }
+ }
+ .link-average {
+ margin-top: 2rem;
+ &.active {
+ background: $blue-grey;
+ .link-label {
+ color: $dark-light-2;
+ }
+ }
+ .check-icon {
+ &::before,
+ &:after {
+ background-color: $blue-grey;
+ }
+ }
+ }
+ .link-ideal {
+ &.active {
+ background: $green-light;
+ }
+ .check-icon {
+ &::before,
+ &:after {
+ background-color: $green-light;
+ }
+ }
+ }
+ .card-adjust-profile {
+ border: 1px solid $multi-color;
+ border-radius: 4px;
+ padding: 1.5rem;
+ margin-bottom: 1rem;
+ color: $grey-bright;
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);
+ background: $grey-linear-gradient-background;
+ .title {
+ color: $red-primary;
+ margin-bottom: 1rem;
+ }
+ }
+}
diff --git a/src/components/Report/chartreport.scss b/src/components/Analysis/chartanalysis.scss
similarity index 100%
rename from src/components/Report/chartreport.scss
rename to src/components/Analysis/chartanalysis.scss
diff --git a/src/components/Analysis/monthlyanalysis.scss b/src/components/Analysis/monthlyanalysis.scss
new file mode 100644
index 0000000000000000000000000000000000000000..71d8674541ff1c56dce1e0159b8e93d470afbc04
--- /dev/null
+++ b/src/components/Analysis/monthlyanalysis.scss
@@ -0,0 +1,69 @@
+@import '../../styles/base/color';
+@import '../../styles/base/breakpoint';
+
+.analysis-root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 0.5rem 1.5rem;
+ &.black {
+ background: var(--darkLight2);
+ }
+ @media #{$large-phone} {
+ margin-bottom: 0;
+ }
+ .analysis-content {
+ min-height: 23.875rem;
+ width: 45.75rem;
+
+ @media #{$large-phone} {
+ width: 100%;
+ }
+ .analysis-header {
+ margin-top: 1.5rem;
+ margin-bottom: 1.25rem;
+ color: $grey-bright;
+ font-size: 1rem;
+ }
+ .report-date-selector {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ width: 100%;
+ .report-date {
+ color: $grey-bright;
+ &::first-letter {
+ text-transform: uppercase;
+ }
+ }
+ .report-date-button {
+ border: none;
+ background: none;
+ color: $soft-grey;
+ text-decoration: underline;
+ }
+ }
+ }
+ .status-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: $grey-bright;
+ margin-top: 1rem;
+ button.btn-secondary-negative {
+ min-width: 40px;
+ width: 40px;
+ height: 40px;
+ padding: 0;
+ margin: 0;
+ }
+ }
+}
+.analysis-container-spinner {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
+}
diff --git a/src/components/Connection/ConnectionNotFound.spec.tsx b/src/components/Connection/ConnectionNotFound.spec.tsx
index 9d224a9d4225957c33a4a797f9e836590d98c0ab..53c2bca3ca289d492aff09482c95da89de148a1d 100644
--- a/src/components/Connection/ConnectionNotFound.spec.tsx
+++ b/src/components/Connection/ConnectionNotFound.spec.tsx
@@ -1,7 +1,6 @@
import React from 'react'
import { shallow, mount } from 'enzyme'
import ConnectionNotFound from './ConnectionNotFound'
-import StyledButton from 'components/CommonKit/Button/StyledButton'
import MuiButton from '@material-ui/core/Button'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index c2510089cc39805e42bea43cf9d5ff04f9b7328f..528ce2d1b33506ac42c52e5957ff60ec80e86223 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -11,8 +11,8 @@ import ParameterIconOn from 'assets/icons/tabbar/parametre/parametre-on.svg'
import ParameterIconOff from 'assets/icons/tabbar/parametre/parametre-off.svg'
import EcogestesIconOn from 'assets/icons/tabbar/ecogeste/ecogeste-on.svg'
import EcogestesIconOff from 'assets/icons/tabbar/ecogeste/ecogeste-off.svg'
-import ReportIconOn from 'assets/icons/tabbar/bilan/bilan-on.svg'
-import ReportIconOff from 'assets/icons/tabbar/bilan/bilan-off.svg'
+import AnalysisIconOn from 'assets/icons/tabbar/analysis/analysis-on.svg'
+import AnalysisIconOff from 'assets/icons/tabbar/analysis/analysis-off.svg'
import logoGrandLyon from 'assets/icons/tabbar/grand-lyon.svg'
import logoTiga from 'assets/png/logo-TIGA-white.png'
import logoGouv from 'assets/png/logo-gouv.png'
@@ -67,14 +67,14 @@ export const Navbar: React.FC = () => {
</li>
<li className="c-nav-item">
<NavLink
- to="/report"
+ to="/analysis"
className="c-nav-link"
activeClassName="is-active"
>
{reportNotification && <div className="nb-notif">1</div>}
- <StyledIcon className="c-nav-icon off" icon={ReportIconOff} />
- <StyledIcon className="c-nav-icon on" icon={ReportIconOn} />
- {t('Nav.report')}
+ <StyledIcon className="c-nav-icon off" icon={AnalysisIconOff} />
+ <StyledIcon className="c-nav-icon on" icon={AnalysisIconOn} />
+ {t('Nav.analysis')}
</NavLink>
</li>
<li className="c-nav-item">
diff --git a/src/components/Options/ReportOptions.spec.tsx b/src/components/Options/AnalysisOptions.spec.tsx
similarity index 92%
rename from src/components/Options/ReportOptions.spec.tsx
rename to src/components/Options/AnalysisOptions.spec.tsx
index ae5e6fb3708a6bab45d891dfade146e916904b32..8ff833ad6dcba46257a30454f993cf1337430941 100644
--- a/src/components/Options/ReportOptions.spec.tsx
+++ b/src/components/Options/AnalysisOptions.spec.tsx
@@ -1,7 +1,7 @@
import React from 'react'
import { mount } from 'enzyme'
import { Provider } from 'react-redux'
-import ReportOptions from 'components/Options/ReportOptions'
+import AnlysisOptions from 'components/Options/AnalysisOptions'
import {
createMockStore,
mockInitialEcolyoState,
@@ -31,7 +31,7 @@ describe('ReportOptions component', () => {
it('should be rendered with 2 inputs', () => {
const wrapper = mount(
<Provider store={store}>
- <ReportOptions />
+ <AnlysisOptions />
</Provider>
)
expect(wrapper.find('input')).toHaveLength(2)
@@ -40,7 +40,7 @@ describe('ReportOptions component', () => {
it('should update the profile with sendReportNotification to true', () => {
const wrapper = mount(
<Provider store={store}>
- <ReportOptions />
+ <AnlysisOptions />
</Provider>
)
wrapper
@@ -56,7 +56,7 @@ describe('ReportOptions component', () => {
it('should update the profile with sendReportNotification to false', () => {
const wrapper = mount(
<Provider store={store}>
- <ReportOptions />
+ <AnlysisOptions />
</Provider>
)
wrapper
diff --git a/src/components/Options/ReportOptions.tsx b/src/components/Options/AnalysisOptions.tsx
similarity index 80%
rename from src/components/Options/ReportOptions.tsx
rename to src/components/Options/AnalysisOptions.tsx
index 97232bec66f9b21f574b7f2a2230ece7291605dd..00c627f4af26c44836f1a1fdfa523136a6b722ea 100644
--- a/src/components/Options/ReportOptions.tsx
+++ b/src/components/Options/AnalysisOptions.tsx
@@ -3,9 +3,9 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { useSelector, useDispatch } from 'react-redux'
import { AppStore } from 'store'
import { updateProfile } from 'store/profile/profile.actions'
-import './reportOptions.scss'
+import './analysisOptions.scss'
-const ReportOptions: React.FC = () => {
+const AnalysisOptions: React.FC = () => {
const { t } = useI18n()
const dispatch = useDispatch()
const profile = useSelector((state: AppStore) => state.ecolyo.profile)
@@ -21,10 +21,10 @@ const ReportOptions: React.FC = () => {
}
return (
- <div className="report-option-root">
- <div className="report-option-content">
+ <div className="analysis-option-root">
+ <div className="analysis-option-content">
<div className="head text-14-normal-uppercase">
- {t('PROFILE.REPORT.TITLE')}
+ {t('PROFILE.ANALYSIS.TITLE')}
</div>
<form action="" className="radios">
<div className="input">
@@ -40,7 +40,7 @@ const ReportOptions: React.FC = () => {
: false
}
></input>
- <label htmlFor="monthly"> {t('PROFILE.REPORT.MONTHLY')}</label>
+ <label htmlFor="monthly"> {t('PROFILE.ANALYSIS.MONTHLY')}</label>
</div>
<div className="input">
<input
@@ -55,7 +55,7 @@ const ReportOptions: React.FC = () => {
: false
}
></input>
- <label htmlFor="never"> {t('PROFILE.REPORT.NEVER')}</label>
+ <label htmlFor="never"> {t('PROFILE.ANALYSIS.NEVER')}</label>
</div>
</form>
</div>
@@ -63,4 +63,4 @@ const ReportOptions: React.FC = () => {
)
}
-export default ReportOptions
+export default AnalysisOptions
diff --git a/src/components/Options/OptionsView.tsx b/src/components/Options/OptionsView.tsx
index e58f22d61b9a40c3bd04638138f120eeb62afe80..bceb2723f671bf2b8579b96a0339346ae6c53efb 100644
--- a/src/components/Options/OptionsView.tsx
+++ b/src/components/Options/OptionsView.tsx
@@ -3,7 +3,7 @@ import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import Content from 'components/Content/Content'
import KonnectorViewerList from 'components/Konnector/KonnectorViewerList'
-import ReportOptions from 'components/Options/ReportOptions'
+import AnalysisOptions from 'components/Options/AnalysisOptions'
import FAQLink from 'components/FAQ/FAQLink'
import LegalNoticeLink from 'components/LegalNotice/LegalNoticeLink'
import Version from 'components/Version/Version'
@@ -29,7 +29,7 @@ const OptionsView: React.FC = () => {
></Header>
<Content height={headerHeight}>
<KonnectorViewerList isParam={true} />
- <ReportOptions />
+ <AnalysisOptions />
<ProfileTypeOptions />
<FAQLink />
<LegalNoticeLink />
diff --git a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
index c4d3156eabfca8d61fd3efe22b9c7db2b2f459f4..5780afa6178e7653c6ac25911217d0e0b985d232 100644
--- a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
+++ b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
@@ -15,7 +15,7 @@ exports[`OptionsView component should be rendered correctly 1`] = `
<KonnectorViewerList
isParam={true}
/>
- <ReportOptions />
+ <AnalysisOptions />
<ProfileTypeOptions />
<FAQLink />
<LegalNoticeLink />
diff --git a/src/components/Options/reportOptions.scss b/src/components/Options/analysisOptions.scss
similarity index 96%
rename from src/components/Options/reportOptions.scss
rename to src/components/Options/analysisOptions.scss
index 9f9fde66e03ab30412be30f1d031809a9ebd9cf4..99adef540e6945713a8c4a10911208235da15cb0 100644
--- a/src/components/Options/reportOptions.scss
+++ b/src/components/Options/analysisOptions.scss
@@ -1,12 +1,12 @@
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
-.report-option-root {
+.analysis-option-root {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 1.5rem;
- .report-option-content {
+ .analysis-option-content {
width: 45.75rem;
@media #{$large-phone} {
width: 100%;
diff --git a/src/components/Report/__snapshots__/MonthlyReport.spec.tsx.snap b/src/components/Report/__snapshots__/MonthlyReport.spec.tsx.snap
deleted file mode 100644
index f2a9abcb5c93fdbec30b66f603656ab04c86d201..0000000000000000000000000000000000000000
--- a/src/components/Report/__snapshots__/MonthlyReport.spec.tsx.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MonthlyReport component should be rendered correctly 1`] = `<React.Fragment />`;
diff --git a/src/components/Report/monthlyreport.scss b/src/components/Report/monthlyreport.scss
deleted file mode 100644
index c45f49d574c4a61d81bb1bc99c167adb37c0fa6a..0000000000000000000000000000000000000000
--- a/src/components/Report/monthlyreport.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
-
-
-.report-root {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 0.5rem 1.5rem;
- &.black{
- background: var(--darkLight2);
- }
- @media #{$large-phone} {
- margin-bottom: 0;
- }
- .report-content {
- min-height: 23.875rem;
- width: 45.75rem;
-
- @media #{$large-phone} {
- width: 100%;
- }
- .report-header {
- margin-top: 1.5rem;
- margin-bottom: 1.25rem;
- color: $grey-bright;
- font-size: 1rem;
- }
- .report-date-selector{
- display: flex;
- flex-direction: row;
- justify-content: space-around;
- width: 100%;
- .report-date{
- color: $grey-bright;
- &::first-letter {
- text-transform: uppercase;
- }
- }
- .report-date-button {
- border: none;
- background: none;
- color: $soft-grey;
- text-decoration: underline;
- }
- }
- }
-}
\ No newline at end of file
diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
index 73895f683204e8a56a63026e177f63a402eca5e0..712032a32dff1566f3ea428caa473a778ec609a3 100644
--- a/src/components/Routes/Routes.tsx
+++ b/src/components/Routes/Routes.tsx
@@ -19,7 +19,7 @@ const FAQView = lazy(() => import('components/FAQ/FAQView'))
const LegalNoticeView = lazy(() =>
import('components/LegalNotice/LegalNoticeView')
)
-const ReportView = lazy(() => import('components/Report/ReportView'))
+const AnalysisView = lazy(() => import('components/Analysis/AnalysisView'))
const ProfileTypeView = lazy(() =>
import('components/ProfileType/ProfileTypeView')
)
@@ -76,7 +76,7 @@ const Routes = () => {
</>
)}
/>
- <Route path="/report" component={ReportView} />
+ <Route path="/analysis" component={AnalysisView} />
<Route path="/profiletype" component={ProfileTypeView} />
<Redirect from="/" to="/consumption" />
<Redirect from="*" to="/consumption" />
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 86df6f301ebfa46d54aabd0e27826f4ac68bb32b..87fc48a1cc299154d93bda5a0a872178c12ef104 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -16,7 +16,7 @@
"profile": "Profil",
"connectors": "connecteurs",
"graphs": "graphes",
- "report": "Bilan"
+ "analysis": "Analyse"
},
"COMMON": {
"APP_TITLE": "Ecolyo",
@@ -125,8 +125,8 @@
"DISPLAY_LAST_DATA": "Voir mes dernières consos"
},
"PROFILE": {
- "REPORT": {
- "TITLE": "Être notifié de l'arrivée du bilan mensuel",
+ "ANALYSIS": {
+ "TITLE": "Être notifié de l'arrivée de l'analyse mensuel",
"WEEKLY": "Hebdomadaire",
"MONTHLY": "Mensuel",
"NEVER": "Jamais"
@@ -306,11 +306,18 @@
"accessButton": "Accéder aux connecteurs",
"later": "Plus tard"
},
- "report": {
- "viewTitle": "Bilan",
- "reportDate": "Bilan du mois",
+ "analysis": {
+ "viewTitle": "Analyse",
+ "status": "Votre situation",
+ "analysis_date": "Conso du mois",
"detail": "Détail du mois",
- "challenge": "Défis terminés en"
+ "challenge": "Défis terminés en",
+ "user_consumption": "Votre conso",
+ "average_home": "Foyer type",
+ "ideal_home": "Foyer idéal",
+ "approximate_title": "Cette comparaison est très approximative.",
+ "approximative_description": "Pour une comparaison plus précise, vous pouvez ajuster votre profil de consommation :",
+ "adjust_profile": "Ajuster mon profil"
},
"challenge": {
"noFluidModal": {
diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
index e6752a8d63c1e74145c7b5746f8ae278a1ad40ac..f5dbb00a6c9adb703b22ef02e4b79a0eaf803d2b 100644
--- a/src/styles/base/_color.scss
+++ b/src/styles/base/_color.scss
@@ -36,9 +36,11 @@ $blue-radial-gradient-transparent: radial-gradient(
$blue 0%,
rgba(255, 255, 255, 0) 100%
);
+$blue-grey: #bfcce4;
/** GREEN **/
$green: #7fd771;
+$green-light: #a6e191;
/** WHITE **/
$white: #ffffff;