Skip to content
This repository has been archived by the owner on Feb 19, 2022. It is now read-only.

Bug/update tick values #529

Merged
merged 5 commits into from
Oct 19, 2017
Merged

Bug/update tick values #529

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
755cfbb
safety commit
boygirl Oct 17, 2017
4b652ad
working axis controlled tickFormats
boygirl Oct 18, 2017
2ce1bdd
axes are fully responsible for calculating tickValues and tickFormat
boygirl Oct 19, 2017
c744cfa
styles evaluated with original tick
boygirl Oct 19, 2017
bef01ca
use originalTicks for axis and polar axis styles
boygirl Oct 19, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 27 additions & 77 deletions demo/components/debug-demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,9 @@

import React from "react";
import {
VictoryChart, VictoryAxis, VictoryLine, VictoryScatter, VictoryBar
VictoryChart, VictoryAxis, VictoryBar
} from "../../src/index";

import { range } from "lodash";

class App extends React.Component {

render() {
Expand All @@ -20,88 +18,40 @@ class App extends React.Component {
const chartStyle = { parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" } };
return (
<div className="demo">
<h1>VictoryChart</h1>
<h1>Debug</h1>
<div style={containerStyle}>
<VictoryChart style={chartStyle}
padding={{ top: 80, bottom: 10, left: 80, right: 10 }}
>
<VictoryAxis label={"A LABEL"} dependentAxis/>
<VictoryAxis label={"A LABEL"}/>
<VictoryLine y={(d) => 0.5 * d.x + 0.5} style={{ data: { stroke: "red" } }}/>
<VictoryScatter y={(d) => d.x * d.x} style={{ data: { stroke: "red" } }}/>
</VictoryChart>

<VictoryChart style={chartStyle}>
<VictoryAxis label={"A LABEL"} dependentAxis orientation="right" invertAxis/>
<VictoryAxis label={"A LABEL"} orientation="top" invertAxis/>
<VictoryLine y={(d) => 0.5 * d.x + 0.5} style={{ data: { stroke: "red" } }}/>
<VictoryScatter y={(d) => d.x * d.x} style={{ data: { stroke: "red" } }}/>
</VictoryChart>

<VictoryChart style={chartStyle} domain={[-10, 10]}>
<VictoryAxis dependentAxis orientation="right"/>
<VictoryAxis orientation="top"/>
<VictoryLine y={(d) => 0.5 * d.x + 0.5} style={{ data: { stroke: "red" } }}/>
<VictoryScatter y={(d) => d.x * d.x} style={{ data: { stroke: "red" } }}/>
</VictoryChart>

<VictoryChart style={chartStyle} domain={{ x: [-10, 10], y: [-2, 10] }}>
<VictoryAxis dependentAxis orientation="right"/>
<VictoryAxis orientation="top"/>
<VictoryLine y={(d) => 0.5 * d.x + 0.5} style={{ data: { stroke: "red" } }}/>
<VictoryScatter y={(d) => d.x * d.x} style={{ data: { stroke: "red" } }}/>
</VictoryChart>

<VictoryChart style={chartStyle}>
<VictoryScatter
data={[{ x: 3, y: 3 }]}
/>
<VictoryAxis
tickValues={[3]}
/>
</VictoryChart>

<VictoryChart style={chartStyle}>
<VictoryScatter
data={[{ x: 1, y: -3 }, { x: 2, y: -2 }, { x: 3, y: -1 }]}
/>
</VictoryChart>

<VictoryChart style={chartStyle} domain={[0, 100]}>
<VictoryLine y={(d) => 0.5 * d.x + 0.5} style={{ data: { stroke: "red" } }}/>
<VictoryAxis
tickValues={range(100)}
tickCount={10}
/>
</VictoryChart>

<VictoryChart style={chartStyle} domain={[0, 100]}>
<VictoryLine y={(d) => 0.5 * d.x + 0.5} style={{ data: { stroke: "red" } }}/>
<VictoryAxis
tickCount={10}
/>
</VictoryChart>

<VictoryChart style={chartStyle}>
<VictoryAxis tickFormat={(t, i, ts) => `${t}s ${i} ${ts[0]}`}/>
<VictoryBar
style={{ data: { fill: "tomato" } }}
data={[
{ x: "one", y: 1 },
{ x: "two", y: 2 },
{ x: "three", y: 7 }
]}
/>
</VictoryChart>

<VictoryChart
style={chartStyle}
>
<VictoryBar horizontal
data={[{ x: 1, y: 3 }, { x: 2, y: 2 }, { x: 3, y: 1 }]}
/>
<VictoryAxis
tickValues={[ 0, 1, 2, 3 ]}
tickFormat={(t) => `y: ${t}`}
/>
<VictoryAxis dependentAxis
tickValues={[ 0, 1, 2, 3 ]}
tickFormat={(t) => `x: ${t}`}
alignment="start"
data={[
{ x: 2, y: "Echo" },
{ x: 6, y: "Foxtrot" },
{ x: 3, y: "Golf" },
{ x: 4, y: "Hotel" }
]}
/>
</VictoryChart>

<VictoryChart style={chartStyle}>
<VictoryBar horizontal
data={[{ x: 1, y: 4 }, { x: 2, y: 5 }, { x: 3, y: 6 }]}
<VictoryBar
data={[{ x: "one", y: 4 }, { x: "two", y: 5 }, { x: "three", y: 6 }]}
/>
<VictoryAxis dependentAxis
tickFormat={(t) => `x: ${t}`}
<VictoryAxis
tickValues={["one", "three"]}
/>
</VictoryChart>
</div>
Expand Down
2 changes: 2 additions & 0 deletions demo/components/victory-chart-demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -409,6 +409,7 @@ class App extends React.Component {
>
<VictoryLabel text="Parent Events" y={50} x={150}/>
<VictoryBar name="bar"/>
<VictoryAxis tickFormat={["one", "two", "three", "four"]}/>
</VictoryChart>

<VictoryChart style={chartStyle} scale={"linear"}>
Expand Down Expand Up @@ -503,6 +504,7 @@ class App extends React.Component {
<VictoryChart style={chartStyle} animate={{ duration: 2000 }}
domainPadding={{ x: 100 }}
>
<VictoryAxis tickFormat={["one", "two", "three"]}/>
<VictoryStack>
{this.state.barData.map((data, index) => {
return <Wrapper key={index}><VictoryBar data={data}/></Wrapper>;
Expand Down
47 changes: 11 additions & 36 deletions src/components/victory-axis/helper-methods.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { includes, defaults, defaultsDeep, isFunction, range, without } from "lodash";
import { defaults, defaultsDeep, isFunction } from "lodash";
import Axis from "../../helpers/axis";
import { Helpers, Scale, Domain } from "victory-core";

Expand Down Expand Up @@ -188,9 +188,9 @@ export default {
props = this.modifyProps(props, fallbackProps, role);
const calculatedValues = this.getCalculatedValues(props);
const {
style, orientation, isVertical, scale, ticks, tickFormat, stringTicks, anchors, domain
style, orientation, isVertical, scale, ticks, tickFormat, anchors, domain, stringTicks
} = calculatedValues;
const { width, height, standalone, theme, tickValues, polar, padding } = props;
const { width, height, standalone, theme, polar, padding } = props;
const {
globalTransform, gridOffset, gridEdge
} = this.getLayoutProps(props, calculatedValues);
Expand All @@ -201,25 +201,23 @@ export default {
style: style.parent, ticks, scale, width, height, domain, standalone, theme, polar, padding
} };

return ticks.reduce((childProps, indexedTick, index) => {
const tick = stringTicks ? tickValues[indexedTick - 1] : indexedTick;

const styles = this.getEvaluatedStyles(style, tick, index);
return ticks.reduce((childProps, tick, index) => {
const originalTick = stringTicks ? stringTicks[index] : tick;
const styles = this.getEvaluatedStyles(style, originalTick, index);
const tickLayout = {
position: this.getTickPosition(styles, orientation, isVertical),
transform: this.getTickTransform(scale(indexedTick), globalTransform, isVertical)
transform: this.getTickTransform(scale(tick), globalTransform, isVertical)
};

const gridLayout = {
edge: gridEdge,
transform: {
x: isVertical ?
-gridOffset.x + globalTransform.x : scale(indexedTick) + globalTransform.x,
-gridOffset.x + globalTransform.x : scale(tick) + globalTransform.x,
y: isVertical ?
scale(indexedTick) + globalTransform.y : gridOffset.y + globalTransform.y
scale(tick) + globalTransform.y : gridOffset.y + globalTransform.y
}
};

childProps[index] = {
axis: axisProps,
axisLabel: axisLabelProps,
Expand All @@ -241,10 +239,10 @@ export default {
const orientation = props.orientation || (props.dependentAxis ? "left" : "bottom");
const isVertical = Helpers.isVertical(props);
const labelPadding = this.getLabelPadding(props, style);
const stringTicks = Helpers.stringTicks(props);
const stringTicks = Helpers.stringTicks(props) ? props.tickValues : undefined;
const scale = this.getScale(props);
const domain = this.getDomain(props);
const ticks = this.getTicks(props, scale);
const ticks = Axis.getTicks(props, scale, props.crossAxis);
const tickFormat = Axis.getTickFormat(props, scale);
const anchors = this.getAnchors(orientation, isVertical);

Expand Down Expand Up @@ -279,29 +277,6 @@ export default {
};
},

getTicks(props, scale) {
const { tickCount, crossAxis } = props;
const tickValues = Axis.getTickArray(props.tickValues, props.tickFormat);
if (tickValues) {
return Helpers.stringTicks(props) ?
Axis.downsampleTicks(range(1, props.tickValues.length + 1), tickCount) :
Axis.downsampleTicks(tickValues, tickCount);
} else if (scale.ticks && isFunction(scale.ticks)) {
// eslint-disable-next-line no-magic-numbers
const defaultTickCount = tickCount || 5;
const scaleTicks = scale.ticks(defaultTickCount);
const tickArray = Array.isArray(scaleTicks) && scaleTicks.length ?
scaleTicks : scale.domain();
const ticks = Axis.downsampleTicks(tickArray, tickCount);
if (crossAxis) {
const filteredTicks = includes(ticks, 0) ? without(ticks, 0) : ticks;
return filteredTicks.length ? filteredTicks : ticks;
}
return ticks;
}
return scale.domain();
},

getAnchors(orientation, isVertical) {
const anchorOrientation = { top: "end", left: "end", right: "start", bottom: "start" };
const anchor = anchorOrientation[orientation];
Expand Down
56 changes: 1 addition & 55 deletions src/components/victory-chart/helper-methods.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import { invert, sortBy, values } from "lodash";
import Axis from "../../helpers/axis";
import Wrapper from "../../helpers/wrapper";
import React from "react";
import { Helpers, Collection, Log } from "victory-core";
import { Collection, Log } from "victory-core";

const identity = (x) => x;

export default {
getChildComponents(props, defaultAxes) {
Expand Down Expand Up @@ -106,58 +104,6 @@ export default {
};
},

getTicksFromData(calculatedProps, axis, axisComponent) {
const currentAxis = Helpers.getCurrentAxis(axis, calculatedProps.horizontal);
const stringMap = calculatedProps.stringMap[currentAxis];
// if tickValues are defined for an axis component use them
const categoryArray = calculatedProps.categories[currentAxis];
const ticksFromCategories = categoryArray && Collection.containsOnlyStrings(categoryArray) ?
categoryArray.map((tick) => stringMap[tick]) : categoryArray;
const ticksFromStringMap = stringMap && values(stringMap);
// when ticks is undefined, axis will determine its own ticks
const ticks = ticksFromCategories && ticksFromCategories.length !== 0 ?
ticksFromCategories : ticksFromStringMap;
const tickCount = axisComponent && axisComponent.props && axisComponent.props.tickCount;
return Axis.downsampleTicks(ticks, tickCount);
},

getTicksFromAxis(calculatedProps, axis, axisComponent) {
const axisProps = axisComponent && axisComponent.props || {};
const tickArray = axisProps.tickValues || axisProps.tickFormat;
if (!Array.isArray(tickArray)) {
return undefined;
}
const currentAxis = Helpers.getCurrentAxis(axis, calculatedProps.horizontal);
const stringMap = calculatedProps.stringMap[currentAxis];
const ticks = Collection.containsOnlyStrings(tickArray) && stringMap ?
tickArray.map((tick) => stringMap[tick]) : tickArray;
return Axis.downsampleTicks(ticks, axisProps.tickCount);
},

getTicks(...args) {
return this.getTicksFromAxis(...args) || this.getTicksFromData(...args);
},

getTickFormat(component, axis, calculatedProps) {
const currentAxis = Helpers.getCurrentAxis(axis, calculatedProps.horizontal);
const stringMap = calculatedProps.stringMap[currentAxis];
const tickValues = component.props.tickValues;
const useIdentity = tickValues && !Collection.containsStrings(tickValues) &&
!Collection.containsDates(tickValues);
if (useIdentity) {
return identity;
} else if (stringMap !== null) {
const tickValueArray = sortBy(values(stringMap), (n) => n);
const invertedStringMap = invert(stringMap);
const dataNames = tickValueArray.map((tick) => invertedStringMap[tick]);
// string ticks should have one tick of padding at the beginning
const dataTicks = ["", ...dataNames, ""];
return (x) => dataTicks[x];
} else {
return undefined;
}
},

createStringMap(props, axis, childComponents) {
const allStrings = Wrapper.getStringsFromChildren(props, axis, childComponents);
return allStrings.length === 0 ? null :
Expand Down
20 changes: 9 additions & 11 deletions src/components/victory-chart/victory-chart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,28 +98,26 @@ export default class VictoryChart extends React.Component {
}

getAxisProps(child, props, calculatedProps) {
const { domain, scale, originSign, stringMap } = calculatedProps;
const axis = child.type.getAxis(child.props);
const { domain, scale, originSign, stringMap, categories, horizontal } = calculatedProps;
const childProps = child.props || {};
const axis = child.type.getAxis(childProps);
const currentAxis = Axis.getCurrentAxis(axis, horizontal);
const otherAxis = axis === "x" ? "y" : "x";
const axisOffset = ChartHelpers.getAxisOffset(props, calculatedProps);
const tickValues = ChartHelpers.getTicks(calculatedProps, axis, child);
const tickFormat = child.props.tickFormat ?
Axis.getTickFormat(child.props, scale, stringMap) :
ChartHelpers.getTickFormat(child, axis, calculatedProps);
const offsetY = axis === "y" ? undefined : axisOffset.y;
const offsetX = axis === "x" ? undefined : axisOffset.x;
const crossAxis = child.props.crossAxis === false ? false : true;
const crossAxis = childProps.crossAxis === false ? false : true;
const orientation = Axis.getOrientation(child, axis, originSign[otherAxis]);
return {
stringMap: stringMap[currentAxis],
categories: categories[currentAxis],
startAngle: props.startAngle,
endAngle: props.endAngle,
innerRadius: props.innerRadius,
domain,
scale,
tickValues,
tickFormat,
offsetY: child.props.offsetY !== undefined ? child.props.offsetY : offsetY,
offsetX: child.props.offsetX !== undefined ? child.props.offsetX : offsetX,
offsetY: childProps.offsetY !== undefined ? childProps.offsetY : offsetY,
offsetX: childProps.offsetX !== undefined ? childProps.offsetX : offsetX,
crossAxis,
orientation
};
Expand Down
Loading