Skip to content

Commit

Permalink
feat(analytics): move numeric card to analytics package
Browse files Browse the repository at this point in the history
  • Loading branch information
shigma committed Dec 16, 2023
1 parent 4d02ff5 commit 3d1ee19
Show file tree
Hide file tree
Showing 10 changed files with 177 additions and 180 deletions.
67 changes: 0 additions & 67 deletions packages/client/app/home/home.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,6 @@
<k-slot-item :order="1000">
<welcome></welcome>
</k-slot-item>
<k-slot-item :order="0">
<div class="card-grid profile-grid"><k-slot name="numeric"></k-slot></div>
<div class="card-grid chart-grid"><k-slot name="chart"></k-slot></div>
</k-slot-item>
</k-slot>
</el-scrollbar>
<div v-else>
Expand Down Expand Up @@ -55,67 +51,4 @@ import Welcome from './welcome.vue'
}
}
.card-grid {
display: grid;
margin: var(--card-margin);
grid-gap: var(--card-margin);
}
.profile-grid {
grid-template-columns: repeat(3, 1fr);
@media screen and (min-width: 1440px) {
grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 1024px) {
grid-template-columns: repeat(2, 1fr);
}
}
.chart-grid {
.echarts {
max-width: 100%;
margin: 0 auto;
}
@media (min-width: 1024px) {
grid-template-columns: repeat(2, 1fr);
@media (min-width: 1600px) {
.echarts {
width: 600px;
height: 400px;
max-width: 100%;
margin: 0 auto;
}
}
@media (max-width: 1600px) {
.echarts {
width: 480px;
height: 360px;
}
}
}
@media (max-width: 1024px) {
grid-template-columns: 1fr;
@media (min-width: 768px) {
.echarts {
width: 800px;
height: 400px;
}
}
@media (max-width: 768px) {
.echarts {
width: 600px;
height: 400px;
}
}
}
}
</style>
2 changes: 0 additions & 2 deletions packages/client/app/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ root.plugin(status)
root.plugin(styles)
root.plugin(theme)

root.app.provide('ecTheme', 'dark-blue')

root.app.mount('#app')

