👏🏻👏🏻👏🏻 收集 G2 生态周边仓库 Collecting G2 related projects #5772

hustcc · 2023-11-08T10:53:48Z

hustcc
Nov 8, 2023
Maintainer

只要是和 AntV G2 相关的开源项目，都可以回帖，等仓库超过 10 个，我们就在 G2 官网开一个页面为大家带来开发者。

包含且不限于：

React、Vue、Angular 等技术栈的封装
基于 G2 的组件封装
提供封装 G2 的插件，参考 g2-extentions 实现
使用 G2 开发的工具、产品
...

期望大家一起，让数据可视化社区活跃起来 🔥🔥🔥🔥🔥，当然也可以在这里提出一些想法，组团来实现！

g2-extentions: The one-stop shop for official @antv/g2 extensions.
g2-react: The lightweight React component for @antv/g2.
ant-design-charts: AntV react component library.
g2x: React component wrapper for @antv/g2.
g2v: Vue component wrapper for @antv/g2.
g2-tiny-bar: The tiny bar mark for @antv/g2.
g2-ssr-node: The tool for G2 spec's SSR(Server-Side Rendering) in Node.js.
streamlit-g2: A visualization grammar based on G2 for streamlit.

hustcc · 2023-11-08T10:56:12Z

hustcc
Nov 8, 2023
Maintainer Author

g2-react: The lightweight React component for @antv/g2.

import React from "react";
import { Chart } from "@berryv/g2-react";

export function Demo() {
  return (
    <Chart
      options={{
        type: "interval",
        width: 640,
        height: 480,
        data: [
          { genre: "Sports", sold: 275 },
          { genre: "Strategy", sold: 115 },
          { genre: "Action", sold: 120 },
          { genre: "Shooter", sold: 350 },
          { genre: "Other", sold: 150 },
        ],
        encode: { x: "genre", y: "sold" },
      }}
    />
  );
}

0 replies

lxfu1 · 2023-11-08T11:03:43Z

lxfu1
Nov 8, 2023
Maintainer

Ant Design Charts: AntV react component library

import { Bar } from '@ant-design/plots';

const data = [
  { year: '1951 年', value: 38 },
  { year: '1952 年', value: 52 },
  { year: '1956 年', value: 61 },
  { year: '1957 年', value: 145 },
  { year: '1958 年', value: 48 },
];

const DemoBar = () => {
  const config = {
    data,
    xField: 'year',
    yField: 'value',
    colorField: 'year',
  };
  return <Bar {...config} />;
};

0 replies

lloydzhou · 2023-11-08T11:11:00Z

lloydzhou
Nov 8, 2023

基于g2 spec api封装 react 组件
ts类型直接使用g2导出类型

https://github.com/lloydzhou/g2x


import { Chart, ... } from "g2x"


function App() {

  return (
    <>
      <Chart width={640} height={480}>
        <SpaceLayer>
          <FetchData value="https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv" format="csv" />
          <Interval>
            <Title title="test title" align="center" />
            <Encode name="x" value="letter" />
            <Encode name="y" value="frequency" />
            <FieldEncode name="color" value="letter" />
            <SortX reverse={true} by="y" />
          </Interval>
          <Interval x={300} y={65} width={300} height={300} legend={false}>
            <FieldEncode name="y" value="frequency" />
            <Encode name="color" value="letter" />
            <StackY />
            <ThetaCoordinate />
          </Interval>
        </SpaceLayer>
      </Chart>
    </>
  )
}

7 replies

hustcc Nov 9, 2023
Maintainer Author

名字不错。

第二点，其实就用当前 vite，然后多加一些示例，构建出来的内容，上传到 gh-pages 分支即可。

hustcc Nov 9, 2023
Maintainer Author

另外 lock 文件可以删除！Readme 的使用文档可以多补补。

lloydzhou Nov 9, 2023

其实这个库，还没有完善，在我看来，还没到一半，最多30%-40%

当前只是处理了一些通过react组件来组织spec的配置项，其实还有一些，需要花时间，慢慢对照g2的文档，以及代码仓库去找出来
还有一个重要的点是，没有处理事件监听相关的逻辑
有可能还需要提供几个hook帮助处理一些常见的逻辑（主要是这个没有使用到真实的业务场景，所以还不知道怎么去抽象）
最后才是周边的，推广相关的，例如做官网，补充文档之类的

Luvoy Nov 9, 2023

请问这个思路和AntV G是一回事吗？

lloydzhou Nov 9, 2023

请问这个思路和AntV G是一回事吗？

@Luvoy

不是，这个是基于g2@5.x新出的spec api封装的 react 组件。使用申明式（jsx）的语法画图。
@antv/g 其实是一个更底层的绘图引擎
据我了解@antv/g仓库内有一个@antv/react-g，这个是使用react-reconcilor直接渲染@antv/g的组件

lloydzhou · 2023-11-13T12:36:22Z

lloydzhou
Nov 13, 2023

https://github.com/lloydzhou/g2v

前面g2x的vue版本
基于g2 spec api封装 vue 组件

import { Chart, ... } from "g2v"


