Merge pull request #1241 from FormidableLabs/bug/immutable-data

Bug/immutable data

packages/victory-core/src/victory-util/data.js

@@ -307,7 +307,13 @@ function getStringsFromData(props, axis) {
   const key = props[axis] === undefined ? axis : props[axis];
   const accessor = Helpers.createAccessor(key);
 
-  const sortedData = sortData(props.data, props.sortKey, props.sortOrder);
+  // support immutable data
+  const data = props.data.reduce((memo, d) => {
+    memo.push(parseDatum(d));
+    return memo;
+  }, []);
+
+  const sortedData = sortData(data, props.sortKey, props.sortOrder);
   const dataStrings = sortedData
     .reduce((dataArr, datum) => {
       datum = parseDatum(datum);

stories/victory-area.js

@@ -7,6 +7,7 @@ import { VictoryTooltip } from "../packages/victory-tooltip/src/index";
 import { VictoryTheme } from "../packages/victory-core/src/index";
 import { getData, getMixedData, getTimeData, getLogData } from "./data";
 import { getChartDecorator, getPolarChartDecorator } from "./decorators";
+import { fromJS } from "immutable";
 
 storiesOf("VictoryArea", module).add("default rendering", () => <VictoryArea />);
 
@@ -78,7 +79,19 @@ storiesOf("VictoryArea.data", module)
       />
     );
   })
-  .add("plotting functions", () => <VictoryArea y={(d) => Math.sin(2 * Math.PI * d.x)} />);
+  .add("plotting functions", () => <VictoryArea y={(d) => Math.sin(2 * Math.PI * d.x)} />)
+  .add("with immutable data", () => {
+    return (
+      <VictoryArea
+        data={fromJS([
+          { x: "Cat", y: 45, y0: 17 },
+          { x: "Dog", y: 85, y0: 6 },
+          { x: "Fish", y: 55, y0: 9 },
+          { x: "Bird", y: 15, y0: 4 }
+        ])}
+      />
+    );
+  });
 
 storiesOf("VictoryArea.labels", module)
   .addDecorator(getChartDecorator())

stories/victory-bar.js

@@ -18,6 +18,7 @@ import {
   getDescendingSmallData
 } from "./data";
 import * as d3Shape from "d3-shape";
+import { fromJS } from "immutable";
 
 storiesOf("VictoryBar", module).add("default rendering", () => <VictoryBar />);
 
@@ -256,7 +257,18 @@ storiesOf("VictoryBar.data", module)
         y={"a.b.d"}
       />
     );
-  });
+  })
+  .add("with immutable data", () => (
+    <VictoryBar
+      data={fromJS([
+        { x: 1, y: 2, label: "cat" },
+        { x: 2, y: 5, label: "dog" },
+        { x: 3, y: 3, label: "dog" },
+        { x: 4, y: -2, label: "bird" },
+        { x: 5, y: -5, label: "cat" }
+      ])}
+    />
+  ));
 
 storiesOf("VictoryBar.labels", module)
   .addDecorator(getChartDecorator({ domainPadding: 25 }))

stories/victory-candlestick.js

@@ -7,6 +7,7 @@ import { VictoryTheme } from "../packages/victory-core/src/index";
 import { range } from "lodash";
 import seedrandom from "seedrandom";
 import { getChartDecorator } from "./decorators";
+import { fromJS } from "immutable";
 
 const getTimeData = (num, seed) => {
   seed = seed || "getTimeData";
@@ -95,6 +96,19 @@ storiesOf("VictoryCandlestick.data", module)
         high={(data) => data.big / 10}
       />
     );
+  })
+  .add("with immutable data", () => {
+    return (
+      <VictoryCandlestick
+        data={fromJS([
+          { x: 1, open: 9, close: 30, high: 56, low: 7 },
+          { x: 2, open: 80, close: 40, high: 120, low: 10 },
+          { x: 3, open: 50, close: 80, high: 90, low: 20 },
+          { x: 4, open: 70, close: 22, high: 70, low: 5 },
+          { x: 5, open: 20, close: 35, high: 50, low: 10 }
+        ])}
+      />
+    );
   });
 
 storiesOf("VictoryCandlestick.labels", module)

stories/victory-errorbar.js

