Skip to content

Commit

Permalink
Merge pull request #2960 from VisActor/release/1.11.9
Browse files Browse the repository at this point in the history 
[Auto release] release 1.11.9
  • Loading branch information
@xile611
xile611 authored Jul 17, 2024
2 parents 94cef91 + 838de06 commit 79b6ffd
Show file tree
Hide file tree
Showing 50 changed files with 2,097 additions and 1,440 deletions.
2,511 changes: 1,232 additions & 1,279 deletions common/config/rush/pnpm-lock.yaml
View file

Large diffs are not rendered by default.

158 changes: 158 additions & 0 deletions docs/assets/examples-react/en/react-attributes/legend-icon.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
---
category: examples
group: area chart
title: 自定义图例icon
keywords: funnelChart,composition,trend,triangle
order: 5-0
cover: /vchart/preview/react-attributes_legend-icon_1.11.6.png
option: areaChart
---
# Custom Legend Items

When custom elements need to be displayed in legend items and complex interactions are required, custom extensions can be achieved through react attributes.

## Key Configurations

- `legend.item.formatMethod` sets the formatting method for legend labels, specifying `type: 'react'` in the return result to display labels using react elements with absolute positioning;
- `legend.item.label.style.boundsPadding` sets the right `padding` for legend labels to display icons.

## Code Demo
```javascript livedemo template=react-vchart
const root = document.getElementById(CONTAINER_ID);
const { VChart, AreaChart, Legend } = ReactVChart;
const { useState, useRef, useEffect, useCallback } = React;

const LegendLabel = props => {
const { label } = props;
const [isPoptipActive, setIsPoptipActive] = useState(false);

const handleEnter = useCallback(() => {
setIsPoptipActive(true);
});
const handleLeave = useCallback(() => {
setIsPoptipActive(false);
});

return (
<div style={{ position: 'relative' }}>
<p style={{ margin: 0, lineHeight: '20px' }}>
<span style={{ color: 'inherit' }}>{label}</span>
<span style={{ verticalAlign: 'middle', pointerEvents: 'all', color: 'inherit' }}>
<svg
style={{ display: 'inline-block', verticalAlign: 'text-bottom', cursor: 'pointer' }}
onMouseEnter={handleEnter}
onMouseLeave={handleLeave}
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
>
<path
d="M774.656 774.656a371.2 371.2 0 1 0-524.8 0 371.2 371.2 0 0 0 524.8 0zM819.2 819.2a435.2 435.2 0 1 1 0-614.4 435.2 435.2 0 0 1 0 614.4zM516.608 296.96a120.32 120.32 0 0 0-93.696 37.376 129.024 129.024 0 0 0-32.768 92.672v10.24h60.928v-10.24a82.944 82.944 0 0 1 14.848-51.2 55.296 55.296 0 0 1 51.2-20.992 56.32 56.32 0 0 1 43.008 14.848 54.784 54.784 0 0 1 14.336 40.448 51.2 51.2 0 0 1-13.312 34.304 199.168 199.168 0 0 1-16.896 17.408 219.136 219.136 0 0 0-51.2 62.464 111.616 111.616 0 0 0-10.24 51.2v22.016h61.44v-22.016a61.44 61.44 0 0 1 8.192-32.256 95.744 95.744 0 0 1 22.016-25.6 512 512 0 0 0 39.936-44.544 107.008 107.008 0 0 0 22.016-66.56 102.4 102.4 0 0 0-31.744-79.872 120.832 120.832 0 0 0-88.064-29.696z m-7.68 331.776a39.424 39.424 0 0 0-29.184 11.776 37.376 37.376 0 0 0-11.776 28.672 39.424 39.424 0 0 0 11.776 29.184 42.496 42.496 0 0 0 58.368 0 38.4 38.4 0 0 0 12.288-29.696 39.424 39.424 0 0 0-11.776-28.672 40.448 40.448 0 0 0-29.696-11.264z"
fill="#5A5A68"
></path>
</svg>
</span>
</p>
{isPoptipActive ? (
<div
style={{
position: 'absolute',
padding: '10px',
width: '200px',
border: '1px solid #ccc',
bottom: '20px',
lineHeight: '20px',
background: '#fff',
margin: 0
}}
>
<p style={{ margin: 0, fontWeight: 'bold' }}>{label}</p>
<p style={{ margin: 0 }}>{`this is a simple poptip about ${label}`}</p>
</div>
) : null}
</div>
);
};

const Card = () => {
const chartRef = useRef(null);
useEffect(() => {
window['vchart'] = chartRef;
}, []);

const formatLegendLabel = useCallback((label, datum) => {
return {
type: 'react',
text: {
element: <LegendLabel label={label} />
}
};
});

return (
<AreaChart
ref={chartRef}
options={{
// Note: In actual usage scenarios, you need to import it yourself: `import ReactDOM from 'react-dom/client';`
ReactDOM: ReactDom
}}
spec={{
type: 'area',
data: {
values: [
{ date: '2024-05-01', clickRate: 0.123, payRate: 0.022 },
{ date: '2024-05-02', clickRate: 0.223, payRate: 0.022 },
{ date: '2024-05-03', clickRate: 0.156, payRate: 0.022 },
{ date: '2024-05-04', clickRate: 0.323, payRate: 0.022 },
{ date: '2024-05-05', clickRate: 0.223, payRate: 0.022 },
{ date: '2024-05-06', clickRate: 0.423, payRate: 0.022 },
{ date: '2024-05-07', clickRate: 0.143, payRate: 0.022 }
],
transforms: [
{
type: 'fold',
options: {
key: 'indexName', // The key of the original data after transformation is placed into this field as the value
value: 'indexValue', // The value of the original data after transformation is placed into this field as the value
fields: ['clickRate', 'payRate'] // Dimensions that need to be transformed
}
}
]
},
title: {
visible: true,
text: 'Trend of data'
},
stack: false,
xField: 'date',
yField: 'indexValue',
seriesField: 'indexName',
legends: [
{
visible: true,
position: 'middle',
orient: 'bottom',
item: {
label: {
style: {
boundsPadding: [0, 20, 0, 0] // Expand the placeholder space for the label
},
formatMethod: formatLegendLabel
}
}
}
]
}}
/>
);
};

ReactDom.createRoot(root).render(<Card />);

// release react instance, do not copy
window.customRelease = () => {
ReactDom.unmountComponentAtNode(root);
};
```
7 changes: 7 additions & 0 deletions docs/assets/examples-react/menu.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,13 @@
"en": "Use react components to render customized labels in funnel-chart",
"zh": "使用react渲染漏斗图标签"
}
},
{
"path": "legend-icon",
"title": {
"en": "customized legend icon",
"zh": "自定义图例icon"
}
}
]
}
Expand Down
160 changes: 160 additions & 0 deletions docs/assets/examples-react/zh/react-attributes/legend-icon.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
---
category: examples
group: area chart
title: 自定义图例icon
keywords: funnelChart,composition,trend,triangle
order: 5-0
cover: /vchart/preview/react-attributes_legend-icon_1.11.6.png
option: areaChart
---

# 自定义图例项

当图例项中需要展示自定义的元素，并且需要进行一些复杂交互的时候，可以通过 react 属性进行自定义扩展

## 关键配置

- `legend.item.formatMethod` 设置图例标签的格式化方法，在返回结果中，通过`type: 'react'` 指定通过 react 元素绝对定位来展示标签；
- `legend.item.label.style.boundsPadding` 设置图例标签右侧`padding`，用户展示 icon

## 代码演示

