diff --git a/src/assets/icons/ico/coins.svg b/src/assets/icons/ico/coins.svg
index 1a398fdce675c429f39f37a01f8fcb555c940b7e..a114437dfc3b8458a599f3f49ad7dac33d99357e 100644
--- a/src/assets/icons/ico/coins.svg
+++ b/src/assets/icons/ico/coins.svg
@@ -1,83 +1,98 @@
-<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.78865 33.3019C3.32505 33.233 3 32.8332 3 32.3645L3 30.1667C3 29.6144 3.44772 29.1667 4 29.1667L31.1667 29.1667C31.719 29.1667 32.1667 29.6144 32.1667 30.1667L32.1667 32.3645C32.1667 32.8332 31.8416 33.233 31.378 33.3019C29.7904 33.5379 25.651 34.0001 17.5833 34.0001C9.51564 34.0001 5.37631 33.5379 3.78865 33.3019Z" fill="url(#paint0_linear)"/>
-<path d="M3 32.3645C3 32.8332 3.32505 33.2329 3.78865 33.3018C5.37631 33.5378 9.51564 34 17.5833 34C25.651 34 29.7904 33.5378 31.378 33.3018C31.8416 33.2329 32.1667 32.8332 32.1667 32.3645L32.1667 31.5311C32.1667 31.9998 31.8416 32.3996 31.378 32.4685C29.7904 32.7045 25.651 33.1666 17.5833 33.1666C9.51564 33.1666 5.37631 32.7045 3.78865 32.4685C3.32505 32.3996 3 31.9998 3 31.5311L3 32.3645Z" fill="#A95508"/>
-<path d="M3.83333 29.1666C3.3731 29.1666 3 28.7935 3 28.3333L32.1667 28.3333C32.1667 28.7935 31.7936 29.1666 31.3333 29.1666L3.83333 29.1666Z" fill="#A95508"/>
-<path d="M3 28.3333L3 25.1666C3 24.6144 3.44772 24.1666 4 24.1666L31.1667 24.1666C31.719 24.1666 32.1667 24.6144 32.1667 25.1666L32.1667 28.3333L3 28.3333Z" fill="url(#paint1_linear)"/>
-<path d="M3.83333 24.1666C3.37309 24.1666 3 23.7935 3 23.3333L32.1667 23.3333C32.1667 23.7935 31.7936 24.1666 31.3333 24.1666L3.83333 24.1666Z" fill="#A95508"/>
-<path d="M3 23.3333L3 20.1666C3 19.6144 3.44772 19.1666 4 19.1666L31.1667 19.1666C31.719 19.1666 32.1667 19.6144 32.1667 20.1666L32.1667 23.3333L3 23.3333Z" fill="url(#paint2_linear)"/>
-<path d="M3.83333 19.1666C3.3731 19.1666 3 18.7935 3 18.3333L32.1667 18.3333C32.1667 18.7935 31.7936 19.1666 31.3333 19.1666L3.83333 19.1666Z" fill="#A95508"/>
-<path d="M3 18.3333L3 15.1666C3 14.6144 3.44772 14.1666 4 14.1666L31.1667 14.1666C31.719 14.1666 32.1667 14.6144 32.1667 15.1666L32.1667 18.3333L3 18.3333Z" fill="url(#paint3_linear)"/>
-<path d="M3.83333 14.1667C3.3731 14.1667 3 13.7936 3 13.3334L32.1667 13.3334C32.1667 13.7936 31.7936 14.1667 31.3333 14.1667L3.83333 14.1667Z" fill="#A95508"/>
-<path d="M3 13.3334L3 10.1667C3 9.61442 3.44772 9.16671 4 9.16671L31.1667 9.16671C31.719 9.16671 32.1667 9.61442 32.1667 10.1667L32.1667 13.3334L3 13.3334Z" fill="url(#paint4_linear)"/>
-<path d="M3.875 9.16669C3.39175 9.16669 3 8.77494 3 8.29169L32.1667 8.29169C32.1667 8.77494 31.7749 9.16669 31.2917 9.16669L3.875 9.16669Z" fill="#A95508"/>
-<path d="M3 8.29169L3 4.04168C3 3.48939 3.44772 3.04168 4 3.04168L31.1667 3.04168C31.719 3.04168 32.1667 3.48939 32.1667 4.04168L32.1667 8.29169L3 8.29169Z" fill="url(#paint5_linear)"/>
-<path d="M32.1667 3.47919C32.1667 4.20406 23.4167 4.79169 17.5833 4.79169C11.75 4.79169 3 4.20406 3 3.47919C3 2.75431 9.52918 2.16669 17.5833 2.16669C25.6375 2.16669 32.1667 2.75431 32.1667 3.47919Z" fill="#FECA81"/>
+<svg width="51" height="36" viewBox="0 0 51 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.5">
+<path d="M40.7965 10.7748C40.747 10.7744 40.6975 10.774 40.6533 10.7724L38.7453 10.68L38.7334 10.9076C38.6652 10.9222 38.5981 10.942 38.5234 10.9524L37.4438 32.8543C37.5135 32.8724 37.5802 32.9021 37.6447 32.9213L37.634 33.1541L39.542 33.2465L39.5409 33.2413C39.5904 33.2417 39.6357 33.2485 39.6863 33.2541C45.3009 33.5328 50.1048 28.7257 50.4107 22.518C50.7217 16.3092 46.4163 11.0524 40.7965 10.7748Z" fill="url(#paint0_angular_2390_55515)"/>
+<path opacity="0.75" d="M50.2958 20.127L48.189 19.6433L37.4522 32.6876L37.4438 32.8541C37.5135 32.8722 37.5802 32.9018 37.6447 32.921L37.634 33.1539L39.542 33.2463L39.5409 33.241C39.5904 33.2414 39.6357 33.2482 39.6863 33.2539C45.3009 33.5326 50.1048 28.7255 50.4107 22.5178C50.4549 21.6959 50.411 20.8984 50.2958 20.127Z" fill="#A95508"/>
+<path d="M48.4134 22.4147C48.7196 16.2079 44.414 10.9517 38.7965 10.6746C33.179 10.3974 28.3769 15.2043 28.0707 21.4111C27.7645 27.6178 32.0701 32.8741 37.6876 33.1512C43.3051 33.4284 48.1072 28.6215 48.4134 22.4147Z" fill="url(#paint1_linear_2390_55515)"/>
+<path d="M46.3224 22.3113C46.5658 17.3779 43.1454 13.2001 38.6828 12.9799C34.2202 12.7597 30.4053 16.5806 30.1619 21.514C29.9185 26.4474 33.3388 30.6253 37.8014 30.8454C42.264 31.0656 46.079 27.2447 46.3224 22.3113Z" fill="url(#paint2_linear_2390_55515)"/>
+<path opacity="0.75" d="M46.3224 22.3113C46.5658 17.3779 43.1454 13.2001 38.6828 12.9799C34.2202 12.7597 30.4053 16.5806 30.1619 21.514C29.9185 26.4474 33.3388 30.6253 37.8014 30.8454C42.264 31.0656 46.079 27.2447 46.3224 22.3113Z" fill="#A95508"/>
+<path d="M46.3076 22.6086C46.5429 17.8393 43.2364 13.8005 38.9223 13.5877C34.6082 13.3748 30.9201 17.0686 30.6848 21.8378C30.4495 26.6071 33.7561 30.6459 38.0702 30.8588C42.3843 31.0716 46.0723 27.3779 46.3076 22.6086Z" fill="url(#paint3_linear_2390_55515)"/>
+<path opacity="0.75" d="M35.0785 20.8298L32.9999 21.3333L33.8493 21.9594L34.9438 21.8589L34.9183 22.2061L34.9096 22.561L34.903 22.8248C34.9009 22.9098 34.9016 22.9944 34.9051 23.0788L33 23.3332L33.7938 24.1976L34.9556 24.0909C35.0316 24.8646 35.1824 25.5588 35.408 26.1735C35.6393 26.7816 35.0374 26.6629 35.408 27.0767C36.1333 27.8867 37.1331 28.4145 37.649 28.6092C38.1651 28.7978 38.7487 28.8622 39.3997 28.8024C40.2023 28.7286 40.8997 28.4921 41.492 28.0927C42.0899 27.6928 42.5958 27.1622 43.0098 26.5008L42.3286 25.8553L41.2976 25.169L41.6081 26.1212C41.5216 26.22 41.4181 26.3293 41.2976 26.4493C41.1826 26.5688 41.0425 26.6846 40.8774 26.7966C40.7124 26.9025 40.5197 26.9959 40.2993 27.0766C40.0789 27.1574 39.82 27.2115 39.5225 27.2388C38.748 27.31 38.1099 27.0721 37.6083 26.5251C37.1068 25.972 36.7923 25.1083 36.6646 23.9339L39.9479 23.6322C40.0938 23.6188 40.2101 23.5597 40.2966 23.4549C40.3832 23.3501 40.428 23.2401 40.4308 23.1248L40.4446 22.5698L39.3334 21.9999L36.6057 22.9226C36.6022 22.8382 36.6015 22.7535 36.6036 22.6686L36.6101 22.4047L36.6189 22.0499L36.6443 21.7026L40.7947 21.3212C40.9406 21.3078 41.0569 21.2487 41.1435 21.1439C41.2301 21.0392 41.2748 20.9291 41.2777 20.8139L41.2914 20.2589L40.3334 19.6666L36.779 20.6735C36.9861 19.547 37.3549 18.6749 37.8854 18.0573C38.4216 17.4331 39.0798 17.0852 39.86 17.0135C40.2697 16.9759 40.6022 17.0028 40.8575 17.0943C41.113 17.1798 41.3232 17.2815 41.4883 17.3995C41.6534 17.5174 41.785 17.6294 41.8831 17.7354C41.9871 17.8348 42.0867 17.8801 42.1821 17.8713C42.2719 17.863 42.3426 17.8354 42.3942 17.7883C42.4458 17.7412 42.4947 17.6852 42.5411 17.6204L43.1221 16.8862C42.7481 16.388 42.2955 16.009 41.7644 15.7492C41.2333 15.4893 40.5889 15.3942 39.8312 15.4639C39.225 15.5195 38.6609 15.6864 38.1389 15.9643C37.6224 16.2417 37.1596 16.6141 36.7505 17.0814C36.3415 17.5426 35.9947 18.0919 35.7101 18.7292C35.4257 19.3606 35.2151 20.0607 35.0785 20.8298Z" fill="#A95508"/>
+<path d="M32.8775 20.2737L34.0814 20.1631C34.2181 19.3941 34.4286 18.6939 34.713 18.0626C34.9976 17.4252 35.3444 16.8759 35.7534 16.4147C36.1626 15.9474 36.6254 15.575 37.1418 15.2976C37.6639 15.0197 38.228 14.8529 38.8341 14.7972C39.5918 14.7276 40.2362 14.8227 40.7673 15.0825C41.2984 15.3423 41.751 15.7214 42.125 16.2195L41.5441 16.9538C41.4977 17.0185 41.4487 17.0745 41.3971 17.1216C41.3456 17.1687 41.2749 17.1964 41.1851 17.2046C41.0897 17.2134 40.99 17.1681 40.8861 17.0687C40.7879 16.9627 40.6563 16.8508 40.4912 16.7328C40.3262 16.6148 40.1159 16.5131 39.8604 16.4276C39.6051 16.3361 39.2726 16.3092 38.8629 16.3468C38.0828 16.4185 37.4246 16.7664 36.8883 17.3906C36.3579 18.0083 35.9891 18.8803 35.782 20.0068L40.2944 19.5922L40.2806 20.1472C40.2777 20.2625 40.233 20.3725 40.1464 20.4773C40.0598 20.582 39.9436 20.6411 39.7976 20.6546L35.6473 21.0359C35.6388 21.1517 35.6303 21.2674 35.6219 21.3832C35.619 21.4985 35.6161 21.6167 35.6131 21.738C35.6108 21.829 35.6086 21.917 35.6065 22.0019C35.6044 22.0868 35.6051 22.1715 35.6086 22.2559L39.4475 21.9031L39.4338 22.4581C39.4309 22.5734 39.3862 22.6834 39.2996 22.7882C39.213 22.893 39.0967 22.9521 38.9508 22.9655L35.6675 23.2672C35.7952 24.4416 36.1098 25.3053 36.6112 25.8584C37.1129 26.4054 37.7509 26.6433 38.5254 26.5721C38.8229 26.5448 39.0818 26.4907 39.3022 26.41C39.5226 26.3292 39.7153 26.2358 39.8803 26.1299C40.0455 26.0179 40.1855 25.9021 40.3005 25.7827C40.4211 25.6626 40.5246 25.5533 40.611 25.4546C40.7032 25.3493 40.7837 25.2632 40.8526 25.1963C40.9271 25.129 41.0008 25.0919 41.0737 25.0852C41.1299 25.0801 41.1745 25.0851 41.2078 25.1002C41.2466 25.1147 41.2879 25.1442 41.3316 25.1886L42.0127 25.8341C41.5987 26.4955 41.0928 27.0261 40.4949 27.426C39.9027 27.8254 39.2053 28.0619 38.4027 28.1357C37.7516 28.1955 37.1681 28.1311 36.652 27.9425C36.136 27.7479 35.6899 27.4469 35.3136 27.0397C34.9431 26.6259 34.6422 26.115 34.4109 25.5068C34.1854 24.8921 34.0346 24.1979 33.9586 23.4242L32.7968 23.531L32.822 22.5119L33.9081 22.4121C33.9045 22.3277 33.9038 22.2431 33.906 22.1582C33.9081 22.0732 33.9102 21.9853 33.9125 21.8943C33.9155 21.773 33.9184 21.6547 33.9213 21.5395C33.9298 21.4237 33.9382 21.3079 33.9467 21.1922L32.8523 21.2927L32.8775 20.2737Z" fill="url(#paint4_linear_2390_55515)"/>
+</g>
+<path d="M20.6948 1.16223C20.6205 1.1616 20.5463 1.16097 20.4799 1.15867L17.6179 1.02004L17.6002 1.36141C17.4978 1.38325 17.3971 1.41297 17.2852 1.42862L15.6657 34.2815C15.7702 34.3086 15.8703 34.3531 15.967 34.3819L15.951 34.7311L18.813 34.8698L18.8113 34.8619C18.8856 34.8625 18.9536 34.8727 19.0295 34.8812C27.4514 35.2992 34.6573 28.0886 35.116 18.777C35.5826 9.46374 29.1245 1.57854 20.6948 1.16223Z" fill="url(#paint5_angular_2390_55515)"/>
+<path opacity="0.75" d="M34.9437 15.1906L31.7835 14.4651L15.6782 34.0316L15.6656 34.2813C15.7702 34.3084 15.8703 34.3529 15.967 34.3817L15.9509 34.7309L18.813 34.8695L18.8113 34.8617C18.8855 34.8623 18.9536 34.8725 19.0295 34.881C27.4514 35.299 34.6573 28.0883 35.116 18.7768C35.1823 17.544 35.1164 16.3477 34.9437 15.1906Z" fill="#A95508"/>
+<path d="M32.1201 18.6221C32.5794 9.31192 26.121 1.42756 17.6948 1.01184C9.26857 0.596126 2.06542 7.80648 1.6061 17.1166C1.14677 26.4268 7.60521 34.3111 16.0314 34.7268C24.4576 35.1426 31.6608 27.9322 32.1201 18.6221Z" fill="url(#paint6_linear_2390_55515)"/>
+<path d="M28.9836 18.467C29.3486 11.0668 24.2181 4.80011 17.5243 4.46986C10.8304 4.13961 5.10794 9.87089 4.74285 17.271C4.37775 24.6712 9.50825 30.9379 16.2021 31.2681C22.896 31.5984 28.6185 25.8671 28.9836 18.467Z" fill="url(#paint7_linear_2390_55515)"/>
+<path opacity="0.75" d="M28.9836 18.467C29.3486 11.0668 24.2181 4.80011 17.5243 4.46986C10.8304 4.13961 5.10794 9.87089 4.74285 17.271C4.37775 24.6712 9.50825 30.9379 16.2021 31.2681C22.896 31.5984 28.6185 25.8671 28.9836 18.467Z" fill="#A95508"/>
+<path d="M28.9614 18.913C29.3144 11.7591 24.3546 5.70089 17.8834 5.38163C11.4122 5.06237 5.8802 10.603 5.52725 17.7569C5.1743 24.9108 10.1341 30.969 16.6053 31.2883C23.0764 31.6075 28.6085 26.067 28.9614 18.913Z" fill="url(#paint8_linear_2390_55515)"/>
+<path opacity="0.75" d="M12.1177 16.2449L8.99994 17.0001L10.274 17.9394L11.9156 17.7885L11.8775 18.3095L11.8643 18.8417L11.8545 19.2375C11.8514 19.3649 11.8524 19.4919 11.8577 19.6185L9.00008 20.0001L10.1908 21.2967L11.9334 21.1366C12.0475 22.2971 12.2736 23.3384 12.612 24.2605C12.9589 25.1727 12.0562 24.9945 12.612 25.6152C13.7 26.8303 15.1997 27.6221 15.9736 27.9141C16.7477 28.197 17.6231 28.2935 18.5996 28.2038C19.8035 28.0932 20.8496 27.7383 21.738 27.1393C22.6348 26.5394 23.3937 25.7435 24.0147 24.7514L22.9929 23.7832L21.4463 22.7538L21.9121 24.1821C21.7824 24.3302 21.6272 24.4942 21.4463 24.6742C21.2739 24.8535 21.0638 25.0271 20.8161 25.1951C20.5685 25.354 20.2795 25.4941 19.9489 25.6152C19.6183 25.7364 19.2299 25.8174 18.7838 25.8584C17.622 25.9652 16.6649 25.6083 15.9125 24.7879C15.1603 23.9583 14.6884 22.6627 14.4969 20.901L19.4218 20.4485C19.6407 20.4284 19.8151 20.3397 19.945 20.1826C20.0749 20.0254 20.142 19.8604 20.1462 19.6875L20.1669 18.855L18.5001 18.0001L14.4085 19.3841C14.4033 19.2575 14.4022 19.1305 14.4054 19.0031L14.4152 18.6073L14.4284 18.0751L14.4665 17.5541L20.6921 16.9821C20.911 16.962 21.0854 16.8733 21.2152 16.7162C21.3451 16.559 21.4122 16.394 21.4165 16.2211L21.4371 15.3886L20.0001 14.5001L14.6685 16.0105C14.9792 14.3207 15.5324 13.0126 16.3281 12.0862C17.1325 11.1499 18.1198 10.628 19.29 10.5205C19.9045 10.464 20.4033 10.5044 20.7863 10.6417C21.1695 10.7699 21.4848 10.9225 21.7324 11.0994C21.98 11.2764 22.1775 11.4444 22.3247 11.6033C22.4806 11.7524 22.6301 11.8203 22.7732 11.8072C22.9079 11.7948 23.014 11.7533 23.0913 11.6826C23.1686 11.612 23.2421 11.5281 23.3117 11.4309L24.1832 10.3296C23.6221 9.5823 22.9433 9.01377 22.1466 8.62401C21.3499 8.23426 20.3833 8.09159 19.2468 8.19602C18.3376 8.27957 17.4914 8.52979 16.7083 8.9467C15.9337 9.36284 15.2395 9.92136 14.6257 10.6223C14.0122 11.3141 13.492 12.138 13.0651 13.0941C12.6385 14.0411 12.3227 15.0914 12.1177 16.2449Z" fill="#8A4505"/>
+<path d="M8.8163 15.4107L10.6221 15.2448C10.8271 14.0912 11.1429 13.0409 11.5695 12.094C11.9964 11.1379 12.5166 10.3139 13.1301 9.62213C13.7439 8.92122 14.4381 8.3627 15.2127 7.94656C15.9958 7.52965 16.842 7.27942 17.7512 7.19588C18.8877 7.09145 19.8543 7.23411 20.651 7.62387C21.4477 8.01363 22.1265 8.58215 22.6876 9.32944L21.8161 10.4308C21.7465 10.5279 21.673 10.6118 21.5957 10.6825C21.5184 10.7531 21.4123 10.7947 21.2776 10.807C21.1345 10.8202 20.985 10.7522 20.8291 10.6032C20.6819 10.4442 20.4844 10.2763 20.2368 10.0993C19.9892 9.92234 19.6738 9.76976 19.2906 9.64157C18.9077 9.50429 18.4089 9.46388 17.7943 9.52035C16.6242 9.62788 15.6369 10.1498 14.8325 11.0861C14.0368 12.0125 13.4836 13.3206 13.1729 15.0104L19.9415 14.3884L19.9209 15.2209C19.9166 15.3938 19.8495 15.5588 19.7196 15.716C19.5897 15.8732 19.4154 15.9618 19.1965 15.9819L12.9709 16.554C12.9582 16.7276 12.9455 16.9013 12.9328 17.0749C12.9285 17.2478 12.9241 17.4252 12.9196 17.6072C12.9162 17.7437 12.9129 17.8756 12.9098 18.003C12.9066 18.1304 12.9077 18.2573 12.9129 18.3839L18.6713 17.8548L18.6506 18.6873C18.6464 18.8602 18.5793 19.0252 18.4494 19.1824C18.3195 19.3396 18.1451 19.4282 17.9262 19.4484L13.0013 19.9009C13.1928 21.6625 13.6647 22.9581 14.4169 23.7877C15.1693 24.6082 16.1264 24.9651 17.2881 24.8583C17.7343 24.8173 18.1227 24.7362 18.4533 24.6151C18.7839 24.4939 19.0729 24.3539 19.3205 24.195C19.5682 24.027 19.7783 23.8533 19.9507 23.6741C20.1316 23.4941 20.2868 23.33 20.4165 23.182C20.5548 23.024 20.6756 22.8949 20.7789 22.7946C20.8906 22.6936 21.0012 22.638 21.1106 22.628C21.1948 22.6202 21.2618 22.6277 21.3116 22.6504C21.3699 22.6722 21.4318 22.7165 21.4973 22.7831L22.5191 23.7513C21.8981 24.7434 21.1392 25.5393 20.2424 26.1391C19.354 26.7382 18.3079 27.093 17.104 27.2037C16.1275 27.2934 15.2521 27.1968 14.478 26.9139C13.7041 26.6219 13.0349 26.1705 12.4705 25.5597C11.9147 24.939 11.4633 24.1726 11.1164 23.2604C10.778 22.3383 10.5519 21.297 10.4378 20.1364L8.69518 20.2966L8.73307 18.768L10.3621 18.6183C10.3568 18.4917 10.3558 18.3647 10.3589 18.2374C10.3621 18.11 10.3654 17.9781 10.3687 17.8416C10.3732 17.6596 10.3776 17.4822 10.3819 17.3093C10.3946 17.1357 10.4073 16.962 10.42 16.7884L8.77841 16.9392L8.8163 15.4107Z" fill="url(#paint9_linear_2390_55515)"/>
<defs>
-<linearGradient id="paint0_linear" x1="32.167" y1="31.2552" x2="3.00036" y2="31.2552" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F2AA32"/>
-<stop offset="0.0677083" stop-color="#B3653D"/>
-<stop offset="0.1719" stop-color="#F8B116"/>
-<stop offset="0.3438" stop-color="#EBB12A"/>
-<stop offset="0.5417" stop-color="#9E5810"/>
-<stop offset="0.6771" stop-color="#E2AF0A"/>
-<stop offset="0.7969" stop-color="#FBE05B"/>
-<stop offset="0.8854" stop-color="#DC972D"/>
-<stop offset="1" stop-color="#EBC50B"/>
+<radialGradient id="paint0_angular_2390_55515" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(41.7457 23.7682) rotate(119.031) scale(46.8954 61.4718)">
+<stop offset="0.413979" stop-color="#BF723B"/>
+<stop offset="0.512607" stop-color="#DD9A2B"/>
+<stop offset="0.601154" stop-color="#F6D74C"/>
+<stop offset="0.656158" stop-color="#D1880D"/>
+<stop offset="0.759746" stop-color="#A05B11"/>
+<stop offset="0.889115" stop-color="#A05B11"/>
+<stop offset="0.947304" stop-color="#F5B11B"/>
+<stop offset="0.972422" stop-color="#BE7D1B"/>
+</radialGradient>
+<linearGradient id="paint1_linear_2390_55515" x1="38.6362" y1="35.6388" x2="51.6107" y2="17.5605" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BF723B"/>
+<stop offset="0.12897" stop-color="#DD9A2B"/>
+<stop offset="0.453125" stop-color="#F6D74C"/>
+<stop offset="0.75" stop-color="#D1880D"/>
+<stop offset="1" stop-color="#A05B11"/>
</linearGradient>
-<linearGradient id="paint1_linear" x1="32.167" y1="26.2552" x2="3.00036" y2="26.2552" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F2AA32"/>
-<stop offset="0.0677083" stop-color="#B3653D"/>
-<stop offset="0.1719" stop-color="#F8B116"/>
-<stop offset="0.3438" stop-color="#EBB12A"/>
-<stop offset="0.5417" stop-color="#9E5810"/>
-<stop offset="0.6771" stop-color="#E2AF0A"/>
-<stop offset="0.7969" stop-color="#FBE05B"/>
-<stop offset="0.8854" stop-color="#DC972D"/>
-<stop offset="1" stop-color="#EBC50B"/>
+<linearGradient id="paint2_linear_2390_55515" x1="44.3045" y1="30.8584" x2="46.7517" y2="16.8133" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BF723B"/>
+<stop offset="0.260417" stop-color="#DD9A2B"/>
+<stop offset="0.453125" stop-color="#F6D74C"/>
+<stop offset="0.75" stop-color="#D1880D"/>
+<stop offset="1" stop-color="#A05B11"/>
</linearGradient>
-<linearGradient id="paint2_linear" x1="32.167" y1="21.2552" x2="3.00036" y2="21.2552" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F2AA32"/>
-<stop offset="0.0677083" stop-color="#B3653D"/>
-<stop offset="0.1719" stop-color="#F8B116"/>
-<stop offset="0.3438" stop-color="#EBB12A"/>
-<stop offset="0.5417" stop-color="#9E5810"/>
-<stop offset="0.6771" stop-color="#E2AF0A"/>
-<stop offset="0.7969" stop-color="#FBE05B"/>
-<stop offset="0.8854" stop-color="#DC972D"/>
-<stop offset="1" stop-color="#EBC50B"/>
+<linearGradient id="paint3_linear_2390_55515" x1="36.811" y1="31.2724" x2="47.3539" y2="16.3654" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BF723B"/>
+<stop offset="0.178858" stop-color="#DD9A2B"/>
+<stop offset="0.453125" stop-color="#F6D74C"/>
+<stop offset="0.75" stop-color="#D1880D"/>
+<stop offset="1" stop-color="#A05B11"/>
</linearGradient>
-<linearGradient id="paint3_linear" x1="32.167" y1="16.2552" x2="3.00036" y2="16.2552" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F2AA32"/>
-<stop offset="0.0677083" stop-color="#B3653D"/>
-<stop offset="0.1719" stop-color="#F8B116"/>
-<stop offset="0.3438" stop-color="#EBB12A"/>
-<stop offset="0.5417" stop-color="#9E5810"/>
-<stop offset="0.6771" stop-color="#E2AF0A"/>
-<stop offset="0.7969" stop-color="#FBE05B"/>
-<stop offset="0.8854" stop-color="#DC972D"/>
-<stop offset="1" stop-color="#EBC50B"/>
+<linearGradient id="paint4_linear_2390_55515" x1="28.6618" y1="27.306" x2="44.0555" y2="29.198" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BF723B"/>
+<stop offset="0.260417" stop-color="#DD9A2B"/>
+<stop offset="0.453125" stop-color="#F6D74C"/>
+<stop offset="0.75" stop-color="#D1880D"/>
+<stop offset="1" stop-color="#A05B11"/>
</linearGradient>
-<linearGradient id="paint4_linear" x1="32.167" y1="11.2552" x2="3.00036" y2="11.2552" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F2AA32"/>
-<stop offset="0.0677083" stop-color="#B3653D"/>
-<stop offset="0.1719" stop-color="#F8B116"/>
-<stop offset="0.3438" stop-color="#EBB12A"/>
-<stop offset="0.5417" stop-color="#9E5810"/>
-<stop offset="0.6771" stop-color="#E2AF0A"/>
-<stop offset="0.7969" stop-color="#FBE05B"/>
-<stop offset="0.8854" stop-color="#DC972D"/>
-<stop offset="1" stop-color="#EBC50B"/>
+<radialGradient id="paint5_angular_2390_55515" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(22.1186 20.6523) rotate(119.031) scale(70.3432 92.2077)">
+<stop offset="0.413979" stop-color="#BF723B"/>
+<stop offset="0.512607" stop-color="#DD9A2B"/>
+<stop offset="0.601154" stop-color="#F6D74C"/>
+<stop offset="0.656158" stop-color="#D1880D"/>
+<stop offset="0.759746" stop-color="#A05B11"/>
+<stop offset="0.889115" stop-color="#A05B11"/>
+<stop offset="0.947304" stop-color="#F5B11B"/>
+<stop offset="0.972422" stop-color="#BE7D1B"/>
+</radialGradient>
+<linearGradient id="paint6_linear_2390_55515" x1="17.4544" y1="38.4582" x2="36.916" y2="11.3407" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BF723B"/>
+<stop offset="0.12897" stop-color="#DD9A2B"/>
+<stop offset="0.453125" stop-color="#F6D74C"/>
+<stop offset="0.75" stop-color="#D1880D"/>
+<stop offset="1" stop-color="#A05B11"/>
</linearGradient>
-<linearGradient id="paint5_linear" x1="32.167" y1="5.67322" x2="3.00036" y2="5.67322" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F2AA32"/>
-<stop offset="0.0677083" stop-color="#B3653D"/>
-<stop offset="0.1719" stop-color="#F8B116"/>
-<stop offset="0.3438" stop-color="#EBB12A"/>
-<stop offset="0.5417" stop-color="#9E5810"/>
-<stop offset="0.6771" stop-color="#E2AF0A"/>
-<stop offset="0.7969" stop-color="#FBE05B"/>
-<stop offset="0.8854" stop-color="#DC972D"/>
-<stop offset="1" stop-color="#EBC50B"/>
+<linearGradient id="paint7_linear_2390_55515" x1="25.9567" y1="31.2877" x2="29.6276" y2="10.2199" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BF723B"/>
+<stop offset="0.260417" stop-color="#DD9A2B"/>
+<stop offset="0.453125" stop-color="#F6D74C"/>
+<stop offset="0.75" stop-color="#D1880D"/>
+<stop offset="1" stop-color="#A05B11"/>
+</linearGradient>
+<linearGradient id="paint8_linear_2390_55515" x1="14.7165" y1="31.9087" x2="30.5309" y2="9.54829" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BF723B"/>
+<stop offset="0.178858" stop-color="#DD9A2B"/>
+<stop offset="0.453125" stop-color="#F6D74C"/>
+<stop offset="0.75" stop-color="#D1880D"/>
+<stop offset="1" stop-color="#A05B11"/>
+</linearGradient>
+<linearGradient id="paint9_linear_2390_55515" x1="2.49277" y1="25.9591" x2="25.5833" y2="28.7972" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BF723B"/>
+<stop offset="0.260417" stop-color="#DD9A2B"/>
+<stop offset="0.453125" stop-color="#F6D74C"/>
+<stop offset="0.75" stop-color="#D1880D"/>
+<stop offset="1" stop-color="#A05B11"/>
</linearGradient>
</defs>
</svg>
diff --git a/src/assets/icons/ico/legendComparison.svg b/src/assets/icons/ico/legendComparison.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d7ba8f3e3e09c1218713974a3ee9a4e15f54d0dc
--- /dev/null
+++ b/src/assets/icons/ico/legendComparison.svg
@@ -0,0 +1,4 @@
+<svg width="12" height="21" viewBox="0 0 12 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 12.5C0 11.1193 1.11929 10 2.5 10V10C3.88071 10 5 11.1193 5 12.5V21H0V12.5Z" fill="currentColor"/>
+<path d="M7 2.5C7 1.11929 8.11929 0 9.5 0V0C10.8807 0 12 1.11929 12 2.5V21H7V2.5Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/Analysis/ElecHalfHourChart.tsx b/src/components/Analysis/ElecHalfHourChart.tsx
index 576423c4131c9bb016ef06ab882c983c6f623b90..9ff47f22240ade0da1b9783bd5dc9b7ed3f4fb9c 100644
--- a/src/components/Analysis/ElecHalfHourChart.tsx
+++ b/src/components/Analysis/ElecHalfHourChart.tsx
@@ -63,7 +63,7 @@ const ElecHalfHourChart = ({ dataLoad, isWeekend }: ElecHalfHourChartProps) => {
compareDataload={null}
fluidType={FluidType.ELECTRICITY}
timeStep={TimeStep.HALF_AN_HOUR}
- showCompare={false}
+ compare={false}
xScale={xScale}
yScale={yScale}
height={getContentHeight()}
diff --git a/src/components/Charts/Bar.spec.tsx b/src/components/Charts/Bar.spec.tsx
index 9e48e45460184c2d2775a8bcf858e56165bd8f43..0694b98f8e7f99a4a38e408e92a21b5752ca37b6 100644
--- a/src/components/Charts/Bar.spec.tsx
+++ b/src/components/Charts/Bar.spec.tsx
@@ -26,7 +26,7 @@ const mockParam = {
compareDataload: graphData.actualData[1],
fluidType: FluidType.MULTIFLUID,
timeStep: TimeStep.DAY,
- showCompare: false,
+ compare: false,
xScale: mockXScale,
yScale: scaleLinear(),
height: 20,
@@ -105,7 +105,7 @@ describe('Bar component test', () => {
const wrapper = mount(
<Provider store={store}>
<svg>
- <Bar {...mockParam} showCompare={true} />
+ <Bar {...mockParam} compare={true} />
</svg>
</Provider>
)
diff --git a/src/components/Charts/Bar.tsx b/src/components/Charts/Bar.tsx
index 435eb671ec5ecff95e351d3063794889b47adb58..9d198936fce70f2db37d0a622842de19582b5ea3 100644
--- a/src/components/Charts/Bar.tsx
+++ b/src/components/Charts/Bar.tsx
@@ -19,7 +19,7 @@ interface BarProps {
compareDataload: Dataload | null
fluidType: FluidType
timeStep: TimeStep
- showCompare: boolean
+ compare: boolean
xScale: ScaleBand<string>
yScale: ScaleLinear<number, number>
height: number
@@ -35,7 +35,7 @@ const Bar = ({
compareDataload,
fluidType,
timeStep,
- showCompare,
+ compare,
xScale,
yScale,
height,
@@ -133,7 +133,7 @@ const Bar = ({
const barBackgroundClass = isSelectedDate
const getBandWidth = (): number => {
- return showCompare ? xScale.bandwidth() / 2 : xScale.bandwidth()
+ return compare ? xScale.bandwidth() / 2 : xScale.bandwidth()
}
const topRoundedRect = (
@@ -192,7 +192,7 @@ const Bar = ({
onClick={!weekdays ? handleClick : () => undefined}
x="0"
y="0"
- width={showCompare ? getBandWidth() * 2 : getBandWidth()}
+ width={compare ? getBandWidth() * 2 : getBandWidth()}
height={height + 40}
className={`background-${barBackgroundClass}`}
fill="#E0E0E0"
@@ -240,7 +240,7 @@ const Bar = ({
</defs>
<path
d={topRoundedRect(
- showCompare ? getBandWidth() : 0,
+ compare ? getBandWidth() : 0,
0,
getBandWidth(),
height - yScaleValue
@@ -276,7 +276,7 @@ const Bar = ({
</defs>
<path
d={topRoundedRect(
- showCompare ? getBandWidth() : 0,
+ compare ? getBandWidth() : 0,
0,
weekdays ? 3 : getBandWidth(),
height - yScaleValue
@@ -290,7 +290,7 @@ const Bar = ({
)
)}
- {showCompare && compareDataload && compareDataload.value >= 0 && (
+ {compare && compareDataload && compareDataload.value >= 0 && (
<g transform={`translate(${xScaleValue}, ${yScaleCompareValue})`}>
<defs>
<linearGradient
diff --git a/src/components/Charts/BarChart.tsx b/src/components/Charts/BarChart.tsx
index da37a2d71654b8fc4250b80e378688fd6d1c6f3c..fd77f84d2db67e756088394c51f0ed4dfc4faab5 100644
--- a/src/components/Charts/BarChart.tsx
+++ b/src/components/Charts/BarChart.tsx
@@ -8,12 +8,13 @@ import { TimeStep } from 'enum/timeStep.enum'
import { DateTime } from 'luxon'
import { Datachart } from 'models'
import React from 'react'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
export interface BarChartProps {
chartData: Datachart
fluidType: FluidType
timeStep: TimeStep
- showCompare: boolean
width?: number
height?: number
marginLeft?: number
@@ -27,7 +28,6 @@ const BarChart: React.FC<BarChartProps> = ({
chartData,
fluidType,
timeStep,
- showCompare,
width = 600,
height = 400,
marginLeft = 10,
@@ -36,6 +36,7 @@ const BarChart: React.FC<BarChartProps> = ({
marginBottom = 50,
isSwitching,
}: BarChartProps) => {
+ const { showCompare } = useSelector((state: AppStore) => state.ecolyo.chart)
const getContentWidth = () => {
return width - marginLeft - marginRight
}
@@ -99,7 +100,7 @@ const BarChart: React.FC<BarChartProps> = ({
}
fluidType={fluidType}
timeStep={timeStep}
- showCompare={showCompare}
+ compare={showCompare}
xScale={xScale}
yScale={yScale}
height={getContentHeight()}
diff --git a/src/components/Charts/__snapshots__/Bar.spec.tsx.snap b/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
index 128c11396c52501b25a9457a280dbc78442b8f2d..69202aa01e7422d77f93202e20ff8d9c6f6dfb0f 100644
--- a/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
+++ b/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
@@ -15,6 +15,7 @@ exports[`Bar component test should correctly render Bar with isDuel 1`] = `
>
<svg>
<Bar
+ compare={false}
compareDataload={
Object {
"date": "2020-10-02T00:00:00.000Z",
@@ -62,7 +63,6 @@ exports[`Bar component test should correctly render Bar with isDuel 1`] = `
index={4}
isDuel={true}
isSwitching={false}
- showCompare={false}
timeStep={20}
xScale={[Function]}
yScale={[Function]}
@@ -86,6 +86,7 @@ exports[`Bar component test should correctly render Bar with isSwitching 1`] = `
>
<svg>
<Bar
+ compare={false}
compareDataload={
Object {
"date": "2020-10-02T00:00:00.000Z",
@@ -133,7 +134,6 @@ exports[`Bar component test should correctly render Bar with isSwitching 1`] = `
index={4}
isDuel={false}
isSwitching={true}
- showCompare={false}
timeStep={20}
xScale={[Function]}
yScale={[Function]}
@@ -157,6 +157,7 @@ exports[`Bar component test should correctly render Bar with showCompare 1`] = `
>
<svg>
<Bar
+ compare={true}
compareDataload={
Object {
"date": "2020-10-02T00:00:00.000Z",
@@ -204,7 +205,6 @@ exports[`Bar component test should correctly render Bar with showCompare 1`] = `
index={4}
isDuel={false}
isSwitching={false}
- showCompare={true}
timeStep={20}
xScale={[Function]}
yScale={[Function]}
@@ -228,6 +228,7 @@ exports[`Bar component test should correctly render Electricity Bar 1`] = `
>
<svg>
<Bar
+ compare={false}
compareDataload={
Object {
"date": "2020-10-02T00:00:00.000Z",
@@ -275,7 +276,6 @@ exports[`Bar component test should correctly render Electricity Bar 1`] = `
index={4}
isDuel={false}
isSwitching={false}
- showCompare={false}
timeStep={20}
xScale={[Function]}
yScale={[Function]}
@@ -299,6 +299,7 @@ exports[`Bar component test should correctly render Gas Bar 1`] = `
>
<svg>
<Bar
+ compare={false}
compareDataload={
Object {
"date": "2020-10-02T00:00:00.000Z",
@@ -346,7 +347,6 @@ exports[`Bar component test should correctly render Gas Bar 1`] = `
index={4}
isDuel={false}
isSwitching={false}
- showCompare={false}
timeStep={20}
xScale={[Function]}
yScale={[Function]}
@@ -370,6 +370,7 @@ exports[`Bar component test should correctly render Multifluid Bar 1`] = `
>
<svg>
<Bar
+ compare={false}
compareDataload={
Object {
"date": "2020-10-02T00:00:00.000Z",
@@ -417,7 +418,6 @@ exports[`Bar component test should correctly render Multifluid Bar 1`] = `
index={4}
isDuel={false}
isSwitching={false}
- showCompare={false}
timeStep={20}
xScale={[Function]}
yScale={[Function]}
@@ -441,6 +441,7 @@ exports[`Bar component test should correctly render Water Bar 1`] = `
>
<svg>
<Bar
+ compare={false}
compareDataload={
Object {
"date": "2020-10-02T00:00:00.000Z",
@@ -488,7 +489,6 @@ exports[`Bar component test should correctly render Water Bar 1`] = `
index={4}
isDuel={false}
isSwitching={false}
- showCompare={false}
timeStep={20}
xScale={[Function]}
yScale={[Function]}
diff --git a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
index a2d879851348987052f1f257fdc47a96ef31d273..03921d3db74467b78d419513b42ccc67b9fdf903 100644
--- a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
@@ -5,17 +5,15 @@ import { Dataload } from 'models'
import React from 'react'
import { useSelector } from 'react-redux'
import { AppStore } from 'store'
-import './consumptionVisualizer.scss'
import InfoDataConsumptionVisualizer from './InfoDataConsumptionVisualizer'
+import './consumptionVisualizer.scss'
interface ConsumptionVisualizerProps {
fluidType: FluidType
- showCompare: boolean
setActive: React.Dispatch<React.SetStateAction<boolean>>
}
const ConsumptionVisualizer: React.FC<ConsumptionVisualizerProps> = ({
fluidType,
- showCompare,
setActive,
}: ConsumptionVisualizerProps) => {
const {
@@ -56,7 +54,6 @@ const ConsumptionVisualizer: React.FC<ConsumptionVisualizerProps> = ({
fluidType={fluidType}
dataload={dataload}
compareDataload={compareDataload}
- showCompare={showCompare}
setActive={setActive}
/>
<div className="consumptionvisualizer-info">
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
index 50dde72a4dac679eee16dd9de80d2c7d6ce737a1..b4818a32796c03afcbd0723bd7ec43c6e89b0086 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
@@ -1,10 +1,9 @@
-import { mount } from 'enzyme'
-import React from 'react'
-import { Provider } from 'react-redux'
-
import { DataloadState } from 'enum/dataload.enum'
import { FluidType } from 'enum/fluid.enum'
+import { mount } from 'enzyme'
import { Dataload } from 'models'
+import React from 'react'
+import { Provider } from 'react-redux'
import { BrowserRouter as Router } from 'react-router-dom'
import configureStore from 'redux-mock-store'
import UsageEventService from 'services/usageEvent.service'
@@ -60,7 +59,6 @@ describe('Dataload consumption visualizer component', () => {
<DataloadConsumptionVisualizer
fluidType={FluidType.MULTIFLUID}
dataload={baseDataLoad}
- showCompare={false}
compareDataload={baseDataLoad}
setActive={jest.fn()}
/>
@@ -79,7 +77,6 @@ describe('Dataload consumption visualizer component', () => {
<DataloadConsumptionVisualizer
fluidType={FluidType.ELECTRICITY}
dataload={baseDataLoad}
- showCompare={false}
compareDataload={baseDataLoad}
setActive={jest.fn()}
/>
@@ -90,7 +87,7 @@ describe('Dataload consumption visualizer component', () => {
it('should render with no value to compare available', async () => {
const store = mockStore({
ecolyo: {
- chart: mockChartStateLoaded,
+ chart: { ...mockChartStateLoaded, showCompare: true },
},
})
const wrapper = mount(
@@ -98,7 +95,6 @@ describe('Dataload consumption visualizer component', () => {
<DataloadConsumptionVisualizer
fluidType={FluidType.WATER}
dataload={baseDataLoad}
- showCompare={true}
compareDataload={emptyDataLoad}
setActive={jest.fn()}
/>
@@ -109,7 +105,7 @@ describe('Dataload consumption visualizer component', () => {
it('should render with water comparison data', async () => {
const store = mockStore({
ecolyo: {
- chart: mockChartStateLoaded,
+ chart: { ...mockChartStateLoaded, showCompare: true },
},
})
const wrapper = mount(
@@ -117,7 +113,6 @@ describe('Dataload consumption visualizer component', () => {
<DataloadConsumptionVisualizer
fluidType={FluidType.WATER}
dataload={baseDataLoad}
- showCompare={true}
compareDataload={baseDataLoad}
setActive={jest.fn()}
/>
@@ -137,7 +132,6 @@ describe('Dataload consumption visualizer component', () => {
<DataloadConsumptionVisualizer
fluidType={FluidType.MULTIFLUID}
dataload={dataLoadWithValueDetailEmpty}
- showCompare={false}
compareDataload={emptyDataLoad}
setActive={jest.fn()}
/>
@@ -166,7 +160,6 @@ describe('Dataload consumption visualizer component', () => {
<DataloadConsumptionVisualizer
fluidType={FluidType.MULTIFLUID}
dataload={dataLoadWithValueDetail}
- showCompare={false}
compareDataload={emptyDataLoad}
setActive={jest.fn()}
/>
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
index fb64ac41b617dce10612d6692cebbef1de28c82f..5a09cecc9f9a43be7a4c35bdaea620aad134da3e 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
@@ -4,26 +4,27 @@ import { Dataload } from 'models'
import React, { useCallback, useState } from 'react'
import { useSelector } from 'react-redux'
import { AppStore } from 'store'
-import './dataloadConsumptionVisualizer.scss'
import DataloadNoValue from './DataloadNoValue'
import DataloadSection from './DataloadSection'
import EstimatedConsumptionModal from './EstimatedConsumptionModal'
+import './dataloadConsumptionVisualizer.scss'
interface DataloadConsumptionVisualizerProps {
fluidType: FluidType
dataload: Dataload
compareDataload: Dataload | null
- showCompare: boolean
setActive: React.Dispatch<React.SetStateAction<boolean>>
}
const DataloadConsumptionVisualizer = ({
fluidType,
dataload,
compareDataload,
- showCompare,
+
setActive,
}: DataloadConsumptionVisualizerProps) => {
- const { loading } = useSelector((state: AppStore) => state.ecolyo.chart)
+ const { loading, showCompare } = useSelector(
+ (state: AppStore) => state.ecolyo.chart
+ )
const [openEstimationModal, setOpenEstimationModal] = useState<boolean>(false)
const toggleEstimationModal = useCallback(() => {
diff --git a/src/components/Duel/DuelBar.tsx b/src/components/Duel/DuelBar.tsx
index 9dfbb3d0df52e337a71b41478a4350b1889ef412..1fbe4960739cec6af7b2113a147ac6d09963cfc7 100644
--- a/src/components/Duel/DuelBar.tsx
+++ b/src/components/Duel/DuelBar.tsx
@@ -123,7 +123,7 @@ const DuelBar: React.FC<BarChartProps> = (props: BarChartProps) => {
compareDataload={null}
fluidType={FluidType.MULTIFLUID}
timeStep={timeStep}
- showCompare={false}
+ compare={false}
xScale={xScale}
yScale={yScale}
height={getContentHeight()}
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index ad566e29d622bda5513781c48fd8a1ef655b8dd0..d79f5fb14c01f764418b3ebb72cc3cc1d4678671 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -1,3 +1,5 @@
+import LegendComparisonIcon from 'assets/icons/ico/legendComparison.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import StyledSwitch from 'components/CommonKit/Switch/StyledSwitch'
import HalfHourNoData from 'components/HalfHourNoData/HalfHourNoData'
import useExploration from 'components/Hooks/useExploration'
@@ -8,13 +10,14 @@ import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import { UsageEventType } from 'enum/usageEvent.enum'
import { UserExplorationID } from 'enum/userExploration.enum'
-import React, { useEffect, useState } from 'react'
-import { useSelector } from 'react-redux'
+import React, { Dispatch, useCallback, useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
import ConsumptionService from 'services/consumption.service'
import UsageEventService from 'services/usageEvent.service'
-import { AppStore } from 'store'
-import './fluidChart.scss'
+import { AppActionsTypes, AppStore } from 'store'
+import { setShowCompare } from 'store/chart/chart.slice'
import FluidChartSwipe from './FluidChartSwipe'
+import './fluidChart.scss'
interface FluidChartProps {
fluidType: FluidType
@@ -28,16 +31,20 @@ const FluidChart: React.FC<FluidChartProps> = ({
const { t } = useI18n()
const client = useClient()
const {
- chart: { currentTimeStep, selectedDate },
+ chart: { currentTimeStep, selectedDate, showCompare },
global: { fluidStatus },
} = useSelector((state: AppStore) => state.ecolyo)
+ const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
const [, setValidExploration] = useExploration()
+ // TODO use chart.loading ?
const [isLoaded, setIsLoaded] = useState<boolean>(false)
- const [showCompare, setShowCompare] = useState<boolean>(false)
const [containsHalfHourData, setContainsHalfHourData] =
useState<boolean>(false)
+ const lowercaseTimeStep = TimeStep[currentTimeStep].toLowerCase()
+ const lowercaseFluidType = FluidType[fluidType].toLowerCase()
+
const handleChangeSwitch = async () => {
if (!showCompare) {
await UsageEventService.addEvent(client, {
@@ -46,7 +53,7 @@ const FluidChart: React.FC<FluidChartProps> = ({
context: FluidType[fluidType].toLowerCase(),
})
}
- setShowCompare(!showCompare)
+ dispatch(setShowCompare(!showCompare))
}
useEffect(() => {
@@ -82,9 +89,31 @@ const FluidChart: React.FC<FluidChartProps> = ({
}
}, [containsHalfHourData, currentTimeStep, setValidExploration])
- const getCompareLabel = (currentTimeStep: TimeStep) => {
- return t(`timestep.${TimeStep[currentTimeStep].toLowerCase()}.comparelabel`)
- }
+ const DisplayLegend = useCallback(
+ () => (
+ <div className="compareLegend">
+ <div>
+ <StyledIcon
+ icon={LegendComparisonIcon}
+ className={`${lowercaseFluidType} compare`}
+ />
+ <span className={`${lowercaseFluidType} compare`}>
+ {t(`timestep.${lowercaseTimeStep}.last`)}
+ </span>
+ </div>
+ <div>
+ <StyledIcon
+ icon={LegendComparisonIcon}
+ className={lowercaseFluidType}
+ />
+ <span className={lowercaseFluidType}>
+ {t(`timestep.${lowercaseTimeStep}.current`)}
+ </span>
+ </div>
+ </div>
+ ),
+ [lowercaseFluidType, lowercaseTimeStep, t]
+ )
return (
<>
@@ -94,15 +123,14 @@ const FluidChart: React.FC<FluidChartProps> = ({
!containsHalfHourData ? (
<HalfHourNoData />
) : (
- <div className="fluidchart-content">
- <FluidChartSwipe
- fluidType={fluidType}
- showCompare={
- currentTimeStep === TimeStep.YEAR ? false : showCompare
- }
- setActive={setActive}
- />
- </div>
+ <>
+ <div className="fluidchart-content">
+ <FluidChartSwipe fluidType={fluidType} setActive={setActive} />
+ </div>
+ {showCompare && currentTimeStep !== TimeStep.YEAR && (
+ <DisplayLegend />
+ )}
+ </>
)}
<TimeStepSelector fluidType={fluidType} />
{currentTimeStep !== TimeStep.YEAR && (
@@ -118,7 +146,7 @@ const FluidChart: React.FC<FluidChartProps> = ({
}}
/>
<span className="fluidchart-footer-label graph-switch-text">
- {getCompareLabel(currentTimeStep)}
+ {t(`timestep.${lowercaseTimeStep}.comparelabel`)}
</span>
</div>
</div>
diff --git a/src/components/FluidChart/FluidChartSlide.tsx b/src/components/FluidChart/FluidChartSlide.tsx
index 999fda16cac71d21d354bd93423a793a14316418..071210de4126f43f2795b199ca5d5b1114ab70d4 100644
--- a/src/components/FluidChart/FluidChartSlide.tsx
+++ b/src/components/FluidChart/FluidChartSlide.tsx
@@ -17,7 +17,6 @@ import './fluidChartSlide.scss'
interface FluidChartSlideProps {
index: number
fluidType: FluidType
- showCompare: boolean
width: number
height: number
isSwitching: boolean
@@ -27,7 +26,6 @@ interface FluidChartSlideProps {
const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
index,
fluidType,
- showCompare,
width,
height,
isSwitching,
@@ -124,18 +122,11 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
</div>
) : (
<>
- <ConsumptionVisualizer
- fluidType={fluidType}
- showCompare={
- currentTimeStep === TimeStep.YEAR ? false : showCompare
- }
- setActive={setActive}
- />
+ <ConsumptionVisualizer fluidType={fluidType} setActive={setActive} />
<BarChart
chartData={chartData}
fluidType={fluidType}
timeStep={timeStep}
- showCompare={showCompare}
height={height}
width={width}
isSwitching={isSwitching}
diff --git a/src/components/FluidChart/FluidChartSwipe.tsx b/src/components/FluidChart/FluidChartSwipe.tsx
index fa6a84cf2dac013788de62ad4fad65338e1756a8..53d927fe18e36717419bffa5a24f6ec0dbf19cc8 100644
--- a/src/components/FluidChart/FluidChartSwipe.tsx
+++ b/src/components/FluidChart/FluidChartSwipe.tsx
@@ -15,13 +15,11 @@ const VirtualizeSwipeableViews = virtualize(SwipeableViews)
interface FluidChartSwipeProps {
fluidType: FluidType
- showCompare: boolean
setActive: React.Dispatch<React.SetStateAction<boolean>>
}
const FluidChartSwipe: React.FC<FluidChartSwipeProps> = ({
fluidType,
- showCompare,
setActive,
}: FluidChartSwipeProps) => {
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
@@ -79,7 +77,6 @@ const FluidChartSwipe: React.FC<FluidChartSwipeProps> = ({
key={key}
index={index}
fluidType={fluidType}
- showCompare={showCompare}
width={width}
height={height}
isSwitching={isSwitching}
diff --git a/src/components/FluidChart/fluidChart.scss b/src/components/FluidChart/fluidChart.scss
index 5966d5da6e394aea6ea89cbad54583d8259fd202..6f5a4fcaf5741719377a504810a6cc2f6338e6fa 100644
--- a/src/components/FluidChart/fluidChart.scss
+++ b/src/components/FluidChart/fluidChart.scss
@@ -7,7 +7,7 @@
margin-bottom: 1rem;
@media #{$large-phone} {
padding: 0rem 1rem 1rem 1rem;
- margin-bottom: 0.5rem;
+ margin-bottom: 0rem;
}
}
.fluidchart-content {
@@ -27,3 +27,45 @@
color: $grey-bright;
}
}
+.compareLegend {
+ padding: 0.5rem 0 1rem 0;
+ display: flex;
+ gap: 1rem;
+ font-weight: 700;
+ max-width: 45.75rem;
+ margin: auto;
+
+ .electricity {
+ color: $elec-color;
+ &.compare {
+ color: $elec-compare-color;
+ }
+ }
+
+ .gas {
+ color: $gas-color;
+ &.compare {
+ color: $gas-compare-color;
+ }
+ }
+
+ .water {
+ color: $water-color;
+ &.compare {
+ color: $water-compare-color;
+ }
+ }
+
+ .multifluid {
+ color: $multi-color;
+ &.compare {
+ color: $multi-compare-color;
+ }
+ }
+
+ div {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+ }
+}
diff --git a/src/components/Home/ConsumptionDetails.tsx b/src/components/Home/ConsumptionDetails.tsx
index c61846e7e9e19f7a3eec242c602405746c1c1c52..b02482996131393096a0aff336fca83963ad7125 100644
--- a/src/components/Home/ConsumptionDetails.tsx
+++ b/src/components/Home/ConsumptionDetails.tsx
@@ -1,5 +1,7 @@
import TotalConsumption from 'components/TotalConsumption/TotalConsumption'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { FluidType } from 'enum/fluid.enum'
+import { TimeStep } from 'enum/timeStep.enum'
import React from 'react'
import { useSelector } from 'react-redux'
import { AppStore } from 'store'
@@ -12,7 +14,8 @@ interface ConsumptionDetailsProps {
const ConsumptionDetails: React.FC<ConsumptionDetailsProps> = ({
fluidType,
}: ConsumptionDetailsProps) => {
- const { currentTimeStep, currentDatachart } = useSelector(
+ const { t } = useI18n()
+ const { currentTimeStep, currentDatachart, showCompare } = useSelector(
(state: AppStore) => state.ecolyo.chart
)
@@ -25,11 +28,19 @@ const ConsumptionDetails: React.FC<ConsumptionDetailsProps> = ({
currentDatachart.actualData,
currentTimeStep
)}
+ {showCompare && (
+ <div className="consumption-details-header compare">
+ {t('consumption.compared')}
+ {currentTimeStep === TimeStep.DAY && ' '}
+ {currentTimeStep !== TimeStep.DAY && ' AU '}
+ {convertDateToShortDateString(
+ currentDatachart.comparisonData,
+ currentTimeStep
+ )}
+ </div>
+ )}
</div>
- <TotalConsumption
- actualData={currentDatachart.actualData}
- fluidType={fluidType}
- />
+ <TotalConsumption fluidType={fluidType} />
</div>
</div>
</>
diff --git a/src/components/Home/consumptionDetails.scss b/src/components/Home/consumptionDetails.scss
index 1c03333888e4bb6cc0b1a1bb2829798e5d27310b..e8827802dc2190d78ceb48102985d6b4840ea29e 100644
--- a/src/components/Home/consumptionDetails.scss
+++ b/src/components/Home/consumptionDetails.scss
@@ -8,20 +8,24 @@
justify-content: center;
width: 100%;
box-sizing: border-box;
- padding: 0.5rem 1rem 1.5rem 1rem;
- @media #{$large-phone} {
- margin-bottom: 1rem;
- }
+ padding: 0 1rem;
+ margin-bottom: 1rem;
+
.consumption-details-content {
width: 45.75rem;
@media #{$large-phone} {
width: 100%;
}
.consumption-details-header {
- margin-top: 1rem;
- margin-bottom: 1.25rem;
+ margin-bottom: 0.5rem;
color: $grey-bright;
font-size: 1rem;
+
+ &.compare {
+ margin-top: 4px;
+ font-size: 0.8rem;
+ color: $grey-dark;
+ }
}
.fluid-details {
margin-top: 2.75rem;
@@ -30,7 +34,6 @@
display: block;
color: $grey-bright;
font-size: 1rem;
- margin-top: 1rem;
}
}
}
diff --git a/src/components/TotalConsumption/TotalConsumption.spec.tsx b/src/components/TotalConsumption/TotalConsumption.spec.tsx
index 7f2101b4851464b40c0163fab6b55387051bcaa9..c0efe60c81bb73b75a284e5cd263f4b14b41110f 100644
--- a/src/components/TotalConsumption/TotalConsumption.spec.tsx
+++ b/src/components/TotalConsumption/TotalConsumption.spec.tsx
@@ -1,7 +1,6 @@
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import { mount } from 'enzyme'
-import { Dataload } from 'models'
import React from 'react'
import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
@@ -21,25 +20,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
})
const mockStore = configureStore([])
-
-const store = mockStore({
- ecolyo: {
- chart: {
- mockInitialChartState,
- },
- },
-})
-
-const mockHalfHourChartState = {
- ...mockInitialChartState,
- currentTimeStep: TimeStep.HALF_AN_HOUR,
-}
-mockHalfHourChartState.currentTimeStep = TimeStep.HALF_AN_HOUR
-
-const storeHalfHour = mockStore({
+const mockChartStore = mockStore({
ecolyo: {
chart: {
- mockHalfHourChartState,
+ ...mockInitialChartState,
+ currentDatachart: graphData,
},
},
})
@@ -47,11 +32,8 @@ const storeHalfHour = mockStore({
describe('TotalConsumption component', () => {
it('should be rendered correctly', async () => {
const component = mount(
- <Provider store={store}>
- <TotalConsumption
- fluidType={FluidType.ELECTRICITY}
- actualData={mockInitialChartState.currentDatachart.actualData}
- />
+ <Provider store={mockChartStore}>
+ <TotalConsumption fluidType={FluidType.ELECTRICITY} />
</Provider>
)
await act(async () => {
@@ -62,11 +44,8 @@ describe('TotalConsumption component', () => {
})
it('should render euro value', async () => {
const component = mount(
- <Provider store={store}>
- <TotalConsumption
- fluidType={FluidType.ELECTRICITY}
- actualData={graphData.actualData}
- />
+ <Provider store={mockChartStore}>
+ <TotalConsumption fluidType={FluidType.ELECTRICITY} />
</Provider>
)
await act(async () => {
@@ -77,12 +56,32 @@ describe('TotalConsumption component', () => {
expect(component.find('.euro-value').first().text()).toEqual('22,77')
})
it('should format multifluid value', async () => {
+ const component = mount(
+ <Provider store={mockChartStore}>
+ <TotalConsumption fluidType={FluidType.MULTIFLUID} />
+ </Provider>
+ )
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve))
+ component.update()
+ })
+
+ expect(component.find('.euro-value').first().text()).toEqual('130,84')
+ })
+ it('should format multifluid value AND compared value', async () => {
+ const store = mockStore({
+ ecolyo: {
+ chart: {
+ ...mockInitialChartState,
+ currentDatachart: graphData,
+ showCompare: true,
+ currentTimeStep: TimeStep.DAY,
+ },
+ },
+ })
const component = mount(
<Provider store={store}>
- <TotalConsumption
- fluidType={FluidType.MULTIFLUID}
- actualData={graphData.actualData}
- />
+ <TotalConsumption fluidType={FluidType.MULTIFLUID} />
</Provider>
)
await act(async () => {
@@ -91,15 +90,18 @@ describe('TotalConsumption component', () => {
})
expect(component.find('.euro-value').first().text()).toEqual('130,84')
+ expect(component.find('.euro-value').at(1).text()).toEqual('110,66')
})
it('should display ----- when half an hour electricity data is not activated', async () => {
- const emptyData: Dataload[] = []
+ const store = mockStore({
+ ecolyo: {
+ chart: mockInitialChartState,
+ currentDatachart: graphData,
+ },
+ })
const component = mount(
- <Provider store={storeHalfHour}>
- <TotalConsumption
- fluidType={FluidType.ELECTRICITY}
- actualData={emptyData}
- />
+ <Provider store={store}>
+ <TotalConsumption fluidType={FluidType.ELECTRICITY} />
</Provider>
)
await act(async () => {
diff --git a/src/components/TotalConsumption/TotalConsumption.tsx b/src/components/TotalConsumption/TotalConsumption.tsx
index d2f628e605f8d71568c777e7642c2331fcdd5827..79cecb0d45e73a8b99f134d543d4801fc6039299 100644
--- a/src/components/TotalConsumption/TotalConsumption.tsx
+++ b/src/components/TotalConsumption/TotalConsumption.tsx
@@ -1,10 +1,10 @@
-import PileIcon from 'assets/icons/ico/coins.svg'
+import Coins from 'assets/icons/ico/coins.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useClient } from 'cozy-client'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import { Dataload } from 'models'
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import ConsumptionService from 'services/consumption.service'
import ConverterService from 'services/converter.service'
@@ -12,23 +12,19 @@ import { AppStore } from 'store'
import { formatNumberValues } from 'utils/utils'
import './totalConsumption.scss'
-interface TotalConsumptionProps {
- actualData: Dataload[]
- fluidType: FluidType
-}
-
-const TotalConsumption: React.FC<TotalConsumptionProps> = ({
- actualData,
- fluidType,
-}: TotalConsumptionProps) => {
- const { currentTimeStep } = useSelector(
+const TotalConsumption = ({ fluidType }: { fluidType: FluidType }) => {
+ const { currentTimeStep, showCompare, currentDatachart } = useSelector(
(state: AppStore) => state.ecolyo.chart
)
const client = useClient()
const [totalValue, setTotalValue] = useState<string>()
+ const [previousTotalValue, setPreviousTotalValue] = useState<string>()
- useEffect(() => {
- const calculateTotalValue = async () => {
+ const computeTotal = useCallback(
+ async (
+ dataload: Dataload[],
+ setState: React.Dispatch<React.SetStateAction<string | undefined>>
+ ) => {
const consumptionService = new ConsumptionService(client)
const activateHalfHourLoad =
fluidType === FluidType.ELECTRICITY
@@ -42,7 +38,7 @@ const TotalConsumption: React.FC<TotalConsumptionProps> = ({
let total = 0
let totalPrice = 0
- actualData.forEach(data => {
+ dataload.forEach(data => {
if (data.value !== -1) {
total += data.value
totalPrice += converterService.LoadToEuro(
@@ -71,19 +67,31 @@ const TotalConsumption: React.FC<TotalConsumptionProps> = ({
displayedValue = formatNumberValues(totalPrice).toString()
}
- setTotalValue(displayedValue)
- }
+ setState(displayedValue)
+ },
+ [client, currentTimeStep, fluidType]
+ )
- calculateTotalValue()
- }, [actualData, fluidType, currentTimeStep, client])
+ useEffect(() => {
+ computeTotal(currentDatachart.actualData, setTotalValue)
+ if (currentDatachart.comparisonData) {
+ computeTotal(currentDatachart.comparisonData, setPreviousTotalValue)
+ }
+ }, [currentDatachart, fluidType, currentTimeStep, client, computeTotal])
return (
<div className="icon-line">
- <StyledIcon className="pile-icon" icon={PileIcon} size={35} />
+ <StyledIcon className="pile-icon" icon={Coins} size={48} />
<div>
<span className="euro-value">{totalValue}</span>
<span className="euro-symbol"> €</span>
</div>
+ {showCompare && (
+ <div className="compare">
+ <span className="euro-value">{previousTotalValue}</span>
+ <span className="euro-symbol"> €</span>
+ </div>
+ )}
</div>
)
}
diff --git a/src/components/TotalConsumption/totalConsumption.scss b/src/components/TotalConsumption/totalConsumption.scss
index fd42bcf1354156b65cce2157c924c17aa03ff132..dd30f11ec133ebacc2b901b851dd2775d4fa79ea 100644
--- a/src/components/TotalConsumption/totalConsumption.scss
+++ b/src/components/TotalConsumption/totalConsumption.scss
@@ -1,8 +1,26 @@
+@import 'src/styles/base/color';
+
.icon-line {
display: flex;
+ align-items: flex-end;
+
+ svg {
+ transform: translate(0px, 4px);
+ }
+
+ .compare {
+ span {
+ color: $grey-dark;
+ font-size: 1.4rem;
+
+ &.euro-symbol {
+ font-size: 0.8rem;
+ }
+ }
+ }
.euro-value {
font-size: 2rem;
- font-weight: bold;
+ font-weight: 900;
color: white;
margin-left: 0.7rem;
margin-right: 0.3rem;
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 97df02600e7ea82424f2e1376113ea61c8e24b8e..f56626de4ce8f5deab0fbfced806a143605a04b6 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -321,7 +321,8 @@
"error_connect_water": "La connexion à vos données d'<span class='water'>eau</span> est actuellement dysfonctionnelle (Maintenance chez notre partenaire <span class='water'>Eau Publique du Grand Lyon</span> ou dans notre service)",
"additional_text": "La visualisation et/ou la connexion à vos données de consommation peut s'en trouver affectée.<br /><br /><i>Merci pour votre patience en attendant un retour à la normale :)</i>",
"ok": "Ok"
- }
+ },
+ "compared": "Comparé"
},
"consumption_details": {
"detail": "Détail par fluide",
@@ -1252,20 +1253,28 @@
},
"month": {
"period": "Année",
- "comparelabel": "Comparer à l'année précédente"
+ "comparelabel": "Comparer à l'année précédente",
+ "current": "année actuelle",
+ "last": "année précédente"
},
"day": {
"period": "Mois",
- "comparelabel": "Comparer au mois précédent"
+ "comparelabel": "Comparer au mois précédent",
+ "current": "mois actuel",
+ "last": "mois précédent"
},
"week": {
"period": "Semaine",
- "comparelabel": "Comparer à la semaine précédente"
+ "comparelabel": "Comparer à la semaine précédente",
+ "current": "semaine actuelle",
+ "last": "semaine précédente"
},
"half_an_hour": {
"period": "Jour",
"comparelabel": "Comparer à la journée précédente",
"gather_data_title": "La récupération de vos données demi-horaires prend environ 24h.",
+ "current": "jour actuel",
+ "last": "jour précédent",
"gather_data_subtitle": "Votre connexion a bien été prise en compte mais un délai de 24h est en général nécessaire à l’obtention de vos données.\nÀ demain !",
"analysis_waiting_data": "Pour bénéficier d'une analyse approfondie de votre consommation électrique, il nous faut récupérer vos données de consommation horaires. La récupération de ces données prend environ 24h. A\u00a0bientôt\u00a0!"
},
diff --git a/src/models/chart.model.ts b/src/models/chart.model.ts
index fc1d53fbc84a4befffbda2506cd4b34233a7a499..89ff47a09cfa1cb9ed01bd2ea4660b93ac293931 100644
--- a/src/models/chart.model.ts
+++ b/src/models/chart.model.ts
@@ -3,10 +3,11 @@ import { DateTime } from 'luxon'
import { Datachart } from 'models'
export interface ChartState {
- selectedDate: DateTime
- currentTimeStep: TimeStep
- currentIndex: number
currentDatachart: Datachart
currentDatachartIndex: number
+ currentIndex: number
+ currentTimeStep: TimeStep
loading: boolean
+ selectedDate: DateTime
+ showCompare: boolean
}
diff --git a/src/store/chart/chart.slice.spec.ts b/src/store/chart/chart.slice.spec.ts
index fbee57efd23523e4b87857356f8dfc07bb0f2daa..3ba132b8fe6079632a119cef691784208f8dd784 100644
--- a/src/store/chart/chart.slice.spec.ts
+++ b/src/store/chart/chart.slice.spec.ts
@@ -10,6 +10,7 @@ import {
setCurrentTimeStep,
setLoading,
setSelectedDate,
+ setShowCompare,
} from './chart.slice'
describe('chart reducer', () => {
@@ -50,6 +51,17 @@ describe('chart reducer', () => {
currentTimeStep: TimeStep.MONTH,
})
})
+ it('should disable showCompare if timestep is year', () => {
+ const state = chartSlice.reducer(
+ { ...mockInitialChartState, showCompare: true },
+ setCurrentTimeStep(TimeStep.YEAR)
+ )
+ expect(state).toEqual({
+ ...mockInitialChartState,
+ showCompare: false,
+ currentTimeStep: TimeStep.YEAR,
+ })
+ })
})
describe('setCurrentIndex', () => {
@@ -100,4 +112,17 @@ describe('chart reducer', () => {
})
})
})
+
+ describe('setShowCompare', () => {
+ it('should handle setShowCompare', () => {
+ const state = chartSlice.reducer(
+ mockInitialChartState,
+ setShowCompare(true)
+ )
+ expect(state).toEqual({
+ ...mockInitialChartState,
+ showCompare: true,
+ })
+ })
+ })
})
diff --git a/src/store/chart/chart.slice.ts b/src/store/chart/chart.slice.ts
index ad1041a5e409d9f2451c46abf2e720410ee0b1d5..9ebb8a25bf62866fa11dd642ea36cdde1edb6601 100644
--- a/src/store/chart/chart.slice.ts
+++ b/src/store/chart/chart.slice.ts
@@ -9,6 +9,7 @@ type SetCurrentIndex = PayloadAction<number>
type SetCurrentTimeStep = PayloadAction<TimeStep>
type SetLoading = PayloadAction<boolean>
type SetSelectedDate = PayloadAction<DateTime>
+type SetShowCompare = PayloadAction<boolean>
export type ChartActionTypes =
| SetCurrentDataChart
@@ -17,6 +18,7 @@ export type ChartActionTypes =
| SetCurrentTimeStep
| SetLoading
| SetSelectedDate
+ | SetShowCompare
const initialState: ChartState = {
selectedDate: DateTime.local().endOf('minute').setZone('utc', {
@@ -27,6 +29,7 @@ const initialState: ChartState = {
currentDatachart: { actualData: [], comparisonData: null },
currentDatachartIndex: 0,
loading: true,
+ showCompare: false,
}
export const chartSlice = createSlice({
@@ -44,6 +47,9 @@ export const chartSlice = createSlice({
},
setCurrentTimeStep: (state, action: SetCurrentTimeStep) => {
state.currentTimeStep = action.payload
+ if (state.currentTimeStep === TimeStep.YEAR) {
+ state.showCompare = false
+ }
},
setLoading: (state, action: SetLoading) => {
state.loading = action.payload
@@ -51,6 +57,9 @@ export const chartSlice = createSlice({
setSelectedDate: (state, action: SetSelectedDate) => {
state.selectedDate = action.payload
},
+ setShowCompare: (state, action: SetShowCompare) => {
+ state.showCompare = action.payload
+ },
},
})
@@ -61,4 +70,5 @@ export const {
setCurrentTimeStep,
setLoading,
setSelectedDate,
+ setShowCompare,
} = chartSlice.actions
diff --git a/src/utils/date.spec.ts b/src/utils/date.spec.ts
index 0ce85152d330c353f1319a45a3f1a86b11099d40..b7c8df6688741ca6df46cc7f6aadd9e11de7ec75 100644
--- a/src/utils/date.spec.ts
+++ b/src/utils/date.spec.ts
@@ -348,7 +348,7 @@ describe('date utils', () => {
expect(result).toBe(3)
})
- it('it should return 3 when there are many fuild type including WATER', () => {
+ it('it should return 3 when there are many fluid type including WATER', () => {
const result = getLagDays([FluidType.ELECTRICITY, FluidType.WATER])
expect(result).toBe(3)
})
@@ -383,27 +383,22 @@ describe('date utils', () => {
actualData,
TimeStep.HALF_AN_HOUR
)
- expect(result).toBe('jeudi 01 octobre')
+ expect(result).toBe('bilan du jeudi 01 octobre')
})
it('case WEEK', () => {
const result = convertDateToShortDateString(actualData, TimeStep.WEEK)
- expect(result).toBe('du 01/10 au 03/10')
+ expect(result).toBe('bilan du 01/10 au 03/10')
})
it('case DAY', () => {
const result = convertDateToShortDateString(actualData, TimeStep.DAY)
- expect(result).toBe('octobre 2020')
+ expect(result).toBe('bilan d’octobre')
})
it('case MONTH', () => {
const result = convertDateToShortDateString(actualData, TimeStep.MONTH)
- expect(result).toBe('année 2020')
- })
-
- it('case YEAR', () => {
- const result = convertDateToShortDateString(actualData, TimeStep.YEAR)
- expect(result).toBe('de 2020 à 2020')
+ expect(result).toBe('bilan de l’année 2020')
})
})
})
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 06eb684e8cda10b88af807fc40287068ef99cc16..60374d002e0b652c8c92683f8685a2a78828b188 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -2,6 +2,7 @@ import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import { DateTime } from 'luxon'
import { Dataload } from 'models'
+import { getMonthNameWithPrep } from './utils'
export function compareDates(dateA: DateTime, dateB: DateTime) {
return dateA < dateB ? -1 : 1
@@ -104,27 +105,22 @@ export const convertDateToShortDateString = (
timeStep: TimeStep
): string => {
if (!actualData || actualData.length === 0) return ''
+ const date = actualData[0].date
switch (timeStep) {
case TimeStep.HALF_AN_HOUR:
- return actualData[0].date.setLocale('fr').toFormat('cccc dd LLLL')
- case TimeStep.WEEK:
- return (
- 'du ' +
- actualData[0].date.toFormat('dd/MM') +
- ' au ' +
- actualData[actualData.length - 1].date.toFormat('dd/MM')
- )
+ return `bilan du ${date.setLocale('fr').toFormat('cccc dd LLLL')}`
case TimeStep.DAY:
- return actualData[0].date.setLocale('fr').toFormat('LLLL yyyy')
+ return `bilan ${getMonthNameWithPrep(date)}`
+ case TimeStep.WEEK:
+ return `bilan du ${date.toFormat('dd/MM')} au ${actualData[
+ actualData.length - 1
+ ].date.toFormat('dd/MM')}`
case TimeStep.MONTH:
- return 'année ' + actualData[0].date.toFormat('y')
+ return `bilan de l’année ${date.toFormat('y')}`
case TimeStep.YEAR:
- return (
- 'de ' +
- actualData[0].date.toFormat('y') +
- ' à ' +
- actualData[actualData.length - 1].date.toFormat('y')
- )
+ return `de ${date.toFormat('y')} à ${actualData[
+ actualData.length - 1
+ ].date.toFormat('y')}`
default:
return ''
}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index aa81be0849f4563a172b3a56d97fe81ae29b36b0..773eb7d0a01efaf3309346b2b428eeb03a4e25b7 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -162,13 +162,13 @@ export const getMonthNameWithPrep = (date: DateTime) => {
'de janvier',
'de février',
'de mars',
- `d'avril`,
+ `d’avril`,
'de mai',
'de juin',
'de juillet',
- `d'août`,
+ `d’août`,
'de septembre',
- `d'octobre`,
+ `d’octobre`,
'de novembre',
'de décembre',
] as const
diff --git a/tests/__mocks__/store.ts b/tests/__mocks__/store.ts
index ce4757c75bd9e136dcd653ca5d51f8e69ec3dccb..4185f3f78678b9bdff5fc06fb54c18d8cb4389e1 100644
--- a/tests/__mocks__/store.ts
+++ b/tests/__mocks__/store.ts
@@ -278,6 +278,7 @@ export const mockInitialChartState: ChartState = {
currentDatachart: { actualData: [], comparisonData: null },
currentDatachartIndex: 0,
loading: true,
+ showCompare: false,
}
export const mockInitialModalState: ModalState = {