victory#VictoryTheme JavaScript Examples
The following examples show how to use
victory#VictoryTheme.
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: MonthlyScatter.js From Full-Stack-React-Projects-Second-Edition with MIT License | 5 votes |
|
export default function MonthlyScatter() {
const classes = useStyles()
const [error, setError] = useState('')
const [plot, setPlot] = useState([])
const [month, setMonth] = useState(new Date())
const jwt = auth.isAuthenticated()
useEffect(() => {
const abortController = new AbortController()
const signal = abortController.signal
plotExpenses({month: month},{t: jwt.token}, signal).then((data) => {
if (data.error) {
setError(data.error)
} else {
setPlot(data)
}
})
return function cleanup(){
abortController.abort()
}
}, [])
const handleDateChange = date => {
setMonth(date)
plotExpenses({month: date},{t: jwt.token}).then((data) => {
if (data.error) {
setError(data.error)
} else {
setPlot(data)
}
})
}
return (
<div style={{marginBottom: 20}}>
<Typography variant="h6" className={classes.title}>Expenses scattered over </Typography>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker value={month} onChange={handleDateChange} views={["year", "month"]}
disableFuture
label="Month"
animateYearScrolling
variant="inline"/>
</MuiPickersUtilsProvider>
<VictoryChart
theme={VictoryTheme.material}
height={400}
width={550}
domainPadding={40}
>
<VictoryScatter
style={{
data: { fill: "#01579b", stroke: "#69f0ae", strokeWidth: 2 },
labels: { fill: "#01579b", fontSize: 10, padding:8}
}}
bubbleProperty="y"
maxBubbleSize={15}
minBubbleSize={5}
labels={({ datum }) => `$${datum.y} on ${datum.x}th`}
labelComponent={<VictoryTooltip/>}
data={plot}
domain={{x: [0, 31]}}
/>
<VictoryLabel
textAnchor="middle"
style={{ fontSize: 14, fill: '#8b8b8b' }}
x={270} y={390}
text={`day of month`}
/>
<VictoryLabel
textAnchor="middle"
style={{ fontSize: 14, fill: '#8b8b8b' }}
x={6} y={190}
angle = {270}
text={`Amount ($)`}
/>
</VictoryChart>
</div>
)
}
Example #3
| Source File: YearlyBar.js From Full-Stack-React-Projects-Second-Edition with MIT License | 5 votes |
|
export default function Reports() {
const classes = useStyles()
const [error, setError] = useState('')
const [year, setYear] = useState(new Date())
const [yearlyExpense, setYearlyExpense] = useState([])
const jwt = auth.isAuthenticated()
const monthStrings = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
useEffect(() => {
const abortController = new AbortController()
const signal = abortController.signal
yearlyExpenses({year: year.getFullYear()},{t: jwt.token}, signal).then((data) => {
if (data.error) {
setError(data.error)
}
setYearlyExpense(data)
})
return function cleanup(){
abortController.abort()
}
}, [])
const handleDateChange = date => {
setYear(date)
yearlyExpenses({year: date.getFullYear()},{t: jwt.token}).then((data) => {
if (data.error) {
setError(data.error)
}
setYearlyExpense(data)
})
}
return (
<div>
<Typography variant="h6" className={classes.title}>Your monthly expenditures in</Typography>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker value={year} onChange={handleDateChange} views={["year"]}
disableFuture
label="Year"
animateYearScrolling
variant="inline"/>
</MuiPickersUtilsProvider>
<VictoryChart
theme={VictoryTheme.material}
domainPadding={10}
height={300}
width={450}>
<VictoryAxis/>
<VictoryBar
categories={{
x: monthStrings
}}
style={{ data: { fill: "#69f0ae", width: 20 }, labels: {fill: "#01579b"} }}
data={yearlyExpense.monthTot}
x={monthStrings['x']}
domain={{x: [0, 13]}}
labels={({ datum }) => `$${datum.y}`}
/>
</VictoryChart>
</div>
)
}
Example #4
| Source File: CategoryPie.js From Full-Stack-React-Projects-Second-Edition with MIT License | 4 votes |
|
export default function Reports() {
const classes = useStyles()
const [error, setError] = useState('')
const [expenses, setExpenses] = useState([])
const jwt = auth.isAuthenticated()
const date = new Date(), y = date.getFullYear(), m = date.getMonth()
const [firstDay, setFirstDay] = useState(new Date(y, m, 1))
const [lastDay, setLastDay] = useState(new Date(y, m + 1, 0))
useEffect(() => {
const abortController = new AbortController()
const signal = abortController.signal
averageCategories({firstDay: firstDay, lastDay: lastDay},{t: jwt.token}, signal).then((data) => {
if (data.error) {
setError(data.error)
} else {
setExpenses(data)
}
})
return function cleanup(){
abortController.abort()
}
}, [])
const handleDateChange = name => date => {
if(name=='firstDay'){
setFirstDay(date)
}else{
setLastDay(date)
}
}
const searchClicked = () => {
averageCategories({firstDay: firstDay, lastDay: lastDay},{t: jwt.token}).then((data) => {
if (data.error) {
setRedirectToSignin(true)
} else {
setExpenses(data)
}
})
}
return (
<div>
<div className={classes.search}>
<Typography variant="h6" className={classes.title}>Expenditures per category </Typography>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker
disableFuture
format="dd/MM/yyyy"
label="FROM"
views={["year", "month", "date"]}
value={firstDay}
className={classes.textField}
onChange={handleDateChange('firstDay')}
/>
<DatePicker
format="dd/MM/yyyy"
label="TO"
views={["year", "month", "date"]}
value={lastDay}
className={classes.textField}
onChange={handleDateChange('lastDay')}
/>
</MuiPickersUtilsProvider>
<Button variant="contained" color="secondary" onClick={searchClicked}>GO</Button>
</div>
<div style={{width: 550, margin: 'auto'}}>
<svg viewBox="0 0 320 320">
<VictoryPie standalone={false} data={expenses.monthAVG} innerRadius={50} theme={VictoryTheme.material}
labelRadius={({ innerRadius }) => innerRadius + 14 }
labelComponent={<VictoryLabel angle={0} style={[{
fontSize: '11px',
fill: '#0f0f0f'
},
{
fontSize: '10px',
fill: '#013157'
}]} text={( {datum} ) => `${datum.x}\n $${datum.y}`}/>}
/>
<VictoryLabel
textAnchor="middle"
style={{ fontSize: 14, fill: '#8b8b8b' }}
x={175} y={170}
text={`Spent \nper category`}
/>
</svg>
</div>
</div>
)
}
Example #5
| Source File: Search.js From medical-image-search with MIT No Attribution | 4 votes |
|
render() {
const { items, loading, negICD10s, posICD10s, searchQuery } = this.state
return (
<div className="App">
{
!!loading && (
<p>Searching...</p>
)
}
{
!loading && !items.length && (
<p>Sorry, no results.</p>
)
}
<Grid container devided='vertically'>
{
!loading && (
<Grid.Row columns={2} padded>
<Grid.Column>
<VictoryChart theme={VictoryTheme.material}>
<VictoryBar
horizontal
style={{ data: { fill: "Green" }, labels: { fontSize: 12 }}}
// labelComponent={<VictoryLabel textAnchor="end" dx={0} dy={10} />}
data={posICD10s}/>
<VictoryAxis tickFormat={() => ''} />
<VictoryLabel x={100} y={30} text="Positive ICD10 CMs" />
</VictoryChart>
</Grid.Column>
<Grid.Column>
<VictoryChart theme={VictoryTheme.material}>
<VictoryBar
horizontal
style={{ data: { fill: "Red" }, labels: { fontSize: 12 } }}
labelComponent={<VictoryLabel textAnchor="start" dx={0} />}
data={negICD10s}/>
<VictoryAxis tickFormat={() => ''} />
<VictoryLabel x={100} y={30} text="Negative ICD10 CMs" />
</VictoryChart>
</Grid.Column>
</Grid.Row>
)
}
<Grid.Row columns={1} padded>
<Grid.Column><Header size='large'>Search Terms</Header></Grid.Column>
</Grid.Row>
<Grid.Row columns={1} padded>
<Grid.Column><Input
fluid
size='big'
icon='search'
onChange={this.onChange.bind(this)}
placeholder='Search for Findings in Radiology Report'
/></Grid.Column>
</Grid.Row>
{
!loading && items.map((item, index) => (
<Grid.Row columns={2}>
<Grid.Column>
<Header>Impression: {item.Impression}</Header>
<List horizontal>
{
item.Images.map(
(image,i) =>
<List.Item key={i}>
<Link to={`/Image/${image.ImageId}`}>
<S3Image key={i} imgKey={image.Key} level='public' theme={{ photoImg: { height: '200px', width: '200px' } }}/>
</Link>
</List.Item>
)
}
</List>
</Grid.Column>
<Grid.Column>
<Segment.Group horizontal>
<Segment padded color='yellow'>
<Header>Signs</Header>
{item.PositiveSigns.map(
(posSigns, i) =>
<List.Item key={i}>
<p style={{ color: 'green' }}>{posSigns}</p>
</List.Item>
)}
{item.NegativeSigns.map(
(negSigns, i) =>
<List.Item key={i}>
<p style={{ color: 'red' }}>{negSigns}</p>
</List.Item>
)}
</Segment>
<Segment padded color='yellow'>
<Header>Diagnoses</Header>
{item.PositiveDiagnoses.map(
(positiveDiag, i) =>
<List.Item key={i}>
<p style={{ color: 'green' }}>{positiveDiag}</p>
</List.Item>
)}
{item.NegativeDiagnoses.map(
(negativeDiag, i) =>
<List.Item key={i}>
<p style={{ color: 'red' }}>{negativeDiag}</p>
</List.Item>
)}
</Segment>
<Segment padded color='yellow'>
<Header>Symptoms</Header>
{item.PositiveSymptoms.map(
(positiveSymp, i) =>
<List.Item key={i}>
<p style={{ color: 'green' }}>{positiveSymp}</p>
</List.Item>
)}
{item.NegativeSymptoms.map(
(negativeSymp, i) =>
<List.Item key={i}>
<p style={{ color: 'red' }}>{negativeSymp}</p>
</List.Item>
)}
</Segment>
</Segment.Group>
</Grid.Column>
</Grid.Row>
))
}
</Grid>
</div>
);
}
Example #6
| 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>
);
}
