Merge pull request #328 from emeeks/x-middles

Fix canvasInteraction in Ordinal and Network Frames, enable multi-X a…

Author: emeeks

src/components/Frame.js

@@ -62,6 +62,7 @@ type Props = {
   matte?: boolean | Object | Node | Function,
   axes?: Array<AxisType>,
   axesTickLines?: Node,
+  disableCanvasInteraction?: boolean,
   renderOrder: $ReadOnlyArray<| "pieces"
     | "summaries"
     | "connectors"
@@ -160,7 +161,8 @@ class Frame extends React.Component<Props, State> {
       useSpans,
       canvasRendering,
       renderOrder,
-      additionalDefs
+      additionalDefs,
+      disableCanvasInteraction = false
     } = this.props
 
     const { voronoiHover } = this.state
@@ -374,6 +376,7 @@ class Frame extends React.Component<Props, State> {
             rScale={rScale}
             projection={projection}
             interactionOverflow={interactionOverflow}
+            disableCanvasInteraction={disableCanvasInteraction}
           />
           {annotationLayer}
         </SpanOrDiv>

src/components/InteractionLayer.js

@@ -43,7 +43,8 @@ type Props = {
   customClickBehavior?: Function,
   customHoverBehavior?: Function,
   voronoiHover: Function,
-  canvasRendering?: boolean
+  canvasRendering?: boolean,
+  disableCanvasInteraction: boolean
 }
 
 type State = {
@@ -641,7 +642,8 @@ class InteractionLayer extends React.Component<Props, State> {
       svgSize,
       margin,
       useSpans = false,
-      canvasRendering
+      canvasRendering,
+      disableCanvasInteraction
     } = this.props
     const { overlayRegions } = this.state
     let { enabled } = this.props
@@ -660,6 +662,7 @@ class InteractionLayer extends React.Component<Props, State> {
     }
 
     const interactionCanvas =
+      !disableCanvasInteraction &&
       canvasRendering &&
       this.state.overlayRegions &&
       this.state.interactionCanvas

src/components/NetworkFrame.js

@@ -1832,6 +1832,7 @@ class NetworkFrame extends React.Component<Props, State> {
         useSpans={!!useSpans}
         canvasRendering={!!(canvasNodes || canvasEdges)}
         renderOrder={renderOrder}
+        disableCanvasInteraction={true}
       />
     )
   }

src/components/OrdinalFrame.js

@@ -1695,6 +1695,7 @@ class OrdinalFrame extends React.Component<OrdinalFrameProps, State> {
         baseMarkProps={baseMarkProps}
         canvasRendering={!!(canvasPieces || canvasSummaries)}
         renderOrder={renderOrder}
+        disableCanvasInteraction={true}
       />
     )
   }

src/components/XYFrame.js

@@ -34,7 +34,7 @@ import {
   createAreas
 } from "./visualizationLayerBehavior/general"
 
-import { relativeY, findPointByID } from "./svg/lineDrawing"
+import { relativeY, relativeX, findPointByID } from "./svg/lineDrawing"
 import AnnotationCallout from "react-annotation/lib/Types/AnnotationCallout"
 
 import {
@@ -48,7 +48,10 @@ import {
   projectedY,
   projectedYTop,
   projectedYMiddle,
-  projectedYBottom
+  projectedYBottom,
+  projectedXMiddle,
+  projectedXTop,
+  projectedXBottom
 } from "./constants/coordinateNames"
 import {
   calculateDataExtent,
@@ -233,7 +236,10 @@ const projectedCoordinateNames = {
   x: projectedX,
   yMiddle: projectedYMiddle,
   yTop: projectedYTop,
-  yBottom: projectedYBottom
+  yBottom: projectedYBottom,
+  xMiddle: projectedXMiddle,
+  xTop: projectedXTop,
+  xBottom: projectedXBottom
 }
 
 function mapParentsToPoints(fullDataset: Array<Object>) {
@@ -619,6 +625,7 @@ class XYFrame extends React.Component<XYFrameProps, State> {
 
     const existingBaselines = {}
 
+
     if (currentProps.axes) {
       axesTickLines = []
       axes = currentProps.axes.map((d, i) => {
@@ -919,20 +926,20 @@ class XYFrame extends React.Component<XYFrameProps, State> {
     })
 
     if (!d.coordinates && !d.bounds) {
-      const xCoord = d[projectedX] || findFirstAccessorValue(xAccessor, d)
       screenCoordinates = [
-        xScale(xCoord),
+        relativeX({
+          point: d,
+          projectedXMiddle,
+          projectedX,
+          xAccessor,
+          xScale
+        }),
         relativeY({
           point: d,
-          lines,
           projectedYMiddle,
           projectedY,
-          projectedX,
-          xAccessor,
           yAccessor,
-          yScale,
-          xScale,
-          idAccessor
+          yScale
         })
       ]
 
@@ -948,7 +955,14 @@ class XYFrame extends React.Component<XYFrameProps, State> {
       }
     } else if (!d.bounds) {
       screenCoordinates = d.coordinates.reduce((coords, p) => {
-        const xCoordinate = xScale(findFirstAccessorValue(xAccessor, p)) + adjustedPosition[0]
+        const xCoordinate = relativeX({
+          point: p,
+          projectedXMiddle,
+          projectedX,
+          xAccessor,
+          xScale
+        })
+
         const yCoordinate = relativeY({
           point: p,
           lines,
@@ -964,6 +978,9 @@ class XYFrame extends React.Component<XYFrameProps, State> {
         if (Array.isArray(yCoordinate)) {
           return [...coords, [xCoordinate, Math.min(...yCoordinate)], [xCoordinate, Math.max(...yCoordinate)]]
         }
+        else if (Array.isArray(xCoordinate)) {
+          return [...coords, [Math.min(...xCoordinate), yCoordinate], [Math.max(...xCoordinate), yCoordinate]]
+        }
         else {
           return [...coords, [xCoordinate, yCoordinate]]
         }}, [])
@@ -1112,8 +1129,8 @@ class XYFrame extends React.Component<XYFrameProps, State> {
       return null
     }
 
-    const xCoord = d[projectedX] || findFirstAccessorValue(xAccessor, d)
-    const yCoord = d[projectedY] || findFirstAccessorValue(yAccessor, d)
+    const xCoord =  d[projectedXMiddle] || d[projectedX] || findFirstAccessorValue(xAccessor, d)
+    const yCoord =  d[projectedYMiddle] || d[projectedY] || findFirstAccessorValue(yAccessor, d)
 
     const xString = xCoord && xCoord.toString ? xCoord.toString() : xCoord
     const yString = yCoord && yCoord.toString ? yCoord.toString() : yCoord

src/components/annotationRules/xyframeRules.js

@@ -59,7 +59,7 @@ const pointsAlong = along => ({
         key={`found-circle-${i}`}
         r={r(p, i)}
         style={styleFn(p, i)}
-        cx={xScale(p.x)}
+        cx={xScale(p.xMiddle || p.x)}
         cy={yScale(p.yMiddle || p.yTop)}
       />
     ))

src/components/constants/coordinateNames.js

@@ -3,15 +3,6 @@ export const projectedY = "y"
 export const projectedYMiddle = "yMiddle"
 export const projectedYTop = "yTop"
 export const projectedYBottom = "yBottom"
-
-/*
-Use symbols for x/y/offset to avoid conflicts when projecting the dataset
-But how to expose those for custom hover rules?
-*/
-
-/*
-const projectedX = Symbol('x');
-const projectedY = Symbol('y');
-const projectedYMiddle = Symbol('y-middle');
-const projectedOffset = Symbol('offset');
-*/
+export const projectedXMiddle = "xMiddle"
+export const projectedXTop = "xTop"
+export const projectedXBottom = "xBottom"

src/components/data/dataFunctions.js

@@ -6,7 +6,10 @@ import {
   projectedY,
   projectedYTop,
   projectedYMiddle,
-  projectedYBottom
+  projectedYBottom,
+  projectedXBottom,
+  projectedXMiddle,
+  projectedXTop
 } from "../constants/coordinateNames"
 import {
   differenceLine,
@@ -17,7 +20,7 @@ import {
 } from "../svg/lineDrawing"
 
 import { contouring, hexbinning, heatmapping } from "../svg/areaDrawing"
-import { max, min, extent } from "d3-array"
+import { max, min } from "d3-array"
 
 import { extentValue } from "./unflowedFunctions"
 
@@ -127,6 +130,14 @@ export const calculateDataExtent = ({
                 projectedPoint[projectedYTop]) /
               2
           }
+          if (Array.isArray(x)) {
+            projectedPoint[projectedXBottom] = Math.min(...x)
+            projectedPoint[projectedXTop] = Math.max(...x)
+            projectedPoint[projectedXMiddle] =
+              (projectedPoint[projectedXBottom] +
+                projectedPoint[projectedXTop]) /
+              2
+          }
           projectedPoints.push(projectedPoint)
         })
       })
@@ -151,7 +162,10 @@ export const calculateDataExtent = ({
       yProp: projectedY,
       yPropMiddle: projectedYMiddle,
       yPropTop: projectedYTop,
-      yPropBottom: projectedYBottom
+      yPropBottom: projectedYBottom,
+      xPropMiddle: projectedXMiddle,
+      xPropTop: projectedXTop,
+      xPropBottom: projectedXBottom
     }
 
     projectedLines = lineTransformation(lineType, optionsObject)(
@@ -227,7 +241,26 @@ export const calculateDataExtent = ({
     }))
   }
 
-  const calculatedXExtent = extent(fullDataset.map(d => d[projectedX]))
+  const calculatedXExtent = [
+    min(
+      fullDataset.map(
+        d =>
+          d[projectedXBottom] === undefined
+            ? d[projectedX]
+            : Math.min(d[projectedXTop], d[projectedXBottom])
+      )
+    ),
+
+    max(
+      fullDataset.map(
+        d =>
+          d[projectedXTop] === undefined
+            ? d[projectedX]
+            : Math.max(d[projectedXBottom], d[projectedXTop])
+      )
+    )
+  ]
+
   const calculatedYExtent = [
     min(
       fullDataset.map(
@@ -321,21 +354,7 @@ export const calculateDataExtent = ({
       ...projectedAreas.map(d => ({ ...d })),
       ...fullDataset.filter(d => !d.parentArea)
     ]
-  } /*else if (
-    typeof areaType === "function" ||
-    (areaType && areaType.type && typeof areaType.type === "function")
-  ) {
-    const areaFunction = areaType.type || areaType
-
-    projectedAreas = areaFunction({
-      xExtent: finalXExtent,
-      yExtent: finalYExtent,
-      projectedX,
-      projectedY,
-      fullDataset,
-      projectedAreas
-    })
-  } */
+  }
 
   return {
     xExtent: finalXExtent,

src/components/svg/lineDrawing.js

@@ -60,15 +60,18 @@ type LineChartTypes = {
 
 type RelativeYTypes = {
   point: ?Object,
-  lines: Object,
   projectedYMiddle: string,
   projectedY: string,
+  yAccessor: Array<Function>,
+  yScale: Function
+}
+
+type RelativeXTypes = {
+  point: ?Object,
+  projectedXMiddle: string,
   projectedX: string,
   xAccessor: Array<Function>,
-  yAccessor: Array<Function>,
-  yScale: Function,
-  xScale: Function,
-  idAccessor: Function
+  xScale: Function
 }
 
 export const projectAreaData = ({
@@ -513,6 +516,25 @@ export function relativeY({
   return (baseData && yScale(baseData)) || 0
 }
 
+export function relativeX({
+  point,
+  projectedXMiddle,
+  projectedX,
+  xAccessor,
+  xScale
+}: RelativeXTypes) {
+  const baseData =
+    point &&
+    (point[projectedXMiddle] ||
+      point[projectedX] ||
+      findFirstAccessorValue(xAccessor, point))
+
+  if (Array.isArray(baseData)) {
+    return baseData.map(d => xScale(d))
+  }
+  return (baseData && xScale(baseData)) || 0
+}
+
 export function findPointByID({
   point,
   idAccessor,