-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
24 changed files
with
607 additions
and
425 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
176 changes: 176 additions & 0 deletions
176
src/app/components/Habit/components/Site/DailyTrend/Wrapper.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,176 @@ | ||
| import { EchartsWrapper } from "@hooks" | ||
| import { | ||
| ComposeOption, | ||
| GridComponentOption, | ||
| TitleComponentOption, | ||
| TooltipComponentOption, | ||
| LegendComponentOption, | ||
| LineSeriesOption, | ||
| LinearGradientObject, | ||
| } from "echarts" | ||
| import { getAllDatesBetween } from "@util/time" | ||
| import { groupBy, sum } from "@util/array" | ||
| import { t } from "@app/locale" | ||
| import { GridComponent, LegendComponent, TitleComponent, TooltipComponent } from "echarts/components" | ||
| import { BarChart, LineChart, PieChart } from "echarts/charts" | ||
| import { use } from "echarts/core" | ||
| import { SVGRenderer } from "echarts/renderers" | ||
| import { TopLevelFormatterParams, YAXisOption } from "echarts/types/dist/shared" | ||
| import { generateTitleOption } from "../common" | ||
| import { getLineSeriesPalette, tooltipDot } from "@app/util/echarts" | ||
| import { cvt2LocaleTime, periodFormatter } from "@app/util/time" | ||
|
|
||
| use([SVGRenderer, GridComponent, LegendComponent, TooltipComponent, TitleComponent, LineChart, PieChart, BarChart]) | ||
|
|
||
| type EcOption = ComposeOption< | ||
| | GridComponentOption | ||
| | TooltipComponentOption | ||
| | TitleComponentOption | ||
| | LineSeriesOption | ||
| | LegendComponentOption | ||
| > | ||
|
|
||
| const [FOCUS_COLORS, VISIT_COLORS, COUNT_COLORS] = getLineSeriesPalette() | ||
| const FOCUS_LEGEND = t(msg => msg.item.focus) | ||
| const VISIT_LEGEND = t(msg => msg.item.time) | ||
| const COUNT_LEGEND = t(msg => msg.habit.site.trend.siteCount) | ||
| const LEGEND_COLOR_MAP = { | ||
| [FOCUS_LEGEND]: FOCUS_COLORS, | ||
| [VISIT_LEGEND]: VISIT_COLORS, | ||
| [COUNT_LEGEND]: COUNT_COLORS, | ||
| } | ||
|
|
||
| export type BizOption = { | ||
| rows: timer.stat.Row[] | ||
| dateRange?: [Date, Date] | ||
| timeFormat?: timer.app.TimeFormat | ||
| } | ||
|
|
||
| const valueYAxis = (): YAXisOption => ({ | ||
| type: 'value', | ||
| axisLabel: { show: false }, | ||
| axisLine: { show: false }, | ||
| axisTick: { show: false }, | ||
| splitLine: { show: false }, | ||
| }) | ||
|
|
||
| const formatTimeTooltip = (params: TopLevelFormatterParams, format: timer.app.TimeFormat) => { | ||
| if (!Array.isArray(params)) return '' | ||
| const date = params?.[0]?.name | ||
| if (!date) return '' | ||
| const dateLine = `<b>${cvt2LocaleTime(date)}</b>` | ||
| const valueLines = params?.reverse?.()?.map(param => { | ||
| const { value, seriesName } = param | ||
| const color = LEGEND_COLOR_MAP[seriesName] | ||
| if (!color) return '' | ||
| let valueStr: string | number = seriesName === FOCUS_LEGEND | ||
| ? periodFormatter(value as number, { format }) | ||
| : (value as number) | ||
| return `${tooltipDot(color?.colorStops?.[0]?.color)} ${valueStr} | ${seriesName}` | ||
| })?.filter(line => !!line)?.join('<br/>') | ||
|
|
||
| return `${dateLine}<br/>${valueLines}` | ||
| } | ||
|
|
||
| const lineOptionOf = ( | ||
| areaColor: LinearGradientObject, | ||
| baseOption: Required<Pick<LineSeriesOption, 'data' | 'name' | 'yAxisIndex'>> | ||
| ): LineSeriesOption => { | ||
| return { | ||
| type: 'line', | ||
| areaStyle: { color: areaColor }, | ||
| showSymbol: false, | ||
| lineStyle: { width: 0 }, | ||
| emphasis: { focus: "self" }, | ||
| ...baseOption, | ||
| } | ||
| } | ||
|
|
||
| function generateOption(bizOption: BizOption): EcOption { | ||
| const { dateRange, rows, timeFormat } = bizOption || {} | ||
|
|
||
| const [start, end] = dateRange || [] | ||
| const allDates = getAllDatesBetween(start, end) | ||
| const focusMap = groupBy(rows, r => r.date, l => sum(l.map(e => e.focus))) | ||
| const visitMap = groupBy(rows, r => r.date, l => sum(l.map(e => e.time))) | ||
| const siteMap = groupBy(rows, r => r.date, l => new Set(l.map(e => e.host)).size) | ||
| const countData = allDates.map(date => ({ date, value: siteMap[date] ?? 0 })) | ||
| const visitData = allDates.map(date => ({ date, value: visitMap[date] ?? 0 })) | ||
| const focusData = allDates.map(date => ({ date, value: focusMap[date] ?? 0 })) | ||
| return { | ||
| title: generateTitleOption(t(msg => msg.habit.site.trend.title)), | ||
| grid: { | ||
| bottom: '2%', | ||
| top: '26%', | ||
| right: 0, | ||
| left: 20, | ||
| }, | ||
| series: [ | ||
| lineOptionOf(COUNT_COLORS, { | ||
| name: COUNT_LEGEND, | ||
| data: countData, | ||
| yAxisIndex: 0 | ||
| }), | ||
| lineOptionOf(VISIT_COLORS, { | ||
| name: VISIT_LEGEND, | ||
| data: visitData, | ||
| yAxisIndex: 1 | ||
| }), | ||
| lineOptionOf(FOCUS_COLORS, { | ||
| name: FOCUS_LEGEND, | ||
| data: focusData, | ||
| yAxisIndex: 2 | ||
| }), | ||
| ], | ||
| tooltip: { | ||
| trigger: 'axis', | ||
| axisPointer: { type: "line" }, | ||
| formatter: (params: any[]) => formatTimeTooltip(params, timeFormat), | ||
| }, | ||
| xAxis: { | ||
| type: 'category', | ||
| data: allDates, | ||
| axisLabel: { show: false }, | ||
| axisTick: { show: false }, | ||
| axisLine: { show: false }, | ||
| }, | ||
| yAxis: [ | ||
| valueYAxis(), | ||
| valueYAxis(), | ||
| valueYAxis(), | ||
| ], | ||
| legend: { | ||
| right: '2%', | ||
| top: '16%', | ||
| icon: 'roundRect', | ||
| itemWidth: 20, | ||
| itemGap: 5, | ||
| textStyle: { | ||
| // Hide text | ||
| fontSize: 0, | ||
| }, | ||
| tooltip: { | ||
| show: true, | ||
| formatter: (params: any) => (params?.name as string), | ||
| }, | ||
| data: [{ | ||
| name: COUNT_LEGEND, | ||
| itemStyle: { color: COUNT_COLORS }, | ||
| }, { | ||
| name: VISIT_LEGEND, | ||
| itemStyle: { color: VISIT_COLORS }, | ||
| }, { | ||
| name: FOCUS_LEGEND, | ||
| itemStyle: { color: FOCUS_COLORS }, | ||
| }] | ||
| }, | ||
| } | ||
| } | ||
|
|
||
| export default class Wrapper extends EchartsWrapper<BizOption, EcOption> { | ||
| generateOption = generateOption | ||
|
|
||
| protected rewrite(): boolean { | ||
| return true | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.