open-data-plan / g2plot-vue Goto Github PK

Describe the bug
打包生成的 lib 依旧是 ES6 模块，不是 CommonJS 模块。

To Reproduce
包版本：3.3.1
目测对比了一下包里的 es 和 lib，似乎是一模一样的。

Expected behavior
lib 文件夹下的文件应该是 require 形式的。

Screenshots

使用LineChart时遇到这个问题

• OS: macOS
• Browser chrome
• @antv/g2plot Version [v2.3.13]
• @opd/g2plot-vue Version [v3.1.12]
• vue Version [v2.6.12]

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem or a mini showcase.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• @antv/g2plot Version [e.g. v2.3.12]
• @opd/g2plot-vue Version [e.g. v3.0.0]
• vue Version [e.g. v3.0.0]

Additional context
非常高兴能有这个库，我想在我的项目里面使用g2plot，但是并不想自己动手在上层封装一个使用层，这个库刚好解决了这个问题。但是我发现在vite + vue3的环境中(现在很多开发者已经将工程的构建脚手架转移到vite)，这个库的构建有一些问题，希望能帮忙查看一下此问题，并创建一个示例demo。

环境：

 "@antv/g2plot": "^2.3.37",
 "@opd/g2plot-vue": "^3.6.0",
 "vue": "^3.2.20",
 "vite": "^2.6.7",

构建报错：

[vite] error while updating dependencies:
  Error: Build failed with 3 errors:
  node_modules/@opd/g2plot-vue/es/components/base.js:1:26: error: Could not resolve "@babel/runtime/helpers/esm/objectSpread2" (mark it as external to exclude it from the bundle)
  node_modules/@opd/g2plot-vue/es/components/base.js:2:37: error: Could not resolve "@babel/runtime/helpers/esm/objectWithoutProperties" (mark it as external to exclude it from the bundle)
  node_modules/@opd/g2plot-vue/es/utils.js:1:26: error: Could not resolve "@babel/runtime/helpers/esm/objectSpread2" (mark it as external to exclude it from the bundle)
      at failureErrorWithLog (E:\水院项目工作空间\smart-water\smart-water-chishui\node_modules\esbuild\lib\main.js:1493:15)
      at E:\水院项目工作空间\smart-water\smart-water-chishui\node_modules\esbuild\lib\main.js:1151:28
      at runOnEndCallbacks (E:\水院项目工作空间\smart-water\smart-water-chishui\node_modules\esbuild\lib\main.js:941:63)
      at buildResponseToResult (E:\水院项目工作空间\smart-water\smart-water-chishui\node_modules\esbuild\lib\main.js:1149:7)
      at E:\水院项目工作空间\smart-water\smart-water-chishui\node_modules\esbuild\lib\main.js:1258:14
      at E:\水院项目工作空间\smart-water\smart-water-chishui\node_modules\esbuild\lib\main.js:629:9

问题猜测：
根据报错我猜测是babel配置的原因，但没有去深入追查。据文档指南，只是引入了@opd/g2plot-vue配置，并未要求配置babel

I tried various introduction methods in nuxt3, but they all failed.
Sorry, I can't provide code evidence because I'm trying to use it according to the official documents of g2plot.

According to the example, the plot was drawn perfectly.
But while I change the binded data dynamically, the plot was not changed accordingly.

It will be appreciate if an example could be given.

following G2plot example example and I don't know how to use in this package

Could not find a declaration file for module '@opd/g2plot-vue'
not exists declaration (.d.ts) file

依赖
@opd/g2plot-vue 3.6.7
vue 3.4.5
调试发现 BaseChart 中的 $attr.data 有更新，但是computed.chartData 没有更新.
降级vue至3.3.12该问题消失.

ScatterChart 点击事件不生效，比如G2中的onPointClick

目前 g2-plot 只支持 字符串，实际使用肯定还是以组件为主

在vite使用时需要单独入@babel/runtime；
以下是报错提示：

