From ba51b3dbfcf8219467f96b38ee5275bc6beaf992 Mon Sep 17 00:00:00 2001
From: wendy <wsparsons@gmail.com>
Date: Thu, 30 Apr 2020 16:11:20 -0700
Subject: [PATCH 1/4] Adds SelectionDemo to app

---
 demo/ts/app.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/demo/ts/app.tsx b/demo/ts/app.tsx
index 7fff9ea75..f766f0a5f 100644
--- a/demo/ts/app.tsx
+++ b/demo/ts/app.tsx
@@ -17,6 +17,7 @@ import LineDemo from "./components/victory-line-demo";
 import PieDemo from "./components/victory-pie-demo";
 import PolarAxisDemo from "./components/victory-polar-axis-demo";
 import ScatterDemo from "./components/victory-scatter-demo";
+import SelectionDemo from "./components/selection-demo";
 import TooltipDemo from "./components/victory-tooltip-demo";
 import VictorySelectionContainerDemo from "./components/victory-selection-container-demo";
 import VictorySharedEventsDemo from "./components/victory-shared-events-demo";
@@ -39,6 +40,7 @@ const MAP = {
   "/pie": { component: PieDemo, name: "PieDemo" },
   "/polar-axis": { component: PolarAxisDemo, name: "PolarAxisDemo" },
   "/scatter": { component: ScatterDemo, name: "ScatterDemo" },
+  "/selection": { component: SelectionDemo, name: "SelectionDemo" },
   "/tooltip": { component: TooltipDemo, name: "TooltipDemo" },
   "/victory-selection-container": {
     component: VictorySelectionContainerDemo,

From d334d82762be746fa3972928f57f5a654bf46078 Mon Sep 17 00:00:00 2001
From: wendy <wsparsons@gmail.com>
Date: Thu, 30 Apr 2020 16:12:08 -0700
Subject: [PATCH 2/4] Adds SelectionDemo

---
 demo/ts/components/selection-demo.tsx | 356 ++++++++++++++++++++++++++
 1 file changed, 356 insertions(+)
 create mode 100644 demo/ts/components/selection-demo.tsx

diff --git a/demo/ts/components/selection-demo.tsx b/demo/ts/components/selection-demo.tsx
new file mode 100644
index 000000000..3907d52c4
--- /dev/null
+++ b/demo/ts/components/selection-demo.tsx
@@ -0,0 +1,356 @@
+/*eslint-disable no-magic-numbers */
+import React from "react";
+import { VictoryChart } from "@packages/victory-chart";
+import { VictoryStack } from "@packages/victory-stack";
+import { VictoryGroup } from "@packages/victory-group";
+import { VictoryBar } from "@packages/victory-bar";
+import { VictoryLine } from "@packages/victory-line";
+import { VictoryScatter } from "@packages/victory-scatter";
+import { VictorySelectionContainer } from "@packages/victory-selection-container";
+import { VictoryLegend } from "@packages/victory-legend";
+import { VictoryTooltip } from "@packages/victory-tooltip";
+
+interface SelectionDemoState {
+  points: [];
+}
+
+interface DataSet {
+  data?: { x: number; y: number }[];
+}
+
+export default class SelectionDemo extends React.Component<any, SelectionDemoState> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      points: []
+    };
+  }
+
+  handleSelection(datasets: DataSet[]) {
+    const points = datasets.reduce((memo: any, dataset: DataSet) => {
+      memo = memo.concat(dataset.data);
+      return memo;
+    }, []);
+    this.setState({ points });
+  }
+
+  handleClearSelection() {
+    this.setState({ points: [] });
+  }
+
+  listData() {
+    const points = this.state.points.map((point: { x: number; y: number }, index: number) => {
+      return <li key={index}>{`${point.x}, ${point.y}`}</li>;
+    });
+
+    return (
+      <div>
+        <p>Points</p>
+        <ul>{points}</ul>
+      </div>
+    );
+  }
+
+  render() {
+    const containerStyle: React.CSSProperties = {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      alignItems: "center",
+      justifyContent: "center"
+    };
+
+    const chartStyle = { parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" } };
+
+    return (
+      <div className="demo">
+        <div style={containerStyle}>
+          {this.listData()}
+          <VictoryChart
+            style={chartStyle}
+            height={400}
+            padding={{ top: 100, bottom: 50, left: 50, right: 50 }}
+            containerComponent={
+              <VictorySelectionContainer
+                selectionDimension="x"
+                selectionStyle={{
+                  stroke: "tomato",
+                  strokeWidth: 2,
+                  fill: "tomato",
+                  fillOpacity: 0.1
+                }}
+                onSelection={this.handleSelection.bind(this)}
+                onSelectionCleared={this.handleClearSelection.bind(this)}
+              />
+            }
+          >
+            <VictoryLegend
+              x={120}
+              y={20}
+              title="Legend"
+              centerTitle
+              orientation="horizontal"
+              gutter={20}
+              style={{ border: { stroke: "black" }, title: { fontSize: 20 } }}
+              data={[
+                { name: "One", symbol: { fill: "tomato" } },
+                { name: "Two", symbol: { fill: "orange" } },
+                { name: "Three", symbol: { fill: "gold" } }
+              ]}
+            />
+            <VictoryLine
+              style={{
+                data: { stroke: "tomato" }
+              }}
+              data={[
+                { x: 1, y: -5 },
+                { x: 2, y: 4 },
+                { x: 3, y: 2 },
+                { x: 4, y: 3 },
+                { x: 5, y: 1 },
+                { x: 6, y: -3 },
+                { x: 7, y: 3 }
+              ]}
+            />
+            <VictoryLine
+              style={{
+                data: { stroke: "blue" }
+              }}
+              data={[
+                { x: 1, y: -3 },
+                { x: 2, y: 5 },
+                { x: 3, y: 3 },
+                { x: 4, y: 0 },
+                { x: 5, y: -2 },
+                { x: 6, y: -2 },
+                { x: 7, y: 5 }
+              ]}
+            />
+            <VictoryLine
+              data={[
+                { x: 1, y: 5 },
+                { x: 2, y: -4 },
+                { x: 3, y: -2 },
+                { x: 4, y: -3 },
+                { x: 5, y: -1 },
+                { x: 6, y: 3 },
+                { x: 7, y: -3 }
+              ]}
+            />
+          </VictoryChart>
+
+          <VictoryChart style={chartStyle} containerComponent={<VictorySelectionContainer />}>
+            <VictoryGroup data={[{ x: 1, y: 5 }, { x: 2, y: 4 }, { x: 3, y: -2 }]}>
+              <VictoryLine style={{ data: { stroke: "tomato" } }} />
+              <VictoryScatter
+                style={{ data: { fill: ({ active }) => (active ? "tomato" : "gray") } }}
+                labels={({ datum }) => datum.y}
+                labelComponent={<VictoryTooltip />}
+              />
+            </VictoryGroup>
+
+            <VictoryGroup data={[{ x: 1, y: -3 }, { x: 2, y: 5 }, { x: 3, y: 3 }]}>
+              <VictoryLine style={{ data: { stroke: "blue" } }} />
+              <VictoryScatter
+                style={{ data: { fill: ({ active }) => (active ? "blue" : "gray") } }}
+                labels={({ datum }) => datum.y}
+                labelComponent={<VictoryTooltip />}
+              />
+            </VictoryGroup>
+
+            <VictoryGroup data={[{ x: 1, y: 5 }, { x: 2, y: -4 }, { x: 3, y: -2 }]}>
+              <VictoryLine style={{ data: { stroke: "black" } }} />
+              <VictoryScatter
+                style={{ data: { fill: ({ active }) => (active ? "black" : "gray") } }}
+                labels={({ datum }) => datum.y}
+                labelComponent={<VictoryTooltip />}
+              />
+            </VictoryGroup>
+          </VictoryChart>
+
+          <VictoryScatter
+            style={{
+              parent: chartStyle.parent,
+              data: {
+                fill: ({ active }) => (active ? "tomato" : "black")
+              }
+            }}
+            containerComponent={
+              <VictorySelectionContainer
+                selectionStyle={{
+                  stroke: "tomato",
+                  strokeWidth: 2,
+                  fill: "tomato",
+                  fillOpacity: 0.1
+                }}
+              />
+            }
+            size={({ active }) => (active ? 5 : 3)}
+            data={[
+              { x: 1, y: -5 },
+              { x: 2, y: 4 },
+              { x: 3, y: 2 },
+              { x: 4, y: 3 },
+              { x: 5, y: 1 },
+              { x: 6, y: -3 },
+              { x: 7, y: 3 }
+            ]}
+          />
+
+          <VictoryScatter
+            style={{
+              parent: chartStyle.parent,
+              data: {
+                fill: ({ active }) => (active ? "tomato" : "black")
+              }
+            }}
+            containerComponent={
+              <VictorySelectionContainer
+                selectionStyle={{
+                  stroke: "tomato",
+                  strokeWidth: 2,
+                  fill: "tomato",
+                  fillOpacity: 0.1
+                }}
+              />
+            }
+            size={({ active }) => (active ? 5 : 3)}
+            y={(d) => d.x * d.x}
+          />
+
+          <VictoryGroup
+            style={chartStyle}
+            containerComponent={
+              <VictorySelectionContainer
+                selectionStyle={{
+                  stroke: "tomato",
+                  strokeWidth: 2,
+                  fill: "tomato",
+                  fillOpacity: 0.1
+                }}
+              />
+            }
+          >
+            <VictoryScatter
+              style={{
+                data: { fill: "tomato" }
+              }}
+              size={({ active }) => (active ? 5 : 3)}
+              data={[
+                { x: 1, y: -5 },
+                { x: 2, y: 4 },
+                { x: 3, y: 2 },
+                { x: 4, y: 3 },
+                { x: 5, y: 1 },
+                { x: 6, y: -3 },
+                { x: 7, y: 3 }
+              ]}
+            />
+            <VictoryScatter
+              style={{
+                data: { fill: "blue" }
+              }}
+              size={({ active }) => (active ? 5 : 3)}
+              data={[
+                { x: 1, y: -3 },
+                { x: 2, y: 5 },
+                { x: 3, y: 3 },
+                { x: 4, y: 0 },
+                { x: 5, y: -2 },
+                { x: 6, y: -2 },
+                { x: 7, y: 5 }
+              ]}
+            />
+            <VictoryScatter
+              data={[
+                { x: 1, y: 5 },
+                { x: 2, y: -4 },
+                { x: 3, y: -2 },
+                { x: 4, y: -3 },
+                { x: 5, y: -1 },
+                { x: 6, y: 3 },
+                { x: 7, y: -3 }
+              ]}
+              size={({ active }) => (active ? 5 : 3)}
+            />
+          </VictoryGroup>
+
+          <VictoryChart
+            horizontal
+            style={chartStyle}
+            containerComponent={
+              <VictorySelectionContainer
+                selectionDimension="x"
+                selectionStyle={{
+                  stroke: "tomato",
+                  strokeWidth: 2,
+                  fill: "tomato",
+                  fillOpacity: 0.1
+                }}
+              />
+            }
+          >
+            <VictoryStack>
+              <VictoryBar
+                style={{
+                  data: {
+                    fill: "tomato",
+                    stroke: ({ active }) => (active ? "black" : "none"),
+                    strokeWidth: 2
+                  }
+                }}
+                size={({ active }) => (active ? 5 : 3)}
+                data={[
+                  { x: 1, y: -5 },
+                  { x: 2, y: 4 },
+                  { x: 3, y: 2 },
+                  { x: 4, y: 3 },
+                  { x: 5, y: 1 },
+                  { x: 6, y: -3 },
+                  { x: 7, y: 3 }
+                ]}
+              />
+              <VictoryBar
+                style={{
+                  data: {
+                    fill: "orange",
+                    stroke: ({ active }) => (active ? "black" : "none"),
+                    strokeWidth: 2
+                  }
+                }}
+                size={({ active }) => (active ? 5 : 3)}
+                data={[
+                  { x: 1, y: -3 },
+                  { x: 2, y: 5 },
+                  { x: 3, y: 3 },
+                  { x: 4, y: 0 },
+                  { x: 5, y: -2 },
+                  { x: 6, y: -2 },
+                  { x: 7, y: 5 }
+                ]}
+              />
+              <VictoryBar
+                style={{
+                  data: {
+                    fill: "gold",
+                    stroke: ({ active }) => (active ? "black" : "none"),
+                    strokeWidth: 2
+                  }
+                }}
+                data={[
+                  { x: 1, y: 5 },
+                  { x: 2, y: -4 },
+                  { x: 3, y: -2 },
+                  { x: 4, y: -3 },
+                  { x: 5, y: -1 },
+                  { x: 6, y: 3 },
+                  { x: 7, y: -3 }
+                ]}
+              />
+            </VictoryStack>
+          </VictoryChart>
+        </div>
+      </div>
+    );
+  }
+}

From b2dbea614a595e5553d80915d88fc1e468ff6cf2 Mon Sep 17 00:00:00 2001
From: wendy <wsparsons@gmail.com>
Date: Thu, 30 Apr 2020 16:17:59 -0700
Subject: [PATCH 3/4] Removes size prop from demo since VictoryBar does not
 take a size prop

---
 demo/js/components/selection-demo.js  | 2 --
 demo/ts/components/selection-demo.tsx | 2 --
 2 files changed, 4 deletions(-)

diff --git a/demo/js/components/selection-demo.js b/demo/js/components/selection-demo.js
index 9c7f232cd..c60a4ff55 100644
--- a/demo/js/components/selection-demo.js
+++ b/demo/js/components/selection-demo.js
@@ -291,7 +291,6 @@ class App extends React.Component {
                     strokeWidth: 2
                   }
                 }}
-                size={({ active }) => (active ? 5 : 3)}
                 data={[
                   { x: 1, y: -5 },
                   { x: 2, y: 4 },
@@ -310,7 +309,6 @@ class App extends React.Component {
                     strokeWidth: 2
                   }
                 }}
-                size={({ active }) => (active ? 5 : 3)}
                 data={[
                   { x: 1, y: -3 },
                   { x: 2, y: 5 },
diff --git a/demo/ts/components/selection-demo.tsx b/demo/ts/components/selection-demo.tsx
index 3907d52c4..ffe15827f 100644
--- a/demo/ts/components/selection-demo.tsx
+++ b/demo/ts/components/selection-demo.tsx
@@ -299,7 +299,6 @@ export default class SelectionDemo extends React.Component<any, SelectionDemoSta
                     strokeWidth: 2
                   }
                 }}