@@ -7,6 +7,7 @@ import { VictoryTheme } from "../packages/victory-core/src/index";
 import { range } from "lodash";
 import seedrandom from "seedrandom";
 import { getChartDecorator } from "./decorators";
+import { fromJS } from "immutable";
 
 const getData = (num, symmetric, seed) => {
   seed = seed || "getData";
@@ -53,6 +54,20 @@ storiesOf("VictoryErrorBar.data", module)
         errorY={(d) => [d.error, d.error + 2]}
       />
     );
+  })
+  .add("with immutable data", () => {
+    return (
+      <VictoryErrorBar
+        data={fromJS([
+          { x: 1, y: 9, error: 3 },
+          { x: 2, y: 80, error: 4 },
+          { x: 3, y: 50, error: 8 },
+          { x: 4, y: 70, error: 2 },
+          { x: 5, y: 20, error: 3 }
+        ])}
+        errorY={(d) => [d.error, d.error + 2]}
+      />
+    );
   });
 
 storiesOf("VictoryErrorBar.labels", module)

stories/victory-line.js

@@ -7,6 +7,7 @@ import { VictoryTooltip } from "../packages/victory-tooltip/src/index";
 import { VictoryTheme } from "../packages/victory-core/src/index";
 import { getData, getMixedData, getTimeData, getLogData } from "./data";
 import { getChartDecorator, getPolarChartDecorator } from "./decorators";
+import { fromJS } from "immutable";
 
 storiesOf("VictoryLine", module).add("default rendering", () => <VictoryLine />);
 
@@ -77,7 +78,17 @@ storiesOf("VictoryLine.data", module)
       />
     );
   })
-  .add("plotting functions", () => <VictoryLine y={(d) => Math.sin(2 * Math.PI * d.x)} />);
+  .add("plotting functions", () => <VictoryLine y={(d) => Math.sin(2 * Math.PI * d.x)} />)
+  .add("with immutable data", () => (
+    <VictoryLine
+      data={fromJS([
+        { x: "Cat", y: 62 },
+        { x: "Dog", y: 91 },
+        { x: "Fish", y: 55 },
+        { x: "Bird", y: 55 }
+      ])}
+    />
+  ));
 
 storiesOf("VictoryLine.labels", module)
   .addDecorator(getChartDecorator())

stories/victory-pie.js

@@ -3,6 +3,7 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 import { VictoryPie, Slice } from "../packages/victory-pie/src/index";
+import { fromJS } from "immutable";
 
 storiesOf("VictoryPie", module)
   .addDecorator((story) => <div style={{ width: 400, height: 400 }}>{story()}</div>)
@@ -146,4 +147,14 @@ storiesOf("VictoryPie", module)
         ]}
       />
     </div>
+  ))
+  .add("with immutable data", () => (
+    <VictoryPie
+      data={fromJS([
+        { x: "Cat", y: 62 },
+        { x: "Dog", y: 91 },
+        { x: "Fish", y: 55 },
+        { x: "Bird", y: 55 }
+      ])}
+    />
   ));

stories/victory-scatter.js

@@ -7,6 +7,7 @@ import { VictoryTooltip } from "../packages/victory-tooltip/src/index";
 import { VictoryTheme } from "../packages/victory-core/src/index";
 import { getData, getMixedData, getTimeData, getLogData } from "./data";
 import { getChartDecorator, getPolarChartDecorator } from "./decorators";
+import { fromJS } from "immutable";
 
 const SYMBOLS = [
   "circle",
@@ -124,7 +125,18 @@ storiesOf("VictoryScatter.data", module)
       />
     );
   })
-  .add("plotting functions", () => <VictoryScatter y={(d) => Math.sin(2 * Math.PI * d.x)} />);
+  .add("plotting functions", () => <VictoryScatter y={(d) => Math.sin(2 * Math.PI * d.x)} />)
+  .add("with immutable data", () => (
+    <VictoryScatter
+      data={fromJS([
+        { x: 1, y: 2, label: "cat" },
+        { x: 2, y: 5, label: "dog" },
+        { x: 3, y: 3, label: "dog" },
+        { x: 4, y: -2, label: "bird" },
+        { x: 5, y: -5, label: "cat" }
+      ])}
+    />
+  ));
 
 storiesOf("VictoryScatter.labels", module)
   .addDecorator(getChartDecorator({ domainPadding: 25 }))