remove scss dependencies

Author: samueldelesque

components/charts/area/area.jsx

@@ -1,12 +1,12 @@
 import React, {Component} from 'react'
 import ReactDOM from 'react-dom'
 import moment from 'moment'
-
 import Chart from '../chart/chart'
 
 /*
  *   - x axis is always time.
  *   - data is given as [{time: TIMESTAMP, value: VALUE, label: LABEL}]
+ *   - TIMESTAMP is in UNIX_MS
  *   - @TODO:
           • multiple lines as [[{time: TIMESTAMP, value: VALUE}, ...], [{time: TIMESTAMP, value: VALUE}, ...] ...])
  *
@@ -147,8 +147,8 @@ export default class Area extends Component{
     return data.map((point, index) => {
         if(index === 0 || index === data.length - 1) return
         if(data[index+1]) followingTime = data[index+1].time
-        if(!point.label) point.label = point.label
         else followingTime = point.time + intervalLength
+        if(!point.label) point.label = label
 
         let xBase = (point.time - xMin) * xScale,
             key = 'point_' + index + '_tooltip',
@@ -338,11 +338,12 @@ export default class Area extends Component{
     this.activeWidth = this.props.width
     this.activeHeight = this.props.height - 50 // add 50 px in the bottom for the labels
 
-    // Let's ensure all data has a timeStamp, and set it in ms if time is in seconds
+    // Let's ensure all data has a timeStamp
     data.forEach((point,index)=>{
       if(!point.time){
         data[index].time = index
       }
+      data[index].time = parseFloat(data[index].time)
     })
 
     // let xMax = this.props.data.length - 1

components/charts/bar-metric/bar-metric.jsx

@@ -1,31 +1,65 @@
 import React from 'react'
-import './bar-metric.scss'
 
 export default class Bar extends React.Component{
   static defaultProps = {
     metricName: 'points',
     value: 0,
     percent: 100,
+    metricPadding: 15,
+    metricColor: '#777',
+    barWidth: 70,
+    barHeight: 7,
+    barRailColor: '#ddd',
+    barColor: '#408AE5',
     label: 'N/A'
   }
 
   static propTypes = {
     metricName: React.PropTypes.string,
     value: React.PropTypes.number,
     percent: React.PropTypes.number,
+    barWidth: React.PropTypes.number,
+    barHeight: React.PropTypes.number,
+    metricPadding: React.PropTypes.number,
     label: React.PropTypes.string,
+    metricColor: React.PropTypes.string,
+    barColor: React.PropTypes.string,
+    barRailColor: React.PropTypes.string,
   }
 
   render(){
     return (
-      <div className="bar-metric clearfix" key={`bar-metric.${Math.random()}`}>
-        <div className="label">{this.props.label}</div>
+      <div>
+        <div style={{fontSize: 13, textTransform: 'uppercase'}}>{this.props.label}</div>
         <div className="bar-row">
-          <div className="bar-container">
-            <div className="bar-completed" style={{width: parseFloat(this.props.percent) + '%'}}></div>
+          <div style={{
+              backgroundColor: this.props.barRailColor,
+              width: this.props.barWidth + '%',
+              height: this.props.barHeight,
+              marginTop:4,
+              display: 'inline-block',
+              position: 'relative'}}>
+            <div style={{
+                width: this.props.percent + '%',
+                height: this.props.barHeight,
+                position: 'absolute',
+                backgroundColor: this.props.barColor,
+                top: 0,
+                left: 0,
+                bottom: 0,
+                transition: 'all .5s'}}></div>
+          </div>
+          <div style={{
+              width: 100 - this.props.barWidth + '%',
+              paddingLeft: this.props.metricPadding,
+              fontSize: 13,
+              display: 'inline-block',
+              color: this.props.metricColor,
+              textAlign: 'right'}}>
+              {(this.props.value ? this.props.value + " " : "") + this.props.metricName}
           </div>
-          <div className="metric">{(this.props.value ? this.props.value + " " : "") + this.props.metricName}</div>
         </div>
+        <br style={{display: 'table',clear: 'both'}}/>
       </div>
     )
   }

components/charts/bar-metric/bar-metric.scss

@@ -5,13 +5,13 @@ export default class demoData {
 
   constructor(settings){
     this.settings = Object.assign({
-      startDate: moment(),
-      endDate: moment(),
+      startDate: Date.now(),
+      endDate: Date.now(),
       maxPoints: 31
     }, settings)
 
-    this.settings.startDate = moment(this.settings.startDate)
-    this.settings.endDate = moment(this.settings.endDate)
+    this.settings.startDate = moment(parseInt(this.settings.startDate))
+    this.settings.endDate = moment(parseInt(this.settings.endDate))
   }
 
   cleanGraphData(data = []){
@@ -20,7 +20,7 @@ export default class demoData {
     data.forEach((point, i)=>{if(!point.time)data[i].time = point.id || 0;results.push(point)})
 
     // Convert unix time to ms unix time
-    results.forEach((point, i)=>{if(results[i].format !== 'x'){results[i].time = parseFloat(point.time) * 1000;results[i].format = 'x'}})
+    // results.forEach((point, i)=>{if(results[i].format !== 'x'){results[i].time = parseFloat(point.time) * 1000;results[i].format = 'x'}})
 
     // Remove data which is out of range
     let s = parseFloat(this.settings.startDate.format('x')),
@@ -53,9 +53,9 @@ export default class demoData {
 }
 
 // FIXTURES
-function genGraphData(startDate, endDate, intervalLength=86400){
+function genGraphData(startDate, endDate, intervalLength=86400000){
   let range = Math.abs(moment(startDate).diff(moment(endDate), 'days'))
-  let views = [], value = 3000, steps = range / 7, growth = [1,-1,1,-2,2,3,5], startTime = parseInt(moment(startDate).format('X'))
+  let views = [], value = 3000, steps = range / 7, growth = [1,-1,1,-2,2,3,5], startTime = parseInt(moment(startDate).format('x'))
   for(let i = 0;i<range;i++){
     let val = Math.abs(value + (1000 * growth[Math.floor(i/steps)]) + Math.round(Math.random() * 3000))
     views.push({time: startTime + i * intervalLength, value: val, label: '{{value}} cats online'})

components/demo/demo-data.jsx

@@ -40,8 +40,8 @@ export default class Demo extends React.Component {
 
   updateInput(){
     let settings = {
-      startDate: this.state.startDate.format(),
-      endDate: this.state.endDate.format(),
+      startDate: this.state.startDate.format('x'),
+      endDate: this.state.endDate.format('x'),
       maxPoints: this.state.maxPoints
     }
     let data = new DemoData(settings)

components/demo/demo.jsx

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-charts",
-  "version": "0.0.15",
+  "version": "0.0.18",
   "description": "",
   "scripts": {
     "build:webpack": "NODE_ENV=production webpack --config webpack.config.prod.js",