mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-09 23:48:36 +01:00
rewrite litlyx
This commit is contained in:
@@ -68,11 +68,14 @@ function openExternalLink(link: string) {
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="rawButton" class="hidden lg:flex">
|
||||
<div @click="$emit('showRawData')"
|
||||
class="cursor-pointer flex gap-1 items-center justify-center font-semibold poppins rounded-lg text-[#5680f8] hover:text-[#5681f8ce]">
|
||||
<div> Raw data </div>
|
||||
<div class="flex items-center"> <i class="fas fa-arrow-up-right"></i> </div>
|
||||
</div>
|
||||
|
||||
<LyxUiButton @click="$emit('showRawData')" type="primary" class="h-fit">
|
||||
<div class="flex gap-1 items-center justify-center ">
|
||||
<div> Show raw data </div>
|
||||
<div class="flex items-center"> <i class="fas fa-arrow-up-right"></i> </div>
|
||||
</div>
|
||||
</LyxUiButton>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -48,9 +48,9 @@ function goToView() {
|
||||
<div class="flex flex-col gap-2 h-full">
|
||||
<BarCardBase :hideShowMore="true" @showGeneral="showGeneral()" @showRawData="goToView()"
|
||||
@dataReload="currentData.refresh()" @showDetails="showDetails" :data="currentData.data.value || []"
|
||||
:loading="currentData.pending.value" :label="isPagesView ? 'Top pages' : 'Top Websites'"
|
||||
:sub-label="isPagesView ? 'Page' : 'Website'"
|
||||
:desc="isPagesView ? 'Most visited pages' : 'Most visited website in this project'"
|
||||
:loading="currentData.pending.value" :label="isPagesView ? 'Top pages' : 'Top Domains'"
|
||||
:sub-label="isPagesView ? 'Page' : 'Domains'"
|
||||
:desc="isPagesView ? 'Most visited pages' : 'Most visited domains in this project'"
|
||||
:interactive="!isPagesView" :rawButton="!isLiveDemo()" :isDetailView="isPagesView">
|
||||
</BarCardBase>
|
||||
</div>
|
||||
|
||||
@@ -136,7 +136,7 @@ const selectLabels: { label: string, value: Slice }[] = [
|
||||
{ label: 'Month', value: 'month' },
|
||||
];
|
||||
|
||||
const selectedSlice = computed(()=>selectLabels[selectedLabelIndex.value].value);
|
||||
const selectedSlice = computed(() => selectLabels[selectedLabelIndex.value].value);
|
||||
|
||||
const selectedLabelIndex = ref<number>(1);
|
||||
const allDatesFull = ref<string[]>([]);
|
||||
@@ -233,7 +233,13 @@ function onLegendChange(dataset: any, index: number, checked: any) {
|
||||
dataset.hidden = !checked;
|
||||
}
|
||||
|
||||
const legendColors = ['#5655d7', '#4abde8', '#fbbf24']
|
||||
const legendColors = ref<string[]>(['#5655d7', '#4abde8', '#fbbf24'])
|
||||
const legendClasses = ref<string[]>([
|
||||
'actionable-visits-color-checkbox',
|
||||
'actionable-sessions-color-checkbox',
|
||||
'actionable-events-color-checkbox'
|
||||
])
|
||||
|
||||
|
||||
const inLiveDemo = isLiveDemo();
|
||||
|
||||
@@ -256,9 +262,11 @@ const inLiveDemo = isLiveDemo();
|
||||
</LyxUiButton>
|
||||
<div class="flex gap-6">
|
||||
<div v-for="(dataset, index) of chartData.datasets" class="flex gap-2 items-center text-[.9rem]">
|
||||
|
||||
<UCheckbox :ui="{
|
||||
color: `text-[${legendColors[index]}]`
|
||||
color: legendClasses[index]
|
||||
}" :model-value="true" @change="onLegendChange(dataset, index, $event)"></UCheckbox>
|
||||
|
||||
<label class="mt-[2px]"> {{ dataset.label }} </label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -30,18 +30,20 @@ const uTooltipText = computed(() => {
|
||||
<LyxUiCard class="flex !p-0 flex-col overflow-hidden relative max-h-[12rem] aspect-[2/1] w-full">
|
||||
<div v-if="ready" class="flex p-4 items-start">
|
||||
<div class="flex items-center mt-2 mr-4">
|
||||
<i :style="`color: ${props.color}`" :class="icon" class="text-[1.6rem] 2xl:text-[2rem]"></i>
|
||||
<i :style="`color: ${props.color}`" :class="icon" class="text-[1.3rem] 2xl:text-[1.5rem]"></i>
|
||||
</div>
|
||||
<div class="flex flex-col grow">
|
||||
<div class="flex items-end gap-2">
|
||||
<div class="brockmann text-text-dirty text-[1.6rem] 2xl:text-[1.9rem]"> {{ value }} </div>
|
||||
<div class="poppins text-text-sub text-[.7rem] 2xl:text-[.85rem] mb-2"> {{ avg }} </div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="brockmann text-text-dirty text-[1.2rem] 2xl:text-[1.4rem]">
|
||||
{{ value }}
|
||||
</div>
|
||||
<div class="poppins text-text-sub text-[.65rem] 2xl:text-[.8rem]"> {{ avg }} </div>
|
||||
</div>
|
||||
<div class="poppins text-text-sub text-[.9rem] 2xl:text-base"> {{ text }} </div>
|
||||
<div class="poppins text-text-sub text-[.9rem] 2xl:text-[1rem]"> {{ text }} </div>
|
||||
</div>
|
||||
<div v-if="trend" class="flex flex-col items-center gap-1">
|
||||
<UTooltip :text="uTooltipText">
|
||||
<div class="flex items-center gap-3 rounded-xl px-2 py-1"
|
||||
<div class="flex items-center gap-3 rounded-md px-2 py-1"
|
||||
:style="`background-color: ${props.color}33`">
|
||||
<i :class="trend > 0 ? 'fa-arrow-trend-up' : 'fa-arrow-trend-down'"
|
||||
class="far text-[.9rem] 2xl:text-[1rem]" :style="`color: ${props.color}`"></i>
|
||||
|
||||
Reference in New Issue
Block a user