Created
November 15, 2016 05:22
-
-
Save jeffutter/76fa82ee4c8cf57193f44aaf8bdb4f43 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Inferno from 'inferno'; | |
| import InfernoDOM from 'inferno-dom'; | |
| import Immutable from 'immutable'; | |
| import c3 from 'c3'; | |
| let chart; | |
| const onComponentShouldUpdate = (domNode, lastProps, nextProps) => { | |
| if (lastProps.onTemp !== nextProps.onTemp) return true; | |
| if (lastProps.offTemp !== nextProps.offTemp) return true; | |
| if (lastProps.heaterHistory !== nextProps.heaterHistory) return true; | |
| if (lastProps.tempSensorHistory !== nextProps.tempSensorHistory) return true; | |
| if (lastProps.weatherHistory !== nextProps.weatherHistory) return true; | |
| return false; | |
| }; | |
| const heaterColumn = (onTemp, offTemp, historyEntry) => { | |
| let time = historyEntry.get('time'); | |
| time = time.replace(/(\d\d\d)\d\d\d/, '$1'); | |
| let heaterStatus = historyEntry.get('status'); | |
| return [time, null, null, historyEntry.get('status'), onTemp, offTemp]; | |
| }; | |
| const tempSensorColumn = (onTemp, offTemp, historyEntry) => { | |
| let time = historyEntry.get('time'); | |
| time = time.replace(/(\d\d\d)\d\d\d/, '$1'); | |
| return [time, historyEntry.get('temp'), null, null, onTemp, offTemp]; | |
| }; | |
| const weatherColumn = (onTemp, offTemp, historyEntry) => { | |
| let time = historyEntry.get('time'); | |
| time = time.replace(/(\d\d\d)\d\d\d/, '$1'); | |
| return [time, null, historyEntry.get('temp'), null, onTemp, offTemp]; | |
| }; | |
| const formatColumns = (onTemp, offTemp, heaterHistory, tempSensorHistory, weatherHistory) => { | |
| heaterHistory = heaterHistory || Immutable.List([]); | |
| tempSensorHistory = tempSensorHistory || Immutable.List([]); | |
| weatherHistory = weatherHistory || Immutable.List([]); | |
| let data = Immutable.List([]).concat( | |
| heaterHistory.map(entry => heaterColumn(onTemp, offTemp, entry)), | |
| tempSensorHistory.map(entry => tempSensorColumn(onTemp, offTemp, entry)), | |
| weatherHistory.map(entry => weatherColumn(onTemp, offTemp, entry)) | |
| ); | |
| data.sort((a,b) => { | |
| if(a[0] < b[0]) return -1; | |
| if(a[0] > b[0]) return 1; | |
| return 0; | |
| }); | |
| let output = data | |
| .reduce((acc, x, i) => { | |
| let lastTime = acc[0][acc[0].length - 1]; | |
| if(lastTime == x[0]) { | |
| let lastTemp = acc[1][acc[1].length - 1]; | |
| let lastWeather = acc[2][acc[2].length - 1]; | |
| let lastHeater = acc[3][acc[3].length - 1]; | |
| let lastOnTemp = acc[4][acc[4].length - 1]; | |
| let lastOfftemp = acc[5][acc[5].length - 1]; | |
| acc[1][acc[1].length - 1] = x[1] || lastTemp; | |
| acc[2][acc[2].length - 1] = x[2] || lastWeather; | |
| acc[3][acc[3].length - 1] = x[3] || lastHeater; | |
| acc[4][acc[4].length - 1] = x[4] || lastOnTemp; | |
| acc[5][acc[5].length - 1] = x[5] || lastOfftemp; | |
| return acc; | |
| } | |
| acc[0].push(x[0]); | |
| acc[1].push(x[1]); | |
| acc[2].push(x[2]); | |
| acc[3].push(x[3]); | |
| acc[4].push(x[4]); | |
| acc[5].push(x[5]); | |
| return acc; | |
| }, [['x'], ['Temperature'], ['Weather'], ['Heater Status'], ['On Temp'], ['Off Temp']]); | |
| return output; | |
| }; | |
| const formatData = (onTemp, offTemp, heaterHistory, tempSensorHistory, weatherHistory) => { | |
| return { | |
| x: 'x', | |
| xFormat: '%Y-%m-%dT%H:%M:%S.%LZ', | |
| columns: formatColumns(onTemp, offTemp, heaterHistory, tempSensorHistory, weatherHistory), | |
| axes: { | |
| 'Heater Status': 'y2' | |
| }, | |
| types: { | |
| 'Heater Status': 'area', | |
| 'Temperature': 'spline', | |
| 'Weather': 'line', | |
| 'On Temp': 'line', | |
| 'Off Temp': 'line' | |
| } | |
| }; | |
| }; | |
| const onComponentDidUpdate = (domNode, state) => { | |
| let {onTemp, offTemp, heaterHistory, tempSensorHistory, weatherHistory} = state; | |
| console.log(tempSensorHistory); | |
| chart.load({ | |
| columns: formatColumns(onTemp, offTemp, heaterHistory, tempSensorHistory, weatherHistory) | |
| }); | |
| }; | |
| const onComponentDidMount = (domNode, state) => { | |
| let {onTemp, offTemp, heaterHistory, tempSensorHistory, weatherHistory} = state; | |
| console.log(tempSensorHistory); | |
| chart = c3.generate({ | |
| bindto: '#chart', | |
| data: formatData(onTemp, offTemp, heaterHistory, tempSensorHistory, weatherHistory), | |
| point: { | |
| show: false | |
| }, | |
| spline: { | |
| interpolation: { | |
| type: 'linear' | |
| }, | |
| }, | |
| line: { | |
| connectNull: true | |
| }, | |
| axis: { | |
| x: { | |
| type: 'timeseries', | |
| localtime: false, | |
| tick: { | |
| rotate: -60, | |
| format: '%Y-%m-%d %H:%M' | |
| }, | |
| height: 180 | |
| }, | |
| y: { | |
| label: { | |
| text: 'Temperature', | |
| position: 'outer-middle' | |
| } | |
| }, | |
| y2: { | |
| show: true, | |
| label: { | |
| text: 'Heater Status', | |
| position: 'outer-middle' | |
| }, | |
| tick: { | |
| count: 2, | |
| values: [0, 1] | |
| } | |
| } | |
| } | |
| }); | |
| }; | |
| const HistoryChartInner = () => { | |
| return ( | |
| <div id='chart' /> | |
| ) | |
| }; | |
| const HistoryChart = (state) => { | |
| let {onTemp, offTemp, heaterHistory, tempSensorHistory, weatherHistory} = state; | |
| console.log(tempSensorHistory); | |
| return ( | |
| <HistoryChartInner | |
| heaterHistory={heaterHistory} | |
| tempSensorHistory={tempSensorHistory} | |
| weatherHistory={weatherHistory} | |
| onTemp={onTemp} | |
| offTemp={offTemp} | |
| onComponentDidMount={onComponentDidMount} | |
| onComponentDidUpdate={onComponentDidUpdate} | |
| onComponentShouldUpdate={onComponentShouldUpdate} /> | |
| ) | |
| }; | |
| export default HistoryChart; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment