replace chart lib

This commit is contained in:
Alexander Drozdov
2021-01-15 15:30:43 +02:00
parent 82afc00f52
commit 9d7e6445f3
3 changed files with 106 additions and 28 deletions
+2
View File
@@ -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"
},
+29 -25
View File
@@ -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": {
+75 -3
View File
@@ -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"