Skip to content

S
safetcut-app
Commit 47f3bad1 by Tonk
Options

update history chart style

parent ecbabcd5
Showing with 197 additions and 22 deletions
components/Chart/CustomAreaChart.js 0 → 100644
import React from 'react';
import { Text, Icon } from 'native-base';
import { TouchableOpacity, View, StyleSheet } from 'react-native';
import { ScrollView, FlatList } from 'react-native-gesture-handler';
import { StackedAreaChart, BarChart, YAxis, XAxis, AreaChart, Grid } from 'react-native-svg-charts';
import * as shape from 'd3-shape';
import { format, parse } from 'date-fns';
import { Circle, LinearGradient, Stop, Defs, Path } from 'react-native-svg';
import Tooltip from './Tooltip';
import { color } from '../../constants/Styles';
export default class CustomAreaChart extends React.Component {
render() {
const data = this.props.item;
const Gradient = () => (
<Defs key={'gradient'}>
<LinearGradient id={'gradient'} x1={'0%'} y={'0%'} x2={'0%'} y2={'100%'}>
<Stop offset={'0%'} stopColor={color.lightRed} />
<Stop offset={'100%'} stopColor={color.lightRed} stopOpacity={0.4} />
</LinearGradient>
</Defs>
);
const Line = ({ line }) => <Path key={'line'} d={line} stroke={color.primary} strokeWidth={2} fill={'none'} />;
return (
<View style={{ height: 300, paddingVertical: 20 }}>
<AreaChart
style={{ flex: 1 }}
contentInset={{ top: 10, bottom: 10 }}
data={data}
yAccessor={({ item, index }) => item.data}
xAccessor={({ item, index }) => index}
svg={{ fill: 'url(#gradient)' }}
curve={shape.curveLinear}
// curve={shape.curveMonotoneX}
>
<Gradient />
<Line />
{/* <ChartPoints /> */}
{/* {tooltipIndex && (
<Tooltip
tooltipX={tooltipX}
tooltipY={tooltipY}
index={tooltipIndex}
dataLength={data.length}
/>
)} */}
</AreaChart>
</View>
);
}
}
components/Chart/CustomBarChart.js 0 → 100644
import React from 'react';
import { LinearGradient, Stop, Defs, Text, Rect } from 'react-native-svg';
import { BarChart, XAxis } from 'react-native-svg-charts';
import { color } from '../../constants/Styles';
import { format } from 'date-fns';
import * as scale from 'd3-scale';
import { View } from 'react-native';
import Tooltip from './Tooltip';
class CustomBarChart extends React.Component {
state = {
tooltipX: null,
tooltipY: null,
tooltipIndex: null,
};
render() {
const data = this.props.item;
const { tooltipIndex, tooltipX, tooltipY } = this.state;
const Gradient = () => (
<Defs key={'gradient'}>
<LinearGradient id={'gradient'} x1={'0%'} y={'0%'} x2={'0%'} y2={'100%'}>
<Stop offset={'0%'} stopColor={color.lightRed} stopOpacity={0.4} />
<Stop offset={'100%'} stopColor={color.primary} />
</LinearGradient>
</Defs>
);
const ChartPoints = ({ x, y, bandwidth }) =>
data.map((value, index) => (
<Rect
key={index}
x={x(index)}
y={y(value.data)}
rx={6}
width={bandwidth}
height={240 - y(value.data)}
fill={'url(#gradient)'}
onPress={() =>
this.setState({
tooltipX: index,
tooltipY: value.data,
tooltipIndex: index,
})
}
/>
));
const Labels = ({ x, y, bandwidth }) =>
data.map((value, index) => (
<Text
key={index}
x={x(index) + bandwidth / 2}
y={y(value.data) - 10}
fontSize={14}
fill={'black'}
alignmentBaseline={'middle'}
textAnchor={'middle'}
>
{value.data}
</Text>
));
return (
<View style={{ height: 300, paddingVertical: 20 }}>
<BarChart
style={{ flex: 1 }}
data={data.map(x => x.data)}
contentInset={{ top: 45, bottom: 20 }}
svg={{
strokeWidth: 2,
fill: 'transparent',
}}
spacingInner={0.75}
spacingOuter={1}
gridMin={0}
>
<ChartPoints />
{/* <Labels /> */}
<Gradient />
{tooltipIndex !== null && (
<Tooltip
tooltipX={tooltipX}
tooltipY={tooltipY}
index={tooltipIndex}
dataLength={data.length}
/>
)}
</BarChart>
<XAxis
style={{ marginTop: 10 }}
data={data}
scale={scale.scaleBand}
formatLabel={(value, index) => format(data[index].time * 1000, 'D/M/YY')}
svg={{ fontSize: 8, fill: color.grey }}
spacingInner={0.75}
spacingOuter={1}
/>
</View>
);
}
}
export default CustomBarChart;
components/Chart/Tooltip.js 0 → 100644
import React from 'react';
import { G, Rect, Text, Circle, Polygon } from 'react-native-svg';
import { color } from '../../constants/Styles';
const Tooltip = ({ x, y, tooltipX, tooltipY, index, dataLength, bandwidth }) => {
const barWidth = bandwidth / 2;
return (
<>
<Circle
r={barWidth + 4}
cx={x(tooltipX) + bandwidth / 2}
cy={y(tooltipY)}
stroke={color.lightRed}
strokeWidth="2"
fill="transparent"
/>
<Circle r={barWidth} cx={x(tooltipX) + barWidth} cy={y(tooltipY)} fill={color.primary} />
<Polygon
points={`${x(tooltipX) + barWidth},${y(tooltipY) - 15} ${x(tooltipX) + barWidth - 5},${y(tooltipY) -
20} ${x(tooltipX) + barWidth + 5},${y(tooltipY) - 20} `}
fill={color.primary}
/>
<G x={x(tooltipX) - 30} y={y(tooltipY) - 41}>
<Rect height={22} width={70} fill="#ee5454" ry={10} rx={10}></Rect>
<Text x={35} y={11} stroke="white" textAnchor="middle" alignmentBaseline="central">
{`${tooltipY} KWh`}
</Text>
</G>
</>
);
};
export default Tooltip;
screens/Private/HistoryScreen/HistoryScreen.js
...@@ -9,6 +9,8 @@ import * as shape from 'd3-shape'; ...@@ -9,6 +9,8 @@ import * as shape from 'd3-shape';
import { format, parse } from 'date-fns'; import { format, parse } from 'date-fns';
import { Circle } from 'react-native-svg'; import { Circle } from 'react-native-svg';
import Tooltip from './Tooltip'; import Tooltip from './Tooltip';
import CustomBarChart from '../../../components/Chart/CustomBarChart';
import CustomAreaChart from '../../../components/Chart/CustomAreaChart';
// mock data // mock data
const data = require('./history.json'); const data = require('./history.json');
...@@ -25,7 +27,7 @@ export default class HistoryScreen extends React.Component { ...@@ -25,7 +27,7 @@ export default class HistoryScreen extends React.Component {
), ),
}); });
state = { state = {
graphType: 'bar', graphType: 'area',
isfilterVisible: false, isfilterVisible: false,
data: [], data: [],
data2: [], data2: [],
...@@ -97,26 +99,9 @@ export default class HistoryScreen extends React.Component { ...@@ -97,26 +99,9 @@ export default class HistoryScreen extends React.Component {
</View> </View>
</View> </View>
{/* Chart */} {/* Chart */}
<View style={styles.chartContainer}> {graphType === 'bar' ? <CustomBarChart item={data} /> : <CustomAreaChart item={data} />}
{graphType === 'bar' && (
<BarChart {/* <View style={styles.chartContainer}>
style={{ flex: 1, marginLeft: 25 }}
contentInset={{ top: 10, bottom: 10 }}
data={data.map(x => x.data)}
svg={{ fill: '#f49898' }}
spacingInner={0.75}
>
<ChartPoints />
{tooltipIndex && (
<Tooltip
tooltipX={tooltipX}
tooltipY={tooltipY}
index={tooltipIndex}
dataLength={data.length}
/>
)}
</BarChart>
)}
{graphType === 'area' && ( {graphType === 'area' && (
<AreaChart <AreaChart
style={{ flex: 1, marginLeft: 25 }} style={{ flex: 1, marginLeft: 25 }}
...@@ -157,7 +142,7 @@ export default class HistoryScreen extends React.Component { ...@@ -157,7 +142,7 @@ export default class HistoryScreen extends React.Component {
contentInset={{ left: 10, right: 10 }} contentInset={{ left: 10, right: 10 }}
svg={{ fontSize: 8, fill: color.grey }} svg={{ fontSize: 8, fill: color.grey }}
/> />
</View> </View> */}
<View style={{ paddingHorizontal: 10, marginBottom: isIphoneX() ? 120 : 85 }}> <View style={{ paddingHorizontal: 10, marginBottom: isIphoneX() ? 120 : 85 }}>
<Text style={theme.normalText}>Info</Text> <Text style={theme.normalText}>Info</Text>
<View <View
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment