merge with master

1 files changed, 159 insertions, 0 deletions

diff --git a/src/client/views/nodes/DataVizBox/HistogramBox.tsx b/src/client/views/nodes/DataVizBox/HistogramBox.tsx
new file mode 100644
index 000000000..00dc2ef46
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/HistogramBox.tsx
@@ -0,0 +1,159 @@
+import { action, computed, observable } from "mobx";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { Doc } from "../../../../fields/Doc";
+import { NumCast } from "../../../../fields/Types";
+import "./HistogramBox.scss";
+
+interface HistogramBoxProps {
+    rootDoc: Doc;
+    pairs: {
+        x: number,
+        y: number
+    }[]
+}
+
+
+export class HistogramBox extends React.Component<HistogramBoxProps> {
+
+    private origin = {x: 0.1 * this.width, y: 0.9 * this.height};
+
+    @computed get width() {
+        return NumCast(this.props.rootDoc.width);
+    }
+
+    @computed get height() {
+        return NumCast(this.props.rootDoc.height);
+    }
+
+    @computed get x() {
+        return NumCast(this.props.rootDoc.x);
+    }
+
+    @computed get y() {
+        return NumCast(this.props.rootDoc.y);
+    }
+
+    @computed get generatePoints() {
+        // evenly distribute points along the x axis
+        const xVals: number[] = this.props.pairs.map(p => p.x);
+        const yVals: number[] = this.props.pairs.map(p => p.y);
+
+        const xMin = Math.min(...xVals);
+        const xMax = Math.max(...xVals);
+        const yMin = Math.min(...yVals);
+        const yMax = Math.max(...yVals);
+
+        const xRange = xMax - xMin;
+        const yRange = yMax - yMin;
+
+        const xScale = this.width / xRange;
+        const yScale = this.height / yRange;
+
+        const xOffset = (this.x + (0.1 * this.width)) - xMin * xScale;
+        const yOffset = (this.y + (0.25 * this.height)) - yMin * yScale;
+
+        const points: {
+            x: number,
+            y: number
+        }[] = this.props.pairs.map(p => {
+            return {
+                x: (p.x * xScale + xOffset) + this.origin.x,
+                y: (p.y * yScale + yOffset)
+            }
+        });
+
+        return points;
+    }
+
+    @computed get generateGraphLine() {
+        const points = this.generatePoints;
+        // loop through points and create a line from each point to the next
+        let lines: {
+            x1: number,
+            y1: number,
+            x2: number,
+            y2: number
+        }[] = [];
+        for (let i = 0; i < points.length - 1; i++) {
+            lines.push({
+                x1: points[i].x,
+                y1: points[i].y,
+                x2: points[i + 1].x,
+                y2: points[i + 1].y
+            });
+        }
+        // generate array of svg with lines
+        let svgLines: JSX.Element[] = [];
+        for (let i = 0; i < lines.length; i++) {
+            svgLines.push(
+                <line
+                    className="svgLine"
+                    key={i}
+                    x1={lines[i].x1}
+                    y1={lines[i].y1}
+                    x2={lines[i].x2}
+                    y2={lines[i].y2}
+                    stroke="black"
+                    strokeWidth={2}
+                />
+            );
+        }
+
+        let res = [];
+        for (let i = 0; i < svgLines.length; i++) {
+            res.push(<svg className="svgContainer">{svgLines[i]}</svg>)
+        }
+        return res;
+    }
+
+    @computed get generateAxes() {       
+
+        const xAxis = {
+            x1: 0.1 * this.width,
+            x2: 0.9 * this.width,
+            y1: 0.9 * this.height,
+            y2: 0.9 * this.height,
+        };
+
+        const yAxis = {
+            x1: 0.1 * this.width,
+            x2: 0.1 * this.width,
+            y1: 0.25 * this.height,
+            y2: 0.9 * this.height,
+        };
+
+
+        return (
+            [
+                (<svg className="svgContainer">
+                    {/* <line className="svgLine" x1={yAxis} y1={xAxis} x2={this.width - (0.1 * this.width)} y2={xAxis} /> */}
+                    <line className="svgLine" x1={xAxis.x1} y1={xAxis.y1} x2={xAxis.x2} y2={xAxis.y2}/>
+
+                    {/* <line className="svgLine" x1={yAxis} y1={xAxis} x2={yAxis} y2={this.y + 50} /> */}
+                </svg>),
+                (
+                <svg className="svgContainer">
+                    <line className="svgLine" x1={yAxis.x1} y1={yAxis.y1} x2={yAxis.x2} y2={yAxis.y2} />
+                {/* <line className="svgLine" x1={yAxis} y1={xAxis} x2={yAxis} y2={this.y + 50} /> */}
+                </svg>)
+            ]
+        )
+    }
+
+
+    render() {
+        return (
+            <div>histogram box
+                {/* <svg className="svgContainer">
+                    {this.generateSVGLine}
+                </svg> */}
+                {this.generateAxes[0]}
+                {this.generateAxes[1]}
+                {this.generateGraphLine.map(line => line)}
+            </div>
+        )
+            
+    }
+
+}
\ No newline at end of file