feat: add simple code charts render

src/app/shared/components/markdown-chart/markdown-chart.component.ts

@@ -21,6 +21,7 @@ export class MarkdownChartComponent implements OnInit, AfterViewInit {
 
  ngAfterViewInit(): void {
  const myChart = echarts.init(this.reporter.nativeElement);
+ console.log(this.data);
  const builderJson = this.data.chartData;
  const sortData = Object.keys(builderJson).map(key => builderJson[key]).sort((a, b) => a.value - b.value);
  myChart.setOption(this.buildBarChartOption(sortData) as any);

src/app/shared/components/markdown-render/markdown-render.component.ts

@@ -408,8 +408,8 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
 
  private buildTableProcess(code: any) {
  let resultStr = '';
- const {headers, cells} = LedgeMarkdownConverter.toJson(code).tables[0];
- resultStr += this.buildProcessHeader(this.buildHeaderItem(headers));
+ const {header, cells} = LedgeMarkdownConverter.toJson(code).tables[0];
+ resultStr += this.buildProcessHeader(this.buildHeaderItem(header));
  const bodyResult = this.buildTableBody(cells);
 
  resultStr += `<div class="table-space"></div><div class="flex-table row">${bodyResult}</div>`;
@@ -433,11 +433,11 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
  return bodyResult;
  }
 
- private buildHeaderItem(headers: any[]) {
+ private buildHeaderItem(header: any[]) {
  let headerStr = '';
- for (let index = 0; index < headers.length; index++) {
- const header = headers[index];
- headerStr += this.buildProcessHeaderItem(index, header);
+ for (let index = 0; index < header.length; index++) {
+ const head = header[index];
+ headerStr += this.buildProcessHeaderItem(index, head);
  }
 
  return headerStr;

src/app/shared/components/markdown-reporter/markdown-reporter.component.ts

@@ -2,6 +2,8 @@ import { AfterViewInit, Component, Input, OnInit } from '@angular/core';
 import marked from 'marked/lib/marked';
 import { ReporterChartModel } from '../model/reporter-chart.model';
 import * as d3 from 'd3';
+import { Tokens } from 'marked';
+import LedgeMarkdownConverter from '../model/ledge-markdown-converter';
 
 @Component({
  selector: 'component-markdown-reporter',
@@ -27,7 +29,6 @@ export class MarkdownReporterComponent implements OnInit, AfterViewInit {
 
  private buildChartData(content: string) {
  const tokens = marked.lexer(content);
- console.log(tokens);
  this.buildData(tokens);
  }
 
@@ -48,7 +49,7 @@ export class MarkdownReporterComponent implements OnInit, AfterViewInit {
  switch (token.type) {
  case 'table':
  if (token.cells[0].length === 2) {
- const chartInfo = this.buildMarkdownChart(token);
+ const chartInfo = this.buildBarChartData(token);
  this.charts.push(chartInfo);
  this.markdownData.push({
  type: 'chart',
@@ -58,6 +59,22 @@ export class MarkdownReporterComponent implements OnInit, AfterViewInit {
  this.markdownData.push(token);
  }
  break;
+ case 'code':
+ const codeBlock = token as Tokens.Code;
+ if (codeBlock.lang === 'chart') {
+ const chartData = LedgeMarkdownConverter.toJson(codeBlock.text);
+ if (chartData.config.multiset) {
+ console.log(chartData.tables[0])
+
+ this.markdownData.push({
+ type: 'chart',
+ data: this.buildBarChartData(chartData.tables[0])
+ });
+ }
+ } else {
+ this.markdownData.push(token);
+ }
+ break;
  default:
  console.log(token);
  this.markdownData.push(token);
@@ -66,7 +83,7 @@ export class MarkdownReporterComponent implements OnInit, AfterViewInit {
  }
  }
 
- private buildMarkdownChart(token: marked.Token) {
+ private buildBarChartData(token: marked.Table) {
  const chart: ReporterChartModel = {
  title: token.header[0],
  chartData: []

src/app/shared/components/model/ledge-markdown-converter.ts

@@ -36,10 +36,9 @@ const LedgeMarkdownConverter = {
  break;
  }
  case 'table' : {
- const headers = token.header;
  const cells = this.transpose(token.cells);
  tables.push({
- headers,
+ header: token.header,
  cells
  });
  break;

src/app/shared/components/process-table/process-table.component.html

@@ -3,7 +3,7 @@
  <div class="flex-table header" role="rowgroup">
  <div class="flex-row cell"
  [ngStyle]="getHeaderColumn()"
- *ngFor="let header of processTable.headers;let first = first;let index = index"
+ *ngFor="let header of processTable.header;let first = first;let index = index"
  [ngClass]="getHeaderClass(index)">
  {{header}}
  </div>

src/app/shared/components/process-table/process-table.component.ts

@@ -16,7 +16,7 @@ export class ProcessTableComponent implements OnInit {
  @Input()
  tableValue: string;
  processTable: ProcessTable = {
- headers: [],
+ header: [],
  cells: []
  };
  headerSize = 0;
@@ -35,7 +35,7 @@ export class ProcessTableComponent implements OnInit {
  this.processTable.headers = token.header;
  this.processTable.cells = this.transpose(token.cells);
 
- this.headerSize = this.processTable.headers.length;
+ this.headerSize = this.processTable.header.length;
  }
  }
  }

src/assets/docs/reporter.md

@@ -62,6 +62,30 @@
 | 能源 | 3% |
 | 非营利 | 1% |
 
+## 组织所使用的操作系统
+
+```chart
+| 操作系统 | 2018 | 2019 |
+|-|-|-| 
+| Windows 2003/2003R2 | 12% | 6% | 
+| Windows 2008/2008R2 | 33% | 26% | 
+| Windows 2012/2012R2 | 56% | 52% |
+| Other Windows | 22% | 25% |
+| Linux Debian/Ubuntu variants | 36% | 43% |
+| Linux Enterprise variants (RHEL, Oracle, CentOS) | 48% | 49% | 
+| Linux Fedora | 5% | 4% |
+| SUSE Linux Enterprise Server | 8% | 5% |
+| Linux OpenSUSE | 4% | 4% |
+| Linux Arch | 2% | 2% |
+| Other Linux | | 13% | 11% |
+| Other UNIX | 8% | 4% |
+| FreeBSD/NetBSD/OpenBSD | 3% | 3% | 
+| AIX | 10% | 7% |
+| Solaris OS | 12% | 5% |
+| Other | 12% | 8% |
+
+config: {"type": "bar", "multiset": true}
+```
 
 ## Test