Merge pull request #1360 from FormidableLabs/improvement/data-accessors

Improvement/functional-props
FormidableLabs · Aug 6, 2019 · 20a4dbb · 20a4dbb
2 parents 9172e5f + 145bc6d
commit 20a4dbb
Show file tree

Hide file tree

Showing 62 changed files with 568 additions and 541 deletions.
diff --git a/demo/components/create-container-demo.js b/demo/components/create-container-demo.js
@@ -40,7 +40,7 @@ const Charts = ({ behaviors }) => {
           containerComponent={
             <CustomContainer
               voronoiDimension="x"
-              labels={(d) => `y: ${d.y}`}
+              labels={({ datum }) => `y: ${datum.y}`}
               labelComponent={<VictoryTooltip cornerRadius={0} flyoutStyle={{ fill: "white" }} />}
               selectedDomain={{ x: [1.5, 2] }}
             />
@@ -70,7 +70,7 @@ const Charts = ({ behaviors }) => {
             style={{
               data: {
                 stroke: "tomato",
-                strokeWidth: (d, active) => (active ? 4 : 2)
+                strokeWidth: ({ active }) => (active ? 4 : 2)
               },
               labels: { fill: "tomato" }
             }}
@@ -85,7 +85,7 @@ const Charts = ({ behaviors }) => {
             style={{
               data: {
                 stroke: "blue",
-                strokeWidth: (d, active) => (active ? 4 : 2)
+                strokeWidth: ({ active }) => (active ? 4 : 2)
               },
               labels: { fill: "blue" }
             }}
@@ -96,7 +96,7 @@ const Charts = ({ behaviors }) => {
             style={{
               data: {
                 stroke: "black",
-                strokeWidth: (d, active) => (active ? 4 : 2)
+                strokeWidth: ({ active }) => (active ? 4 : 2)
               },
               labels: { fill: "black" }
             }}
@@ -108,8 +108,8 @@ const Charts = ({ behaviors }) => {
           style={{ parent: chartStyle.parent }}
           containerComponent={
             <CustomContainer
-              labels={(d) => round(d.x, 2)}
-              cursorLabel={(d) => round(d.x, 2)}
+              labels={({ datum }) => round(datum.x, 2)}
+              cursorLabel={({ datum }) => round(datum.x, 2)}
               selectionStyle={{
                 stroke: "tomato",
                 strokeWidth: 2,
@@ -124,10 +124,10 @@ const Charts = ({ behaviors }) => {
           <VictoryScatter
             style={{
               data: {
-                fill: (datum, active) => (active ? "tomato" : "black")
+                fill: ({ active }) => (active ? "tomato" : "black")
               }
             }}
-            size={(datum, active) => (active ? 5 : 3)}
+            size={({ active }) => (active ? 5 : 3)}
             y={(d) => d.x * d.x}
           />
         </VictoryChart>
@@ -142,8 +142,8 @@ const Charts = ({ behaviors }) => {
               style={{
                 data: { fill: "tomato" }
               }}
-              size={(datum, active) => (active ? 5 : 3)}
-              labels={(d) => d.y}
+              size={({ active }) => (active ? 5 : 3)}
+              labels={({ datum }) => datum.y}
               labelComponent={<VictoryTooltip />}
               data={[
                 { x: 1, y: -5 },
@@ -159,8 +159,8 @@ const Charts = ({ behaviors }) => {
               style={{
                 data: { fill: "blue" }
               }}
-              size={(datum, active) => (active ? 5 : 3)}
-              labels={(d) => d.y}
+              size={({ active }) => (active ? 5 : 3)}
+              labels={({ datum }) => datum.y}
               labelComponent={<VictoryTooltip />}
               data={[
                 { x: 1, y: -3 },
@@ -182,9 +182,9 @@ const Charts = ({ behaviors }) => {
                 { x: 6, y: 3 },
                 { x: 7, y: -3 }
               ]}
-              labels={(d) => d.y}
+              labels={({ datum }) => datum.y}
               labelComponent={<VictoryTooltip />}
-              size={(datum, active) => (active ? 5 : 3)}
+              size={({ active }) => (active ? 5 : 3)}
             />
           </VictoryGroup>
         </VictoryChart>
@@ -198,11 +198,11 @@ const Charts = ({ behaviors }) => {
             style={{
               data: {
                 fill: "tomato",
-                stroke: (d, active) => (active ? "black" : "none"),
+                stroke: ({ active }) => (active ? "black" : "none"),
                 strokeWidth: 2
               }
             }}
-            size={(datum, active) => (active ? 5 : 3)}
+            size={({ active }) => (active ? 5 : 3)}
             data={[
               { x: 1, y: -5 },
               { x: 2, y: 4 },
@@ -217,11 +217,11 @@ const Charts = ({ behaviors }) => {
             style={{
               data: {
                 fill: "orange",
-                stroke: (d, active) => (active ? "black" : "none"),
+                stroke: ({ active }) => (active ? "black" : "none"),
                 strokeWidth: 2
               }
             }}
-            size={(datum, active) => (active ? 5 : 3)}
+            size={({ active }) => (active ? 5 : 3)}
             data={[
               { x: 1, y: -3 },
               { x: 2, y: 5 },
@@ -236,7 +236,7 @@ const Charts = ({ behaviors }) => {
             style={{
               data: {
                 fill: "gold",
-                stroke: (d, active) => (active ? "black" : "none"),
+                stroke: ({ active }) => (active ? "black" : "none"),
                 strokeWidth: 2
               }
             }}

diff --git a/demo/components/debug-demo.js b/demo/components/debug-demo.js
@@ -59,7 +59,7 @@ class App extends React.Component {
           containerComponent={<VictoryVoronoiContainer labels={() => "HELLO"} />}
         >
           <VictoryBar
-            style={{ data: { fill: (d, a) => (a ? "red" : "black") } }}
+            style={{ data: { fill: ({ active }) => (active ? "red" : "black") } }}
             data={[
               { x: 0, y: 3.5, y0: 2.5 },
               { x: 0, y: 11, y0: 5 },
@@ -70,7 +70,7 @@ class App extends React.Component {
             ]}
           />
           <VictoryScatter
-            style={{ data: { fill: (d, a) => (a ? "black" : "red") } }}
+            style={{ data: { fill: ({ active }) => (active ? "black" : "red") } }}
             data={[
               { x: 0, y: 3.5 },
               { x: 0, y: 11 },
@@ -100,11 +100,11 @@ class App extends React.Component {
               style={{
                 data: {
                   fill: "tomato",
-                  stroke: (d, active) => (active ? "black" : "none"),
+                  stroke: ({ active }) => (active ? "black" : "none"),
                   strokeWidth: 2
                 }
               }}
-              size={(datum, active) => (active ? 5 : 3)}
+              size={({ active }) => (active ? 5 : 3)}
               data={[
                 { x: 1, y: -5 },
                 { x: 2, y: 4 },
@@ -119,11 +119,11 @@ class App extends React.Component {
               style={{
                 data: {
                   fill: "orange",
-                  stroke: (d, active) => (active ? "black" : "none"),
+                  stroke: ({ active }) => (active ? "black" : "none"),
                   strokeWidth: 2
                 }
               }}
-              size={(datum, active) => (active ? 5 : 3)}
+              size={({ active }) => (active ? 5 : 3)}
               data={[
                 { x: 1, y: -3 },
                 { x: 2, y: 5 },
@@ -138,7 +138,7 @@ class App extends React.Component {
               style={{
                 data: {
                   fill: "gold",
-                  stroke: (d, active) => (active ? "black" : "none"),
+                  stroke: ({ active }) => (active ? "black" : "none"),
                   strokeWidth: 2
                 }
               }}

diff --git a/demo/components/draggable-demo.js b/demo/components/draggable-demo.js
@@ -157,7 +157,7 @@ class App extends React.Component {
                   onBrushDomainChange={this.onDomainChange.bind(this)}
                   brushStyle={{
                     fill: "skyBlue",
-                    opacity: (d, a) => (a ? 1 : 0.5)
+                    opacity: ({ active }) => (active ? 1 : 0.5)
                   }}
                 />
               }
@@ -174,7 +174,7 @@ class App extends React.Component {
             style={{
               data: {
                 fill: "skyBlue",
-                opacity: (d, a) => (a ? 1 : 0.5),
+                opacity: ({ active }) => (active ? 1 : 0.5),
                 cursor: "move"
               }
             }}

diff --git a/demo/components/external-events-demo.js b/demo/components/external-events-demo.js
@@ -212,11 +212,11 @@ class App extends React.Component {
               style={{
                 data: {
                   fill: "tomato",
-                  stroke: (d, active) => (active ? "black" : "none"),
+                  stroke: ({ active }) => (active ? "black" : "none"),
                   strokeWidth: 2
                 }
               }}
-              size={(datum, active) => (active ? 5 : 3)}
+              size={({ active }) => (active ? 5 : 3)}
               data={[
                 { x: 1, y: -5 },
                 { x: 2, y: 4 },
@@ -231,11 +231,11 @@ class App extends React.Component {
               style={{
                 data: {
                   fill: "orange",
-                  stroke: (d, active) => (active ? "black" : "none"),
+                  stroke: ({ active }) => (active ? "black" : "none"),
                   strokeWidth: 2
                 }
               }}
-              size={(datum, active) => (active ? 5 : 3)}
+              size={({ active }) => (active ? 5 : 3)}
               data={[
                 { x: 1, y: -3 },
                 { x: 2, y: 5 },

diff --git a/demo/components/group-demo.js b/demo/components/group-demo.js
@@ -140,7 +140,10 @@ class App extends React.Component {
           <VictoryChart style={chartStyle}>
             <VictoryGroup y={(data) => Math.sin(2 * Math.PI * data.x)}>
               <VictoryLine />
-              <VictoryVoronoi labelComponent={<VictoryTooltip />} labels={(d) => d.y} />
+              <VictoryVoronoi
+                labelComponent={<VictoryTooltip />}
+                labels={({ datum }) => datum.y}
+              />
             </VictoryGroup>
           </VictoryChart>
         </div>

diff --git a/demo/components/immutable-demo.js b/demo/components/immutable-demo.js
@@ -173,7 +173,10 @@ class App extends React.Component {
             <VictoryScatter
               groupComponent={<VictoryClipContainer />}
               data={this.state.scatterData}
-              style={{ data: { fill: (d) => d.fill, opacity: (d) => d.opacity } }}
+              style={{ data: {
+                fill: ({ datum }) => datum.fill,
+                opacity: ({ datum }) => datum.opacity
+              } }}
               animate={{
                 onExit: {
                   duration: 500,
@@ -287,7 +290,7 @@ class App extends React.Component {
 
           <VictoryLine
             style={chartStyle}
-            labels={(datum) => Math.round(datum.y)}
+            labels={({ datum }) => Math.round(datum.y)}
             data={fromJS([
               { x: new Date(1982, 1, 1), y: 125 },
               { x: new Date(1987, 1, 1), y: 257 },
@@ -514,7 +517,7 @@ class App extends React.Component {
           <VictoryCandlestick
             style={chartStyle}
             labelComponent={<VictoryTooltip />}
-            labels={(d) => `hello #${d.x}`}
+            labels={({ datum }) => `hello #${datum.x}`}
             data={fromJS([
               { x: 1, open: 5, close: 10, high: 15, low: 0 },
               { x: 2, open: 15, close: 10, high: 20, low: 5 },
@@ -633,7 +636,7 @@ class App extends React.Component {
             containerComponent={
               <VictoryVoronoiContainer
                 voronoiDimension="x"
-                labels={(d) => `y:${d.y}`}
+                labels={({ datum }) => `y:${datum.y}`}
                 labelComponent={
                   <VictoryTooltip
                     y={150}
@@ -652,7 +655,7 @@ class App extends React.Component {
                 { x: 3, y: -2, l: "three" }
               ])}
               style={{
-                data: { stroke: "tomato", strokeWidth: (d, active) => (active ? 4 : 2) },
+                data: { stroke: "tomato", strokeWidth: ({ active }) => (active ? 4 : 2) },
                 labels: { fill: "tomato" }
               }}
             />
@@ -663,7 +666,7 @@ class App extends React.Component {
                 { x: 3, y: 3, l: "blue" }
               ])}
               style={{
-                data: { stroke: "blue", strokeWidth: (d, active) => (active ? 4 : 2) },
+                data: { stroke: "blue", strokeWidth: ({ active }) => (active ? 4 : 2) },
                 labels: { fill: "blue" }
               }}
             />
@@ -674,7 +677,7 @@ class App extends React.Component {
                 { x: 3, y: -2, l: "bird" }
               ])}
               style={fromJS({
-                data: { stroke: "black", strokeWidth: (d, active) => (active ? 4 : 2) },
+                data: { stroke: "black", strokeWidth: ({ active }) => (active ? 4 : 2) },
                 labels: { fill: "black" }
               })}
             />
@@ -686,7 +689,9 @@ class App extends React.Component {
             height={400}
             padding={{ top: 100, bottom: 40, left: 50, right: 50 }}
             containerComponent={
-              <VictoryCursorContainer cursorLabel={(d) => `${round(d.x, 2)} , ${round(d.y, 2)}`} />
+              <VictoryCursorContainer
+                cursorLabel={({ datum }) => `${round(datum.x, 2)} , ${round(datum.y, 2)}`}
+              />
             }
           >
             <VictoryLegend
@@ -794,24 +799,24 @@ class App extends React.Component {
             <VictoryGroup data={fromJS([{ x: 1, y: 5 }, { x: 2, y: 4 }, { x: 3, y: -2 }])}>
               <VictoryLine style={{ data: { stroke: "tomato" } }} />
               <VictoryScatter
-                style={{ data: { fill: (d, active) => (active ? "tomato" : "gray") } }}
-                labels={(d) => d.y}
+                style={{ data: { fill: ({ active }) => (active ? "tomato" : "gray") } }}
+                labels={({ datum }) => datum.y}
                 labelComponent={<VictoryTooltip />}
               />
             </VictoryGroup>
             <VictoryGroup data={fromJS([{ x: 1, y: -3 }, { x: 2, y: 5 }, { x: 3, y: 3 }])}>
               <VictoryLine style={{ data: { stroke: "blue" } }} />
               <VictoryScatter
-                style={{ data: { fill: (d, active) => (active ? "blue" : "gray") } }}
-                labels={(d) => d.y}
+                style={{ data: { fill: ({ active }) => (active ? "blue" : "gray") } }}
+                labels={({ datum }) => datum.y}
                 labelComponent={<VictoryTooltip />}
               />
             </VictoryGroup>
             <VictoryGroup data={fromJS([{ x: 1, y: 5 }, { x: 2, y: -4 }, { x: 3, y: -2 }])}>
               <VictoryLine style={{ data: { stroke: "black" } }} />
               <VictoryScatter
-                style={{ data: { fill: (d, active) => (active ? "black" : "gray") } }}
-                labels={(d) => d.y}
+                style={{ data: { fill: ({ active }) => (active ? "black" : "gray") } }}
+                labels={({ datum }) => datum.y}
                 labelComponent={<VictoryTooltip />}
               />
             </VictoryGroup>

diff --git a/demo/components/performance.js b/demo/components/performance.js
@@ -70,7 +70,7 @@ class App extends React.Component {
             <VictoryScatter
               style={{
                 data: {
-                  fill: (datum, active) => (active ? "tomato" : "black")
+                  fill: ({ active }) => (active ? "tomato" : "black")
                 }
               }}
               data={scatterData}