```javascript livedemo template=react-vchart
const root = document.getElementById(CONTAINER_ID);
const { VChart, AreaChart, Legend } = ReactVChart;
const { useState, useRef, useEffect, useCallback } = React;

const LegendLabel = props => {
const { label } = props;
const [isPoptipActive, setIsPoptipActive] = useState(false);

const handleEnter = useCallback(() => {
setIsPoptipActive(true);
});
const handleLeave = useCallback(() => {
setIsPoptipActive(false);
});

return (
<div style={{ position: 'relative' }}>
<p style={{ margin: 0, lineHeight: '20px' }}>
<span style={{ color: 'inherit' }}>{label}</span>
<span style={{ verticalAlign: 'middle', pointerEvents: 'all', color: 'inherit' }}>
<svg
style={{ display: 'inline-block', verticalAlign: 'text-bottom', cursor: 'pointer' }}
onMouseEnter={handleEnter}
onMouseLeave={handleLeave}
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
>
<path
d="M774.656 774.656a371.2 371.2 0 1 0-524.8 0 371.2 371.2 0 0 0 524.8 0zM819.2 819.2a435.2 435.2 0 1 1 0-614.4 435.2 435.2 0 0 1 0 614.4zM516.608 296.96a120.32 120.32 0 0 0-93.696 37.376 129.024 129.024 0 0 0-32.768 92.672v10.24h60.928v-10.24a82.944 82.944 0 0 1 14.848-51.2 55.296 55.296 0 0 1 51.2-20.992 56.32 56.32 0 0 1 43.008 14.848 54.784 54.784 0 0 1 14.336 40.448 51.2 51.2 0 0 1-13.312 34.304 199.168 199.168 0 0 1-16.896 17.408 219.136 219.136 0 0 0-51.2 62.464 111.616 111.616 0 0 0-10.24 51.2v22.016h61.44v-22.016a61.44 61.44 0 0 1 8.192-32.256 95.744 95.744 0 0 1 22.016-25.6 512 512 0 0 0 39.936-44.544 107.008 107.008 0 0 0 22.016-66.56 102.4 102.4 0 0 0-31.744-79.872 120.832 120.832 0 0 0-88.064-29.696z m-7.68 331.776a39.424 39.424 0 0 0-29.184 11.776 37.376 37.376 0 0 0-11.776 28.672 39.424 39.424 0 0 0 11.776 29.184 42.496 42.496 0 0 0 58.368 0 38.4 38.4 0 0 0 12.288-29.696 39.424 39.424 0 0 0-11.776-28.672 40.448 40.448 0 0 0-29.696-11.264z"
fill="#5A5A68"
></path>
</svg>
</span>
</p>
{isPoptipActive ? (
<div
style={{
position: 'absolute',
padding: '10px',
width: '200px',
border: '1px solid #ccc',
bottom: '20px',
lineHeight: '20px',
background: '#fff',
margin: 0
}}
>
<p style={{ margin: 0, fontWeight: 'bold' }}>{label}</p>
<p style={{ margin: 0 }}>{`this is a simple poptip about ${label}`}</p>
</div>
) : null}
</div>
);
};

const Card = () => {
const chartRef = useRef(null);
useEffect(() => {
window['vchart'] = chartRef;
}, []);

const formatLegendLabel = useCallback((label, datum) => {
return {
type: 'react',
text: {
element: <LegendLabel label={label} />
}
};
});

return (
<AreaChart
ref={chartRef}
options={{
// 注意，在实际使用场景中，需要自己引入：`import ReactDOM from 'react-dom/client';`
ReactDOM: ReactDom
}}
spec={{
type: 'area',
data: {
values: [
{ date: '2024-05-01', clickRate: 0.123, payRate: 0.022 },
{ date: '2024-05-02', clickRate: 0.223, payRate: 0.022 },
{ date: '2024-05-03', clickRate: 0.156, payRate: 0.022 },
{ date: '2024-05-04', clickRate: 0.323, payRate: 0.022 },
{ date: '2024-05-05', clickRate: 0.223, payRate: 0.022 },
{ date: '2024-05-06', clickRate: 0.423, payRate: 0.022 },
{ date: '2024-05-07', clickRate: 0.143, payRate: 0.022 }
],
transforms: [
{
type: 'fold',
options: {
key: 'indexName', // 转化后，原始数据的 key 放入这个配置对应的字段中作为值
value: 'indexValue', // 转化后，原始数据的 value 放入这个配置对应的字段中作为值
fields: ['clickRate', 'payRate'] // 需要转化的维度
}
}
]
},
title: {
visible: true,
text: 'Trend of data'
},
stack: false,
xField: 'date',
yField: 'indexValue',
seriesField: 'indexName',
legends: [
{
visible: true,
position: 'middle',
orient: 'bottom',
item: {
label: {
style: {
boundsPadding: [0, 20, 0, 0] // 扩大label的占位空间
},
formatMethod: formatLegendLabel
}
}
}
]
}}
/>
);
};

ReactDom.createRoot(root).render(<Card />);

// release react instance, do not copy
window.customRelease = () => {
ReactDom.unmountComponentAtNode(root);
};
```
6 changes: 6 additions & 0 deletions docs/assets/option/en/graphic/attribute.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,12 @@ Can be configured with fixed coordinates, such as [100, 100], or percentage coor

