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 43aaebff8500c0f9dab1b9556f3e3419cfd46500 Author: Ovilia <[email protected]> AuthorDate: Fri Sep 20 15:23:37 2024 +0800 WIP(stage): debug envelope --- custom-series/stage/src/index.ts | 88 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 84 insertions(+), 4 deletions(-) diff --git a/custom-series/stage/src/index.ts b/custom-series/stage/src/index.ts index 68dcda2..1a9ebd7 100644 --- a/custom-series/stage/src/index.ts +++ b/custom-series/stage/src/index.ts @@ -25,6 +25,13 @@ import type { } from 'echarts/types/src/chart/custom/CustomSeries.d.ts'; import type { EChartsExtensionInstallRegisters } from 'echarts/src/extension.ts'; +type Envelope = { + show?: boolean; + color?: 'auto' | string; + opacity?: number; + margin?: number; +}; + const renderItem = ( params: echarts.CustomSeriesRenderItemParams, api: echarts.CustomSeriesRenderItemAPI @@ -45,22 +52,37 @@ const renderItem = ( const barMinHeight = 2; const children: CustomElementOption[] = []; + const boxes: { x: number; y: number; width: number; height: number }[] = + (params.context.boxes as { + x: number; + y: number; + width: number; + height: number; + }[]) || []; const span = endCoord[0] - startCoord[0]; const height = Math.max(span, barMinHeight); + const shape = { + x: startCoord[0] - (height - span) / 2, + y: startCoord[1] - bandWidth / 2 + textMargin + fontSize + barMargin, + width: height, + height: bandWidth - fontSize - textMargin - 2 * barMargin, + }; children.push({ type: 'rect', shape: { - x: startCoord[0] - (height - span) / 2, - y: startCoord[1] - bandWidth / 2 + textMargin + fontSize + barMargin, - width: height, - height: bandWidth - fontSize - textMargin - 2 * barMargin, + x: shape.x, + y: shape.y, + width: shape.width, + height: shape.height, r: borderRadius, }, style: { fill: color, }, }); + boxes.push(shape); + params.context.boxes = boxes; if (!params.context.renderedStages) { params.context.renderedStages = []; @@ -81,6 +103,64 @@ const renderItem = ( renderedStages[stageIndex] = true; } + // If is the last item, render envelope + if (params.dataIndex === params.dataInsideLength - 1) { + const envelope: Envelope = params.itemPayload.envelope || {}; + if (envelope.show !== false) { + const margin = echarts.zrUtil.retrieve2(envelope.margin as number, 5); + // Sort boxes by x, then by y + boxes.sort((a, b) => a.x - b.x || a.y - b.y); + console.log(boxes); + // Render envelope so that the stage chart looks exactly like + // the Apple Health sleep chart + + const paths: CustomElementOption[] = []; + for (let i = 0; i < boxes.length; i++) { + // Expand by margin + const box = boxes[i]; + paths.push({ + type: 'rect', + shape: { + x: box.x - margin, + y: box.y - margin, + width: box.width + 2 * margin, + height: box.height + 2 * margin, + // r: borderRadius + margin, + }, + style: { + fill: 'red', + opacity: 0.2, + }, + z2: -1, + }); + + if (i > 0) { + const prev = boxes[i - 1]; + const current = boxes[i]; + paths.push({ + type: 'rect', + shape: { + x: prev.x + prev.width + margin, + y: prev.y - margin, + width: current.x - prev.x - prev.width - margin * 2, + height: current.y + current.height + margin - (prev.y - margin), + }, + style: { + fill: 'blue', + opacity: 0.2, + }, + z2: -1, + }); + } + } + + children.push({ + type: 'group', + children: paths, + }); + } + } + return { type: 'group', children, --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
