diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000000..b2f1269c49 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,4 @@ +node_modules +dist/ +test +build/ \ No newline at end of file diff --git a/.eslintrc b/.eslintrc index 97bc72f105..2fca4a6321 100644 --- a/.eslintrc +++ b/.eslintrc @@ -29,6 +29,8 @@ "@typescript-eslint/no-inferrable-types": 0, "@typescript-eslint/explicit-function-return-type": 0, "@typescript-eslint/type-annotation-spacing": 0, - "@typescript-eslint/no-empty-function": 1 + "@typescript-eslint/no-empty-function": 1, + "no-undef": 0, + "@typescript-eslint/no-var-requires": 0 } } diff --git a/.umirc.ts b/.umirc.ts deleted file mode 100644 index 604959a4ac..0000000000 --- a/.umirc.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { defineConfig } from 'dumi'; - -export default defineConfig({ - mode: 'site', - title: 'G2Plot', - base: '/', - publicPath: '/', - exportStatic: {}, - logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', - navs: [null, { title: 'GitHub', path: 'https://github.com/antvis/G2Plot' }], - analytics: { - ga: 'UA-72788897-12', - }, - chainWebpack(memo) { - memo.plugins.delete('copy'); - }, - // more config: https://d.umijs.org/config -}); diff --git a/docs/demos/scatter.md b/docs/demos/scatter.md deleted file mode 100644 index c43d312a3d..0000000000 --- a/docs/demos/scatter.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: 散点图 -order: 17 ---- - -# 散点图 - -## Scatter - -```tsx -import React, { useEffect, useState, useRef } from 'react'; -import { Scatter } from '@antv/g2plot'; - -const Page: React.FC = () => { - const [data, setData] = useState([]); - const chart = useRef(); - const fetchData = () => { - fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json') - .then((response) => response.json()) - .then((json) => setData(json)) - .catch((error) => { - console.log('fetch data failed', error); - }); - }; - - useEffect(() => { - chart.current = new Scatter('container', { - width: 400, - height: 300, - appendPadding: 10, - data: data.slice(0, 50), - xField: 'weight', - yField: 'height', - shapeField: 'gender', - shape: ['circle', 'square'], - colorField: 'gender', - color: ['green', 'red'], - sizeField: 'weight', - interactions: [ - { - name: 'drag-move', - }, - ], - label: { - offsetX: 6, - offsetY: 6, - style: { - fill: 'rgba(0, 0, 0, 0.65)', - stroke: '#ffffff', - lineWidth: 2, - }, - }, - tooltip: { - showCrosshairs: true, - crosshairs: { - type: 'xy', - }, - }, - }); - chart.current.render(); - - fetchData(); - }, []); - - useEffect(() => { - if (data.length) { - chart.current.changeData(data); - } - }, [data]); - - return
; -}; -export default Page; -``` diff --git a/docs/index.md b/docs/index.md deleted file mode 100644 index 709954a46a..0000000000 --- a/docs/index.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: G2Plot - 简单好用的图表库 -order: 10 -hero: - title: G2Plot - desc: 简单好用的图表库 - actions: - - text: 快速上手 - link: /demos/scatter -features: - - icon: https://gw.alipayobjects.com/zos/bmw-prod/881dc458-f20b-407b-947a-95104b5ec82b/k79dm8ih_w144_h144.png - title: 开箱即用 - desc: 一个简单的配置就能呈现优雅、标准的图表 - - icon: https://gw.alipayobjects.com/zos/antfincdn/oyqsrPh0Kg/houyuan.png - title: 后援强大 - desc: AntV团队支持，基于 G2 实现，简单方便、专业可靠、无限可能 - - icon: https://gw.alipayobjects.com/zos/antfincdn/aKCFl7vDAB/tubiao.png - title: 图表完善 - desc: 支持全量的 G2 图表，几乎做到同步升级更新 -footer: Open-source MIT Licensed | Copyright © 2019-present ---- - -## 反馈 - -请访问 [GitHub](https://github.com/antvis/G2Plot/issues) diff --git a/docs/manual/introduction.en.md b/docs/manual/introduction.en.md new file mode 100644 index 0000000000..6fc2be2b5f --- /dev/null +++ b/docs/manual/introduction.en.md @@ -0,0 +1,70 @@ +--- +title: 简介 +order: 0 +redirect_from: + - /en/docs/manual +--- + +g2plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"g2plot"中的 g2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。 + +## 特性 + +- 📦 开箱即用、默认好用的高质量统计图表 + +- 🎨 提炼自企业级产品的视觉语言和设计规范 + +- 📊 响应式图表：致力于解决图表在任何数据和显示尺寸下的基本可读性问题 + +- 🔳 图层化设计方法：在 g2plot 体系下，图表不仅仅只是各不相关的实例，图层概念的引入提供了多图表组合叠联动，共同讲述一个数据故事的可能性 + +图片加载失败 + +## 安装 + +```bash +$ npm install @antv/g2plot +``` + +## 使用 + +图片加载失败 + +```html +
+``` + +```js +import { Bar } from '@antv/g2plot'; + +const data = [ + { year: '1951 年', sales: 38 }, + { year: '1952 年', sales: 52 }, + { year: '1956 年', sales: 61 }, + { year: '1957 年', sales: 145 }, + { year: '1958 年', sales: 48 }, +]; + +const barPlot = new Bar('c1', { + data, + xField: 'sales', + yField: 'year', + colorField: 'year', +}); + +barPlot.render(); +``` + +## 开发 + +```bash +$ npm install + +# run test case +$ npm run test-live + +# build watching file changes and run demos +$ npm run dev + +# run demos +$ npm run demos +``` diff --git a/docs/manual/introduction.zh.md b/docs/manual/introduction.zh.md new file mode 100644 index 0000000000..3e4fd88c06 --- /dev/null +++ b/docs/manual/introduction.zh.md @@ -0,0 +1,70 @@ +--- +title: 简介 +order: 0 +redirect_from: + - /zh/docs/manual +--- + +g2plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"g2plot"中的 g2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。 + +## 特性 + +- 📦 开箱即用、默认好用的高质量统计图表 + +- 🎨 提炼自企业级产品的视觉语言和设计规范 + +- 📊 响应式图表：致力于解决图表在任何数据和显示尺寸下的基本可读性问题 + +- 🔳 图层化设计方法：在 g2plot 体系下，图表不仅仅只是各不相关的实例，图层概念的引入提供了多图表组合叠联动，共同讲述一个数据故事的可能性 + +图片加载失败 + +## 安装 + +```bash +$ npm install @antv/g2plot +``` + +## 使用 + +图片加载失败 + +```html +
+``` + +```js +import { Bar } from '@antv/g2plot'; + +const data = [ + { year: '1951 年', sales: 38 }, + { year: '1952 年', sales: 52 }, + { year: '1956 年', sales: 61 }, + { year: '1957 年', sales: 145 }, + { year: '1958 年', sales: 48 }, +]; + +const barPlot = new Bar('c1', { + data, + xField: 'sales', + yField: 'year', + colorField: 'year', +}); + +barPlot.render(); +``` + +## 开发 + +```bash +$ npm install + +# run test case +$ npm run test-live + +# build watching file changes and run demos +$ npm run dev + +# run demos +$ npm run demos +``` diff --git a/examples/gallery/index.en.md b/examples/gallery/index.en.md new file mode 100644 index 0000000000..8686153cc8 --- /dev/null +++ b/examples/gallery/index.en.md @@ -0,0 +1,7 @@ +--- +title: 所有图表 +order: -1 +icon: other +redirect_from: + - /en/examples +--- diff --git a/examples/gallery/index.zh.md b/examples/gallery/index.zh.md new file mode 100644 index 0000000000..7e2cf889df --- /dev/null +++ b/examples/gallery/index.zh.md @@ -0,0 +1,7 @@ +--- +title: 所有图表 +order: -1 +icon: other +redirect_from: + - /zh/examples +--- diff --git a/examples/scatter/basic/API.ch.md b/examples/scatter/basic/API.ch.md new file mode 100644 index 0000000000..8fe1533b5a --- /dev/null +++ b/examples/scatter/basic/API.ch.md @@ -0,0 +1,15 @@ +--- +title: API +--- + +# 配置属性 + +## 图表容器 + +### width + +**可选**, _number_ + +功能描述： 设置图表宽度。 + +默认配置： `400` diff --git a/examples/scatter/basic/API.en.md b/examples/scatter/basic/API.en.md new file mode 100644 index 0000000000..b811d8e074 --- /dev/null +++ b/examples/scatter/basic/API.en.md @@ -0,0 +1,293 @@ +--- +title: API +--- + +# 配置属性 + +## 图表容器 + +### width + +**可选**, _number_ + +功能描述： 设置图表宽度。 + +默认配置： `400` + +### height + +**可选**, _number_ + +功能描述： 设置图表高度。 + +默认配置： `400` + +### autoFit + +**可选**, _boolean_ + +功能描述： 画布是否自动适配容器大小，当 `autoFit` 设置为 true 时，`width` 和 `height` 的设置将失效。 + +默认配置： `true` + +### padding + +**可选**, number[] | number | 'auto' + +功能描述： 画布的 `padding` 值，或者开启 `auto` + +### appendPadding + +**可选**, number[] | number + +功能描述： 额外怎加的 `appendPadding` 值 + +### renderer + +**可选**, _string_ + +功能描述: 设置图表渲染方式为 `canvas` 或 `svg` + +默认配置： `canvas` + +### pixelRatio + +**可选**, number + +功能描述: 设置图表渲染的像素比 + +默认配置： `window.devicePixelRatio` + +## 数据映射 + +### data 📌 + +**必选**, _array object_ + +功能描述： 设置图表数据源 + +默认配置： 无 + +数据源为对象集合，例如：`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。 + +### meta + +**可选**, _object_ + +功能描述： 全局化配置图表数据元信息，以字段为单位进行配置。在 meta 上的配置将同时影响所有组件的文本信息。 + +默认配置： 无 + +| 细分配置项名称 | 类型 | 功能描述 | +| -------------- | ---------- | ------------------------------------------- | +| alias | _string_ | 字段的别名 | +| formatter | _function_ | callback 方法，对该字段所有值进行格式化处理 | +| values | _string[]_ | 枚举该字段下所有值 | +| range | _number[]_ | 字段的数据映射区间，默认为[0,1] | + +```js +const data = [ + { country: 'Asia', year: '1750', value: 502,}, + { country: 'Asia', year: '1800', value: 635,}, + { country: 'Europe', year: '1750', value: 163,}, + { country: 'Europe', year: '1800', value: 203,}, +]; + +const scatterPlot = new Scatter(document.getElementById('container'), { + data, + // highlight-start + meta: { + year: { + alias:'年份' + range: [0, 1], + }, + value: { + alias: '数量', + formatter:(v)=>{return `${v}个`} + } + }, + // highlight-end + xField: 'year', + yField: 'value', + colorField: 'country', +}); +scatterPlot.render(); + +``` + +### xField 📌 + +**必选**, _string_ + +功能描述： 点形状在 x 方向位置映射对应的数据字段名，一般对应一个连续字段。 + +默认配置： 无 + +### yField 📌 + +**必选**, _string_ + +功能描述： 点形状在 y 方向位置映射所对应的数据字段名，一般对应一个连续字段。 + +默认配置： 无 + +### type + +**可选**, `jitter` | `stack` | `symmetric` | `dodge`; + +功能描述： 数据调整类型，不建议修改。 + +默认配置： `jitter` + +### colorField + +**可选**, _string_ + +功能描述: 点颜色映射对应的数据字段名。 + +## 图形样式 + +### color + +**可选**, _string | string[] | Function_ + +[**DEMO1**](../../scatter/basic#color-mapping) + +功能描述： 指定点的颜色。如没有配置 colorField，指定一个单值即可。对 colorFiled 进行了配置的情况下，即可以指定一系列色值，也可以通过回调函数的方法根据对应数值进行设置。 + +默认配置：采用 theme 中的色板。 + +```js +// 设置单一颜色 +color: '#a8ddb5' +// 设置多色 +colorField: 'type', +color: ['#d62728', '#2ca02c', '#000000'], +// Function +colorField: 'type', +color: (type) => { + if(type === 'male'){ + return 'red'; + } + // TODO + return 'yellow'; +}, +``` + +### sizeField + +**可选**, _string_ + +功能描述: 点大小映射对应的数据字段名。 + +### size ✨ + +_ +**可选**, \_number | [number, number] | Function_ + +功能描述： 指定点的大小。如没有配置 sizeField，指定一个即可。对 sizeFiled 进行了配置的情况下，可以指定大小数组 `[minSize, maxSize]`， 也可以通过回调函数的方法根据对应数值进行设置。 + +```js +// 设置单一大小 +size: 10 +// 大小区间 +sizeField: 'weight', +size: [2, 10], +// Function +sizeField: 'weight', +size: (weight) => { + // TODO + return Math.floor(weight / 100); +}, +``` + +### shapeField + +**可选**, _string_ + +功能描述: 点形状映射对应的数据字段名。 + +### shape ✨ + +_ +**可选**, \_string | string[] | Function_ + +功能描述： 指定点的形状。如没有配置 shapeField ，指定一个即可。对 shapeField 进行了配置的情况下，可以指定形状数组 `['cicle', 'square']`， 也可以通过回调函数的方法根据对应数值进行设置。 + +内置图形：circle, square, bowtie, diamond, hexagon, triangle,triangle-down, hollow-circle, hollow-square, hollow-bowtie,hollow-diamond, hollow-hexagon, hollow-triangle, hollow-triangle-down, cross, tick, plus, hyphen, line. + +```js +// 设置单一大小 +shape: 'square' +// 大小区间 +shapeField: 'gender', +shape: ['circle', 'square'], +// Function +shapeField: 'gender', +shape: (gender) => { + if(type === 'male'){ + return 'circle'; + } + // TODO + return 'square'; +}, +``` + +### pointStyle ✨ + +**可选**, _object_ + +[**DEMO**](../../scatter/basic#color-mapping) + +功能描述： 设置折线样式。pointStyle 中的`fill`会覆盖 `color` 的配置。pointStyle 可以直接指定，也可以通过 callback 的方式，根据数据指定单独的样式。 + +默认配置： + +| 细分配置 | 类型 | 功能描述 | +| ------------- | ------ | ---------- | +| fill | string | 填充颜色 | +| stroke | string | 描边颜色 | +| lineWidth | number | 线宽 | +| lineDash | number | 虚线显示 | +| opacity | number | 透明度 | +| fillOpacity | number | 填充透明度 | +| strokeOpacity | number | 描边透明度 | + +```js +// 直接指定 +pointStyle: { + fill: 'red', + stroke: 'yellow', + opacity: 0.8 +} +// 回调 +pointStyle: (x, y, colorField) => { + if (colorField === 'male') { + return { + fill: 'green', + stroke: 'yellow', + opacity: 0.8, + } + } + // TODO + return { + fill: 'red', + stroke: 'yellow', + opacity: 0.8, + }; +}; +``` + +## 图表组件 + +`xAxis`、`yAxis` 、`legend` 、`tooltip` 、`label`、`theme` 等通用组件请参考图表通用配置 + +## 事件 + +[通用 events](../../general/events/API) + +### 点图形事件 + +| onPointClick
点点击事件 | onPointDblClick
点双击事件 | onPointDblClick
点双击事件 | onPointMouseleave
点鼠标离开事件 | +| ------------------------------------ | ----------------------------------- | ---------------------------------- | ------------------------------------- | +| onPointMousemove
点鼠标移动事件 | onPlotMousedown
点鼠标按下事件 | onPointMouseup
点鼠标松开事件 | onPointMouseenter
点鼠标进入事件 | diff --git a/examples/scatter/basic/API.zh.md b/examples/scatter/basic/API.zh.md new file mode 100644 index 0000000000..5a48fa2781 --- /dev/null +++ b/examples/scatter/basic/API.zh.md @@ -0,0 +1,295 @@ +--- +title: API +--- + +# 配置属性 + +## 图表容器 + +### width + +**可选**, _number_ + +功能描述： 设置图表宽度。 + +默认配置： `400` + +### height + +**可选**, _number_ + +功能描述： 设置图表高度。 + +默认配置： `400` + +### autoFit + +**可选**, _boolean_ + +功能描述： 画布是否自动适配容器大小，当 `autoFit` 设置为 true 时，`width` 和 `height` 的设置将失效。 + +默认配置： `true` + +### padding + +**可选**, number[] | number | 'auto' + +功能描述： 画布的 `padding` 值，或者开启 `auto` + +### appendPadding + +**可选**, number[] | number + +功能描述： 额外增加的 `appendPadding` 值 + +### renderer + +**可选**, _string_ + +功能描述: 设置图表渲染方式为 `canvas` 或 `svg` + +默认配置： `canvas` + +### pixelRatio + +**可选**, number + +功能描述: 设置图表渲染的像素比 + +默认配置： `window.devicePixelRatio` + +## 数据映射 + +### data 📌 + +**必选**, _array object_ + +功能描述： 设置图表数据源 + +默认配置： 无 + +数据源为对象集合，例如：`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。 + +### meta + +**可选**, _object_ + +功能描述： 全局化配置图表数据元信息，以字段为单位进行配置。在 meta 上的配置将同时影响所有组件的文本信息。 + +默认配置： 无 + +| 细分配置项名称 | 类型 | 功能描述 | +| -------------- | ---------- | ------------------------------------------- | +| alias | _string_ | 字段的别名 | +| formatter | _function_ | callback 方法，对该字段所有值进行格式化处理 | +| values | _string[]_ | 枚举该字段下所有值 | +| range | _number[]_ | 字段的数据映射区间，默认为[0,1] | + +```js +const data = [ + { country: 'Asia', year: '1750', value: 502,}, + { country: 'Asia', year: '1800', value: 635,}, + { country: 'Europe', year: '1750', value: 163,}, + { country: 'Europe', year: '1800', value: 203,}, +]; + +const scatterPlot = new Scatter(document.getElementById('container'), { + data, + // highlight-start + meta: { + year: { + alias:'年份' + range: [0, 1], + }, + value: { + alias: '数量', + formatter:(v)=>{return `${v}个`} + } + }, + // highlight-end + xField: 'year', + yField: 'value', + colorField: 'country', +}); +scatterPlot.render(); + +``` + +### xField 📌 + +**必选**, _string_ + +功能描述： 点形状在 x 方向位置映射对应的数据字段名，一般对应一个连续字段。 + +默认配置： 无 + +### yField 📌 + +**必选**, _string_ + +功能描述： 点形状在 y 方向位置映射所对应的数据字段名，一般对应一个连续字段。 + +默认配置： 无 + +### type + +**可选**, _jitter | stack | symmetric | dodge_; + +功能描述： 数据调整类型，不建议修改。 + +默认配置： `jitter` + +### colorField + +**可选**, _string_ + +功能描述: 点颜色映射对应的数据字段名。 + +## 图形样式 + +### color + +**可选**, _string | string[] | Function_ + +[**DEMO1**](../../scatter/basic#color-mapping) + +功能描述： 指定点的颜色。如没有配置 colorField，指定一个单值即可。对 colorFiled 进行了配置的情况下，即可以指定一系列色值，也可以通过回调函数的方法根据对应数值进行设置。 + +默认配置：采用 theme 中的色板。 + +```js +// 设置单一颜色 +color: '#a8ddb5' +// 设置多色 +colorField: 'type', +color: ['#d62728', '#2ca02c', '#000000'], +// Function +colorField: 'type', +color: (type) => { + if(type === 'male'){ + return 'red'; + } + // TODO + return 'yellow'; +}, +``` + +### sizeField + +**可选**, _string_ + +功能描述: 点大小映射对应的数据字段名。 + +### size ✨ + +[**DEMO1**](../../scatter/basic#color-mapping) + +**可选**, \_number | [number, number] | Function\_ + +功能描述： 指定点的大小。如没有配置 sizeField，指定一个即可。对 sizeFiled 进行了配置的情况下，可以指定大小数组 `[minSize, maxSize]`， 也可以通过回调函数的方法根据对应数值进行设置。 + +```js +// 设置单一大小 +size: 10 +// 大小区间 +sizeField: 'weight', +size: [2, 10], +// Function +sizeField: 'weight', +size: (weight) => { + // TODO + return Math.floor(weight / 100); +}, +``` + +### shapeField + +**可选**, _string_ + +功能描述: 点形状映射对应的数据字段名。 + +### shape ✨ + +[**DEMO2**](../../scatter/basic#shape-mapping) + +**可选**, \_string | string[] | Function\_ + +功能描述： 指定点的形状。如没有配置 shapeField ，指定一个即可。对 shapeField 进行了配置的情况下，可以指定形状数组 `['cicle', 'square']`， 也可以通过回调函数的方法根据对应数值进行设置。 + +内置图形：circle, square, bowtie, diamond, hexagon, triangle,triangle-down, hollow-circle, hollow-square, hollow-bowtie,hollow-diamond, hollow-hexagon, hollow-triangle, hollow-triangle-down, cross, tick, plus, hyphen, line. + +```js +// 设置单一大小 +shape: 'square' +// 大小区间 +shapeField: 'gender', +shape: ['circle', 'square'], +// Function +shapeField: 'gender', +shape: (gender) => { + if(type === 'male'){ + return 'circle'; + } + // TODO + return 'square'; +}, +``` + +### pointStyle ✨ + +**可选**, _object_ + +[**DEMO**](../../scatter/basic#color-mapping) + +功能描述： 设置折线样式。pointStyle 中的`fill`会覆盖 `color` 的配置。pointStyle 可以直接指定，也可以通过 callback 的方式，根据数据指定单独的样式。 + +默认配置： + +| 细分配置 | 类型 | 功能描述 | +| ------------- | ------ | ---------- | +| fill | string | 填充颜色 | +| stroke | string | 描边颜色 | +| lineWidth | number | 线宽 | +| lineDash | number | 虚线显示 | +| opacity | number | 透明度 | +| fillOpacity | number | 填充透明度 | +| strokeOpacity | number | 描边透明度 | + +```js +// 直接指定 +pointStyle: { + fill: 'red', + stroke: 'yellow', + opacity: 0.8 +} +// 回调 +pointStyle: (x, y, colorField) => { + if (colorField === 'male') { + return { + fill: 'green', + stroke: 'yellow', + opacity: 0.8, + } + } + // TODO + return { + fill: 'red', + stroke: 'yellow', + opacity: 0.8, + }; +}; +``` + +## 图表组件 + +`xAxis`、`yAxis` 、`legend` 、`tooltip` 、`label`、`theme` 等通用组件请参考图表通用配置 + +## 事件 + +[通用 events]() + +### 点图形事件 + +| onPointClick
点点击事件 | onPointDblClick
点双击事件 | onPointDblClick
点双击事件 | onPointMouseleave
点鼠标离开事件 | +| ------------------------------------ | ----------------------------------- | ---------------------------------- | ------------------------------------- | +| onPointMousemove
点鼠标移动事件 | onPlotMousedown
点鼠标按下事件 | onPointMouseup
点鼠标松开事件 | onPointMouseenter
点鼠标进入事件 | diff --git a/examples/scatter/basic/demo/basic.js b/examples/scatter/basic/demo/basic.js new file mode 100644 index 0000000000..93071e0898 --- /dev/null +++ b/examples/scatter/basic/demo/basic.js @@ -0,0 +1,22 @@ +import { Scatter } from '@antv/g2plot'; + +fetch('https://gw.alipayobjects.com/os/antfincdn/aao6XnO5pW/IMDB.json') + .then((res) => res.json()) + .then((data) => { + const scatterPlot = new Scatter(document.getElementById('container'), { + width: 400, + height: 300, + appendPadding: 10, + data, + xField: 'Revenue (Millions)', + yField: 'Rating', + shape: 'circle', + xAxis: { + visible: true, + }, + pointStyle: { + stroke: '#777', + }, + }); + scatterPlot.render(); + }); diff --git a/examples/scatter/basic/demo/color-mapping.js b/examples/scatter/basic/demo/color-mapping.js new file mode 100644 index 0000000000..7c604419da --- /dev/null +++ b/examples/scatter/basic/demo/color-mapping.js @@ -0,0 +1,25 @@ +import { Scatter } from '@antv/g2plot'; + +fetch('https://gw.alipayobjects.com/os/antfincdn/aao6XnO5pW/IMDB.json') + .then((res) => res.json()) + .then((data) => { + const scatterPlot = new Scatter(document.getElementById('container'), { + width: 400, + height: 300, + appendPadding: 10, + data, + xField: 'Revenue (Millions)', + yField: 'Rating', + shape: 'circle', + colorField: 'Genre', + sizeField: 'Rating', + size: [2, 6], + xAxis: { + nice: true, + }, + pointStyle: { + stroke: '#777', + }, + }); + scatterPlot.render(); + }); diff --git a/examples/scatter/basic/demo/meta.json b/examples/scatter/basic/demo/meta.json new file mode 100644 index 0000000000..21f62ccccb --- /dev/null +++ b/examples/scatter/basic/demo/meta.json @@ -0,0 +1,32 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "basic.js", + "title": { + "zh": "基础散点图", + "en": "basic Scatter chart" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Cu0wSYK_U6YAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "color-mapping.js", + "title": { + "zh": "散点图颜色映射", + "en": "the color mapping of Scatter chart" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Mds9Q7-zeHMAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "shape-mapping.js", + "title": { + "zh": "散点形状色映射", + "en": "the shape mapping of Scatter chart" + }, + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/kRFIJ2OlFs/FE726B54-2352-47F5-AAF9-B17D281CE513.png" + } + ] +} diff --git a/examples/scatter/basic/demo/shape-mapping.js b/examples/scatter/basic/demo/shape-mapping.js new file mode 100644 index 0000000000..e84cf6478a --- /dev/null +++ b/examples/scatter/basic/demo/shape-mapping.js @@ -0,0 +1,24 @@ +import { Scatter } from '@antv/g2plot'; + +fetch('https://gw.alipayobjects.com/os/antfincdn/aao6XnO5pW/IMDB.json') + .then((res) => res.json()) + .then((data) => { + const scatterPlot = new Scatter(document.getElementById('container'), { + width: 400, + height: 300, + appendPadding: 10, + data, + xField: 'Revenue (Millions)', + yField: 'Rating', + shapeField: 'Genre', + shape: ['circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'hyphen', 'line', 'cross'], + colorField: 'Genre', + xAxis: { + nice: true, + }, + pointStyle: { + stroke: '#777', + }, + }); + scatterPlot.render(); + }); diff --git a/examples/scatter/basic/index.en.md b/examples/scatter/basic/index.en.md new file mode 100644 index 0000000000..f2c8c50085 --- /dev/null +++ b/examples/scatter/basic/index.en.md @@ -0,0 +1,4 @@ +--- +title: 散点图 +order: 0 +--- diff --git a/examples/scatter/basic/index.zh.md b/examples/scatter/basic/index.zh.md new file mode 100644 index 0000000000..f2c8c50085 --- /dev/null +++ b/examples/scatter/basic/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 散点图 +order: 0 +--- diff --git a/gatsby-browser.js b/gatsby-browser.js new file mode 100644 index 0000000000..355cbd4d29 --- /dev/null +++ b/gatsby-browser.js @@ -0,0 +1,3 @@ +window.g2plot = require('./src/index.ts'); +window.dataSet = require('@antv/data-set'); +window.util = require('@antv/util'); diff --git a/gatsby-config.js b/gatsby-config.js new file mode 100644 index 0000000000..d1407ca4c4 --- /dev/null +++ b/gatsby-config.js @@ -0,0 +1,65 @@ +const { repository } = require('./package.json'); + +module.exports = { + plugins: [ + { + resolve: '@antv/gatsby-theme-antv', + options: { + // eslint-disable-next-line quotes + GATrackingId: `UA-148148901-2`, + }, + }, + ], + // Customize your site metadata: + siteMetadata: { + title: 'G2Plot', + description: 'A collection of charts made with the Grammar of Graphics', + siteUrl: 'https://g2plot.antv.vision', + githubUrl: repository.url, + versions: { + '2.x': 'https://g2plot.antv.vision/', + '1.x': 'https://g2plot-v1.antv.vision/', + }, + navs: [ + { + slug: 'docs/manual', + title: { + zh: '使用文档', + en: 'Manual', + }, + order: 1, + }, + { + slug: 'examples', + title: { + zh: '图表示例', + en: 'Examples', + }, + order: 0, + }, + { + slug: 'https://charts.ant.design/', + title: { + zh: 'React 版本', + en: 'React Version', + }, + }, + ], + docs: [], + examples: [ + { + slug: 'scatter', + icon: 'point', + title: { + zh: '散点图', + en: 'Scatter Charts', + }, + }, + // OTHERS + ], + docsearchOptions: { + apiKey: '200ec461f4aa0bb4f0e761566f1a1336', + indexName: 'antv_g2plot', + }, + }, +}; diff --git a/package.json b/package.json index 23e43eec74..1b132dc793 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,11 @@ "url": "https://github.com/antvis/g2plot" }, "scripts": { - "start": "dumi dev", + "start": "npm run site:develop", + "site:develop": "PORT=8080 gatsby develop --open -H 0.0.0.0", + "site:build": "npm run site:clean && gatsby build --prefix-paths", + "site:clean": "gatsby clean", + "site:deploy": "npm run doc && npm run site:build && gh-pages -d public", "fix": "eslint --ext .ts ./src ./__tests__ --fix && prettier --write ./src ./__tests__", "build": "run-s clean lib dist", "clean": "rimraf lib esm dist", @@ -55,6 +59,7 @@ "tslib": "^1.13.0" }, "devDependencies": { + "@antv/gatsby-theme-antv": "^0.10.69", "@babel/core": "^7.10.4", "@babel/preset-env": "^7.10.4", "@commitlint/cli": "^8.2.0", @@ -65,11 +70,12 @@ "babel-loader": "^8.1.0", "conventional-changelog-cli": "^2.0.34", "cross-env": "^7.0.2", - "dumi": "^1.0.33", "eslint": "^6.1.0", "eslint-config-prettier": "^6.0.0", "eslint-plugin-prettier": "^3.1.0", + "gatsby": "^2.20.22", "generate-changelog": "^1.8.0", + "gh-pages": "^3.1.0", "husky": "^4.2.3", "jest": "^26.0.1", "jest-electron": "^0.1.7", @@ -77,6 +83,7 @@ "lint-staged": "^10.0.7", "npm-run-all": "^4.1.5", "prettier": "^2.0.1", + "react-i18next": "^11.7.0", "rimraf": "^3.0.0", "ts-jest": "^25.4.0", "ts-loader": "^7.0.0", diff --git a/site/locale.json b/site/locale.json new file mode 100644 index 0000000000..a8f06dc51b --- /dev/null +++ b/site/locale.json @@ -0,0 +1,13 @@ +{ + "图表实验室": "Advanced Features", + "来这里尝试一下我们正在开发中的高级图表功能": "We are now working on some advanced and powerful chart features.", + "G2Plot 开箱即用的图表库": "G2Plot: a charting library", + "G2Plot 是开箱即用、易于配置、具有良好视觉和交互体验的通用统计图表库。": "G2Plot is an interactive and responsive charting library based on the grammar of graphics.", + "开箱即用": "easy to use", + "配置项优化精简，仅需几行代码轻松生成图表": "Generating high quality statistical charts through a few lines of code.", + "默认好用": "default by good", + "即使你是可视化或设计小白，也能制作优雅、标准的统计图表": "Even though you are not an expert in data visualization and design, you still can create elegant as well as standard charts as you want by using g2plot.", + "响应式图表": "responsive plots", + "保证图表在任何显示尺寸、任何数据状态下的可读性": "The responsive ablity of g2plot guarantee your chart's readability in any display space and data status.", + "开始使用": "Getting Started" +} diff --git a/site/pages/index.en.tsx b/site/pages/index.en.tsx new file mode 100644 index 0000000000..4f2095ca13 --- /dev/null +++ b/site/pages/index.en.tsx @@ -0,0 +1,3 @@ +import Index from './index.zh'; + +export default Index; diff --git a/site/pages/index.zh.tsx b/site/pages/index.zh.tsx new file mode 100644 index 0000000000..1990ba56b3 --- /dev/null +++ b/site/pages/index.zh.tsx @@ -0,0 +1,84 @@ +import React from 'react'; +import SEO from '@antv/gatsby-theme-antv/site/components/Seo'; +import { useTranslation } from 'react-i18next'; +import Banner from '@antv/gatsby-theme-antv/site/components/Banner'; +import Features from '@antv/gatsby-theme-antv/site/components/Features'; +import Cases from '@antv/gatsby-theme-antv/site/components/Cases'; + +const IndexPage = () => { + const { t, i18n } = useTranslation(); + + const features = [ + { + icon: 'https://gw.alipayobjects.com/zos/basement_prod/eae0ee4e-acbf-4486-88eb-ea17f441a0d5.svg', + title: t('开箱即用'), + description: t('配置项优化精简，仅需几行代码轻松生成图表'), + }, + { + icon: 'https://gw.alipayobjects.com/zos/basement_prod/7269ccc5-fbe2-4e55-85d1-17c05917e8b0.svg', + title: t('默认好用'), + description: t('即使你是可视化或设计小白，也能制作优雅、标准的统计图表'), + }, + { + icon: 'https://gw.alipayobjects.com/zos/basement_prod/d77e48ed-4e4c-43f5-bd83-329e12c28c16.svg', + title: t('响应式图表'), + description: t('保证图表在任何显示尺寸、任何数据状态下的可读性'), + }, + ]; + + const bannerButtons = [ + { + text: t('图表示例'), + link: `/${i18n.language}/examples/gallery`, + type: 'primary', + }, + { + text: t('开始使用'), + link: `/${i18n.language}/docs/manual/introduction`, + }, + ]; + + const cases = [ + { + logo: 'https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Uh1MSpdcj-kAAAAAAAAAAABkARQnAQ', + title: t('图表实验室'), + description: t('来这里尝试一下我们正在开发中的高级图表功能'), + link: `/${i18n.language}/examples/advanced/connection`, + image: 'https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*SXLtRaVPGvMAAAAAAAAAAABkARQnAQ', + isAppLogo: true, + }, + ]; + + const notifications = [ + { + type: 'News', + title: 'G2Plot 2.0 发布了', + date: '2020.08.18', + link: 'https://charts.ant.design/', + }, + ]; + + return ( + <> + + + } + title={t('G2Plot 开箱即用的图表库')} + description={t('G2Plot 是开箱即用、易于配置、具有良好视觉和交互体验的通用统计图表库。')} + className="banner" + buttons={bannerButtons} + notifications={notifications} + /> + + + + ); +}; + +export default IndexPage;