Releases · antvis/gatsby-theme-antv

Merge pull request #271 from antvis/style_fix (931be33)
style: 样式微调 (5b2a8c7)
Merge branch 'master' of github.com:antvis/gatsby-theme-antv (3956ddd)
style: tweak the style of the playground && update markdown (aa62412)
Merge pull request #270 from antvis/fix-style (056bba0)
fix: footer style (375f10e)
fix: header style (7d17817)
Merge pull request #269 from antvis/fix-header-card (4203725)
remove max-height of aritcle (2e7f09f)
style: fix Header products card style (236923d)
fix: delete useless code (90ac8d2)
fix: tweak the header style for playground (8f0b412)

新增特性及升级指南

支持引用 markdown 内容

markdown 后面指明引用的 md 路径，从根目录开始

支持在 markdown 中插入 live demo

<playground path='category/basic/demo/ts-demo.ts' rid='container'></playground>

name	description	isRequired	type	default
path	demo 从 examples 文件开始路径	true	string	-
height	容器高度	false	number	400
rid	如果一页有超过两个 code playground 需要加入，否则容器都为 container 会重复渲染	false	string	'container'

*注意如果代码中有 fetch data，而 fetch 的路径又是一个相对路径，那么会在引用之后在该文档地方找不到数据而报错，推荐将数据上传 cdn。

页面右侧目录优化

伴随滚动高亮
层级收起展开
回到顶部
（无需额外配置）

Editor 代码块提示

在项目中增加api-extractor.json

mainEntryPointFilePath配置为该项目build后类型定义入口文件的路径。gatsby-theme-antv在启动时会根据入口文件分析类型定义，如果没有配置文件或者配置出错，会导致代码不出现智能提示。

Editor 远程请求数据展示数据格式

无需额外配置

图表示例

新增特性

gallery 瀑布流展示

回到顶部

升级指引

无需额外配置

图表详情页

新增特性

布局

布局切换：提供三种常用视图（经典视图、两栏视图、三栏视图）供用户切换，并且会记下用户的常用视图选择。
布局拖拽：不同布局下都支持视图窗格随意拖拽。

布局自适应：移动端默认为上下两栏布局。

图表快速切换

增加面包屑导航全量图表切换、图例导航同类别切换两种图表切换方式。点击面包屑导航能快速返回至 Gallery 页面。

图表设备视图切换

提供了PC端，平板、移动端三种不同设备下图表视图展示。

API 文档

层级收起展开：支持 API 文档按照书写曾经收起展开。（目前仅支持三级）
关键词搜索：支持 API 文档搜索高亮展示结果。
Code Editor 代码关键词搜索：支持编辑器中右键选中关键词在 API 文档中检索。

移动端镜像切换提示

增加移动端镜像切换提示。

升级指引

修改 gatsby-config.js 文件。siteMetadata 新增两个配置属性：

showChartResize 如果图表为自适应图表，想要给用户展示在不同设备下的图表样式，则将该属性设置为 true。则会在图表详情页展示设备切换的按钮组。

showAPIDoc 如果该属性设置为 false，则不会在图表详情页面展示 API 文档栏，默认为图表、Code Editor 两栏布局。（适用于无 API 文档或文档没有升级完成的技术栈）

// gatsby-config.js
const { repository } = require('./package.json');

module.exports = {
  siteMetadata: {
   ...
   showChartResize: true // 是否在demo页展示图表视图切换
   showAPIDoc: true // 是否在demo页展示API文档
   ...
  },
};

API 文档格式改造。

API文档书写规范

Markdown，支持套娃

目录结构规范

公共部分的 md 统一放在 /docs/common 下
命名规则维持原有规则：xxx.en.md xxx.zh.md 建议尽量以内容标题命名。
如：

├── docs
│   └── common
│       ├── container.zh.md
│       └── container.en.md

书写规范

公共引用文档

拆分标准：拆分到最细粒度，只包含两级层级, 无文档头。

示例:

#### title

正文内容

非公共引用文档

非公共引用文档最多只写到三级标题

自定义tag标签:
- color: 颜色名或颜色值 **可选 **_string _ 值为以下颜色名或具体色值：

text：标签文字 **可选 **string
配置项或属性描述： **optional** _{type}_
- 参数类型： _{type}_ 如： _number[]|number_
- 是否可选： **可选** | **不可选**
- default：**default: false | true | ... **
插入部分统一标识： markdown:filename.zh.md

结合交互式文档demo示例：

---
title: 配置项文档  一级标题
order: 0 顺序
redirect_from:  顶部导航
  - /zh/docs/manual
