gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 调整chart-docs目录结构以及添加chart组件 以及chartheader组件文档

Browse Source
This commit is contained in:
zhangyu
2024-05-24 10:41:35 +08:00
parent 8104762bb2
commit 683acd9a5d
19 changed files with 325 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
nezha-docs/docs/.vitepress/sidebar.js
View File

@@ -17,8 +17,26 @@ export const sidebar = {
{ {
text: '组件', text: '组件',
items: [ items: [
{ text: 'chartList', link: '/chartList' }, {
{ text: 'panelChart', link: '/panelChart' } text: 'chartList',
link: '/chartList',
items: [
{ text: 'chartHeader', link: '/chartHeader' },
{
text: 'panelChart',
link: '/panelChart',
items: [
{
text: 'chart',
link: '/chart',
items: [
{text: 'chartTimeSeries', link: '/chartTimeSeries'}
]
}
]
},
]
},
], ],
} }
], ],

5
nezha-docs/src/__docs__/index.en-US.md
View File

@@ -4,5 +4,6 @@ map:
--- ---
## 简介 ## 简介
1. 开发规范 https://docs.geedge.net/pages/viewpage.action?pageId=8034494
2. 思维导图 https://docs.geedge.net/pages/viewpage.action?pageId=67209306 可以查看解压后的纯文字版Html
3. 字体图标替换 https://docs.geedge.net/pages/viewpage.action?pageId=67214849

5
nezha-docs/src/__docs__/index.zh-CN.md
View File

@@ -3,4 +3,7 @@ map:
path: / path: /
--- ---
## 简介 ## 简介
1. 开发规范 https://docs.geedge.net/pages/viewpage.action?pageId=8034494
2. 思维导图 https://docs.geedge.net/pages/viewpage.action?pageId=67209306 可以查看解压后的纯文字版Html
3. 字体图标替换 https://docs.geedge.net/pages/viewpage.action?pageId=67214849

56
nezha-docs/src/chart/chart.vue Normal file
View File

@@ -0,0 +1,56 @@
<script lang="ts" setup>
const props = withDefaults(defineProps<{
/**
* chart相关信息 主要是要里面的 id 以及 params
*/
chartInfo?: { },
/**
* chart数据
*/
chartData?: { },
/**
* 需要自定义echarts的option时传入，非必须；传入该值时仍需传对应格式的chartData
*/
customChartOption?: { },
/**
* 是否全屏
*/
isFullscreen?: boolean,
/**
* 是否显示loading
*/
loading?: boolean,
/**
* 是否锁定
*/
panelLock?: boolean,
/**
* 是否报错
*/
isError?: boolean,
/**
* 相对时间
*/
multipleTime?: {},
/**
* 相差时间
*/
minusTime?: {},
/**
* 但是否显示全部数据
*/
showAllData?: {},
/**
* dashboard 相关变量
*/
globalVariables?: {},
}>(), {
})
</script>
<template>
<div>
</div>
</template>

17
nezha-docs/src/chart/chartChild/chartTimeSeries/chartTimeSeries.vue Normal file
View File

@@ -0,0 +1,17 @@
<script lang="ts" setup>
const props = withDefaults(defineProps<{
/**
* chart相关信息 主要是要里面的 id 以及 params
*/
chartInfo?: { },
}>(), {
})
</script>
<template>
<div>
</div>
</template>

9
nezha-docs/src/chart/chartChild/chartTimeSeries/demo.vue Normal file
View File

@@ -0,0 +1,9 @@
<script lang="ts" setup>
</script>
<template>
<div></div>
</template>
<style>
</style>

10
nezha-docs/src/chart/chartChild/chartTimeSeries/index.en-US.md Normal file
View File

@@ -0,0 +1,10 @@
---
map:
path: /chartTimeSeries
---
时序图 使用了 uplot重构 uplot参考链接 https://github.com/leeoniya/uPlot
遇到相关问题 可以去他的demo里面查看 相关api 也可以在他的源码里看到
# 关联组件
1. chart-legend legend 相关组件
<API src="./chartTimeSeries.vue" lang="en"></API>

10
nezha-docs/src/chart/chartChild/chartTimeSeries/index.zh-CN.md Normal file
View File

@@ -0,0 +1,10 @@
---
map:
path: /chartTimeSeries
---
时序图 使用了 uplot重构 uplot参考链接 https://github.com/leeoniya/uPlot
遇到相关问题 可以去他的demo里面查看 相关api 也可以在他的源码里看到
# 关联组件
1. chart-legend legend 相关组件
<API src="./chartTimeSeries.vue" lang="zh"></API>

9
nezha-docs/src/chart/demo.vue Normal file
View File

@@ -0,0 +1,9 @@
<script lang="ts" setup>
</script>
<template>
<div></div>
</template>
<style>
</style>

34
nezha-docs/src/chart/index.en-US.md Normal file
View File

@@ -0,0 +1,34 @@
---
map:
path: /chart
---
# 关联组件
1. chartTimeSeries 时序图
2. chartAutotopology 自动播放project topology
3. chartBar 柱状图
4. chartClock 时钟
5. chartDiagram topo图
6. chartEndpointInfo endpoint详情 关联 dashboard
7. chartGauge
8. chartGroup 组
9. chartLog 日志
10. chartNoData 没有数据
11. chartPie 饼图
12. chartDoughnut
13. chartRose 玫瑰图
14. chartStat 单值图
15. chartTable 表格
16. chartText 文本
17. chartAssetInfo asset详情 关联 dashboard
18. chartTreemap 树状图
19. chartUrl 链接
20. chartHexagonD3 蜂窝图
21. chartMap 地图
22. chartTopology 弃用
23. chartBubble 气泡图
24. chartRank 排行榜
25. chartSankey 桑葚图
26. chartFunnel 漏斗图
<API src="./chart.vue" lang="en"></API>

