Chart scaling

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}

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,18 +278,19 @@ 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}
-            width={this.props.width}
-            height={this.props.height}
+            x={-this.props.viewWidth / 2}
+            y={-this.props.viewHeight / 2}
+            width={this.props.viewWidth}
+            height={this.props.viewHeight}
             style={{
               fill: "none",
               pointerEvents: "all",
@@ -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",

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}