Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve horizontal charts #1258

Merged
merged 65 commits into from
Feb 27, 2019
Merged

Improve horizontal charts #1258

merged 65 commits into from
Feb 27, 2019

Conversation

boygirl
Copy link
Contributor

@boygirl boygirl commented Feb 26, 2019

This PR improves support and consistency for horizontal charts. The goal of this change was to make it possible to turn any existing chart into a horizontal chart by adding the horizontal prop to the chart without needing to alter any other props.

  • supports horizontal versions of all chart types without needing to alter data
  • supports all event containers for horizontal charts
  • enforces consistency across props that take x and y values so that the x value always refers to the independent dimension, and the y value always refers to the dependent dimension.
  • the orientation of VictoryAxis components is no longer tied to whether or not they are the dependentAxis

Breaking Changes

Most Horizontal Charts
The change in how props with x and y values are treated (i.e. scale, domain, etc) will be a breaking change for most horizontal charts. In most cases, reversing the x and y values of props you are providing to your horizontal chart will be sufficient to correct the change. For example:

<VictoryChart horizontal scale={{ x: "log" }} domain={{ y: [4, 9] }}>
  <VictoryBar
    data={[
      { x: 5, y: 0.1 },
      { x: 6, y: 1 },
      { x: 7, y: 10 },
      { x: 8, y: 100 }
    ]}
  />
</VictoryChart>

Should be changed to:

<VictoryChart horizontal scale={{ y: "log" }} domain={{ x: [4, 9] }}>
  <VictoryBar
    data={[
      { x: 5, y: 0.1 },
      { x: 6, y: 1 },
      { x: 7, y: 10 },
      { x: 8, y: 100 }
    ]}
  />
</VictoryChart>

Props affected by this change are: scale, domain, maxDomain, minDomain, domainPadding, and categories

Horizontal Charts with Event Containers
Dimension props such as brushDimension have changed so that they always refer to the dimension of the target variable (x for the independent variable, and y for the dependent variable). For example, a VictoryBrushContainer component with brushDimension="x" will move and expand only in the independent dimension regardless of whether the chart is horizontal.

horizontal-brush-chart

Props affected by this change are: brushDimension, cursorDimension, selectionDimension, voronoiDimension, and zoomDimension

Horizontal Charts with Custom dataComponents
The position values (i.e. x, y, x0, y0) supplied to custom dataComponents from components like VictoryChart will be scaled for the layout of the horizontal chart. Users who rely on these values may need to flip them or adjust them depending on their use case

Horizontal VictoryBoxPlot
Previously VictoryBoxPlot required data to be flipped (x values flipped with y values) in order to plot horizontal charts. This is no longer required, and providing data in this format will no longer work correctly. To correct for this change, it should be sufficient to flip the data used in horizontal charts

@boygirl boygirl changed the title Experiment/horizontal Improve horizontal charts Feb 26, 2019
@boygirl boygirl merged commit 8973408 into master Feb 27, 2019
@boygirl boygirl deleted the experiment/horizontal branch February 27, 2019 23:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant