503 lines
13 KiB
Vue
503 lines
13 KiB
Vue
|
<template>
|
||
|
|
<div class="py-3 container-fluid">
|
||
|
|
<div class="row">
|
||
|
|
<!--begin::Col-->
|
||
|
|
<div class="col-12 col-md mb-6 mb-xl-10">
|
||
|
|
<!--begin::Chart widget 15-->
|
||
|
|
<div class="card card-flush h-xl-100">
|
||
|
|
<!--begin::Header-->
|
||
|
|
<div class="card-header pt-7">
|
||
|
|
<!--begin::Title-->
|
||
|
|
<h3 class="card-title align-items-start flex-column">
|
||
|
|
<span class="card-label fw-bold text-dark">{{
|
||
|
|
$t("LatestSearches")
|
||
|
|
}}</span>
|
||
|
|
|
||
|
|
<span class="text-gray-400 pt-2 fw-semibold fs-6">{{
|
||
|
|
$t("LastSearchedTerm")
|
||
|
|
}}</span>
|
||
|
|
</h3>
|
||
|
|
<!--end::Title-->
|
||
|
|
|
||
|
|
<!--begin::Toolbar-->
|
||
|
|
<div class="dropdown d-none">
|
||
|
|
<button
|
||
|
|
class="btn btn-sm btn-light dropdown-toggle"
|
||
|
|
type="button"
|
||
|
|
id="dropdownMenuButton"
|
||
|
|
data-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
PDF Report
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!--begin::Menu-->
|
||
|
|
<div
|
||
|
|
class="dropdown-menu menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold w-100px py-4"
|
||
|
|
data-kt-menu="true"
|
||
|
|
>
|
||
|
|
<!--begin::Menu item-->
|
||
|
|
<div class="menu-item px-3">
|
||
|
|
<a href="#" class="menu-link px-3"> Remove </a>
|
||
|
|
</div>
|
||
|
|
<!--end::Menu item-->
|
||
|
|
|
||
|
|
<!--begin::Menu item-->
|
||
|
|
<div class="menu-item px-3">
|
||
|
|
<a href="#" class="menu-link px-3"> Mute </a>
|
||
|
|
</div>
|
||
|
|
<!--end::Menu item-->
|
||
|
|
|
||
|
|
<!--begin::Menu item-->
|
||
|
|
<div class="menu-item px-3">
|
||
|
|
<a href="#" class="menu-link px-3"> Settings </a>
|
||
|
|
</div>
|
||
|
|
<!--end::Menu item-->
|
||
|
|
</div>
|
||
|
|
<!--end::Menu-->
|
||
|
|
|
||
|
|
<!--end::Menu-->
|
||
|
|
</div>
|
||
|
|
<!--end::Toolbar-->
|
||
|
|
<switch-component
|
||
|
|
@change-mode="topRepeatInListMode = !topRepeatInListMode"
|
||
|
|
name="top-repeat"
|
||
|
|
></switch-component>
|
||
|
|
</div>
|
||
|
|
<!--end::Header-->
|
||
|
|
|
||
|
|
<!--begin::Body-->
|
||
|
|
<div class="card-body pt-5">
|
||
|
|
<!--begin::Chart container-->
|
||
|
|
<div
|
||
|
|
id="kt_charts_widget_15_chart"
|
||
|
|
class="min-h-auto ps-4 pe-6 mb-3 h-300px"
|
||
|
|
>
|
||
|
|
<ChartMyList
|
||
|
|
v-if="topRepeatInListMode"
|
||
|
|
:items="lastData"
|
||
|
|
:height="'30em'"
|
||
|
|
></ChartMyList>
|
||
|
|
|
||
|
|
<!-- <xy-chart
|
||
|
|
v-else
|
||
|
|
:data="lastData"
|
||
|
|
style="height: 100%; position: relative"
|
||
|
|
></xy-chart> -->
|
||
|
|
<Bar v-else :dataChart="lastData" height=" 100%"> </Bar>
|
||
|
|
</div>
|
||
|
|
<!--end::Chart container-->
|
||
|
|
</div>
|
||
|
|
<!--end::Body-->
|
||
|
|
</div>
|
||
|
|
<!--end::Chart widget 15-->
|
||
|
|
</div>
|
||
|
|
<!--end::Col-->
|
||
|
|
|
||
|
|
<!--begin::Col-->
|
||
|
|
<div class="col-12 col-md mb-6 mb-xl-10">
|
||
|
|
<!--begin::Chart widget 15-->
|
||
|
|
<div class="card card-flush h-xl-100">
|
||
|
|
<!--begin::Header-->
|
||
|
|
<div class="card-header pt-7">
|
||
|
|
<!--begin::Title-->
|
||
|
|
<h3 class="card-title align-items-start flex-column">
|
||
|
|
<span class="card-label fw-bold text-dark">{{
|
||
|
|
$t("ManyRepetitions")
|
||
|
|
}}</span>
|
||
|
|
|
||
|
|
<span class="text-gray-400 pt-2 fw-semibold fs-6">{{
|
||
|
|
$t("RepeatedSearchTerms")
|
||
|
|
}}</span>
|
||
|
|
</h3>
|
||
|
|
<!--end::Title-->
|
||
|
|
|
||
|
|
<!--begin::Toolbar-->
|
||
|
|
<div class="dropdown d-none">
|
||
|
|
<button
|
||
|
|
class="btn btn-sm btn-light dropdown-toggle"
|
||
|
|
type="button"
|
||
|
|
id="dropdownMenuButton"
|
||
|
|
data-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
PDF Report
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!--begin::Menu-->
|
||
|
|
<div
|
||
|
|
class="dropdown-menu menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold w-100px py-4"
|
||
|
|
data-kt-menu="true"
|
||
|
|
>
|
||
|
|
<!--begin::Menu item-->
|
||
|
|
<div class="menu-item px-3">
|
||
|
|
<a href="#" class="menu-link px-3"> Remove </a>
|
||
|
|
</div>
|
||
|
|
<!--end::Menu item-->
|
||
|
|
|
||
|
|
<!--begin::Menu item-->
|
||
|
|
<div class="menu-item px-3">
|
||
|
|
<a href="#" class="menu-link px-3"> Mute </a>
|
||
|
|
</div>
|
||
|
|
<!--end::Menu item-->
|
||
|
|
|
||
|
|
<!--begin::Menu item-->
|
||
|
|
<div class="menu-item px-3">
|
||
|
|
<a href="#" class="menu-link px-3"> Settings </a>
|
||
|
|
</div>
|
||
|
|
<!--end::Menu item-->
|
||
|
|
</div>
|
||
|
|
<!--end::Menu-->
|
||
|
|
|
||
|
|
<!--end::Menu-->
|
||
|
|
</div>
|
||
|
|
<switch-component
|
||
|
|
@change-mode="lastSearchInListMode = !lastSearchInListMode"
|
||
|
|
name="last-serach"
|
||
|
|
></switch-component>
|
||
|
|
<!--end::Toolbar-->
|
||
|
|
</div>
|
||
|
|
<!--end::Header-->
|
||
|
|
|
||
|
|
<!--begin::Body-->
|
||
|
|
<div class="card-body pt-5">
|
||
|
|
<!--begin::Chart container-->
|
||
|
|
<div
|
||
|
|
id="kt_charts_widget_15_chart"
|
||
|
|
class="min-h-auto ps-6 pe-6 mb-3 h-300px"
|
||
|
|
dir="ltr"
|
||
|
|
style="direction: ltr"
|
||
|
|
>
|
||
|
|
<ChartMyList
|
||
|
|
v-if="lastSearchInListMode"
|
||
|
|
:items="countData"
|
||
|
|
:height="'30em'"
|
||
|
|
></ChartMyList>
|
||
|
|
|
||
|
|
<WordCloud
|
||
|
|
width="100%"
|
||
|
|
v-else
|
||
|
|
:data="countData"
|
||
|
|
class="h-100 position-relative"
|
||
|
|
></WordCloud>
|
||
|
|
|
||
|
|
<!-- <pie-chart
|
||
|
|
v-else
|
||
|
|
:data="countData"
|
||
|
|
class="h-100 position-relative"
|
||
|
|
></pie-chart> -->
|
||
|
|
</div>
|
||
|
|
<!--end::Chart container-->
|
||
|
|
</div>
|
||
|
|
<!--end::Body-->
|
||
|
|
</div>
|
||
|
|
<!--end::Chart widget 15-->
|
||
|
|
</div>
|
||
|
|
<!--end::Col-->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { mapActions, mapState } from "pinia";
|
||
|
|
// import HttpService from "~/services/httpService";
|
||
|
|
import reportExtension from "~/extensions/reportExtension";
|
||
|
|
import { useCommonStore } from "~/stores/commonStore";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
extends: reportExtension,
|
||
|
|
|
||
|
|
// beforeMount() {
|
||
|
|
// this.permitHttpService = new HttpService(
|
||
|
|
// import.meta.env.VITE_PERMIT_BASE_URL
|
||
|
|
// );
|
||
|
|
// },
|
||
|
|
mounted() {
|
||
|
|
const vm = this;
|
||
|
|
// ,vm.getData("nokeys")
|
||
|
|
Promise.allSettled([vm.getData("last", 20), vm.getData("count")]).then(
|
||
|
|
function (results) {
|
||
|
|
results.forEach((result, index) => {
|
||
|
|
if (result.status === "fulfilled" && result.value.length)
|
||
|
|
result.value?.forEach((element) => {
|
||
|
|
if (index == 0)
|
||
|
|
vm.lastData.push({
|
||
|
|
name: element.key,
|
||
|
|
y: element.doc_count,
|
||
|
|
});
|
||
|
|
else if (index == 1)
|
||
|
|
vm.countData.push({
|
||
|
|
// for list
|
||
|
|
category: element.key,
|
||
|
|
value: element.doc_count,
|
||
|
|
// for cload chart
|
||
|
|
name: element.key,
|
||
|
|
weight: element.doc_count,
|
||
|
|
});
|
||
|
|
// else if (index == 1)
|
||
|
|
// vm.noKeysData.push({
|
||
|
|
// category: element.key,
|
||
|
|
// value: element.doc_count,
|
||
|
|
// });
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
vm.showCharts = true;
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
lastSearchInListMode: true,
|
||
|
|
topRepeatInListMode: true,
|
||
|
|
systems: [],
|
||
|
|
db: undefined,
|
||
|
|
permitHttpService: undefined,
|
||
|
|
lastData: [],
|
||
|
|
noKeysData: [],
|
||
|
|
countData: [],
|
||
|
|
showCharts: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapState(useCommonStore, ["isSidebarCollapsed"]),
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapActions(useCommonStore, [
|
||
|
|
"activeSystemSetter",
|
||
|
|
"getSystems",
|
||
|
|
"setBodyClass",
|
||
|
|
]),
|
||
|
|
|
||
|
|
projectIcon(name) {
|
||
|
|
try {
|
||
|
|
return import(`assets/common/img/logo/${name}.svg`).default;
|
||
|
|
} catch (err) {
|
||
|
|
try {
|
||
|
|
return import(`assets/common/img/logo/${name}.jpg`).default;
|
||
|
|
} catch (err) {
|
||
|
|
return import("assets/common/img/default.svg").default;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
redirectTo(project) {
|
||
|
|
if (project.loading) return;
|
||
|
|
this.$set(project, "loading", true);
|
||
|
|
|
||
|
|
// clearBodyClass();
|
||
|
|
this.activeSystemSetter(project);
|
||
|
|
|
||
|
|
if (isValidHttpUrl(project.link)) {
|
||
|
|
redirectToExternalLink(project.link, true);
|
||
|
|
this.$set(project, "loading", false);
|
||
|
|
} else {
|
||
|
|
this.$router
|
||
|
|
.push("/" + project.link)
|
||
|
|
|
||
|
|
.then((res) => {
|
||
|
|
this.$set(project, "loading", false);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
ChartMyList: defineAsyncComponent(() =>
|
||
|
|
import("@/components/dashboard/default/ChartMyList.vue")
|
||
|
|
),
|
||
|
|
WordCloud: defineAsyncComponent(() =>
|
||
|
|
import("@/components/charts/WordCloud.vue")
|
||
|
|
),
|
||
|
|
Bar: defineAsyncComponent(() =>
|
||
|
|
import("@/components/charts/Bar.vue")
|
||
|
|
),
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import "../../../assets/auth/signup";
|
||
|
|
|
||
|
|
.dashboard-bg {
|
||
|
|
// background-image: url(../../../../assets/common/img/main-bg.png);
|
||
|
|
background-size: 14em;
|
||
|
|
background-position: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
// .modules-selection-page {
|
||
|
|
// .navbar {
|
||
|
|
// margin-right: 0;
|
||
|
|
|
||
|
|
// .sidebar-toggler {
|
||
|
|
// display: none;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
.dashboard-page {
|
||
|
|
height: calc(100vh - 4em);
|
||
|
|
// height: calc(100vh - 0px);
|
||
|
|
// overflow-y: auto;
|
||
|
|
// display: flex;
|
||
|
|
// padding: 2em 0;
|
||
|
|
//background-color: #f7f7f7;
|
||
|
|
|
||
|
|
.row {
|
||
|
|
&.row-gap {
|
||
|
|
row-gap: 2em;
|
||
|
|
|
||
|
|
.lds-ring {
|
||
|
|
margin-left: 0;
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
transform: scale(2);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.no-text-decoration {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.text-dark {
|
||
|
|
color: var(--bs-text-dark) !important;
|
||
|
|
}
|
||
|
|
.pt-7 {
|
||
|
|
padding-top: 1.75rem !important;
|
||
|
|
}
|
||
|
|
.fw-bold {
|
||
|
|
font-weight: 600 !important;
|
||
|
|
}
|
||
|
|
.text-dark {
|
||
|
|
color: var(--bs-text-dark) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fw-semibold {
|
||
|
|
font-weight: 500 !important;
|
||
|
|
}
|
||
|
|
.fs-6 {
|
||
|
|
font-size: 1.075rem !important;
|
||
|
|
}
|
||
|
|
.text-gray-400 {
|
||
|
|
color: var(--bs-text-gray-400) !important;
|
||
|
|
}
|
||
|
|
.min-h-auto {
|
||
|
|
min-height: auto !important;
|
||
|
|
}
|
||
|
|
.ps-4 {
|
||
|
|
padding-left: 1rem !important;
|
||
|
|
}
|
||
|
|
.pe-6 {
|
||
|
|
padding-right: 1.5rem !important;
|
||
|
|
}
|
||
|
|
.h-300px {
|
||
|
|
// height: 300px !important;
|
||
|
|
height: 30em !important;
|
||
|
|
}
|
||
|
|
.card {
|
||
|
|
--bs-text-gray-400: #b5b5c3;
|
||
|
|
--bs-body-bg: #fff;
|
||
|
|
--bs-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
|
||
|
|
--bs-menu-dropdown-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
|
||
|
|
--bs-menu-dropdown-bg-color: var(--bs-body-bg);
|
||
|
|
|
||
|
|
--bs-card-spacer-y: 1rem;
|
||
|
|
--bs-card-spacer-x: 1rem;
|
||
|
|
--bs-card-title-spacer-y: 0.5rem;
|
||
|
|
--bs-card-title-color: ;
|
||
|
|
--bs-card-subtitle-color: ;
|
||
|
|
--bs-card-border-width: 1px;
|
||
|
|
--bs-card-border-color: var(--bs-border-color);
|
||
|
|
--bs-card-border-radius: 0.625rem;
|
||
|
|
--bs-card-box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.02);
|
||
|
|
|
||
|
|
--bs-card-bg: #f8f9fa;
|
||
|
|
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
min-width: 0;
|
||
|
|
height: var(--bs-card-height);
|
||
|
|
word-wrap: break-word;
|
||
|
|
// background-color: var(--bs-card-bg);
|
||
|
|
box-shadow: 0 0.4688rem 2.1875rem rgba(4, 9, 20, 0.03),
|
||
|
|
0 0.9375rem 1.4063rem rgba(4, 9, 20, 0.03),
|
||
|
|
0 0.25rem 0.5313rem rgba(4, 9, 20, 0.03),
|
||
|
|
0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
|
||
|
|
background-clip: border-box;
|
||
|
|
border: var(--bs-card-border-width) solid var(--bs-card-border-color);
|
||
|
|
border-radius: var(--bs-card-border-radius);
|
||
|
|
// box-shadow: var(--bs-card-box-shadow);
|
||
|
|
border: 0;
|
||
|
|
|
||
|
|
&.card-flush > .card-header {
|
||
|
|
border-bottom: 0 !important;
|
||
|
|
}
|
||
|
|
.card-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: stretch;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
min-height: 70px;
|
||
|
|
padding: 0 2.25rem;
|
||
|
|
color: var(--bs-card-cap-color);
|
||
|
|
background-color: var(--bs-card-cap-bg);
|
||
|
|
border-bottom: 1px solid var(--bs-card-border-color);
|
||
|
|
|
||
|
|
.card-title {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin: 0.5rem;
|
||
|
|
margin-left: 0;
|
||
|
|
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 1rem;
|
||
|
|
color: var(--bs-text-dark);
|
||
|
|
|
||
|
|
&.flex-column {
|
||
|
|
align-items: flex-start;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-label {
|
||
|
|
margin: 0 0.75rem 0 0;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 1rem;
|
||
|
|
color: var(--bs-text-dark);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-toolbar {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin: 0.5rem 0;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-body {
|
||
|
|
padding: 2rem 2.25rem;
|
||
|
|
color: var(--bs-card-color);
|
||
|
|
flex: 1 1 auto;
|
||
|
|
padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
|
||
|
|
color: var(--bs-card-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu-sub-dropdown {
|
||
|
|
border-radius: 0.475rem;
|
||
|
|
background-color: var(--bs-menu-dropdown-bg-color);
|
||
|
|
box-shadow: var(--bs-menu-dropdown-box-shadow);
|
||
|
|
z-index: 107;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
</style>
|