Merge pull request #318 from FormidableLabs/fix-date-handling-cross-axis

Fix date handling cross axis
FormidableLabs · Jul 27, 2016 · 3f2b56b · 3f2b56b
2 parents 5f2bf5a + 593bd8a
commit 3f2b56b
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 25 deletions.
diff --git a/demo/components/victory-axis-demo.js b/demo/components/victory-axis-demo.js
@@ -131,11 +131,11 @@ export default class App extends React.Component {
             label={"Decades"}
             tickLabelComponent={<VictoryLabel y={25}/>}
             tickValues={[
+              new Date(1960, 1, 1),
+              new Date(1970, 1, 1),
               new Date(1980, 1, 1),
               new Date(1990, 1, 1),
-              new Date(2000, 1, 1),
-              new Date(2010, 1, 1),
-              new Date(2020, 1, 1)]}
+              new Date(2000, 1, 1)]}
             tickFormat={(x) => x.getFullYear()}
           />
 
@@ -245,7 +245,6 @@ export default class App extends React.Component {
           />
         </div>
 
-
       </div>
     );
   }

diff --git a/demo/components/victory-line-demo.js b/demo/components/victory-line-demo.js
@@ -115,17 +115,17 @@ export default class App extends React.Component {
       <div className="demo">
         <h1>VictoryLine</h1>
 
-          <VictoryLine
-            style={{parent: parentStyle, data: this.state.style}}
-            data={this.state.transitionData}
-            animate={{duration: 800}}
-            containerComponent={
-              <VictoryContainer
-                title="Line Chart"
-                desc="This is a line chart for displaying data."
-              />
-            }
-          />
+        <VictoryLine
+          style={{parent: parentStyle, data: this.state.style}}
+          data={this.state.transitionData}
+          animate={{duration: 800}}
+          containerComponent={
+            <VictoryContainer
+              title="Line Chart"
+              desc="This is a line chart for displaying data."
+            />
+          }
+        />
 
         <VictoryLine
           style={{parent: parentStyle, data: this.state.style}}
@@ -215,6 +215,67 @@ export default class App extends React.Component {
           ]}
         />
 
+        <VictoryLine
+          style={{parent: parentStyle}}
+          scale={{x: "linear", y: "log"}}
+        />
+        <VictoryLine
+          style={{parent: parentStyle}}
+          data={this.state.arrayData}
+          label="Hello"
+          x={0}
+          y={1}
+          theme={VictoryTheme.grayscale}
+        />
+
+        <VictoryChart
+          theme={VictoryTheme.grayscale}
+        >
+          <VictoryLine
+            style={{parent: parentStyle}}
+            data={this.state.arrayData}
+            label="Hello"
+            x={0}
+            y={1}
+          />
+      </VictoryChart>
+
+      <VictoryChart
+        height={450}
+        scale={{
+          x: "time"
+        }}
+      >
+        <VictoryLine
+          data={[
+            {x: new Date(1960, 1, 1), y: 125},
+            {x: new Date(1987, 1, 1), y: 257},
+            {x: new Date(1993, 1, 1), y: 345},
+            {x: new Date(1997, 1, 1), y: 515},
+            {x: new Date(2001, 1, 1), y: 132},
+            {x: new Date(2005, 1, 1), y: 305},
+            {x: new Date(2011, 1, 1), y: 270},
+            {x: new Date(2015, 1, 1), y: 470}
+          ]}
+        />
+      </VictoryChart>
+
+        <VictoryLine
+          style={{parent: parentStyle}}
+          data={[
+            {x: 1, y: 1},
+            {x: 2, y: 3},
+            {x: 3, y: 5},
+            {x: 4, y: 2},
+            {x: 5, y: null},
+            {x: 6, y: null},
+            {x: 7, y: 6},
+            {x: 8, y: 7},
+            {x: 9, y: 8},
+            {x: 10, y: 12}
+          ]}
+        />
+
         <VictoryLine
           style={{parent: parentStyle}}
           scale={{x: "linear", y: "log"}}

diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "d3-scale": "^1.0.0",
     "d3-shape": "^1.0.0",
     "lodash": "^4.12.0",
-    "victory-core": "4.3.0"
+    "victory-core": "4.4.2"
   },
   "devDependencies": {
     "builder-victory-component-dev": "^2.3.0",

diff --git a/src/components/victory-chart/helper-methods.js b/src/components/victory-chart/helper-methods.js
@@ -61,8 +61,10 @@ export default {
     const {axisComponents, domain, scale} = calculatedProps;
     // make the axes line up, and cross when appropriate
     const origin = {
-      x: Math.max(Math.min(...domain.x), 0),
-      y: Math.max(Math.min(...domain.y), 0)
+      x: Collection.containsDates(domain.x) ? Math.min(...domain.x)
+      : Math.max(Math.min(...domain.x), 0),
+      y: Collection.containsDates(domain.y) ? Math.min(...domain.y)
+      : Math.max(Math.min(...domain.y), 0)
     };
     const axisOrientations = {
       x: Axis.getOrientation(axisComponents.x, "x"),

diff --git a/src/helpers/domain.js b/src/helpers/domain.js
@@ -26,8 +26,9 @@ export default {
     const { horizontal } = props;
     const ensureZero = (domain) => {
       const isDependent = (axis === "y" && !horizontal) || (axis === "x" && horizontal);
-      const zeroDomain = isDependent ? [Math.min(...domain, 0), Math.max(... domain, 0)]
-      : domain;
+      const min = Collection.getMinValue(domain, 0);
+      const max = Collection.getMaxValue(domain, 0);
+      const zeroDomain = isDependent ? [min, max] : domain;
       return this.padDomain(zeroDomain, props, axis);
     };
     const categoryDomain = this.getDomainFromCategories(props, axis);
@@ -50,8 +51,8 @@ export default {
   getDomainFromData(props, axis, dataset) {
     const currentAxis = Axis.getCurrentAxis(axis, props.horizontal);
     const allData = flatten(dataset).map((datum) => datum[currentAxis]);
-    const min = Math.min(...allData);
-    const max = Math.max(...allData);
+    const min = Collection.getMinValue(allData);
+    const max = Collection.getMaxValue(allData);
     // TODO: is this the correct behavior, or should we just error. How do we
     // handle charts with just one data point?
     if (min === max) {
@@ -180,8 +181,8 @@ export default {
       return domain;
     }
 
-    const domainMin = Math.min(...domain);
-    const domainMax = Math.max(...domain);
+    const domainMin = Collection.getMinValue(domain);
+    const domainMax = Collection.getMaxValue(domain);
     const range = Helpers.getRange(props, axis);
     const rangeExtent = Math.abs(Math.max(...range) - Math.min(...range));
 

diff --git a/src/helpers/wrapper.js b/src/helpers/wrapper.js
@@ -92,8 +92,10 @@ export default {
     };
 
     const childDomains = getChildDomains(childComponents);
+    const min = Collection.getMinValue(childDomains);
+    const max = Collection.getMaxValue(childDomains);
     return childDomains.length === 0 ?
-      [0, 1] : [Math.min(...childDomains), Math.max(...childDomains)];
+      [0, 1] : [min, max];
   },
 
   getDataFromChildren(props, childComponents) {