[div-less] home page DOM and styles

docs/assets/css/index.css

@@ -1,4 +1,8 @@
 body {
+	/* container styles */
+    max-width: 720px;
+    margin: auto;
+
 	font-family: "proxima-nova", sans-serif;
 	font-size: 15px;
 	color: #6c7680;
@@ -25,11 +29,32 @@ blockquote {
 	color: #36414C;
 }
 
+header {
+	margin: 4rem 0;  /* SAME 1 */
+	font-size: 1.6em;
+	font-weight: 300;
+	text-align: center;
+}
+header .lead-text {
+	line-height: 3rem;
+	margin: 2rem 0;
+}
+.demo-tip {
+	margin-top: 1rem;   /* SAME 2 */
+	font-size: 1rem;
+}
+section {
+	margin: 4em 0;   /* SAME 1 */
+}
+h1 {
+	font-size: 3.5rem;
+    margin-bottom: 1.5rem;
+}
 h1, h6 {
 	font-weight: 700;
 }
-h1 {
-	font-size: 2.13em;
+.btn {
+	outline: none !important;
 }
 .blue.button {
 	color: #fff;
@@ -45,127 +70,28 @@ h1 {
 	padding: 12px 24px 10px;
 	border-bottom: 3px solid rgba(0, 0, 0, 0.2);
 }
-.row.section,
-section {
-  padding: 70px 0 70px;
-}
-.row.section p,
-section p {
-  color: #6c7680;
-}
-.hero {
-	padding: 70px 0;
-	font-size: 1.6em;
-	font-weight: 300;
-	text-align: center;
-}
-
 a {
 	color: #5E64FF;
-  }
-  a,
-  a:focus,
-  a:hover {
-	transition: color 0.3s, border 0.3s, background-color 0.3s;
 }
-.group, .border-bottom {
-    border-bottom: 1px solid #d1d8dd;
-}
-.container, .navbar, footer {
-    max-width: 900px;
-    margin: auto;
+a, a:focus, a:hover {
+	transition: color 0.3s, border 0.3s, background-color 0.3s;
 }
-/* frappe-theme end */
-
 
-/*buttons*/
-/*
-.active {
-    background-color: #fff;
-    color: #000;
-    }
-
-.btn {
-    padding: .5em 1.25em;
-    border-radius:.25em;
-    cursor: pointer;
-    transition: all 0.3s ease 0s;
-    border-bottom: 3px solid #00000030;
-}
 
-.btn-secondary {
-    padding: 0.5em 1.25em;
-    border-right: 1px solid #e2e2ec;
-    border-left: 1px solid #e2e2ec;
-    border-top: 1px solid #e2e2ec;
-    background-color: #fafafe;
+/* BaseCSS */
+.margin-top {
+	margin-top: 1rem; /* SAME 2 */
 }
-
-.btn-secondary:hover{
-   background: rgb(255, 255, 255);
-   color: #36414c;
-} */
-
-/* custom */
-.page-header {
-	width: 100%;
-	text-align: center;
-	color: #fff;
-	padding: 2em 0;
-}
-.jumbotron {
-    padding: 2rem 2rem;
-}
-.project-name {
-	padding-top: 1.8em;
-	font-size: 2.5em;
-}
-.project-tagline {
-	font-size: 1em;
-	opacity: 0.7;
-	padding: 2em;
-}
-.btn-transparent {
-	margin: 0 0.5em;
-	color: #fff;
-	background: rgba(255, 255, 255, 0.1);
-	border: 1px solid rgba(255, 255, 255, 0.4);
-}
-.btn-transparent:hover {
-	color: #fff;
-	background: rgba(255, 255, 255, 0.3);
-}
-
-.main-content {
-	padding: 2em;
+.mv1 {
+	margin: 2em 0 1em 0;
 }
-
-.main-content .row {
-	margin-bottom: 20px;
+.border {
+	border: 1px solid #ddd;
+	border-radius: 3px;
 }
 
-hr {
-	margin-bottom: 2rem;
-}
 
-.step-explain {
-	margin-top: 30px;
-}
-
-pre.highlight {
-	background: #f7f7f7;
-	border-radius: 3px;
-}
-.btn {
-	outline: none !important;
-}
-.dashboard-section h1 {
-	margin-left: -2px;
-}
-.data-container {
-	padding: 20px;
-	padding-bottom: 0px;
-}
+/* Moon images */
 .image-container {
 	padding: 3px;
 }
@@ -173,22 +99,11 @@ pre.highlight {
 	display: block;
     width: 100%;
 }
-.data p {
+.content-data p {
 	margin-bottom: 5px;
 	font-size: 12px;
 }
-.margin-vertical-px {
-	margin: 15px 0px;
-}
-
-.margin-vertical-rem {
-	margin: 2em 0 1em 0;
-}
 
-.border {
-	border: 1px solid #ddd;
-	border-radius: 3px;
-}
 
 .text-center {
 	text-align: center;

docs/assets/js/data.js

@@ -1,5 +1,4 @@
-import { SEC_IN_DAY, MONTH_NAMES_SHORT, clone, timestampToMidnight, timestampSec, addDays } from '../../../src/js/utils/date-utils';
-import { getRandomBias } from '../../../src/js/utils/helpers';
+import { MONTH_NAMES_SHORT } from '../../../src/js/utils/date-utils';
 
 // Composite Chart
 // ================================================================================
@@ -178,28 +177,3 @@ export const moonData = {
 
 // ================================================================================
 
-let today = new Date();
-let start = clone(today);
-addDays(start, 4);
-let end = clone(start);
-start.setFullYear( start.getFullYear() - 2 );
-end.setFullYear( end.getFullYear() - 1 );
-
-export let dataPoints = {};
-
-let startTs = timestampSec(start);
-let endTs = timestampSec(end);
-
-startTs = timestampToMidnight(startTs);
-endTs = timestampToMidnight(endTs, true);
-
-while (startTs < endTs) {
-	dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
-	startTs += SEC_IN_DAY;
-}
-
-export const heatmapData = {
-	dataPoints: dataPoints,
-	start: start,
-	end: end
-};

docs/assets/js/demoConfig.js

@@ -0,0 +1,54 @@
+import { lineCompositeData, barCompositeData } from './data';
+
+export default {
+	lineComposite: {
+		elementID: "#chart-composite-1",
+		options: {
+			title: "Fireball/Bolide Events - Yearly (reported)",
+			data: lineCompositeData,
+			type: "line",
+			height: 190,
+			colors: ["green"],
+			isNavigable: 1,
+			valuesOverPoints: 1,
+
+			lineOptions: {
+				dotSize: 8
+			}
+		}
+	},
+
+	barComposite: {
+		elementID: "#chart-composite-2",
+		options: {
+			data: barCompositeData,
+			type: "bar",
+			height: 210,
+			colors: ["violet", "light-blue", "#46a9f9"],
+			valuesOverPoints: 1,
+			axisOptions: {
+				xAxisMode: "tick"
+			},
+			barOptions: {
+				stacked: 1
+			}
+		}
+	},
+
+	demoMain: {
+		elementID: "",
+		options: {
+			title: "My Awesome Chart",
+			data: "typeData",
+			type: "axis-mixed",
+			height: 300,
+			colors: ["purple", "magenta", "light-blue"],
+			maxSlices: 10,
+
+			tooltipOptions: {
+				formatTooltipX: d => (d + '').toUpperCase(),
+				formatTooltipY: d => d + ' pts',
+			}
+		}
+	}
+}

docs/assets/js/index.js

@@ -1,45 +1,19 @@
 import { shuffle, getRandomBias } from '../../../src/js/utils/helpers';
 import { HEATMAP_COLORS_YELLOW, HEATMAP_COLORS_BLUE } from '../../../src/js/utils/constants';
+import { SEC_IN_DAY, clone, timestampToMidnight, timestampSec, addDays } from '../../../src/js/utils/date-utils';
 import { fireballOver25, fireball_2_5, fireball_5_25, lineCompositeData,
-	barCompositeData, typeData, trendsData, moonData, heatmapData } from './data';
-
+	barCompositeData, typeData, trendsData, moonData } from './data';
+import demoConfig from './demoConfig';
+// import { lineComposite, barComposite } from './demoConfig';
 // ================================================================================
 
-let c1 = document.querySelector("#chart-composite-1");
-let c2 = document.querySelector("#chart-composite-2");
-
 let Chart = frappe.Chart; // eslint-disable-line no-undef
 
-let lineCompositeChart = new Chart (c1, {
-	title: "Fireball/Bolide Events - Yearly (reported)",
-	data: lineCompositeData,
-	type: 'line',
-	height: 190,
-	colors: ['green'],
-	isNavigable: 1,
-	valuesOverPoints: 1,
+let lc = demoConfig.lineComposite;
+let lineCompositeChart = new Chart (lc.elementID, lc.options);
 
-	lineOptions: {
-		dotSize: 8
-	},
-	// yAxisMode: 'tick'
-	// regionFill: 1
-});
-
-let barCompositeChart = new Chart (c2, {
-	data: barCompositeData,
-	type: 'bar',
-	height: 210,
-	colors: ['violet', 'light-blue', '#46a9f9'],
-	valuesOverPoints: 1,
-	axisOptions: {
-		xAxisMode: 'tick'
-	},
-	barOptions: {
-		stacked: 1
-	},
-
-});
+let bc = demoConfig.barComposite;
+let barCompositeChart = new Chart (bc.elementID, bc.options);
 
 lineCompositeChart.parent.addEventListener('data-select', (e) => {
 	let i = e.index;
@@ -288,6 +262,32 @@ eventsChart.parent.addEventListener('data-select', (e) => {
 // Heatmap
 // ================================================================================
 
+let today = new Date();
+let start = clone(today);
+addDays(start, 4);
+let end = clone(start);
+start.setFullYear( start.getFullYear() - 2 );
+end.setFullYear( end.getFullYear() - 1 );
+
+let dataPoints = {};
+
+let startTs = timestampSec(start);
+let endTs = timestampSec(end);
+
+startTs = timestampToMidnight(startTs);
+endTs = timestampToMidnight(endTs, true);
+
+while (startTs < endTs) {
+	dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
+	startTs += SEC_IN_DAY;
+}
+
+const heatmapData = {
+	dataPoints: dataPoints,
+	start: start,
+	end: end
+};
+
 let heatmapArgs = {
 	title: "Monthly Distribution",
 	data: heatmapData,

docs/assets/js/index.min.js

@@ -46,12 +46,6 @@ var HEATMAP_COLORS_YELLOW = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001
 
 // Universal constants
 
-/**
- * Returns the value of a number upto 2 decimal places.
- * @param {Number} d Any number
- */
-
-
 /**
  * Returns whether or not two given arrays are equal.
  * @param {Array} arr1 First array
@@ -120,6 +114,7 @@ var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
 
 
 
+// https://stackoverflow.com/a/11252167/6495043
 
 
 function clone(date) {
@@ -160,8 +155,6 @@ function addDays(date, numberOfDays) {
 	date.setDate(date.getDate() + numberOfDays);
 }
 
-// Composite Chart
-// ================================================================================
 var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850];
 
 var lineCompositeData = {
@@ -274,69 +267,70 @@ var moonData = {
 
 // ================================================================================
 
-var today = new Date();
-var start = clone(today);
-addDays(start, 4);
-var end = clone(start);
-start.setFullYear(start.getFullYear() - 2);
-end.setFullYear(end.getFullYear() - 1);
-
-var dataPoints = {};
-
-var startTs = timestampSec(start);
-var endTs = timestampSec(end);
-
-startTs = timestampToMidnight(startTs);
-endTs = timestampToMidnight(endTs, true);
+var demoConfig = {
+	lineComposite: {
+		elementID: "#chart-composite-1",
+		options: {
+			title: "Fireball/Bolide Events - Yearly (reported)",
+			data: lineCompositeData,
+			type: "line",
+			height: 190,
+			colors: ["green"],
+			isNavigable: 1,
+			valuesOverPoints: 1,
+
+			lineOptions: {
+				dotSize: 8
+			}
+		}
+	},
 
-while (startTs < endTs) {
-	dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
-	startTs += SEC_IN_DAY;
-}
+	barComposite: {
+		elementID: "#chart-composite-2",
+		options: {
+			data: barCompositeData,
+			type: "bar",
+			height: 210,
+			colors: ["violet", "light-blue", "#46a9f9"],
+			valuesOverPoints: 1,
+			axisOptions: {
+				xAxisMode: "tick"
+			},
+			barOptions: {
+				stacked: 1
+			}
+		}
+	},
 
-var heatmapData = {
-	dataPoints: dataPoints,
-	start: start,
-	end: end
+	demoMain: {
+		elementID: "",
+		options: {
+			title: "My Awesome Chart",
+			data: "typeData",
+			type: "axis-mixed",
+			height: 300,
+			colors: ["purple", "magenta", "light-blue"],
+			maxSlices: 10,
+
+			tooltipOptions: {
+				formatTooltipX: function formatTooltipX(d) {
+					return (d + '').toUpperCase();
+				},
+				formatTooltipY: function formatTooltipY(d) {
+					return d + ' pts';
+				}
+			}
+		}
+	}
 };
 
-// ================================================================================
-
-var c1 = document.querySelector("#chart-composite-1");
-var c2 = document.querySelector("#chart-composite-2");
-
 var Chart = frappe.Chart; // eslint-disable-line no-undef
 
-var lineCompositeChart = new Chart(c1, {
-	title: "Fireball/Bolide Events - Yearly (reported)",
-	data: lineCompositeData,
-	type: 'line',
-	height: 190,
-	colors: ['green'],
-	isNavigable: 1,
-	valuesOverPoints: 1,
+var lc = demoConfig.lineComposite;
+var lineCompositeChart = new Chart(lc.elementID, lc.options);
 
-	lineOptions: {
-		dotSize: 8
-	}
-	// yAxisMode: 'tick'
-	// regionFill: 1
-});
-
-var barCompositeChart = new Chart(c2, {
-	data: barCompositeData,
-	type: 'bar',
-	height: 210,
-	colors: ['violet', 'light-blue', '#46a9f9'],
-	valuesOverPoints: 1,
-	axisOptions: {
-		xAxisMode: 'tick'
-	},
-	barOptions: {
-		stacked: 1
-	}
-
-});
+var bc = demoConfig.barComposite;
+var barCompositeChart = new Chart(bc.elementID, bc.options);
 
 lineCompositeChart.parent.addEventListener('data-select', function (e) {
 	var i = e.index;
@@ -575,6 +569,32 @@ eventsChart.parent.addEventListener('data-select', function (e) {
 // Heatmap
 // ================================================================================
 
+var today = new Date();
+var start = clone(today);
+addDays(start, 4);
+var end = clone(start);
+start.setFullYear(start.getFullYear() - 2);
+end.setFullYear(end.getFullYear() - 1);
+
+var dataPoints = {};
+
+var startTs = timestampSec(start);
+var endTs = timestampSec(end);
+
+startTs = timestampToMidnight(startTs);
+endTs = timestampToMidnight(endTs, true);
+
+while (startTs < endTs) {
+	dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
+	startTs += SEC_IN_DAY;
+}
+
+var heatmapData = {
+	dataPoints: dataPoints,
+	start: start,
+	end: end
+};
+
 var heatmapArgs = {
 	title: "Monthly Distribution",
 	data: heatmapData,
@@ -650,4 +670,3 @@ document.querySelector('.export-heatmap').addEventListener('click', function ()
 });
 
 }());
-//# sourceMappingURL=index.min.js.map

docs/index.html

@@ -22,32 +22,19 @@
   </head>
 
   <body>
-    <div class="container">
-      <div class="row hero" style="padding-top: 30px; padding-bottom: 0px;">
-        <div class="jumbotron" style="background: transparent;">
-          <h1>Frappe Charts</h1>
-          <p class="mt-2">GitHub-inspired simple and modern SVG charts for the web</p>
-          <p class="mt-2">with zero dependencies.</p>
-        </div>
-
-        <div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
-          <div id="chart-composite-1" class="border"><svg height=225></svg></div>
-          <p class="mt-1">Click or use arrow keys to navigate data points</p>
-        </div>
-        <div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
-          <div id="chart-composite-2" class="border"><svg height=225></svg></div>
-        </div>
-      </div>
-
-      <div class="group later">
-        <div class="row section">
-
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <h6 class="margin-vertical-rem">Create a chart</h6>
-              <pre><code class="hljs html">  &lt!--HTML--&gt;
+    <header>
+      <h1>Frappe Charts</h1>
+      <p class="lead-text">GitHub-inspired simple and modern SVG charts for the web<br>with zero dependencies.</p>
+      <div id="chart-composite-1" class="border"></div>
+      <p class="demo-tip">Click or use arrow keys to navigate data points</p>
+      <div id="chart-composite-2" class="border"></div>
+    </header>
+
+    <section>
+      <h6>Create a chart</h6>
+      <pre><code class="hljs html">  &lt!--HTML--&gt;
   &lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
-              <pre><code class="hljs javascript">  // Javascript
+      <pre><code class="hljs javascript">  // Javascript
   let chart = new frappe.Chart( "#chart", { // or DOM element
     data: {
       labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
@@ -87,130 +74,91 @@
 
   chart.export();
 </code></pre>
-              <!-- <div id="chart-types" class="border" style="margin-bottom: 15px"></div> -->
-              <!-- <div >
-                <div class="btn-group x-axis-buttons margin-vertical-px" role="group">
-                  <button type="button" class="btn btn-sm btn-secondary active" data-type='span'>X span</button>
-                  <button type="button" class="btn btn-sm btn-secondary" data-type='tick'>X tick</button>
-                </div>
-                <div class="btn-group y-axis-buttons margin-vertical-px" role="group">
-                  <button type="button" class="btn btn-sm btn-secondary active" data-type='span'>Y span</button>
-                  <button type="button" class="btn btn-sm btn-secondary" data-type='tick'>Y tick</button>
-                </div>
-                <div class="input-group input-group-sm">
-                  <span class="input-group-addon">.00</span>
-                  <input type="text" class="form-control" aria-label="Amount (rounded to the nearest dollar)">
-                </div>
-              </div> -->
-
-              <div id="chart-aggr" class="border"></div>
-              <div class="btn-group aggr-type-buttons margin-vertical-px mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary active" data-type='axis-mixed'>Mixed</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-type='pie'>Pie Chart</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button>
-              </div>
-              <div class="btn-group export-buttons margin-vertical-px mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary export-aggr">Export ...</button>
-              </div>
-              <!-- <p class="text-muted">
-                <a target="_blank" href="http://www.storytellingwithdata.com/blog/2011/07/death-to-pie-charts">Why Percentage?</a>
-              </p> -->
-            </div>
-          </div>
 
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <h6 class="margin-vertical-rem">
-                Update Values
-              </h6>
-              <div id="chart-update" class="border"></div>
-              <div class="chart-update-buttons mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary" data-update="random">Random Data</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-update="add">Add Value</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-update="remove">Remove Value</button>
-                <button type="button" class="btn btn-sm btn-secondary export-update">Export ...</button>
-              </div>
-            </div>
-          </div>
+      <div id="chart-aggr" class="border"></div>
+      <div class="btn-group aggr-type-buttons margin-top mx-auto" role="group">
+        <button type="button" class="btn btn-sm btn-secondary active" data-type='axis-mixed'>Mixed</button>
+        <button type="button" class="btn btn-sm btn-secondary" data-type='pie'>Pie Chart</button>
+        <button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button>
+      </div>
+      <div class="btn-group export-buttons margin-top mx-auto" role="group">
+        <button type="button" class="btn btn-sm btn-secondary export-aggr">Export ...</button>
+      </div>
+    </section>
 
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <h6 class="margin-vertical-rem">
-                Plot Trends
-              </h6>
-              <div id="chart-trends" class="border"></div>
-              <div class="btn-group chart-plot-buttons mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary" data-type="hideDots">Line</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-type="hideLine">Dots</button>
-                <button type="button" class="btn btn-sm btn-secondary active" data-type="heatline">HeatLine</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-type="regionFill">Region</button>
-              </div>
-              <div class="btn-group export-buttons mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary export-trends">Export ...</button>
-              </div>
-              <!-- <pre><code class="hljs javascript margin-vertical-px">  ...
-    lineOptions: 'line',   // Line Chart specific properties:
-
-    hideDots: 1,   // Hide data points on the line; default 0
-    heatline: 1,    // Show a value-wise line gradient; default 0
-    regionFill: 1, // Fill the area under the graph; default 0
-  ...</code></pre> -->
-            </div>
-          </div>
+    <section>
+      <h6>Update Values</h6>
+      <div id="chart-update" class="border"></div>
+
+      <div class="chart-update-buttons mt-1 mx-auto" role="group">
+        <button type="button" class="btn btn-sm btn-secondary" data-update="random">Random Data</button>
+        <button type="button" class="btn btn-sm btn-secondary" data-update="add">Add Value</button>
+        <button type="button" class="btn btn-sm btn-secondary" data-update="remove">Remove Value</button>
+        <button type="button" class="btn btn-sm btn-secondary export-update">Export ...</button>
+      </div>
+    </section>
+
+    <section>
+      <h6>Plot Trends</h6>
+      <div id="chart-trends" class="border"></div>
 
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <h6 class="margin-vertical-rem">
-                Listen to state change
-              </h6>
-              <div class="row">
-                <div class="col-sm-8">
-                  <div id="chart-events" class="border"></div>
-                </div>
-                <div class="col-sm-4">
-                  <div class="chart-events-data" class="border data-container">
-                    <div class="image-container border">
-                      <img class="moon-image" src="./assets/img/europa.jpg">
-                    </div>
-                    <div class="data margin-vertical-px">
-                      <h6 class="moon-name">Europa</h6>
-                      <p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p>
-                      <p>Mass: <span class="mass">4800000</span>  x 10^16 kg</p>
-                      <p>Diameter: <span class="diameter">3121.6</span> km</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <pre><code class="hljs javascript margin-vertical-px">  ...
-    isNavigable: 1, // Navigate across data points; default 0
+      <div class="btn-group chart-plot-buttons mt-1 mx-auto" role="group">
+        <button type="button" class="btn btn-sm btn-secondary" data-type="hideDots">Line</button>
+        <button type="button" class="btn btn-sm btn-secondary" data-type="hideLine">Dots</button>
+        <button type="button" class="btn btn-sm btn-secondary active" data-type="heatline">HeatLine</button>
+        <button type="button" class="btn btn-sm btn-secondary" data-type="regionFill">Region</button>
+      </div>
+      <div class="btn-group export-buttons mt-1 mx-auto" role="group">
+        <button type="button" class="btn btn-sm btn-secondary export-trends">Export ...</button>
+      </div>
+    </section>
+
+    <section>
+      <h6>Listen to state change</h6>
+      <div class="row">
+        <div class="col-sm-8">
+          <div id="chart-events" class="border"></div>
+        </div>
+        <div class="col-sm-4 chart-events-data">
+          <div class="image-container border">
+            <img class="moon-image" src="./assets/img/europa.jpg">
+          </div>
+          <div class="content-data margin-top">
+            <h6 class="moon-name">Europa</h6>
+            <p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p>
+            <p>Mass: <span class="mass">4800000</span>  x 10^16 kg</p>
+            <p>Diameter: <span class="diameter">3121.6</span> km</p>
+          </div>
+        </div>
+      </div>
+      <pre><code class="hljs javascript margin-top">  ...
+  isNavigable: 1, // Navigate across data points; default 0
   ...
 
   chart.parent.addEventListener('data-select', (e) => {
     update_moon_data(e.index); // e contains index and value of current datapoint
   });</code></pre>
-            </div>
-          </div>
-
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <h6 class="margin-vertical-rem">
-                And a Month-wise Heatmap
-              </h6>
-              <div id="chart-heatmap" class="border"
-                style="overflow: scroll;"></div>
-              <div class="heatmap-mode-buttons btn-group mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary active" data-mode="discrete">Discrete</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-mode="continuous">Continuous</button>
-              </div>
-              <div class="heatmap-color-buttons btn-group mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary" data-color="default">Green (Default)</button>
-                <button type="button" class="btn btn-sm btn-secondary active" data-color="blue">Blue</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-color="halloween">GitHub's Halloween</button>
-              </div>
-              <div class="btn-group export-buttons mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary export-heatmap">Export ...</button>
-              </div>
-              <pre><code class="hljs javascript margin-vertical-px">  let heatmap = new frappe.Chart("#heatmap", {
+    </section>
+
+    <section>
+      <h6>
+        And a Month-wise Heatmap
+      </h6>
+      <div id="chart-heatmap" class="border"
+        style="overflow: scroll;"></div>
+      <div class="heatmap-mode-buttons btn-group mt-1 mx-auto" role="group">
+        <button type="button" class="btn btn-sm btn-secondary active" data-mode="discrete">Discrete</button>
+        <button type="button" class="btn btn-sm btn-secondary" data-mode="continuous">Continuous</button>
+      </div>
+      <div class="heatmap-color-buttons btn-group mt-1 mx-auto" role="group">
+        <button type="button" class="btn btn-sm btn-secondary" data-color="default">Green (Default)</button>
+        <button type="button" class="btn btn-sm btn-secondary active" data-color="blue">Blue</button>
+        <button type="button" class="btn btn-sm btn-secondary" data-color="halloween">GitHub's Halloween</button>
+      </div>
+      <div class="btn-group export-buttons mt-1 mx-auto" role="group">
+        <button type="button" class="btn btn-sm btn-secondary export-heatmap">Export ...</button>
+      </div>
+      <pre><code class="hljs javascript margin-top">  let heatmap = new frappe.Chart("#heatmap", {
     type: 'heatmap',
     title: "Monthly Distribution",
     data: {
@@ -222,141 +170,126 @@
     countLabel: 'Level',
     discreteDomains: 0  // default: 1
     colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
-                  // Set of five incremental colors,
-                  // preferably with a low-saturation color for zero data;
-                  // def: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
+                // Set of five incremental colors,
+                // preferably with a low-saturation color for zero data;
+                // def: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
   });</code></pre>
-            </div>
-          </div>
-
-          <div class="col-sm-10 push-sm-1">
-            <p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"
-              data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">
-                See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>
-                by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on
-                <a href="https://codepen.io">CodePen</a>.
-            </p>
-            <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
-          </div>
-
-          <div class="col-sm-10 push-sm-1">
-              <div class="dashboard-section">
-                <h6 class="margin-vertical-rem">Available options:</h6>
-                <pre><code class="hljs javascript">
-  ...
-  {
-    data: {
-      labels: [],
-      datasets: [],
-      yRegions: [],
-      yMarkers: []
+    </section>
+
+    <section>
+      <h6>Demo</h6>
+      <p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"
+        data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">
+          See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>
+          by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on
+          <a href="https://codepen.io">CodePen</a>.
+      </p>
+      <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+    </section>
+
+    <section>
+      <h6>Available options</h6>
+      <pre><code class="hljs javascript">
+    ...
+    {
+      data: {
+        labels: [],
+        datasets: [],
+        yRegions: [],
+        yMarkers: []
+      }
+      title: '',
+      colors: [],
+      height: 200,
+
+      tooltipOptions: {
+        formatTooltipX: d => (d + '').toUpperCase(),
+        formatTooltipY: d => d + ' pts',
+      }
+
+      // Axis charts
+      isNavigable: 1,        // default: 0
+      valuesOverPoints: 1,   // default: 0
+      barOptions: {
+        spaceRatio: 1        // default: 0.5
+        stacked: 1           // default: 0
+      }
+
+      lineOptions: {
+        dotSize: 6,          // default: 4
+        hideLine: 0,         // default: 0
+        hideDots: 1,         // default: 0
+        heatline: 1,         // default: 0
+        regionFill: 1        // default: 0
+      }
+
+      axisOptions: {
+        yAxisMode: 'span',   // Axis lines, default
+        xAxisMode: 'tick',   // No axis lines, only short ticks
+        xIsSeries: 1         // Allow skipping x values for space
+                              // default: 0
+      },
+
+      // Pie/Percentage charts
+      maxLegendPoints: 6,    // default: 20
+      maxSlices: 10,         // default: 20
+
+      // Percentage chart
+      barOptions: {
+        height: 15           // default: 20
+        depth: 5             // default: 2
+      }
+
+      // Heatmap
+      discreteDomains: 1,    // default: 1
     }
-    title: '',
-    colors: [],
-    height: 200,
+    ...
 
-    tooltipOptions: {
-      formatTooltipX: d => (d + '').toUpperCase(),
-      formatTooltipY: d => d + ' pts',
-    }
-
-    // Axis charts
-    isNavigable: 1,        // default: 0
-    valuesOverPoints: 1,   // default: 0
-    barOptions: {
-      spaceRatio: 1        // default: 0.5
-      stacked: 1           // default: 0
-    }
-
-    lineOptions: {
-      dotSize: 6,          // default: 4
-      hideLine: 0,         // default: 0
-      hideDots: 1,         // default: 0
-      heatline: 1,         // default: 0
-      regionFill: 1        // default: 0
-    }
-
-    axisOptions: {
-      yAxisMode: 'span',   // Axis lines, default
-      xAxisMode: 'tick',   // No axis lines, only short ticks
-      xIsSeries: 1         // Allow skipping x values for space
-                           // default: 0
-    },
+  // Updating values
+  chart.update(data);
 
-    // Pie/Percentage charts
-    maxLegendPoints: 6,    // default: 20
-    maxSlices: 10,         // default: 20
+  // Axis charts:
+  chart.addDataPoint(label, valueFromEachDataset, index)
+  chart.removeDataPoint(index)
+  chart.updateDataset(datasetValues, index)
 
-    // Percentage chart
-    barOptions: {
-      height: 15           // default: 20
-      depth: 5             // default: 2
-    }
+  // Exporting
+  chart.export();
 
-    // Heatmap
-    discreteDomains: 1,    // default: 1
-  }
-  ...
+  // Unbind window-resize events
+  chart.unbindWindowEvents();
 
-    // Updating values
-    chart.update(data);
-
-    // Axis charts:
-    chart.addDataPoint(label, valueFromEachDataset, index)
-    chart.removeDataPoint(index)
-    chart.updateDataset(datasetValues, index)
-
-    // Exporting
-    chart.export();
-
-    // Unbind window-resize events
-    chart.unbindWindowEvents();
-
-  </code></pre>
-              </div>
-            </div>
-
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <h6 class="margin-vertical-rem">Install</h6>
-              <p class="step-explain">Install via npm</p>
-              <pre><code class="hljs console">  npm install frappe-charts</code></pre>
-              <p class="step-explain">And include it in your project</p>
-              <pre><code class="hljs javascript">  import { Chart } from "frappe-charts"</code></pre>
-              <p class="step-explain">... or include it directly in your HTML</p>
-              <pre><code class="hljs html">  &lt;script src="https://unpkg.com/frappe-charts@1.1.0"&gt;&lt;/script&gt;</code></pre>
-              <p class="step-explain">Use as:</p>
-              <pre><code class="hljs javascript">  new Chart();          // ES6 module
+</code></pre>
+    </section>
+
+    <section>
+      <h6>Install</h6>
+      <p>Install via npm</p>
+      <pre><code class="hljs console">  npm install frappe-charts</code></pre>
+      <p>And include it in your project</p>
+      <pre><code class="hljs javascript">  import { Chart } from "frappe-charts"</code></pre>
+      <p>... or include it directly in your HTML</p>
+      <pre><code class="hljs html">  &lt;script src="https://unpkg.com/frappe-charts@1.1.0"&gt;&lt;/script&gt;</code></pre>
+      <p>Use as:</p>
+      <pre><code class="hljs javascript">  new Chart();          // ES6 module
                         // or
   new frappe.Chart();   // Browser</code></pre>
-
-            </div>
-          </div>
-
-
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <!-- Closing -->
-              <div class="text-center" style="margin-top: 70px">
-                <a href="https://github.com/frappe/charts/archive/master.zip"><button class="large blue button btn">Download</button></a>
-                <p style="margin-top: 3rem;margin-bottom: 1.5rem;">
-                  <a href="https://github.com/frappe/charts" style="margin-right: 1rem;" target="_blank">Documentation</a>
-                  <a href="https://github.com/frappe/charts" target="_blank">GitHub</a>
-                </p>
-                <p style="margin-top: 1rem;">
-                  <a class="github-button" href="https://github.com/frappe/charts" data-icon="octicon-star" data-show-count="true" aria-label="Star frappe/charts on GitHub">Star</a>
-                </p>
-                <p>License: MIT</p>
-              </div>
-            </div>
-          </div>
-
-        </div>
-      </div>
-
-    </div>
-
-    <footer class="built-with-frappe text-center" style="margin-top: -20px">
+    </section>
+
+    <section class="text-center">
+      <!-- Closing -->
+      <a href="https://github.com/frappe/charts/archive/master.zip"><button class="large blue button btn">Download</button></a>
+      <p style="margin-top: 3rem;margin-bottom: 1.5rem;">
+        <!-- <a href="docs.html" style="margin-right: 1rem;" target="_blank">Documentation</a> -->
+        <a href="https://github.com/frappe/charts" target="_blank">View on GitHub</a>
+      </p>
+      <p style="margin-top: 1rem;">
+        <a class="github-button" href="https://github.com/frappe/charts" data-icon="octicon-star" data-show-count="true" aria-label="Star frappe/charts on GitHub">Star</a>
+      </p>
+      <p>License: MIT</p>
+    </section>
+
+    <footer class="built-with-frappe text-center">
         <img style="padding: 5px; width: 40px; background: #fff" class="frappe-bird" src="./assets/img/frappe-bird.png">
         <p style="margin: 24px 0 0px 0; font-size: 15px">
           Project maintained by <a href="https://frappe.io" target="_blank">Frappe</a>.