node_modules/@opd/g2plot-vue/es/utils.js:1:26: error: Could not resolve "@babel/runtime/helpers/esm/objectSpread2" (mark it as external to exclude it from the bundle)
1 │ ...tSpread from "@babel/runtime/helpers/esm/objectSpread2";

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

请问G2plot 新增的violin,stock等图是否能涵盖？
https://g2plot.antv.vision/en/examples/more-plots/violin#basic
https://g2plot.antv.vision/en/examples/gallery#category-Stock

Describe the bug
In the case of TS, resetting the data value will report an error

To Reproduce
for example:

    let taskTrendConfig: LineChartProps = reactive({
          height: 350,
          autoFit: true,
          xField: 'year',
          yField: 'value',
          seriesField: 'category',
          smooth: true,
          data: [],
     })
    function getTaskTrend(){
      GetTaskTrend().then((res: any)=>{
        taskTrendConfig.data = res // Cannot assign to 'data' because it is a read-only property.
      })
    }

Describe the bug
饼图label设置为spider蜘蛛不生效
设置如下
label: {
type: 'spider',
content: '{name} {percentage} {value}',
}

Bug具体情况
3.6.0版本是否对Vue2不支持？按照demo方式引入依旧报错，

[Vue warn]: Failed to mount component: template or render function not defined.

依赖版本列表

"dependencies": {
    "@antv/g2plot": "^2.3.35",
    "@opd/g2plot-vue": "3.5.0",
    "axios": "^0.21.1",
    "core-js": "^3.9.0",
    "echarts": "^4.5.0",
    "vue": "^2.6.12",
    "vue-echarts": "^4.1.0",
    "vue-fullpage.js": "^0.1.7",
    "vue-router": "^3.5.1",
    "vuex": "~2.3.1"
  },
"devDependencies": {
    "@babel/core": "^7.13.1",
    "@babel/preset-env": "^7.13.0",
    "@vue/babel-preset-jsx": "^1.2.4",
    "@vue/composition-api": "^1.0.0-rc.3",
    "assert": "^2.0.0",
    "autoprefixer": "^9.1.5",
    "babel-loader": "^8.2.2",
    "babel-plugin-import": "^1.13.3",
    "vue-loader": "^15.9.6",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.10.1"
    ...
  }

暂时有效方案
使用Demo中的3.1.12版本

<template>
  <BarChart v-bind="config" :data="data" :onReady="onReady" />
</template>
<script setup>
import { ref, reactive, watch } from "vue";
import { BarChart } from "@opd/g2plot-vue";

// 配置
const config = reactive({
  isStack: true,
  autoFit: true,
  xField: "value",
  yField: "year",
  seriesField: "type",
  barStyle: {
    fillOpacity: 1,
    cursor: "pointer",
  },
  label: {
    // 可手动配置 label 数据标签位置
    position: "middle",
    // 可配置附加的布局方法
    layout: [
      // 柱形图数据标签位置自动调整
      { type: "interval-adjust-position" },
      // 数据标签防遮挡
      { type: "interval-hide-overlap" },
      // 数据标签文颜色自动调整
      // { type: "adjust-color" },
    ],
  },
});

const data = ref([
  {
    year: "1991",
    value: 3,
    type: "Lon",
  },
  {
    year: "1992",
    value: 4,
    type: "Lon",
  },
  {
    year: "1993",
    value: 3.5,
    type: "Lon",
  },
  {
    year: "1994",
    value: 5,
    type: "Lon",
  },
  {
    year: "1995",
    value: 4.9,
    type: "Lon",
  },
  {
    year: "1996",
    value: 6,
    type: "Lon",
  },
  {
    year: "1997",
    value: 7,
    type: "Lon",
  },
  {
    year: "1998",
    value: 9,
    type: "Lon",
  },
  {
    year: "1999",
    value: 13,
    type: "Lon",
  },
  {
    year: "1991",
    value: 3,
    type: "Bor",
  },
  {
    year: "1992",
    value: 4,
    type: "Bor",
  },
  {
    year: "1993",
    value: 3.5,
    type: "Bor",
  },
  {
    year: "1994",
    value: 5,
    type: "Bor",
  },
  {
    year: "1995",
    value: 4.9,
    type: "Bor",
  },
  {
    year: "1996",
    value: 6,
    type: "Bor",
  },
  {
    year: "1997",
    value: 7,
    type: "Bor",
  },
  {
    year: "1998",
    value: 9,
    type: "Bor",
  },
  {
    year: "1999",
    value: 13,
    type: "Bor",
  },
]);

