fix: toolbar positions for slice timebar.

2024-12-02 11:48:29 +08:00 · 2020-09-21 20:37:05 +08:00 · 2020-09-21 20:37:05 +08:00 · 540fbcf8a5
commit 540fbcf8a5
parent c944186cab
5 changed files with 56 additions and 84 deletions
--- 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: [],
--- 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 };
--- 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: [],
--- 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(`<div class='${className}'></div>`);
-      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
--- 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(
-      `<div class='${className}' style="position: sticky; width: fit-content; height: fit-content; opacity: ${opacity}"></div>`,
+      `<div class='${className}' style="position: absolute; width: fit-content; height: fit-content; opacity: ${opacity}"></div>`,
    );
    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(`
-      <div style='position: absolute;  white-space:nowrap; background-color: ${backgroundColor}; font-size: ${fontSize}px; border-radius: 4px; width: fit-content; height: fit-content; color: ${textColor}; padding: ${padding[0]}px ${padding[1]}px ${padding[2]}px ${padding[3]}px'></div>`);
+      <div style='position: absolute; white-space:nowrap; background-color: ${backgroundColor}; font-size: ${fontSize}px; border-radius: 4px; width: fit-content; height: fit-content; color: ${textColor}; padding: ${padding[0]}px ${padding[1]}px ${padding[2]}px ${padding[3]}px'></div>`);
    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() {