cosmetic fixes

ashok1994 · ashok1994 · commit 7a449448f88e · 2018-08-14T15:46:51.000+05:30
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html><head><meta charset="utf-8"><title>Angular FusionCharts</title><base href=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.1f9a0e540f566da2a999.bundle.css" rel="stylesheet"/></head><body><app>Loading...</app><script type="text/javascript" src="inline.74724e8559d92762bfa7.bundle.js"></script><script type="text/javascript" src="polyfills.adb2df9f86a0c3842e67.bundle.js"></script><script type="text/javascript" src="vendor.4026c91425e286cffeef.bundle.js"></script><script type="text/javascript" src="main.576fb23018ffb4e98ff1.bundle.js"></script></body></html>
+<!doctype html><html><head><meta charset="utf-8"><title>Angular FusionCharts</title><base href=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.1f9a0e540f566da2a999.bundle.css" rel="stylesheet"/></head><body><app>Loading...</app><script type="text/javascript" src="inline.acd086f455812bceb18f.bundle.js"></script><script type="text/javascript" src="polyfills.adb2df9f86a0c3842e67.bundle.js"></script><script type="text/javascript" src="vendor.4026c91425e286cffeef.bundle.js"></script><script type="text/javascript" src="main.9710a6089f5c000d2c51.bundle.js"></script></body></html>
diff --git a/docs/inline.acd086f455812bceb18f.bundle.js b/docs/inline.acd086f455812bceb18f.bundle.js
diff --git a/docs/main.576fb23018ffb4e98ff1.bundle.js b/docs/main.576fb23018ffb4e98ff1.bundle.js
diff --git a/docs/main.9710a6089f5c000d2c51.bundle.js b/docs/main.9710a6089f5c000d2c51.bundle.js
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -34,6 +34,8 @@ import { Ex19 } from "./fusioncharts/ex19/ex19";
 import { Ex20 } from "./fusioncharts/ex20/ex20";
 import { Ex21 } from "./fusioncharts/ex21/ex21";
 import { Ex22 } from "./fusioncharts/ex22/ex22";
+
+import { SafeHtmlPipe } from "./pipes/trustAsHtml";
 import { TabbedCode } from "./fusioncharts/tabbedComponent/tabbed.code.component";
 
 import { Navigation, NavService, ObservingComponent, MyAppComponent } from './observable/observable.component';
@@ -115,6 +117,7 @@ FusionChartsModule.fcRoot(
     Ex20,
     Ex21,
     Ex22,
+    SafeHtmlPipe,
     Navigation, ObservingComponent, MyAppComponent,
     CodePrev,
     AppComponent,
diff --git a/src/app/fusioncharts/ex15/ex15.html b/src/app/fusioncharts/ex15/ex15.html
@@ -9,7 +9,7 @@
           [dataSource]="dataSource"
           (rendered)="chartRender($event)">
         </fusioncharts>
-        <p style="padding: 10px;background:#f5f2f0">{{message || 'You will see a notification here after chart completes rendering.'}}</p>
+        <p style="padding: 10px;background:#efefef">{{message || 'You will see a notification here after chart completes rendering.'}}</p>
     </div>
   </div>
 </div>
diff --git a/src/app/fusioncharts/ex16/ex16.html b/src/app/fusioncharts/ex16/ex16.html
@@ -10,7 +10,7 @@
         (dataplotDragStart)="dragStart($event)"
         (dataplotDragEnd)="dragEnd($event)">
       </fusioncharts>
-      <p style="padding: 10px;background:#f5f2f0">{{message}}</p>
+      <p style="padding: 10px;background:#f5f2f0" [innerHTML]="message | trustAsHtml"></p>
     </div>
   </div>
 </div>
diff --git a/src/app/fusioncharts/ex16/ex16.ts b/src/app/fusioncharts/ex16/ex16.ts
@@ -25,7 +25,7 @@ export class Ex16 {
 
   // Format message
   getMessage(datasetname, startvalue, finalvalue){
-   return `You have dragged a plot of ${datasetname} dataset, its previous value was ${startvalue} and its current value is ${finalvalue}` 
+   return `You have dragged a plot of <b style='font-weight:bold;'>${datasetname || '______'}</b> dataset, its previous value was <b style='font-weight:bold'>${startvalue || '________'}</b> and its current value is <b style='font-weight:bold'>${finalvalue || '________'}</b>` 
   }
 
   constructor(private zone: NgZone) {
@@ -94,7 +94,9 @@ export class Ex16 {
           "value": "900000"
         }]
       }]
-    }
+    };
+
+    this.message = this.getMessage(null, null, null);
   }
 
 
diff --git a/src/app/fusioncharts/ex17/ex17.html b/src/app/fusioncharts/ex17/ex17.html
@@ -21,7 +21,7 @@
           (initialized)="initialized($event)">
         </fusioncharts>
 
-      <p style="padding:10px; background: '#f5f2f0'">{{message}}</p>
+      <p style="padding:10px; background: #efefef" [innerHTML]="initMessage || message"></p>
       <p>
         <a class="btn btn-outline-secondary btn-sm" (click)="attachEvent()">Track Data Plot Clicks</a>
         <a class="btn btn-outline-secondary btn-sm" (click)="removeEvent()">Reset</a>
