[Auto release] release 1.13.8

common/config/rush/version-policies.json

@@ -1 +1 @@
-[{"definitionName":"lockStepVersion","policyName":"vchartMain","version":"1.13.7","mainProject":"@visactor/vchart","nextBump":"patch"}]
+[{"definitionName":"lockStepVersion","policyName":"vchartMain","version":"1.13.8","mainProject":"@visactor/vchart","nextBump":"patch"}]

docs/assets/changelog/en/release.md

@@ -1,3 +1,28 @@
+# v1.13.7
+
+2025-03-14
+
+
+**🆕 New feature**
+
+- **@visactor/vchart**: support `position` config in totalLabel, [#3396](https://github.com/VisActor/VChart/issues/3396)
+
+**🐛 Bug fix**
+
+- **@visactor/vchart**: vchart should not merge original options, fix [#3798](https://github.com/VisActor/VChart/issues/3798)
+- **react-vchart**: lifecycle event callback should be fired, fix [#3792](https://github.com/VisActor/VChart/issues/3792)
+- **@visactor/vchart**: react-vchart should export `WaterfallChart`, fix [#3791](https://github.com/VisActor/VChart/issues/3791)
+- **@visactor/vchart**: fix fontFamily of richtext, fix [#3768](https://github.com/VisActor/VChart/issues/3768)
+- **@visactor/vchart**: fix issue with wx get context
+
+**🔧 Configuration releated**
+
+- **@visactor/vchart**: add util to export
+
+
+
+[more detail about v1.13.7](https://github.com/VisActor/VChart/releases/tag/v1.13.7)
+
 # v1.13.6
 
 2025-03-03

docs/assets/changelog/zh/release.md

@@ -1,3 +1,28 @@
+# v1.13.7
+
+2025-03-14
+
+
+**🆕 新增功能**
+
+- **@visactor/vchart**: 支持在 totalLabel 中配置 `position`，[#3396](https://github.com/VisActor/VChart/issues/3396)
+
+**🐛 功能修复**
+
+- **@visactor/vchart**: vchart 内部不合并原始的options，修复 [#3798](https://github.com/VisActor/VChart/issues/3798)
+- **@visactor/react-vchart**: 生命周期事件回调应被触发，修复 [#3792](https://github.com/VisActor/VChart/issues/3792)
+- **@visactor/vchart**: react-vchart 应导出 `WaterfallChart`，修复 [#3791](https://github.com/VisActor/VChart/issues/3791)
+- **@visactor/vchart**: 修复 richtext 的 fontFamily，修复 [#3768](https://github.com/VisActor/VChart/issues/3768)
+- **@visactor/vchart**: 修复 wx 获取上下文的问题
+
+**🔧 项目配置**
+
+- **@visactor/vchart**: add util to export
+
+
+
+[更多详情请查看 v1.13.7](https://github.com/VisActor/VChart/releases/tag/v1.13.7)
+
 # v1.13.6
 
 2025-03-03

docs/assets/examples/en/pictogram-chart/pictogram-bagua.md

@@ -10,7 +10,7 @@ option: pictogramChart
 
 # SVG Taiji Bagua Symbol Diagram
 
-Contributed by [xilzy](https://github.com/xilzy)
+> Contributed by [xilzy](https://github.com/xilzy)
 
 The Taiji Bagua Symbol Diagram illustrates the elements of the Early Heaven Bagua (Xiantian Bagua). At its core lies the Taiji symbol, surrounded by a middle layer of eight trigram symbols and an outermost layer displaying their corresponding symbolic patterns. Each trigram symbol pattern corresponds to a specific Five Elements attribute. By using the pictographic diagram, viewers can quickly grasp the layout and elemental distribution of the Early Heaven Bagua, offering a valuable reference for its study and analysis. Hovering the mouse over the legend reveals the distribution of a particular elemental attribute, while hovering over the shapes in the diagram displays the name of the element associated with that shape.
 
@@ -112,8 +112,8 @@ const spec = {
       },
       stroke: '#000000', // Border color: Black
       lineWidth: 2,
-      pickable: datum => datum.name !== 'line',
-      visible: datum => datum.id !== 'path-198'
+      pickable: datum => datum.name !== 'Line',
+      visible: datum => datum => !datum.attributes?.d?.startsWith('M0 0L1024 0L1024 1024L0 1024')
     },
     state: {
       active: {

docs/assets/examples/en/pictogram-chart/pictogram-chinamap.md

@@ -0,0 +1,213 @@
+---
+category: examples
+group: pictogram chart
+title: Map of China eating spicy degree pictograph
+keywords: pictogramChart,map,comparison,china
+order: 26-6
+cover: https://cdn.jsdelivr.net/gh/UC-web291/picture_storing/5.gif
+option: pictogramChart
+---
+
+# Chinese Map Pictogram - A Glance at the Spiciness Level in Chinese Provinces
+
+> Contributed by Qian_Shark
+
+The classification information of different regions in China can be displayed through pictograms, and color mapping can be carried out according to different categories of spicy food, from strong to weak colors, more and more cold tones, while supporting legend hover interactive display of province information.
+
+## Key Configurations
+
+- In the SVG file, configure the name attribute for the graphic elements. Then, in the chart configuration, you can specify the element styles through the name configuration.
+- Register SVG resources using the VChart.registerSVG interface.
+- Declare the registered SVG name using the svg attribute.
+- Declare the chart type as a pictogram using the type: pictogram attribute.
+- Define the data source using the data attribute.
+- onfigure color mapping using the color attribute.
+- Declare the series field and name field using the seriesField and nameField attributes respectively.
+- Specify the SVG graphic to use with the svg attribute.
+- Declare the styles of the pictogram elements using the pictogram.style attribute.
+- Listen for the legendItemHover and legendItemUnHover events to implement legend hover interaction.
+
+## Code Demo
+
+```javascript livedemo
+/** --Add the following code when using in business context-- */
+// When using in business context, please additionally import
+// import { registerPictogramChart } from '@visactor/vchart';
+// registerPictogramChart();
+/** --Add the above code when using in business context-- */
+// VCHART_MODULE.registerPictogramChart();
+/** --Delete the above code when using in business context-- */
+const response = await fetch('https://cdn.jsdelivr.net/gh/UC-web291/picture_storing/chinamap.svg');
+const shape = await response.text();
+// Define map data
+const chinamap_data = [
+  { name: '湖南省', category: 'MVP', level: '🌶🌶🌶🌶' },
+  { name: '重庆市', category: 'MVP', level: '🌶🌶🌶🌶' },
+  { name: '四川省', category: 'MVP', level: '🌶🌶🌶🌶' },
+  { name: '贵州省', category: 'MVP', level: '🌶🌶🌶🌶' },
+  { name: '甘肃省', category: 'MVP', level: '🌶🌶🌶🌶' },
+  { name: '新疆维吾尔自治区', category: 'MVP', level: '🌶🌶🌶🌶' },
+  { name: '江西省', category: 'MVP', level: '🌶🌶🌶🌶' },
+  { name: '山西省', category: 'diamond', level: '🌶🌶🌶' },
+  { name: '内蒙古自治区', category: 'diamond', level: '🌶🌶🌶' },
+  { name: '辽宁省', category: 'diamond', level: '🌶🌶🌶' },
+  { name: '吉林省', category: 'diamond', level: '🌶🌶🌶' },
+  { name: '黑龙江省', category: 'diamond', level: '🌶🌶🌶' },
+  { name: '湖北省', category: 'diamond', level: '🌶🌶🌶' },
+  { name: '云南省', category: 'diamond', level: '🌶🌶🌶' },
+  { name: '北京市', category: 'gold', level: '🌶🌶' },
+  { name: '天津市', category: 'gold', level: '🌶🌶' },
+  { name: '河北省', category: 'gold', level: '🌶🌶' },
+  { name: '山东省', category: 'gold', level: '🌶🌶' },
+  { name: '河南省', category: 'gold', level: '🌶🌶' },
+  { name: '陕西省', category: 'gold', level: '🌶🌶' },
+  { name: '广西壮族自治区', category: 'gold', level: '🌶🌶' },
+  { name: '上海市', category: 'silver', level: '🌶' },
+  { name: '江苏省', category: 'silver', level: '🌶' },
+  { name: '浙江省', category: 'silver', level: '🌶' },
+  { name: '安徽省', category: 'silver', level: '🌶' },
+  { name: '福建省', category: 'silver', level: '🌶' },
+  { name: '广东省', category: 'silver', level: '🌶' },
+  { name: '海南省', category: 'bronze', level: '🌶' },
+  { name: '西藏自治区', category: 'bronze', level: '🌶' },
+  { name: '青海省', category: 'bronze', level: '🌶' },
+  { name: '宁夏回族自治区', category: 'bronze', level: '🌶' },
+  { name: '香港特别行政区', category: 'bronze', level: '🌶' },
+  { name: '澳门特别行政区', category: 'bronze', level: '🌶' },
+  { name: '台湾省', category: 'bronze', level: '🌶' }
+];
+const spec = {
+  // The chart type is pictograph
+  type: 'pictogram',
+  padding: 0,
+  data: {
+    // Unique identifier of the data
+    id: 'data',
+    // Data value
+    values: chinamap_data
+  },
+  color: {
+    specified: {
+      // master
+      MVP: 'rgb(73, 3, 3)',
+      // diamond
+      diamond: 'rgb(250, 8, 8)',
+      //  gold
+      gold: 'rgb(250, 77, 8)',
+      // silver
+      silver: 'rgb(228, 170, 64)',
+      // bronze
+      bronze: 'rgb(198, 238, 53)',
+      // The color of undefined categories is white
+      undefined: 'white'
+    },
+    // Series fields are categories
+    field: 'category'
+  },
+  // Series fields are categories
+  seriesField: 'category',
+  //  The name field is the name
+  nameField: 'name',
+  valueField: 'level',
+  // SVG graphic name used
+  svg: 'chinamap',
+  pictogram: {
+    style: {
+      fill: {
+        // Fill color Use color to map the color. The fields are categories
+        scale: 'color',
+        field: 'category'
+      },
+      cursor: 'pointer'
+    },
+    state: {
+      //  The fill color of the legend hover is white
+      legend_hover_reverse: {
+        fill: 'white'
+      },
+      // The effect of making the province map "spit out" when hovering
+      hover: {
+        lineWidth: 3,
+        stroke: 'rgb(0, 0, 0)',
+        shadowBlur: 80,
+        shadowColor: 'rgb(0, 0, 0)'
+      },
+      hover_reverse: {
+        opacity: 0.1
+      }
+    }
+  },
+
+  //  Chart title
+  title: {
+    text: 'Spicy food in China at a glance'
+  },
+  legends: [
+    {
+      orient: 'top',
+      position: 'middle',
+      padding: {
+        bottom: 12
+      },
+      visible: true,
+      field: 'category',
+      filter: false,
+      select: false,
+      data: items => {
+        return items.map(item => {
+          item.shape.outerBorder = {
+            stroke: item.shape.fill,
+            distance: 2,
+            lineWidth: 1
+          };
+          return item;
+        });
+      }
+    }
+  ]
+};
+
+// VChart.registerPictogramChart();
+// VChart.default.registerSVG('chinamap', shape);
+
+VChart.registerSVG('chinamap', shape);
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+// Listen for legend item hover events
+vchart.on('legendItemHover', e => {
+  // Gets the legend item name of the hover
+  const hoveredName = e?.value?.data?.label;
+  if (hoveredName) {
+    // Update the chart status by setting the color of the legend item that is not hovering
+    vchart.updateState({
+      legend_hover_reverse: {
+        filter: d => {
+          // Finds the category of the current data item
+          const category = chinamap_data.find(chinamap_data => chinamap_data.name === d.data?.name)?.category;
+          // Return true if the class exists and is not equal to the legend item name of the hover, fals
+          return category && category !== hoveredName;
+        }
+      }
+    });
+  }
+});
+
+// Listen for the legend item unhover event
+vchart.on('legendItemUnHover', e => {
+  // Update the chart state to restore the color of all legend items to the original color
+  vchart.updateState({
+    legend_hover_reverse: {
+      filter: d => false
+    }
+  });
+});
+
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+## Relative tourials
+
+[pictogram](link)

docs/assets/examples/en/pictogram-chart/pictogram-heart.md

@@ -10,7 +10,7 @@ option: pictogramChart
 
 # Pictogram - Medical Schematic Diagram of the Heart
 
-Contributed by [Zero1017](https://github.com/Eomnational)
+> Contributed by [Zero1017](https://github.com/Eomnational)
 
 A pictogram is a form of data visualization that uses graphic symbols (usually in SVG format) to represent specific values or categories in data. This example demonstrates how to use a pictogram to present a medical schematic diagram of the heart, distinguishing different parts of the heart by different colors.
 

docs/assets/examples/en/pictogram-chart/pictogram-mall.md

@@ -10,6 +10,8 @@ option: pictogramChart
 
 # SVG Shopping Mall Tenant Layout
 
+> Contributed by Echo
+
 Shopping Mall Tenant Layout pictogram displays the distribution of different business formats within the mall. Each business format is represented by a specific shape, and the color of the shape indicates the type of business format. By using pictograms, we can quickly understand the mall's layout and business format distribution, providing a reference for mall operation and management. Hovering the mouse over the legend reveals the distribution of a specific business format; hovering the mouse over a shape in the diagram displays the name of the store corresponding to that shape.
 
 ## Key Configurations
@@ -105,7 +107,7 @@ const mall_data = [
   { name: 'Kmart', category: 'shopping' },
   { name: 'AMC Theatres', category: 'entertainment' },
   { name: 'Sears', category: 'shopping' }
-]
+];
 
 // Define the chart configuration object
 const spec = {
@@ -115,7 +117,7 @@ const spec = {
     // The unique identifier of the data
     id: 'data',
     // The value of the data
-    values: mall_data,
+    values: mall_data
   },
   color: {
     specified: {
@@ -134,7 +136,7 @@ const spec = {
       // The color of the infrastructure category is dark olive green
       infrastructure: '#556B2F',
       // The color of the undefined category is white
-      undefined: 'white',
+      undefined: 'white'
     },
     // The field for color mapping is category
     field: 'category'
@@ -156,7 +158,7 @@ const spec = {
     state: {
       // The fill color of the legend item when hovering is gray
       legend_hover_reverse: {
-        fill: '#ccc',
+        fill: '#ccc'
       }
     }
   },
@@ -185,9 +187,9 @@ const spec = {
           };
           return item;
         });
-      },
+      }
     }
-  ],
+  ]
 };
 
 VChart.registerSVG('mall', shape);

docs/assets/examples/menu.json

@@ -1702,6 +1702,13 @@
             "en": "Shopping Mall Tenant Layout"
           }
         },
+        {
+          "path": "pictogram-chinamap",
+          "title": {
+            "zh": "中国地图吃辣程度一览象形图 ",
+            "en": "Map of China eating spicy degree pictograph"
+          }
+        },
         {
           "path": "pictogram-heart",
           "title": {

docs/assets/examples/zh/pictogram-chart/pictogram-bagua.md

@@ -10,7 +10,7 @@ option: pictogramChart
 
 # 象形图-太极八卦图
 
-Contributed by [xilzy](https://github.com/xilzy)
+> 由 [xilzy](https://github.com/xilzy) 贡献
 
 太极八卦象图展示了先天八卦的各个元素。核心位置为太极图案，中间层为 8 个卦象，最外层为八个卦象的符号图案。卦象符号图案都有对应的五行属性。通过使用象形图，我们可以快速了解先天八卦的布局和元素分布情况，为先天八卦研究和分析提供参考。 鼠标悬停在图例上，可以显示一类属性元素的分布；鼠标悬停在图中的形状上，可以显示该形状对应的元素名称。
 
@@ -114,8 +114,8 @@ const spec = {
       },
       stroke: '#000000', // 边框颜色为黑色
       lineWidth: 2,
-      pickable: datum => datum.name !== 'line',
-      visible: datum => datum.id !== 'path-198'
+      pickable: datum => datum.name !== 'Line',
+      visible: datum => datum => !datum.attributes?.d?.startsWith('M0 0L1024 0L1024 1024L0 1024')
     },
     state: {
       active: {