From 9d7e6445f31fa2d2c5743817fe3767f2f2b5749f Mon Sep 17 00:00:00 2001
From: Alexander Drozdov <snosme@gmail.com>
Date: Fri, 15 Jan 2021 15:30:43 +0200
Subject: [PATCH] replace chart lib

---
 package.json                              |  2 +
 src/web/price-check/trends/PriceTrend.vue | 54 ++++++++--------
 yarn.lock                                 | 78 ++++++++++++++++++++++-
 3 files changed, 106 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index afb35de7..ae17ae2e 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "5.14.x",
     "animate.css": "^4.1.1",
+    "apexcharts": "^3.23.1",
     "dot-prop": "6.x.x",
     "electron-overlay-window": "1.0.x",
     "electron-store": "6.0.x",
@@ -40,6 +41,7 @@
     "vue-i18n": "9.0.0-rc.2",
     "vue-router": "4.x.x",
     "vue-slider-component": "4.0.0-beta.3",
+    "vue3-apexcharts": "^1.1.1",
     "vuedraggable": "4.0.1",
     "winston": "3.x.x"
   },
diff --git a/src/web/price-check/trends/PriceTrend.vue b/src/web/price-check/trends/PriceTrend.vue
index fd9e5e92..03684670 100644
--- a/src/web/price-check/trends/PriceTrend.vue
+++ b/src/web/price-check/trends/PriceTrend.vue
@@ -22,40 +22,57 @@
       <div class="text-xs text-gray-500 leading-none">{{ $t('Last 7 days') }}</div>
     </div>
     <div v-if="trend.changeStr" class="w-12 h-8">
-      <!-- <trend-chart padding="2"
-      :datasets="[{
-        data: trend.receive.graphPoints,
-        smooth: true,
-        fill: true
-      }]"
-      :min="Math.min(...trend.receive.graphPoints) - trend.changeVal"
-      :max="Math.max(...trend.receive.graphPoints) + trend.changeVal" /> -->
+      <vue-apexcharts
+        type="area"
+        :options="{
+          chart: { sparkline: { enabled: true }, animations: { enabled: false } },
+          stroke: { curve: 'smooth', width: 1, colors: ['#a0aec0' /* gray.500 */] },
+          fill: { colors: ['#4a5568' /* gray.700 */], type: 'solid' },
+          tooltip: { enabled: false },
+          plotOptions: { area: { fillTo: 'end' } },
+          yaxis: {
+            show: false,
+            min: Math.min(...trend.receive.graphPoints) - trend.changeVal,
+            max: Math.max(...trend.receive.graphPoints) + trend.changeVal
+          }
+        }"
+        :series="[{
+          data: trend.receive.graphPoints
+        }]"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import { Prices } from '../Prices'
+import { findByDetailsId, autoCurrency } from '../../background/Prices'
 import { isValuableBasetype, getDetailsId } from './getDetailsId'
 import ItemQuickPrice from '@/web/ui/ItemQuickPrice'
