[Auto release] release 0.0.20

common/config/rush/pnpm-config.json

@@ -89,10 +89,10 @@
    * PNPM documentation: https://pnpm.io/package_json#pnpmoverrides
    */
   "globalOverrides": {
-    // "@visactor/vrender": "0.21.2-vstory.2",
-    // "@visactor/vrender-core": "0.21.2-vstory.2",
-    // "@visactor/vrender-kits": "0.21.2-vstory.2",
-    // "@visactor/vrender-components": "0.21.2-vstory.2",
+    // "@visactor/vrender": "0.21.2-vstory.3",
+    // "@visactor/vrender-core": "0.21.2-vstory.3",
+    // "@visactor/vrender-kits": "0.21.2-vstory.3",
+    // "@visactor/vrender-components": "0.21.2-vstory.3",
     // "@visactor/vscale": "0.18.5"
     // "example2": "npm:@company/example2@^1.0.0"
   },

common/config/rush/version-policies.json

@@ -1 +1 @@
-[{"definitionName":"lockStepVersion","policyName":"vstoryMain","version":"0.0.19","nextBump":"patch"}]
+[{"definitionName":"lockStepVersion","policyName":"vstoryMain","version":"0.0.20","nextBump":"patch"}]

docs/assets/examples/en/infographic/bar-chart-leftRight.md

@@ -9,7 +9,7 @@ cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/pr
 
 # Bar Chart Infographic(Left-right Layout)
 
-## Demo Code
+## Code Demo
 
 ```javascript livedemo template=vstory
 VStory.registerAll();
@@ -173,9 +173,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

docs/assets/examples/en/infographic/bar-chart-regional-sales.md

@@ -0,0 +1,199 @@
+---
+category: examples
+group: infographic
+title: Regional Sales
+keywords: templates, visualization, bar, ranking
+order: 1-8
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/regional-sales.png
+---
+
+# Bar Chart Infographic(Regional Sales)
+
+## Code Demo
+
+```javascript livedemo template=vstory
+VStory.registerAll();
+
+async function loadDSL() {
+  const barSpec = {
+    type: 'bar',
+    color: [
+      'rgba(96, 182, 195)',
+      'rgba(112, 151, 169)',
+      'rgba(239, 149, 77)',
+      'rgba(239, 174, 117)',
+      'rgba(182, 78, 67)'
+    ],
+    padding: {
+      left: 20,
+      bottom: 80
+    },
+    data: [
+      {
+        id: 'id0',
+        values: [
+          {
+            Region: 'Asia',
+            Sales: 23000
+          },
+          {
+            Region: 'South America',
+            Sales: 16000
+          },
+          {
+            Region: 'Europe',
+            Sales: 12000
+          },
+          {
+            Region: 'North America',
+            Sales: 8000
+          },
+          {
+            Region: 'Africa',
+            Sales: 7200
+          }
+        ]
+      }
+    ],
+    direction: 'horizontal',
+    xField: 'Sales',
+    yField: 'Region',
+    seriesField: 'Region',
+    title: {
+      visible: true,
+      text: 'Regional Sales',
+      align: 'center',
+      textStyle: {
+        fontSize: 50,
+        fill: '#fff'
+      }
+    },
+    axes: [
+      {
+        orient: 'left',
+        visible: false,
+        paddingInner: 0.3
+      },
+      {
+        orient: 'bottom',
+        visible: false
+      }
+    ],
+    legends: [
+      {
+        visible: true,
+        orient: 'top',
+        item: {
+          label: {
+            style: {
+              fill: '#fff'
+            }
+          }
+        }
+      }
+    ],
+    label: {
+      visible: true,
+      position: 'inside',
+      formatMethod: (text, datum) => {
+        return `${datum.Sales / 10000}M`;
+      },
+      smartInvert: false,
+      style: {
+        fill: '#fff',
+        fontSize: 20,
+        lineWidth: 0
+      }
+    },
+    background: 'rgba(0,0,0,0.2)'
+  };
+  return {
+    characters: [
+      {
+        type: 'VChart',
+        id: 'bar',
+        zIndex: 10,
+        position: {
+          top: 50,
+          left: 0,
+          width: 1280,
+          height: 720
+        },
+        options: {
+          spec: barSpec
+        }
+      },
+      {
+        id: '0',
+        type: 'Image',
+        zIndex: 0,
+        position: {
+          x: 0,
+          y: 0,
+          width: 1280,
+          height: 720
+        },
+        options: {
+          graphic: {
+            image:
+              'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/resource/singleBar-background.jpg'
+          }
+        }
+      },
+      {
+        id: '1',
+        type: 'Rect',
+        zIndex: 1,
+        position: {
+          x: 0,
+          y: 0,
+          width: 1280,
+          height: 720
+        },
+        options: {
+          graphic: {
+            fill: 'black',
+            fillOpacity: 0.7
+          }
+        }
+      }
+    ],
+    acts: [
+      {
+        id: 'default-chapter',
+        scenes: [
+          {
+            id: 'scene0',
+            actions: [
+              {
+                characterId: ['bar', '0', '1'],
+                characterActions: [
+                  {
+                    action: 'appear',
+                    payload: {
+                      animation: {
+                        duration: 500
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  };
+}
+
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1280, height: 720, scaleX: 0.7, scaleY: 0.7 });
+const player = new VStory.Player(story);
+story.init(player);
+
+loadDSL().then(dsl => {
+  story.load(dsl);
+  player.play(0);
+});
+window['story'] = story;
+window['vstory'] = story;
+```

docs/assets/examples/en/infographic/bar-hiv-chart.md

@@ -571,9 +571,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

docs/assets/examples/en/infographic/bar-work-in-same-industry.md

@@ -462,9 +462,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

docs/assets/examples/en/infographic/cat-stroke.md

@@ -4,12 +4,12 @@ group: infographic
 title: Pictogram Infographic(Cat Stroking Guide)
 keywords: templates, visualization, pictogram, distribution
 order: 1-0
-cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/cat-stroke-guide.png
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/cat-stroke-preview.png
 ---
 
 # Pictogram Infographic: Cat Stroke Guide
 
-## Demo Code
+## Code Demo
 
 ```javascript livedemo template=vstory
 VStory.registerAll();
@@ -234,9 +234,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

docs/assets/examples/en/infographic/client-breakdown.md

@@ -9,7 +9,7 @@ cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/pr
 
 # Pie Chart Infographic(Client Breakdown)
 
-## Demo Code
+## Code Demo
 
 ```javascript livedemo template=vstory
 VStory.registerAll();
@@ -308,9 +308,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

docs/assets/examples/en/infographic/line-chart-leftRight.md

@@ -9,7 +9,7 @@ cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/pr
 
 # Line Chart Infographic(Left-right Layout)
 
-## Demo Code
+## Code Demo
 
 ```javascript livedemo template=vstory
 VStory.registerAll();
@@ -266,9 +266,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

docs/assets/examples/en/infographic/pie-chart-leftRight.md

@@ -9,7 +9,7 @@ cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/pr
 
 # Pie Chart Infographic(Left-right Layout)
 
-## Demo Code
+## Code Demo
 
 ```javascript livedemo template=vstory
 VStory.registerAll();
@@ -207,9 +207,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);