Skip to content

feat: added time frame granularity to urls for reports #1452

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Oct 4, 2023
Merged

feat: added time frame granularity to urls for reports #1452

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5ce9ef7
feat: added time frame granularity to urls for reports
Pradumn27 Sep 9, 2023
af7e84d
Merge branch 'main' into feat/time-frame-in-report-urls
Pradumn27 Sep 13, 2023
fbc9de3
fix: lint errors and added comments
Pradumn27 Sep 21, 2023
4eff821
Merge branch 'main' into feat/time-frame-in-report-urls
Pradumn27 Sep 21, 2023
12d96b6
fix: changes selected platforms to be separated by commas
Pradumn27 Sep 25, 2023
9c0e7d4
chore: removed unused reactive
Pradumn27 Sep 28, 2023
dbaa7ff
Merge branch 'main' into feat/time-frame-in-report-urls
Pradumn27 Sep 28, 2023
5290a91
Merge branch 'main' into feat/time-frame-in-report-urls
Pradumn27 Oct 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 87 additions & 28 deletions frontend/src/modules/report/components/templates/report-template-filters.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
<template>
<div class="border-t border-gray-200">
<div
class="flex items-center gap-6 py-4 max-w-5xl mx-auto px-8"
>
<div class="flex items-center gap-6 py-4 max-w-5xl mx-auto px-8">
<app-filter-list-item
v-if="showPlatform"
:filter="platform"
Expand All @@ -12,17 +10,14 @@
>
<template #button>
<div class="relative">
<el-button
class="custom-btn"
@click="handleOpenPlatform"
>
<el-button class="custom-btn" @click="handleOpenPlatform">
<div class="flex items-center gap-2">
<i class="ri-apps-2-line" /><span
class="font-medium"
>Platforms:
<i class="ri-apps-2-line" /><span class="font-medium"
>Platforms:
<span class="font-normal text-gray-600">{{
platformLabel
}}</span></span>
}}</span></span
>
</div>
</el-button>
<div
Expand All @@ -33,7 +28,11 @@
</template>
<template #optionPrefix="{ item }">
<img
v-if="item.value && platformOptions(item.value) && platformOptions(item.value).image"
v-if="
item.value &&
platformOptions(item.value) &&
platformOptions(item.value).image
"
:src="platformOptions(item.value).image"
:alt="platformOptions(item.value).name"
class="w-4 h-4 mr-2"
Expand All @@ -42,10 +41,7 @@
</template>
</app-filter-list-item>

<div
v-if="showTeamMembers"
class="flex gap-2 items-center"
>
<div v-if="showTeamMembers" class="flex gap-2 items-center">
<el-switch
class="switch-filter !ml-0"
:model-value="teamMembers"
Expand All @@ -55,10 +51,7 @@
/>
</div>

<div
v-if="showTeamActivities"
class="flex gap-2 items-center"
>
<div v-if="showTeamActivities" class="flex gap-2 items-center">
<el-switch
class="switch-filter !ml-0"
:model-value="teamActivities"
Expand All @@ -72,9 +65,10 @@
</template>

<script setup>
import { computed, defineEmits, defineProps } from 'vue';
import { computed, defineEmits, defineProps, reactive } from 'vue';
import AppFilterListItem from '@/shared/filter/components/filter-list-item.vue';
import { CrowdIntegrations } from '@/integrations/integrations-config';
import { useRoute, useRouter } from 'vue-router';

