victory#VictoryGroup JavaScript Examples
The following examples show how to use
victory#VictoryGroup.
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: Graph.jsx From covid-trials-dashboard with MIT License | 6 votes |
|
Graph = () => {
return (
<div>
<VictoryChart
domainPadding={{ x: 50 }}
width={500}
height={500}
theme={VictoryTheme.material}
>
<VictoryGroup
horizontal
offset={20}
style={{ data: { width: 15 } }}
colorScale={[sadBlue, magenta, yellow, tourquese, green]}
>
{/* Need to bing the label data to the VictoryLabel for each bar */}
{vaccinesData.map((mockData, i) => (
<VictoryStack key={i}>
{mockData.map((data, index) => {
return <VictoryBar key={index} data={data} />
})}
</VictoryStack>
))}
</VictoryGroup>
</VictoryChart>
</div>
)
}
Example #2
| Source File: CashFlowGraph.js From actual with MIT License | 5 votes |
|
function CashFlowGraph({ style, start, end, graphData, isConcise, compact }) {
return (
<Container>
{(width, height, portalHost) =>
graphData && (
<VictoryChart
scale={{ x: 'time' }}
theme={theme}
domainPadding={10}
width={width}
height={height}
containerComponent={
<VictoryVoronoiContainer voronoiDimension="x" />
}
>
<VictoryGroup>
<VictoryBar
data={graphData.expenses}
style={{ data: { fill: theme.colors.red } }}
/>
<VictoryBar data={graphData.income} />
</VictoryGroup>
<VictoryLine
data={graphData.balances}
labelComponent={<Tooltip portalHost={portalHost} />}
labels={x => x.premadeLabel}
style={{
data: { stroke: colors.n5 }
}}
/>
<VictoryAxis
tickFormat={x => d.format(x, isConcise ? "MMM ''yy" : 'MMM d')}
tickValues={graphData.balances.map(item => item.x)}
tickCount={Math.min(5, graphData.balances.length)}
offsetY={50}
/>
<VictoryAxis dependentAxis crossAxis={false} />
</VictoryChart>
)
}
</Container>
);
}
Example #3
| 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 #4
| Source File: Overview.js From actual with MIT License | 4 votes |
|
function CashFlowCard() {
const end = monthUtils.currentDay();
const start = monthUtils.currentMonth() + '-01';
const data = useReport('cash_flow_simple', useArgsMemo(simpleCashFlow)(start, end));
if (!data) {
return null;
}
const { graphData } = data;
const expense = -(graphData.expense || 0);
const income = graphData.income || 0;
return (
<Card flex={1} to="/reports/cash-flow">
<View style={{ flex: 1 }}>
<View style={{ flexDirection: 'row', padding: 20 }}>
<View style={{ flex: 1 }}>
<Block
style={[styles.mediumText, { fontWeight: 500, marginBottom: 5 }]}
>
Cash Flow
</Block>
<DateRange start={start} end={end} />
</View>
<View style={{ textAlign: 'right' }}>
<Change
amount={income - expense}
style={{ color: colors.n6, fontWeight: 300 }}
/>
</View>
</View>
<Container style={{ height: 'auto', flex: 1 }}>
{(width, height, portalHost) => (
<VictoryGroup
colorScale={[theme.colors.blue, theme.colors.red]}
width={100}
height={height}
theme={theme}
domain={{
x: [0, 100],
y: [0, Math.max(income, expense, 100)]
}}
containerComponent={
<VictoryVoronoiContainer voronoiDimension="x" />
}
labelComponent={
<Tooltip
portalHost={portalHost}
offsetX={(width - 100) / 2}
offsetY={y => (y + 40 > height ? height - 40 : y)}
light={true}
forceActive={true}
style={{
padding: 0
}}
/>
}
padding={{
top: 0,
bottom: 0,
left: 0,
right: 0
}}
>
<VictoryBar
data={[
{
x: 30,
y: Math.max(income, 5),
width: 20,
premadeLabel: (
<div style={{ textAlign: 'right' }}>
<div>Income</div>
<div>{integerToCurrency(income)}</div>
</div>
),
labelPosition: 'left'
}
]}
labels={d => d.premadeLabel}
/>
<VictoryBar
data={[
{
x: 60,
y: Math.max(expense, 5),
width: 20,
premadeLabel: (
<div>
<div>Expenses</div>
<div>{integerToCurrency(expense)}</div>
</div>
),
labelPosition: 'right',
fill: theme.colors.red
}
]}
labels={d => d.premadeLabel}
/>
</VictoryGroup>
)}
</Container>
</View>
</Card>
);
}
