From 00461e5004e183752c9cb6f8711d395f9dee570d Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sun, 26 Nov 2023 14:13:56 +0700
Subject: [PATCH 1/4] fix-NeoDropdown position prop

---
 libs/ui/src/components/NeoDropdown/NeoDropdown.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/ui/src/components/NeoDropdown/NeoDropdown.vue b/libs/ui/src/components/NeoDropdown/NeoDropdown.vue
index 261ba1dcc7..ef04deadf4 100644
--- a/libs/ui/src/components/NeoDropdown/NeoDropdown.vue
+++ b/libs/ui/src/components/NeoDropdown/NeoDropdown.vue
@@ -60,7 +60,7 @@ export default {
           [this.computedClass(
             'menuPositionClass',
             'o-drop__menu--',
-            this.autoPosition,
+            this.position,
           )]: this.autoPosition,
         },
         {

From 74bbdff5a55c305b81f8f6f155cfc71d56a8728a Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sun, 26 Nov 2023 14:15:36 +0700
Subject: [PATCH 2/4] hide outliers drop down

---
 assets/styles/components/_price-chart.scss    |  4 +-
 components/chart/PriceChart.vue               | 51 +++++++++++++++++--
 .../collection/activity/ActivityChart.vue     |  4 +-
 locales/en.json                               |  3 +-
 4 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/assets/styles/components/_price-chart.scss b/assets/styles/components/_price-chart.scss
index c98d57b318..d54e97d893 100644
--- a/assets/styles/components/_price-chart.scss
+++ b/assets/styles/components/_price-chart.scss
@@ -6,13 +6,13 @@
     left: 0;
     top: 0;
   }
