Merge pull request #466 from FormidableLabs/support-victory-container

Support victory container

Author: boygirl

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Victory Changelog
 
+## 0.15.0 (2017-01-03)
+
+- Adds `VictorySelectionContainer`
+- Changes when functional styles and props are evaluated (this may be a breaking change)
+  Functional styles and props are now evaluated in the primitive components (`Point`, `Bar` etc.)
+- Supports an `active` prop on all primitive components that is used when evaluating functional styles and props
+- Tooltips now trigger `active: true` on both labels and data components
+- `defaultEvents` are supported for `containerComponents`
+
 ## 0.14.2 (2016-12-13)
 
 - Fixes date handling in VictoryZoom

demo/demo.js

@@ -6,7 +6,10 @@ import {
   VictoryChart,
   VictoryLine,
   VictoryPie,
-  VictoryScatter
+  VictoryScatter,
+  VictoryStack,
+  VictoryGroup,
+  VictorySelectionContainer
 } from "../src/index";
 
 export default class App extends React.Component {
@@ -26,6 +29,7 @@ export default class App extends React.Component {
 
         <h3>VictoryChart</h3>
         <p>Line chart of function <code>y = x^2</code></p>
+
         <VictoryChart style={style}>
           <VictoryLine y={(data) => data.x * data.x}/>
         </VictoryChart>
@@ -156,6 +160,127 @@ export default class App extends React.Component {
           <p>Default props</p>
           <VictoryArea style={style}/>
 
+          <h3>VictorySelectionContainer</h3>
+
+          <VictoryGroup style={style}
+            containerComponent={
+              <VictorySelectionContainer
+                selectionStyle={{
+                  stroke: "tomato", strokeWidth: 2, fill: "tomato", fillOpacity: 0.1
+                }}
+              />
+            }
+          >
+            <VictoryScatter
+              style={{
+                data: {fill: "tomato"}
+              }}
+              size={(datum, 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={(datum, 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={(datum, active) => active ? 5 : 3}
+            />
+          </VictoryGroup>
+
+          <VictoryStack style={style}
+            containerComponent={
+              <VictorySelectionContainer
+                selectionStyle={{
+                  stroke: "tomato", strokeWidth: 2, fill: "tomato", fillOpacity: 0.1
+                }}
+              />
+            }
+          >
+            <VictoryBar
+              style={{
+                data: {
+                  fill: "tomato",
+                  stroke: (d, active) => active ? "black" : "none",
+                  strokeWidth: 2
+                }
+              }}
+              size={(datum, 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: (d, active) => active ? "black" : "none",
+                  strokeWidth: 2
+                }
+              }}
+              size={(datum, 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: (d, 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>
       </div>
     );
   }

package.json

@@ -34,9 +34,9 @@
   "dependencies": {
     "builder": "^3.1.0",
     "builder-victory-component": "^3.1.0",
-    "victory-chart": "^14.0.3",
-    "victory-core": "^10.0.2",
-    "victory-pie": "^7.2.0"
+    "victory-chart": "^15.0.0",
+    "victory-core": "^11.0.0",
+    "victory-pie": "^9.0.0"
   },
   "devDependencies": {
     "builder-victory-component-dev": "^3.1.0",

src/index.js

@@ -27,7 +27,8 @@ import {
   VictoryStack,
   VictoryVoronoi,
   VictoryVoronoiTooltip,
-  VictoryZoom
+  VictoryZoom,
+  VictorySelectionContainer
 } from "victory-chart";
 
 import { VictoryPie } from "victory-pie";
@@ -58,6 +59,7 @@ export {
   VictoryPortal,
   Portal,
   VictoryClipContainer,
+  VictorySelectionContainer,
   addEvents, Collection, Data, DefaultTransitions, Domain, Events, Helpers, Log,
   PropTypes, Scale, Style, TextSize, Transitions
 };

test/client/spec/components/victory.spec.js

@@ -53,5 +53,6 @@ describe("victory", () => {
     expect(Victory.TextSize).not.to.equal(undefined);
     expect(Victory.Transitions).not.to.equal(undefined);
     expect(Victory.VictoryZoom).not.to.equal(undefined);
+    expect(Victory.VictorySelectionContainer).not.to.equal(undefined);
   });
 });