Supported since version `1.7.3`, it is used to expand the picking range of strokes. 0 is the default line width, positive numbers widen the width, and negative numbers widen the width.

#${prefix} boundsPadding(number|array)
Bounds padding of the graphic bounding box, default value is 0, supports two formats:

- number: set uniform padding for top, right, bottom, and left
- array: padding array, format `[top, right, bottom, left]`, sets padding for each of the four directions separately

#${prefix} html(object)
Supported since version `1.10.0`, used to configure the HTML overlay of the graphic element.

Expand Down
7 changes: 7 additions & 0 deletions docs/assets/option/zh/graphic/attribute.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,13 @@ y 方向缩放比例。

自 `1.7.3` 版本开始支持，用于扩展描边的拾取范围，为 0 就是默认线宽，正数就加宽，负数就减宽。

#${prefix} boundsPadding(number|array)

图形包围盒的边距，默认值为 0，支持两种格式：

- number: 上下左右设置统一的边距
- array: 边距数组，格式为`[top, right, bottom, left]` ，分别设置四个方向的边距

#${prefix} html(object)
自 `1.10.0` 版本开始支持，用于配置图元的 html 浮层。

Expand Down
12 changes: 6 additions & 6 deletions docs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,15 @@
},
"dependencies": {
"@arco-design/web-react": "2.46.1",
"@visactor/openinula-vchart": "workspace:1.11.8",
"@visactor/react-vchart": "workspace:1.11.8",
"@visactor/vchart": "workspace:1.11.8",
"@visactor/openinula-vchart": "workspace:1.11.9",
"@visactor/react-vchart": "workspace:1.11.9",
"@visactor/vchart": "workspace:1.11.9",
"@visactor/vchart-theme": "~1.6.6",
"@visactor/vmind": "1.2.4-alpha.5",
"@visactor/vutils": "~0.18.10",
"@visactor/vrender": "0.19.17",
"@visactor/vrender-kits": "0.19.17",
"@visactor/vgrammar": "0.13.14",
"@visactor/vrender": "0.19.18",
"@visactor/vrender-kits": "0.19.18",
"@visactor/vgrammar": "0.13.15",
"markdown-it": "^13.0.0",
"highlight.js": "^11.8.0",
"axios": "^1.4.0",
Expand Down
Binary file added docs/public/vchart/preview/react-attributes_legend-icon_1.11.6.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion docs/src/markdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ export function Markdown() {
.then(text => {
let processedText = text;
// remove meta info for examples
if (assetDirectory === 'examples') {
if (assetDirectory.includes('examples')) {
const coverLink = processedText.match(/cover:(.*)/)?.[1];
processedText = processedText.replace(/---(.|\n)*---/, '').trim();
if (coverLink) {
Expand Down
2 changes: 1 addition & 1 deletion packages/block-vchart/block/vchart/index.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 79b6ffd

Please sign in to comment.