---

## 数据样式

### meta

<description> **optional**  _object_  **</description>

功能描述： 全局化配置图表数据元信息，以字段为单位进行配置。在 meta 上的配置将同时影响所有组件的文本信息。

默认配置： 无

<!--引用文件声明：中文-->
`markdown:common/filename.zh.md`

<!--引用文件声明：英文-->
`markdown:common/filename.en.md`

<!--自定义标签-->
<tag color="#fff" text="func"></tag>

折叠面板实现方式：在 render AST 过程中分别对各层级结构进行components替换。

完整示例

公共文档

/docs/common/container.zh.md

<tag color="#87d068" text="我是引用"></tag>

#### width

<description>**可选** _number_</description>

功能描述：设置图表宽度。

默认配置：`400`

#### height

**可选**, _number_

功能描述：设置图表高度。

默认配置：`400`

#### forceFit

<description>**可选** _number_</description>

功能描述：图表是否自适应容器宽高。当 `forceFit` 设置为 true 时，`width` 和 `height` 的设置将失效。

默认配置：`true`

/docs/common/datamap.zh.md

<tag color="gold" text="我是引用"></tag>

#### data 📌

<description>**必选** _array object_</description>

功能描述：设置图表数据源

默认配置：无

数据源为对象集合，例如：`[{ type: 'a'，value: 20 }, { type: 'b'，value: 20 }]`。

#### meta

<description>**可选** _object_</description>

功能描述：全局化配置图表数据元信息，以字段为单位进行配置。在 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 areaPlot = new PercentageStackArea(document.getElementById('container'), {
  title: {
    visible: true,
    text: '百分比堆叠面积图',
  },
  data,
  // highlight-start
  meta: {
    year: {
      alias:'年份'
      range: [0, 1],
    },
    value: {
      alias: '数量',
      formatter:(v)=>{return `${v}个`}
    }
  },
  // highlight-end
  xField: 'year',
  yField: 'value',
  stackField: 'country',
});
areaPlot.render();

#### 普通文档
```markdown
---
title: API
order: 0
redirect_from:
  - /zh/docs/manual
---

## 配置属性

### 图表容器

`markdown:common/container.zh.md`

### 数据映射

`markdown:common/data-mapping.zh.md`

插入效果

404 链接监控

AntV 系统网站中经常出现一些死链，导致用户体验不佳，我们在最新版本的 gatsby-theme-antv 中加入了 404 链接监控的功能。原理是当用户访问到 404 页面时，向 Google 分析发送一个自定义事件进行事后统计。
效果如下：

升级指引

将你的 @antv/gatsby-theme-antv 包版本升级到 ^1.0.0-beta.9 以上。
重新部署网站。

如何查看 404 链接？

访问 Google 分析的对应站点，如 G2Plot。没有权限可以找 @偏右(xingmin.zhu) 开启。
进入事件，找到 report 事件标签 + 404 事件类别。

如何修复 404 链接？

目前还无法显示用户从哪里点过来的，你需要在代码中搜索对应的 url 自行进行排查。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

新增特性及升级指南

支持引用 markdown 内容

支持在 markdown 中插入 live demo

页面右侧目录优化

Editor 代码块提示

Editor 远程请求数据展示数据格式

图表示例

新增特性

gallery 瀑布流展示

回到顶部

升级指引

图表详情页

新增特性

布局

图表快速切换

图表设备视图切换

API 文档

移动端镜像切换提示

升级指引

API文档书写规范

目录结构规范

书写规范

公共引用文档

非公共引用文档

完整示例

公共文档

插入效果

404 链接监控

升级指引

如何查看 404 链接？

如何修复 404 链接？

Releases: antvis/gatsby-theme-antv

Release 1.1.1

Release 1.1.0

Release 1.0.8

Release 1.0.7

Release 1.0.4

Release 1.0.3

Release 1.0.2

Release 1.0.1

Release 1.0.0

新增特性及升级指南

支持引用 markdown 内容

支持在 markdown 中插入 live demo

页面右侧目录优化

Editor 代码块提示

Editor 远程请求数据展示数据格式

图表示例

新增特性

gallery 瀑布流展示

回到顶部

升级指引

图表详情页

新增特性

布局

图表快速切换

图表设备视图切换

API 文档

移动端镜像切换提示

升级指引

API文档书写规范

目录结构规范

书写规范

公共引用文档

非公共引用文档

完整示例

公共文档

插入效果

404 链接监控

升级指引

如何查看 404 链接？

如何修复 404 链接？

Release 1.0.0-beta.19