This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/echarts-custom-series.git
commit 8882940acfb0af5880d58197d8c37894e4caafed Author: Ovilia <[email protected]> AuthorDate: Wed Sep 18 15:57:17 2024 +0800 feat(stage): basic stage bars --- custom-series/stage/src/index.ts | 57 ++++++++++++++++++++++++++++- custom-series/stage/test/index.html | 73 ++++++++++++++++++++++++++++++++++++- 2 files changed, 127 insertions(+), 3 deletions(-) diff --git a/custom-series/stage/src/index.ts b/custom-series/stage/src/index.ts index 89c025c..41d5db4 100644 --- a/custom-series/stage/src/index.ts +++ b/custom-series/stage/src/index.ts @@ -19,6 +19,7 @@ import echarts from 'echarts'; import type { + CustomElementOption, CustomRootElementOption, CustomSeriesRenderItem, } from 'echarts/types/src/chart/custom/CustomSeries.d.ts'; @@ -28,9 +29,63 @@ const renderItem = ( params: echarts.CustomSeriesRenderItemParams, api: echarts.CustomSeriesRenderItemAPI ) => { + const start = api.value(0); + const end = api.value(1); + const stageIndex = api.value(2); + + const startCoord = api.coord([start, stageIndex]); + const endCoord = api.coord([end, stageIndex]); + + const stages = params.itemPayload.stages || []; + const bandWidth = api.coord([0, 0])[1] - api.coord([0, 1])[1]; + const fontSize = 14; + const textMargin = 5; + const barMargin = 8; + const seriesColor = api.visual('color'); + const borderRadius = (params.itemPayload.borderRadius as number) || 8; + const isGrouping = params.itemPayload.grouping as boolean; + + const children: CustomElementOption[] = []; + + const stage = stages[stageIndex]; + if (stage && !isGrouping) { + children.push({ + type: 'rect', + shape: { + x: startCoord[0], + y: startCoord[1] - bandWidth / 2 + textMargin + fontSize + barMargin, + width: endCoord[0] - startCoord[0], + height: bandWidth - fontSize - textMargin - 2 * barMargin, + r: borderRadius, + }, + style: { + fill: stage.color || seriesColor, + }, + }); + } + + if (!params.context.renderedStages) { + params.context.renderedStages = []; + } + const renderedStages = params.context.renderedStages as boolean[]; + if (stage && !renderedStages[stageIndex]) { + // Each stage only render once as axis label + children.push({ + type: 'text', + style: { + x: (params.coordSys as any).x + textMargin, + y: startCoord[1] - bandWidth / 2 + textMargin + fontSize, + fill: (params.itemPayload.axisLabelColor as string) || '#777', + text: stage.name, + verticalAlign: 'bottom', + }, + }); + renderedStages[stageIndex] = true; + } + return { type: 'group', - children: [], + children, } as CustomRootElementOption; }; diff --git a/custom-series/stage/test/index.html b/custom-series/stage/test/index.html index 6cba74b..ad52b47 100644 --- a/custom-series/stage/test/index.html +++ b/custom-series/stage/test/index.html @@ -17,14 +17,83 @@ const chart = echarts.init(document.getElementById('main')); const data = [ - [new Date()] - ] + [new Date('2024-09-07 06:12'), new Date('2024-09-07 06:12'), 'Awake'], + [new Date('2024-09-07 06:15'), new Date('2024-09-07 06:18'), 'Awake'], + [new Date('2024-09-07 08:59'), new Date('2024-09-07 09:00'), 'Awake'], + [new Date('2024-09-07 05:45'), new Date('2024-09-07 06:12'), 'REM'], + [new Date('2024-09-07 07:37'), new Date('2024-09-07 07:56'), 'REM'], + [new Date('2024-09-07 08:56'), new Date('2024-09-07 08:59'), 'REM'], + [new Date('2024-09-07 09:08'), new Date('2024-09-07 09:29'), 'REM'], + [new Date('2024-09-07 05:45'), new Date('2024-09-07 06:12'), 'REM'], + [new Date('2024-09-07 03:12'), new Date('2024-09-07 03:27'), 'Core'], + [new Date('2024-09-07 04:02'), new Date('2024-09-07 04:36'), 'Core'], + [new Date('2024-09-07 04:40'), new Date('2024-09-07 04:48'), 'Core'], + [new Date('2024-09-07 04:57'), new Date('2024-09-07 05:45'), 'Core'], + [new Date('2024-09-07 06:12'), new Date('2024-09-07 06:15'), 'Core'], + [new Date('2024-09-07 06:18'), new Date('2024-09-07 07:37'), 'Core'], + [new Date('2024-09-07 07:56'), new Date('2024-09-07 08:56'), 'Core'], + [new Date('2024-09-07 09:00'), new Date('2024-09-07 09:08'), 'Core'], + [new Date('2024-09-07 09:29'), new Date('2024-09-07 10:01'), 'Core'], + [new Date('2024-09-07 03:27'), new Date('2024-09-07 04:02'), 'Deep'], + [new Date('2024-09-07 04:36'), new Date('2024-09-07 04:40'), 'Deep'], + [new Date('2024-09-07 04:48'), new Date('2024-09-07 04:57'), 'Deep'], + ]; + + function formatTime(time) { + return time.getHours() + ':' + time.getMinutes(); + } option = { + tooltip: { + show: true, + valueFormatter: (params) => { + console.log(params); + return formatTime(params[0]) + ' - ' + formatTime(params[1]); + } + }, + xAxis: { + type: 'time', + }, + yAxis: { + type: 'category', + data: ['Deep', 'Core', 'REM', 'Awake'], + splitLine: { + show: true + }, + axisTick: { + show: false + }, + axisLabel: { + show: false + } + }, + dataset: { + source: data + }, series: { type: 'custom', renderItem: 'stage', itemPayload: { + stages: [{ + name: 'Deep', + color: '#33379D' + }, { + name: 'Core', + color: '#1395F4' + }, { + name: 'REM', + color: '#59C7FD' + }, { + name: 'Awake', + color: '#FE816E' + }], + envelope: { + } + }, + encode: { + x: [0, 1], + y: 2, + tooltip: [0, 1] } } }; --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
