Merge pull request #172 from VisActor/feat/auto-scale

feat: support auto scaleX/scaleY
VisActor · Dec 18, 2024 · 351136d · 351136d
2 parents 4469895 + 319a2a0
commit 351136d
Show file tree

Hide file tree

Showing 57 changed files with 254 additions and 98 deletions.
diff --git a/common/changes/@visactor/vstory-core/feat-auto-scale_2024-12-18-07-44.json b/common/changes/@visactor/vstory-core/feat-auto-scale_2024-12-18-07-44.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vstory-core",
+      "comment": "feat: support `auto` for scaleX/scaleY in initParams",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vstory-core"
+}
diff --git a/docs/assets/examples/en/infographic/bar-chart-leftRight.md b/docs/assets/examples/en/infographic/bar-chart-leftRight.md
@@ -173,8 +173,10 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/bar-chart-regional-sales.md b/docs/assets/examples/en/infographic/bar-chart-regional-sales.md
@@ -186,7 +186,7 @@ async function loadDSL() {
   };
 }
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1280, height: 720, scaleX: 0.7, scaleY: 0.7 });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, scaleX: 'auto', scaleY: 'auto', width: 1280, height: 720 });
 const player = new VStory.Player(story);
 story.init(player);
 

diff --git a/docs/assets/examples/en/infographic/bar-hiv-chart.md b/docs/assets/examples/en/infographic/bar-hiv-chart.md
@@ -571,8 +571,10 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1056,
+  height: 814
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/bar-work-in-same-industry.md b/docs/assets/examples/en/infographic/bar-work-in-same-industry.md
@@ -462,8 +462,10 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 816,
+  height: 816
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/big-data-wordcloud.md b/docs/assets/examples/en/infographic/big-data-wordcloud.md
@@ -1243,8 +1243,10 @@ const dsl = {
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
   background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/cat-stroke.md b/docs/assets/examples/en/infographic/cat-stroke.md
@@ -234,8 +234,10 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 760,
+  height: 760
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/client-breakdown.md b/docs/assets/examples/en/infographic/client-breakdown.md
@@ -308,8 +308,10 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/line-chart-leftRight.md b/docs/assets/examples/en/infographic/line-chart-leftRight.md
@@ -266,8 +266,10 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/marking-wordcloud.md b/docs/assets/examples/en/infographic/marking-wordcloud.md
@@ -358,7 +358,10 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  width: 1280, height: 720
+  width: 1280,
+  height: 720,
+  scaleX: 'auto',
+  scaleY: 'auto'
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/pie-chart-leftRight.md b/docs/assets/examples/en/infographic/pie-chart-leftRight.md
@@ -207,8 +207,10 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/pie-chart-transportation.md b/docs/assets/examples/en/infographic/pie-chart-transportation.md
@@ -238,7 +238,7 @@ async function loadDSL() {
   };
 }
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1280, height: 720, scaleX: 0.7, scaleY: 0.7 });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, scaleX: 'auto', scaleY: 'auto', width: 1280, height: 720 });
 const player = new VStory.Player(story);
 story.init(player);
 

diff --git a/docs/assets/examples/en/infographic/project-goal.md b/docs/assets/examples/en/infographic/project-goal.md
@@ -443,9 +443,10 @@ const dsl = {
 
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/scatter-chart-matrix.md b/docs/assets/examples/en/infographic/scatter-chart-matrix.md
@@ -280,8 +280,10 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 780
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/scatter-income-obesity.md b/docs/assets/examples/en/infographic/scatter-income-obesity.md
@@ -413,8 +413,10 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/scatter-suicide-rate-age.md b/docs/assets/examples/en/infographic/scatter-suicide-rate-age.md
@@ -795,8 +795,10 @@ const dsl = {
 
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/social-media.md b/docs/assets/examples/en/infographic/social-media.md
@@ -220,8 +220,10 @@ const dsl = {
 
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 800,
+  height: 750
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/source-of-new-contacts-area-chart.md b/docs/assets/examples/en/infographic/source-of-new-contacts-area-chart.md
@@ -360,7 +360,10 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  width: 1280, height: 720
+  width: 1280,
+  height: 720,
+  scaleX: 'auto',
+  scaleY: 'auto'
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/sprint-burndown.md b/docs/assets/examples/en/infographic/sprint-burndown.md
@@ -296,8 +296,10 @@ const dsl = {
 
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/unit-infographic.md b/docs/assets/examples/en/infographic/unit-infographic.md
@@ -374,7 +374,7 @@ const dsl = {
   ]
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, scaleX: 0.5, scaleY: 0.5 });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, scaleX: 'auto', scaleY: 'auto', width: 1920, height: 1080 });
 const player = new VStory.Player(story);
 story.init(player);
 

diff --git a/docs/assets/examples/en/infographic/usa-cancer-map.md b/docs/assets/examples/en/infographic/usa-cancer-map.md
@@ -200,8 +200,10 @@ const dsl = {
 
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/venn-chart.md b/docs/assets/examples/en/infographic/venn-chart.md
@@ -358,8 +358,10 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/zh/infographic/bar-chart-leftRight.md b/docs/assets/examples/zh/infographic/bar-chart-leftRight.md
@@ -173,8 +173,10 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/zh/infographic/bar-chart-regional-sales.md b/docs/assets/examples/zh/infographic/bar-chart-regional-sales.md
@@ -187,7 +187,7 @@ async function loadDSL() {
   };
 }
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1280, height: 720, scaleX: 0.7, scaleY: 0.7 });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, scaleX: 'auto', scaleY: 'auto', width: 1280, height: 720 });
 const player = new VStory.Player(story);
 story.init(player);
 

diff --git a/docs/assets/examples/zh/infographic/bar-hiv-chart.md b/docs/assets/examples/zh/infographic/bar-hiv-chart.md
@@ -572,8 +572,10 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1056,
+  height: 814
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/zh/infographic/bar-work-in-same-industry.md b/docs/assets/examples/zh/infographic/bar-work-in-same-industry.md
@@ -463,8 +463,10 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 816,
+  height: 816
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/zh/infographic/big-data-wordcloud.md b/docs/assets/examples/zh/infographic/big-data-wordcloud.md
@@ -1242,9 +1242,10 @@ const dsl = {
 
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/zh/infographic/cat-stroke.md b/docs/assets/examples/zh/infographic/cat-stroke.md
@@ -235,8 +235,10 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 760,
+  height: 760
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/zh/infographic/client-breakdown.md b/docs/assets/examples/zh/infographic/client-breakdown.md
@@ -308,8 +308,10 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/zh/infographic/line-chart-leftRight.md b/docs/assets/examples/zh/infographic/line-chart-leftRight.md
@@ -268,8 +268,10 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/zh/infographic/marking-wordcloud.md b/docs/assets/examples/zh/infographic/marking-wordcloud.md
@@ -359,7 +359,10 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  width: 1280, height: 720
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/zh/infographic/pie-chart-leftRight.md b/docs/assets/examples/zh/infographic/pie-chart-leftRight.md
@@ -207,8 +207,10 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  scaleX: 0.7,
-  scaleY: 0.7
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720
 });
 const player = new VStory.Player(story);
 story.init(player);