--- /dev/null
+
+/*
+ *
+ * Copyright 2016 RIFT.IO Inc
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+var React = require("react");
+var ReactDOM = require('react-dom');
+var MIXINS = require("../mixins/ButtonEventListener.js");
+var Gauge = require("../../js/gauge-modified.js");
+var GUID = require("utils/guid");
+import _ from 'underscore'
+
+
+
+
+/**
+ * Gauge Component
+ * It's props values and a brief description below
+ *
+ * min: minimum value expected
+ * max: maximum value expected
+ * width: width of gauge in px
+ * height: height of gauge in px
+ * value: the number displayed on the gauge
+ * resize: should the gauge resize with container
+ * unit: the units displayed on the gauge
+ * valueFormat: An object with an 'int' and 'dec' property. The 'int' is the min number of integer digits displayed
+ * and the 'dec' object is the min number of fractional digits displayed.
+ *
+ *
+ **/
+module.exports = React.createClass({
+ displayName: 'Gauge',
+ mixins:MIXINS,
+ propTypes: {
+ min: React.PropTypes.number,
+ max: React.PropTypes.number,
+ width: React.PropTypes.number,
+ height: React.PropTypes.string,
+ value: React.PropTypes.number,
+ resize: React.PropTypes.bool,
+ isAggregate: React.PropTypes.bool,
+ units: React.PropTypes.string,
+ valueFormat: React.PropTypes.shape({
+ 'int': React.PropTypes.number,
+ 'dec': React.PropTypes.number
+ })
+ },
+ clone: function(obj) {
+ if (null == obj || "object" != typeof obj) return obj;
+ var copy = obj.constructor();
+ for (var attr in obj) {
+ if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
+ }
+ return copy;
+ },
+
+ /**
+ * Defines default state.
+ *
+ * min: minimum value expected
+ * max: maximum value expected
+ * nSteps: fixed number for now. The number of ticks in the gauge.
+ * width: width of gauge in px
+ * height: height of gauge in px
+ * value: the number displayed on the gauge
+ * resize: should the gauge resize with container
+ * unit: the units displayed on the gauge
+ * valueFormat: An object with an 'int' and 'dec' property. The 'int' is the min number of integer digits displayed
+ * and the 'dec' object is the min number of fractional digits displayed.
+ */
+ getInitialState: function() {
+ var valueFormatState = null
+ this.gauge = null;
+ this.gaugeID = GUID();
+ if (!this.props.valueFormat) {
+ if ((this.props.max && this.props.max > 1000) || this.props.value) {
+ valueFormatState = {
+ "int": 1,
+ "dec": 0
+ };
+ } else {
+ valueFormatState = {
+ "int": 1,
+ "dec": 2
+ };
+ }
+ } else {
+ valueFormatState = this.props.valueFormat;
+ }
+ return {
+ //sizeOfButton: this.props.size || '', //There is no Medium value in CSS, default size is the absence of a value
+ min: this.props.min || 0,
+ max: this.props.max || 0,
+ nSteps: 14,
+ height: this.props.height || 200,
+ width: this.props.width || 200,
+ color: this.props.color || 'hsla(212, 57%, 50%, 1)',
+ value: this.props.value || 0,
+ valueFormat: valueFormatState,
+ isAggregate: this.props.isAggregate || false,
+ units: this.props.units || '',
+ resize:this.props.resize || false
+
+ }
+ },
+
+
+ /**
+ * Called when props are changed. Syncs props with state.
+ */
+ componentWillReceiveProps: function(nextProps) {
+ this.setState({
+ max:nextProps.max || this.state.max,
+ value:nextProps.value || 0,
+ valueFormat:nextProps.valueFormat || this.state.valueFormat
+ });
+ },
+
+ /**
+ * Calls the render on the gauge object once the component first mounts
+ */
+ componentDidMount: function() {
+ this.canvasRender(this.state);
+ },
+
+ /**
+ * If any of the state variables have changed, the component should update.
+ * Note, this is where the render step occures for the gauge object.
+ */
+ shouldComponentUpdate: function(nextProps, nextState) {
+ var currentStateString = String(this.state.max) + String(this.state.valueFormat.int) + String(this.state.valueFormat.dec) + String(this.state.value);
+ var nextStateString = String(nextState.max) + String(nextState.valueFormat.int) + String(nextState.valueFormat.dec) + String(nextState.value);
+ if (currentStateString == nextStateString) {
+ return false;
+ }
+ this.state.valueFormat = this.determineValueFormat(nextState.value);
+ this.canvasRender(nextState);
+ return true;
+ },
+
+ /**
+ * Default value format based on units.
+ */
+ determineValueFormat: function(value) {
+ if (value > 999 || this.state.units == "%") {
+ return {
+ "int": 1,
+ "dec": 0
+ }
+ }
+
+ return {
+ "int": 1,
+ "dec": 2
+ }
+ },
+
+
+ /**
+ * Render step for the gauge object. Sets some defaults, passes some of the component's state down.
+ */
+ canvasRender: function(state) {
+ if (state.max == state.min) {
+ state.max = 14;
+ }
+ var range = state.max - state.min;
+ var step = Math.round(range / state.nSteps);
+ var majorTicks = [];
+ for (var i = 0; i <= state.nSteps; i++) {
+ majorTicks.push(state.min + (i * step));
+ }
+ var redLine = state.min + (range * 0.9);
+ var config = {
+ isAggregate: state.isAggregate,
+ renderTo: ReactDOM.findDOMNode(document.getElementById(this.gaugeID)),
+ width: state.width,
+ height: state.height,
+ glow: false,
+ units: state.units,
+ title: false,
+ minValue: state.min,
+ maxValue: state.max,
+ majorTicks: majorTicks,
+ valueFormat: this.determineValueFormat(self.value),
+ minorTicks: 0,
+ strokeTicks: false,
+ highlights: [],
+ colors: {
+ plate: 'rgba(0,0,0,0)',
+ majorTicks: 'rgba(15, 123, 182, .84)',
+ minorTicks: '#ccc',
+ title: 'rgba(50,50,50,100)',
+ units: 'rgba(50,50,50,100)',
+ numbers: '#fff',
+ needle: {
+ start: 'rgba(255, 255, 255, 1)',
+ end: 'rgba(255, 255, 255, 1)'
+ }
+ }
+ };
+
+ var min = config.minValue;
+ var max = config.maxValue;
+ var N = 1000;
+ var increment = (max - min) / N;
+ for (i = 0; i < N; i++) {
+ var temp_color = 'rgb(0, 172, 238)';
+ if (i > 0.5714 * N && i <= 0.6428 * N) {
+ temp_color = 'rgb(0,157,217)';
+ } else if (i >= 0.6428 * N && i < 0.7142 * N) {
+ temp_color = 'rgb(0,142,196)';
+ } else if (i >= 0.7142 * N && i < 0.7857 * N) {
+ temp_color = 'rgb(0,126,175)';
+ } else if (i >= 0.7857 * N && i < 0.8571 * N) {
+ temp_color = 'rgb(0,122,154)';
+ } else if (i >= 0.8571 * N && i < 0.9285 * N) {
+ temp_color = 'rgb(0,96,133)';
+ } else if (i >= 0.9285 * N) {
+ temp_color = 'rgb(0,80,112)';
+ }
+ config.highlights.push({
+ from: i * increment,
+ to: increment * (i + 2),
+ color: temp_color
+ })
+ }
+ var updateSize = _.debounce(function() {
+ config.maxValue = state.max;
+ }, 500);
+ if (state.resize) $(window).resize(updateSize)
+
+ if (this.gauge) {
+ this.gauge.setValue(Math.ceil(state.value* 100) / 100)
+ this.gauge.updateConfig(config);
+ } else {
+ this.gauge = new Gauge(config);
+ this.gauge.setValue(Math.ceil(state.value* 100) / 100)
+ this.gauge.draw();
+ }
+ },
+
+ /**
+ * Renders the Gauge Component
+ * Returns the canvas element the gauge will be housed in.
+ * @returns {*}
+ */
+ render: function() {
+ var gaugeDOM = React.createElement("div", null,
+ React.createElement("canvas",
+ {className: "rwgauge", style:
+ {width:'100%','maxWidth':this.state.width + 'px','maxHeight':this.state.width},
+ id:this.gaugeID
+ }
+ )
+ )
+
+
+
+ return gaugeDOM;
+ }
+});
projects / osm / UI.git / blobdiff