From f710fb249d9b200dc36fe048dac26da5988e091b Mon Sep 17 00:00:00 2001
From: AyanGhatak <ghatak.ayan.btech@gmail.com>
Date: Tue, 3 Jan 2017 08:38:26 +0530
Subject: [PATCH 1/2] Improve demo example using longer texts.

- Unless the text is long, there wont be substantial usage of this wrapping capabilities.

- The text should be long enough to show the ellipsis.

- Highlight the instruction to modify the texts is highlighted.
---
 example/src/components/html-text-live-demo.js |  4 +-
 example/src/components/svg-text-live-demo.js  |  4 +-
 example/src/example.less                      |  7 ++++
 example/src/index.html                        | 38 +++++++++----------
 4 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/example/src/components/html-text-live-demo.js b/example/src/components/html-text-live-demo.js
index 18a1694..0f94950 100644
--- a/example/src/components/html-text-live-demo.js
+++ b/example/src/components/html-text-live-demo.js
@@ -3,9 +3,9 @@ var React = require('react');
 class HTMLTextLiveDemo extends React.Component {
 	constructor(props) {
 		super(props);
-		
+
 		this.state = {
-			text: 'a quick brown fox'		
+			text: 'A quick brown fox. A quick brown fox. A quick brown fox. A quick brown fox.A quick brown fox. A quick brown fox. A quick brown fox.'
 		};
 	}
 
diff --git a/example/src/components/svg-text-live-demo.js b/example/src/components/svg-text-live-demo.js
index 1d7aff4..93dd52f 100644
--- a/example/src/components/svg-text-live-demo.js
+++ b/example/src/components/svg-text-live-demo.js
@@ -5,9 +5,9 @@ var React = require('react'),
 class SVGTextLiveDemo extends React.Component {
 	constructor(props) {
 		super(props);
-		
+
 		this.state = {
-			text: 'a quick brown fox',
+			text: 'A quick brown fox. A quick brown fox. A quick brown fox. A quick brown fox.A quick brown fox. A quick brown fox. A quick brown fox.',
 			ellipsis: true,
 			wrap: true
 		};
diff --git a/example/src/example.less b/example/src/example.less
index 35b76b4..ff5cec1 100644
--- a/example/src/example.less
+++ b/example/src/example.less
@@ -110,6 +110,13 @@ label {
 	font-weight: 500;
 }
 
+.demo-instruction {
+	background: rgba(249, 167, 26, 0.46);
+	border: 1px solid #f1b650;
+	padding: 7px;
+	border-radius: 2px;
+}
+
 .fc-demo-pane-text {
 	font-size: 12px;
 }
diff --git a/example/src/index.html b/example/src/index.html
index c306149..4a61454 100644
--- a/example/src/index.html
+++ b/example/src/index.html
@@ -15,21 +15,21 @@ <h2>
 			<a href="https://github.com/fusioncharts/fusioncharts-smartlabel">View Documentation on GitHub</a>
 			<a href="http://www.fusioncharts.com/" style="float: right">Checkout FusionCharts</a>
 		</h2>
-		
+
 		<div class='fc-sl-demo-container'>
 			<p class="demo-heading">
 				What happens if a text is rendered in a <code>div</code> which has specific height and width.
 			</p>
 			<div id="html-auto-text-ops-demo-1" style="float: left; width: 30%"></div>
 			<div class="demo-desc">
-				<p> 
-					This example uses basic html elements to render the concept. 
+				<p>
+					This example uses basic html elements to render the concept.
 				</p>
-				<p> 
+				<p>
 					What happens when the text is made long so that it can't be contained in the <code>div</code> ? DOM automatically breaks it and position the remaining part in the following line.
 				</p>
-				<p>
-					Change the text in the textbox to see the effect. 
+				<p class="demo-instruction">
+					Change the text in the textbox to see the effect.
 				</p>
 			</div>
 		</div>
@@ -40,14 +40,14 @@ <h2>
 			</p>
 			<div id="svg-def-text-ops-demo-1" style="float: left; width: 30%"></div>
 			<div class="demo-desc">
-				<p> 
-					This example uses svg elements to render the concept. 
+				<p>
+					This example uses svg elements to render the concept.
 				</p>
-				<p> 
+				<p>
 					What happens when the text is made long so that it can't be contained in the <code>svg bound box</code> ? Unlike the text contained in the div, <b>it does not get wrapped automatically</b>. This is the sole reason for label overlapping in a visualization library
 				</p>
-				<p>
-					Change the text in the textbox to see the effect. 
+				<p class="demo-instruction">
+					Change the text in the textbox to see the effect.
 				</p>
 			</div>
 		</div>
@@ -58,22 +58,22 @@ <h2>
 			</p>
 			<div id="svg-sl-def-text-ops-demo-1" style="float: left; width: 30%"></div>
 			<div class="demo-desc">
-				<p> 
-					This example uses svg elements to render the concept. 
+				<p>
+					This example uses svg elements to render the concept.
 				</p>
-				<p> 
+				<p>
 					With <code>SmartLabel</code> a text cant be wrapped if a bound box is defined. More over if a bound box is completely exhausted the text can be truncated with or without ellipsis.
 				</p>
-				<p>
-					Change the text in the textbox to see the effect. 
+				<p class="demo-instruction">
+					Change the text in the textbox to see the effect.
 				</p>
 			</div>
 		</div>
-			
+
 		<div class="hint">
-			
+
 		</div>
-		
+
 		<div class="footer">
 			Copyright &copy; 2016 FusionCharts Technologies  &lt;support@fusioncharts.com&gt;.
 		</div>

From 460c5f9f82a36c3a74825f5ee2621410407558df Mon Sep 17 00:00:00 2001
From: AyanGhatak <ghatak.ayan.btech@gmail.com>
Date: Tue, 3 Jan 2017 08:38:26 +0530
Subject: [PATCH 2/2] Improve demo example using longer texts.

- Unless the text is long, there wont be substantial usage of this wrapping capabilities.

- The text should be long enough to show the ellipsis.

- Highlight the instruction to modify the texts is highlighted.
---
 example/src/components/html-text-live-demo.js |  4 +-
 example/src/components/svg-text-live-demo.js  |  4 +-
 example/src/example.less                      |  7 ++++
 example/src/index.html                        | 38 +++++++++----------
 4 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/example/src/components/html-text-live-demo.js b/example/src/components/html-text-live-demo.js
index 18a1694..0f94950 100644
--- a/example/src/components/html-text-live-demo.js
+++ b/example/src/components/html-text-live-demo.js
@@ -3,9 +3,9 @@ var React = require('react');
 class HTMLTextLiveDemo extends React.Component {
 	constructor(props) {
 		super(props);
-		
+
 		this.state = {
-			text: 'a quick brown fox'		
+			text: 'A quick brown fox. A quick brown fox. A quick brown fox. A quick brown fox.A quick brown fox. A quick brown fox. A quick brown fox.'
 		};
 	}
 
diff --git a/example/src/components/svg-text-live-demo.js b/example/src/components/svg-text-live-demo.js
index 1d7aff4..93dd52f 100644
--- a/example/src/components/svg-text-live-demo.js
+++ b/example/src/components/svg-text-live-demo.js
@@ -5,9 +5,9 @@ var React = require('react'),
 class SVGTextLiveDemo extends React.Component {
 	constructor(props) {
 		super(props);
-		
+
 		this.state = {
-			text: 'a quick brown fox',
+			text: 'A quick brown fox. A quick brown fox. A quick brown fox. A quick brown fox.A quick brown fox. A quick brown fox. A quick brown fox.',
 			ellipsis: true,
 			wrap: true
 		};
diff --git a/example/src/example.less b/example/src/example.less
index 35b76b4..ff5cec1 100644
--- a/example/src/example.less
+++ b/example/src/example.less
@@ -110,6 +110,13 @@ label {
 	font-weight: 500;
 }
 
+.demo-instruction {
+	background: rgba(249, 167, 26, 0.46);
+	border: 1px solid #f1b650;
+	padding: 7px;
+	border-radius: 2px;
+}
+
 .fc-demo-pane-text {
 	font-size: 12px;
 }
diff --git a/example/src/index.html b/example/src/index.html
index c306149..4a61454 100644
--- a/example/src/index.html
+++ b/example/src/index.html
@@ -15,21 +15,21 @@ <h2>
 			<a href="https://github.com/fusioncharts/fusioncharts-smartlabel">View Documentation on GitHub</a>
 			<a href="http://www.fusioncharts.com/" style="float: right">Checkout FusionCharts</a>
 		</h2>
-		
+
 		<div class='fc-sl-demo-container'>
 			<p class="demo-heading">
 				What happens if a text is rendered in a <code>div</code> which has specific height and width.
 			</p>
 			<div id="html-auto-text-ops-demo-1" style="float: left; width: 30%"></div>
 			<div class="demo-desc">
-				<p> 
-					This example uses basic html elements to render the concept. 
+				<p>
+					This example uses basic html elements to render the concept.
 				</p>
-				<p> 
+				<p>
 					What happens when the text is made long so that it can't be contained in the <code>div</code> ? DOM automatically breaks it and position the remaining part in the following line.
 				</p>
-				<p>
-					Change the text in the textbox to see the effect. 
+				<p class="demo-instruction">
+					Change the text in the textbox to see the effect.
 				</p>
 			</div>
 		</div>
@@ -40,14 +40,14 @@ <h2>
 			</p>
 			<div id="svg-def-text-ops-demo-1" style="float: left; width: 30%"></div>
 			<div class="demo-desc">
-				<p> 
-					This example uses svg elements to render the concept. 
+				<p>
+					This example uses svg elements to render the concept.
 				</p>
-				<p> 
+				<p>
 					What happens when the text is made long so that it can't be contained in the <code>svg bound box</code> ? Unlike the text contained in the div, <b>it does not get wrapped automatically</b>. This is the sole reason for label overlapping in a visualization library
 				</p>
-				<p>
-					Change the text in the textbox to see the effect. 
+				<p class="demo-instruction">
+					Change the text in the textbox to see the effect.
 				</p>
 			</div>
 		</div>
@@ -58,22 +58,22 @@ <h2>
 			</p>
 			<div id="svg-sl-def-text-ops-demo-1" style="float: left; width: 30%"></div>
 			<div class="demo-desc">
-				<p> 
-					This example uses svg elements to render the concept. 
+				<p>
+					This example uses svg elements to render the concept.
 				</p>
-				<p> 
+				<p>
 					With <code>SmartLabel</code> a text cant be wrapped if a bound box is defined. More over if a bound box is completely exhausted the text can be truncated with or without ellipsis.
 				</p>
-				<p>
-					Change the text in the textbox to see the effect. 
+				<p class="demo-instruction">
+					Change the text in the textbox to see the effect.
 				</p>
 			</div>
 		</div>
-			
+
 		<div class="hint">
-			
+
 		</div>
-		
+
 		<div class="footer">
 			Copyright &copy; 2016 FusionCharts Technologies  &lt;support@fusioncharts.com&gt;.
 		</div>