-                size={({ active }) => (active ? 5 : 3)}
                 data={[
                   { x: 1, y: -5 },
                   { x: 2, y: 4 },
@@ -318,7 +317,6 @@ export default class SelectionDemo extends React.Component<any, SelectionDemoSta
                     strokeWidth: 2
                   }
                 }}
-                size={({ active }) => (active ? 5 : 3)}
                 data={[
                   { x: 1, y: -3 },
                   { x: 2, y: 5 },

From 0c33b0a4f84ac2c872477b18c6a62ae94a1535e1 Mon Sep 17 00:00:00 2001
From: wendy <wsparsons@gmail.com>
Date: Thu, 30 Apr 2020 16:24:42 -0700
Subject: [PATCH 4/4] Defines the SelectionDemoState

---
 demo/ts/components/selection-demo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/ts/components/selection-demo.tsx b/demo/ts/components/selection-demo.tsx
index ffe15827f..4a11137ca 100644
--- a/demo/ts/components/selection-demo.tsx
+++ b/demo/ts/components/selection-demo.tsx
@@ -11,7 +11,7 @@ import { VictoryLegend } from "@packages/victory-legend";
 import { VictoryTooltip } from "@packages/victory-tooltip";
 
 interface SelectionDemoState {
-  points: [];
+  points: { x: number; y: number }[];
 }
 
 interface DataSet {