From 540fbcf8a5a8af81c446da302151868f11410097 Mon Sep 17 00:00:00 2001 From: Yanyan-Wang Date: Mon, 21 Sep 2020 20:37:05 +0800 Subject: [PATCH] fix: toolbar positions for slice timebar. --- examples/tool/timebar/demo/simple-timebar.js | 11 --- examples/tool/timebar/demo/slice-timebar.js | 88 +++++++++----------- examples/tool/timebar/demo/timebar.js | 11 --- src/plugins/timeBar/index.ts | 10 +-- src/plugins/timeBar/timeBarTooltip.ts | 20 ++--- 5 files changed, 56 insertions(+), 84 deletions(-) diff --git a/examples/tool/timebar/demo/simple-timebar.js b/examples/tool/timebar/demo/simple-timebar.js index e68fe53100..b226229d68 100644 --- a/examples/tool/timebar/demo/simple-timebar.js +++ b/examples/tool/timebar/demo/simple-timebar.js @@ -1,15 +1,4 @@ import G6 from '@antv/g6'; -import insertCss from 'insert-css'; - -// 我们用 insert-css 演示引入自定义样式 -// 推荐将样式添加到自己的样式文件中 -// 若拷贝官方代码，别忘了 npm install insert-css -insertCss(` - .g6-component-timebar { - top: 450px; - left: 100px; - } -`); const data = { nodes: [], diff --git a/examples/tool/timebar/demo/slice-timebar.js b/examples/tool/timebar/demo/slice-timebar.js index 418aae79c6..993ffd3757 100644 --- a/examples/tool/timebar/demo/slice-timebar.js +++ b/examples/tool/timebar/demo/slice-timebar.js @@ -1,76 +1,70 @@ import G6 from '@antv/g6'; -import insertCss from 'insert-css'; - -// 我们用 insert-css 演示引入自定义样式 -// 推荐将样式添加到自己的样式文件中 -// 若拷贝官方代码，别忘了 npm install insert-css -insertCss(` - .g6-component-timebar { - top: 450px; - left: 100px; - } -`); const data = { nodes: [], edges: [], }; -for (let i = 0; i < 100; i++) { +for (let i = 1; i < 60; i++) { const id = `node-${i}`; + const month = i < 30 ? '01' : '02'; + const day = i % 30 < 10 ? `0${i % 30}` : `${i % 30}`; data.nodes.push({ id, - date: `2020${i}`, + date: parseInt(`2020${month}${day}`), value: Math.round(Math.random() * 300), + label: parseInt(`2020${i}`), }); data.edges.push({ - source: `node-${Math.round(Math.random() * 90)}`, - target: `node-${Math.round(Math.random() * 90)}`, + source: `node-${Math.round(Math.random() * 60)}`, + target: `node-${Math.round(Math.random() * 60)}`, + }); +} + +const timeBarData = []; + +for (let i = 1; i < 60; i++) { + const month = i < 30 ? '01' : '02'; + const day = i % 30 < 10 ? `0${i % 30}` : `${i % 30}`; + timeBarData.push({ + date: parseInt(`2020${month}${day}`), + value: Math.round(Math.random() * 300), }); } const width = document.getElementById('container').scrollWidth; const height = document.getElementById('container').scrollHeight || 500; -const timeBarData = []; - -for (let i = 0; i < 100; i++) { - timeBarData.push({ - date: `2020${i}`, - value: Math.round(Math.random() * 300), - }); -} - const nodeSize = 20; let count = 0; - const timebar = new G6.TimeBar({ - x: 0, - y: 0, - width: 500, - height: 150, - padding: 10, - type: 'slice', - slice: { - data: timeBarData, - width: 500, - height: 42, - padding: 2, - tickLabelFormatter: d => { - count++; - const dateStr = `${d.date}` - if ((count - 1) % 10 === 0) { - return `${dateStr.substr(0, 4)}-${dateStr.substr(4, 2)}-${dateStr.substr(6, 2)}`; - } - return false; - }, - tooltipFomatter: d => { - const dateStr = `${d}` +const timebar = new G6.TimeBar({ + x: 0, + y: 0, + width: width, + height: 150, + padding: 10, + type: 'slice', + slice: { + data: timeBarData, + width: width, + height: 42, + padding: 2, + tickLabelFormatter: d => { + count++; + const dateStr = `${d.date}` + if ((count - 1) % 10 === 0) { return `${dateStr.substr(0, 4)}-${dateStr.substr(4, 2)}-${dateStr.substr(6, 2)}`; } + return false; }, - }); + tooltipFomatter: d => { + const dateStr = `${d}` + return `${dateStr.substr(0, 4)}-${dateStr.substr(4, 2)}-${dateStr.substr(6, 2)}`; + } + }, +}); // constrained the layout inside the area const constrainBox = { x: 10, y: 10, width: 580, height: 450 }; diff --git a/examples/tool/timebar/demo/timebar.js b/examples/tool/timebar/demo/timebar.js index ad2e524f8c..3416efde95 100644 --- a/examples/tool/timebar/demo/timebar.js +++ b/examples/tool/timebar/demo/timebar.js @@ -1,15 +1,4 @@ import G6 from '@antv/g6'; -import insertCss from 'insert-css'; - -// 我们用 insert-css 演示引入自定义样式 -// 推荐将样式添加到自己的样式文件中 -// 若拷贝官方代码，别忘了 npm install insert-css -insertCss(` - .g6-component-timebar { - top: 450px; - left: 100px; - } -`); const data = { nodes: [], diff --git a/src/plugins/timeBar/index.ts b/src/plugins/timeBar/index.ts index f5dfa31524..ce898cc61e 100644 --- a/src/plugins/timeBar/index.ts +++ b/src/plugins/timeBar/index.ts @@ -114,7 +114,7 @@ export default class TimeBar extends Base { const graph: IGraph = this.get('graph'); const { width, height } = this._cfgs const className: string = this.get('className') || 'g6-component-timebar'; - + const container: HTMLDivElement | null = this.get('container'); const graphContainer = this.get('graph').get('container'); @@ -122,11 +122,11 @@ export default class TimeBar extends Base { let timeBarContainer; if (!container) { timeBarContainer = createDOM(`
`); - modifyCSS(timeBarContainer, { position: 'absolute' }); + modifyCSS(timeBarContainer, { position: 'relative' }); } else { timeBarContainer = container; } - + graphContainer.appendChild(timeBarContainer); this.set('timeBarContainer', timeBarContainer); @@ -215,7 +215,7 @@ export default class TimeBar extends Base { private filterData(evt) { const { value } = evt; - + let trendData = null const type = this._cfgs.type if (type === 'trend' || type === 'simple') { @@ -223,7 +223,7 @@ export default class TimeBar extends Base { } else if (type === 'slice') { trendData = this._cfgs.slice.data } - + if (!trendData || trendData.length === 0) { console.warn('请配置 TimeBar 组件的数据') return diff --git a/src/plugins/timeBar/timeBarTooltip.ts b/src/plugins/timeBar/timeBarTooltip.ts index 4d55e9e877..b4d02ddec1 100644 --- a/src/plugins/timeBar/timeBarTooltip.ts +++ b/src/plugins/timeBar/timeBarTooltip.ts @@ -106,7 +106,7 @@ export default class TimeBarTooltip { let parentNode: string | HTMLElement = self.container; const container: HTMLElement = createDOM( - `
`, + `
`, ); if (isString(parentNode)) { parentNode = document.getElementById(parentNode) as HTMLElement; @@ -117,7 +117,7 @@ export default class TimeBarTooltip { modifyCSS(container, { visibility: 'hidden', top: 0, left: 0 }); const background: HTMLElement = createDOM(` -
`); +
`); background.innerHTML = text; container.appendChild(background); self.backgroundDOM = background; @@ -140,18 +140,18 @@ export default class TimeBarTooltip { const backgroundHeight = self.backgroundDOM.offsetHeight; const arrowWidth = self.arrowDOM.offsetWidth; const arrowHeight = self.arrowDOM.offsetHeight; - const containerHeight = backgroundHeight + arrowHeight; - modifyCSS(self.container as HTMLElement, { marginTop: `${-self.parentHeight - containerHeight - 8}px`, left: `${clientX}px`, visibility: 'visible', }); + modifyCSS(self.container as HTMLElement, + { top: `${-backgroundHeight - arrowHeight}px`, left: `${x}px`, visibility: 'visible', }); modifyCSS(self.backgroundDOM, { marginLeft: `${-backgroundWidth / 2}px` }) modifyCSS(self.arrowDOM, { marginLeft: `${-arrowWidth / 2}px`, top: `${backgroundHeight}px` }); - - const bbox = (self.backgroundDOM as HTMLElement).getBoundingClientRect(); - if (bbox.left < 0) { - modifyCSS(self.backgroundDOM, { marginLeft: `${-backgroundWidth / 2 - bbox.left}px` }) - } else if (bbox.right > self.parentWidth) { - modifyCSS(self.backgroundDOM, { marginLeft: `${-backgroundWidth / 2 - bbox.right + self.parentWidth + 12}px` }) + const left = x - backgroundWidth / 2; + const right = x + backgroundWidth / 2; + if (left < 0) { + modifyCSS(self.backgroundDOM, { marginLeft: `${-backgroundWidth / 2 - left}px` }) + } else if (right > self.parentWidth) { + modifyCSS(self.backgroundDOM, { marginLeft: `${-backgroundWidth / 2 - right + self.parentWidth + 12}px` }) } } public hide() {