public/components/visualizations/Counts.jsx

// Licensed to the Apache Software Foundation (ASF) under one or more
// contributor license agreements.  See the NOTICE file distributed with
// this work for additional information regarding copyright ownership.
// The ASF licenses this file to You 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.

import React, { Component, PropTypes } from 'react';

import VerticalBar from './VerticalBar';
import HorizontalBar from './HorizontalBar';

class Counts extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedGroup : '',
      selectedActivity : '',
    };

    this.selectGroup = this.selectGroup.bind(this);
    this.selectActivity = this.selectActivity.bind(this);
  }

  selectGroup(group) {
    this.setState({ selectedGroup : group, selectedActivity : '' });
  }

  selectActivity(activity) {
    this.setState({ selectedActivity : activity });
  }

  render() {
    var dataSubset = subset(this.props.data, this.props.filters);

    var selectedGroup = this.state.selectedGroup;
    if (selectedGroup == '') {
      selectedGroup = Object.keys(dataSubset)[0];
    }

    var selectedActivity = this.state.selectedActivity;
    if (selectedActivity == '') {
      selectedActivity = Object.keys(dataSubset[selectedGroup].activities)[0];
    }

    var activity = dataSubset[selectedGroup].activities[selectedActivity];

    return(
      <div className='ui grid'>
        <div className='sixteen wide column'>
          <VerticalBar grouped={this.props.filters.ab} select={this.selectGroup} data={(() => {
            var groupData = [];

            $.each(dataSubset, (group, logs) => {
              groupData.push({
                id : group,
                selected : (selectedGroup == group),
                ot1 : logs.ot1count,
                ot2 : logs.ot2count,
              });
            });

            return groupData;
          })()} />
        </div>

        <div className='ten wide column'>
          <HorizontalBar grouped={this.props.filters.ab} select={this.selectActivity} data={(() => {
            var activityData = [];

            $.each(dataSubset[selectedGroup].activities, (id, log) => {
              activityData.push({
                id : id,
                name : log.ele,
                selected : (selectedActivity == id),
                ot1 : log.ot1count,
                ot2 : log.ot2count,
              });
            });

            return activityData;
          })()} />
        </div>

        <div className='six wide column'>
          <div id='counts-details' className='ui segment'>
            Activity Details
            <br></br>
            <br></br>
            Name: {activity.name}
            <br></br>
            Element: {activity.ele}
            <br></br>
            Group: {activity.group}
            <br></br>
            OT1: {activity.ot1count}
            <br></br>
            OT2: {activity.ot2count}
          </div>
        </div>
      </div>
    );
  }
}

function subset(data, filters) {
  preprocessData(data);

  var dataSubset = data.filter((p) => {
    return (filters.gender === 0 || filters.gender == p.intake_data.demographics.Gender) && (filters.educationlevels.includes(+p.intake_data.education["Most school completed"]));
  });

  var logs = {};

  dataSubset.forEach((p) => {
    $.each(p.ot1logs, (id, log) => {
      if (!logs.hasOwnProperty(log.group)) {
        logs[log.group] = {
          group : log.group,
          ot1count : 0,
          ot2count : 0,
          activities : {},
        };
      }

      if (!logs[log.group].activities.hasOwnProperty(log.id)) {
        logs[log.group].activities[log.id] = {
          id : id,
          ot1count : 0,
          ot2count : 0,
          name : log.name,
          ele : log.ele,
          group : log.group,
        }
      }

      logs[log.group].ot1count += log.count;
      logs[log.group].activities[log.id].ot1count += log.count;
    });

    $.each(p.ot2logs, (id, log) => {
      if (!logs.hasOwnProperty(log.group)) {
        logs[log.group] = {
          group : log.group,
          ot1count : 0,
          ot2count : 0,
          activities : {},
        };
      }

      if (!logs[log.group].activities.hasOwnProperty(log.id)) {
        logs[log.group].activities[log.id] = {
          id : id,
          ot1count : 0,
          ot2count : 0,
          name : log.name,
          ele : log.ele,
          group : log.group,
        }
      }

      logs[log.group].ot2count += log.count;
      logs[log.group].activities[log.id].ot2count += log.count;
    });
  });

  return logs;
}

function preprocessData(data) {
  data.forEach(function (p) {
    var ot1logs = {};
    var ot2logs = {};

    p.log_data.OT1.logs.log_id.forEach(function (id, i) {
      if (ot1logs.hasOwnProperty(id)) {
        ot1logs[id].count += p.log_data.OT1.logs.count[i];
      } else {
        ot1logs[id] = {
          'id' : id,
          'count' : p.log_data.OT1.logs.count[i],
          'name' : p.log_data.OT1.logs.log_strings[i],
          'ele' : p.log_data.OT1.logs.elementId[i],
          'group' : p.log_data.OT1.logs.elementGroup[i]
        };
      }
    });

    p.log_data.OT2.logs.log_id.forEach(function (id, i) {
      if (ot2logs.hasOwnProperty(id)) {
        ot2logs[id].count += p.log_data.OT2.logs.count[i];
      } else {
        ot2logs[id] = {
          'id' : id,
          'count' : p.log_data.OT2.logs.count[i],
          'name' : p.log_data.OT2.logs.log_strings[i],
          'ele' : p.log_data.OT2.logs.elementId[i],
          'group' : p.log_data.OT2.logs.elementGroup[i]
        };
      }
    });

    p.ot1logs = ot1logs;
    p.ot2logs = ot2logs;

  });
}

Counts.propTypes = {
  data : PropTypes.array,
};

export default Counts;