diff --git a/src/assets/icons/visu/analysis/analysis.svg b/src/assets/icons/visu/analysis/analysis.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d85c12958de754552f0e095a3de4c05c36850c3d
--- /dev/null
+++ b/src/assets/icons/visu/analysis/analysis.svg
@@ -0,0 +1,15 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="21" y="11.2078" width="3" height="26" fill="#E0E0E0"/>
+<rect x="21" y="11" width="2" height="26" fill="#A0A0A0"/>
+<path d="M8.5 14.2075L14 29.2075H3L8.5 14.2075Z" stroke="white" stroke-width="0.5"/>
+<rect x="8.25" y="14.2075" width="0.5" height="15" fill="white"/>
+<path d="M2 28.2075C2 29.8643 4.91019 31.2075 8.5 31.2075C12.0898 31.2075 15 29.8643 15 28.2075H2Z" fill="#E3B82A"/>
+<path d="M35.5 4.20752L41 19.2075H30L35.5 4.20752Z" stroke="white" stroke-width="0.5"/>
+<rect x="35.25" y="4.20752" width="0.5" height="15" fill="white"/>
+<path d="M29 18.2075C29 19.8643 31.9102 21.2075 35.5 21.2075C39.0898 21.2075 42 19.8643 42 18.2075H29Z" fill="#E3B82A"/>
+<rect x="7.73242" y="13.8973" width="30.1449" height="1" transform="rotate(-21.1928 7.73242 13.8973)" fill="#E3B82A"/>
+<rect x="20" y="6.20776" width="5" height="5" rx="1" fill="#E3B82A"/>
+<rect x="20" y="34" width="5" height="4" rx="1" fill="#E3B82A"/>
+<path d="M13 38C13 36.8954 13.8954 36 15 36H30C31.1046 36 32 36.8954 32 38V39H13V38Z" fill="#E3B82A"/>
+<path d="M11 39H34V41H11V39Z" fill="#E3B82A"/>
+</svg>
diff --git a/src/assets/icons/visu/analysis/no-profile-placeholder.svg b/src/assets/icons/visu/analysis/no-profile-placeholder.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8b3ae3d9fb7f917c3932a03f81d744e82790e9f5
--- /dev/null
+++ b/src/assets/icons/visu/analysis/no-profile-placeholder.svg
@@ -0,0 +1,38 @@
+<svg width="319" height="160" viewBox="0 0 319 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.55">
+<path d="M48.7305 14.54L42.8905 29H40.4605L34.6205 14.54H36.7805C37.0138 14.54 37.2038 14.5967 37.3505 14.71C37.4971 14.8233 37.6071 14.97 37.6805 15.15L41.0905 23.97C41.2038 24.2567 41.3105 24.5733 41.4105 24.92C41.5171 25.26 41.6171 25.6167 41.7105 25.99C41.7905 25.6167 41.8771 25.26 41.9705 24.92C42.0638 24.5733 42.1671 24.2567 42.2805 23.97L45.6705 15.15C45.7238 14.9967 45.8271 14.8567 45.9805 14.73C46.1405 14.6033 46.3338 14.54 46.5605 14.54H48.7305ZM52.7952 18.58C53.5552 18.58 54.2452 18.7033 54.8652 18.95C55.4918 19.1967 56.0252 19.5467 56.4652 20C56.9118 20.4533 57.2552 21.0067 57.4952 21.66C57.7352 22.3133 57.8552 23.0433 57.8552 23.85C57.8552 24.6633 57.7352 25.3967 57.4952 26.05C57.2552 26.7033 56.9118 27.26 56.4652 27.72C56.0252 28.18 55.4918 28.5333 54.8652 28.78C54.2452 29.0267 53.5552 29.15 52.7952 29.15C52.0285 29.15 51.3318 29.0267 50.7052 28.78C50.0785 28.5333 49.5418 28.18 49.0952 27.72C48.6552 27.26 48.3118 26.7033 48.0652 26.05C47.8252 25.3967 47.7052 24.6633 47.7052 23.85C47.7052 23.0433 47.8252 22.3133 48.0652 21.66C48.3118 21.0067 48.6552 20.4533 49.0952 20C49.5418 19.5467 50.0785 19.1967 50.7052 18.95C51.3318 18.7033 52.0285 18.58 52.7952 18.58ZM52.7952 27.25C53.6485 27.25 54.2785 26.9633 54.6852 26.39C55.0985 25.8167 55.3052 24.9767 55.3052 23.87C55.3052 22.7633 55.0985 21.92 54.6852 21.34C54.2785 20.76 53.6485 20.47 52.7952 20.47C51.9285 20.47 51.2852 20.7633 50.8652 21.35C50.4518 21.93 50.2452 22.77 50.2452 23.87C50.2452 24.97 50.4518 25.81 50.8652 26.39C51.2852 26.9633 51.9285 27.25 52.7952 27.25ZM62.9642 29.16C62.0709 29.16 61.3842 28.91 60.9042 28.41C60.4309 27.9033 60.1942 27.2067 60.1942 26.32V20.59H59.1442C59.0109 20.59 58.8976 20.5467 58.8042 20.46C58.7109 20.3733 58.6642 20.2433 58.6642 20.07V19.09L60.3142 18.82L60.8342 16.02C60.8676 15.8867 60.9309 15.7833 61.0242 15.71C61.1176 15.6367 61.2376 15.6 61.3842 15.6H62.6642V18.83H65.4042V20.59H62.6642V26.15C62.6642 26.47 62.7409 26.72 62.8942 26.9C63.0542 27.08 63.2709 27.17 63.5442 27.17C63.6976 27.17 63.8242 27.1533 63.9242 27.12C64.0309 27.08 64.1209 27.04 64.1942 27C64.2742 26.96 64.3442 26.9233 64.4042 26.89C64.4642 26.85 64.5242 26.83 64.5842 26.83C64.6576 26.83 64.7176 26.85 64.7642 26.89C64.8109 26.9233 64.8609 26.9767 64.9142 27.05L65.6542 28.25C65.2942 28.55 64.8809 28.7767 64.4142 28.93C63.9476 29.0833 63.4642 29.16 62.9642 29.16ZM69.3156 20.52C69.6356 19.9067 70.0156 19.4267 70.4556 19.08C70.8956 18.7267 71.4156 18.55 72.0156 18.55C72.489 18.55 72.869 18.6533 73.1556 18.86L72.9956 20.71C72.9623 20.83 72.9123 20.9167 72.8456 20.97C72.7856 21.0167 72.7023 21.04 72.5956 21.04C72.4956 21.04 72.3456 21.0233 72.1456 20.99C71.9523 20.9567 71.7623 20.94 71.5756 20.94C71.3023 20.94 71.059 20.98 70.8456 21.06C70.6323 21.14 70.439 21.2567 70.2656 21.41C70.099 21.5567 69.949 21.7367 69.8156 21.95C69.689 22.1633 69.569 22.4067 69.4556 22.68V29H66.9856V18.74H68.4356C68.689 18.74 68.8656 18.7867 68.9656 18.88C69.0656 18.9667 69.1323 19.1267 69.1656 19.36L69.3156 20.52ZM80.7636 22.69C80.7636 22.37 80.7169 22.07 80.6236 21.79C80.5369 21.5033 80.4036 21.2533 80.2236 21.04C80.0436 20.8267 79.8136 20.66 79.5336 20.54C79.2603 20.4133 78.9403 20.35 78.5736 20.35C77.8603 20.35 77.2969 20.5533 76.8836 20.96C76.4769 21.3667 76.2169 21.9433 76.1036 22.69H80.7636ZM76.0536 24.18C76.0936 24.7067 76.1869 25.1633 76.3336 25.55C76.4803 25.93 76.6736 26.2467 76.9136 26.5C77.1536 26.7467 77.4369 26.9333 77.7636 27.06C78.0969 27.18 78.4636 27.24 78.8636 27.24C79.2636 27.24 79.6069 27.1933 79.8936 27.1C80.1869 27.0067 80.4403 26.9033 80.6536 26.79C80.8736 26.6767 81.0636 26.5733 81.2236 26.48C81.3903 26.3867 81.5503 26.34 81.7036 26.34C81.9103 26.34 82.0636 26.4167 82.1636 26.57L82.8736 27.47C82.6003 27.79 82.2936 28.06 81.9536 28.28C81.6136 28.4933 81.2569 28.6667 80.8836 28.8C80.5169 28.9267 80.1403 29.0167 79.7536 29.07C79.3736 29.1233 79.0036 29.15 78.6436 29.15C77.9303 29.15 77.2669 29.0333 76.6536 28.8C76.0403 28.56 75.5069 28.21 75.0536 27.75C74.6003 27.2833 74.2436 26.71 73.9836 26.03C73.7236 25.3433 73.5936 24.55 73.5936 23.65C73.5936 22.95 73.7069 22.2933 73.9336 21.68C74.1603 21.06 74.4836 20.5233 74.9036 20.07C75.3303 19.61 75.8469 19.2467 76.4536 18.98C77.0669 18.7133 77.7569 18.58 78.5236 18.58C79.1703 18.58 79.7669 18.6833 80.3136 18.89C80.8603 19.0967 81.3303 19.4 81.7236 19.8C82.1169 20.1933 82.4236 20.68 82.6436 21.26C82.8703 21.8333 82.9836 22.49 82.9836 23.23C82.9836 23.6033 82.9436 23.8567 82.8636 23.99C82.7836 24.1167 82.6303 24.18 82.4036 24.18H76.0536ZM97.0505 20.91C96.9771 21.0033 96.9038 21.0767 96.8305 21.13C96.7638 21.1833 96.6638 21.21 96.5305 21.21C96.4038 21.21 96.2805 21.1733 96.1605 21.1C96.0405 21.02 95.8971 20.9333 95.7305 20.84C95.5638 20.74 95.3638 20.6533 95.1305 20.58C94.9038 20.5 94.6205 20.46 94.2805 20.46C93.8471 20.46 93.4671 20.54 93.1405 20.7C92.8138 20.8533 92.5405 21.0767 92.3205 21.37C92.1071 21.6633 91.9471 22.02 91.8405 22.44C91.7338 22.8533 91.6805 23.3233 91.6805 23.85C91.6805 24.3967 91.7371 24.8833 91.8505 25.31C91.9705 25.7367 92.1405 26.0967 92.3605 26.39C92.5805 26.6767 92.8471 26.8967 93.1605 27.05C93.4738 27.1967 93.8271 27.27 94.2205 27.27C94.6138 27.27 94.9305 27.2233 95.1705 27.13C95.4171 27.03 95.6238 26.9233 95.7905 26.81C95.9571 26.69 96.1005 26.5833 96.2205 26.49C96.3471 26.39 96.4871 26.34 96.6405 26.34C96.8405 26.34 96.9905 26.4167 97.0905 26.57L97.8005 27.47C97.5271 27.79 97.2305 28.06 96.9105 28.28C96.5905 28.4933 96.2571 28.6667 95.9105 28.8C95.5705 28.9267 95.2171 29.0167 94.8505 29.07C94.4905 29.1233 94.1305 29.15 93.7705 29.15C93.1371 29.15 92.5405 29.0333 91.9805 28.8C91.4205 28.56 90.9305 28.2133 90.5105 27.76C90.0905 27.3067 89.7571 26.7533 89.5105 26.1C89.2705 25.44 89.1505 24.69 89.1505 23.85C89.1505 23.0967 89.2571 22.4 89.4705 21.76C89.6905 21.1133 90.0105 20.5567 90.4305 20.09C90.8505 19.6167 91.3705 19.2467 91.9905 18.98C92.6105 18.7133 93.3238 18.58 94.1305 18.58C94.8971 18.58 95.5671 18.7033 96.1405 18.95C96.7205 19.1967 97.2405 19.55 97.7005 20.01L97.0505 20.91ZM103.713 18.58C104.473 18.58 105.163 18.7033 105.783 18.95C106.41 19.1967 106.943 19.5467 107.383 20C107.83 20.4533 108.173 21.0067 108.413 21.66C108.653 22.3133 108.773 23.0433 108.773 23.85C108.773 24.6633 108.653 25.3967 108.413 26.05C108.173 26.7033 107.83 27.26 107.383 27.72C106.943 28.18 106.41 28.5333 105.783 28.78C105.163 29.0267 104.473 29.15 103.713 29.15C102.946 29.15 102.25 29.0267 101.623 28.78C100.996 28.5333 100.46 28.18 100.013 27.72C99.5731 27.26 99.2298 26.7033 98.9831 26.05C98.7431 25.3967 98.6231 24.6633 98.6231 23.85C98.6231 23.0433 98.7431 22.3133 98.9831 21.66C99.2298 21.0067 99.5731 20.4533 100.013 20C100.46 19.5467 100.996 19.1967 101.623 18.95C102.25 18.7033 102.946 18.58 103.713 18.58ZM103.713 27.25C104.566 27.25 105.196 26.9633 105.603 26.39C106.016 25.8167 106.223 24.9767 106.223 23.87C106.223 22.7633 106.016 21.92 105.603 21.34C105.196 20.76 104.566 20.47 103.713 20.47C102.846 20.47 102.203 20.7633 101.783 21.35C101.37 21.93 101.163 22.77 101.163 23.87C101.163 24.97 101.37 25.81 101.783 26.39C102.203 26.9633 102.846 27.25 103.713 27.25ZM112.968 20C113.174 19.7933 113.391 19.6033 113.618 19.43C113.851 19.25 114.094 19.1 114.348 18.98C114.608 18.8533 114.884 18.7567 115.178 18.69C115.471 18.6167 115.791 18.58 116.138 18.58C116.698 18.58 117.194 18.6767 117.628 18.87C118.061 19.0567 118.421 19.3233 118.708 19.67C119.001 20.01 119.221 20.42 119.368 20.9C119.521 21.3733 119.598 21.8967 119.598 22.47V29H117.128V22.47C117.128 21.8433 116.984 21.36 116.698 21.02C116.411 20.6733 115.974 20.5 115.388 20.5C114.961 20.5 114.561 20.5967 114.188 20.79C113.814 20.9833 113.461 21.2467 113.128 21.58V29H110.658V18.74H112.168C112.488 18.74 112.698 18.89 112.798 19.19L112.968 20ZM128.207 20.74C128.14 20.8467 128.07 20.9233 127.997 20.97C127.923 21.01 127.83 21.03 127.717 21.03C127.597 21.03 127.467 20.9967 127.327 20.93C127.193 20.8633 127.037 20.79 126.857 20.71C126.677 20.6233 126.47 20.5467 126.237 20.48C126.01 20.4133 125.74 20.38 125.427 20.38C124.94 20.38 124.557 20.4833 124.277 20.69C124.003 20.8967 123.867 21.1667 123.867 21.5C123.867 21.72 123.937 21.9067 124.077 22.06C124.223 22.2067 124.413 22.3367 124.647 22.45C124.887 22.5633 125.157 22.6667 125.457 22.76C125.757 22.8467 126.06 22.9433 126.367 23.05C126.68 23.1567 126.987 23.28 127.287 23.42C127.587 23.5533 127.853 23.7267 128.087 23.94C128.327 24.1467 128.517 24.3967 128.657 24.69C128.803 24.9833 128.877 25.3367 128.877 25.75C128.877 26.2433 128.787 26.7 128.607 27.12C128.433 27.5333 128.173 27.8933 127.827 28.2C127.48 28.5 127.05 28.7367 126.537 28.91C126.03 29.0767 125.443 29.16 124.777 29.16C124.423 29.16 124.077 29.1267 123.737 29.06C123.403 29 123.08 28.9133 122.767 28.8C122.46 28.6867 122.173 28.5533 121.907 28.4C121.647 28.2467 121.417 28.08 121.217 27.9L121.787 26.96C121.86 26.8467 121.947 26.76 122.047 26.7C122.147 26.64 122.273 26.61 122.427 26.61C122.58 26.61 122.723 26.6533 122.857 26.74C122.997 26.8267 123.157 26.92 123.337 27.02C123.517 27.12 123.727 27.2133 123.967 27.3C124.213 27.3867 124.523 27.43 124.897 27.43C125.19 27.43 125.44 27.3967 125.647 27.33C125.86 27.2567 126.033 27.1633 126.167 27.05C126.307 26.9367 126.407 26.8067 126.467 26.66C126.533 26.5067 126.567 26.35 126.567 26.19C126.567 25.95 126.493 25.7533 126.347 25.6C126.207 25.4467 126.017 25.3133 125.777 25.2C125.543 25.0867 125.273 24.9867 124.967 24.9C124.667 24.8067 124.357 24.7067 124.037 24.6C123.723 24.4933 123.413 24.37 123.107 24.23C122.807 24.0833 122.537 23.9 122.297 23.68C122.063 23.46 121.873 23.19 121.727 22.87C121.587 22.55 121.517 22.1633 121.517 21.71C121.517 21.29 121.6 20.89 121.767 20.51C121.933 20.13 122.177 19.8 122.497 19.52C122.823 19.2333 123.227 19.0067 123.707 18.84C124.193 18.6667 124.753 18.58 125.387 18.58C126.093 18.58 126.737 18.6967 127.317 18.93C127.897 19.1633 128.38 19.47 128.767 19.85L128.207 20.74ZM135.276 18.58C136.036 18.58 136.726 18.7033 137.346 18.95C137.972 19.1967 138.506 19.5467 138.946 20C139.392 20.4533 139.736 21.0067 139.976 21.66C140.216 22.3133 140.336 23.0433 140.336 23.85C140.336 24.6633 140.216 25.3967 139.976 26.05C139.736 26.7033 139.392 27.26 138.946 27.72C138.506 28.18 137.972 28.5333 137.346 28.78C136.726 29.0267 136.036 29.15 135.276 29.15C134.509 29.15 133.812 29.0267 133.186 28.78C132.559 28.5333 132.022 28.18 131.576 27.72C131.136 27.26 130.792 26.7033 130.546 26.05C130.306 25.3967 130.186 24.6633 130.186 23.85C130.186 23.0433 130.306 22.3133 130.546 21.66C130.792 21.0067 131.136 20.4533 131.576 20C132.022 19.5467 132.559 19.1967 133.186 18.95C133.812 18.7033 134.509 18.58 135.276 18.58ZM135.276 27.25C136.129 27.25 136.759 26.9633 137.166 26.39C137.579 25.8167 137.786 24.9767 137.786 23.87C137.786 22.7633 137.579 21.92 137.166 21.34C136.759 20.76 136.129 20.47 135.276 20.47C134.409 20.47 133.766 20.7633 133.346 21.35C132.932 21.93 132.726 22.77 132.726 23.87C132.726 24.97 132.932 25.81 133.346 26.39C133.766 26.9633 134.409 27.25 135.276 27.25Z" fill="#E3B82A"/>
+<path d="M188.54 25.59C188.687 25.59 188.817 25.6467 188.93 25.76L189.99 26.91C189.403 27.6367 188.68 28.1933 187.82 28.58C186.967 28.9667 185.94 29.16 184.74 29.16C183.667 29.16 182.7 28.9767 181.84 28.61C180.987 28.2433 180.257 27.7333 179.65 27.08C179.043 26.4267 178.577 25.6467 178.25 24.74C177.93 23.8333 177.77 22.8433 177.77 21.77C177.77 20.6833 177.943 19.69 178.29 18.79C178.637 17.8833 179.123 17.1033 179.75 16.45C180.383 15.7967 181.137 15.29 182.01 14.93C182.883 14.5633 183.85 14.38 184.91 14.38C185.963 14.38 186.897 14.5533 187.71 14.9C188.53 15.2467 189.227 15.7 189.8 16.26L188.9 17.51C188.847 17.59 188.777 17.66 188.69 17.72C188.61 17.78 188.497 17.81 188.35 17.81C188.25 17.81 188.147 17.7833 188.04 17.73C187.933 17.67 187.817 17.6 187.69 17.52C187.563 17.4333 187.417 17.34 187.25 17.24C187.083 17.14 186.89 17.05 186.67 16.97C186.45 16.8833 186.193 16.8133 185.9 16.76C185.613 16.7 185.28 16.67 184.9 16.67C184.253 16.67 183.66 16.7867 183.12 17.02C182.587 17.2467 182.127 17.58 181.74 18.02C181.353 18.4533 181.053 18.9867 180.84 19.62C180.627 20.2467 180.52 20.9633 180.52 21.77C180.52 22.5833 180.633 23.3067 180.86 23.94C181.093 24.5733 181.407 25.1067 181.8 25.54C182.193 25.9733 182.657 26.3067 183.19 26.54C183.723 26.7667 184.297 26.88 184.91 26.88C185.277 26.88 185.607 26.86 185.9 26.82C186.2 26.78 186.473 26.7167 186.72 26.63C186.973 26.5433 187.21 26.4333 187.43 26.3C187.657 26.16 187.88 25.99 188.1 25.79C188.167 25.73 188.237 25.6833 188.31 25.65C188.383 25.61 188.46 25.59 188.54 25.59ZM195.768 18.58C196.528 18.58 197.218 18.7033 197.838 18.95C198.464 19.1967 198.998 19.5467 199.438 20C199.884 20.4533 200.228 21.0067 200.468 21.66C200.708 22.3133 200.828 23.0433 200.828 23.85C200.828 24.6633 200.708 25.3967 200.468 26.05C200.228 26.7033 199.884 27.26 199.438 27.72C198.998 28.18 198.464 28.5333 197.838 28.78C197.218 29.0267 196.528 29.15 195.768 29.15C195.001 29.15 194.304 29.0267 193.678 28.78C193.051 28.5333 192.514 28.18 192.068 27.72C191.628 27.26 191.284 26.7033 191.038 26.05C190.798 25.3967 190.678 24.6633 190.678 23.85C190.678 23.0433 190.798 22.3133 191.038 21.66C191.284 21.0067 191.628 20.4533 192.068 20C192.514 19.5467 193.051 19.1967 193.678 18.95C194.304 18.7033 195.001 18.58 195.768 18.58ZM195.768 27.25C196.621 27.25 197.251 26.9633 197.658 26.39C198.071 25.8167 198.278 24.9767 198.278 23.87C198.278 22.7633 198.071 21.92 197.658 21.34C197.251 20.76 196.621 20.47 195.768 20.47C194.901 20.47 194.258 20.7633 193.838 21.35C193.424 21.93 193.218 22.77 193.218 23.87C193.218 24.97 193.424 25.81 193.838 26.39C194.258 26.9633 194.901 27.25 195.768 27.25ZM202.712 29V18.74H204.222C204.542 18.74 204.752 18.89 204.852 19.19L205.012 19.95C205.192 19.75 205.379 19.5667 205.572 19.4C205.772 19.2333 205.982 19.09 206.202 18.97C206.429 18.85 206.669 18.7567 206.922 18.69C207.182 18.6167 207.466 18.58 207.772 18.58C208.419 18.58 208.949 18.7567 209.362 19.11C209.782 19.4567 210.096 19.92 210.302 20.5C210.462 20.16 210.662 19.87 210.902 19.63C211.142 19.3833 211.406 19.1833 211.692 19.03C211.979 18.8767 212.282 18.7633 212.602 18.69C212.929 18.6167 213.256 18.58 213.582 18.58C214.149 18.58 214.652 18.6667 215.092 18.84C215.532 19.0133 215.902 19.2667 216.202 19.6C216.502 19.9333 216.729 20.34 216.882 20.82C217.042 21.3 217.122 21.85 217.122 22.47V29H214.652V22.47C214.652 21.8167 214.509 21.3267 214.222 21C213.936 20.6667 213.516 20.5 212.962 20.5C212.709 20.5 212.472 20.5433 212.252 20.63C212.039 20.7167 211.849 20.8433 211.682 21.01C211.522 21.17 211.396 21.3733 211.302 21.62C211.209 21.8667 211.162 22.15 211.162 22.47V29H208.682V22.47C208.682 21.7833 208.542 21.2833 208.262 20.97C207.989 20.6567 207.586 20.5 207.052 20.5C206.692 20.5 206.356 20.59 206.042 20.77C205.736 20.9433 205.449 21.1833 205.182 21.49V29H202.712ZM221.94 26.34C222.22 26.68 222.523 26.92 222.85 27.06C223.183 27.2 223.543 27.27 223.93 27.27C224.303 27.27 224.64 27.2 224.94 27.06C225.24 26.92 225.493 26.7067 225.7 26.42C225.913 26.1333 226.077 25.7733 226.19 25.34C226.303 24.9 226.36 24.3833 226.36 23.79C226.36 23.19 226.31 22.6833 226.21 22.27C226.117 21.85 225.98 21.51 225.8 21.25C225.62 20.99 225.4 20.8 225.14 20.68C224.887 20.56 224.597 20.5 224.27 20.5C223.757 20.5 223.32 20.61 222.96 20.83C222.6 21.0433 222.26 21.3467 221.94 21.74V26.34ZM221.81 20.14C222.23 19.6667 222.707 19.2833 223.24 18.99C223.773 18.6967 224.4 18.55 225.12 18.55C225.68 18.55 226.19 18.6667 226.65 18.9C227.117 19.1333 227.517 19.4733 227.85 19.92C228.19 20.36 228.45 20.9067 228.63 21.56C228.817 22.2067 228.91 22.95 228.91 23.79C228.91 24.5567 228.807 25.2667 228.6 25.92C228.393 26.5733 228.097 27.14 227.71 27.62C227.33 28.1 226.867 28.4767 226.32 28.75C225.78 29.0167 225.173 29.15 224.5 29.15C223.927 29.15 223.437 29.0633 223.03 28.89C222.623 28.71 222.26 28.4633 221.94 28.15V32.35H219.47V18.74H220.98C221.3 18.74 221.51 18.89 221.61 19.19L221.81 20.14ZM236.257 24.62C235.544 24.6533 234.944 24.7167 234.457 24.81C233.971 24.8967 233.581 25.01 233.287 25.15C232.994 25.29 232.784 25.4533 232.657 25.64C232.531 25.8267 232.467 26.03 232.467 26.25C232.467 26.6833 232.594 26.9933 232.847 27.18C233.107 27.3667 233.444 27.46 233.857 27.46C234.364 27.46 234.801 27.37 235.167 27.19C235.541 27.0033 235.904 26.7233 236.257 26.35V24.62ZM230.597 20.17C231.777 19.09 233.197 18.55 234.857 18.55C235.457 18.55 235.994 18.65 236.467 18.85C236.941 19.0433 237.341 19.3167 237.667 19.67C237.994 20.0167 238.241 20.4333 238.407 20.92C238.581 21.4067 238.667 21.94 238.667 22.52V29H237.547C237.314 29 237.134 28.9667 237.007 28.9C236.881 28.8267 236.781 28.6833 236.707 28.47L236.487 27.73C236.227 27.9633 235.974 28.17 235.727 28.35C235.481 28.5233 235.224 28.67 234.957 28.79C234.691 28.91 234.404 29 234.097 29.06C233.797 29.1267 233.464 29.16 233.097 29.16C232.664 29.16 232.264 29.1033 231.897 28.99C231.531 28.87 231.214 28.6933 230.947 28.46C230.681 28.2267 230.474 27.9367 230.327 27.59C230.181 27.2433 230.107 26.84 230.107 26.38C230.107 26.12 230.151 25.8633 230.237 25.61C230.324 25.35 230.464 25.1033 230.657 24.87C230.857 24.6367 231.114 24.4167 231.427 24.21C231.741 24.0033 232.124 23.8233 232.577 23.67C233.037 23.5167 233.571 23.3933 234.177 23.3C234.784 23.2 235.477 23.14 236.257 23.12V22.52C236.257 21.8333 236.111 21.3267 235.817 21C235.524 20.6667 235.101 20.5 234.547 20.5C234.147 20.5 233.814 20.5467 233.547 20.64C233.287 20.7333 233.057 20.84 232.857 20.96C232.657 21.0733 232.474 21.1767 232.307 21.27C232.147 21.3633 231.967 21.41 231.767 21.41C231.594 21.41 231.447 21.3667 231.327 21.28C231.207 21.1867 231.111 21.08 231.037 20.96L230.597 20.17ZM243.323 20.52C243.643 19.9067 244.023 19.4267 244.463 19.08C244.903 18.7267 245.423 18.55 246.023 18.55C246.497 18.55 246.877 18.6533 247.163 18.86L247.003 20.71C246.97 20.83 246.92 20.9167 246.853 20.97C246.793 21.0167 246.71 21.04 246.603 21.04C246.503 21.04 246.353 21.0233 246.153 20.99C245.96 20.9567 245.77 20.94 245.583 20.94C245.31 20.94 245.067 20.98 244.853 21.06C244.64 21.14 244.447 21.2567 244.273 21.41C244.107 21.5567 243.957 21.7367 243.823 21.95C243.697 22.1633 243.577 22.4067 243.463 22.68V29H240.993V18.74H242.443C242.697 18.74 242.873 18.7867 242.973 18.88C243.073 18.9667 243.14 19.1267 243.173 19.36L243.323 20.52ZM253.738 24.62C253.024 24.6533 252.424 24.7167 251.938 24.81C251.451 24.8967 251.061 25.01 250.768 25.15C250.474 25.29 250.264 25.4533 250.138 25.64C250.011 25.8267 249.948 26.03 249.948 26.25C249.948 26.6833 250.074 26.9933 250.328 27.18C250.588 27.3667 250.924 27.46 251.338 27.46C251.844 27.46 252.281 27.37 252.648 27.19C253.021 27.0033 253.384 26.7233 253.738 26.35V24.62ZM248.078 20.17C249.258 19.09 250.678 18.55 252.338 18.55C252.938 18.55 253.474 18.65 253.948 18.85C254.421 19.0433 254.821 19.3167 255.148 19.67C255.474 20.0167 255.721 20.4333 255.888 20.92C256.061 21.4067 256.148 21.94 256.148 22.52V29H255.028C254.794 29 254.614 28.9667 254.488 28.9C254.361 28.8267 254.261 28.6833 254.188 28.47L253.968 27.73C253.708 27.9633 253.454 28.17 253.208 28.35C252.961 28.5233 252.704 28.67 252.438 28.79C252.171 28.91 251.884 29 251.578 29.06C251.278 29.1267 250.944 29.16 250.578 29.16C250.144 29.16 249.744 29.1033 249.378 28.99C249.011 28.87 248.694 28.6933 248.428 28.46C248.161 28.2267 247.954 27.9367 247.808 27.59C247.661 27.2433 247.588 26.84 247.588 26.38C247.588 26.12 247.631 25.8633 247.718 25.61C247.804 25.35 247.944 25.1033 248.138 24.87C248.338 24.6367 248.594 24.4167 248.908 24.21C249.221 24.0033 249.604 23.8233 250.058 23.67C250.518 23.5167 251.051 23.3933 251.658 23.3C252.264 23.2 252.958 23.14 253.738 23.12V22.52C253.738 21.8333 253.591 21.3267 253.298 21C253.004 20.6667 252.581 20.5 252.028 20.5C251.628 20.5 251.294 20.5467 251.028 20.64C250.768 20.7333 250.538 20.84 250.338 20.96C250.138 21.0733 249.954 21.1767 249.788 21.27C249.628 21.3633 249.448 21.41 249.248 21.41C249.074 21.41 248.928 21.3667 248.808 21.28C248.688 21.1867 248.591 21.08 248.518 20.96L248.078 20.17ZM261.757 29.16C260.864 29.16 260.177 28.91 259.697 28.41C259.224 27.9033 258.987 27.2067 258.987 26.32V20.59H257.937C257.804 20.59 257.691 20.5467 257.597 20.46C257.504 20.3733 257.457 20.2433 257.457 20.07V19.09L259.107 18.82L259.627 16.02C259.661 15.8867 259.724 15.7833 259.817 15.71C259.911 15.6367 260.031 15.6 260.177 15.6H261.457V18.83H264.197V20.59H261.457V26.15C261.457 26.47 261.534 26.72 261.687 26.9C261.847 27.08 262.064 27.17 262.337 27.17C262.491 27.17 262.617 27.1533 262.717 27.12C262.824 27.08 262.914 27.04 262.987 27C263.067 26.96 263.137 26.9233 263.197 26.89C263.257 26.85 263.317 26.83 263.377 26.83C263.451 26.83 263.511 26.85 263.557 26.89C263.604 26.9233 263.654 26.9767 263.707 27.05L264.447 28.25C264.087 28.55 263.674 28.7767 263.207 28.93C262.741 29.0833 262.257 29.16 261.757 29.16ZM268.339 18.74V29H265.859V18.74H268.339ZM268.679 15.75C268.679 15.9633 268.635 16.1633 268.549 16.35C268.462 16.5367 268.345 16.7 268.199 16.84C268.059 16.98 267.892 17.0933 267.699 17.18C267.505 17.26 267.299 17.3 267.079 17.3C266.865 17.3 266.662 17.26 266.469 17.18C266.282 17.0933 266.119 16.98 265.979 16.84C265.839 16.7 265.725 16.5367 265.639 16.35C265.559 16.1633 265.519 15.9633 265.519 15.75C265.519 15.53 265.559 15.3233 265.639 15.13C265.725 14.9367 265.839 14.77 265.979 14.63C266.119 14.49 266.282 14.38 266.469 14.3C266.662 14.2133 266.865 14.17 267.079 14.17C267.299 14.17 267.505 14.2133 267.699 14.3C267.892 14.38 268.059 14.49 268.199 14.63C268.345 14.77 268.462 14.9367 268.549 15.13C268.635 15.3233 268.679 15.53 268.679 15.75ZM271.577 29V20.6L270.687 20.46C270.493 20.42 270.337 20.3533 270.217 20.26C270.103 20.16 270.047 20.02 270.047 19.84V18.83H271.577V18.07C271.577 17.4833 271.663 16.9567 271.837 16.49C272.017 16.0233 272.27 15.6267 272.597 15.3C272.93 14.9733 273.333 14.7233 273.807 14.55C274.28 14.3767 274.813 14.29 275.407 14.29C275.88 14.29 276.32 14.3533 276.727 14.48L276.677 15.72C276.67 15.8133 276.643 15.89 276.597 15.95C276.55 16.0033 276.487 16.0467 276.407 16.08C276.333 16.1067 276.247 16.1267 276.147 16.14C276.047 16.1467 275.94 16.15 275.827 16.15C275.533 16.15 275.27 16.1833 275.037 16.25C274.81 16.31 274.617 16.42 274.457 16.58C274.297 16.7333 274.173 16.94 274.087 17.2C274.007 17.4533 273.967 17.77 273.967 18.15V18.83H276.637V20.59H274.047V29H271.577Z" fill="#BFCCE4"/>
+<g clip-path="url(#clip0_10391:6992)">
+<circle cx="159.5" cy="55" r="10.5" fill="#121212" stroke="#E3B82A"/>
+<path d="M154.5 53.5761H155.564C155.687 52.9254 155.881 52.3387 156.148 51.8161C156.415 51.2881 156.74 50.8401 157.124 50.4721C157.508 50.1041 157.943 49.8214 158.428 49.6241C158.913 49.4214 159.441 49.3201 160.012 49.3201C160.753 49.3201 161.388 49.4641 161.916 49.7521C162.444 50.0347 162.887 50.4187 163.244 50.9041L162.548 51.6561C162.495 51.7147 162.439 51.7681 162.38 51.8161C162.321 51.8587 162.239 51.8801 162.132 51.8801C162.057 51.8801 161.988 51.8587 161.924 51.8161C161.865 51.7734 161.799 51.7201 161.724 51.6561C161.649 51.5921 161.567 51.5227 161.476 51.4481C161.385 51.3734 161.276 51.3041 161.148 51.2401C161.025 51.1761 160.879 51.1227 160.708 51.0801C160.537 51.0374 160.335 51.0161 160.1 51.0161C159.471 51.0161 158.94 51.2321 158.508 51.6641C158.076 52.0961 157.775 52.7334 157.604 53.5761H161.62V54.1841C161.62 54.3067 161.569 54.4214 161.468 54.5281C161.372 54.6294 161.239 54.6801 161.068 54.6801H157.468C157.463 54.7707 157.46 54.8614 157.46 54.9521C157.46 55.0374 157.46 55.1254 157.46 55.2161C157.46 55.2801 157.46 55.3441 157.46 55.4081C157.46 55.4721 157.463 55.5334 157.468 55.5921H160.86V56.1921C160.86 56.3147 160.809 56.4294 160.708 56.5361C160.607 56.6374 160.473 56.6881 160.308 56.6881H157.564C157.713 57.6054 157.999 58.2907 158.42 58.7441C158.847 59.1921 159.375 59.4161 160.004 59.4161C160.388 59.4161 160.695 59.3654 160.924 59.2641C161.159 59.1574 161.348 59.0401 161.492 58.9121C161.641 58.7841 161.764 58.6694 161.86 58.5681C161.961 58.4614 162.071 58.4081 162.188 58.4081C162.247 58.4081 162.297 58.4187 162.34 58.4401C162.383 58.4561 162.428 58.4907 162.476 58.5441L163.332 59.3281C162.959 59.9041 162.484 60.3467 161.908 60.6561C161.332 60.9601 160.663 61.1121 159.9 61.1121C159.271 61.1121 158.705 61.0081 158.204 60.8001C157.708 60.5867 157.276 60.2881 156.908 59.9041C156.54 59.5201 156.239 59.0561 156.004 58.5121C155.775 57.9681 155.612 57.3601 155.516 56.6881H154.5V55.5921H155.428C155.423 55.5334 155.42 55.4721 155.42 55.4081C155.42 55.3441 155.42 55.2801 155.42 55.2161C155.42 55.1254 155.42 55.0374 155.42 54.9521C155.42 54.8614 155.423 54.7707 155.428 54.6801H154.5V53.5761Z" fill="#E3B82A"/>
+</g>
+<path d="M267 44C269.209 44 271 45.7909 271 48L271 63C271 65.2091 269.209 67 267 67L179 67L179 44L267 44Z" fill="#BFCCE4"/>
+<path d="M41 44C38.7909 44 37 45.7909 37 48L37 63C37 65.2091 38.7909 67 41 67L140 67L140 44L41 44Z" fill="#E3B82A"/>
+<circle cx="160" cy="86" r="10.5" fill="#121212" stroke="#D87B39"/>
+<path d="M149.5 86.375L152 88.375L154 84.875L156.5 90.375L159.5 81.875L162 89.875L164.5 83.875L166.875 89.3132L169 85.7575L170.5 87.5" stroke="#D87B39"/>
+<path d="M228 75C230.209 75 232 76.7909 232 79L232 94C232 96.2091 230.209 98 228 98L181 98L181 75L228 75Z" fill="#BFCCE4"/>
+<path d="M99 75C96.7909 75 95 76.7909 95 79L95 94C95 96.2091 96.7909 98 99 98L139 98L139 75L99 75Z" fill="#D87B39"/>
+<g opacity="0.55">
+<circle cx="161" cy="118" r="10.5" fill="#121212" stroke="#45D1B8"/>
+<circle cx="157.5" cy="119" r="2.5" fill="#121212" stroke="#45D1B8"/>
+<circle cx="162.5" cy="123" r="1.5" fill="#121212" stroke="#45D1B8"/>
+<circle cx="162" cy="115.5" r="4" fill="#121212" stroke="#45D1B8"/>
+</g>
+<path d="M219 106C221.209 106 223 107.791 223 110L223 125C223 127.209 221.209 129 219 129L182 129L182 106L219 106Z" fill="#BFCCE4"/>
+<path d="M83 106C80.7909 106 79 107.791 79 110L79 125C79 127.209 80.7909 129 83 129L140 129L140 106L83 106Z" fill="#45D1B8"/>
+<g opacity="0.55" clip-path="url(#clip1_10391:6992)">
+<circle cx="158.5" cy="149" r="10.5" fill="#121212" stroke="#3A98EC"/>
+<path d="M148.5 152.237C149.093 150.607 151.078 147.347 154.279 147.347C158.28 147.347 158.28 152.237 162.281 152.237C165.482 152.237 166.726 148.68 168.505 147.791" stroke="#3A98EC"/>
+</g>
+<path d="M120 137C117.791 137 116 138.791 116 141L116 156C116 158.209 117.791 160 120 160L139 160L139 137L120 137Z" fill="#3A98EC"/>
+<path d="M201 137C203.209 137 205 138.791 205 141L205 156C205 158.209 203.209 160 201 160L182 160L182 137L201 137Z" fill="#BFCCE4"/>
+</g>
+<defs>
+<clipPath id="clip0_10391:6992">
+<rect width="22" height="22" fill="white" transform="translate(148.5 44)"/>
+</clipPath>
+<clipPath id="clip1_10391:6992">
+<rect width="22" height="22" fill="white" transform="translate(147.5 138)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/Analysis/AnalysisConsumption.spec.tsx b/src/components/Analysis/AnalysisConsumption.spec.tsx
index bfa5a1108ddd279610518676b31fd3a3ecb6f590..1fbcf4bebf43199fbc9de40997bfd2ca7b796c4d 100644
--- a/src/components/Analysis/AnalysisConsumption.spec.tsx
+++ b/src/components/Analysis/AnalysisConsumption.spec.tsx
@@ -1,426 +1,459 @@
-/* eslint-disable react/display-name */
-import React from 'react'
-import { mount } from 'enzyme'
-import { Provider } from 'react-redux'
-import configureStore from 'redux-mock-store'
-import { profileData } from '../../../tests/__mocks__/profile.mock'
-import AnalysisConsumption from 'components/Analysis/AnalysisConsumption'
-import { act } from 'react-dom/test-utils'
-import Button from '@material-ui/core/Button'
-import StyledCard from 'components/CommonKit/Card/StyledCard'
-import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
-import {
- mockMonthlyForecastJanuaryTestProfile1,
- profileTypeData,
-} from '../../../tests/__mocks__/profileType.mock'
-import { FluidType } from 'enum/fluid.enum'
-import { PerformanceIndicator } from 'models'
-import { DateTime } from 'luxon'
-
-jest.mock('cozy-ui/transpiled/react/I18n', () => {
- return {
- useI18n: jest.fn(() => {
- return {
- t: (str: string) => str,
- }
- }),
- }
-})
-
-const mockHistoryPush = jest.fn()
-jest.mock('react-router-dom', () => ({
- ...jest.requireActual('react-router-dom'),
- useHistory: () => ({
- push: mockHistoryPush,
- }),
-}))
-
-const mockgetMonthlyForecast = jest.fn()
-jest.mock('services/profileType.service', () => {
- return jest.fn(() => {
- return {
- getMonthlyForecast: mockgetMonthlyForecast,
- }
- })
-})
-
-const mockgetProfileTypeData = jest.fn()
-jest.mock('services/profileTypeEntity.service', () => {
- return jest.fn(() => {
- return {
- getProfileType: mockgetProfileTypeData,
- }
- })
-})
-
-jest.mock('components/Analysis/AnalysisConsumptionRow', () => () => (
- <div id="analysisconsumptionrow"></div>
-))
-
-const mockStore = configureStore([])
-
-const performanceIndicator = {
- compareValue: 160.42797399999998,
- percentageVariation: 0.026592126632478563,
- value: 156.161853,
-}
-const performanceIndicators = [
- {
- compareValue: 203.49,
- percentageVariation: 0.12261044768784712,
- value: 178.54,
- },
- {
- compareValue: 7926.82,
- percentageVariation: 0.020542916327102145,
- value: 7763.98,
- },
- {
- compareValue: 1316.46,
- percentageVariation: -0.0009191316105312541,
- value: 1317.67,
- },
-]
-
-describe('AnalysisConsumption component', () => {
- it('should be rendered correctly', async () => {
- const store = mockStore({
- ecolyo: {
- profile: profileData,
- profileType: profileTypeData,
- global: globalStateData,
- },
- })
- const wrapper = mount(
- <Provider store={store}>
- <AnalysisConsumption
- aggregatedPerformanceIndicator={performanceIndicator}
- performanceIndicators={performanceIndicators}
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
- </Provider>
- )
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- expect(wrapper.find(StyledCard).exists()).toBeTruthy()
- expect(wrapper.find('#analysisconsumptionrow').length).toBe(4)
- })
-
- it('should be rendered correctly with null aggregated performance indicator', async () => {
- const store = mockStore({
- ecolyo: {
- profile: profileData,
- profileType: profileTypeData,
- global: globalStateData,
- },
- })
- const mockAggregatedPerformanceIndicator: PerformanceIndicator = {
- compareValue: 160.42797399999998,
- percentageVariation: null,
- value: null,
- }
- const wrapper = mount(
- <Provider store={store}>
- <AnalysisConsumption
- aggregatedPerformanceIndicator={mockAggregatedPerformanceIndicator}
- performanceIndicators={performanceIndicators}
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
- </Provider>
- )
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- expect(wrapper.find(StyledCard).exists()).toBeTruthy()
- expect(wrapper.find('#analysisconsumptionrow').length).toBe(4)
- })
-
- it('should be rendered correctly without fluid and when click on ideal home button', async () => {
- const store = mockStore({
- ecolyo: {
- profile: profileData,
- profileType: profileTypeData,
- global: globalStateData,
- },
- })
- const wrapper = mount(
- <Provider store={store}>
- <AnalysisConsumption
- aggregatedPerformanceIndicator={performanceIndicator}
- performanceIndicators={performanceIndicators}
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
- </Provider>
- )
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- wrapper
- .find('.link-ideal')
- .first()
- .simulate('click')
- expect(
- wrapper
- .find('#analysisconsumptionrow')
- .first()
- .parent()
- .prop('toggleHome')
- ).toBe('ideal')
- })
-
- it('should be rendered correctly without fluid and when click on average home button', async () => {
- const store = mockStore({
- ecolyo: {
- profile: profileData,
- global: globalStateData,
- },
- })
- const wrapper = mount(
- <Provider store={store}>
- <AnalysisConsumption
- aggregatedPerformanceIndicator={performanceIndicator}
- performanceIndicators={performanceIndicators}
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
- </Provider>
- )
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- wrapper
- .find('.link-average')
- .first()
- .simulate('click')
- expect(
- wrapper
- .find('#analysisconsumptionrow')
- .first()
- .parent()
- .prop('toggleHome')
- ).toBe('average')
- })
-
- it('should be rendered correctly with all fluids connected for ideal', async () => {
- const updateGlobalState = { ...globalStateData }
- updateGlobalState.fluidTypes = [
- FluidType.ELECTRICITY,
- FluidType.WATER,
- FluidType.GAS,
- ]
- const store = mockStore({
- ecolyo: {
- profile: profileData,
- profileType: profileTypeData,
- global: updateGlobalState,
- },
- })
- mockgetMonthlyForecast.mockReturnValue(
- mockMonthlyForecastJanuaryTestProfile1
- )
- const wrapper = mount(
- <Provider store={store}>
- <AnalysisConsumption
- aggregatedPerformanceIndicator={performanceIndicator}
- performanceIndicators={performanceIndicators}
- analysisDate={profileData.monthlyAnalysisDate}
- />
- </Provider>
- )
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- expect(mockgetMonthlyForecast).toHaveBeenCalledWith(
- profileData.monthlyAnalysisDate.month - 1
- )
- wrapper
- .find('.link-ideal')
- .first()
- .simulate('click')
- expect(
- wrapper
- .find('#analysisconsumptionrow')
- .first()
- .parent()
- .prop('toggleHome')
- ).toBe('ideal')
- })
-
- it('should be rendered correctly with all fluids connected for average', async () => {
- const updateGlobalState = { ...globalStateData }
- updateGlobalState.fluidTypes = [
- FluidType.ELECTRICITY,
- FluidType.WATER,
- FluidType.GAS,
- ]
- const store = mockStore({
- ecolyo: {
- profile: profileData,
- profileType: profileTypeData,
- global: updateGlobalState,
- },
- })
- mockgetMonthlyForecast.mockReturnValue(
- mockMonthlyForecastJanuaryTestProfile1
- )
- const wrapper = mount(
- <Provider store={store}>
- <AnalysisConsumption
- aggregatedPerformanceIndicator={performanceIndicator}
- performanceIndicators={performanceIndicators}
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
- </Provider>
- )
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- expect(mockgetMonthlyForecast).toHaveBeenCalledWith(
- profileData.monthlyAnalysisDate.month - 1
- )
- wrapper
- .find('.link-average')
- .first()
- .simulate('click')
- expect(
- wrapper
- .find('#analysisconsumptionrow')
- .first()
- .parent()
- .prop('toggleHome')
- ).toBe('average')
- })
-
- it('should be rendered correctly with 2 fluids connected for ideal', async () => {
- const updateGlobalState = { ...globalStateData }
- updateGlobalState.fluidTypes = [FluidType.ELECTRICITY, FluidType.WATER]
- const store = mockStore({
- ecolyo: {
- profile: profileData,
- profileType: profileTypeData,
- global: updateGlobalState,
- },
- })
- mockgetMonthlyForecast.mockReturnValue(
- mockMonthlyForecastJanuaryTestProfile1
- )
- const wrapper = mount(
- <Provider store={store}>
- <AnalysisConsumption
- aggregatedPerformanceIndicator={performanceIndicator}
- performanceIndicators={performanceIndicators}
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
- </Provider>
- )
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- expect(mockgetMonthlyForecast).toHaveBeenCalledWith(
- profileData.monthlyAnalysisDate.month - 1
- )
- wrapper
- .find('.link-ideal')
- .first()
- .simulate('click')
- expect(
- wrapper
- .find('#analysisconsumptionrow')
- .first()
- .parent()
- .prop('toggleHome')
- ).toBe('ideal')
- })
-
- it('should be rendered correctly with 2 fluids connected for average', async () => {
- const updateGlobalState = { ...globalStateData }
- updateGlobalState.fluidTypes = [FluidType.ELECTRICITY, FluidType.WATER]
- const store = mockStore({
- ecolyo: {
- profile: profileData,
- global: updateGlobalState,
- },
- })
- mockgetMonthlyForecast.mockReturnValue(
- mockMonthlyForecastJanuaryTestProfile1
- )
- const wrapper = mount(
- <Provider store={store}>
- <AnalysisConsumption
- aggregatedPerformanceIndicator={performanceIndicator}
- performanceIndicators={performanceIndicators}
- analysisDate={DateTime.fromISO('2020-11-03T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
- </Provider>
- )
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- expect(mockgetMonthlyForecast).toHaveBeenCalledWith(
- profileData.monthlyAnalysisDate.month - 1
- )
- wrapper
- .find('.link-average')
- .first()
- .simulate('click')
- expect(
- wrapper
- .find('#analysisconsumptionrow')
- .first()
- .parent()
- .prop('toggleHome')
- ).toBe('average')
- })
-
- it('should redirect to profileType form when click on mui button', async () => {
- const store = mockStore({
- ecolyo: {
- profile: profileData,
- profileType: profileTypeData,
- global: globalStateData,
- },
- })
- const wrapper = mount(
- <Provider store={store}>
- <AnalysisConsumption
- aggregatedPerformanceIndicator={performanceIndicator}
- performanceIndicators={performanceIndicators}
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
- </Provider>
- )
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- wrapper
- .find(Button)
- .first()
- .simulate('click')
- expect(mockHistoryPush).toBeCalledWith('/profileType')
- })
-})
+/* eslint-disable react/display-name */
+import React from 'react'
+import { mount } from 'enzyme'
+import { Provider } from 'react-redux'
+import configureStore from 'redux-mock-store'
+import { profileData } from '../../../tests/__mocks__/profile.mock'
+import AnalysisConsumption from 'components/Analysis/AnalysisConsumption'
+import { act } from 'react-dom/test-utils'
+import Button from '@material-ui/core/Button'
+import StyledCard from 'components/CommonKit/Card/StyledCard'
+import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
+import {
+ mockMonthlyForecastJanuaryTestProfile1,
+ profileTypeData,
+} from '../../../tests/__mocks__/profileType.mock'
+import { FluidType } from 'enum/fluid.enum'
+import { PerformanceIndicator } from 'models'
+import { DateTime } from 'luxon'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+const mockHistoryPush = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useHistory: () => ({
+ push: mockHistoryPush,
+ }),
+}))
+
+const mockgetMonthlyForecast = jest.fn()
+jest.mock('services/profileType.service', () => {
+ return jest.fn(() => {
+ return {
+ getMonthlyForecast: mockgetMonthlyForecast,
+ }
+ })
+})
+
+const mockgetProfileTypeData = jest.fn()
+jest.mock('services/profileTypeEntity.service', () => {
+ return jest.fn(() => {
+ return {
+ getProfileType: mockgetProfileTypeData,
+ }
+ })
+})
+
+jest.mock('components/Analysis/AnalysisConsumptionRow', () => () => (
+ <div id="analysisconsumptionrow"></div>
+))
+
+const mockStore = configureStore([])
+
+const modifiedProfile = { ...profileData, isProfileTypeCompleted: true }
+
+const performanceIndicator = {
+ compareValue: 160.42797399999998,
+ percentageVariation: 0.026592126632478563,
+ value: 156.161853,
+}
+const performanceIndicators = [
+ {
+ compareValue: 203.49,
+ percentageVariation: 0.12261044768784712,
+ value: 178.54,
+ },
+ {
+ compareValue: 7926.82,
+ percentageVariation: 0.020542916327102145,
+ value: 7763.98,
+ },
+ {
+ compareValue: 1316.46,
+ percentageVariation: -0.0009191316105312541,
+ value: 1317.67,
+ },
+]
+
+describe('AnalysisConsumption component', () => {
+ it('should be rendered correctly', async () => {
+ const store = mockStore({
+ ecolyo: {
+ profile: modifiedProfile,
+ profileType: profileTypeData,
+ global: globalStateData,
+ },
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <AnalysisConsumption
+ aggregatedPerformanceIndicator={performanceIndicator}
+ performanceIndicators={performanceIndicators}
+ analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
+ zone: 'utc',
+ })}
+ />
+ </Provider>
+ )
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve))
+ wrapper.update()
+ })
+ expect(wrapper.find(StyledCard).exists()).toBeTruthy()
+ expect(wrapper.find('#analysisconsumptionrow').length).toBe(4)
+ })
+
+ it('should be rendered correctly with no profil set', async () => {
+ const store = mockStore({
+ ecolyo: {
+ profile: profileData,
+ profileType: profileTypeData,
+ global: globalStateData,
+ },
+ })
+ const mockAggregatedPerformanceIndicator: PerformanceIndicator = {
+ compareValue: 160.42797399999998,
+ percentageVariation: null,
+ value: null,
+ }
+ const wrapper = mount(
+ <Provider store={store}>
+ <AnalysisConsumption
+ aggregatedPerformanceIndicator={mockAggregatedPerformanceIndicator}
+ performanceIndicators={performanceIndicators}
+ analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
+ zone: 'utc',
+ })}
+ />
+ </Provider>
+ )
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve))
+ wrapper.update()
+ })
+ expect(wrapper.find(Button).exists()).toBeTruthy()
+ })
+
+ it('should be rendered correctly with null aggregated performance indicator', async () => {
+ const store = mockStore({
+ ecolyo: {
+ profile: modifiedProfile,
+ profileType: profileTypeData,
+ global: globalStateData,
+ },
+ })
+ const mockAggregatedPerformanceIndicator: PerformanceIndicator = {
+ compareValue: 160.42797399999998,
+ percentageVariation: null,
+ value: null,
+ }
+ const wrapper = mount(
+ <Provider store={store}>
+ <AnalysisConsumption
+ aggregatedPerformanceIndicator={mockAggregatedPerformanceIndicator}
+ performanceIndicators={performanceIndicators}
+ analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
+ zone: 'utc',
+ })}
+ />
+ </Provider>
+ )
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve))
+ wrapper.update()
+ })
+ expect(wrapper.find(StyledCard).exists()).toBeTruthy()
+ expect(wrapper.find('#analysisconsumptionrow').length).toBe(4)
+ })
+
+ it('should be rendered correctly without fluid and when click on ideal home button', async () => {
+ const store = mockStore({
+ ecolyo: {
+ profile: modifiedProfile,
+ profileType: profileTypeData,
+ global: globalStateData,
+ },
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <AnalysisConsumption
+ aggregatedPerformanceIndicator={performanceIndicator}
+ performanceIndicators={performanceIndicators}
+ analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
+ zone: 'utc',
+ })}
+ />
+ </Provider>
+ )
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve))
+ wrapper.update()
+ })
+ wrapper
+ .find('.link-ideal')
+ .first()
+ .simulate('click')
+ expect(
+ wrapper
+ .find('#analysisconsumptionrow')
+ .first()
+ .parent()
+ .prop('toggleHome')
+ ).toBe('ideal')
+ })
+
+ it('should be rendered correctly without fluid and when click on average home button', async () => {
+ const store = mockStore({
+ ecolyo: {
+ profile: modifiedProfile,
+ global: globalStateData,
+ },
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <AnalysisConsumption
+ aggregatedPerformanceIndicator={performanceIndicator}
+ performanceIndicators={performanceIndicators}
+ analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
+ zone: 'utc',
+ })}
+ />
+ </Provider>
+ )
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve))
+ wrapper.update()
+ })
+ wrapper
+ .find('.link-average')
+ .first()
+ .simulate('click')
+ expect(
+ wrapper
+ .find('#analysisconsumptionrow')
+ .first()
+ .parent()
+ .prop('toggleHome')
+ ).toBe('average')
+ })
+
+ it('should be rendered correctly with all fluids connected for ideal', async () => {
+ const updateGlobalState = { ...globalStateData }
+ updateGlobalState.fluidTypes = [
+ FluidType.ELECTRICITY,
+ FluidType.WATER,
+ FluidType.GAS,
+ ]
+ const store = mockStore({
+ ecolyo: {
+ profile: modifiedProfile,
+ profileType: profileTypeData,
+ global: updateGlobalState,
+ },
+ })
+ mockgetMonthlyForecast.mockReturnValue(
+ mockMonthlyForecastJanuaryTestProfile1
+ )
+ const wrapper = mount(
+ <Provider store={store}>
+ <AnalysisConsumption
+ aggregatedPerformanceIndicator={performanceIndicator}
+ performanceIndicators={performanceIndicators}
+ analysisDate={profileData.monthlyAnalysisDate}
+ />
+ </Provider>
+ )
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve))
+ wrapper.update()
+ })
+ expect(mockgetMonthlyForecast).toHaveBeenCalledWith(
+ profileData.monthlyAnalysisDate.month - 1
+ )
+ wrapper
+ .find('.link-ideal')
+ .first()
+ .simulate('click')
+ expect(
+ wrapper
+ .find('#analysisconsumptionrow')
+ .first()
+ .parent()
+ .prop('toggleHome')
+ ).toBe('ideal')
+ })
+
+ it('should be rendered correctly with all fluids connected for average', async () => {
+ const updateGlobalState = { ...globalStateData }
+ updateGlobalState.fluidTypes = [
+ FluidType.ELECTRICITY,
+ FluidType.WATER,
+ FluidType.GAS,
+ ]
+ const store = mockStore({
+ ecolyo: {
+ profile: modifiedProfile,
+ profileType: profileTypeData,
+ global: updateGlobalState,
+ },
+ })
+ mockgetMonthlyForecast.mockReturnValue(
+ mockMonthlyForecastJanuaryTestProfile1
+ )
+ const wrapper = mount(
+ <Provider store={store}>
+ <AnalysisConsumption
+ aggregatedPerformanceIndicator={performanceIndicator}
+ performanceIndicators={performanceIndicators}
+ analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
+ zone: 'utc',
+ })}
+ />
+ </Provider>
+ )
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve))
+ wrapper.update()
+ })
+ expect(mockgetMonthlyForecast).toHaveBeenCalledWith(
+ profileData.monthlyAnalysisDate.month - 1
+ )
+ wrapper
+ .find('.link-average')
+ .first()
+ .simulate('click')
+ expect(
+ wrapper
+ .find('#analysisconsumptionrow')
+ .first()
+ .parent()
+ .prop('toggleHome')
+ ).toBe('average')
+ })
+
+ it('should be rendered correctly with 2 fluids connected for ideal', async () => {
+ const updateGlobalState = { ...globalStateData }
+ updateGlobalState.fluidTypes = [FluidType.ELECTRICITY, FluidType.WATER]
+ const store = mockStore({
+ ecolyo: {
+ profile: modifiedProfile,
+ profileType: profileTypeData,
+ global: updateGlobalState,
+ },
+ })
+ mockgetMonthlyForecast.mockReturnValue(
+ mockMonthlyForecastJanuaryTestProfile1
+ )
+ const wrapper = mount(
+ <Provider store={store}>
+ <AnalysisConsumption
+ aggregatedPerformanceIndicator={performanceIndicator}
+ performanceIndicators={performanceIndicators}
+ analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
+ zone: 'utc',
+ })}
+ />
+ </Provider>
+ )
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve))
+ wrapper.update()
+ })
+ expect(mockgetMonthlyForecast).toHaveBeenCalledWith(
+ profileData.monthlyAnalysisDate.month - 1
+ )
+ wrapper
+ .find('.link-ideal')
+ .first()
+ .simulate('click')
+ expect(
+ wrapper
+ .find('#analysisconsumptionrow')
+ .first()
+ .parent()
+ .prop('toggleHome')
+ ).toBe('ideal')
+ })
+
+ it('should be rendered correctly with 2 fluids connected for average', async () => {
+ const updateGlobalState = { ...globalStateData }
+ updateGlobalState.fluidTypes = [FluidType.ELECTRICITY, FluidType.WATER]
+ const store = mockStore({
+ ecolyo: {
+ profile: modifiedProfile,
+ global: updateGlobalState,
+ },
+ })
+ mockgetMonthlyForecast.mockReturnValue(
+ mockMonthlyForecastJanuaryTestProfile1
+ )
+ const wrapper = mount(
+ <Provider store={store}>
+ <AnalysisConsumption
+ aggregatedPerformanceIndicator={performanceIndicator}
+ performanceIndicators={performanceIndicators}
+ analysisDate={DateTime.fromISO('2020-11-03T00:00:00.000Z', {
+ zone: 'utc',
+ })}
+ />
+ </Provider>
+ )
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve))
+ wrapper.update()
+ })
+ expect(mockgetMonthlyForecast).toHaveBeenCalledWith(
+ profileData.monthlyAnalysisDate.month - 1
+ )
+ wrapper
+ .find('.link-average')
+ .first()
+ .simulate('click')
+ expect(
+ wrapper
+ .find('#analysisconsumptionrow')
+ .first()
+ .parent()
+ .prop('toggleHome')
+ ).toBe('average')
+ })
+
+ it('should redirect to profileType form when click on mui button', async () => {
+ const store = mockStore({
+ ecolyo: {
+ profile: profileData,
+ profileType: profileTypeData,
+ global: globalStateData,
+ },
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <AnalysisConsumption
+ aggregatedPerformanceIndicator={performanceIndicator}
+ performanceIndicators={performanceIndicators}
+ analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
+ zone: 'utc',
+ })}
+ />
+ </Provider>
+ )
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve))
+ wrapper.update()
+ })
+ wrapper
+ .find(Button)
+ .first()
+ .simulate('click')
+ expect(mockHistoryPush).toBeCalledWith('/profileType')
+ })
+})
diff --git a/src/components/Analysis/AnalysisConsumption.tsx b/src/components/Analysis/AnalysisConsumption.tsx
index 9fef37acecf97889e3173ee58d86c7275394209f..1ab5dfc159c5803aada7323327e1726940452290 100644
--- a/src/components/Analysis/AnalysisConsumption.tsx
+++ b/src/components/Analysis/AnalysisConsumption.tsx
@@ -1,5 +1,6 @@
import React, { useCallback, useEffect, useState } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
import { useSelector } from 'react-redux'
import { AppStore } from 'store'
import { useHistory } from 'react-router-dom'
@@ -14,6 +15,8 @@ import ProfileTypeService from 'services/profileType.service'
import { Client, useClient } from 'cozy-client'
import { DateTime } from 'luxon'
import ProfileTypeEntityService from 'services/profileTypeEntity.service'
+import PlaceHolderIcon from 'assets/icons/visu/analysis/no-profile-placeholder.svg'
+
interface AnalysisConsumptionProps {
aggregatedPerformanceIndicator: PerformanceIndicator
performanceIndicators: PerformanceIndicator[]
@@ -106,85 +109,8 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
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.comparison`)}</div>
- </div>
- <div className="consumption-price">
- {fluidTypes.length > 0 ? (
- <AnalysisConsumptionRow
- fluid={FluidType.MULTIFLUID}
- userPriceConsumption={userPriceConsumption}
- homePriceConsumption={homePriceConsumption}
- performanceValue={null}
- forecast={forecast}
- toggleHome={toggleHome}
- connected={true}
- />
- ) : (
- <AnalysisConsumptionRow
- fluid={FluidType.MULTIFLUID}
- userPriceConsumption={userPriceConsumption}
- homePriceConsumption={homePriceConsumption}
- performanceValue={null}
- forecast={forecast}
- toggleHome={toggleHome}
- connected={false}
- />
- )}
- </div>
- {fluidTypes.map((fluid, index) => {
- return (
- <AnalysisConsumptionRow
- key={index}
- fluid={fluid}
- userPriceConsumption={userPriceConsumption}
- homePriceConsumption={homePriceConsumption}
- performanceValue={performanceIndicators[fluid].value}
- forecast={forecast}
- toggleHome={toggleHome}
- connected={true}
- />
- )
- })}
- {fluidTypes.length < 3 && <hr className="consumption-sep" />}
- {disconnectedFluidTypes.map((fluid, index) => {
- return (
- <AnalysisConsumptionRow
- key={index}
- fluid={fluid}
- userPriceConsumption={userPriceConsumption}
- homePriceConsumption={homePriceConsumption}
- performanceValue={null}
- forecast={forecast}
- toggleHome={toggleHome}
- connected={false}
- />
- )
- })}
- <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>
+ {!profile.isProfileTypeCompleted ? (
+ <div className="no-profile">
<div className="text-16-normal">
{t('analysis.approximative_description')}
</div>
@@ -196,9 +122,96 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
label: 'text-18-bold',
}}
>
- {t('analysis.adjust_profile')}
+ {t('analysis.accessibility.button_go_to_profil')}
</Button>
+ <Icon
+ icon={PlaceHolderIcon}
+ width="100%"
+ height="60%"
+ alt="pas de profil remplis"
+ />
</div>
+ ) : (
+ <>
+ <div className="consumption-title text-20-bold">
+ <div className="user-title">{t('analysis.user_consumption')}</div>
+ <div className={`${toggleHome}-title`}>
+ {t(`analysis.comparison`)}
+ </div>
+ </div>
+ <div className="consumption-price">
+ {fluidTypes.length > 0 ? (
+ <AnalysisConsumptionRow
+ fluid={FluidType.MULTIFLUID}
+ userPriceConsumption={userPriceConsumption}
+ homePriceConsumption={homePriceConsumption}
+ performanceValue={null}
+ forecast={forecast}
+ toggleHome={toggleHome}
+ connected={true}
+ />
+ ) : (
+ <AnalysisConsumptionRow
+ fluid={FluidType.MULTIFLUID}
+ userPriceConsumption={userPriceConsumption}
+ homePriceConsumption={homePriceConsumption}
+ performanceValue={null}
+ forecast={forecast}
+ toggleHome={toggleHome}
+ connected={false}
+ />
+ )}
+ </div>
+ {fluidTypes.map((fluid, index) => {
+ return (
+ <AnalysisConsumptionRow
+ key={index}
+ fluid={fluid}
+ userPriceConsumption={userPriceConsumption}
+ homePriceConsumption={homePriceConsumption}
+ performanceValue={performanceIndicators[fluid].value}
+ forecast={forecast}
+ toggleHome={toggleHome}
+ connected={true}
+ />
+ )
+ })}
+ {fluidTypes.length < 3 && <hr className="consumption-sep" />}
+ {disconnectedFluidTypes.map((fluid, index) => {
+ return (
+ <AnalysisConsumptionRow
+ key={index}
+ fluid={fluid}
+ userPriceConsumption={userPriceConsumption}
+ homePriceConsumption={homePriceConsumption}
+ performanceValue={null}
+ forecast={forecast}
+ toggleHome={toggleHome}
+ connected={false}
+ />
+ )
+ })}
+ <StyledCard
+ onClick={toggleAverage}
+ className={`link-average ${toggleHome === 'average' &&
+ 'active'} grid-align`}
+ >
+ <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'} grid-align`}
+ >
+ <span className="check-icon"></span>
+ <span className="link-label text-16-normal">
+ {t('analysis.ideal_home')}
+ </span>
+ </StyledCard>
+ </>
)}
</div>
)
diff --git a/src/components/Analysis/MonthlyAnalysis.tsx b/src/components/Analysis/MonthlyAnalysis.tsx
index 01907b7a3eb3f1035807049a8295b52df8ebcfc0..7ac167772e7f621187ef4ed809a3ef4dec29031b 100644
--- a/src/components/Analysis/MonthlyAnalysis.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.tsx
@@ -23,6 +23,7 @@ import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import AnalysisErrorModal from './AnalysisErrorModal'
import { DateTime } from 'luxon'
import StyledCard from 'components/CommonKit/Card/StyledCard'
+import AnalysisIcon from 'assets/icons/visu/analysis/analysis.svg'
import TotalAnalysisChart from './TotalAnalysisChart'
interface MonthlyAnalysisProps {
@@ -36,6 +37,9 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
const client = useClient()
const history = useHistory()
const { fluidTypes } = useSelector((state: AppStore) => state.ecolyo.global)
+ const { isProfileTypeCompleted } = useSelector(
+ (state: AppStore) => state.ecolyo.profile
+ )
const [performanceIndicators, setPerformanceIndicators] = useState<
PerformanceIndicator[]
>([])
@@ -100,6 +104,7 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
}
}
populateData()
+
return () => {
subscribed = false
}
@@ -109,7 +114,7 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
<>
{isLoaded ? (
<div>
- <div className="analysis-root">
+ <div className="analysis-root black">
<div className="analysis-content">
<div>
{fluidConfig.map((fluid, index) => {
@@ -135,18 +140,30 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
</div>
</div>
<div className="analysis-content">
- <StyledCard>
+ <div className="card">
<div className="status-header">
- <Button
- aria-label={t('analysis.accessibility.button_go_to_profil')}
- onClick={goToForm}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- <StyledIcon icon={ProfileEditIcon} size={40} />
- </Button>
+ <div>
+ <StyledIcon icon={AnalysisIcon} size={44} />
+ <p className="text-16-normal">
+ {t('analysis.compare.title')}
+ </p>
+ </div>
+ {isProfileTypeCompleted ? (
+ <Button
+ aria-label={t(
+ 'analysis.accessibility.button_go_to_profil'
+ )}
+ onClick={goToForm}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ <StyledIcon icon={ProfileEditIcon} size={40} />
+ </Button>
+ ) : (
+ <></>
+ )}
</div>
{fluidTypes.length >= 1 ? (
<AnalysisConsumption
@@ -159,7 +176,7 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
) : (
<AnalysisErrorModal />
)}
- </StyledCard>
+ </div>
</div>
</div>
</div>
diff --git a/src/components/Analysis/analysisConsumption.scss b/src/components/Analysis/analysisConsumption.scss
index 3fbd84700d2f21d32ce5103aaefc8af0e41e22f5..493bdde41c859911529f0ba954f0cf8266b25770 100644
--- a/src/components/Analysis/analysisConsumption.scss
+++ b/src/components/Analysis/analysisConsumption.scss
@@ -105,23 +105,25 @@
}
}
}
- .card-adjust-profile {
- border: 1px solid $multi-color;
- border-radius: 4px;
- padding: 1.5rem;
- margin: 0 auto 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;
- }
- @media (min-width: $width-phone) {
- width: 60%;
- }
- @media (min-width: $width-large-phone) {
- width: 45%;
- }
+}
+.no-profile {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ button {
+ max-width: $width-small-phone;
+ }
+}
+
+.grid-align {
+ div {
+ display: grid;
+ grid-template-columns: 20px 1fr;
+ grid-gap: 10px;
+ padding: 10px 16px;
+ }
+ span:first-child {
+ grid-column: 1;
+ align-self: center;
}
}
diff --git a/src/components/Analysis/monthlyanalysis.scss b/src/components/Analysis/monthlyanalysis.scss
index d2d9acaae1244c76ceac7dfcdd221c2b023ef992..b45b292a5a7a5ce4b433a6cfa7122425b1ff5d8c 100644
--- a/src/components/Analysis/monthlyanalysis.scss
+++ b/src/components/Analysis/monthlyanalysis.scss
@@ -27,11 +27,23 @@
}
}
.status-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- color: $grey-bright;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-gap: 0.5rem;
+ justify-content: end;
+ color: $grey-bright !important;
margin-top: 1.5rem;
+ div {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ grid-column: 2;
+ }
+ button {
+ grid-column: 3;
+ display: flex;
+ justify-self: end;
+ }
button.btn-secondary-negative {
min-width: 40px;
width: 40px;
diff --git a/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx b/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
index 42a9043b0d6c1b39a2eb5df693db53232369e5c7..1fe0f2f0032ae3678977a6c17ef18732c6ba255f 100644
--- a/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
+++ b/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
@@ -30,7 +30,7 @@ const FluidPerformanceIndicator: React.FC<FluidPerformanceIndicatorProps> = ({
else displayedValue = '-----'
return (
- <StyledCard>
+ <div className="card">
<div className="fpi">
<div className="fpi-left">
<div className="fpi-content">
@@ -51,19 +51,20 @@ const FluidPerformanceIndicator: React.FC<FluidPerformanceIndicatorProps> = ({
performanceIndicator &&
performanceIndicator.percentageVariation &&
performanceIndicator.percentageVariation > 0
- ? 'positive'
- : 'negative'
+ ? 'negative'
+ : 'positive'
}`}
>
{performanceIndicator &&
performanceIndicator.percentageVariation ? (
performanceIndicator.percentageVariation > 0 ? (
- `+${formatNumberValues(
+ `-${formatNumberValues(
performanceIndicator.percentageVariation * 100
)} %`
) : (
- `${formatNumberValues(
- performanceIndicator.percentageVariation * 100
+ `+${formatNumberValues(
+ Math.abs(performanceIndicator.percentageVariation) *
+ 100
)} %`
)
) : (
@@ -77,7 +78,7 @@ const FluidPerformanceIndicator: React.FC<FluidPerformanceIndicatorProps> = ({
</div>
</div>
</div>
- </StyledCard>
+ </div>
)
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 9ff2713079e1993fd7aa335747d1b685cbdbeace..bb368e6bdf735fb671ed1cb0cd3031184e9b9e58 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -78,12 +78,13 @@
"user_consumption": "Votre conso",
"average_home": "Conso moyenne d'un profil similaire",
"ideal_home": "Conso idéale pour votre profil",
- "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",
+ "approximative_description": "Pour comparer votre consommation avec un foyer similaire ou avec une conso idéale, veuillez détailler votre profil",
"not_connected": "Non connecté",
"accessibility": {
- "button_go_to_profil": "Aller à la page de profil"
+ "button_go_to_profil": "Détailler mon profil"
+ },
+ "compare": {
+ "title": "Comparateur"
}
},
"analysis_error_modal": {
@@ -809,16 +810,16 @@
},
"warming_fluid": {
"title": "Source chauffage",
- "question": "Quelle source d’énergie utilisez-vous pour vous chauffer ?",
+ "question": "Quelle source d’énergie principale utilisez-vous pour vous chauffer ?",
"0": "Électricité",
"2": "Gaz",
"3": "Bois",
- "4": "Fuel",
+ "4": "Fioul",
"no_fluid_text": "Produit ni par de l'électricité, ni par du gaz, ni par du bois ou du fuel",
"0_text": "Produit grâce à de l'électricité",
"2_text": "Produit grâce au gaz",
"3_text": "Produit grâce au bois",
- "4_text": "Produit grâce au fuel"
+ "4_text": "Produit grâce au fioul"
},
"hot_water_fluid": {
"title": "Source eau chaude",