antvis / component Goto Github PK

View Code? Open in Web Editor NEW

57.0 39.0 37.0 13.08 MB

🍱 AntV UI component based on G render engine.

Home Page: https://github.com/antvis/component

License: MIT License

TypeScript 98.82% JavaScript 0.48% Shell 0.01% HTML 0.69%

component g visualization hacktoberfest

component's Introduction

@antv/component

Visualization components for AntV, based on G which is a flexible rendering engine for visualization.

✨ Features

Rich - Contains 20+ Visualization components, for AntV G2, G6, L7.
Powerful - Each component has powerful abilities and flexible scalability.
Well Design - Continuous optimization and iteration.
Powerful Renderer - Based on the powerful renderer G, we can render the components using Canvas, SVG or WebGL with same code.

📦 Installation

$ npm install @antv/component

$ yarn add @antv/component

🔨 Getting Started

import { Canvas } from '@antv/g';
import { Renderer } from '@antv/g-canvas';
import { Button } from '@antv/component';

// 1. New a canvas.
const canvas = new Canvas({
  container: 'container',
  width: 600,
  height: 600,
  renderer: new Renderer(),
});

// 2. Create a button with configure.
const button = new Button({
  /* ... */
});

// 3. Append into G canvas.
canvas.appendChild(button);

// 4. Render.
canvas.render();

📎 Documents

API
UI components
- Axis
- Legend
- Tooltip
- Slider
- Scrollbar
- Button
- Checkbox
- Navigator
- Breadcrumb
- Sparkline

📮 Contribution

$ git clone [email protected]:antvis/component.git

$ cd component

$ npm install

$ npm run dev

Then send a pull request on GitHub.

📄 License

MIT@AntV.

component's People

Contributors

Stargazers

Watchers

component's Issues

有个建议，关于guide html

@dxq613 @leungwensen
可否让 guide 的 html 直接传递一个el对象而不是字符串

https://github.com/antvis/component/blob/master/src/guide/html.js#L55

我尝试简单修改后是可以的

[5.0] 继承 Component 实现自定义组件，类型问题

继承 Component 实现一个 Text 组件（用于分面中的 title 等显示），因为类型定义不统一，导致实现出来的结构不太好。

[5.0] Tooltip 组件，当对 tooltip 的位置进行更新时，没有更新 crosshairs 的位置

tooltip.update({
  x,
  y,
});

对 tooltip 内容框的位置进行更新的同时需要更新 crosshairs 的位置。

[5.0] interface 改为可选

G2 会引用 types 下的一些类型定义，但是在 G2 层，这些类型定义中的配置都是可选的，所以希望 component 层可以改一下~~~

比如 :

折线图的点击事件，能返回单个点吗？现在这个target是返回所有的点

this.antvChart.on('element:click', ev => {
const lineElement = ev.target.get('element')
const data = lineElement.getModel().data // 数组
})
这个方法可以获取到单个的点吗

[5.0] 将现 Tooltip 组件中的 crosshairs 拆出，作为独立的 html crosshairs 组件，以方便 G2 封装

[Feature Request] 增加对tooltip item替换内容进行html转义的选项

当前tooltip组件在对itemTpl中的占位符（如{name}）进行替换时，并不会对替换内容进行转义
这在绝大多数情况下不会造成影响，还提供了更高的定制自由度
然而逻辑上，这一行为确实与其他组件乃至tooltip自身的标题是不一致的（而且文档中没有说明），甚至有可能成为安全隐患

因此我认为在TooltipCfg中增加htmlEscape选项不但有必要，如果不考虑兼容性甚至应该是默认开启的

Guide.Html 在传入 html 的父元素未定义宽度的情况下 dom 宽度计算出错

Link:
Platform:
Mini Showcase(like screenshots):

Relate to antvis/G2#867

【legend】期望分页场景下的多行和不分页的多行，展示一致

Link:
Platform:
Mini Showcase(like screenshots):

分页多行	不分页多行

仓库治理

