highcharts gauge attempt

pressure.js

import React from "react";
import { StyleSheet, Text, TextInput, Button, WebView, View, Platform } from "react-native";

import { Icon } from "react-native-elements";
import { NavigationActions, StackActions } from "react-navigation";
import ChartView from "react-native-highcharts";

import { ScreenOrientation } from "expo";
import PivotCircle from "../../components/PivotCircle";

// Mobx state stores
import { observer } from "mobx-react";
import stores from "../../stores/stores";


@observer
export default class SitePressureScreen extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [],
            chartViewHeight: 320,
            hasValueOverZero: false,
            psiSetpoint: stores.databaseStore.activeSite.pressureSensor.low_pressure_set
        };
    }

    componentDidFocus() {}

    componentWillMount() {
        stores.databaseStore.loadingPressureData = true;
    }

    componentWillUnmount() {
        ScreenOrientation.allowAsync(ScreenOrientation.Orientation.PORTRAIT);
    }

    componentDidMount() {
        ScreenOrientation.allowAsync(ScreenOrientation.Orientation.LANDSCAPE_LEFT);
        this.getPlots();
    }

    getPlots = async () => {
        site = stores.databaseStore.activeSite;
        var apiURL = "http://api.testServer.com/pressure_sensors/recent_data_plots";
        var apiParams = "?id=" + site.pressureSensor.id + "&days=14";
        var requestURL = apiURL + apiParams;
        console.log(requestURL);
        await fetch(requestURL)
            .then(response => response.json())
            .then(plotsJSON => {
                for (var i = 0; i < plotsJSON.length; i++) {
                    this.state.data.push([plotsJSON[i][1], plotsJSON[i][0]]);
                    if (plotsJSON[i][0] > 0) {
                        this.setState({ hasValueOverZero: true });
                    }
                    lastPlot = plotsJSON[i][0];
                }
                stores.databaseStore.pressureData.lastPressure = lastPlot;
            });
    };

    backToSummary() {
        console.log(this.props.navigation);
        const resetAction = StackActions.reset({
            key: null,
            index: 0,
            actions: [NavigationActions.navigate({ routeName: "Main" })]
        });
        this.props.navigation.dispatch(resetAction);
    }

    render() {
        site = stores.databaseStore.activeSite;

        var lastPressure = site.pressureSensor.prettyLastPressure;
        var data = this.state.data;
        var Highcharts = "Highcharts";

        var psiGaugeConf = {
            chart: {
                type: "gauge",
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },

            title: {
                text: "Speedometer"
            },

            pane: {
                startAngle: -150,
                endAngle: 150,
                background: [
                    {
                        backgroundColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [[0, "#FFF"], [1, "#333"]]
                        },
                        borderWidth: 0,
                        outerRadius: "109%"
                    },
                    {
                        backgroundColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [[0, "#333"], [1, "#FFF"]]
                        },
                        borderWidth: 1,
                        outerRadius: "107%"
                    },
                    {
                        // default background
                    },
                    {
                        backgroundColor: "#DDD",
                        borderWidth: 0,
                        outerRadius: "105%",
                        innerRadius: "103%"
                    }
                ]
            },

            // the value axis
            yAxis: {
                min: 0,
                max: 200,

                minorTickInterval: "auto",
                minorTickWidth: 1,
                minorTickLength: 10,
                minorTickPosition: "inside",
                minorTickColor: "#666",

                tickPixelInterval: 30,
                tickWidth: 2,
                tickPosition: "inside",
                tickLength: 10,
                tickColor: "#666",
                labels: {
                    step: 2,
                    rotation: "auto"
                },
                title: {
                    text: "km/h"
                },
                plotBands: [
                    {
                        from: 0,
                        to: 120,
                        color: "#55BF3B" // green
                    },
                    {
                        from: 120,
                        to: 160,
                        color: "#DDDF0D" // yellow
                    },
                    {
                        from: 160,
                        to: 200,
                        color: "#DF5353" // red
                    }
                ]
            },

            series: [
                {
                    name: "Speed",
                    data: [80],
                    tooltip: {
                        valueSuffix: " km/h"
                    }
                }
            ]
        };

        var conf = {
            chart: {
                type: "area",
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10
            },
            title: { text: "water pressure" },

            xAxis: {
                type: "datetime",
                tickPixelInterval: 15
            },

            yAxis: {
                opposite: true,
                softMax: 30,
                plotLines: [
                    {
                        value: stores.databaseStore.activeSite.pressureSensor.dry,
                        color: "purple",
                        dashStyle: "shortdash",
                        width: 2,
                        label: { text: "dry setpoint" }
                    }
                ],
                plotBands: [
                    {
                        from: stores.databaseStore.activeSite.lowerDeadband,
                        to: stores.databaseStore.activeSite.upperDeadband,
                        color: "#BEF781"
                    }
                ],

                labels: { style: { color: "black" } },
                title: {
                    text: "psi",
                    style: { color: "black" }
                }
            },

            tooltip: {
                formatter: function() {
                    return (
                        "<b>" +
                        this.series.name +
                        "</b><br/>" +
                        Highcharts.dateFormat("%Y-%m-%d %H:%M:%S", this.x) +
                        "<br/>" +
                        Highcharts.numberFormat(this.y, 2)
                    );
                }
            },

            legend: { enabled: false },
            exporting: { enabled: false },

            series: [
                {
                    name: "Pressure Data",
                    data: data
                }
            ]
        };

        if (Platform.OS == "ios") {
            kbd = "numbers-and-punctuation";
        } else {
            kbd = "numeric";
        }

        psiOptions = { gauge: true };

        return (
            <View style={styles.container}>
                <View style={styles.leftCell}>
                    <View style={styles.siteHeader}>
                        <View style={styles.siteHeaderLeft}>
                            <Text style={styles.titleText}>{site.name}</Text>
                            <Text style={styles.baseText}>{site.DescriptiveStatus}</Text>
                        </View>
                        <View style={styles.statusCircle}>
                            <PivotCircle site={site} />
                        </View>
                    </View>

                    <View style={styles.pressureForm}>
                        <Text style={styles.baseText}>update low pressure setpoint (psi)</Text>

                        <TextInput
                            onChangeText={psiSetpoint => this.setState({ psiSetpoint })}
                            placeholder={`current: ${site.pressureSensor.low_pressure_set}`}
                            keyboardType={kbd}
                            placeholderTextColor="#808080"
                            style={styles.input}
                        />

                        <Button
                            backgroundColor="green"
                            onPress={() => this.sendSetPoint()}
                            title="change set-point"
                            containerViewStyle={styles.button}
                        />
                    </View>
                    <ChartView style={styles.pressureGauge} config={psiGaugeConf} 
                               guage={true} 
                    />
                </View>

                <ChartView style={styles.chartView} config={conf} />

                <View style={{ position: "absolute", bottom: 0, right: 0 }}>
                    <Icon name="home" color="#079205" onPress={this.backToSummary.bind(this)} />
                </View>
            </View>
        );
    }

    sendSetPoint = async () => {
        var apiURL = "http://api.testServer.com/pressure_sensors/update_lp_setpoint";
        var apiParams = "?pressure_sensor=" + stores.databaseStore.activeSite.pressureSensor.id;
        var apiParams = apiParams + "&lp_setpoint=" + this.state.psiSetpoint;
        var requestURL = apiURL + apiParams;
        console.log(requestURL);
        await fetch(requestURL)
            .then(response => response.json())
            .then(responseData => {
                alert(`set new low pressure setpoint to ${this.state.psiSetpoint} psi`);
            });
    };

    _handleError = error => {
        console.warn(error);
    };
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "row"
    },

    leftCell: {
        flex: 2,
        flexDirection: "column",
        justifyContent: "space-between"
    },

    siteHeader: {
        flex: 1,
        marginBottom: 4,
        flexDirection: "row",
        justifyContent: "space-between"
    },

    pressureForm: {
        flex: 1,
        flexDirection: "column",
        justifyContent: "center",
        backgroundColor: "#F0F0F0",
        marginBottom: 4,
        paddingTop: 4,
        paddingBottom: 4
    },

    pressureGauge: {
        flex: 4,
        marginTop: 5,
        marginBottom: 4
    },

    chartView: {
        flex: 3,
        marginBottom: 40
    },
    titleText: {
        fontSize: 16,
        fontWeight: "bold"
    },

    baseText: {
        fontSize: 12
    },

    siteHeaderLeft: {
        paddingRight: 10
    },

    statusCircle: {
        paddingRight: 5
    },

    input: {
        justifyContent: "center",
        paddingHorizontal: 10
    },

    button: {
        marginTop: 10,
        marginBottom: 10
    },

    homeButton: {
        width: 5,
        height: 5,
        justifyContent: "flex-end"
    }
});