feat(heatmap): init featmap xaxis yaxis

projects/ledge-render/src/lib/chart/ledge-heatmap/ledge-heatmap.component.html

@@ -1 +1,3 @@
-<p>ledge-heatmap works!</p>
+<div class="ledge-heatmap chart" #chart>
+
+</div>

projects/ledge-render/src/lib/chart/ledge-heatmap/ledge-heatmap.component.scss

@@ -0,0 +1,7 @@
+.chart {
+  width: auto;
+  height: auto;
+  min-width: 600px;
+  min-height: 800px;
+  max-width: 1600px;
+}

projects/ledge-render/src/lib/chart/ledge-heatmap/ledge-heatmap.component.ts

@@ -1,15 +1,80 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import echarts from 'echarts';
+
+import { LedgeTable } from '../../components/model/ledge-chart.model';
+import LedgeChartConverter from '../../components/model/ledge-chart-converter';
 
 @Component({
-  selector: 'app-ledge-heatmap',
+  selector: 'ledge-heatmap',
   templateUrl: './ledge-heatmap.component.html',
   styleUrls: ['./ledge-heatmap.component.scss']
 })
-export class LedgeHeatmapComponent implements OnInit {
+export class LedgeHeatmapComponent implements OnInit, AfterViewInit {
+  @Input() data: LedgeTable;
+
+  @Input() config: any;
 
-  constructor() { }
+  @ViewChild('chart', {}) chartEl: ElementRef;
+
+  constructor() {
+  }
 
   ngOnInit(): void {
   }
 
+  ngAfterViewInit(): void {
+    const myChart = echarts.init(this.chartEl.nativeElement);
+    const option = this.buildOption(this.data);
+    myChart.setOption(option as any);
+  }
+
+  private buildOption(treeData: LedgeTable) {
+    console.log(treeData);
+    return {
+      tooltip: {
+        position: 'top'
+      },
+      animation: false,
+      grid: {
+        height: '50%',
+        top: '10%'
+      },
+      xAxis: {
+        type: 'category',
+        data: treeData.header,
+        splitArea: {
+          show: true
+        }
+      },
+      yAxis: {
+        type: 'category',
+        data: treeData.cells[0].reverse(),
+        splitArea: {
+          show: true
+        }
+      },
+      visualMap: {
+        min: 0,
+        max: 10,
+        calculable: true,
+        orient: 'horizontal',
+        left: 'center',
+        bottom: '15%'
+      },
+      series: [{
+        name: 'Punch Card',
+        type: 'heatmap',
+        data: [[0, 0, 3], [0, 1, 2]],
+        label: {
+          show: true
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }]
+    };
+  }
 }

projects/ledge-render/src/lib/ledge-render.component.html

@@ -78,6 +78,10 @@
       <ledge-fish-bone [data]="item.data" [config]="item.config"></ledge-fish-bone>
     </div>
 
+    <div *ngSwitchCase="'heatmap'">
+      <ledge-heatmap [data]="item.data" [config]="item.config"></ledge-heatmap>
+    </div>
+
     <div *ngSwitchCase="'table'">
       <table>
         <thead>