diff --git a/src/app/fusioncharts/ex17/ex17.ts b/src/app/fusioncharts/ex17/ex17.ts
@@ -21,8 +21,14 @@ export class Ex17 {
   message: string;
   chartObj: any;
   handler:any;
+  initMessage:any;
+  iMsg:string;
+  clickPlotMsg:string;
   constructor(private zone: NgZone) {
-    this.message = 'Click on the plot to see the value along with the label';
+    this.iMsg = 'Click on <b>Track Data Plot Clicks</b> button to listen to dataplotclick event';
+    this.initMessage = this.iMsg;
+    this.clickPlotMsg = 'Click on the plot to see the value along with the label';
+    this.message = this.clickPlotMsg;
     this.dataSource = {
       "chart": {
           "caption": "Countries With Most Oil Reserves [2017-18]",
@@ -70,7 +76,7 @@ export class Ex17 {
   }
 
   getMessage(dataObj){
-    return `You have clicked on plot ${dataObj.categoryLabel} whose value is ${dataObj.displayValue}`
+    return `You have clicked on plot <b style='font-weight:bold'>${dataObj.categoryLabel}</b> whose value is <b style='font-weight:bold'>${dataObj.displayValue}</b>`
   }
 
   dataplotClickHandler(eventObj, dataObj){
@@ -85,10 +91,14 @@ export class Ex17 {
 
   attachEvent(){
     this.handler = this.dataplotClickHandler.bind(this);
+    this.initMessage = '';
+    this.message = this.clickPlotMsg;
     this.chartObj.addEventListener('dataplotClick',this.handler);
   }
 
   removeEvent(){
+    this.initMessage = this.iMsg;
+    this.message = this.clickPlotMsg;
     this.chartObj.removeEventListener('dataplotClick', this.handler);
   }
 
diff --git a/src/app/fusioncharts/ex7/ex7.html b/src/app/fusioncharts/ex7/ex7.html
@@ -1,3 +1,9 @@
+<style>
+    b{
+        font-weight: bold;
+    }
+</style>
+
 <div class="card shadow">
     <div class="card-body chart-wrapper">
         <div class="chart-wrapper-inner">
@@ -8,7 +14,7 @@
                 [dataSource]="dataSource"
                 (dataplotRollOver)="update($event)">
             </fusioncharts>
-            <p style="font-size:20px;font-weight: 300;">You're are currently hovering over <u>{{selectedLabel || "______"}}</u> whose value is <u>{{selectedValue || "_______"}} </u></p>
+            <p style="font-size:18px;font-weight: 300;padding:10px;background:#efefef">You're are currently hovering over <b >{{selectedLabel || "______"}}</b> whose value is <b>{{selectedValue || "_______"}} </b></p>
         </div>
     </div>
 </div>
diff --git a/src/app/fusioncharts/ex9/ex9.html b/src/app/fusioncharts/ex9/ex9.html
@@ -8,6 +8,7 @@
         font-size: 20px;
         width: 100%;
         font-weight: 300;
+        background: #efefef;
     }    
 </style>
 <div class="card shadow">
@@ -20,7 +21,7 @@
                 [events]="events"
                 [dataSource]="dataSource">
             </fusioncharts>
-            <div class='log-pane'>{{logMessage}}</div>
+            <div class='log-pane' [innerHTML]="logMessage | trustAsHtml"></div>
         </div>
     </div>
 </div>
diff --git a/src/app/fusioncharts/ex9/ex9.ts b/src/app/fusioncharts/ex9/ex9.ts
@@ -58,7 +58,7 @@ export class Ex9 {
             this.zone.run(() => {
                 
                 let value = (arg.value / this.total * 100).toFixed(2);
-                this.logMessage = arg.categoryLabel + " is  " + value + "% of the total";
+                this.logMessage = `<b style='font-weight:bold'>${arg.categoryLabel}</b> is  <b style='font-weight:bold'>${value}%</b> of the total`
             })
         }
     }
diff --git a/src/app/fusioncharts/samplecode.ts b/src/app/fusioncharts/samplecode.ts
diff --git a/src/app/pipes/trustAsHtml.ts b/src/app/pipes/trustAsHtml.ts

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-<!doctype html><html><head><meta charset="utf-8"><title>Angular FusionCharts</title><base href=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.1f9a0e540f566da2a999.bundle.css" rel="stylesheet"/></head><body><app>Loading...</app><script type="text/javascript" src="inline.74724e8559d92762bfa7.bundle.js"></script><script type="text/javascript" src="polyfills.adb2df9f86a0c3842e67.bundle.js"></script><script type="text/javascript" src="vendor.4026c91425e286cffeef.bundle.js"></script><script type="text/javascript" src="main.576fb23018ffb4e98ff1.bundle.js"></script></body></html>
	`1`	+<!doctype html><html><head><meta charset="utf-8"><title>Angular FusionCharts</title><base href=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.1f9a0e540f566da2a999.bundle.css" rel="stylesheet"/></head><body><app>Loading...</app><script type="text/javascript" src="inline.acd086f455812bceb18f.bundle.js"></script><script type="text/javascript" src="polyfills.adb2df9f86a0c3842e67.bundle.js"></script><script type="text/javascript" src="vendor.4026c91425e286cffeef.bundle.js"></script><script type="text/javascript" src="main.9710a6089f5c000d2c51.bundle.js"></script></body></html>