82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { TouchableOpacity, Alert, Text, GestureResponderEvent, View, Dimensions } from 'react-native';
|
||
|
|
import RenderHtml, { TChildrenRenderer } from 'react-native-render-html';
|
||
|
|
import {
|
||
|
|
LineChart,
|
||
|
|
BarChart,
|
||
|
|
PieChart,
|
||
|
|
ProgressChart,
|
||
|
|
ContributionGraph,
|
||
|
|
StackedBarChart
|
||
|
|
} from "react-native-chart-kit";
|
||
|
|
import { Cfg } from './action';
|
||
|
|
|
||
|
|
export function ChartRenderer({
|
||
|
|
...props
|
||
|
|
}: {
|
||
|
|
[key: string]: any;
|
||
|
|
}) {
|
||
|
|
const { tnode } = props;
|
||
|
|
const { domNode } = tnode;
|
||
|
|
const { attribs } = domNode;
|
||
|
|
|
||
|
|
const onPress = () => {
|
||
|
|
const config = Cfg.action as { [key: string]: (event: Function) => void };
|
||
|
|
const custAction: ((event: Function) => void) | null =
|
||
|
|
(attribs?.action && typeof config[attribs?.action] === 'function')
|
||
|
|
? config[attribs?.action]
|
||
|
|
: null;
|
||
|
|
if (custAction) {
|
||
|
|
attribs.pop = custAction;
|
||
|
|
custAction(attribs);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View>
|
||
|
|
<LineChart
|
||
|
|
data={{
|
||
|
|
labels: ["January", "February", "March", "April", "May", "June"],
|
||
|
|
datasets: [
|
||
|
|
{
|
||
|
|
data: [
|
||
|
|
Math.random() * 100,
|
||
|
|
Math.random() * 100,
|
||
|
|
Math.random() * 100,
|
||
|
|
Math.random() * 100,
|
||
|
|
Math.random() * 100,
|
||
|
|
Math.random() * 100
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}}
|
||
|
|
width={Dimensions.get("window").width - (attribs.min ? Number(attribs.min) : 40)} // from react-native
|
||
|
|
height={220}
|
||
|
|
yAxisLabel="Rp"
|
||
|
|
yAxisSuffix="k"
|
||
|
|
yAxisInterval={1} // optional, defaults to 1
|
||
|
|
chartConfig={{
|
||
|
|
backgroundColor: "#e26a00",
|
||
|
|
backgroundGradientFrom: "#fb8c00",
|
||
|
|
backgroundGradientTo: "#ffa726",
|
||
|
|
decimalPlaces: 2, // optional, defaults to 2dp
|
||
|
|
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
|
||
|
|
labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
|
||
|
|
style: {
|
||
|
|
borderRadius: 16
|
||
|
|
},
|
||
|
|
propsForDots: {
|
||
|
|
r: "6",
|
||
|
|
strokeWidth: "2",
|
||
|
|
stroke: "#ffa726"
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
bezier
|
||
|
|
style={{
|
||
|
|
marginVertical: 8,
|
||
|
|
borderRadius: 16
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}
|