From 4824c8f60e5fbcfd35d02530e02b2610e3f66ea5 Mon Sep 17 00:00:00 2001 From: CTAPCKPIM Date: Thu, 28 Dec 2023 20:34:15 +0200 Subject: [PATCH 01/11] fear(ui): init --- .vscode/settings.json | 2 +- src/lib/components/Chart/template.pug | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 0d711c61..09f1c80d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,7 +2,7 @@ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { - "source.fixAll.eslint": true + "source.fixAll.eslint": "explicit" }, "eslint.validate": ["javascript", "typescript", "svelte"], "eslint.enable": true, diff --git a/src/lib/components/Chart/template.pug b/src/lib/components/Chart/template.pug index 2cb17e19..2781377a 100644 --- a/src/lib/components/Chart/template.pug +++ b/src/lib/components/Chart/template.pug @@ -54,6 +54,7 @@ mixin legend-item(label, value) .chart.relative.w-full.bg-l2.border.border-solid.border-l4.rounded-xl.h-96.flex.justify-between.flex-col( class="xs:h-[480px]" ) + .chart-header.relative.z-1.flex.flex-col.items-start.pb-14(class="p-3.75 xs:pb-8") span.block.text-footnote.text-t3 Price in USD span.flex.items-center.gap-3 From 5315c1c8a160473f226bd9c936e7b9f527be14a7 Mon Sep 17 00:00:00 2001 From: CTAPCKPIM Date: Thu, 28 Dec 2023 21:16:53 +0200 Subject: [PATCH 02/11] feat: searching correct the place --- src/lib/components/Chart/options.ts | 1 + src/lib/components/Chart/template.pug | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/Chart/options.ts b/src/lib/components/Chart/options.ts index bfd75b27..6212d139 100644 --- a/src/lib/components/Chart/options.ts +++ b/src/lib/components/Chart/options.ts @@ -254,6 +254,7 @@ const generateOptions = (data: any[] | null, isMock: boolean): ApexOptions => { return ` ${timeFormat( time, + /// todo: correct here 'DD-MMM-YYYY, HH:mm' )} diff --git a/src/lib/components/Chart/template.pug b/src/lib/components/Chart/template.pug index 2781377a..2cb17e19 100644 --- a/src/lib/components/Chart/template.pug +++ b/src/lib/components/Chart/template.pug @@ -54,7 +54,6 @@ mixin legend-item(label, value) .chart.relative.w-full.bg-l2.border.border-solid.border-l4.rounded-xl.h-96.flex.justify-between.flex-col( class="xs:h-[480px]" ) - .chart-header.relative.z-1.flex.flex-col.items-start.pb-14(class="p-3.75 xs:pb-8") span.block.text-footnote.text-t3 Price in USD span.flex.items-center.gap-3 From 728cd0688ee736c94cee36b3248aaecb5a6b8269 Mon Sep 17 00:00:00 2001 From: CTAPCKPIM Date: Fri, 29 Dec 2023 13:12:00 +0200 Subject: [PATCH 03/11] feat: adding and removing comments --- src/lib/components/Chart/options.ts | 1 - src/lib/components/Chart/template.pug | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/Chart/options.ts b/src/lib/components/Chart/options.ts index 6212d139..bfd75b27 100644 --- a/src/lib/components/Chart/options.ts +++ b/src/lib/components/Chart/options.ts @@ -254,7 +254,6 @@ const generateOptions = (data: any[] | null, isMock: boolean): ApexOptions => { return ` ${timeFormat( time, - /// todo: correct here 'DD-MMM-YYYY, HH:mm' )} diff --git a/src/lib/components/Chart/template.pug b/src/lib/components/Chart/template.pug index 2cb17e19..a1cfc237 100644 --- a/src/lib/components/Chart/template.pug +++ b/src/lib/components/Chart/template.pug @@ -82,6 +82,7 @@ mixin legend-item(label, value) +legend-item("Symbol", "{info.symbol}").border-r.border-solid.border-l4( class="xs:border-b xs:border-r-0" ) + /// todo: implement the tooltip.. +legend-item("FDM", "${formatNumber(info.fdm, '0,0[.]00')}").border-r.border-solid.border-l4( class="xs:border-b xs:border-r-0" ) From 7d15bff9500f3dd45f1c81b9f530b719b006329b Mon Sep 17 00:00:00 2001 From: CTAPCKPIM Date: Fri, 29 Dec 2023 15:00:12 +0200 Subject: [PATCH 04/11] feat: adding logic for the tooltip --- src/lib/components/Chart/template.pug | 28 ++++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/src/lib/components/Chart/template.pug b/src/lib/components/Chart/template.pug index a1cfc237..ee731c3e 100644 --- a/src/lib/components/Chart/template.pug +++ b/src/lib/components/Chart/template.pug @@ -43,13 +43,32 @@ mixin empty-state-graph clipPath(id="clip0_943_8209") rect(width="710" height="184" fill="white" transform="matrix(-1 0 0 1 710 0)") +/// todo: implement the tooltip.. +mixin information-circle + svg(width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg") + circle(cx="12" cy="12" r="10" fill="lightblue") + text( + x="50%" + y="50%" + text-anchor="middle" + alignment-baseline="central" + font-size="14" + fill="white" + ) i + mixin legend-item(label, value) .chart-legend-item.relative.flex.flex-col.items-start.w-full(class="p-2.75")&attributes(attributes) - span.text-footnote.text-t3.block= label - +if('isLoading') + if label === 'FDM' + /// todo: correct the tooltip.. + span.inline-block + span.text-footnote.text-t3.block= label + +information-circle + else + span.text-footnote.text-t3.block= label + if 'isLoading' span.block.bg-l3.rounded-2sm.h-8.w-32 - +else - span.text-h6-l.font-satoshi(class="xs:text-h6-s")= value + else + span.text-h6-l.font-satoshi(class="xs:text-h6-s")= value .chart.relative.w-full.bg-l2.border.border-solid.border-l4.rounded-xl.h-96.flex.justify-between.flex-col( class="xs:h-[480px]" @@ -82,7 +101,6 @@ mixin legend-item(label, value) +legend-item("Symbol", "{info.symbol}").border-r.border-solid.border-l4( class="xs:border-b xs:border-r-0" ) - /// todo: implement the tooltip.. +legend-item("FDM", "${formatNumber(info.fdm, '0,0[.]00')}").border-r.border-solid.border-l4( class="xs:border-b xs:border-r-0" ) From 6dece6bde1a35d9a2418bcd14a7b04c63359cd93 Mon Sep 17 00:00:00 2001 From: CTAPCKPIM Date: Tue, 2 Jan 2024 20:10:48 +0200 Subject: [PATCH 05/11] feat: implementing the tooltip component and place for him --- package-lock.json | 15 +++ package.json | 3 +- src/lib/components/Chart/template.pug | 2 +- .../components/Tooltip/Tooltip.stories.svelte | 0 src/lib/components/Tooltip/index.svelte | 116 ++++++++++++++++++ src/lib/components/Tooltip/style.sass | 38 ++++++ src/lib/components/Tooltip/tooltip.ts | 90 ++++++++++++++ 7 files changed, 262 insertions(+), 2 deletions(-) create mode 100644 src/lib/components/Tooltip/Tooltip.stories.svelte create mode 100644 src/lib/components/Tooltip/index.svelte create mode 100644 src/lib/components/Tooltip/style.sass create mode 100644 src/lib/components/Tooltip/tooltip.ts diff --git a/package-lock.json b/package-lock.json index 35e8051e..599cc2fe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "dependencies": { "@apollo/client": "^3.7.10", "@github/details-dialog-element": "^3.1.3", + "@popperjs/core": "^2.11.8", "apexcharts": "^3.37.3", "dotenv": "^16.0.3", "editorjs-html": "^3.4.2", @@ -2365,6 +2366,15 @@ "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==", "dev": true }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@prettier/plugin-pug": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/@prettier/plugin-pug/-/plugin-pug-2.5.1.tgz", @@ -10072,6 +10082,11 @@ "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==", "dev": true }, + "@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" + }, "@prettier/plugin-pug": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/@prettier/plugin-pug/-/plugin-pug-2.5.1.tgz", diff --git a/package.json b/package.json index 08e5ea46..d0ee0217 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "dependencies": { "@apollo/client": "^3.7.10", "@github/details-dialog-element": "^3.1.3", + "@popperjs/core": "^2.11.8", "apexcharts": "^3.37.3", "dotenv": "^16.0.3", "editorjs-html": "^3.4.2", @@ -63,4 +64,4 @@ "rollbar": "^2.26.1" }, "type": "module" -} \ No newline at end of file +} diff --git a/src/lib/components/Chart/template.pug b/src/lib/components/Chart/template.pug index ee731c3e..515bdd32 100644 --- a/src/lib/components/Chart/template.pug +++ b/src/lib/components/Chart/template.pug @@ -60,7 +60,7 @@ mixin legend-item(label, value) .chart-legend-item.relative.flex.flex-col.items-start.w-full(class="p-2.75")&attributes(attributes) if label === 'FDM' /// todo: correct the tooltip.. - span.inline-block + span.flex.items-center.gap-1 span.text-footnote.text-t3.block= label +information-circle else diff --git a/src/lib/components/Tooltip/Tooltip.stories.svelte b/src/lib/components/Tooltip/Tooltip.stories.svelte new file mode 100644 index 00000000..e69de29b diff --git a/src/lib/components/Tooltip/index.svelte b/src/lib/components/Tooltip/index.svelte new file mode 100644 index 00000000..a02e7156 --- /dev/null +++ b/src/lib/components/Tooltip/index.svelte @@ -0,0 +1,116 @@ + + + +{#if isShown && (tip || $$slots.tip)} + +{/if} + + diff --git a/src/lib/components/Tooltip/style.sass b/src/lib/components/Tooltip/style.sass new file mode 100644 index 00000000..580cd80a --- /dev/null +++ b/src/lib/components/Tooltip/style.sass @@ -0,0 +1,38 @@ +.tooltip + padding: calc(#{theme('spacing.6')} - 1px) + @apply block z-10 text-p2 text-gray-5 rounded-base-radius normal-case min-w-[250px] max-w-[346px] w-fit + + &-arrow + position: absolute + height: 9px + width: 12px + @apply text-gray-70 stroke-gray-40 + + svg + position: relative + display: block + transform-origin: 50% 50% + + &[data-placement^='top'] > &-arrow + bottom: -9px + + svg + transform: rotate(0deg) + + &[data-placement^='bottom'] > &-arrow + top: -9px + + svg + transform: rotate(180deg) + + &[data-placement^='left'] > &-arrow + right: -10.5px + + svg + transform: rotate(-90deg) + + &[data-placement^='right'] > &-arrow + left: -10.5px + + svg + transform: rotate(90deg) \ No newline at end of file diff --git a/src/lib/components/Tooltip/tooltip.ts b/src/lib/components/Tooltip/tooltip.ts new file mode 100644 index 00000000..c9e43b7f --- /dev/null +++ b/src/lib/components/Tooltip/tooltip.ts @@ -0,0 +1,90 @@ +import { createPopper } from '@popperjs/core'; + +import type { Instance, OptionsGeneric, Modifier } from '@popperjs/core'; + +export type PopperOptions = Partial> | undefined; + +export type ReferenceAction = (node: HTMLElement, handlers: any) => { destroy(): void }; + +export type ContentAction = ( + node: HTMLElement, + popperOptions?: PopperOptions +) => { + update(popperOptions: PopperOptions): void; + destroy(): void; +}; + +export function createPopperActions< + // eslint-disable-next-line @typescript-eslint/no-explicit-any + TModifier extends Partial> +>( + initOptions?: PopperOptions +): [ReferenceAction, ContentAction, () => Instance | null] { + let popperInstance: Instance | null = null; + let referenceNode: HTMLElement; + let referenceHandlers: any = null; + let contentNode: HTMLElement; + let options: PopperOptions | undefined = initOptions; + + const initPopper = () => { + if (referenceNode && contentNode) { + popperInstance = createPopper(referenceNode, contentNode, options); + } + }; + + const destroyPopper = () => { + if (popperInstance) { + popperInstance.destroy(); + popperInstance = null; + } + }; + + const addReferenceEvents = (node: HTMLElement, handlers: any) => { + if (node && handlers) { + node.style.cursor = 'pointer'; + node.addEventListener('mouseenter', handlers.onMouseEnter); + node.addEventListener('mouseleave', handlers.onMouseLeave); + } + }; + + const removeReferenceEvents = (node: HTMLElement, handlers: any) => { + if (node && handlers) { + node.style.cursor = 'auto'; + node.removeEventListener('mouseenter', handlers.onMouseEnter); + node.removeEventListener('mouseleave', handlers.onMouseLeave); + } + }; + + const referenceAction: ReferenceAction = (node, handlers) => { + referenceHandlers = handlers; + referenceNode = node; + + addReferenceEvents(node, handlers); + initPopper(); + return { + destroy() { + destroyPopper(); + removeReferenceEvents(referenceNode, referenceHandlers); + }, + }; + }; + + const contentAction: ContentAction = (node, contentOptions?) => { + contentNode = node; + options = { ...initOptions, ...contentOptions }; + initPopper(); + return { + update(newContentOptions: PopperOptions) { + options = { ...initOptions, ...newContentOptions }; + if (popperInstance && options) { + popperInstance.setOptions(options); + } + }, + destroy() { + destroyPopper(); + }, + }; + }; + + return [referenceAction, contentAction, () => popperInstance]; +} From 694df54315914420fe4da614d76e39f06de288e2 Mon Sep 17 00:00:00 2001 From: CTAPCKPIM Date: Tue, 2 Jan 2024 20:44:09 +0200 Subject: [PATCH 06/11] feat: commiting the file --- .../components/Tooltip/Tooltip.stories.svelte | 65 +++++++++++++++++++ 1 file changed, 65 insertions(+) diff --git a/src/lib/components/Tooltip/Tooltip.stories.svelte b/src/lib/components/Tooltip/Tooltip.stories.svelte index e69de29b..831c90b8 100644 --- a/src/lib/components/Tooltip/Tooltip.stories.svelte +++ b/src/lib/components/Tooltip/Tooltip.stories.svelte @@ -0,0 +1,65 @@ + + + + + + + + + + + From 5aeb2ca118e6ded27016b509e82b4c96f5cf94b5 Mon Sep 17 00:00:00 2001 From: CTAPCKPIM Date: Wed, 10 Jan 2024 12:16:37 +0200 Subject: [PATCH 07/11] chore: correcting settings.json and removing the code --- .vscode/settings.json | 2 +- src/lib/components/Chart/template.pug | 14 -------------- 2 files changed, 1 insertion(+), 15 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 09f1c80d..0d711c61 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,7 +2,7 @@ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { - "source.fixAll.eslint": "explicit" + "source.fixAll.eslint": true }, "eslint.validate": ["javascript", "typescript", "svelte"], "eslint.enable": true, diff --git a/src/lib/components/Chart/template.pug b/src/lib/components/Chart/template.pug index 515bdd32..e0404eb1 100644 --- a/src/lib/components/Chart/template.pug +++ b/src/lib/components/Chart/template.pug @@ -43,26 +43,12 @@ mixin empty-state-graph clipPath(id="clip0_943_8209") rect(width="710" height="184" fill="white" transform="matrix(-1 0 0 1 710 0)") -/// todo: implement the tooltip.. -mixin information-circle - svg(width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg") - circle(cx="12" cy="12" r="10" fill="lightblue") - text( - x="50%" - y="50%" - text-anchor="middle" - alignment-baseline="central" - font-size="14" - fill="white" - ) i - mixin legend-item(label, value) .chart-legend-item.relative.flex.flex-col.items-start.w-full(class="p-2.75")&attributes(attributes) if label === 'FDM' /// todo: correct the tooltip.. span.flex.items-center.gap-1 span.text-footnote.text-t3.block= label - +information-circle else span.text-footnote.text-t3.block= label if 'isLoading' From c220947ed369aea877274011f8ff90da77097e1f Mon Sep 17 00:00:00 2001 From: CTAPCKPIM Date: Wed, 10 Jan 2024 12:30:40 +0200 Subject: [PATCH 08/11] chore: removing the - Date: Wed, 10 Jan 2024 13:17:38 +0200 Subject: [PATCH 09/11] faet: adding the selector for information-circle --- src/lib/components/Tooltip/style.sass | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/lib/components/Tooltip/style.sass b/src/lib/components/Tooltip/style.sass index 580cd80a..24ddded1 100644 --- a/src/lib/components/Tooltip/style.sass +++ b/src/lib/components/Tooltip/style.sass @@ -12,6 +12,14 @@ position: relative display: block transform-origin: 50% 50% + + &-circle + width: 13px + height: 13px + top: 1.5px + left: 1.5px + border-radius: 50% + @apply text-gray-70 stroke-gray-40 &[data-placement^='top'] > &-arrow bottom: -9px @@ -35,4 +43,6 @@ left: -10.5px svg - transform: rotate(90deg) \ No newline at end of file + transform: rotate(90deg) + + &[data-placement^='circle'] > &-circle From d54e7845b538b725da5d9e75d98ae6d5dd963318 Mon Sep 17 00:00:00 2001 From: CTAPCKPIM Date: Thu, 11 Jan 2024 17:50:24 +0200 Subject: [PATCH 10/11] feat: correcting the style for tooltip box --- src/lib/components/Tooltip/style.sass | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/src/lib/components/Tooltip/style.sass b/src/lib/components/Tooltip/style.sass index 24ddded1..858ecd1e 100644 --- a/src/lib/components/Tooltip/style.sass +++ b/src/lib/components/Tooltip/style.sass @@ -1,6 +1,6 @@ .tooltip - padding: calc(#{theme('spacing.6')} - 1px) - @apply block z-10 text-p2 text-gray-5 rounded-base-radius normal-case min-w-[250px] max-w-[346px] w-fit + padding: 8px + @apply block z-10 text-p2 text-gray-5 bg-accent1-default boxShadow-tag rounded-xl normal-case w-fit max-w-[376px] &-arrow position: absolute @@ -12,14 +12,6 @@ position: relative display: block transform-origin: 50% 50% - - &-circle - width: 13px - height: 13px - top: 1.5px - left: 1.5px - border-radius: 50% - @apply text-gray-70 stroke-gray-40 &[data-placement^='top'] > &-arrow bottom: -9px @@ -44,5 +36,3 @@ svg transform: rotate(90deg) - - &[data-placement^='circle'] > &-circle From dbd9312aec1e66a6149463fe33ba8603cf880d97 Mon Sep 17 00:00:00 2001 From: CTAPCKPIM Date: Thu, 11 Jan 2024 17:53:38 +0200 Subject: [PATCH 11/11] feat: correcting the size of tghe arrow --- src/lib/components/Tooltip/style.sass | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/Tooltip/style.sass b/src/lib/components/Tooltip/style.sass index 858ecd1e..d9ca9402 100644 --- a/src/lib/components/Tooltip/style.sass +++ b/src/lib/components/Tooltip/style.sass @@ -4,8 +4,8 @@ &-arrow position: absolute - height: 9px - width: 12px + height: 16px + width: 24px @apply text-gray-70 stroke-gray-40 svg