Resolve #7

stats-show · Sep 16, 2016 · 34646ce · 34646ce
1 parent 516f193
commit 34646ce
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 28 deletions.
diff --git a/src/components/RatioChart/index.css b/src/components/RatioChart/index.css
@@ -2,14 +2,20 @@
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
+  flex-grow: 1;
   justify-content: space-around;
+  flex-basis: 800px;
+  width: 800px;
   min-height: 80vh;
 }
 
-.RatioChart {
-  width: 800px;
-  flex-basis: 800px;
-  flex-grow: 1;
+.RatioChart-loading {
+  width: 1000px;
+  height: 500px;
+  text-align: center;
+  vertical-align: middle;
+  line-height: 500px;
+  font-size: 16px;
 }
 
 .RatioChart-settings {

diff --git a/src/components/RatioChart/index.js b/src/components/RatioChart/index.js
@@ -125,30 +125,33 @@ class RatioChart extends Component {
           Javascript open-source projects ratio chart
         </h2>
         <div className="RatioChart-container">
-          <XYPlot animation={true}
-            width={1000} height={500} 
-            margin={{left: 70, right: 30, top: 30, bottom: 40}}>
-            <HorizontalGridLines />
-            <XAxis title={fieldNames[xField]} tickTotal={5} />
-            <YAxis title={fieldNames[yField]} tickTotal={8} />
-            {visibleDataTypes.map(key =>
-              <MarkSeries
-                key={key}
-                size={key === highlightedType ? 16 : 6}
-                color={colors[key]}
-                data={mappedData[key]}
-                xType="time"
-                onValueMouseOver={this._rememberValue}
-                onValueMouseOut={this._forgetValue}
-                onValueClick={this._navigateToGithubRepo}
-              />
-            )}
-            { value ?
-              <Hint value={value}>
-                <StatsItem data={value}/>
-              </Hint> : null
-            }
-          </XYPlot>
+          {data.length === 0 ?
+            <div className="RatioChart-loading">Loading...</div> :
+            <XYPlot animation={true}
+              width={1000} height={500} 
+              margin={{left: 70, right: 30, top: 30, bottom: 40}}>
+              <HorizontalGridLines />
+              <XAxis title={fieldNames[xField]} tickTotal={5} />
+              <YAxis title={fieldNames[yField]} tickTotal={8} />
+              {visibleDataTypes.map(key =>
+                <MarkSeries
+                  key={key}
+                  size={key === highlightedType ? 16 : 6}
+                  color={colors[key]}
+                  data={mappedData[key]}
+                  xType="time"
+                  onValueMouseOver={this._rememberValue}
+                  onValueMouseOut={this._forgetValue}
+                  onValueClick={this._navigateToGithubRepo}
+                />
+              )}
+              { value ?
+                <Hint value={value}>
+                  <StatsItem data={value}/>
+                </Hint> : null
+              }
+            </XYPlot>
+          }
         </div>
         <div className="RatioChart-settings">
           <div>