How to use @visx/scale - 3 common examples
To help you get started, we’ve selected a few @visx/scale examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
G-Research / armada / internal / lookout / ui / src / components / job-sets / DurationBoxPlot.tsx View on Github 
function DurationBoxPlot(props: DurationBoxPlotProps) {
const scale = scaleLinear({
range: [props.padding.left, props.width - props.padding.right],
round: true,
domain: [props.minValue, props.maxValue],
})
const nameScale = scaleBand({
range: [props.height / 2, props.height / 2],
domain: [0],
})
return (
<div>
<svg height="{props.height}" width="{props.width}">
<g>
</g></svg></div>export default function DurationAxis(props: DurationAxisProps) {
const scale = scaleLinear({
range: [props.padding.left, props.width - props.padding.right],
round: true,
domain: [props.minValue, props.maxValue],
})
return (
<svg width="{props.width}" height="{props.height}">
secondsToDurationString(v.valueOf())}
tickLabelProps={() => ({
dy: "-0.75em",
textAnchor: "middle",
fontSize: 12,</svg>function DurationBoxPlot(props: DurationBoxPlotProps) {
const scale = scaleLinear({
range: [props.padding.left, props.width - props.padding.right],
round: true,
domain: [props.minValue, props.maxValue],
})
const nameScale = scaleBand({
range: [props.height / 2, props.height / 2],
domain: [0],
})
return (
<div>
<svg height="{props.height}" width="{props.width}">
<g>
</g></svg></div>