const emit = defineEmits([
'update:platform',
Expand All @@ -91,26 +85,28 @@ const props = defineProps({
},
teamMembers: {
type: Boolean,
defaul: null,
default: null,
},
teamActivities: {
type: Boolean,
defaul: null,
default: null,
},
showPlatform: {
type: Boolean,
defaul: true,
default: true,
},
showTeamMembers: {
type: Boolean,
defaul: true,
default: true,
},
showTeamActivities: {
type: Boolean,
defaul: false,
default: false,
},
});

const route = useRoute();
const router = useRouter();
const hasSelectedPlatform = computed(() => !!props.platform.value.length);
const platformLabel = computed(() => {
if (!hasSelectedPlatform.value) {
Expand All @@ -120,28 +116,91 @@ const platformLabel = computed(() => {
return props.platform.value.map((v) => v.label).join(', ');
});

const platformOptions = (platform) => CrowdIntegrations.getConfig(platform);
if (!!route.query.selectedPlatforms) {
const platformsValues = route.query.selectedPlatforms.split(' ');
const platforms = platformsValues
.map((value) => {
const platform = platformOptions(value);
if (!platform) {
return null;
}

return {
value,
label: platform.name,
selected: false,
};
})
.filter((v) => !!v);

emit('update:platform', {
...props.platform,
value: platforms,
expanded: false,
operator: null,
include: true,
});
emit('trackFilters');
}

const onPlatformChange = (newPlatform) => {
router.replace({
query: {
...route.query,
selectedPlatforms: newPlatform.value.map((v) => v.value).join(' '),
},
});
console.log({ newPlatform });
emit('update:platform', newPlatform);
emit('trackFilters');
};
const onPlatformReset = () => {
router.replace({
query: {
...route.query,
selectedPlatforms: '',
},
});
emit('reset');
emit('trackFilters');
};

if (route.query.showTeamMembers === 'true') {
emit('update:teamMembers', true);
emit('trackFilters');
}

const onTeamMembersChange = (value) => {
router.replace({
query: {
...route.query,
showTeamMembers: value,
},
});
emit('update:teamMembers', value);
emit('trackFilters');
};

if (route.query.showTeamActivities === 'true') {
emit('update:teamActivities', true);
emit('trackFilters');
}

const onTeamActivitiesChange = (value) => {
router.replace({
query: {
...route.query,
showTeamActivities: value,
},
});
emit('update:teamActivities', value);
emit('trackFilters');
};

const handleOpenPlatform = () => {
emit('open');
};

const platformOptions = (platform) => CrowdIntegrations.getConfig(platform);
</script>

<style lang="scss">
Expand Down
30 changes: 21 additions & 9 deletions frontend/src/modules/widget/components/activity/widget-activities-leaderboard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@
class="flex grow justify-between items-center pb-5 border-b border-gray-100 mb-8"
>
<div class="flex gap-1">
<app-widget-title
:title="ACTIVITIES_LEADERBOARD_WIDGET.name"
/>
<app-widget-title :title="ACTIVITIES_LEADERBOARD_WIDGET.name" />
</div>
<app-widget-period
:template="ACTIVITIES_REPORT.nameAsId"
Expand All @@ -25,10 +23,7 @@
:limit="10"
>
<template #button="{ showButton }">
<div
v-if="showButton"
class="flex justify-end"
>
<div v-if="showButton" class="flex justify-end">
<el-button
class="btn btn-link btn-link--primary mt-4 !h-8"
@click="handleDrawerOpen"
Expand Down Expand Up @@ -61,12 +56,16 @@

<script setup>
import { SEVEN_DAYS_PERIOD_FILTER } from '@/modules/widget/widget-constants';
import { getSelectedPeriodFromLabel } from '@/modules/widget/widget-utility';
import { ref } from 'vue';
import AppWidgetTitle from '@/modules/widget/components/shared/widget-title.vue';
import AppWidgetPeriod from '@/modules/widget/components/shared/widget-period.vue';
import AppWidgetCubeDrawer from '@/modules/widget/components/shared/widget-cube-drawer.vue';
import ACTIVITIES_REPORT, { ACTIVITIES_LEADERBOARD_WIDGET } from '@/modules/report/templates/config/activities';
import ACTIVITIES_REPORT, {
ACTIVITIES_LEADERBOARD_WIDGET,
} from '@/modules/report/templates/config/activities';
import AppWidgetActivitiesTypeList from '@/modules/widget/components/activity/widget-activities-type-list.vue';
import { useRoute, useRouter } from 'vue-router';

defineProps({
filters: {
Expand All @@ -75,14 +74,27 @@ defineProps({
},
});

const route = useRoute();
const router = useRouter();
const drawerExpanded = ref();
const drawerTitle = ref('Leaderboard: Activities by type');

const selectedPeriod = ref(SEVEN_DAYS_PERIOD_FILTER);
const selectedPeriod = ref(
getSelectedPeriodFromLabel(
route.query.leaderboardActivitiesByTypePeriod,
SEVEN_DAYS_PERIOD_FILTER
)
);
const drawerSelectedPeriod = ref(SEVEN_DAYS_PERIOD_FILTER);

const onUpdatePeriod = (updatedPeriod) => {
selectedPeriod.value = updatedPeriod;
router.replace({
query: {
...route.query,
leaderboardActivitiesByTypePeriod: updatedPeriod.label,
},
});
};

const onDrawerUpdatePeriod = (updatedPeriod) => {
Expand Down
44 changes: 28 additions & 16 deletions frontend/src/modules/widget/components/activity/widget-activities-platform.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@
class="flex grow justify-between items-center pb-5 border-b border-gray-100 mb-8"
>
<div class="flex gap-1">
<app-widget-title
:title="ACTIVITIES_PLATFORM_WIDGET.name"
/>
<app-widget-title :title="ACTIVITIES_PLATFORM_WIDGET.name" />
</div>
<app-widget-period
:template="ACTIVITIES_REPORT.nameAsId"
Expand All @@ -19,11 +17,7 @@
/>
</div>

<query-renderer
v-if="cubejsApi"
:cubejs-api="cubejsApi"
:query="query"
>
<query-renderer v-if="cubejsApi" :cubejs-api="cubejsApi" :query="query">
<template #default="{ resultSet, loading }">
<app-widget-activities-platform-content
:loading="loading"
Expand All @@ -37,14 +31,18 @@

<script setup>
import { SEVEN_DAYS_PERIOD_FILTER } from '@/modules/widget/widget-constants';
import { getSelectedPeriodFromLabel } from '@/modules/widget/widget-utility';
import { computed, ref } from 'vue';
import AppWidgetTitle from '@/modules/widget/components/shared/widget-title.vue';
import AppWidgetPeriod from '@/modules/widget/components/shared/widget-period.vue';
import { QueryRenderer } from '@cubejs-client/vue3';
import { mapGetters } from '@/shared/vuex/vuex.helpers';
import { LEADERBOARD_ACTIVITIES_TYPES_QUERY } from '@/modules/widget/widget-queries';
import ACTIVITIES_REPORT, { ACTIVITIES_PLATFORM_WIDGET } from '@/modules/report/templates/config/activities';
import ACTIVITIES_REPORT, {
ACTIVITIES_PLATFORM_WIDGET,
} from '@/modules/report/templates/config/activities';
import AppWidgetActivitiesPlatformContent from './widget-activities-platform-content.vue';
import { useRoute, useRouter } from 'vue-router';

const props = defineProps({
filters: {
Expand All @@ -55,18 +53,32 @@ const props = defineProps({

const { cubejsApi } = mapGetters('widget');

const selectedPeriod = ref(SEVEN_DAYS_PERIOD_FILTER);
const route = useRoute();
const router = useRouter();
const selectedPeriod = ref(
getSelectedPeriodFromLabel(
route.query.activitiesByPlatformPeriod,
SEVEN_DAYS_PERIOD_FILTER
)
);

const query = computed(() => LEADERBOARD_ACTIVITIES_TYPES_QUERY({
period: selectedPeriod.value,
selectedPlatforms: props.filters.platform.value,
selectedHasTeamActivities: props.filters.teamActivities,
}));
const query = computed(() =>
LEADERBOARD_ACTIVITIES_TYPES_QUERY({
period: selectedPeriod.value,
selectedPlatforms: props.filters.platform.value,
selectedHasTeamActivities: props.filters.teamActivities,
})
);

const onUpdatePeriod = (updatedPeriod) => {
selectedPeriod.value = updatedPeriod;
router.replace({
query: {
...route.query,
activitiesByPlatformPeriod: updatedPeriod.label,
},
});
};

</script>
<script>
export default {
Expand Down
Loading