Hydrogen React Components
How to use
import { AreaChart } from '@hydrogenapi/react-components'
function App() {
return (
<div className="App">
<header className="App-header">
<AreaChart
width={800}
height={400}
data={[
{ date: new Date('2019-01-01T00:00:00.000Z'), price: { lower: 0, low: 0, average: 0, high: 0, higher: 0 } },
{ date: new Date('2019-01-01T01:00:00.000Z'), price: { lower: 0.3 * 1000, low: 0.6 * 1000, average: 1000, high: 1.4 * 1000, higher: 1.7 * 1000 } },
{ date: new Date('2019-01-01T02:00:00.000Z'), price: { lower: 0.3 * 2500, low: 0.6 * 2500, average: 2500, high: 1.4 * 2500, higher: 1.7 * 2500 } },
{ date: new Date('2019-01-01T03:00:00.000Z'), price: { lower: 0.3 * 4500, low: 0.6 * 4500, average: 4500, high: 1.4 * 4500, higher: 1.7 * 4500 } },
{ date: new Date('2019-01-01T04:00:00.000Z'), price: { lower: 0.3 * 7000, low: 0.6 * 7000, average: 7000, high: 1.4 * 7000, higher: 1.7 * 7000 } },
{ date: new Date('2019-01-01T05:00:00.000Z'), price: { lower: 0.3 * 10000, low: 0.6 * 10000, average: 10000, high: 1.4 * 10000, higher: 1.7 * 10000 } }
]}
>
</AreaChart>
</header>
</div>
);
}
https://github.com/hydrogen-dev/react-components-example
Example React App:Charts
Small charts
Small Area Chart
<AreaChart small width={100} height={50} data={[
{ date: new Date('2019-01-01T00:00:00.000Z'), price: { deposits: 10000 } },
{ date: new Date('2019-02-01T00:00:00.000Z'), price: { deposits: 13000 } },
{ date: new Date('2019-03-01T00:00:00.000Z'), price: { deposits: 18000 } }
]}
/>
Small Line Chart
*Must use ChartWrapperForLineChart
<ChartWrapperForLineChart small width={200} height={100} data={[
{ date: new Date('2019-01-01T00:00:00.000Z'), price: { one: 5000 } },
{ date: new Date('2019-01-02T00:00:00.000Z'), price: { one: 2800 } },
{ date: new Date('2019-01-03T00:00:00.000Z'), price: { one: 9000 } },
{ date: new Date('2019-01-04T00:00:00.000Z'), price: { one: 8600 } },
{ date: new Date('2019-01-05T00:00:00.000Z'), price: { one: 7800 } }
]}
>
<LineChart over="one" curve="cardinal" color="#3ba669" />
</ChartWrapperForLineChart>
Gauge Chart
<GaugeChart value={0.87} />
Large Charts
AreaChart
<AreaChart
width={800}
height={400}
data={[
{ date: new Date('2019-01-01T00:00:00.000Z'), price: { lower: 0, low: 0, average: 0, high: 0, higher: 0 } },
{ date: new Date('2019-01-01T01:00:00.000Z'), price: { lower: 0.3 * 1000, low: 0.6 * 1000, average: 1000, high: 1.4 * 1000, higher: 1.7 * 1000 } },
{ date: new Date('2019-01-01T02:00:00.000Z'), price: { lower: 0.3 * 2500, low: 0.6 * 2500, average: 2500, high: 1.4 * 2500, higher: 1.7 * 2500 } },
{ date: new Date('2019-01-01T03:00:00.000Z'), price: { lower: 0.3 * 4500, low: 0.6 * 4500, average: 4500, high: 1.4 * 4500, higher: 1.7 * 4500 } },
{ date: new Date('2019-01-01T04:00:00.000Z'), price: { lower: 0.3 * 7000, low: 0.6 * 7000, average: 7000, high: 1.4 * 7000, higher: 1.7 * 7000 } },
{ date: new Date('2019-01-01T05:00:00.000Z'), price: { lower: 0.3 * 10000, low: 0.6 * 10000, average: 10000, high: 1.4 * 10000, higher: 1.7 * 10000 } }
]}
>
</AreaChart>
AreaChart2
<AreaChart2
width={800}
height={400}
data={[
{ date: new Date('2019-01-01T00:00:00.000Z'), price: { deposits: 10000, earnings: 10000 + 7000 } },
{ date: new Date('2019-02-01T00:00:00.000Z'), price: { deposits: 13000, earnings: 13000 + 8000 } },
{ date: new Date('2019-03-01T00:00:00.000Z'), price: { deposits: 18000, earnings: 18000 + 8000 } },
{ date: new Date('2019-04-01T00:00:00.000Z'), price: { deposits: 20000, earnings: 20000 + 9000 } }
]}
>
</AreaChart2>
Donut
*To display legend:
legend="left"
legend="bottom"
*To display floating labels, add prop showFloatingLabels
:
<DonutChart
width={600}
height={400}
data={[
{ label: 'Label 1', value: 0.1, color: '#ffa600' },
{ label: 'Label 2', value: 0.2, color: '#f95d6a' },
{ label: 'Label 3', value: 0.2, color: '#a05195' },
{ label: 'Label 4', value: 0.2, color: '#665191' },
{ label: 'Label 5', value: 0.3, color: '#2f4b7c' }
]}
showFloatingLabels
legend="left"
/>
BarChart
<BarChart
width={800}
height={400}
data={[
{ date: new Date('2019-01-01T00:00:00.000Z'), price: { one: 2400, two: 800, sum: 3200 } },
{ date: new Date('2019-02-01T00:00:00.000Z'), price: { one: 3200, two: 800, sum: 4000 } },
{ date: new Date('2019-03-01T00:00:00.000Z'), price: { one: 4000, two: 800, sum: 4800 } },
{ date: new Date('2019-04-01T00:00:00.000Z'), price: { one: 400, two: 600, sum: 1000 } },
{ date: new Date('2019-05-01T00:00:00.000Z'), price: { one: 400, two: 600, sum: 1000 } },
{ date: new Date('2019-06-01T00:00:00.000Z'), price: { one: 400, two: 600, sum: 1000 } },
{ date: new Date('2019-07-01T00:00:00.000Z'), price: { one: 400, two: 600, sum: 1000 } },
{ date: new Date('2019-08-01T00:00:00.000Z'), price: { one: 400, two: 600, sum: 1000 } },
{ date: new Date('2019-09-01T00:00:00.000Z'), price: { one: 400, two: 600, sum: 1000 } },
{ date: new Date('2019-10-01T00:00:00.000Z'), price: { one: 400, two: 600, sum: 1000 } },
{ date: new Date('2019-11-01T00:00:00.000Z'), price: { one: 400, two: 600, sum: 1000 } },
{ date: new Date('2019-12-01T00:00:00.000Z'), price: { one: 400, two: 600, sum: 1000 } }
]}
colors={['#d45087', '#665191']}
>
</BarChart>
Scatterplot Chart
<ScatterChart
width={800}
height={400}
data={[
{ date: new Date('2019-01-01T00:00:00.000Z'), price: { one: 100 } },
{ date: new Date('2019-01-01T01:00:00.000Z'), price: { one: 200 } },
{ date: new Date('2019-01-01T02:00:00.000Z'), price: { one: 300 } },
{ date: new Date('2019-01-01T03:00:00.000Z'), price: { one: 250 } },
{ date: new Date('2019-01-01T04:00:00.000Z'), price: { one: 300 } },
{ date: new Date('2019-01-01T05:00:00.000Z'), price: { one: 500 } },
{ date: new Date('2019-01-01T06:00:00.000Z'), price: { one: 170 } }
]}
>
</ScatterChart>
Line Chart
*Must use ChartWrapperForLineChart
, Hover
and ChartTooltip
components
import { Hover, ChartTooltip, ChartWrapperForLineChart, LineChart } from '@hydrogenapi/react-components'
<ChartWrapperForLineChart
width={800}
height={400}
data={[
{ date: new Date('2019-01-01T00:00:00.000Z'), price: { one: 5000, two: 5500 } },
{ date: new Date('2019-01-02T00:00:00.000Z'), price: { one: 2800, two: 3000 } },
{ date: new Date('2019-01-03T00:00:00.000Z'), price: { one: 9000, two: 5400 } },
{ date: new Date('2019-01-04T00:00:00.000Z'), price: { one: 8600, two: 5200 } },
{ date: new Date('2019-01-05T00:00:00.000Z'), price: { one: 7800, two: 5000 } },
{ date: new Date('2019-01-06T00:00:00.000Z'), price: { one: 7800, two: 5000 } },
{ date: new Date('2019-01-07T00:00:00.000Z'), price: { one: 7800, two: 5000 } },
{ date: new Date('2019-01-08T00:00:00.000Z'), price: { one: 7800, two: 5000 } },
{ date: new Date('2019-01-09T00:00:00.000Z'), price: { one: 7800, two: 5000 } },
{ date: new Date('2019-01-10T00:00:00.000Z'), price: { one: 7800, two: 5000 } },
{ date: new Date('2019-01-11T00:00:00.000Z'), price: { one: 7800, two: 5000 } },
{ date: new Date('2019-01-12T00:00:00.000Z'), price: { one: 7800, two: 5000 } },
{ date: new Date('2019-01-13T00:00:00.000Z'), price: { one: 7800, two: 5000 } },
{ date: new Date('2019-01-14T00:00:00.000Z'), price: { one: 7800, two: 5000 } },
{ date: new Date('2019-01-15T00:00:00.000Z'), price: { one: 7800, two: 5000 } }
]}
>
<LineChart over="one" curve="cardinal" showPoints color="#a05195" />
<LineChart over="two" curve="cardinal" showPoints color="#ff7c43" />
<Hover
render={({ x, y, d }) =>
<g>
<ChartTooltip
x={x(d.date)}
y={y(d.price.one)}
>
${d.price.one}
</ChartTooltip>
<ChartTooltip
x={x(d.date)}
y={y(d.price.two)}
>
${d.price.two}
</ChartTooltip>
</g>
}
/>
</ChartWrapperForLineChart>
Components
*Below you will find information about each individual component and an example usage
*Include import '@hydrogenapi/react-components/build/bundle.css'
in app entry point for css
Button
<Button primary>Primary</Button>
<Button action="true">Action Button</Button>
<Button>Default</Button>
Button.propTypes = {
onClick: PropTypes.func,
primary: PropTypes.any,
action: PropTypes.string
}
Callouts
<Callout
buttonTextPrimary="Action Item 1"
buttonTextSecondary="Action Item 2"
primaryAction={() => alert('Primary')}
secondaryAction={() => alert('Secondary')}>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</Callout>
<Callout buttonTextPrimary="Action Item 1" small>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</Callout>
Callout.propTypes = {
primaryAction: PropTypes.func,
secondaryAction: PropTypes.func,
buttonTextPrimary: PropTypes.string,
buttonTextSecondary: PropTypes.string
}
Cells
<CellGroup>
<Cell id={1} value="Top" name="color" onChange={(v) => console.log(v.target.value)}>Top Cell</Cell>
<Cell id={2} value="Mid" name="color" onChange={(v) => console.log(v.target.value)}>Middle Cell</Cell>
<Cell id={3} value="Bot" name="color" onChange={(v) => console.log(v.target.value)}>Bottom Cell</Cell>
</CellGroup>
Cell.propTypes = {
onChange: PropTypes.func,
name: PropTypes.string,
checked: PropTypes.bool,
value: PropTypes.string,
id: PropTypes.node
}
Dropdown
<Dropdown
options={[{value: 'red', name: 'Red'}, {value: 'blue', name: 'Blue'}, {value: 'green', name: 'Green'}]}
label="Colors of Rainbow"
name="colors"
/>
Dropdown.propTypes = {
onChange: PropTypes.func,
name: PropTypes.string,
value: PropTypes.string,
options: PropTypes.any.isRequired
}
Horizontal Bar Graph
<VisualCardBarGraph
title="Savings Progress"
value1={64} subtitle1={'Subtitle1'}
value2={120} subtitle2={'Subtitle2'}
value3={100} subtitle3={'Subtitle3'}
/>
VisualCardBarGraph.propTypes = {
title: PropTypes.string,
value1: PropTypes.number.isRequired,
value2: PropTypes.number,
value3: PropTypes.number,
subtitle1: PropTypes.string.isRequired,
subtitle2: PropTypes.string,
subtitle3: PropTypes.string
}
Icons
*Size is a font-size property
<Icon size={30} name="analytics" />
Icon.propTypes = {
name: PropTypes.string.isRequired,
size: PropTypes.number
}
Insight Cards (responsive)
<InsightIconCard label='Education' value={230000} goal={400000} icon="education" />
<InsightProfileCard
profile="Investment Profile 1"
time="2-5 years"
best={132000}
worst={400}
average={3400}
onClick={() => alert('View Portfolio')}
/>
InsightIconCard.propTypes = {
icon: PropTypes.string,
label: PropTypes.string,
value: PropTypes.number,
goal: PropTypes.number,
onClick: PropTypes.func
}
InsightProfileCard.propTypes = {
profile: PropTypes.string,
time: PropTypes.string,
best: PropTypes.number,
worst: PropTypes.number,
onClick: PropTypes.func
}
Insight Tabs
<InsightTabsContainer onSelect={(tab) => console.log(tab)}>
<InsightTab label='Goal Name' balance={230000} tracking={true} />
<InsightTab label='Goal Name Long' balance={230000} tracking={true} />
</InsightTabsContainer>
InsightTab.propTypes = {
onClick: PropTypes.func,
menuClick: PropTypes.func,
label: PropTypes.string.isRequired,
balance: PropTypes.number.isRequired,
tracking: PropTypes.bool,
selected: PropTypes.bool
}
InsightTabsContainer.propTypes = {
onSelect: PropTypes.func
}
Lists and Tables
Simple Table
<SimpleTableTable>
<SimpleTableTableRow>
<SimpleTableTableHeader>Title of Column1</SimpleTableTableHeader>
<SimpleTableTableHeader>Title of Column2</SimpleTableTableHeader>
</SimpleTableTableRow>
<SimpleTableTableRow>
<SimpleTableTableCell>Title</SimpleTableTableCell>
<SimpleTableTableCell>Value</SimpleTableTableCell>
</SimpleTableTableRow>
</SimpleTableTable>
Color List Table
<ColorListTable data={[{label: 'Label1', value: 60, color: '#A05195'}, {label: 'Label2', value: 40, color: '#F95D6A'}]}>
<ColorListTableRow>
<ColorListTableCell>Default</ColorListTableCell>
<ColorListTableCell>25%</ColorListTableCell>
</ColorListTableRow>
<ColorListTableRow>
<ColorListTableCell>Default</ColorListTableCell>
<ColorListTableCell>15%</ColorListTableCell>
</ColorListTableRow>
<ColorListTableRow>
<ColorListTableCell>Default</ColorListTableCell>
<ColorListTableCell>10%</ColorListTableCell>
</ColorListTableRow>
<ColorListTableRow>
<ColorListTableCell>Default</ColorListTableCell>
<ColorListTableCell>10%</ColorListTableCell>
</ColorListTableRow>
<ColorListTableRow>
<ColorListTableCell>Default</ColorListTableCell>
<ColorListTableCell>20%</ColorListTableCell>
</ColorListTableRow>
<ColorListTableRow>
<ColorListTableCell>Default</ColorListTableCell>
<ColorListTableCell>15%</ColorListTableCell>
</ColorListTableRow>
<ColorListTableRow>
<ColorListTableCell>Default</ColorListTableCell>
<ColorListTableCell>5%</ColorListTableCell>
</ColorListTableRow>
</ColorListTable>
Finance Table
<FinanceTable>
<FinanceHeaderRow color={"blue"}>
<FinanceHeaderTitle>International Equities</FinanceHeaderTitle>
<FinanceHeaderPercentage>25%</FinanceHeaderPercentage>
</FinanceHeaderRow>
<FinanceRow>
<FinanceCellTicker>NSRGY</FinanceCellTicker>
<FinanceCell>Nestle SA</FinanceCell>
<FinanceCellPercentage>15%</FinanceCellPercentage>
</FinanceRow>
<FinanceRow>
<FinanceCellTicker>XEF</FinanceCellTicker>
<FinanceCell>iShares Core</FinanceCell>
<FinanceCellPercentage>5%</FinanceCellPercentage>
</FinanceRow>
<FinanceRow>
<FinanceCellTicker>NFLX</FinanceCellTicker>
<FinanceCell>Netflix</FinanceCell>
<FinanceCellPercentage>20%</FinanceCellPercentage>
</FinanceRow>
</FinanceTable>
FinanceHeaderRow.propTypes = {
color: PropTypes.string
}
Collapse Table
<CollapseTable>
<CollapseTableTitleRow>
<CollapseTableTitle>Category Title</CollapseTableTitle>
<CollapseTableTitle>Value</CollapseTableTitle>
<CollapseTableTitle>Percentage</CollapseTableTitle>
<CollapseTableTitle>Earnings</CollapseTableTitle>
</CollapseTableTitleRow>
<CollapseTableHeaderRow color={'#2F4B7C'} collapseId={'income'}>
<CollapseTableRowHeader>Fixed Income</CollapseTableRowHeader>
<CollapseTableRowHeader>15000</CollapseTableRowHeader>
<CollapseTableRowHeader>39</CollapseTableRowHeader>
<CollapseTableRowHeader>343</CollapseTableRowHeader>
</CollapseTableHeaderRow>
<CollapseTableRow parentId={'income'}>
<CollapseTableCell>Netflix</CollapseTableCell>
<CollapseTableCell>14000</CollapseTableCell>
<CollapseTableCell>12</CollapseTableCell>
<CollapseTableCell>300</CollapseTableCell>
</CollapseTableRow>
<CollapseTableRow parentId={'income'}>
<CollapseTableCell>Microsoft</CollapseTableCell>
<CollapseTableCell>2000</CollapseTableCell>
<CollapseTableCell>2</CollapseTableCell>
<CollapseTableCell>400</CollapseTableCell>
</CollapseTableRow>
<CollapseTableRow parentId={'income'}>
<CollapseTableCell>Tesla</CollapseTableCell>
<CollapseTableCell>9000</CollapseTableCell>
<CollapseTableCell>49</CollapseTableCell>
<CollapseTableCell>8200</CollapseTableCell>
</CollapseTableRow>
</CollapseTable>
CollapseTableHeaderRow.propTypes = {
collapseId: PropTypes.string.isRequired,
color: PropTypes.string
}
CollapseTableRow.propTypes = {
parentId: PropTypes.string.isRequired
}
ColorListTable.propTypes = {
data: PropTypes.shape({
label: PropTypes.string,
value: PropTypes.number,
color: PropTypes.string
})
}
Rating Stars
<Rating onChange={(evt) => console.log(evt.target.value)}/>
Rating.propTypes = {
onChange: PropTypes.func
}
Radio and Checkbox
<RadioGroup>
<Radio id={1} value="Top" name="radios" onChange={(v) => console.log(v.target.value)}>Default</Radio>
<Radio id={2} value="Bot" name="radios" onChange={(v) => console.log(v.target.value)}>Selected</Radio>
</RadioGroup>
<CheckboxGroup>
<Checkbox id={3} value="Top" name="boxes" onChange={(v) => console.log(v.target.value)}>Default</Checkbox>
<Checkbox id={4} value="Bot" name="boxes" onChange={(v) => console.log(v.target.value)}>Selected</Checkbox>
</CheckboxGroup>
Checkbox.propTypes = {
type: PropTypes.string,
name: PropTypes.string.isRequired,
checked: PropTypes.bool,
onChange: PropTypes.func.isRequired
}
Radio.propTypes = {
type: PropTypes.string,
name: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired
}
Recommendation Tabs (responsive)
<TabsWrapper>
<RecommendationTab
key='1'
label='Increase monthly auto deposit to'
target="$1820.00"
current="$300.00"
icon="Circle-Dollar"/>
<RecommendationTab
key='2'
selected
label='Add a one-time deposit of'
target="$300.00"
current="$20.00"
icon="Circle-Dollar" />
<RecommendationTab key='3' label='Increase retirement age to' target="26" current="20" icon="Circle-Dollar"/>
</TabsWrapper>
RecommendationTab.propTypes = {
selected: PropTypes.any,
icon: PropTypes.string,
current: PropTypes.any,
label: PropTypes.string,
target: PropTypes.any
}
TabsWrapper.propTypes = {
onSelect: PropTypes.func
}
Selection Cards
<IconCard label='Quick to React' icon="piggy-bank" />
<TextCard top="Label" option="Option 1" bottom="label 1" />
IconCard.propTypes = {
onClick: PropTypes.func,
icon: PropTypes.string.isRequired,
label: PropTypes.string,
}
TextCard.propTypes = {
onClick: PropTypes.func,
top: PropTypes.string,
option: PropTypes.string,
bottom: PropTypes.string,
}
Sliders
*Must include import 'react-rangeslider/lib/index.css'
in file with sliders to use css
<SliderBasic
min={1}
max={100}
default={10}
step={1}
tooltip={false}
onChange={(evt) => console.log('SliderBasic', evt)}
/>
<SliderBasic min={10} max={100} default={1} step={10} disabled />
<SliderGradient
label1="Option 1"
label2="Option 2"
tooltip={true}
onChange={(evt) => console.log('SliderGradient', evt)}
/>
<SliderCircle
label1='Option 1'
label2='Option 2'
onChange={(position) => console.log('SliderCircle', position)}
/>
SliderBasic.propTypes = {
min: PropTypes.number.isRequired,
max: PropTypes.number.isRequired,
step: PropTypes.number.isRequired,
tooltip: PropTypes.bool,
disabled: PropTypes.bool,
onChange: PropTypes.func
}
SliderGradient.propTypes = {
min: PropTypes.number.isRequired,
max: PropTypes.number.isRequired,
step: PropTypes.number.isRequired,
tooltip: PropTypes.bool,
disabled: PropTypes.bool,
onChange: PropTypes.func
}
SliderCircle.propTypes = {
onChange: PropTypes.func
}
SliderCircle.defaultProps = {
position: 0,
clickable: true,
positionChangeListener: null
}
Tab Selectors
<TabsContainer onSelect={(key) => console.log(key)}>
<Tab size="small" label="Item Selected" />
<Tab size="small" label="Item Middle" />
<Tab size="small" label="Item Right" />
</TabsContainer>
<TabsContainer>
<Tab size="large" label="Item Left" />
<Tab size="large" label="Item Middle" />
<Tab size="large" label="Item Right" />
</TabsContainer>
<TimeTabsContainer onSelect={(key) => console.log(key)}>
<TimeTab label="1D" />
<TimeTab label="1M" />
<TimeTab label="1Y" />
<TimeTab label="SY" />
</TimeTabsContainer>
Tab.propTypes = {
onClick: PropTypes.func,
label: PropTypes.string,
key: PropTypes.number,
selected: PropTypes.bool,
size: PropTypes.PropTypes.oneOf(['large', 'small'])
}
TabsContainer.propTypes = {
onSelect: PropTypes.func
}
TimeTab.propTypes = {
onClick: PropTypes.func,
label: PropTypes.string,
key: PropTypes.number,
selected: PropTypes.bool
}
Text Fields
<TextField placeholder="Default" name="text1"/>
<TextField placeholder="Enter your name..." name="text2" label="First Name"/>
<TextField error="This is an example of error text." name="text4" label="Error" invalid />
<SearchField />
<DateFields />
TextField.propTypes = {
invalid: PropTypes.bool,
placeholder: PropTypes.string,
name: PropTypes.string,
label: PropTypes.string,
onChange: PropTypes.func
}
SearchField.propTypes = {
invalid: PropTypes.bool,
placeholder: PropTypes.string,
name: PropTypes.string,
label: PropTypes.string,
onChange: PropTypes.func,
onSubmit: PropTypes.func
}
DateFields.propTypes = {
invalid: PropTypes.bool,
name: PropTypes.string,
label: PropTypes.string,
onChange: PropTypes.func
}
Tooltips
<Tooltip text='5 or more characters' position='bottom'>Hover me! (Bottom)</Tooltip>
Tooltip.propTypes = {
text: PropTypes.string,
position: PropTypes.oneOf(['top', 'bottom'])
}