Merge branch 'main-nuxt' of github.com:kodadot/nft-gallery into 984-add-serviceworker

Author: Isa Noguchi

.github/workflows/lint.yml

@@ -2,9 +2,9 @@ name: Lint Files
 
 on:
   push:
-    branches: [ main ]
+    branches: [ main, main-nuxt ]
   pull_request:
-    branches: [ main ]
+    branches: [ main, main-nuxt ]
 
 jobs:
   lint:
@@ -16,10 +16,10 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: "14"
+          node-version: "16"
 
       - name: Install Dependencies
         run: yarn
 
-      - name: Lint Code
-        run: yarn lint
+      - name: Run Code Lint
+        run: yarn lint:quiet

coingecko.ts

@@ -3,24 +3,39 @@ import Axios from 'axios'
 export const BASE_URL = 'https://api.coingecko.com/api/v3'
 
 const api = Axios.create({
-    baseURL: BASE_URL,
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    withCredentials: false
-  })
+  baseURL: BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  withCredentials: false,
+})
+
+export const getKsmPrice = async (): Promise<void> => {
+  try {
+    const { data } = await api.get('/simple/price', {
+      params: {
+        ids: 'kusama',
+        vs_currencies: 'usd',
+      }
+    })
+
+    return data
+  } catch (error) {
+    console.log(error)
+  }
+}
 
 export const getKSMUSD = async (): Promise<number> => {
-  const coinId: string = 'kusama'
+  const coinId = 'kusama'
   try {
-    const { data } = await api.get(`/simple/price`, {
+    const { data } = await api.get('/simple/price', {
       params: {
         ids: coinId,
         vs_currencies: 'usd'
       }
     })
 
-    return data[coinId]['usd'];
+    return data[coinId]['usd']
   } catch (error) {
     console.log(error)
     return 1

components/rmrk/Gallery/CollectionPriceChart.vue

@@ -1,160 +1,177 @@
 <template>
   <div class="price-chart mt-4">
-    <p class="label">
-      {{ $t('Price Chart') }}
-    </p>
-    <div id="chart" ref="chart" class="echart"></div>
+    <div class="is-flex is-align-items-center is-justify-content-space-between">
+      <p class="label">
+        {{ $t('Price Chart') }}
+      </p>
+      <b-button type="is-primary" @click="resetZoom">Reset zoom</b-button>
+    </div>
+    <div class="mt-5">
+      <canvas
+        id="collectionPriceChart"
+        @mousedown="onCanvasMouseDown"
+        @mouseup="onCanvasMouseUp"
+        @mouseleave="onCanvasMouseLeave"
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch } from 'nuxt-property-decorator'
+import { Component, mixins, Prop, Watch } from 'nuxt-property-decorator';
+import { Debounce } from 'vue-debounce-decorator';
+import Chart from 'chart.js/auto';
+import 'chartjs-adapter-luxon';
+import zoomPlugin from 'chartjs-plugin-zoom';
+import ChainMixin from '@/utils/mixins/chainMixin';
 
-import * as ECharts from 'echarts/core'
-import { GridComponent } from 'echarts/components'
-import { LineChart } from 'echarts/charts'
-import { UniversalTransition } from 'echarts/features'
-import { CanvasRenderer } from 'echarts/renderers'
-import { TooltipComponent } from 'echarts/components'
-import { DataZoomComponent } from 'echarts/components'
+import { getChartData } from '@/utils/chart';
 
-import { LegendComponent } from 'echarts/components'
+Chart.register(zoomPlugin);
 
-ECharts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition, TooltipComponent, DataZoomComponent, LegendComponent])
-
-const components = {
-}
+const components = {};
 
 @Component({ components })
-export default class PriceChart extends Vue {
-  @Prop() public priceData!: any[];
-  // @Prop() public eventData!: Date[];
+export default class PriceChart extends mixins(ChainMixin) {
+  @Prop() public priceData!: [Date, number][][];
 
   protected chartOptionsLine: any = {};
-  protected Chart!: ECharts.ECharts;
+  protected Chart!: Chart<'line', any, unknown>;
+
+  @Debounce(200)
+  protected resetZoom(): void {
+    this.Chart.resetZoom();
+  }
 
   protected onWindowResize() {
     if (this.Chart) {
-      this.Chart.resize({ width: 'auto', height: 400 })
+      this.Chart.resize();
     }
   }
 
+  protected onCanvasMouseDown(): void {
+    document!.getElementById('collectionPriceChart')!.style.cursor = 'grabbing';
+  }
+
+  protected onCanvasMouseUp(): void {
+    document!.getElementById('collectionPriceChart')!.style.cursor = 'auto';
+  }
+
+  protected onCanvasMouseLeave(): void {
+    document!.getElementById('collectionPriceChart')!.style.cursor = 'auto';
+  }
+
   public async created() {
-    window.addEventListener('resize', this.onWindowResize)
+    window.addEventListener('resize', this.onWindowResize);
   }
 
   public async mounted() {
-    this.priceChart()
+    this.priceChart();
   }
 
   protected priceChart() {
-
-    this.Chart = ECharts.init(this.$refs.chart as HTMLElement)
-    this.Chart.setOption({
-      tooltip: {
-        trigger: 'item',
-        formatter: (params: { data: string[], seriesName: string }) => {
-          const date = this.parseDate(
-            params.data[0] as unknown as Date
-          )
-          const price = params.data[1] + ' KSM'
-
-          return '<center>' + date + '<br>' + price + '</center>'
-        },
-        backgroundColor: '#363636',
-        textStyle: {
-          color: '#fff',
-          fontFamily: 'Fira Code',
+    if (this.priceData.length) {
+      const ctx = (
+        document?.getElementById('collectionPriceChart') as HTMLCanvasElement
+      )?.getContext('2d')!;
+      const chart = new Chart(ctx, {
+        type: 'line',
+        data: {
+          datasets: [
+            {
+              label: 'Floor Price',
+              data: getChartData(this.priceData[0]),
+              borderColor: '#d32e79',
+              tension: 0.3,
+              pointBackgroundColor: 'white',
+              pointBorderColor: 'blue',
+              pointRadius: 4,
+              pointHoverRadius: 6,
+            },
+            {
+              label: 'Sold NFT Price',
+              data: getChartData(this.priceData[1]),
+              borderColor: '#00BB7F',
+              tension: 0.3,
+              pointBackgroundColor: 'white',
+              pointBorderColor: 'blue',
+              pointRadius: 4,
+              pointHoverRadius: 6,
+            },
+          ],
         },
-      },
-      legend: {
-        data: ['Floor Price', 'Sold NFT Price'],
-        itemGap: 15,
-        inactiveColor: '#',
-        textStyle: {
-          color: '#fff',
-        }
-      },
-      xAxis: {
-        type: 'time',
-        boundaryGap: false,
-        axisLabel: {
-          fontFamily: 'Fira Code',
-          color: '#fff',
-          hideOverlap: true,
-        },
-      },
-      yAxis: {
-        type: 'value',
-        axisLabel: {
-          formatter: '{value} KSM',
-          fontFamily: 'Fira Code',
-          color: '#fff',
-        },
-        splitLine: {
-          lineStyle: {
-            color: '#f8f8f8',
-            opacity: '.2'
-          }
-        },
-        nameTextStyle: {
-          color: '#fff',
-          fontFamily: 'Fira Code',
-        },
-      },
-      dataZoom: {
-        type: 'slider',
-        bottom: '2%',
-      },
-      series: [
-        {
-          name: 'Floor Price',
-          type: 'line',
-          smooth: 'true',
-          lineStyle: {
-            color: '#d32e79',
+        options: {
+          plugins: {
+            zoom: {
+              limits: {
+                x: { min: 0 },
+                y: { min: 0 },
+              },
+              pan: {
+                enabled: true,
+              },
+              zoom: {
+                wheel: {
+                  enabled: true,
+                },
+                pinch: {
+                  enabled: true,
+                },
+                mode: 'xy',
+                onZoomComplete({ chart }) {
+                  chart.update('none');
+                },
+              },
+            },
           },
-          data: this.priceData[0],
-        },
-        {
-          name: 'Sold NFT Price',
-          type: 'line',
-          smooth: 'true',
-          lineStyle: {
-            color: '#00BB7F',
+          scales: {
+            x: {
+              type: 'time',
+              time: {
+                unit: 'day',
+                stepSize: 7,
+              },
+              grid: {
+                drawOnChartArea: false,
+                drawTicks: false,
+                drawBorder: false,
+              },
+              ticks: {
+                callback: (value) => {
+                  return value;
+                },
+                major: {
+                  enabled: true,
+                },
+                maxRotation: 0,
+                minRotation: 0,
+                color: '#fff',
+              },
+            },
+            y: {
+              ticks: {
+                callback: (value) => {
+                  return `${Number(value).toFixed(2)} ${this.unit}`;
+                },
+                maxTicksLimit: 7,
+
+                color: '#fff',
+              },
+              grid: {
+                color: '#3a3a3a',
+              },
+            },
           },
-          data: this.priceData[1],
         },
-      ],
-    })
-
-    this.Chart.resize({ width: 'auto', height: 400 })
-  }
-
-  protected parseDate(date: Date) {
-    const utcDate: string = date.toUTCString()
-    return utcDate.substring(4)
-  }
+      });
 
-  protected formatDate(date: Date) {
-    const yyyy = date.getUTCFullYear()
-    const mm = this.padDigits(date.getUTCMonth() + 1)
-    const dd = this.padDigits(date.getUTCDate())
-    const hrs = this.padDigits(date.getUTCHours())
-    const mins = this.padDigits(date.getUTCMinutes())
-    const secs = this.padDigits(date.getUTCSeconds())
-    const YYYY_MM_DD_HRS_MINS_SECS =
-      yyyy + '/' + mm + '/' + dd + '\n' + hrs + ':' + mins + ':' + secs
-    return YYYY_MM_DD_HRS_MINS_SECS
-  }
-
-  protected padDigits(time: number) {
-    return time.toString().padStart(2, '0')
+      this.Chart = chart;
+    }
   }
 
   @Watch('priceData')
   async watchData(newPriceData: string[], oldPriceData: string[]) {
-    this.priceChart()
+    this.priceChart();
   }
 }
 </script>