import React, { Fragment } from 'react';
import withGauge, { HeartBeat, Needle } from 'react-ui-gauge-component';

const defaultTitleColor = "black";
const defaultValueColor = "black";

const Gauge1 = withGauge({
    WrappedComponent: Needle({value:data[0], min: 0, max: 100}),
    fields: [{title: "Label 1", value: "100", titleColor: defaultTitleColor, valueColor: defaultValueColor}]
});

const Gauge2 = withGauge({
    WrappedComponent: HeartBeat,
    colorArray: ["#eb001e", "#000", "#3aff20", "#53a5fd", "#aaaaaa"],
    fields: [
        {title: "Label 1", value: "100", titleColor: defaultTitleColor, valueColor: defaultValueColor},
        {title: "Label 2", value: "100", titleColor: defaultTitleColor, valueColor: defaultValueColor}]
});

const Gauge3 = withGauge({
    WrappedComponent: HeartBeat,
    fields: [
        {title: "Label 1", value: "100", titleColor: defaultTitleColor, valueColor: defaultValueColor},
        {title: "Label 2", value: "100", titleColor: defaultTitleColor, valueColor: defaultValueColor},
        {title: "Label 3", value: "100", titleColor: defaultTitleColor, valueColor: defaultValueColor}]
});

const Gauge4 = withGauge({
    WrappedComponent: HeartBeat,
    fields: [
        {title: "Label 1", value: "100", titleColor: defaultTitleColor, valueColor: defaultValueColor},
        {title: "Label 2", value: "100", titleColor: defaultTitleColor, valueColor: defaultValueColor},
        {title: "Label 3", value: "100", titleColor: defaultTitleColor, valueColor: defaultValueColor},
        {title: "Label 4", value: "100", titleColor: defaultTitleColor, valueColor: defaultValueColor}]
});

const DashboardExample = () => {
    return (
        <Fragment>
            <Gauge1/>
            <Gauge2/>
            <Gauge3/>
            <Gauge4/>
        <Fragment/>
    )
}

export default DashboardExample;

colorArray: ["#eb001e", "#f35120", "#3aff20", "#53a5fd", "#aaaaaa"]

fields: [
        {title: "Gauge 1", value: "100", titleColor: "black", valueColor: "black"},
        {title: "Gauge 2", value: "100", titleColor: "black", valueColor: "black"},
        {title: "Gauge 3", value: "100", titleColor: "black", valueColor: "black"},
        {title: "Gauge 4", value: "100", titleColor: "black", valueColor: "black"}]