A collection of composable React components for building interactive data visualizations
OTHER License
Bot releases are hidden (Show)
Published by scottrippey about 2 years ago
victory-axis
to TypeScript (#2379)victory-scatter
to TypeScript (#2394)victory-errorbar
to TypeScript (#2395)victory-box-plot
to TypeScript (#2387)victory-errorbar
to TypeScript (#2395)victory-brush-container
and victory-brush-line
to TypeScript (#2393)Full Changelog: https://github.com/FormidableLabs/victory/compare/v36.5.3...v36.6.0
Published by scottrippey over 2 years ago
Full Changelog: https://github.com/FormidableLabs/victory/compare/v36.5.2...v36.5.3
Published by becca-bailey over 2 years ago
Full Changelog: https://github.com/FormidableLabs/victory/compare/v36.5.1...v36.5.2
Published by becca-bailey over 2 years ago
We are continuing our internal typescript migration, and making some changes to our test infrastructure and build pipeline. This work includes a couple typescript-related bug fixes.
victory-vendor
by @scottrippey in https://github.com/FormidableLabs/victory/pull/2292
data
as readonly
by @scottrippey in https://github.com/FormidableLabs/victory/pull/2313
victory
to TypeScript by @scottrippey in https://github.com/FormidableLabs/victory/pull/2319
Full Changelog: https://github.com/FormidableLabs/victory/compare/v36.5.0...v36.5.1
Published by becca-bailey over 2 years ago
In 36.5.0 we pushed a lot of changes to our internal tooling. We replaced mocha and enzyme tests with Jest and React Testing Library, migrated some core parts of our codebase to Typescript, and bumped our React version to React 18. 🎉
eslint-comments
by @scottrippey in https://github.com/FormidableLabs/victory/pull/2277
Full Changelog: https://github.com/FormidableLabs/victory/compare/v36.4.1...v36.5.0
Published by becca-bailey over 2 years ago
This release includes mostly testing improvements, with one bugfix for prop types by @gustaff-weldon.
Full Changelog: https://github.com/FormidableLabs/victory/compare/v36.4.0...v36.4.1
Published by becca-bailey over 2 years ago
victory-vendor
packageIn order to safely upgrade d3-packages while still allowing Node.js users to use ESM imports, we introduced a new package called victory-vendor
for babelifying our d3 packages to make them more compatible with Victory. For more info, check out the description here.
This should not make much of a difference for the end user, but there are a couple changes to be aware of. Upgrading d3-scale
introduced some minor scaling changes. If you (like us) are using Chromatic or another visual regression testing tool, it may pick up some very small differences in the placement of axes and data points. d3-scale
also introduced some changes to the scale.tickFormat
function that changes the default formatting for log scales.
Before | After |
---|---|
If you are using a log scale and don't wish to use d3's default label formatting, You can use the tickFormat
prop on a VictoryAxis
component to override this default formatting. https://formidable.com/open-source/victory/docs/victory-axis#tickformat
Full Changelog: https://github.com/FormidableLabs/victory/compare/v36.3.2...v36.4.0
Published by becca-bailey over 2 years ago
aria-label
and data-testid
by @becca-bailey in https://github.com/FormidableLabs/victory/pull/2192
Full Changelog: https://github.com/FormidableLabs/victory/compare/v36.3.1...v36.3.2
Published by becca-bailey over 2 years ago
Full Changelog: https://github.com/FormidableLabs/victory/compare/v36.3.0...v36.3.1
Published by becca-bailey over 2 years ago
Full Changelog: https://github.com/FormidableLabs/victory/compare/v36.2.2...v36.3.0
(2021-06-24)
Adds a new disableInlineStyles
prop to components and primitives to support users who want to style their components by class, or use a CSS in JS solution like styled-components
When the new disableInlineStyles
prop is supplied to a component like VictoryBar
no styles will be supplied to either data or label components that it renders:
const StyledBar = styled(Bar)`
fill: purple;
`
const StyledLabel = styled(VictoryLabel)`
tspan {
fill: magenta;
font-family: Papyrus, fantasy;
}
`
function CustomStyledBarChart() {
return (
<VictoryChart>
<VictoryBar
disableInlineStyles
labels={[1, 2, 3, 4]}
dataComponent={<StyledBar />}
labelComponent={<StyledLabel />}
/>
</VictoryChart>
)
}
The disableInlineStyles
prop may also be supplied to primitive components for more granular control:
const StyledBar = styled(Bar)`
fill: purple;
`
function CustomStyledBarChart() {
return (
<VictoryChart>
<VictoryBar
labels={[1, 2, 3, 4]}
dataComponent={<StyledBar disableInlineStyles />}
/>
</VictoryChart>
)
}
Related PRs
Published by boygirl over 3 years ago
(2021-05-19)
domainPadding
updatesupdates how domainPadding
is applied to charts when 1) the additional padding would not result new quadradants being added, or 2) the user has set singleQuadrantDomainPadding={false}
. In these cases, domainPadding
is applied by calculating a new, smaller range that takes the desired, pixel-based padding into account, and then adding domain padding such that the previous domain fits entirely within the new, smaller range. In most cases, this change will make it much easier to do things like create bar charts where the first bar starts cleanly at the edge of the chart, by setting domainPadding={{ x: myBarWidth / 2 }}
This may cause visual changes for charts that use very large values for domainPadding
. The domainPadding
prop may need to be adjusted
calculates a more exact defaultDomainPadding
for grouped bar charts based on the offset
, number of bars, and the width of each bar (either from the barWidth
prop or from a default barWidth
based on the number of bars and the range). Previously, defaultDomainPadding
was approximated based only on offset
and number of bars.
(2021-05-18)
tickFormat
is given as an array. Thanks @jhumbug!