Merge branch 'develop'

3 files changed, 51 insertions, 19 deletions

diff --git a/packages/client/src/components/chart.vue b/packages/client/src/components/chart.vue
index ced0d481c4..b90c790c3f 100644
--- a/packages/client/src/components/chart.vue
+++ b/packages/client/src/components/chart.vue
@@ -213,17 +213,18 @@ export default defineComponent({
 						data: x.data.slice().reverse(),
 						tension: 0.3,
 						pointRadius: 0,
-						borderWidth: 2,
+						borderWidth: props.bar ? 0 : 2,
 						borderColor: x.color ? x.color : getColor(i),
 						borderDash: x.borderDash || [],
 						borderJoinStyle: 'round',
-						backgroundColor: alpha(x.color ? x.color : getColor(i), 0.1),
-						gradient: {
+						borderRadius: props.bar ? 3 : undefined,
+						backgroundColor: props.bar ? (x.color ? x.color : getColor(i)) : alpha(x.color ? x.color : getColor(i), 0.1),
+						gradient: props.bar ? undefined : {
 							backgroundColor: {
 								axis: 'y',
 								colors: {
 									0: alpha(x.color ? x.color : getColor(i), 0),
-									[maxes[i]]: alpha(x.color ? x.color : getColor(i), 0.1),
+									[maxes[i]]: alpha(x.color ? x.color : getColor(i), 0.15),
 								},
 							},
 						},
@@ -248,6 +249,7 @@ export default defineComponent({
 						x: {
 							type: 'time',
 							stacked: props.stacked,
+							offset: false,
 							time: {
 								stepSize: 1,
 								unit: props.span === 'day' ? 'month' : 'day',
@@ -271,6 +273,7 @@ export default defineComponent({
 						y: {
 							position: 'left',
 							stacked: props.stacked,
+							suggestedMax: 100,
 							grid: {
 								color: gridColor,
 								borderColor: 'rgb(0, 0, 0, 0)',
@@ -308,7 +311,7 @@ export default defineComponent({
 							},
 							external: externalTooltipHandler,
 						},
-						zoom: {
+						zoom: props.detailed ? {
 							pan: {
 								enabled: true,
 							},
@@ -334,7 +337,7 @@ export default defineComponent({
 									max: 'original',
 								},
 							}
-						},
+						} : undefined,
 						gradient,
 					},
 				},
@@ -370,14 +373,14 @@ export default defineComponent({
 			const raw = await os.api('charts/federation', { limit: props.limit, span: props.span });
 			return {
 				series: [{
-					name: 'Total',
+					name: 'Sub',
 					type: 'area',
-					data: format(raw.instance.total),
-					color: '#888888',
+					data: format(raw.sub),
+					color: colors.orange,
 				}, {
-					name: 'Inc/Dec',
+					name: 'Pub',
 					type: 'area',
-					data: format(sum(raw.instance.inc, negate(raw.instance.dec))),
+					data: format(raw.pub),
 					color: colors.purple,
 				}, {
 					name: 'Received',
@@ -426,7 +429,6 @@ export default defineComponent({
 				series: [{
 					name: 'All',
 					type: 'line',
-					borderDash: [5, 5],
 					data: format(type == 'combined'
 						? sum(raw.local.inc, negate(raw.local.dec), raw.remote.inc, negate(raw.remote.dec))
 						: sum(raw[type].inc, negate(raw[type].dec))
@@ -750,20 +752,28 @@ export default defineComponent({
 				series: [...(props.args.withoutAll ? [] : [{
 					name: 'All',
 					type: 'line',
-					borderDash: [5, 5],
 					data: format(sum(raw.inc, negate(raw.dec))),
+					color: '#888888',
 				}]), {
+					name: 'With file',
+					type: 'area',
+					data: format(raw.diffs.withFile),
+					color: colors.purple,
+				}, {
 					name: 'Renotes',
 					type: 'area',
 					data: format(raw.diffs.renote),
+					color: colors.green,
 				}, {
 					name: 'Replies',
 					type: 'area',
 					data: format(raw.diffs.reply),
+					color: colors.yellow,
 				}, {
 					name: 'Normal',
 					type: 'area',
 					data: format(raw.diffs.normal),
+					color: colors.blue,
 				}],
 			};
 		};
diff --git a/packages/client/src/components/emoji-picker.vue b/packages/client/src/components/emoji-picker.vue
index 3e1208979f..8601ea121c 100644
--- a/packages/client/src/components/emoji-picker.vue
+++ b/packages/client/src/components/emoji-picker.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="omfetrab" :class="['w' + width, 'h' + height, { big, asDrawer }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
+<div class="omfetrab" :class="['s' + size, 'w' + width, 'h' + height, { asDrawer }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
 	<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" @paste.stop="paste" @keyup.enter="done()">
 	<div ref="emojis" class="emojis">
 		<section class="result">
@@ -105,15 +105,16 @@ const emojis = ref<HTMLDivElement>();
 
 const {
 	reactions: pinned,
+	reactionPickerSize,
 	reactionPickerWidth,
 	reactionPickerHeight,
 	disableShowingAnimatedImages,
 	recentlyUsedEmojis,
 } = defaultStore.reactiveState;
 
+const size = computed(() => props.asReactionPicker ? reactionPickerSize.value : 1);
 const width = computed(() => props.asReactionPicker ? reactionPickerWidth.value : 3);
 const height = computed(() => props.asReactionPicker ? reactionPickerHeight.value : 2);
-const big = props.asReactionPicker ? isTouchUsing : false;
 const customEmojiCategories = emojiCategories;
 const customEmojis = instance.emojis;
 const q = ref<string | null>(null);
@@ -345,13 +346,20 @@ defineExpose({
 <style lang="scss" scoped>
 .omfetrab {
 	$pad: 8px;
-	--eachSize: 40px;
 
 	display: flex;
 	flex-direction: column;
 
-	&.big {
-		--eachSize: 44px;
+	&.s1 {
+		--eachSize: 40px;
+	}
+
+	&.s2 {
+		--eachSize: 45px;
+	}
+
+	&.s3 {
+		--eachSize: 50px;
 	}
 
 	&.w1 {
@@ -369,6 +377,16 @@ defineExpose({
 		--columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 	}
 
+	&.w4 {
+		width: calc((var(--eachSize) * 8) + (#{$pad} * 2));
+		--columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+	}
+
+	&.w5 {
+		width: calc((var(--eachSize) * 9) + (#{$pad} * 2));
+		--columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+	}
+
 	&.h1 {
 		height: calc((var(--eachSize) * 4) + (#{$pad} * 2));
 	}
@@ -381,6 +399,10 @@ defineExpose({
 		height: calc((var(--eachSize) * 8) + (#{$pad} * 2));
 	}
 
+	&.h4 {
+		height: calc((var(--eachSize) * 10) + (#{$pad} * 2));
+	}
+
 	&.asDrawer {
 		width: 100% !important;
 
diff --git a/packages/client/src/components/instance-stats.vue b/packages/client/src/components/instance-stats.vue
index d2aa5a151a..f386a8de9a 100644
--- a/packages/client/src/components/instance-stats.vue
+++ b/packages/client/src/components/instance-stats.vue
@@ -59,7 +59,7 @@ export default defineComponent({
 
 	setup() {
 		const chartSpan = ref<'hour' | 'day'>('hour');
-		const chartSrc = ref('notes');
+		const chartSrc = ref('active-users');
 
 		return {
 			chartSrc,