From 518527b0def5f0159335ff1befb38d0b2e780d93 Mon Sep 17 00:00:00 2001
From: "Ramil Minyukov (Akvelon INC)" <v-rminyukov@microsoft.com>
Date: Fri, 22 Oct 2021 16:37:06 +0300
Subject: [PATCH 1/3] Added chart view scale option

---
 src/container/chart_component.tsx | 46 ++++++++++---------------------
 src/container/container.tsx       | 17 +++++++++++-
 2 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/src/container/chart_component.tsx b/src/container/chart_component.tsx
index ba3f2d5b5..f4e3e411b 100644
--- a/src/container/chart_component.tsx
+++ b/src/container/chart_component.tsx
@@ -17,7 +17,6 @@ import {
   GraphicalElementEventHandler,
 } from "../app/renderer";
 import { RenderEvents } from "../core/graphics";
-import { MappingType } from "../core/specification";
 
 export { DataSelection };
 
@@ -48,6 +47,10 @@ export interface ChartComponentProps {
   onGlyphMouseLeave?: GlyphEventHandler;
   onGlyphContextMenuClick?: GlyphEventHandler;
   renderEvents?: RenderEvents;
+
+  scale: number;
+  viewHeight: number;
+  viewWidth: number;
 }
 
 export interface ChartComponentState {
@@ -146,28 +149,6 @@ export class ChartComponent extends React.Component<
       this.recreateManager(newProps);
       changed = true;
     }
-    if (
-      !this.manager.chart.mappings.width ||
-      newProps.width !=
-        (this.manager.chart.mappings.width as Specification.ValueMapping).value
-    ) {
-      this.manager.chart.mappings.width = {
-        type: MappingType.value,
-        value: newProps.width,
-      } as Specification.ValueMapping;
-      changed = true;
-    }
-    if (
-      !this.manager.chart.mappings.height ||
-      newProps.height !=
-        (this.manager.chart.mappings.height as Specification.ValueMapping).value
-    ) {
-      this.manager.chart.mappings.height = {
-        type: MappingType.value,
-        value: newProps.height,
-      } as Specification.ValueMapping;
-      changed = true;
-    }
     return changed;
   }
 
@@ -297,16 +278,17 @@ export class ChartComponent extends React.Component<
     );
     renderOptions.selection = this.props.selection;
     const gfx = renderGraphicalElementSVG(this.state.graphics, renderOptions);
+
+    const transform = `translate(${this.props.viewWidth / 2}, ${
+      this.props.viewHeight / 2
+    }) scale(${this.props.scale})`;
+
     const inner = (
-      <g
-        transform={`translate(${this.props.width / 2}, ${
-          this.props.height / 2
-        })`}
-      >
+      <g transform={transform}>
         {this.props.onGlyphClick ? (
           <rect
-            x={-this.props.width / 2}
-            y={-this.props.height / 2}
+            x={-this.props.viewWidth / 2}
+            y={-this.props.viewHeight / 2}
             width={this.props.width}
             height={this.props.height}
             style={{
@@ -349,8 +331,8 @@ export class ChartComponent extends React.Component<
           <svg
             x={0}
             y={0}
-            width={this.props.width}
-            height={this.props.height}
+            width={this.props.viewWidth}
+            height={this.props.viewHeight}
             className={this.props.className}
             style={{
               userSelect: "none",
diff --git a/src/container/container.tsx b/src/container/container.tsx
index f441147a5..08580266d 100644
--- a/src/container/container.tsx
+++ b/src/container/container.tsx
@@ -24,6 +24,9 @@ import {
 import { TemplateInstance } from "./chart_template";
 
 export interface ChartContainerComponentProps {
+  scale: number;
+  viewHeight: number;
+  viewWidth: number;
   chart: Specification.Chart;
   dataset: Dataset.Dataset;
   defaultAttributes?: Prototypes.DefaultAttributes;
@@ -180,6 +183,9 @@ export class ChartContainerComponent extends React.Component<
   public render() {
     return (
       <ChartComponent
+        scale={this.props.scale}
+        viewWidth={this.props.viewWidth}
+        viewHeight={this.props.viewHeight}
         ref={(e) => (this.component = e)}
         chart={this.props.chart}
         dataset={this.props.dataset}
@@ -321,11 +327,20 @@ export class ChartContainer extends EventEmitter {
     setFormatOptions(options);
   }
 
-  public reactMount(width: number = 1200, height: number = 800) {
+  public reactMount(
+    width: number = 1200,
+    height: number = 800,
+    scale: number = 1,
+    viewWidth: number = 1200,
+    viewHeight: number = 800
+  ) {
     this.width = width;
     this.height = height;
     return (
       <ChartContainerComponent
+        scale={scale}
+        viewWidth={viewWidth}
+        viewHeight={viewHeight}
         ref={(e) => (this.component = e)}
         chart={this.chart}
         dataset={this.dataset}

From 1633073244127078b18994dc854a1ef2931f092b Mon Sep 17 00:00:00 2001
From: "Ramil Minyukov (Akvelon INC)" <v-rminyukov@microsoft.com>
Date: Fri, 22 Oct 2021 18:00:50 +0300
Subject: [PATCH 2/3] Added missed props

---
 src/app/renderer/index.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/renderer/index.tsx b/src/app/renderer/index.tsx
index 5f76674a4..20ed18f8c 100644
--- a/src/app/renderer/index.tsx
+++ b/src/app/renderer/index.tsx
@@ -552,6 +552,9 @@ export function renderGraphicalElementSVG(
 
       return (
         <ChartComponent
+          viewHeight={component.height}
+          viewWidth={component.width}
+          scale={1}
           key={options.key}
           chart={component.chart}
           dataset={component.dataset}

From a1302c4525705c13e49491d263b3712f5b13c4a2 Mon Sep 17 00:00:00 2001
From: "Ramil Minyukov (Akvelon INC)" <v-rminyukov@microsoft.com>
Date: Mon, 25 Oct 2021 19:30:36 +0300
Subject: [PATCH 3/3] Fixed viewWidth and viewHeight

---
 src/container/chart_component.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/container/chart_component.tsx b/src/container/chart_component.tsx
index f4e3e411b..6b177af21 100644
--- a/src/container/chart_component.tsx
+++ b/src/container/chart_component.tsx
@@ -289,8 +289,8 @@ export class ChartComponent extends React.Component<
           <rect
             x={-this.props.viewWidth / 2}
             y={-this.props.viewHeight / 2}
-            width={this.props.width}
-            height={this.props.height}
+            width={this.props.viewWidth}
+            height={this.props.viewHeight}
             style={{
               fill: "none",
               pointerEvents: "all",