<template>
  <Chart :width="640" :height="480">
    <SpaceLayer>
      <FetchData value="https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv" format="csv" />
      <Interval>
        <Title title="test title" align="center" />
        <Encode name="x" value="letter" />
        <Encode name="y" value="frequency" />
        <FieldEncode name="color" value="letter" />
        <SortX :reverse="true" by="y" />
      </Interval>
      <Interval :x="300" :y="65" :width="300" :height="300" :legend="false">
        <FieldEncode name="y" value="frequency" />
        <Encode name="color" value="letter" />
        <StackY />
        <ThetaCoordinate />
      </Interval>
    </SpaceLayer>
  </Chart>
</template>

0 replies

pearmini · 2023-11-16T09:54:08Z

pearmini
Nov 16, 2023
Collaborator

一个 G2 的复合 Mark：https://github.com/pearmini/g2-tiny-bar

2 replies

hustcc Nov 23, 2023
Maintainer Author

名字叫 g2-extension-tinybar 比较好~

pearmini Nov 23, 2023
Collaborator

有道理

pearmini · 2023-11-23T09:40:37Z

pearmini
Nov 23, 2023
Collaborator

G2 的 SSR 工具：https://github.com/pearmini/g2-ssr-node

0 replies

lloydzhou · 2023-11-24T14:56:11Z

lloydzhou
Nov 24, 2023

之前群里提到的 BizCharts

1 reply

hustcc Nov 27, 2023
Maintainer Author

这个还没有升级到 G2 5.0~

hustcc · 2023-12-12T01:31:24Z

hustcc
Dec 12, 2023
Maintainer Author

pyg2：A grammar of graphics python library for jupyter notebooks based on G2. 即将升级 ThamaluM/pyG2#4

0 replies

hustcc · 2023-12-15T09:09:15Z

hustcc
Dec 15, 2023
Maintainer Author

streamlit-g2: A visualization grammar based on G2 for streamlit. DEMO

import streamlit as st
from streamlit_g2 import g2

options = {
    "type": "interval",
    "data": [
        { "genre": 'Sports', "sold": 275 },
        { "genre": 'Strategy', "sold": 115 },
        { "genre": 'Action', "sold": 120 },
        { "genre": 'Shooter', "sold": 350 },
        { "genre": 'Other', "sold": 150 },
    ],
    "encode": {
        "x": "genre",
        "y": "sold",
        "color": "genre",
    }
}

g2(options=options, style=None, key="streamlit_g2")

API

Now, There is only one API for streamlit-g2, named g2, see the options in G2 Spec API.

Property	Description	Type	Default
options	the options for the visualization, say `chart.options(options)`	`G2options` \| `null`	-
style	the style of the container	`CSSProperties`	-

0 replies

lloydzhou · 2023-12-19T02:15:07Z

lloydzhou
Dec 19, 2023

https://github.com/GOUYONGCHAO/g2r

基于蚂蚁的antv g2 开发R包，可以快速使用g2画图

1 reply

hustcc Dec 19, 2023
Maintainer Author

这个和 pyg2 类似，很久没有更新了~

👏🏻👏🏻👏🏻 收集 G2 生态周边仓库 Collecting G2 related projects #5772

Uh oh!

Uh oh!

hustcc Nov 8, 2023 Maintainer

Replies: 10 comments · 11 replies

Uh oh!

Uh oh!

hustcc Nov 8, 2023 Maintainer Author

Uh oh!

lxfu1 Nov 8, 2023 Maintainer

Uh oh!

Uh oh!

lloydzhou Nov 8, 2023

Uh oh!

Uh oh!

hustcc Nov 9, 2023 Maintainer Author

Uh oh!

Uh oh!

hustcc Nov 9, 2023 Maintainer Author

Uh oh!

lloydzhou Nov 9, 2023

Uh oh!

Luvoy Nov 9, 2023

Uh oh!

Uh oh!

lloydzhou Nov 9, 2023

Uh oh!

lloydzhou Nov 13, 2023

Uh oh!

pearmini Nov 16, 2023 Collaborator

Uh oh!

hustcc Nov 23, 2023 Maintainer Author

Uh oh!

pearmini Nov 23, 2023 Collaborator

Uh oh!

pearmini Nov 23, 2023 Collaborator

Uh oh!

lloydzhou Nov 24, 2023

Uh oh!

hustcc Nov 27, 2023 Maintainer Author

Uh oh!

hustcc Dec 12, 2023 Maintainer Author

Uh oh!

Uh oh!

hustcc Dec 15, 2023 Maintainer Author

API

Uh oh!

lloydzhou Dec 19, 2023

Uh oh!

hustcc Dec 19, 2023 Maintainer Author

hustcc
Nov 8, 2023
Maintainer

Replies: 10 comments 11 replies

hustcc
Nov 8, 2023
Maintainer Author

lxfu1
Nov 8, 2023
Maintainer

lloydzhou
Nov 8, 2023

hustcc Nov 9, 2023
Maintainer Author

hustcc Nov 9, 2023
Maintainer Author

lloydzhou
Nov 13, 2023

pearmini
Nov 16, 2023
Collaborator

hustcc Nov 23, 2023
Maintainer Author

pearmini Nov 23, 2023
Collaborator

pearmini
Nov 23, 2023
Collaborator

lloydzhou
Nov 24, 2023

hustcc Nov 27, 2023
Maintainer Author

hustcc
Dec 12, 2023
Maintainer Author

hustcc
Dec 15, 2023
Maintainer Author

lloydzhou
Dec 19, 2023

hustcc Dec 19, 2023
Maintainer Author