const onReady = (plot) => {
  plot.on("legend-item:click", (ev) => {
    console.log(ev);
  });
};
</script>
<style scoped>
</style>

多次点击legend-Item才能响应

Hi,
Just a question, want to know whether g2plot-vue can be used for vue2.

It has been noticed that while using codecov/[email protected] your token ed035cb6-7365-4316-8c33-c4af92efbbb5 is present in plaintext. Please ensure that secrets are encrypted or not passed as plain text in github workflows.

Describe the bug
目前组件属性完全透传，从组件上来说开发可能完全复用，但是会导致 beforeUpdate 不会触发。

举例（vue: 2.6.10）：

<LineChart :data="state.data" v-bind="state.lineChartConfig" />

setup(props) {
    const state = reactive({
      lineChartConfig: {},
      data: [],
    });
    watch(() => props.stageData, next => {
      state.lineChartConfig = {...next.config};
      state.data = next.data;
    });

异步加载组件参数后，尽管 data 发生了变更，但是不会触发 beforeUpdate，组件参数只能在 mounted 生效。与预期不相符

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
attrs 变更触发 beforeUpdate 正常执行

Desktop (please complete the following information):

• OS: macOS
• Browser [e.g. chrome, safari]
• @antv/g2plot Version v2.3.17
• @opd/g2plot-vue Version： v3.1.5
• vue Version：2.6.10

Additional context
Add any other context about the problem here.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem or a mini showcase.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• @antv/g2plot Version [e.g. v2.3.12]
• @opd/g2plot-vue Version [e.g. v3.0.0]
• vue Version [e.g. v3.0.0]

Additional context
Add any other context about the problem here.

            <LineChart
              ref="myRef"
              class="flex-1 w-450px"
              v-bind="monthLineConfig"
              :data="monthReport"
          />


           const myRef = ref(null) 
           onMounted(() => {
              console.log(myRef)
            })

  输出结果：
    Proxy {…}
      [[Handler]]: Object
      [[Target]]: Object
      $: (...)
      $attrs: (...)
      $data: (...)
      $el: (...)
      $emit: (...)
      $forceUpdate: (...)
      $nextTick: (...)
      $options: (...)
      $parent: (...)
      $props: (...)
      $refs: (...)
      $root: (...)
      $slots: (...)
      $watch: (...)
      _: (...)
      __v_skip: true

  找不到任何实例对象，查询文档发现实例demo里面绑定的是chartRef={chartRef}这个属性，但是获取回来也是空

Hello, Great work!!
I was wondering how to use plot events such as the one bellow in vue?

plot.on('element:click', (...args) => {
  console.log(...args);
});

Thanks in advance.

开发环境正常
build也没报错
但发布之后 TypeError: Cannot read properties of undefined (reading 'Graph') 是什么情况？

Describe the bug
Cannot install package via npm. It gives "unable to resolve dependency tree" error.

To Reproduce
1.

npm i @opd/g2plot-vue

Expected behavior
A clean installation

Screenshots
none

• OS: win 10
• Browser: chrome v92.0.4515.107
• @antv/g2plot Version v2.3.18
• @opd/g2plot-vue Version couldn't detected due to installation error.
• vue Version v3.1.1

我用vite 安装后，提示[G2Plot-Vue] Switch main field for Vue 3

然后我用了 node ./node_modules/@opd/g2plot-vue/scripts/postinstall.js

还是提示 [G2Plot-Vue] Switch main field for Vue 3