Skip to content

Commit

Permalink
✨ 完成适配
Browse files Browse the repository at this point in the history 
大概）
  • Loading branch information
@shoucandanghehe
shoucandanghehe committed Aug 2, 2024
1 parent 70f93b5 commit 8b7f883
Show file tree
Hide file tree
Showing 33 changed files with 1,581 additions and 1,500 deletions.
9 changes: 7 additions & 2 deletions src/schemas/rank.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { z } from "zod";

const Rank = z.union([
const ValidRank = z.union([
z.literal("x"),
z.literal("u"),
z.literal("ss"),
Expand All @@ -18,7 +18,12 @@ const Rank = z.union([
z.literal("c-"),
z.literal("d+"),
z.literal("d"),
z.literal("z"),
]);

const Rank = z.union([ValidRank, z.literal("z")]);

type ValidRank = z.infer<typeof ValidRank>;
type Rank = z.infer<typeof Rank>;

export default Rank;
export { Rank, ValidRank };
188 changes: 90 additions & 98 deletions src/v1/components/info/chart/tr-chart.vue
View file
Original file line number Diff line number Diff line change
@@ -1,222 +1,214 @@
<script lang="ts" setup>
import point from '@/v1/assets/images/chart/point.svg?url'
import Chart from '@/v1/components/info/chart/_base.vue'
import type { TetraLeagueHistoryRecord } from '@/v1/types'
import point from "@/v1/assets/images/chart/point.svg?url";
import Chart from "@/v1/components/info/chart/_base.vue";
import type { TetraLeagueHistoryRecord } from "@/v1/types";
import type { LineSeriesOption } from 'echarts/charts'
import { LineChart } from 'echarts/charts'
import type { GridComponentOption, MarkLineComponentOption } from 'echarts/components'
import { GridComponent, MarkLineComponent } from 'echarts/components'
import type { ComposeOption } from 'echarts/core'
import { use } from 'echarts/core'
import type { LineSeriesOption } from "echarts/charts";
import { LineChart } from "echarts/charts";
import type { GridComponentOption, MarkLineComponentOption } from "echarts/components";
import { GridComponent, MarkLineComponent } from "echarts/components";
import type { ComposeOption } from "echarts/core";
import { use } from "echarts/core";
use([GridComponent, MarkLineComponent, LineChart])
use([GridComponent, MarkLineComponent, LineChart]);
const props = defineProps<{
readonly data: TetraLeagueHistoryRecord[]
readonly split_interval: number
readonly min_tr: number
readonly max_tr: number
readonly offset: number
}>()
readonly data: TetraLeagueHistoryRecord[];
readonly split_interval: number;
readonly min_tr: number;
readonly max_tr: number;
readonly offset: number;
}>();
type ChartOption = ComposeOption<GridComponentOption | MarkLineComponentOption | LineSeriesOption>
type ChartOption = ComposeOption<GridComponentOption | MarkLineComponentOption | LineSeriesOption>;
const option = computed<ChartOption>(() => {
const interval = 3600 * 24 * 1000
const interval = 3600 * 24 * 1000;
return {
animation: false,
grid: {
left: '-5%',
bottom: '17%',
width: '90%',
height: '70%'
left: "-5%",
bottom: "17%",
width: "90%",
height: "70%",
},
xAxis: {
type: 'time',
type: "time",
minInterval: interval,
maxInterval: interval,
axisTick: {
show: false
show: false,
},
axisLine: {
show: false
show: false,
},
axisLabel: {
formatter: (value, index) => {
const date = new Date(value)
const date = new Date(value);
if (index === 0 || index % 2 !== 0) {
return ''
return "";
}
const month = Number(date.getMonth() + 1)
.toString()
.padStart(2, '0')
.padStart(2, "0");
const day = date.getDate()
.toString()
.padStart(2, '0')
const day = date.getDate().toString().padStart(2, "0");
if (index === 10) {
return `{last_month|${month}}\n{last_day|${day}}`
return `{last_month|${month}}\n{last_day|${day}}`;
}
return `{month|${month}}\n{day|${day}}`
return `{month|${month}}\n{day|${day}}`;
},
rich: {
month: {
fontFamily: 'CabinetGrotesk-Variable',
fontFamily: "CabinetGrotesk-Variable",
fontSize: 13,
fontWeight: 400,
color: '#ffffff99'
color: "#ffffff99",
},
day: {
fontFamily: 'CabinetGrotesk-Variable',
fontFamily: "CabinetGrotesk-Variable",
fontSize: 20,
fontWeight: 800,
color: '#ffffff99'
color: "#ffffff99",
},
last_month: {
fontFamily: 'CabinetGrotesk-Variable',
fontFamily: "CabinetGrotesk-Variable",
fontSize: 13,
fontWeight: 400,
color: '#373533',
backgroundColor: '#fafafa',
color: "#373533",
backgroundColor: "#fafafa",
borderRadius: 6,
padding: [-10, 0, 10, 0],
width: 36,
height: 37,
lineHeight: 32
lineHeight: 32,
},
last_day: {
fontFamily: 'CabinetGrotesk-Variable',
fontFamily: "CabinetGrotesk-Variable",
fontSize: 20,
fontWeight: 800,
color: '#373533',
color: "#373533",
padding: [-18, 0, 0, 0],
lineHeight: 0
}
}
lineHeight: 0,
},
},
},
zlevel: 1
zlevel: 1,
},
yAxis: {
type: 'value',
type: "value",
interval: props.split_interval,
position: 'right',
position: "right",
splitLine: {
show: false
show: false,
},
axisLine: {
show: false
show: false,
},
axisLabel: {
align: 'right',
align: "right",
formatter: (value) => {
const tr = value.toString()
.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',')
const tr = value.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
return `{value|${tr}}`
return `{value|${tr}}`;
},
rich: {
value: {
fontFamily: 'CabinetGrotesk-Variable',
fontFamily: "CabinetGrotesk-Variable",
fontSize: 15,
fontWeight: 500,
color: '#ffffff99'
}
}
color: "#ffffff99",
},
},
},
offset: 70,
max: props.max_tr + props.offset,
min: props.min_tr - props.offset
min: props.min_tr - props.offset,
},
series: [
{
data: props.data.map(data => {
return [
new Date(data.record_at),
Number(data.tr)
]
data: props.data.map((data) => {
return [data.record_at, Number(data.tr)];
}),
type: 'line',
type: "line",
smooth: true,
symbol: (_, series) => {
if (series.dataIndex === props.data.length - 1) {
return `image://${point}`
return `image://${point}`;
}
return 'none'
return "none";
},
symbolSize: 75,
symbolOffset: [0.79, 0],
lineStyle: {
color: '#fafafa99'
color: "#fafafa99",
},
areaStyle: {
color: {
type: 'linear',
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#fafafa4d'
color: "#fafafa4d",
},
{
offset: 1,
color: '#fafafa00'
}
color: "#fafafa00",
},
],
global: false
}
global: false,
},
},
markLine: {
data: [
[
{
xAxis: 'max',
yAxis: props.data[props.data.length - 1]['tr']
xAxis: "max",
yAxis: props.data[props.data.length - 1]["tr"],
},
{
xAxis: 'max',
y: '300'
}
]
xAxis: "max",
y: "300",
},
],
],
label: {
show: false
show: false,
},
lineStyle: {
color: '#fafafa',
color: "#fafafa",
width: 3,
type: 'dashed',
cap: 'round'
type: "dashed",
cap: "round",
},
symbol: 'none',
animation: false
symbol: "none",
animation: false,
},
z: 5
}
]
}
})
z: 5,
},
],
};
});
</script>

<template>
<div class="relative w-143.75 h-68.75 bg-[linear-gradient(222.34deg,#525252_11.97%,#1d1916_89.73%)]">
<chart :option="option"/>
<chart :option="option" />

<div class="absolute left-6 top-4.75 text-6.25 fw-extrabold text-[#fafafa]">
Tetra Rating (TR)
</div>
<div class="absolute left-6 top-4.75 text-6.25 fw-extrabold text-[#fafafa]">Tetra Rating (TR)</div>

<div class="absolute left-6 top-22.5">
<slot/>
<slot />
</div>
</div>
</template>
</template>
Loading

0 comments on commit 8b7f883

Please sign in to comment.