How to use the @vx/scale.scaleTime function in @vx/scale
To help you get started, we’ve selected a few @vx/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.
hshoff / vx / packages / vx-demo / components / tiles / brush-i.js View on Github 
// accessors
const x = d => new Date(d.date);
const y = d => d.close;
// scales
const xScaleContext = scaleTime({
range: [0, contextWidth],
domain: extent(data, x),
clamp: true,
});
const yScaleContext = scaleLinear({
range: [contextHeight, 0],
domain: [0, max(data, y)],
nice: true,
});
const xScaleFocus = scaleTime({
range: [0, contextWidth],
domain: extent(data, x),
clamp: true,
});
const yScaleFocus = scaleLinear({
range: [focusHeight, 0],
domain: [0, max(data, y)],
nice: true,
});
const invertX = ({ x, tx, sx }) => (x - tx) / sx;
class Brush extends React.Component {
constructor(props) {
super(props);
this.state = {export default ({ width, height }) => {
// bounds
const xMax = width;
const yMax = height / 8;
// scales
const xScale = scaleTime({
range: [0, xMax],
domain: extent(data, x),
});
const yScale = scaleLinear({
range: [yMax, 0],
domain: [0, max(data, y)],
});
return (
<svg height="{height}" width="{width}">
<rect rx="{14}" fill="#242424" height="{height}" width="{width}" y="{0}" x="{0}"></rect>
{xMax > 8 &&
series.map((datum, i) => {
return (
</svg>export default ({ margin, width, height }) => {
const stock = appleStock;
// bounds
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
// accessors
const xStock = d => new Date(d.date);
const yStock = d => d.close;
// scales
const xStockScale = scaleTime({
range: [0, xMax],
domain: extent(stock, xStock),
});
const yStockScale = scaleLinear({
range: [yMax, 0],
domain: [0, max(stock, yStock)],
nice: true,
});
return (
<svg width="{width}" height="{height}">
</svg>height -
contextHeight -
contextMargin.top -
contextMargin.bottom -
focusMargin.top -
focusMargin.bottom;
// data
const data = appleStock;
// accessors
const x = d => new Date(d.date);
const y = d => d.close;
// scales
const xScaleContext = scaleTime({
range: [0, contextWidth],
domain: extent(data, x),
clamp: true,
});
const yScaleContext = scaleLinear({
range: [contextHeight, 0],
domain: [0, max(data, y)],
nice: true,
});
const xScaleFocus = scaleTime({
range: [0, contextWidth],
domain: extent(data, x),
clamp: true,
});
const yScaleFocus = scaleLinear({
range: [focusHeight, 0],const xMax = Math.max(width - margin.left - margin.right, 0);
const yMax = Math.max(height * 0.6 - margin.top - margin.bottom, 0);
const xBrushMax = Math.max(width - brushMargin.left - brushMargin.right, 0);
const yBrushMax = Math.max(120 - brushMargin.top - brushMargin.bottom, 0);
// scales
const xScale = scaleTime({
range: [0, xMax],
domain: extent(filteredStock, xStock),
});
const yScale = scaleLinear({
range: [yMax, 0],
domain: [0, max(filteredStock, yStock) + yMax / 3],
nice: true,
});
const xBrushScale = scaleTime({
range: [0, xBrushMax],
domain: extent(stock, xStock),
});
const yBrushScale = scaleLinear({
range: [yBrushMax, 0],
domain: [0, max(stock, yStock) + yBrushMax / 3],
nice: true,
});
return (
<div>
<svg height="{height}" width="{width}">
<rect rx="{14}" fill="#32deaa" height="{height}" width="{width}" y="{0}" x="{0}"></rect>
</svg></div>export default withSelected(({ selected, updateSelected, width, height, margin }) => {
// bounds
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
// accessors
const x = d => parseDate(d.date);
const y = d => +d.temperature;
// scales
const xScale = scaleTime({
range: [0, xMax],
domain: extent(rawData, x),
});
const yScale = scaleLinear({
range: [yMax, 0],
domain: extent(
selected.slice().reduce((ret, c) => {
return ret.concat(getCity(c).values);
}, []),
y,
),
});
const color = scaleOrdinal({
range: ['#3b99d8', '#239f85', '#9a5cb4'],
domain: cityNames,
});const margin = pMargin || {
left: 0,
right: 0,
top: 0,
bottom: 0
}
if (width < 10) return null
const xMax = width - margin.left - margin.right
const yMax = height - margin.top - margin.bottom
const xStock = d => new Date(d[0] * 1000)
const yStock = d => d[1]
const bisectDate = bisector(d => new Date(d[0] * 1000)).left
const xScale = scaleTime({
range: [0, xMax],
domain: extent(data, xStock)
})
const yScale = scaleLinear({
range: [yMax, 70], // 70px margin cause tooltip needs space
domain: [(min(data, yStock) - (min(data, yStock) / 100 * 10)), max(data, yStock)],
nice: true
})
return (
<div style="{{height:">
<svg height="{height}" width="{width}">
</svg></div>export default ({ width, height, margin }) => {
if (width < 10) return null;
// bounds
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
// scales
const xScale = scaleTime({
range: [0, xMax],
domain: extent(data, x),
});
const yScale = scaleLinear({
range: [yMax, 0],
domain: [0, Math.max(...data.map(y))],
nice: true,
});
return (
<svg height="{height}" width="{width}">
<rect rx="{14}" fill="#f4419f" height="{height}" width="{width}" y="{0}" x="{0}"></rect>
</svg>maxDate,
minDate,
width,
height,
tooltipLeft,
tooltipData,
showTooltip
}) => {
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
const points = entityIds
.map((d: string) => entityDiscoveryTimes[d].map(date => [d, date]))
.flatMap(x => x) as [string, DateTime][];
const xScale = scaleTime({
range: [0, xMax],
domain: [minDate.toJSDate(), maxDate.toJSDate()]
});
const yScale = scaleBand({
range: [yMax, 0],
domain: entityIds.slice().reverse(), // Need to reverse (without mutation) to get in the right order
padding: 0.2
});
const onDeviceNameClick = (entityName: string | number | undefined) => () => {
const entityId = Object.keys(entityIdNameMap).reduce(
(acc: undefined | string, currentEntityId) => {
return acc !== undefined
? acc
: entityIdNameMap[currentEntityId] === entityNamerender() {
const { chart, quote } = this.props;
let xScale;
let yScale;
if (chart != null) {
const deviationYFudge = deviation(chart, y) / 2;
xScale = scaleTime({
range: [0, xMax],
domain: extent(chart, x),
});
yScale = scaleLinear({
range: [yMax, 0],
domain: [min(chart, y) - deviationYFudge, max(chart, y) + deviationYFudge],
});
}
return (
<h2>
{quote == null ? '...' : quote.companyName} ({this.props.match.params.symbol})
</h2>
<h3>
<small>{quote == null ? '...' : quote.latestPrice}</small>{' '}
</h3>
