victory#VictoryArea JavaScript Examples
The following examples show how to use
victory#VictoryArea.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Chart.js From web with GNU General Public License v3.0 | 5 votes |
|
Chart = ({ data, footer, header }) => {
if (not(data)) {
return null;
}
if (data.every(value => not(value))) {
return null;
}
const parsedData = data && data.length > 2 ? data.slice(0, 2) : data;
const renderData = parsedData.map((values, index) => {
const points = values.map((y, x) => ({
x,
y
}));
return (
<VictoryArea
data={points}
height={80}
// eslint-disable-next-line
key={index}
labels={({ datum }) => (parsedData.length >= 2 ? null : `+ ${numberWithSpaces(datum.y)}`)}
labelComponent={<VictoryLabel renderInPortal verticalAnchor="middle" textAnchor="end" />}
style={styles[index]}
/>
);
});
return (
<Styled.Wrapper>
<Styled.Header>
<Small color={Color.lightGray}>{header}</Small>
</Styled.Header>
{/* Number of values is provided by props in order to display only the last value on the chart */}
{/* All data elements should have the same length at the moment (14 days) */}
<Styled.Chart numberOfValues={data[0].length}>
<VictoryChart height={80} padding={{ top: 15 }}>
{renderData}
<VictoryAxis style={{ axis: { stroke: Color.white } }} />
</VictoryChart>
</Styled.Chart>
<Styled.Footer>
<Small color={Color.lightGray}>{footer}</Small>
</Styled.Footer>
</Styled.Wrapper>
);
}
Example #2
| Source File: NetWorthGraph.js From actual with MIT License | 5 votes |
|
function NetWorthGraph({ style, start, end, graphData, compact }) {
const Chart = compact ? VictoryGroup : VictoryChart;
return (
<Container style={[style, compact && { height: 'auto' }]}>
{(width, height, portalHost) =>
graphData && (
<Chart
scale={{ x: 'time' }}
theme={theme}
domainPadding={{ x: 0, y: 10 }}
width={width}
height={height}
containerComponent={
<VictoryVoronoiContainer voronoiDimension="x" />
}
padding={
compact && {
top: 0,
bottom: 0,
left: 0,
right: 0
}
}
>
<Area
start={graphData.start}
end={graphData.end}
data={graphData.data}
/>
{React.createElement(
graphData.data.length === 1 ? VictoryBar : VictoryArea,
{
data: graphData.data,
labelComponent: <Tooltip portalHost={portalHost} />,
labels: x => x.premadeLabel,
style: {
data:
graphData.data.length === 1
? { width: 50 }
: {
clipPath: 'url(#positive)',
fill: 'url(#positive-gradient)'
}
}
}
)}
{graphData.data.length > 1 && (
<VictoryArea
data={graphData.data}
style={{
data: {
clipPath: 'url(#negative)',
fill: 'url(#negative-gradient)',
stroke: theme.colors.red,
strokeLinejoin: 'round'
}
}}
/>
)}
{!compact && (
<VictoryAxis
tickFormat={x => d.format(x, "MMM ''yy")}
tickValues={graphData.data.map(item => item.x)}
tickCount={Math.min(5, graphData.data.length)}
offsetY={50}
/>
)}
{!compact && (
<VictoryAxis dependentAxis crossAxis={!graphData.hasNegative} />
)}
</Chart>
)
}
</Container>
);
}
Example #3
| Source File: historical_price_card.js From astroport-lbp-frontend with MIT License | 4 votes |
|
function HistoricalPriceCard({ className, pair, saleTokenInfo, usdPrice, style }) {
const nativeTokenAssetInfo = nativeTokenFromPair(pair.asset_infos);
const nativeSymbol = NATIVE_TOKEN_SYMBOLS[nativeTokenAssetInfo.info.native_token.denom];
const [chartWrapperRef, chartWrapperBounds] = useMeasure();
const [chartSVGWidth, setChartSVGWidth] = useState();
const [chartSVGHeight, setChartSVGHeight] = useState();
const [data, setData] = useState();
const [interval, setInterval] = useState(INTERVALS[INTERVALS.length-1].minutes);
const [scale, setScale] = useState('linear');
const [fetchingNewData, setFetchingNewData] = useState();
useRefreshingEffect((isRefreshing) => {
setFetchingNewData(!isRefreshing);
const fetchData = async() => {
const { data } = await apolloClient.query({
fetchPolicy: 'no-cache',
query: PRICE_QUERY,
variables: {
// TODO: Replace with actual contract address
contractAddress: 'terra15gwkyepfc6xgca5t5zefzwy42uts8l2m4g40k6', // pair.contract_addr
from: Date.now() - INTERVALS_TO_QUERY * interval * 60 * 1000,
to: Date.now(),
interval: interval // in minutes
}
});
setData(data.asset.prices.history.map(
({ timestamp, price }) => ({ timestamp, price: parseFloat(price) })
));
setFetchingNewData(false);
}
fetchData();
}, 60_000, [pair, interval]);
// Match aspect ratio of container (which grows to fill the card)
useEffect(() => {
if(chartWrapperBounds.width > 0) {
setChartSVGWidth(chartWrapperBounds.width);
}
if(chartWrapperBounds.height > 0) {
setChartSVGHeight(chartWrapperBounds.height);
}
}, [chartWrapperBounds.width, chartWrapperBounds.height]);
const prices = useMemo(() => data?.map(({ price }) => price), [data]);
const areaDataStyle = {
stroke: 'var(--theme-historical-price-chart-line-color)',
strokeWidth: 2,
fill: 'url(#fillGradient)'
}
return (
<Card className={classNames('py-8 px-12 flex flex-col historical-price-card', className)} style={style}>
<div className="flex justify-between">
<h2 className="font-bold">
{nativeSymbol} / {saleTokenInfo.symbol}
</h2>
{
usdPrice &&
<h3 className="font-bold text-lg">
{formatUSD(usdPrice)}
</h3>
}
</div>
<div className="flex justify-between my-4">
<OptionsGroup
options={[
{
value: 'linear',
label: 'Lin'
},
{
value: 'log',
label: 'Log'
}
]}
selected={scale}
onOptionSelect={setScale}
/>
<OptionsGroup
options={INTERVALS.map(({minutes: value, label}) => ({ value, label }))}
selected={interval}
onOptionSelect={setInterval}
className="mr-4"
/>
</div>
<svg className="h-0">
<defs>
<linearGradient id="fillGradient"
x1="0%"
x2="0%"
y1="0%"
y2="100%"
>
<stop offset="0%" stopOpacity="0.5" className="from-stop" />
<stop offset="50%" stopOpacity="0" className="to-stop" />
</linearGradient>
</defs>
</svg>
<div ref={chartWrapperRef} className={classNames('flex-grow transition-opacity flex items-center', { 'opacity-50': fetchingNewData })}>
{
chartSVGWidth && chartSVGHeight && data &&
<Chart
width={chartSVGWidth}
height={chartSVGHeight}
padding={{ top: 30, left: 45, right: 0, bottom: 40 }}
scale={{ x: 'linear', y: scale }}
minDomain={{ y: Math.min(...prices)*0.98 }}
maxDomain={{ y: Math.max(...prices)*1.02 }}
xAxis={{
tickFormat: timeString,
tickCount: 12
}}
yAxis={{
tickFormat: (v) => formatNumber(v, { minimumFractionDigits: 2 }),
tickCount: 8
}}
>
<VictoryArea
data={data}
x="timestamp"
y="price"
style={{data: areaDataStyle}}
/>
</Chart>
}
{
!data && <LoadingIndicator className="w-12 h-12 mx-auto" />
}
</div>
</Card>
);
}
Example #4
| Source File: Charts.js From ReactSourceCodeAnalyze with MIT License | 4 votes |
|
render() {
const streamData = this.props.data;
return (
<div>
<div style={{display: 'flex'}}>
<VictoryChart
theme={VictoryTheme.material}
width={400}
height={400}
style={{
parent: {
backgroundColor: '#222',
},
}}>
<VictoryAxis
style={{
axis: {stroke: 'white'},
tickLabels: {fill: 'white'},
}}
/>
<VictoryAxis
style={{
axis: {stroke: 'white'},
tickLabels: {fill: 'white'},
}}
dependentAxis
/>
<VictoryScatter
data={streamData[0]}
size={6}
style={{
data: {
fill: d => colors[d.x % 5],
},
}}
/>
</VictoryChart>
<VictoryChart
theme={VictoryTheme.material}
width={400}
height={400}
style={{
parent: {
backgroundColor: '#222',
},
}}
domainPadding={[20, 20]}>
<VictoryAxis
style={{
axis: {stroke: 'white'},
tickLabels: {fill: 'white'},
}}
/>
<VictoryAxis
style={{
axis: {stroke: 'white'},
tickLabels: {fill: 'white'},
}}
dependentAxis
/>
<VictoryBar
data={streamData[0]}
style={{
data: {
fill: d => colors[d.x % 5],
stroke: 'none',
padding: 5,
},
}}
/>
</VictoryChart>
</div>
<div
style={{
display: 'flex',
position: 'relative',
top: '-50px',
}}>
<VictoryChart
theme={VictoryTheme.material}
width={800}
height={350}
style={{
parent: {
backgroundColor: '#222',
},
}}>
<VictoryAxis
style={{
axis: {stroke: 'white'},
tickLabels: {fill: 'white'},
}}
/>
<VictoryAxis
style={{
axis: {stroke: 'white'},
tickLabels: {fill: 'white'},
}}
dependentAxis
/>
<VictoryStack>
{streamData.map((data, i) => (
<VictoryArea key={i} data={data} colorScale={colors} />
))}
</VictoryStack>
</VictoryChart>
</div>
</div>
);
}