if (!global.static) {
Expand Down
2 changes: 0 additions & 2 deletions packages/client/client/components/layout/index.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import { App } from 'vue'
import CardNumeric from './card-numeric.vue'
import Card from './card.vue'
import Content from './content.vue'
import Empty from './empty.vue'
import TabGroup from './tab-group.vue'
import TabItem from './tab-item.vue'

export default function (app: App) {
app.component('k-numeric', CardNumeric)
app.component('k-card', Card)
app.component('k-content', Content)
app.component('k-empty', Empty)
Expand Down
1 change: 0 additions & 1 deletion packages/client/client/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ export * from './config'
export * from './context'
export * from './loader'
export * from './data'
export * from './utils'

export default install

Expand Down
47 changes: 0 additions & 47 deletions packages/client/client/utils.ts

This file was deleted.

74 changes: 74 additions & 0 deletions plugins/analytics/client/home.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<template>
<div class="card-grid profile-grid"><k-slot name="numeric"></k-slot></div>
<div class="card-grid chart-grid"><k-slot name="chart"></k-slot></div>
</template>

<script lang="ts" setup>
</script>

<style lang="scss">
.card-grid {
display: grid;
margin: var(--card-margin);
grid-gap: var(--card-margin);
}
.profile-grid {
grid-template-columns: repeat(3, 1fr);
@media screen and (min-width: 1440px) {
grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 1024px) {
grid-template-columns: repeat(2, 1fr);
}
}
.chart-grid {
.echarts {
max-width: 100%;
margin: 0 auto;
}
@media (min-width: 1024px) {
grid-template-columns: repeat(2, 1fr);
@media (min-width: 1600px) {
.echarts {
width: 600px;
height: 400px;
max-width: 100%;
margin: 0 auto;
}
}
@media (max-width: 1600px) {
.echarts {
width: 480px;
height: 360px;
}
}
}
@media (max-width: 1024px) {
grid-template-columns: 1fr;
@media (min-width: 768px) {
.echarts {
width: 800px;
height: 400px;
}
}
@media (max-width: 768px) {
.echarts {
width: 600px;
height: 400px;
}
}
}
}
</style>
69 changes: 8 additions & 61 deletions plugins/analytics/client/index.ts
Original file line number Diff line number Diff line change
@@ -1,71 +1,18 @@
import { Card, defineExtension } from '@koishijs/client'
import { defineExtension } from '@koishijs/client'
import {} from '@koishijs/plugin-analytics/src'
import Charts from './charts'
import Numbers from './numbers'
import Home from './home.vue'
import './icons'

export default defineExtension((ctx) => {
// ctx.app.provide('ecTheme', 'koishi-dark')
ctx.plugin(Charts)

// 用户数量 群组数量 周均 DAU 当前 QPS
// 昨日新增用户 昨日新增群组 昨日 DAU 昨日 QPS

ctx.slot({
type: 'numeric',
component: Card.numeric({
title: '用户数量',
icon: 'heart',
fields: ['analytics'],
content: ({ analytics }) => analytics.userCount,
}),
})

ctx.slot({
type: 'numeric',
component: Card.numeric({
title: '群组数量',
icon: 'users',
fields: ['analytics'],
content: ({ analytics }) => analytics.guildCount,
}),
})

ctx.slot({
type: 'numeric',
component: Card.numeric({
title: '今日 DAU',
icon: 'heart',
fields: ['analytics'],
content: ({ analytics }) => analytics.dauHistory[0],
}),
})

ctx.slot({
type: 'numeric',
component: Card.numeric({
title: '昨日用户增量',
icon: 'heart',
fields: ['analytics'],
content: ({ analytics }) => analytics.userIncrement,
}),
})

ctx.slot({
type: 'numeric',
component: Card.numeric({
title: '昨日群组增量',
icon: 'users',
fields: ['analytics'],
content: ({ analytics }) => analytics.guildIncrement,
}),
})
ctx.plugin(Numbers)

ctx.slot({
type: 'numeric',
component: Card.numeric({
title: '上周 DAU',
icon: 'heart',
fields: ['analytics'],
content: ({ analytics }) => (analytics.dauHistory.slice(1).reduce((a, b) => a + b, 0) / 7).toFixed(1),
}),
type: 'home',
component: Home,
order: 0,
})
})
78 changes: 78 additions & 0 deletions plugins/analytics/client/numbers/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import { defineExtension } from '@koishijs/client'
import { createNumeric } from './utils'
import {} from '@koishijs/plugin-analytics/src'

export default defineExtension((ctx) => {
// 用户数量 群组数量 周均 DAU 当前 QPS
// 昨日新增用户 昨日新增群组 昨日 DAU 昨日 QPS

ctx.slot({
type: 'numeric',
component: createNumeric({
title: '用户数量',
icon: 'heart',
fields: ['analytics'],
content: ({ analytics }) => analytics.userCount,
}),
})

ctx.slot({
type: 'numeric',
component: createNumeric({
title: '群组数量',
icon: 'users',
fields: ['analytics'],
content: ({ analytics }) => analytics.guildCount,
}),
})

ctx.slot({
type: 'numeric',
component: createNumeric({
title: '今日 DAU',
icon: 'heart',
fields: ['analytics'],
content: ({ analytics }) => analytics.dauHistory[0],
}),
})

ctx.slot({
type: 'numeric',
component: createNumeric({
title: '当前 QPS',
icon: 'heart',
fields: ['analytics'],
content: ({ analytics }) => analytics.messageByHour[0].receive / 60,
}),
})

ctx.slot({
type: 'numeric',
component: createNumeric({
title: '昨日用户增量',
icon: 'heart',
fields: ['analytics'],
content: ({ analytics }) => analytics.userIncrement,
}),
})

ctx.slot({
type: 'numeric',
component: createNumeric({
title: '昨日群组增量',
icon: 'users',
fields: ['analytics'],
content: ({ analytics }) => analytics.guildIncrement,
}),
})

ctx.slot({
type: 'numeric',
component: createNumeric({
title: '上周 DAU',
icon: 'heart',
fields: ['analytics'],
content: ({ analytics }) => (analytics.dauHistory.slice(1).reduce((a, b) => a + b, 0) / 7).toFixed(1),
}),
})
})
Loading

0 comments on commit 3d1ee19

Please sign in to comment.