feat: extracted charts to separate components

src/app/app.component.css

@@ -1,23 +0,0 @@
-h2 {
-  font-size: 20px;
-  color: #eeeaea;
-  background-color: #47475C;
-  padding: 10px;
-}
-
-.full-left {
-  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
-  font-size: 14px;
-  float: left;
-  width: 98%;
-  background-color: #eee;
-  padding: 5px 1%;
-}
-.medium-right {
-  float: right;
-  width: 65%;
-}
-.third-left {
-  width: 30%;
-  float: left;
-}

src/app/app.component.html

@@ -1,90 +1,7 @@
-<div class="full-left">
-  <h2>Demo #1: Highcharts with a basic editor</h2>
-  <div class="third-left">
-    <button (click)="updateInputChart()">Update chart</button>
-    <br/>
-    <textarea rows="16" cols="50"
-      [(ngModel)]="optFromInputString"
-    ></textarea>
-    <br/>
-    <button (click)="toggleSeriesType()">1st series type toggle</button>
-  </div>
-  <div class="medium-right">
-    <highcharts-chart 
-      [Highcharts]="Highcharts"
-      [options]="optFromInput"
-      [(update)]="updateFromInput"
-      [oneToOne]=true
-      (chartInstance)="logChartInstance($event)"
-
-      style="width: 100%; height: 350px; display: block;"
-    ></highcharts-chart>
-  </div>
-</div>
-
-<br/>
-
-<div class="full-left">
-  <h2>Demo #2: Highstock with simple updates</h2>
-  <div class="third-left">
-    <p>Chart title text: </p>
-    <input 
-      [(ngModel)]="charts[usedIndex].hcOptions.title.text"
-      (ngModelChange)="titleChange($event)"
-    >
-    <br/>
-    <p>Data sets:</p>
-    <button *ngFor="let i of [0,1,2]"
-      (click)="usedIndex = i">
-      {{i+1}}
-    </button>
-  </div>
-  <div class="medium-right">
-    <highcharts-chart
-      [Highcharts]="Highcharts"
-      [constructorType]="'stockChart'"
-      [options]="charts[usedIndex].hcOptions"
-      [callbackFunction]="charts[0].hcCallback"
-      [(update)]="updateDemo2"
-
-      style="width: 100%; height: 350px; display: block;"
-    ></highcharts-chart>
-  </div>
-</div>
-
-<br/>
-
-<div class="full-left">
-  <h2>Demo #3: Highmaps map chart</h2>
-  <highcharts-chart
-    [Highcharts]="Highcharts"
-    [constructorType]="'mapChart'"
-    [options]="chartMap"
-
-    style="width: 100%; height: 650px; display: block;"
-  ></highcharts-chart>
-</div>
-
-<br/>
-
-<div class="full-left">
-  <h2>Demo #4: Highcharts Gantt chart</h2>
-  <highcharts-chart
-    [Highcharts]="Highcharts"
-    [constructorType]="'ganttChart'"
-    [options]="chartGantt"
-
-    style="width: 100%; height: 350px; display: block;"
-  ></highcharts-chart>
-</div>
-
-<div class="full-left">
-  <h2>Demo #5: Lazy loading in Highstock</h2>
-  <highcharts-chart
-    [Highcharts]="Highcharts"
-    [constructorType]="'stockChart'"
-    [options]="chartLazyLoading"
-
-    style="width: 100%; height: 650px; display: block;"
-  ></highcharts-chart>
+<div style="display:flex; flex-direction: column;">
+    <app-line-chart></app-line-chart>
+    <app-stock-chart></app-stock-chart>
+    <app-map-chart></app-map-chart>
+    <app-gantt-chart></app-gantt-chart>
+    <app-lazy-loading-chart></app-lazy-loading-chart>
 </div>