-  .neo-dropdown {
+  .time-range-dropdown {
     $width: 89px;
     $height: 30px;
     $font-size: 12px;
 
     position: absolute;
-    right: 10px;
+    right: 60px;
     top: -8px;
     font-size: $font-size;
 
diff --git a/components/chart/PriceChart.vue b/components/chart/PriceChart.vue
index 5be89811e0..f2f3670652 100644
--- a/components/chart/PriceChart.vue
+++ b/components/chart/PriceChart.vue
@@ -3,7 +3,7 @@
     <span class="chart-y-description is-size-7">
       Price ({{ chainSymbol }})
     </span>
-    <NeoDropdown class="py-0" :mobile-modal="false">
+    <NeoDropdown class="py-0 time-range-dropdown" :mobile-modal="false">
       <template #trigger="{ active }">
         <NeoButton
           :label="selectedTimeRange.label"
@@ -23,6 +23,29 @@
       </NeoDropdownItem>
     </NeoDropdown>
 
+    <NeoDropdown
+      :mobile-modal="false"
+      class="chart-setting-icon min-width-fit-content"
+      position="bottom-left">
+      <template #trigger>
+        <NeoButton no-shadow variant="icon">
+          <NeoIcon
+            icon="gear"
+            pack="fas"
+            size="medium"
+            :color="isDarkMode ? 'white' : 'black'" />
+        </NeoButton>
+      </template>
+
+      <NeoDropdownItem class="px-4 py-3">
+        <div
+          class="w-full is-flex is-justify-content-space-between is-align-items-center">
+          <div class="no-wrap mr-5">{{ $t('activity.hideOutliers') }}</div>
+          <NeoCheckbox v-model="vHideOutliers" class="m-0" />
+        </div>
+      </NeoDropdownItem>
+    </NeoDropdown>
+
     <div :class="{ content: !chartHeight }" :style="heightStyle">
       <canvas id="priceChart" />
     </div>
@@ -35,8 +58,14 @@ import 'chartjs-adapter-date-fns'
 import zoomPlugin from 'chartjs-plugin-zoom'
 import { getChartData } from '@/utils/chart'
 import { format } from 'date-fns'
-import { NeoButton, NeoDropdown, NeoDropdownItem } from '@kodadot1/brick'
-import { useEventListener } from '@vueuse/core'
+import {
+  NeoButton,
+  NeoCheckbox,
+  NeoDropdown,
+  NeoDropdownItem,
+  NeoIcon,
+} from '@kodadot1/brick'
+import { useEventListener, useVModel } from '@vueuse/core'
 ChartJS.register(zoomPlugin)
 const { $i18n } = useNuxtApp()
 const { chainSymbol } = useChain()
@@ -71,7 +100,11 @@ const setTimeRange = (value: { value: number; label: string }) => {
 const props = defineProps<{
   priceChartData?: [Date, number][][]
   chartHeight?: string
+  modelValue: boolean
 }>()
+const emit = defineEmits(['update:modelValue'])
+
+const vHideOutliers = useVModel(props, 'modelValue', emit)
 
 const heightStyle = computed(() =>
   props.chartHeight ? `height: ${props.chartHeight}` : '',
@@ -301,4 +334,16 @@ watch([isDarkMode, selectedTimeRange], () => {
 .content {
   height: 15rem;
 }
+
+.chart-setting-icon {
+  position: absolute;
+  right: 8px;
+  top: -3px;
+}
+
+.min-width-fit-content {
+  :deep(.o-drop__menu) {
+    min-width: fit-content !important;
+  }
+}
 </style>
diff --git a/components/collection/activity/ActivityChart.vue b/components/collection/activity/ActivityChart.vue
index f85425fe4a..eed72aebe4 100644
--- a/components/collection/activity/ActivityChart.vue
+++ b/components/collection/activity/ActivityChart.vue
@@ -1,6 +1,7 @@
 <template>
   <PriceChart
     v-if="events.length > 0"
+    v-model="hideOutliers"
     :price-chart-data="chartData"
     chart-height="350px"
     data-testid="collection-activity-chart" />
@@ -29,6 +30,7 @@ const props = withDefaults(
     events: () => [],
   },
 )
+const hideOutliers = ref(true)
 
 const buyEvents = computed(() =>
   sortAsc(
@@ -43,7 +45,7 @@ const listEvents = computed(() => {
       .filter((e) => e.interaction === Interaction.LIST)
       .map(toDataPoint),
   )
-  return removeOutliers(listDataPoints)
+  return hideOutliers.value ? removeOutliers(listDataPoints) : listDataPoints
 })
 
 const chartData = computed(() => {
diff --git a/locales/en.json b/locales/en.json
index 58d830f8e1..1d5d329912 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -901,7 +901,8 @@
     "noResults": "Looks Like There's Nothing Here Yet",
     "noFlips": "Looks like it's quiet in here",
     "noHolders": "Start collecting NFTs and make your mark at the top!",
-    "noResultsSub": "Check back later or reset your filters"
+    "noResultsSub": "Check back later or reset your filters",
+    "hideOutliers": "Hide Outliers"
   },
   "profileStats": {
     "listed": "Listed",

From 6ed1bc59dcc633343afd5d047cb4bfe86a2c9600 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sun, 26 Nov 2023 16:05:43 +0700
Subject: [PATCH 3/4] remove explicit color

---
 components/chart/PriceChart.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/components/chart/PriceChart.vue b/components/chart/PriceChart.vue
index f2f3670652..d944eed2c9 100644
--- a/components/chart/PriceChart.vue
+++ b/components/chart/PriceChart.vue
@@ -29,11 +29,7 @@
       position="bottom-left">
       <template #trigger>
         <NeoButton no-shadow variant="icon">
-          <NeoIcon
-            icon="gear"
-            pack="fas"
-            size="medium"
-            :color="isDarkMode ? 'white' : 'black'" />
+          <NeoIcon icon="gear" pack="fas" size="medium" />
         </NeoButton>
       </template>
 

From 34c5133e93d1ce7ad914d259b79b0f65c0165899 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Mon, 27 Nov 2023 13:10:55 +0700
Subject: [PATCH 4/4] styling

---
 components/chart/PriceChart.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/components/chart/PriceChart.vue b/components/chart/PriceChart.vue
index d944eed2c9..cfd837ec6d 100644
--- a/components/chart/PriceChart.vue
+++ b/components/chart/PriceChart.vue
@@ -27,16 +27,22 @@
       :mobile-modal="false"
       class="chart-setting-icon min-width-fit-content"
       position="bottom-left">
-      <template #trigger>
+      <template #trigger="{ active }">
         <NeoButton no-shadow variant="icon">
-          <NeoIcon icon="gear" pack="fas" size="medium" />
+          <NeoIcon
+            icon="gear"
+            pack="fass"
+            size="large"
+            :variant="!active ? 'k-grey' : undefined" />
         </NeoButton>
       </template>
 
-      <NeoDropdownItem class="px-4 py-3">
+      <NeoDropdownItem class="px-4 py-3 no-hover">
         <div
           class="w-full is-flex is-justify-content-space-between is-align-items-center">
-          <div class="no-wrap mr-5">{{ $t('activity.hideOutliers') }}</div>
+          <div class="no-wrap mr-5 is-size-7">
+            {{ $t('activity.hideOutliers') }}
+          </div>
           <NeoCheckbox v-model="vHideOutliers" class="m-0" />
         </div>
       </NeoDropdownItem>
@@ -334,7 +340,7 @@ watch([isDarkMode, selectedTimeRange], () => {
 .chart-setting-icon {
   position: absolute;
   right: 8px;
-  top: -3px;
+  top: -5px;
 }
 
 .min-width-fit-content {