diff --git a/assets/icons.json b/assets/icons.json index 8812e206..4ea1806e 100644 --- a/assets/icons.json +++ b/assets/icons.json @@ -197,8 +197,13 @@ "l2beat": "M3.50521 3.54966C6.19251 1.25356 9.65297 1.67202 11.9929 3.71691C14.3301 1.67124 17.7537 1.28246 20.4709 3.54089C23.4445 6.01238 23.8016 10.2274 21.5118 13.1739C20.7167 14.197 19.2374 15.6826 17.7545 17.0967C16.255 18.5267 14.6963 19.9356 13.7042 20.8209L13.6822 20.8405C13.5197 20.9856 13.3571 21.1307 13.2072 21.2444C13.0387 21.3721 12.8318 21.5036 12.5679 21.5828C12.1958 21.6944 11.7907 21.6944 11.4186 21.5828C11.1547 21.5036 10.9478 21.3721 10.7793 21.2444C10.6294 21.1307 10.4669 20.9857 10.3043 20.8405L10.2823 20.8209C9.29019 19.9356 7.73154 18.5267 6.23203 17.0967C4.74915 15.6826 3.26977 14.197 2.47471 13.1739C0.176093 10.216 0.598423 6.03328 3.50521 3.54966ZM11.9488 8.18372C11.8209 7.80002 11.4744 7.53114 11.071 7.50247C10.6675 7.4738 10.2866 7.69098 10.1057 8.05274L8.88209 10.4999H8.50012C7.94784 10.4999 7.50012 10.9476 7.50012 11.4999C7.50012 12.0522 7.94784 12.4999 8.50012 12.4999H9.50012C9.87889 12.4999 10.2251 12.2859 10.3945 11.9471L10.8149 11.1065L12.0514 14.8161C12.1793 15.1998 12.5258 15.4687 12.9292 15.4974C13.3327 15.5261 13.7136 15.3089 13.8945 14.9471L15.1181 12.4999H15.5001C16.0524 12.4999 16.5001 12.0522 16.5001 11.4999C16.5001 10.9476 16.0524 10.4999 15.5001 10.4999H14.5001C14.1213 10.4999 13.7751 10.7139 13.6057 11.0527L13.1853 11.8934L11.9488 8.18372Z", "blockscout": "M 10.078125 3.554688 C 10.078125 3.066406 9.6875 2.667969 9.207031 2.667969 L 7.148438 2.667969 C 6.667969 2.667969 6.277344 3.066406 6.277344 3.554688 L 6.277344 5.660156 C 6.277344 6.152344 5.890625 6.550781 5.410156 6.550781 L 3.476562 6.550781 C 2.996094 6.550781 2.609375 6.949219 2.609375 7.441406 L 2.609375 20.421875 C 2.609375 20.914062 2.996094 21.3125 3.476562 21.3125 L 5.539062 21.3125 C 6.019531 21.3125 6.410156 20.914062 6.410156 20.421875 L 6.410156 7.441406 C 6.410156 6.949219 6.796875 6.550781 7.277344 6.550781 L 9.207031 6.550781 C 9.6875 6.550781 10.078125 6.152344 10.078125 5.660156 Z M 17.679688 3.554688 C 17.679688 3.066406 17.289062 2.667969 16.808594 2.667969 L 14.746094 2.667969 C 14.265625 2.667969 13.878906 3.066406 13.878906 3.554688 L 13.878906 5.660156 C 13.878906 6.152344 14.265625 6.550781 14.746094 6.550781 L 16.679688 6.550781 C 17.160156 6.550781 17.546875 6.949219 17.546875 7.441406 L 17.546875 20.421875 C 17.546875 20.914062 17.9375 21.3125 18.417969 21.3125 L 20.476562 21.3125 C 20.957031 21.3125 21.347656 20.914062 21.347656 20.421875 L 21.347656 7.441406 C 21.347656 6.949219 20.957031 6.550781 20.476562 6.550781 L 18.546875 6.550781 C 18.066406 6.550781 17.679688 6.152344 17.679688 5.660156 Z M 13.878906 10.992188 C 13.878906 10.5 13.488281 10.101562 13.007812 10.101562 L 10.949219 10.101562 C 10.46875 10.101562 10.078125 10.5 10.078125 10.992188 L 10.078125 16.761719 C 10.078125 17.25 10.46875 17.648438 10.949219 17.648438 L 13.007812 17.648438 C 13.488281 17.648438 13.878906 17.25 13.878906 16.761719 Z M 13.878906 10.992188", "lama": "M16.361 10.26a.9.9 0 0 0-.558.47l-.072.148l.001.207c0 .193.004.217.059.353c.076.193.152.312.291.448c.24.238.51.3.872.205a.86.86 0 0 0 .517-.436a.75.75 0 0 0 .08-.498c-.064-.453-.33-.782-.724-.897a1.1 1.1 0 0 0-.466 0m-9.203.005c-.305.096-.533.32-.65.639a1.2 1.2 0 0 0-.06.52c.057.309.31.59.598.667c.362.095.632.033.872-.205c.14-.136.215-.255.291-.448c.055-.136.059-.16.059-.353l.001-.207l-.072-.148a.9.9 0 0 0-.565-.472a1 1 0 0 0-.474.007m4.184 2c-.131.071-.223.25-.195.383c.031.143.157.288.353.407c.105.063.112.072.117.136c.004.038-.01.146-.029.243c-.02.094-.036.194-.036.222c.002.074.07.195.143.253c.064.052.076.054.255.059c.164.005.198.001.264-.03c.169-.082.212-.234.15-.525c-.052-.243-.042-.28.087-.355c.137-.08.281-.219.324-.314a.365.365 0 0 0-.175-.48a.4.4 0 0 0-.181-.033c-.126 0-.207.03-.355.124l-.085.053l-.053-.032c-.219-.13-.259-.145-.391-.143a.4.4 0 0 0-.193.032m.39-2.195c-.373.036-.475.05-.654.086a4.5 4.5 0 0 0-.951.328c-.94.46-1.589 1.226-1.787 2.114c-.04.176-.045.234-.045.53c0 .294.005.357.043.524c.264 1.16 1.332 2.017 2.714 2.173c.3.033 1.596.033 1.896 0c1.11-.125 2.064-.727 2.493-1.571c.114-.226.169-.372.22-.602c.039-.167.044-.23.044-.523c0-.297-.005-.355-.045-.531c-.288-1.29-1.539-2.304-3.072-2.497a7 7 0 0 0-.855-.031zm.645.937a3.3 3.3 0 0 1 1.44.514c.223.148.537.458.671.662c.166.251.26.508.303.82c.02.143.01.251-.043.482c-.08.345-.332.705-.672.957a3 3 0 0 1-.689.348c-.382.122-.632.144-1.525.138c-.582-.006-.686-.01-.853-.042q-.856-.16-1.35-.68c-.264-.28-.385-.535-.45-.946c-.03-.192.025-.509.137-.776c.136-.326.488-.73.836-.963c.403-.269.934-.46 1.422-.512c.187-.02.586-.02.773-.002m-5.503-11a1.65 1.65 0 0 0-.683.298C5.617.74 5.173 1.666 4.985 2.819c-.07.436-.119 1.04-.119 1.503c0 .544.064 1.24.155 1.721c.02.107.031.202.023.208l-.187.152a5.3 5.3 0 0 0-.949 1.02a5.5 5.5 0 0 0-.94 2.339a6.6 6.6 0 0 0-.023 1.357c.091.78.325 1.438.727 2.04l.13.195l-.037.064c-.269.452-.498 1.105-.605 1.732c-.084.496-.095.629-.095 1.294c0 .67.009.803.088 1.266c.095.555.288 1.143.503 1.534c.071.128.243.393.264.407c.007.003-.014.067-.046.141a7.4 7.4 0 0 0-.548 1.873a5 5 0 0 0-.071.991c0 .56.031.832.148 1.279L3.42 24h1.478l-.05-.091c-.297-.552-.325-1.575-.068-2.597c.117-.472.25-.819.498-1.296l.148-.29v-.177c0-.165-.003-.184-.057-.293a.9.9 0 0 0-.194-.25a1.7 1.7 0 0 1-.385-.543c-.424-.92-.506-2.286-.208-3.451c.124-.486.329-.918.544-1.154a.8.8 0 0 0 .223-.531c0-.195-.07-.355-.224-.522a3.14 3.14 0 0 1-.817-1.729c-.14-.96.114-2.005.69-2.834c.563-.814 1.353-1.336 2.237-1.475c.199-.033.57-.028.776.01c.226.04.367.028.512-.041c.179-.085.268-.19.374-.431c.093-.215.165-.333.36-.576c.234-.29.46-.489.822-.729c.413-.27.884-.467 1.352-.561c.17-.035.25-.04.569-.04s.398.005.569.04a4.07 4.07 0 0 1 1.914.997c.117.109.398.457.488.602c.034.057.095.177.132.267c.105.241.195.346.374.43c.14.068.286.082.503.045c.343-.058.607-.053.943.016c1.144.23 2.14 1.173 2.581 2.437c.385 1.108.276 2.267-.296 3.153c-.097.15-.193.27-.333.419c-.301.322-.301.722-.001 1.053c.493.539.801 1.866.708 3.036c-.062.772-.26 1.463-.533 1.854a2 2 0 0 1-.224.258a.9.9 0 0 0-.194.25c-.054.109-.057.128-.057.293v.178l.148.29c.248.476.38.823.498 1.295c.253 1.008.231 2.01-.059 2.581a1 1 0 0 0-.044.098c0 .006.329.009.732.009h.73l.02-.074l.036-.134c.019-.076.057-.3.088-.516a9 9 0 0 0 0-1.258c-.11-.875-.295-1.57-.597-2.226c-.032-.074-.053-.138-.046-.141a1.4 1.4 0 0 0 .108-.152c.376-.569.607-1.284.724-2.228c.031-.26.031-1.378 0-1.628c-.083-.645-.182-1.082-.348-1.525a6 6 0 0 0-.329-.7l-.038-.064l.131-.194c.402-.604.636-1.262.727-2.04a6.6 6.6 0 0 0-.024-1.358a5.5 5.5 0 0 0-.939-2.339a5.3 5.3 0 0 0-.95-1.02l-.186-.152a.7.7 0 0 1 .023-.208c.208-1.087.201-2.443-.017-3.503c-.19-.924-.535-1.658-.98-2.082c-.354-.338-.716-.482-1.15-.455c-.996.059-1.8 1.205-2.116 3.01a7 7 0 0 0-.097.726c0 .036-.007.066-.015.066a1 1 0 0 1-.149-.078A4.86 4.86 0 0 0 12 3.03c-.832 0-1.687.243-2.456.698a1 1 0 0 1-.148.078c-.008 0-.015-.03-.015-.066a7 7 0 0 0-.097-.725C8.997 1.392 8.337.319 7.46.048a2 2 0 0 0-.585-.041Zm.293 1.402c.248.197.523.759.682 1.388c.03.113.06.244.069.292c.007.047.026.152.041.233c.067.365.098.76.102 1.24l.002.475l-.12.175l-.118.178h-.278c-.324 0-.646.041-.954.124l-.238.06c-.033.007-.038-.003-.057-.144a8.4 8.4 0 0 1 .016-2.323c.124-.788.413-1.501.696-1.711c.067-.05.079-.049.157.013m9.825-.012c.17.126.358.46.498.888c.28.854.36 2.028.212 3.145c-.019.14-.024.151-.057.144l-.238-.06a3.7 3.7 0 0 0-.954-.124h-.278l-.119-.178l-.119-.175l.002-.474c.004-.669.066-1.19.214-1.772c.157-.623.434-1.185.68-1.382c.078-.062.09-.063.159-.012", + "celestials": "M 8 24 C 7.660156 24 7.382812 23.730469 7.382812 23.398438 L 7.382812 22.199219 C 7.382812 21.867188 7.660156 21.601562 8 21.601562 L 12.308594 21.601562 L 12.308594 23.398438 C 12.308594 23.730469 12.03125 24 11.691406 24 Z M 12.308594 21.601562 L 12.308594 19.199219 L 8 19.199219 C 7.660156 19.199219 7.382812 18.929688 7.382812 18.601562 L 7.382812 16.800781 L 5.539062 16.800781 C 5.199219 16.800781 4.921875 16.53125 4.921875 16.199219 L 4.921875 14.398438 L 3.078125 14.398438 C 2.738281 14.398438 2.460938 14.132812 2.460938 13.800781 L 2.460938 12 L 0.617188 12 C 0.273438 12 0 11.730469 0 11.398438 L 0 7.800781 C 0 7.46875 0.273438 7.199219 0.617188 7.199219 L 2.460938 7.199219 L 2.460938 5.398438 C 2.460938 5.070312 2.738281 4.800781 3.078125 4.800781 L 4.921875 4.800781 L 4.921875 3 C 4.921875 2.667969 5.199219 2.398438 5.539062 2.398438 L 7.382812 2.398438 L 7.382812 0.601562 C 7.382812 0.269531 7.660156 0 8 0 L 11.691406 0 C 12.03125 0 12.308594 0.269531 12.308594 0.601562 L 12.308594 1.800781 C 12.308594 2.132812 12.03125 2.398438 11.691406 2.398438 L 7.382812 2.398438 L 7.382812 4.800781 L 11.691406 4.800781 C 12.03125 4.800781 12.308594 5.070312 12.308594 5.398438 L 12.308594 7.199219 L 14.152344 7.199219 C 14.492188 7.199219 14.769531 7.46875 14.769531 7.800781 L 14.769531 9.601562 L 16.617188 9.601562 C 16.957031 9.601562 17.230469 9.867188 17.230469 10.199219 L 17.230469 12 L 19.078125 12 C 19.417969 12 19.691406 12.269531 19.691406 12.601562 L 19.691406 16.199219 C 19.691406 16.53125 19.417969 16.800781 19.078125 16.800781 L 17.230469 16.800781 L 17.230469 12 L 15.382812 12 C 15.042969 12 14.769531 11.730469 14.769531 11.398438 L 14.769531 9.601562 L 12.921875 9.601562 C 12.582031 9.601562 12.308594 9.332031 12.308594 9 L 12.308594 7.199219 L 7.382812 7.199219 L 7.382812 4.800781 L 4.921875 4.800781 L 4.921875 7.199219 L 2.460938 7.199219 L 2.460938 12 L 4.308594 12 C 4.648438 12 4.921875 12.269531 4.921875 12.601562 L 4.921875 14.398438 L 6.769531 14.398438 C 7.109375 14.398438 7.382812 14.667969 7.382812 15 L 7.382812 16.800781 L 12.308594 16.800781 L 12.308594 19.199219 L 14.769531 19.199219 L 14.769531 21 C 14.769531 21.332031 14.492188 21.601562 14.152344 21.601562 Z M 12.308594 16.800781 L 12.308594 15 C 12.308594 14.667969 12.582031 14.398438 12.921875 14.398438 L 14.152344 14.398438 C 14.492188 14.398438 14.769531 14.667969 14.769531 15 L 14.769531 16.800781 Z M 17.230469 18.601562 C 17.230469 18.929688 16.957031 19.199219 16.617188 19.199219 L 14.769531 19.199219 L 14.769531 16.800781 L 17.230469 16.800781 Z M 4.921875 7.199219 L 7.382812 7.199219 L 7.382812 9 C 7.382812 9.332031 7.109375 9.601562 6.769531 9.601562 L 5.539062 9.601562 C 5.199219 9.601562 4.921875 9.332031 4.921875 9 Z M 11.078125 12.601562 C 11.078125 12.929688 10.800781 13.199219 10.460938 13.199219 L 9.230469 13.199219 C 8.890625 13.199219 8.617188 12.929688 8.617188 12.601562 L 8.617188 11.398438 C 8.617188 11.070312 8.890625 10.800781 9.230469 10.800781 L 10.460938 10.800781 C 10.800781 10.800781 11.078125 11.070312 11.078125 11.398438 Z M 11.078125 12.601562", "line-chart": "M3.5,18.5L9.5,12.5L13.5,16.5L22,6.92L20.59,5.5L13.5,13.5L9.5,9.5L2,17L3.5,18.5Z", "bar-chart": "M3,22V8H7V22H3M10,22V2H14V22H10M17,22V14H21V22H17Z", "gantt-chart": "M2,5H10V2H12V22H10V18H6V15H10V13H4V10H10V8H2V5M14,5H17V8H14V5M14,10H19V13H14V10M14,15H22V18H14V15Z", - "crown": "M5 16L3 5L8.5 10L12 4L15.5 10L21 5L19 16H5M19 19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V18H19V19Z" + "crown": "M5 16L3 5L8.5 10L12 4L15.5 10L21 5L19 16H5M19 19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V18H19V19Z", + "earth": "M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z", + "city": "M15,23H13V21H15V23M19,21H17V23H19V21M15,17H13V19H15V17M7,21H5V23H7V21M7,17H5V19H7V17M19,17H17V19H19V17M15,13H13V15H15V13M19,13H17V15H19V13M21,9A2,2 0 0,1 23,11V23H21V11H11V23H9V15H3V23H1V15A2,2 0 0,1 3,13H9V11A2,2 0 0,1 11,9V7A2,2 0 0,1 13,5H15V1H17V5H19A2,2 0 0,1 21,7V9M19,9V7H13V9H19Z", + "drop": "M12 18C12 18.7 12.12 19.36 12.34 20C12.23 20 12.12 20 12 20C8.69 20 6 17.31 6 14C6 10 12 3.25 12 3.25S16.31 8.1 17.62 12C16.93 12.06 16.28 12.22 15.67 12.47C15 10.68 13.5 8.33 12 6.39C10 8.96 8 12.23 8 14C8 16.21 9.79 18 12 18M19 17V14H17V17H14V19H17V22H19V19H22V17H19Z", + "faucet": "M21 21H3C3 19.9 3.9 19 5 19H19C20.11 19 21 19.89 21 21M19 7C19 5.39 17.93 3 15 3S11 5.39 11 7V18H13V7C13 6.54 13.17 5 15 5S17 6.54 17 7H16.5V9H19.5V7H19M7 12C6.45 12 6 12.45 6 13V14H3V15H6V18H8V13C8 12.45 7.55 12 7 12M21 14H18V13C18 12.45 17.55 12 17 12S16 12.45 16 13V18H18V15H21V14Z" } diff --git a/assets/styles/base.scss b/assets/styles/base.scss index 8151e013..4c4a465a 100644 --- a/assets/styles/base.scss +++ b/assets/styles/base.scss @@ -78,6 +78,7 @@ $grayscale: ( // --supply: #65c7f8; --supply: #1ca7ed; --staking: #85f891; + --geo-map: #8B8C8D; } [theme="dimmed"] { @@ -139,6 +140,7 @@ $grayscale: ( --block-progress-fill-background: #33a853; --logo-name: var(--txt-primary); --bar-fill: rgb(243, 147, 45); + --geo-map: #8B8C8D; } [theme="light"] { @@ -200,6 +202,7 @@ $grayscale: ( --block-progress-fill-background: #33a853; --logo-name: var(--txt-primary); --bar-fill: rgb(243, 147, 45); + --geo-map: #8B8C8D; } @font-face { diff --git a/components/DatePicker.vue b/components/DatePicker.vue index 5c45c4bb..19d08a54 100644 --- a/components/DatePicker.vue +++ b/components/DatePicker.vue @@ -19,15 +19,15 @@ const props = defineProps({ }, from: { type: [String, Number], - default: '', + default: "", }, to: { type: [String, Number], - default: '', + default: "", }, minDate: { type: String, - default: '', + default: "", }, showTitle: { type: Boolean, @@ -40,53 +40,53 @@ const emit = defineEmits(["onUpdate"]) const popoverStyles = computed(() => { if (!isMobile()) { return { - width: '380', - side: 'left', - direction: 'row', + width: "380", + side: "left", + direction: "row", calendar: { - width: '65%', - paddingLeft: '12px', - borderLeftWidth: '1px', - borderLeftStyle: 'solid', - borderImage: 'linear-gradient(to bottom, transparent 0%, var(--op-10) 20%, var(--op-10) 80%, transparent 100%) 1' - } + width: "65%", + paddingLeft: "12px", + borderLeftWidth: "1px", + borderLeftStyle: "solid", + borderImage: "linear-gradient(to bottom, transparent 0%, var(--op-10) 20%, var(--op-10) 80%, transparent 100%) 1", + }, } } else { return { - width: '250', - side: 'right', - direction: 'column', + width: "250", + side: "right", + direction: "column", calendar: { - width: '100%', - paddingTop: '12px', - borderTopWidth: '1px', - borderTopStyle: 'solid', - borderImage: 'linear-gradient(to right, transparent 0%, var(--op-10) 5%, var(--op-10) 95%, transparent 100%) 1' - } + width: "100%", + paddingTop: "12px", + borderTopWidth: "1px", + borderTopStyle: "solid", + borderImage: "linear-gradient(to right, transparent 0%, var(--op-10) 5%, var(--op-10) 95%, transparent 100%) 1", + }, } } }) const currentDate = ref(DateTime.now()) -const limitMinDate = ref(props.minDate ? DateTime.fromISO(props.minDate) : '') +const limitMinDate = ref(props.minDate ? DateTime.fromISO(props.minDate) : "") const month = ref(currentDate.value.month) const year = ref(currentDate.value.year) -const startDate = ref(props.from ? DateTime.fromSeconds(parseInt(props.from)).startOf('day') : {}) -const endDate = ref(props.to ? DateTime.fromSeconds(parseInt(props.to)).endOf('day') : {}) -const weekdays = ref(Info.weekdays('narrow', { locale: 'en-US' })) +const startDate = ref(props.from ? DateTime.fromSeconds(parseInt(props.from)).startOf("day") : {}) +const endDate = ref(props.to ? DateTime.fromSeconds(parseInt(props.to)).endOf("day") : {}) +const weekdays = ref(Info.weekdays("narrow", { locale: "en-US" })) const days = computed(() => { let rawDays = [] - const firstDay = DateTime.local(year.value, month.value).setLocale('en-US') - const lastDay = firstDay.endOf('month') + const firstDay = DateTime.local(year.value, month.value).setLocale("en-US") + const lastDay = firstDay.endOf("month") for (let day = firstDay; day <= lastDay; day = day.plus({ days: 1 })) { - rawDays.push(day) - } + rawDays.push(day) + } if (firstDay.weekday !== 1) { let prevDay = firstDay while (prevDay.weekday !== 1) { - prevDay = prevDay.minus({ days: 1 }).startOf('day') + prevDay = prevDay.minus({ days: 1 }).startOf("day") rawDays.unshift(prevDay) } } @@ -94,7 +94,7 @@ const days = computed(() => { if (lastDay.weekday !== 7) { let nextDay = lastDay while (nextDay.weekday !== 7) { - nextDay = nextDay.plus({ days: 1 }).startOf('day') + nextDay = nextDay.plus({ days: 1 }).startOf("day") rawDays.push(nextDay) } } @@ -109,32 +109,37 @@ const days = computed(() => { const periods = ref(STATS_PERIODS) const selectedPeriod = ref(props.period.value ? props.period : {}) -const selectedRange = ref('') +const selectedRange = ref("") const updateSelectedRange = (from, to) => { if (from?.ts) { if (to?.ts) { if (from.year === to.year) { - selectedRange.value = from.toFormat('dd LLL') !== to.toFormat('dd LLL') ? `${from.toFormat('dd LLL')} - ${to.toFormat('dd LLL')}` : from.toFormat('dd LLL') + selectedRange.value = + from.toFormat("dd LLL") !== to.toFormat("dd LLL") + ? `${from.toFormat("dd LLL")} - ${to.toFormat("dd LLL")}` + : from.toFormat("dd LLL") } else { - selectedRange.value = `${from.toFormat('dd LLL yyyy')} - ${to.toFormat('dd LLL yyyy')}` + selectedRange.value = `${from.toFormat("dd LLL yyyy")} - ${to.toFormat("dd LLL yyyy")}` } + month.value = to.c.month + year.value = to.c.year } else { - selectedRange.value = from.toFormat('dd LLL') + selectedRange.value = from.toFormat("dd LLL") } } else { - selectedRange.value = '' + selectedRange.value = "" } } updateSelectedRange(startDate.value, endDate.value) -const isNextMonthAvailable = true // computed(() => !(month.value === currentDate.value.month && year.value === currentDate.value.year)) -const isPrevMonthAvailable = true // computed(() => limitMinDate.value ? limitMinDate.value.ts < days.value[0][0].ts : true) +const isNextMonthAvailable = true +const isPrevMonthAvailable = true const isDayAvailable = (d) => { - if (d.startOf('day').ts > currentDate.value.startOf('day').ts) { + if (d.startOf("day").ts > currentDate.value.startOf("day").ts) { return false } else if (limitMinDate.value) { - return d.startOf('day').ts >= limitMinDate.value.startOf('day').ts + return d.startOf("day").ts >= limitMinDate.value.startOf("day").ts } else { return true } @@ -148,10 +153,14 @@ const handleSelectPeriod = (period) => { } else { selectedPeriod.value = period - startDate.value = DateTime.now().minus({ - days: period.timeframe === "day" ? period.value - 1 : 0, - }).startOf('day') - endDate.value = DateTime.now().endOf('day') + startDate.value = DateTime.now() + .minus({ + days: period.timeframe === "day" ? period.value - 1 : 0, + months: period.timeframe === "month" ? period.value : 0, + years: period.timeframe === "year" ? period.value : 0, + }) + .startOf("day") + endDate.value = DateTime.now().endOf("day") } } @@ -161,10 +170,10 @@ const handleSelectDate = (d) => { } else if (startDate.value.ts !== d.ts) { if (!endDate.value.ts) { if (startDate.value.ts > d.ts) { - endDate.value = startDate.value.endOf('day') + endDate.value = startDate.value.endOf("day") startDate.value = d } else { - endDate.value = d.endOf('day') + endDate.value = d.endOf("day") } } else { startDate.value = d @@ -174,7 +183,7 @@ const handleSelectDate = (d) => { if (!endDate.value.ts) { startDate.value = {} } else { - startDate.value = endDate.value.startOf('day') + startDate.value = endDate.value.startOf("day") endDate.value = {} } } @@ -183,11 +192,17 @@ const handleSelectDate = (d) => { } const isInSelectedPeriod = (d) => { - return startDate.value.ts < d.ts && d.endOf('day').ts < endDate.value.ts + return startDate.value.ts < d.ts && d.endOf("day").ts < endDate.value.ts } const isOpen = ref(false) const handleOpen = () => { + if (props.to) { + let to = DateTime.fromSeconds(parseInt(props.to)) + month.value = to.c.month + year.value = to.c.year + } + isOpen.value = true } const handleClose = () => { @@ -195,7 +210,7 @@ const handleClose = () => { if (!startDate.value.ts) { month.value = currentDate.value.month - year.value = currentDate.value.year + year.value = currentDate.value.year } } @@ -203,11 +218,14 @@ const handleApply = () => { isOpen.value = false if (!startDate.value?.ts) { - emit('onUpdate', { clear: true }) + emit("onUpdate", { clear: true }) } else { - endDate.value = endDate.value?.ts ? endDate.value?.endOf('day') : startDate.value?.endOf('day') + endDate.value = endDate.value?.ts ? endDate.value?.endOf("day") : startDate.value?.endOf("day") - emit('onUpdate', { from: parseInt(startDate.value.ts / 1_000), to: parseInt(endDate.value.ts / 1_000) }) + emit("onUpdate", { + from: parseInt(startDate.value.startOf("day").toSeconds()), + to: parseInt(endDate.value.endOf("day").toSeconds()), + }) } } @@ -218,18 +236,18 @@ const handleClear = () => { endDate.value = {} selectedPeriod.value = {} - emit('onUpdate', { clear: true }) + emit("onUpdate", { clear: true }) } const handleMonthChange = (v) => { switch (month.value + v) { case 0: month.value = 12 - year.value -- + year.value-- break case 13: month.value = 1 - year.value ++ + year.value++ break default: month.value += v @@ -243,7 +261,17 @@ const handleYearChange = (v) => { watch( () => props.from, () => { - updateSelectedRange(DateTime.fromSeconds(parseInt(props.from)), DateTime.fromSeconds(parseInt(props.to))) + startDate.value = props.from ? DateTime.fromSeconds(parseInt(props.from)).startOf("day") : {} + endDate.value = props.to ? DateTime.fromSeconds(parseInt(props.to)).endOf("day") : {} + updateSelectedRange(startDate.value, endDate.value) + }, +) + +watch( + () => props.to, + () => { + endDate.value = props.to ? DateTime.fromSeconds(parseInt(props.to)).endOf("day") : {} + updateSelectedRange(startDate.value, endDate.value) }, ) @@ -275,34 +303,49 @@ watch( - \ No newline at end of file + diff --git a/components/LeftSidebar.vue b/components/LeftSidebar.vue index cc34e8ce..b0f64344 100644 --- a/components/LeftSidebar.vue +++ b/components/LeftSidebar.vue @@ -10,7 +10,7 @@ import NavLink from "@/components/modules/navigation/NavLink.vue" /** Utils */ import { getNetworkName } from "@/services/utils/general" import { StatusMap } from "@/services/constants/node" -import { isMobile } from "@/services/utils" +import { isMainnet, isMobile } from "@/services/utils" /** Store */ import { useAppStore } from "~/store/app" @@ -52,16 +52,19 @@ const mainLinks = reactive([ name: "Active", path: "/validators?status=active&page=1", queryParam: {status: "active"}, + show: true, }, { name: "Jailed", path: "/validators?status=jailed&page=1", queryParam: {status: "jailed"}, + show: true, }, { name: "Inactive", path: "/validators?status=inactive&page=1", queryParam: {status: "inactive"}, + show: true, }, ], }, @@ -74,16 +77,25 @@ const mainLinks = reactive([ name: "General", path: "/stats?tab=general", queryParam: {tab: "general"}, + show: true, }, { name: "Blocks", path: "/stats?tab=blocks", queryParam: {tab: "blocks"}, + show: true, }, { name: "Rollups", path: "/stats?tab=rollups", queryParam: {tab: "rollups"}, + show: true, + }, + { + name: "Ecosystem", + path: "/stats?tab=ecosystem", + queryParam: {tab: "ecosystem"}, + show: isMainnet(), }, ], }, @@ -99,11 +111,13 @@ const modularLinks = reactive([ { name: "Cost Savings", path: "/calculators/savings", + show: true, }, { name: "Register rollup", path: "https://forms.gle/nimJyQJG4Lb4BTcG7", external: true, + show: true, }, ], }, @@ -115,6 +129,7 @@ const modularLinks = reactive([ { name: "Treemap View", path: "/namespaces/treemap", + show: true, }, ], }, @@ -127,6 +142,11 @@ const modularLinks = reactive([ const isToolsLinkCollapsed = ref(false) const toolsLinks = reactive([ + { + icon: "drop", + name: "Faucet", + path: "/faucet", + }, { icon: "blob", name: "Blobstream", @@ -164,6 +184,10 @@ const newLinks = reactive([ const handleNavigate = (url) => { window.location.replace(url) } + +const handleOnClose = () => { + appStore.showSidebar = false +} - \ No newline at end of file + diff --git a/components/modules/stats/BarplotChartCard.vue b/components/modules/stats/BarplotChartCard.vue new file mode 100644 index 00000000..7da2f42b --- /dev/null +++ b/components/modules/stats/BarplotChartCard.vue @@ -0,0 +1,290 @@ + + + + + diff --git a/components/modules/stats/ChartCardPreview.vue b/components/modules/stats/ChartCardPreview.vue index 1d9ac999..70eb6957 100644 --- a/components/modules/stats/ChartCardPreview.vue +++ b/components/modules/stats/ChartCardPreview.vue @@ -7,7 +7,7 @@ import { DateTime } from "luxon" import DiffChip from "@/components/modules/stats/DiffChip.vue" /** Services */ -import { abbreviate, comma, formatBytes, tia } from "@/services/utils" +import { abbreviate, comma, formatBytes, tia, truncateDecimalPart } from "@/services/utils" /** API */ import { fetchSeries, fetchSeriesCumulative, fetchTVS } from "@/services/api/stats" @@ -36,6 +36,11 @@ const diff = computed(() => { }) const chartEl = ref() const chartElPrev = ref() +const tooltipEl = ref() +const tooltip = ref({ + data: [], + show: false, +}) const getSeries = async () => { let data = [] @@ -59,7 +64,7 @@ const getSeries = async () => { period: 'day', from: parseInt( baseTime.minus({ - months: 2, + days: 60, }).ts / 1_000) }) } else if (props.series.name === "tvs") { @@ -77,8 +82,13 @@ const getSeries = async () => { })).reverse() } - prevData.value = data.slice(0, props.period.value).map((s) => ({ date: DateTime.fromISO(s.time).toJSDate(), value: parseFloat(s.value) })) - currentData.value = data.slice(props.period.value, data.length).map((s) => ({ date: DateTime.fromISO(s.time).toJSDate(), value: parseFloat(s.value) })) + if (props.series.aggregate === 'cumulative') { + prevData.value = data.slice(0, 30).map((s) => ({ date: DateTime.fromISO(s.time).toJSDate(), value: parseFloat(s.value) })) + currentData.value = data.slice(30, data.length).map((s) => ({ date: DateTime.fromISO(s.time).toJSDate(), value: parseFloat(s.value) })) + } else { + prevData.value = data.slice(0, props.period.value).map((s) => ({ date: DateTime.fromISO(s.time).toJSDate(), value: parseFloat(s.value) })) + currentData.value = data.slice(props.period.value, data.length).map((s) => ({ date: DateTime.fromISO(s.time).toJSDate(), value: parseFloat(s.value) })) + } if (props.series.name === 'block_time') { prevData.value = prevData.value @@ -98,8 +108,8 @@ const getSeries = async () => { } if (props.series.name === 'tvs') { - currentTotal.value = currentData.value[currentData.value.length - 1].value // Math.max(...currentData.value.map(d => d.value)) - prevTotal.value = prevData.value[prevData.value.length - 1].value // Math.max(...prevTotal.value.map(d => d.value)) + currentTotal.value = currentData.value[currentData.value.length - 1].value + prevTotal.value = prevData.value[prevData.value.length - 1].value } else if (props.series.aggregate !== 'cumulative') { currentTotal.value = currentData.value.reduce((sum, el) => { return sum + +el.value; @@ -118,12 +128,21 @@ const getSeries = async () => { currentTotal.value = currentTotal.value / currentData.value.length } + let pData = [] + prevData.value?.forEach((d, index) => { + pData.push({ + date: currentData.value[index]?.date, + realDate: d.date, + value: d.value, + }) + }) + prevData.value = pData + dataLoaded.value = true } const buildChart = (chart, data, color) => { - const width = chart.getBoundingClientRect().width - const height = chart.getBoundingClientRect().height + const { width, height } = chart.getBoundingClientRect() const marginTop = 8 const marginRight = 12 const marginBottom = 24 @@ -132,6 +151,33 @@ const buildChart = (chart, data, color) => { const MAX_VALUE = Math.max(Math.max(...prevData.value.map((s) => s.value)), Math.max(...currentData.value.map((s) => s.value))) const MIN_VALUE = Math.min(Math.min(...prevData.value.map((s) => s.value)), Math.min(...currentData.value.map((s) => s.value))) + function formatDate(date) { + if (props.period.timeframe === 'hour') { + return DateTime.fromJSDate(date).toFormat("LLL dd HH:mm") + } + + return DateTime.fromJSDate(date).toFormat("LLL dd") + } + + function formatValue(value) { + switch (props.series.units) { + case 'bytes': + return formatBytes(value) + case 'utia': + if (props.series.name === 'gas_price') { + return `${truncateDecimalPart(value, 4)} UTIA` + } + + return `${tia(value, 2)} TIA` + case 'seconds': + return `${truncateDecimalPart(value / 1_000, 3)}s` + case 'usd': + return `${abbreviate(value)} $` + default: + return comma(value) + } + } + /** Scale */ const x = d3.scaleUtc( d3.extent(data, (d) => d.date), @@ -153,7 +199,89 @@ const buildChart = (chart, data, color) => { .attr("preserveAspectRatio", "none") .attr("style", "max-width: 100%;") .style("-webkit-tap-highlight-color", "transparent") - // .on("touchstart", (event) => event.preventDefault()) + .on("pointerenter pointermove", onPointerMoved) + .on("pointerleave", onPointerleft) + .on("touchstart", (event) => event.preventDefault()) + + // This allows to find the closest X index of the mouse: + const bisect = d3.bisector(function(d) { return d.date; }).center + + const cFocus = svg + .append('g') + .append('circle') + .style("fill", "var(--brand)") + .attr('r', 4) + .style("opacity", 0) + .style("transition", "all 0.2s ease" ) + + const pFocus = svg + .append('g') + .append('circle') + .style("fill", "var(--txt-tertiary)") + .attr('r', 4) + .style("opacity", 0) + .style("transition", "all 0.2s ease" ) + + const focusLine = svg + .append('g') + .append('line') + .style("stroke-width", 2) + .style("stroke", "var(--op-15)") + .style("fill", "none") + .style("opacity", 0) + + function onPointerMoved(event) { + tooltip.value.show = true + + cFocus.style("opacity", 1) + focusLine.style("opacity", 1) + + // Recover coordinate we need + let idx = bisect(currentData.value, x.invert(d3.pointer(event)[0])) + let selectedCData = currentData.value[idx] + cFocus + .attr("cx", x(selectedCData.date)) + .attr("cy", y(selectedCData.value)) + focusLine + .attr("x1", x(selectedCData.date)) + .attr("y1", 0) + .attr("x2", x(selectedCData.date)) + .attr("y2", height) + + let tooltipWidth = tooltipEl.value?.wrapper ? tooltipEl.value?.wrapper?.getBoundingClientRect()?.width : 100 + let xPosition = x(selectedCData.date) + tooltip.value.x = (xPosition + tooltipWidth) > width + 5 ? xPosition - tooltipWidth - 15 : xPosition + 15 + tooltip.value.y = Math.min(y(selectedCData.value), height - 100) + + tooltip.value.data[0] = { + date: formatDate(selectedCData.date), + value: formatValue(selectedCData.value), + color: "var(--brand)", + } + tooltip.value.data.splice(1, 1) + if (prevData.value.length) { + let selectedPData = prevData.value[idx] + + pFocus + .attr("cx", x(selectedPData.date)) + .attr("cy", y(selectedPData.value)) + .style("opacity", 1) + + tooltip.value.data[1] = { + date: formatDate(selectedPData.realDate), + value: formatValue(selectedPData.value), + color: "var(--txt-tertiary)", + } + } + + } + + function onPointerleft() { + tooltip.value.show = false + cFocus.style("opacity", 0) + pFocus.style("opacity", 0) + focusLine.style("opacity", 0) + } /** Default Horizontal Lines */ svg.append("path") @@ -207,7 +335,7 @@ const buildChart = (chart, data, color) => { const drawChart = async () => { await getSeries() - buildChart(chartEl.value.wrapper, currentData.value, "var(--mint)") + buildChart(chartEl.value.wrapper, currentData.value, "var(--brand)") buildChart(chartElPrev.value.wrapper, prevData.value, "var(--txt-tertiary)") } @@ -221,7 +349,6 @@ watch( await drawChart() }, ) - -