请给这个 repo 一个稍微详细一点的 Description。【开头补一个一句话说明】

稍微细化一下 README，说一下这个 repo 是干什么的、大概被哪里依赖。

（如果是已经废弃的项目需要清理）

[5.0] marker.spacing 不生效

传入的 items 是这个：

[
      { id: 'sold', name: 'sold', value: 'sold', marker: { symbol: 'circle', spacing: 100, style: { fill: 'red' } } },
      { id: 'buy', name: 'buy', value: 'buy', marker: { symbol: 'square', spacing: 100, style: { fill: 'blue' } } }
    ]

然后 component.get('items') 获得的也是对的。

但是绘制出来不对：

属性支持回调，同 F2 接口

主要是 label 和 grid，参考 F2 https://f2.antv.vision/en/docs/api/chart/axis#chartaxisfield-config ，对于一些场景的特殊文本标注，移动端横轴最后一个文本右对齐以及 0 轴线高亮等还是有用的。

[question] why version of `@antv/[email protected]` is locked?

Link:
Platform:
Mini Showcase(like screenshots):

As title.

https://github.com/antvis/component/blob/master/package.json#L64

怎么让lengend超出设定宽度隐藏超出

lengend设置items后图表和图例不自适应，给图例设置最大宽度后怎么让它超出隐藏超出部分。

[5.0] annotation.text 和 annotation.line 中的 text 支持 rotate 属性

Link:
Platform:
Mini Showcase(like screenshots):

autoHide的reserveBoth不准确

DEMO：https://riddle.alibaba-inc.com/riddles/cbc7b3bf

自定义html-legend，height样式不应该固定高度

Link:
Platform:
Mini Showcase(like screenshots):

[5.0] domStyle typo error

https://github.com/antvis/component/blob/v0.4.x/src/tooltip/html.ts#L93

应该是 domStyles

怎么设置图例分页的颜色？

怎么设置图例分页的颜色。

柱状图顶部的图例,字体大的情况，会出现字体被遮挡

@simaQ

有饼图配合子视图view的demo吗，

关于titleOffset的适应问题

Link:
Platform:
Mini Showcase(like screenshots):

关于坐标轴，line 类型的 titleOffset的几点问题。

由于在 https://github.com/antvis/component/blob/master/src/axis/base.js 92行代码中，给title 中的 offset 设置了默认值。与 https://github.com/antvis/component/blob/master/src/axis/line.js
中的 renderTitle 函数，107行代码逻辑矛盾，只有手动设置offset 为null 才进入此逻辑。
https://github.com/antvis/component/blob/master/src/axis/line.js 中 109 行 labelsGroup 为 null，正确属性对象应该为：labelRenderer

 const labelRenderer = self.get('labelRenderer');
      if (labelRenderer) {
        const labelLength = self.getMaxLabelWidth(labelRenderer);
        const labelOffset = self.get('label').offset || self.get('_labelOffset');
        titleOffset += labelLength + labelOffset;
  }

offset相对于轴线的偏移量的灵活性不足。因为Y轴坐标轴的label数据变大的情况下，预先设置的offset值不满足的情况下会导致遮盖。个人建议：

offset 是否可以考虑是相对于坐标轴label文本的偏移量，如果在label有旋转角度的情况下，根据坐标轴项量 / 旋转角度 / label文本最大宽度 / fontSize等条件可以计算 label文本的实际宽度。

真心希望尽快修复 1，2问题。等待上线中。。

图例名称怎么自己自定义，根据当前值来 formatter

[5.0] line axis title.offset 被修改

传入的配置（title.offset = 32）：

但是在代码中，会修改掉 title.offset 配置。

expect(y.component.get('title').offset).toBe(32);

[5.0] TODO 汇总

axis

自适应优化

legend

size 组件
color 组件
事件

types 文件申明与接口文档不一致

@antv/g2/lib/interface.d.ts 中的value?: number[]; 与接口文档中的values描述不符，麻烦看下以谁的为主

