rename cursor props (cursorLabels, cursorLabelComponent, cursorLabelO…

…ffset) to avoid collision using createContainer
FormidableLabs · May 12, 2017 · e364f07 · e364f07
1 parent c21d585
commit e364f07
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 26 deletions.
diff --git a/demo/components/create-container-demo.js b/demo/components/create-container-demo.js
@@ -1,5 +1,6 @@
 /*eslint-disable no-magic-numbers,react/no-multi-comp */
 import React from "react";
+import { round } from "lodash";
 import {
   VictoryChart, VictoryGroup, VictoryStack, VictoryScatter, VictoryBar, VictoryLine,
   createContainer
@@ -21,6 +22,7 @@ const Charts = ({ CustomContainer }) => { // eslint-disable-line react/prop-type
   return (
     <div className="demo">
       <div style={containerStyle}>
+        {/* A */}
         <VictoryChart style={chartStyle}
           domainPadding={{ y: 2 }}
           containerComponent={
@@ -69,6 +71,7 @@ const Charts = ({ CustomContainer }) => { // eslint-disable-line react/prop-type
           />
         </VictoryChart>
 
+        {/* B */}
         <VictoryScatter
           style={{
             parent: chartStyle.parent,
@@ -79,10 +82,12 @@ const Charts = ({ CustomContainer }) => { // eslint-disable-line react/prop-type
           containerComponent={
             <CustomContainer
               dimension="x"
+              cursorLabels={(d) => round(d.x, 2)}
               selectionStyle={{
                 stroke: "tomato", strokeWidth: 2, fill: "tomato", fillOpacity: 0.1
               }}
               selectedDomain={{ x: [0.4, 0.95], y: [0.5, 0.8] }}
+              defaultCursorValue={0.99}
             />
           }
           size={(datum, active) => active ? 5 : 3}
@@ -150,9 +155,14 @@ const Charts = ({ CustomContainer }) => { // eslint-disable-line react/prop-type
           </VictoryGroup>
         </VictoryChart>
 
+        {/* C */}
         <VictoryStack
           style={chartStyle}
-          containerComponent={<CustomContainer selectedDomain={{ x: [1.5, 2.5], y: [-3, 4] }} />}
+          containerComponent={
+            <CustomContainer
+              selectedDomain={{ x: [1.5, 2.5], y: [-3, 4] }}
+            />
+          }
         >
           <VictoryBar
             style={{

diff --git a/demo/components/victory-cursor-container-demo.js b/demo/components/victory-cursor-container-demo.js
@@ -51,7 +51,7 @@ class App extends React.Component {
 
     const chartStyle = { parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" } };
 
-    const labels = (d) => (
+    const cursorLabels = (d) => (
       `${round(d.x, 2)} , ${round(d.y, 2)}`
     );
 
@@ -64,7 +64,7 @@ class App extends React.Component {
             domainPadding={{ y: 2 }}
             containerComponent={
               <VictoryCursorContainer
-                labels={labels}
+                cursorLabels={cursorLabels}
                 defaultCursorValue={this.defaultCursorValue}
                 onChange={(cursorValue) => this.setState({ cursorValue })}
               />
@@ -124,7 +124,7 @@ class App extends React.Component {
             }}
             containerComponent={
               <VictoryCursorContainer
-                labels={(d) => `${round(d.x, 2)}`}
+                cursorLabels={(d) => `${round(d.x, 2)}`}
                 dimension="x"
                 defaultCursorValue={1}
               />
@@ -159,8 +159,8 @@ class App extends React.Component {
               <VictoryCursorContainer
                 defaultCursorValue={2}
                 dimension="x"
-                labels={(datum) => round(datum.x, 2)}
-                labelOffset={15}
+                cursorLabels={(datum) => round(datum.x, 2)}
+                cursorLabelOffset={15}
               />
             }
           >

diff --git a/src/components/containers/victory-cursor-container.js b/src/components/containers/victory-cursor-container.js
@@ -9,30 +9,30 @@ export const cursorContainerMixin = (base) => class VictoryCursorContainer exten
   static displayName = "VictoryCursorContainer";
   static propTypes = {
     ...VictoryContainer.propTypes,
-    defaultCursorValue: PropTypes.oneOfType([
+    cursorLabel: PropTypes.func,
+    cursorLabelComponent: PropTypes.element,
+    cursorLabelOffset: PropTypes.oneOfType([
       PropTypes.number,
       PropTypes.shape({
         x: PropTypes.number,
         y: PropTypes.number
       })
     ]),
-    dimension: PropTypes.oneOf(["x", "y"]),
-    labelComponent: PropTypes.element,
-    labelOffset: PropTypes.oneOfType([
+    defaultCursorValue: PropTypes.oneOfType([
       PropTypes.number,
       PropTypes.shape({
         x: PropTypes.number,
         y: PropTypes.number
       })
     ]),
-    labels: PropTypes.func,
+    dimension: PropTypes.oneOf(["x", "y"]),
     onChange: PropTypes.func,
     standalone: PropTypes.bool
   };
   static defaultProps = {
     ...VictoryContainer.defaultProps,
-    labelComponent: <VictoryLabel/>,
-    labelOffset: {
+    cursorLabelComponent: <VictoryLabel/>,
+    cursorLabelOffset: {
       x: 5,
       y: -10
     },
@@ -73,25 +73,25 @@ export const cursorContainerMixin = (base) => class VictoryCursorContainer exten
     return defaultCursorValue;
   }
 
-  getLabelOffset(props) {
-    const { labelOffset } = props;
+  getCursorLabelOffset(props) {
+    const { cursorLabelOffset } = props;
 
-    if (isNumber(labelOffset)) {
+    if (isNumber(cursorLabelOffset)) {
       return {
-        x: labelOffset,
-        y: labelOffset
+        x: cursorLabelOffset,
+        y: cursorLabelOffset
       };
     }
 
-    return labelOffset;
+    return cursorLabelOffset;
   }
 
   getCursorElements(props) {
     const {
-      scale, domain, dimension, labelComponent, labels, cursorComponent
+      scale, domain, dimension, cursorLabelComponent, cursorLabel, cursorComponent
     } = props;
     const cursorValue = this.getCursorPosition(props);
-    const labelOffset = this.getLabelOffset(props);
+    const cursorLabelOffset = this.getCursorLabelOffset(props);
 
     if (!cursorValue) { return []; }
 
@@ -102,11 +102,11 @@ export const cursorContainerMixin = (base) => class VictoryCursorContainer exten
       x: scale.x(cursorValue.x),
       y: scale.y(cursorValue.y)
     };
-    if (labels) {
-      newElements.push(React.cloneElement(labelComponent, {
-        x: cursorCoordinates.x + labelOffset.x,
-        y: cursorCoordinates.y + labelOffset.y,
-        text: Helpers.evaluateProp(labels, cursorValue, true),
+    if (cursorLabel) {
+      newElements.push(React.cloneElement(cursorLabelComponent, {
+        x: cursorCoordinates.x + cursorLabelOffset.x,
+        y: cursorCoordinates.y + cursorLabelOffset.y,
+        text: Helpers.evaluateProp(cursorLabel, cursorValue, true),
         active: true,
         key: "cursor-label"
       }));