+import VueApexcharts from 'vue3-apexcharts'
 
 export default {
-  components: { ItemQuickPrice },
+  components: {
+    ItemQuickPrice,
+    VueApexcharts
+  },
   props: {
     item: {
       type: Object,
       required: true
     }
   },
+  methods: {
+    $t (a) { return a }
+  },
   computed: {
     trend () {
       const detailsId = getDetailsId(this.item)
-      const trend = Prices.findByDetailsId(detailsId)
+      const trend = findByDetailsId(detailsId)
       if (!trend) return
 
       const price = (this.item.name === 'Exalted Orb')
         ? { val: trend.receive.chaosValue, curr: 'c' }
-        : Prices.autoCurrency(trend.receive.chaosValue, 'c')
+        : autoCurrency(trend.receive.chaosValue, 'c')
 
       if (trend.receive.graphPoints.length >= 2) {
         let changeStr = 'const'
@@ -89,19 +106,6 @@ export default {
 }
 </script>
 
-<style lang="postcss">
-/* vue-trend-chart */
-.vtc {
-  .fill {
-    fill: theme('colors.gray.700');
-  }
-
-  .stroke {
-    stroke: theme('colors.gray.500');
-  }
-}
-</style>
-
 <i18n>
 {
   "ru": {
diff --git a/yarn.lock b/yarn.lock
index 9c924e5a..baa7234a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1139,6 +1139,18 @@ anymatch@~3.1.1:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+apexcharts@^3.23.1:
+  version "3.23.1"
+  resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.23.1.tgz#6d63ae2a0b5cbb54644fc0147a228ece57afa8dc"
+  integrity sha512-7fRpquXp725BUew5OO1mJWk16/IJPCUl0l8SjhISnAhAtbTaM9PnXPSmN2BvKO4RcT457CzMM7MCG5UokiTwcA==
+  dependencies:
+    svg.draggable.js "^2.2.2"
+    svg.easing.js "^2.0.0"
+    svg.filter.js "^2.0.2"
+    svg.pathmorphing.js "^0.1.3"
+    svg.resize.js "^1.4.3"
+    svg.select.js "^3.0.1"
+
 app-builder-bin@3.5.10:
   version "3.5.10"
   resolved "https://registry.yarnpkg.com/app-builder-bin/-/app-builder-bin-3.5.10.tgz#4a7f9999fccc0c435b6284ae1366bc76a17c4a7d"
@@ -8705,6 +8717,61 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+svg.draggable.js@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz#c514a2f1405efb6f0263e7958f5b68fce50603ba"
+  integrity sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==
+  dependencies:
+    svg.js "^2.0.1"
+
+svg.easing.js@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/svg.easing.js/-/svg.easing.js-2.0.0.tgz#8aa9946b0a8e27857a5c40a10eba4091e5691f12"
+  integrity sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=
+  dependencies:
+    svg.js ">=2.3.x"
+
+svg.filter.js@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/svg.filter.js/-/svg.filter.js-2.0.2.tgz#91008e151389dd9230779fcbe6e2c9a362d1c203"
+  integrity sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=
+  dependencies:
+    svg.js "^2.2.5"
+
+svg.js@>=2.3.x, svg.js@^2.0.1, svg.js@^2.2.5, svg.js@^2.4.0, svg.js@^2.6.5:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/svg.js/-/svg.js-2.7.1.tgz#eb977ed4737001eab859949b4a398ee1bb79948d"
+  integrity sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==
+
+svg.pathmorphing.js@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz#c25718a1cc7c36e852ecabc380e758ac09bb2b65"
+  integrity sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==
+  dependencies:
+    svg.js "^2.4.0"
+
+svg.resize.js@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/svg.resize.js/-/svg.resize.js-1.4.3.tgz#885abd248e0cd205b36b973c4b578b9a36f23332"
+  integrity sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==
+  dependencies:
+    svg.js "^2.6.5"
+    svg.select.js "^2.1.2"
+
+svg.select.js@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-2.1.2.tgz#e41ce13b1acff43a7441f9f8be87a2319c87be73"
+  integrity sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==
+  dependencies:
+    svg.js "^2.2.5"
+
+svg.select.js@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-3.0.1.tgz#a4198e359f3825739226415f82176a90ea5cc917"
+  integrity sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==
+  dependencies:
+    svg.js "^2.6.5"
+
 svgo@^1.0.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
@@ -9577,6 +9644,11 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue3-apexcharts@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/vue3-apexcharts/-/vue3-apexcharts-1.1.1.tgz#34ee0a729bc7ca0cb0af14f2c80f097b02329d5c"
+  integrity sha512-SKU0W8g7hkkAAm+fJAaw8HpkFgO1HaWA1zpKVskF/9LmySTVOsrHqldxOikglnSAiig93KBHQhcinStusHz8Cw==
+
 vue@3.0.x:
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.5.tgz#de1b82eba24abfe71e0970fc9b8d4b2babdc3fe1"
@@ -9664,9 +9736,9 @@ webpack-dev-middleware@^3.7.2:
     webpack-log "^2.0.0"
 
 webpack-dev-server@^3.11.0:
-  version "3.11.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.11.1.tgz#c74028bf5ba8885aaf230e48a20e8936ab8511f0"
-  integrity sha512-u4R3mRzZkbxQVa+MBWi2uVpB5W59H3ekZAJsQlKUTdl7Elcah2EhygTPLmeFXybQkf9i2+L0kn7ik9SnXa6ihQ==
+  version "3.11.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.11.2.tgz#695ebced76a4929f0d5de7fd73fafe185fe33708"
+  integrity sha512-A80BkuHRQfCiNtGBS1EMf2ChTUs0x+B3wGDFmOeT4rmJOHhHTCH2naNxIHhmkr0/UillP4U3yeIyv1pNp+QDLQ==
   dependencies:
     ansi-html "0.0.7"
     bonjour "^3.5.0"