implement sortOrder prop, add specs

package.json

@@ -35,7 +35,7 @@
     "builder-victory-component": "^5.1.2",
     "d3-voronoi": "^1.1.2",
     "lodash": "^4.17.4",
-    "victory-core": "^20.2.0"
+    "victory-core": "^20.4.0"
   },
   "devDependencies": {
     "builder-victory-component-dev": "^5.1.2",

src/components/victory-area/victory-area.js

@@ -39,13 +39,15 @@ class VictoryArea extends React.Component {
   };
 
   static defaultProps = {
+    containerComponent: <VictoryContainer />,
     dataComponent: <Area/>,
+    groupComponent: <VictoryClipContainer/>,
     labelComponent: <VictoryLabel renderInPortal/>,
-    scale: "linear",
     samples: 50,
+    scale: "linear",
+    sortKey: "x",
+    sortOrder: "ascending",
     standalone: true,
-    containerComponent: <VictoryContainer />,
-    groupComponent: <VictoryClipContainer/>,
     theme: VictoryTheme.grayscale
   };
 

src/components/victory-bar/victory-bar.js

@@ -54,13 +54,15 @@ class VictoryBar extends React.Component {
   };
 
   static defaultProps = {
+    containerComponent: <VictoryContainer/>,
     data: defaultData,
     dataComponent: <Bar/>,
+    groupComponent: <g role="presentation"/>,
     labelComponent: <VictoryLabel/>,
+    samples: 50,
     scale: "linear",
+    sortOrder: "ascending",
     standalone: true,
-    containerComponent: <VictoryContainer/>,
-    groupComponent: <g role="presentation"/>,
     theme: VictoryTheme.grayscale
   };
 

src/components/victory-candlestick/helper-methods.js

@@ -106,10 +106,10 @@ export default {
         { _x, _y, _open, _close, _high, _low },
         typeof _x === "string" ? { _x: stringMap.x[_x], x: _x } : {}
       );
-    }), props.sortKey);
+    }), props.sortKey, props.sortOrder);
   },
 
-  sortData(dataset, sortKey) {
+  sortData(dataset, sortKey, sortOrder = "ascending") {
     if (!sortKey) {
       return dataset;
     }
@@ -118,7 +118,13 @@ export default {
       sortKey = `_${sortKey}`;
     }
 
-    return sortBy(dataset, sortKey);
+    const sortedData = sortBy(dataset, sortKey);
+
+    if (sortOrder === "descending") {
+      return sortedData.reverse();
+    }
+
+    return sortedData;
   },
 
   getDomain(props, axis) {

src/components/victory-candlestick/victory-candlestick.js

@@ -71,14 +71,15 @@ class VictoryCandlestick extends React.Component {
   };
 
   static defaultProps = {
-    samples: 50,
-    scale: "linear",
+    containerComponent: <VictoryContainer/>,
     data: defaultData,
-    standalone: true,
     dataComponent: <Candle/>,
-    labelComponent: <VictoryLabel/>,
-    containerComponent: <VictoryContainer/>,
     groupComponent: <g role="presentation"/>,
+    labelComponent: <VictoryLabel/>,
+    samples: 50,
+    scale: "linear",
+    sortOrder: "ascending",
+    standalone: true,
     theme: VictoryTheme.grayscale
   };
 

src/components/victory-errorbar/helper-methods.js

@@ -126,10 +126,10 @@ export default {
         typeof _x === "string" ? { _x: stringMap.x[_x], x: _x } : {},
         typeof _y === "string" ? { _y: stringMap.y[_y], y: _y } : {}
       );
-    }), props.sortKey);
+    }), props.sortKey, props.sortOrder);
   },
 
