@mooretodd/survey - npm Package Compare versions

Comparing version 0.0.16 to 0.0.17

description/Description.react.js

 import React from 'react';
 import uuid from 'node-uuid';
 import Rating from './../rating/Rating.react.js';
+import styles from './styles.css';
 
@@ -9,8 +10,15 @@ const Description = React.createClass({
         return (
-            <li key={uuid.v4()}>
-                <div>
+            <tr key={uuid.v4()}>
+                <td className={styles.label}>
                     {label}
-                    <Rating {...{rating}} />
-                </div>
-            </li>
+                </td>
+                <td className={styles.responses}>{rating.count}</td>
+                <td className={styles.rating}>
+                    <Rating
+                        width={50}
+                        height={20}
+                        margin={{left: 0, top: 0, bottom: 0, right: 0}}
+                        {...{rating}} />
+                </td>
+            </tr>
         )
@@ -17,0 +25,0 @@ }

package.json

 {
   "name": "@mooretodd/survey",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "",
@@ -5,0 +5,0 @@ "main": "index.js",

rating/Rating.react.js

 import React from 'react';
+import d3 from "d3";
+import styles from './style.css';
+import R from 'ramda';
 
+const renderContainer = ({el, width, height, margin}) => {
+    const svg = d3.select(el).append('svg')
+        .attr('class', styles.svg)
+        .attr('width', width + margin.left + margin.right)
+        .attr('height', height + margin.top + margin.bottom)
+        .append('g')
+        .attr('transform', `translate(${margin.left}, ${margin.top})`);
+
+    return {svg};
+};
+
+const getValue = (rating, key) => parseInt(rating[key]) || 0;
+
+const parseRating = rating => Object.assign({
+    positive: getValue(rating, '4') + getValue(rating, '5'),
+    negative: getValue(rating, '1') + getValue(rating, '2'),
+});
+
+const created3Rating = rating => key => ({
+    name: key,
+    value: key === 'negative' ? 
+        (R.prop(key, rating) || 0) * -1 : R.prop(key, rating) || 0
+});
+
 const Rating = React.createClass({
+    propTypes: {
+        margin: React.PropTypes.object.isRequired,
+        width: React.PropTypes.number.isRequired,
+        height: React.PropTypes.number.isRequired
+    },
+
     componentDidMount() {
+        const el = this.refs.d3;
+        const {margin, width, height} = this.getLayout();
+        const {svg} = renderContainer({el, width, height, margin});
 
+        Object.assign(this, {
+            svg
+        });
+
+        if (this.props.rating) {
+           this.draw();
+        }
     },
 
+    componentWillUpdate() {
+        this.draw();
+    },
+
+    draw() {
+        const {svg} = this;
+        const {width, height, rating} = this.props;
+        const parsedRating = parseRating(rating);
+        const data = Object.keys(parsedRating).map(created3Rating(parsedRating));
+
+        const x = d3
+            .scale.linear()
+            .range([0, width]);
+
+        const y = d3.scale.ordinal()
+            .rangeRoundBands([0, height], 0.1);
+
+        const xAxis = d3
+            .svg.axis()
+            .scale(x)
+            .orient("bottom");
+
+        x.domain(d3.extent(data, d => d.value)).nice();
+        y.domain(data.map(d => d.name));
+
+        svg.selectAll(".bar")
+            .data(data)
+            .enter().append("rect")
+            .attr("class", d => d.value < 0 ? styles.negative : styles.positive)
+            .attr("x", d => x(Math.min(0, d.value)))
+            .attr("width", d => Math.abs(x(d.value) - x(0)))
+            .attr("height", height);
+
+        svg.append("g")
+            .attr("class", "x axis")
+            .attr("transform", "translate(0," + height + ")")
+            .call(xAxis);
+
+    },
+
+    getLayout() {
+        const {top = 0, right = 0, bottom = 0, left = 0} = this.props.margin;
+        const width = this.props.width - left - right;
+        const height = this.props.height - top - bottom;
+        return {margin: {top, right, bottom, left}, width, height};
+    },
+
     render() {
-        return <div>rating</div>;
+        return <div ref="d3" className={styles.rating}></div>;
     }
@@ -11,0 +101,0 @@ });

survey/Survey.react.js

 import React from 'react';
 import uuid from 'node-uuid';
 import R from 'ramda';
-import request from '@mooretodd/fetch';
-import surveyResult from '@mooretodd/survey_result_detail';
-import Theme from './../theme/Theme.react.js';
+
 import styles from './style.css';
 import classNames from 'classnames/bind';
-import Heading from '@mooretodd/component-heading';
 
+import Theme from './../theme/Theme.react.js';
+import surveyResult from '@mooretodd/survey_result_detail';
+import services from '@mooretodd/services';
+import Heading from '@mooretodd/heading';
+
 const cx = classNames.bind(styles);
 
-const getSurveyResult = request.getSurveyResult(process.env.config);
+const getSurveyResult = services.getSurveyResult(process.env.config);
 
@@ -15,0 +17,0 @@ const Survey = React.createClass({

theme/Theme.react.js

@@ -6,3 +6,3 @@ import React from 'react';
 import classNames from 'classnames/bind';
-import Heading from '@mooretodd/component-heading';
+import Heading from '@mooretodd/heading';
 import styles from './style.css';
@@ -24,6 +24,2 @@
 
-    onClick(e) {
-        e.stopPropagation();
-    },
-
     renderDescription(description) {
@@ -43,9 +39,21 @@ const {ratings} = this.props;
         return (
-            <li onClick={this.onClick} className={styles.theme}>
-                {title}
+            <li className={styles.theme}>
+                <h2 className={styles.themeTitle}>{title}</h2>
                 <div>
-                    <Heading>Descriptions</Heading>
-                    <ul>
-                        {descriptions.map(this.renderDescription)}
-                    </ul>
+                    <table className={styles.table}>
+                        <thead>
+                            <tr>
+                                <th>Question</th>
+                                <th>Responses</th>
+                                <th>Rating</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {descriptions.map(this.renderDescription)}
+                        </tbody>
+                        <caption className={styles.caption}>
+                            <span className={styles.favourable}>Favourable</span>
+                            <span className={styles.unfavourable}>Unfavourable</span>
+                        </caption>
+                    </table>
                 </div>
@@ -52,0 +60,0 @@ </li>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9701

increased by100.06%

Number of package files

10

increased by11.11%

Lines of code

321

increased by89.94%

No dependency changes