34
nezha-docs/src/chart/index.zh-CN.md Normal file
View File

@@ -0,0 +1,34 @@
---
map:
path: /chart
---
# 关联组件
1. chartTimeSeries 时序图
2. chartAutotopology 自动播放project topology
3. chartBar 柱状图
4. chartClock 时钟
5. chartDiagram topo图
6. chartEndpointInfo endpoint详情 关联 dashboard
7. chartGauge
8. chartGroup 组
9. chartLog 日志
10. chartNoData 没有数据
11. chartPie 饼图
12. chartDoughnut
13. chartRose 玫瑰图
14. chartStat 单值图
15. chartTable 表格
16. chartText 文本
17. chartAssetInfo asset详情 关联 dashboard
18. chartTreemap 树状图
19. chartUrl 链接
20. chartHexagonD3 蜂窝图
21. chartMap 地图
22. chartTopology 弃用
23. chartBubble 气泡图
24. chartRank 排行榜
25. chartSankey 桑葚图
26. chartFunnel 漏斗图
<API src="./chart.vue" lang="zh"></API>

39
nezha-docs/src/chartHeader/chartHeader.vue Normal file
View File

@@ -0,0 +1,39 @@
<script lang="ts" setup>
const props = withDefaults(defineProps<{
/**
* chart相关信息 如id 位置等
*/
chartInfo?: string,
/**
* 是否报错
*/
isError?: boolean,
/**
* chart相关数据 若报错 取 item.error
*/
chartData?: { },
/**
* 是否显示全部数据
*/
showAllData?: boolean,
/**
* 全部数据的长度
*/
allDataLength?: number,
/**
* 是否为快照
*/
isExportHtml?: boolean,
/**
* 是否为预览
*/
isPreview?: boolean,
}>(), {
})
</script>
<template>
<div>
</div>
</template>

9
nezha-docs/src/chartHeader/demo.vue Normal file
View File

@@ -0,0 +1,9 @@
<script lang="ts" setup>
</script>
<template>
<div></div>
</template>
<style>
</style>

17
nezha-docs/src/chartHeader/index.en-US.md Normal file
View File

@@ -0,0 +1,17 @@
---
map:
path: /chartHeader
---
ChartScreenHeader props 跟chartHeader是一样的 不一样的只是右侧的工具菜单
# 示例代码
```
<chart-header>
</chart-header>
```
```
<chart-screen-header>
</chart-screen-header>
```
<API src="./chartHeader.vue" lang="en"></API>

17
nezha-docs/src/chartHeader/index.zh-CN.md Normal file
View File

@@ -0,0 +1,17 @@
---
map:
path: /chartHeader
---
ChartScreenHeader props 跟chartHeader是一样的 不一样的只是右侧的工具菜单
# 示例代码
```
<chart-header>
</chart-header>
```
```
<chart-screen-header>
</chart-screen-header>
```
<API src="./chartHeader.vue" lang="zh"></API>

9
nezha-docs/src/chartList/index.en-US.md
View File

@@ -7,5 +7,14 @@ map:
2. grid-item 拖拽组件 该组件以拉取到本地 修改了高度不支持小数的问题 2. grid-item 拖拽组件 该组件以拉取到本地 修改了高度不支持小数的问题
3. panel-chart 图表组件实例 3. panel-chart 图表组件实例
# 示例代码
```
<grid-layout>
<grid-item v-for="item in arr">
<panel-chart />
</grid-item>
</grid-layout>
```
<API src="./chartList.vue" lang="en"></API> <API src="./chartList.vue" lang="en"></API>

9
nezha-docs/src/chartList/index.zh-CN.md
View File

@@ -7,5 +7,14 @@ map:
2. grid-item 拖拽组件 该组件以拉取到本地 修改了高度不支持小数的问题 2. grid-item 拖拽组件 该组件以拉取到本地 修改了高度不支持小数的问题
3. panel-chart 图表组件实例 3. panel-chart 图表组件实例
# 示例代码
```
<grid-layout>
<grid-item v-for="item in arr">
<panel-chart />
</grid-item>
</grid-layout>
```
<API src="./chartList.vue" lang="zh"></API> <API src="./chartList.vue" lang="zh"></API>

10
nezha-docs/src/panelChart/index.en-US.md
View File

@@ -8,4 +8,14 @@ map:
3. ChartScreenHeader 全屏chart-header相关设置 3. ChartScreenHeader 全屏chart-header相关设置
# 示例代码
```
<div>
<chart-header v-if= '!isFullscreen' />
<chart-screen-header v-if= 'isFullscreen' />
<chart />
</div>
```
<API src="./panelChart.vue" lang="zh"></API> <API src="./panelChart.vue" lang="zh"></API>

9
nezha-docs/src/panelChart/index.zh-CN.md
View File

@@ -8,4 +8,13 @@ map:
3. ChartScreenHeader 全屏chart-header相关设置 3. ChartScreenHeader 全屏chart-header相关设置
# 示例代码
```
<div>
<chart-header v-if= '!isFullscreen' />
<chart-screen-header v-if= 'isFullscreen' />
<chart />
</div>
```
<API src="./panelChart.vue" lang="zh"></API> <API src="./panelChart.vue" lang="zh"></API>