-  sortData(dataset, sortKey) {
+  sortData(dataset, sortKey, sortOrder = "ascending") {
     if (!sortKey) {
       return dataset;
     }
@@ -138,7 +138,13 @@ export default {
       sortKey = `_${sortKey}`;
     }
 
-    return sortBy(dataset, sortKey);
+    const sortedData = sortBy(dataset, sortKey);
+
+    if (sortOrder === "descending") {
+      return sortedData.reverse();
+    }
+
+    return sortedData;
   },
 
   getDomain(props, axis) {

src/components/victory-errorbar/victory-errorbar.js

@@ -51,13 +51,15 @@ class VictoryErrorBar extends React.Component {
   };
 
   static defaultProps = {
+    containerComponent: <VictoryContainer/>,
     data: defaultData,
-    scale: "linear",
-    standalone: true,
     dataComponent: <ErrorBar/>,
     labelComponent: <VictoryLabel/>,
-    containerComponent: <VictoryContainer/>,
     groupComponent: <g role="presentation"/>,
+    samples: 50,
+    scale: "linear",
+    sortOrder: "ascending",
+    standalone: true,
     theme: VictoryTheme.grayscale
   };
 

src/components/victory-group/victory-group.js

@@ -39,6 +39,7 @@ export default class VictoryGroup extends React.Component {
     groupComponent: <g/>,
     samples: 50,
     scale: "linear",
+    sortOrder: "ascending",
     standalone: true,
     theme: VictoryTheme.grayscale
   };

src/components/victory-line/victory-line.js

@@ -44,14 +44,15 @@ class VictoryLine extends React.Component {
   };
 
   static defaultProps = {
-    samples: 50,
-    scale: "linear",
-    standalone: true,
-    sortKey: "x",
+    containerComponent: <VictoryContainer/>,
     dataComponent: <Curve/>,
     labelComponent: <VictoryLabel renderInPortal/>,
-    containerComponent: <VictoryContainer/>,
     groupComponent: <VictoryClipContainer/>,
+    samples: 50,
+    scale: "linear",
+    sortKey: "x",
+    sortOrder: "ascending",
+    standalone: true,
     theme: VictoryTheme.grayscale
   };
 

src/components/victory-scatter/victory-scatter.js

@@ -41,13 +41,14 @@ class VictoryScatter extends React.Component {
   };
 
   static defaultProps = {
-    samples: 50,
-    scale: "linear",
-    standalone: true,
+    containerComponent: <VictoryContainer/>,
     dataComponent: <Point/>,
     labelComponent: <VictoryLabel/>,
-    containerComponent: <VictoryContainer/>,
     groupComponent: <g/>,
+    samples: 50,
+    scale: "linear",
+    sortOrder: "ascending",
+    standalone: true,
     theme: VictoryTheme.grayscale
   };
 

src/components/victory-voronoi/victory-voronoi.js

@@ -29,13 +29,14 @@ class VictoryVoronoi extends React.Component {
   };
 
   static defaultProps = {
-    samples: 50,
-    scale: "linear",
-    standalone: true,
+    containerComponent: <VictoryContainer/>,
     dataComponent: <Voronoi/>,
     labelComponent: <VictoryLabel/>,
-    containerComponent: <VictoryContainer/>,
     groupComponent: <g role="presentation"/>,
+    samples: 50,
+    scale: "linear",
+    sortOrder: "ascending",
+    standalone: true,
     theme: VictoryTheme.grayscale
   };
 

src/helpers/common-props.js

@@ -19,6 +19,7 @@ export const DataProps = {
     PropTypes.string,
     PropTypes.arrayOf(PropTypes.string)
   ]),
+  sortOrder: PropTypes.oneOf(["ascending", "descending"]),
   style: PropTypes.shape({
     parent: PropTypes.object, data: PropTypes.object, labels: PropTypes.object
   }),

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

@@ -68,6 +68,26 @@ describe("components/victory-area", () => {
         .map((datum) => datum._x);
       expect(xValues).to.eql([0, 1, 2, 3, 4]);
     });
+
+    it("sorts data according to sortOrder prop", () => {
+      const props = {
+        scale: "linear",
+        interpolation: "linear",
+        sortKey: "x",
+        sortOrder: "descending",
+        data: range(5).map((i) => ({ x: i, y: i, y0: 0 })).reverse()
+      };
+      const wrapper = shallow(
+        <VictoryArea {...props}/>
+      );
+
+      const xValues = wrapper
+        .find(Area)
+        .first()
+        .prop("data")
+        .map((datum) => datum._x);
+      expect(xValues).to.eql([4, 3, 2, 1, 0]);
+    });
   });
 
   describe("event handling", () => {

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

@@ -65,6 +65,13 @@ describe("components/victory-bar", () => {
       expect(xValues).to.eql([0, 1, 2, 3, 4]);
     });
 
+    it("renders reverse ordered bars when sortOrder is descending", () => {
+      const data = range(5).map((i) => ({ x: i, y: i })).reverse();
+      const wrapper = shallow(<VictoryBar data={data} sortKey="x" sortOrder="descending"/>);
+      const xValues = wrapper.find(Bar).map((bar) => bar.prop("datum")._x);
+      expect(xValues).to.eql([4, 3, 2, 1, 0]);
+    });
+
     it("renders bars for array-shaped data", () => {
       const data = range(20).map((i) => [i, i]);
       const wrapper = shallow(<VictoryBar data={data} x={0} y={1}/>);

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

@@ -68,6 +68,20 @@ describe("components/victory-candlestick", () => {
       expect(points.length).to.equal(10);
     });
 
+    it("renders ordered bars when sortKey is passed", () => {
+      const data = range(5).map((i) => ({ x: i, open: i, close: i, high: i, low: i })).reverse();
+      const wrapper = shallow(<VictoryCandlestick data={data} sortKey="x"/>);
+      const xValues = wrapper.find(Candle).map((bar) => bar.prop("datum")._x);
+      expect(xValues).to.eql([0, 1, 2, 3, 4]);
+    });
+
+    it("renders reverse ordered bars when sortOrder is descending", () => {
+      const data = range(5).map((i) => ({ x: i, open: i, close: i, high: i, low: i })).reverse();
+      const wrapper = shallow(<VictoryCandlestick data={data} sortKey="x" sortOrder="descending"/>);
+      const xValues = wrapper.find(Candle).map((bar) => bar.prop("datum")._x);
+      expect(xValues).to.eql([4, 3, 2, 1, 0]);
+    });
+
     it("renders points for array-shaped data", () => {
       const data = range(20).map((i) => [i, i, i, i, i]);
       const wrapper = shallow(

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

@@ -74,6 +74,15 @@ describe("components/victory-errorbar", () => {
       expect(xValues).to.eql([0, 1, 2, 3, 4]);
     });
 
+    it("reversed sorted data with the sortOrder prop", () => {
+      const data = range(5).map((i) => ({ x: i, y: i, errorX: 0.1, errorY: 0.2 })).reverse();
+      const wrapper = shallow(
+        <VictoryErrorBar data={data} sortKey="x" sortOrder="descending"/>
+      );
+      const xValues = wrapper.find(ErrorBar).map((errorBar) => errorBar.prop("datum")._x);
+      expect(xValues).to.eql([4, 3, 2, 1, 0]);
+    });
+
     it("renders errors with error bars, check total svg lines", () => {
       const svgDimensions = { width: 350, height: 200, padding: 75 };
       const wrapper = render(

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

@@ -155,6 +155,25 @@ describe("components/victory-line", () => {
       expect(lines.props().data[0].t).to.equal(0);
       expect(lines.props().data[1].t).to.equal(1);
     });
+
+    it("reverses data with the sortOrder prop", () => {
+      const data = [
+        { t: 0, x: 10, y: 1 },
+        { t: 1, x: 9, y: 1 }
+      ];
+      const wrapper = shallow(
+        <VictoryLine data={data}
+          sortKey={'t'}
+          x={({ t }) => 10 - t}
+          y={() => 1}
+          sortOrder="descending"
+        />
+      );
+      const lines = wrapper.find(Curve);
+
+      expect(lines.props().data[0].t).to.equal(1);
+      expect(lines.props().data[1].t).to.equal(0);
+    });
   });
 
   describe("event handling", () => {

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

@@ -82,6 +82,15 @@ describe("components/victory-scatter", () => {
       expect(xValues).to.eql([0, 1, 2, 3, 4]);
     });
 
+    it("reverses sorted data with the sortOrder prop", () => {
+      const data = range(5).map((i) => ({ x: i, y: i })).reverse();
+      const wrapper = shallow(
+        <VictoryScatter data={data} sortKey="x" sortOrder="descending"/>
+      );
+      const xValues = wrapper.find(Point).map((point) => point.prop("datum")._x);
+      expect(xValues).to.eql([4, 3, 2, 1, 0]);
+    });
+
     it("renders points for array-shaped data", () => {
       const data = range(20).map((i) => [i, i]);
       const wrapper = shallow(

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

@@ -61,6 +61,16 @@ describe("components/victory-voronoi", () => {
       const xValues = wrapper.find(Voronoi).map((voronoi) => voronoi.prop("datum")._x);
       expect(xValues).to.eql([0, 1, 2, 3, 4]);
     });
+
+    it("reverses sorted data with the sortOrder prop", () => {
+      const data = range(5).map((i) => ({ x: i, y: i })).reverse();
+      const wrapper = shallow(
+        <VictoryVoronoi data={data} sortKey="x" sortOrder="descending"/>
+      );
+
+      const xValues = wrapper.find(Voronoi).map((voronoi) => voronoi.prop("datum")._x);
+      expect(xValues).to.eql([4, 3, 2, 1, 0]);
+    });
   });
 
   describe("event handling", () => {