[5.0] tooltip crosshairs 实现成单独的组件，并且支持极坐标

如题

[5.0] crosshairs 相关问题

目前 'x' 和 'y' 的含义和 3.x 的相反
渲染后的位置有偏差

Tooltip: htmlContent 配置会导致报错

Link:
Platform:
Mini Showcase(like screenshots):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>散点图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.3.2/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.9.6/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>
$.getJSON('/assets/data/scatter.json', function(data) {
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight
  });
  // 数据格式： [{"gender":"female","height":161.2,"weight":51.6}]
  chart.source(data);

    chart.tooltip({
      showTitle: false,
      crosshairs: {
        type: 'cross'
      },
      htmlContent: (title, items) => {
        // debugger;
        let container =
          '<div class="g2-tooltip" style="visibility: visible;position: absolute;border: 1px solid #efefef;'
          + 'color:#000;padding: 5px 15px;opacity: 0.8; background: white; "transition":top 200ms, left 200ms; ">'
          // + '<div class="g2-tooltip-title" style="margin-bottom: 4px;"></div>'
          // + `${title}`
          + '<ul class="g2-tooltip-list"></ul>';
        items.forEach((item, index) => {
          const color = item.color;
          container += '<li style="list-style:none;">'
            + '<p>' + item.name + '</p>'
            + '</li>';
        });
        container += '</div>';
        return container;
      },
    });
  chart.point().position('height*weight').size(4).shape('circle').opacity(0.65).tooltip('gender*height*weight', function(gender, height, weight) {
    return {
      name: gender,
      value: height + '(cm), ' + weight + '(kg)'
    };
  });
  chart.render();
});
</script>
</body>
</html>

[5.0] tooltip.show() 以及 tooltip.hide() 没有对 crosshairs 进行处理

柱状图，折线图，饼图，这三个图，如果放入2.5w的数据，会卡死，有方案吗

[5.0] component 动画支持

在上层 G2 中，提供了四种动画类型：

appear 初始化入场动画
enter 数据更新后，新增元素的入场动画
update 更新动画
leave 出场（销毁）动画

组件中默认参与动画的元素：

Axis
a. ticks
b. labels
c. grid
她们将参与：enter，update 和 leave 动画，初始化入场时（appear）不执行
Annotation
参与 appear, enter, update 和 leave

所以需要组件层支持:以上四种动画的配置：

interface AnimateBaseCfg {
  /** 动画缓动函数 */
  readonly easing?: string;
  /** 动画执行函数 */
  readonly animation?: string;
  /** 动画执行时间 */
  readonly duration?: number;
  /** 动画延迟时间 */
  readonly delay?: number;
  /** 动画执行结束后的回调函数 */
  readonly callback?: () => any;
}

interface AnimateOption {
  appear?: AnimateBaseCfg | false | null;
  enter?: AnimateBaseCfg | false | null;
  update?: AnimateBaseCfg | false | null;
  leave?: AnimateBaseCfg | false | null;
}


chart.axis('fieldName', {
  animate:  AnimateOption
});

const tooltip = new Tooltip({
   visible: false.
});

tooltip.render();

Link:
Platform:
Mini Showcase(like screenshots):

目前自定义配置legend逻辑复杂度过高

[5.0] legend bbox not right

pie charts label，autoRotate配置项失效

Link:
Platform:
Mini Showcase(like screenshots):

legend在position 是left或者right时，0在上最大值在下面，不能反一下

需求：修改成0在下面，最大值在上面

[5.0] entry 没有 export Tooltip

Link:
Platform:
Mini Showcase(like screenshots):

[5.0] annotation

arc 传入的是 center、radius、startAngle、endAngle，只能用于 polar 下面吗？
image 使用 start、end 定位，用户传入那里是 x y width height，确定这样的吧？
line 中的 text.position 处理逻辑是 Controller 中做，还是 Component 中做？

line axis 只开启 autoEllipsis 不生效

关闭其他 autoHide，autoRotate。