feat: add basic quadrant

phodal · Mar 17, 2020 · 2d415e5 · 2d415e5
1 parent 9424b6c
commit 2d415e5
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 13 deletions.
diff --git a/src/app/shared/components/markdown-render/chart-options.ts b/src/app/shared/components/markdown-render/chart-options.ts
@@ -157,10 +157,59 @@ function buildPyramidChartOption(data) {
  };
 }
 
+function buildQuadrantChartOption(data) {
+ return {
+ series: [{
+ type: 'treemap',
+ visualMin: 0,
+ visualMax: 100,
+ visualDimension: 3,
+ levels: [
+ {
+ itemStyle: {
+ borderWidth: 3,
+ borderColor: '#333',
+ gapWidth: 3
+ }
+ },
+ {
+ color: ['#942e38', '#aaa', '#269f3c', '#DDD'],
+ colorMappingBy: 'id',
+ itemStyle: {
+ gapWidth: 1
+ }
+ }
+ ],
+ data: [{
+ name: 'nodeA', // First tree
+ value: 10,
+ children: [{
+ name: 'nodeAa', // First leaf of first tree
+ value: 5
+ }, {
+ name: 'nodeAb', // Second leaf of first tree
+ value: 5
+ }]
+ }, {
+ name: 'nodeB', // Second tree
+ value: 10,
+ children: [{
+ name: 'nodeBa', // Son of first tree
+ value: 5
+ }, {
+ name: 'nodeBa', // Son of first tree
+ value: 5
+ }]
+ }]
+ }]
+ };
+}
+
 const ChartOptions = {
  buildTreeOption,
  buildRadarChartOption,
- buildPyramidChartOption
+ buildPyramidChartOption,
+ buildQuadrantChartOption
 };
 
 export default ChartOptions;
diff --git a/src/app/shared/components/markdown-render/markdown-render.component.ts b/src/app/shared/components/markdown-render/markdown-render.component.ts
@@ -52,7 +52,7 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
  };
  private mindmapIndex = 0;
  private chartInfos = [];
- private radarChartIndex = 0;
+ private chartIndex = 0;
  private chartInstances: ECharts[] = [];
  private toc = [];
  private tocPosition = 0;
@@ -101,7 +101,7 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
  ngOnChanges(changes: SimpleChanges): void {
  if (changes.src) {
  this.mindmapIndex = 0;
- this.radarChartIndex = 0;
+ this.chartIndex = 0;
  }
  }
 
@@ -163,13 +163,15 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
  return this.buildRadarChartData(code);
  case 'pyramid':
  return this.buildPyramidChartData(code);
+ case 'quadrant':
+ return this.buildQuadrantChartData(code);
  default:
- return this.renderNormalCode(options, code, lang, escaped);
+ return this.buildNormalCode(options, code, lang, escaped);
  }
  };
  }
 
- private renderNormalCode(options: any, code: any, lang: string, escaped: any) {
+ private buildNormalCode(options: any, code: any, lang: string, escaped: any) {
  if (options.highlight) {
  const out = options.highlight(code, lang);
  if (out != null && out !== code) {
@@ -323,6 +325,9 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
  case 'radarchart':
  mychart.setOption(ChartOptions.buildRadarChartOption(newData));
  break;
+ case 'quadrant':
+ mychart.setOption(ChartOptions.buildQuadrantChartOption(newData));
+ break;
  case 'pyramid':
  const pyramidLength = newData.children.length;
  const CHART_MAX_VALUE = 100;
@@ -371,29 +376,44 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
  let items = [];
  items = MarkdownHelper.markdownToJSON(tokens, items);
  const currentMap = {
- id: 'radarchart-' + this.radarChartIndex,
+ id: 'radarchart-' + this.chartIndex,
  type: 'radarchart',
  data: items
  };
 
  this.chartInfos.push(currentMap);
 
- this.radarChartIndex++;
+ this.chartIndex++;
  return `<div class="markdown-radarchart ${currentMap.id}"></div>`;
  }
 
+ private buildQuadrantChartData(code: any) {
+ const tokens = marked.lexer(code);
+ let items = [];
+ items = MarkdownHelper.markdownToJSON(tokens, items);
+ const currentMap = {
+ id: 'quadrant-' + this.chartIndex,
+ type: 'quadrant',
+ data: items
+ };
+
+ this.chartInfos.push(currentMap);
+ this.chartIndex++;
+ return `<div class="markdown-quadrant ${currentMap.id}"></div>`;
+ }
+
  private buildPyramidChartData(code: any) {
  const tokens = marked.lexer(code);
  let items = [];
  items = MarkdownHelper.markdownToJSON(tokens, items);
  const currentMap = {
- id: 'pyramid-' + this.radarChartIndex,
+ id: 'pyramid-' + this.chartIndex,
  type: 'pyramid',
  data: items
  };
 
  this.chartInfos.push(currentMap);
- this.radarChartIndex++;
+ this.chartIndex++;
  return `<div class="markdown-pyramid ${currentMap.id}"></div>`;
  }
 

diff --git a/src/styles/_process-table.scss b/src/styles/_process-table.scss
@@ -76,8 +76,12 @@
  );
 
  @each $i, $color in $themeColours {
- &.type_#{$i} {background: $color;}
- &.type_#{$i}:after {border-left: 22px solid $color;}
+ &.type_#{$i} {
+ background: $color;
+ }
+ &.type_#{$i}:after {
+ border-left: 22px solid $color;
+ }
  }
  }
  }
@@ -120,15 +124,18 @@
  }
 
  &:first-child {
- border-top-left-radius: 10px; border-bottom-left-radius: 10px;
+ border-top-left-radius: 10px;
+ border-bottom-left-radius: 10px;
  }
+
  &:first-child:before {
  display: none;
  }
 
  &:last-child {
  padding-right: 10px;
- border-top-right-radius: 10px; border-bottom-right-radius: 10px;
+ border-top-right-radius: 10px;
+ border-bottom-right-radius: 10px;
  }
 
  &:last-child:after {
@@ -197,6 +204,7 @@
  min-height: 600px;
 }
 
+.markdown-quadrant,
 .markdown-pyramid,
 .markdown-radarchart {
  max-width: 600px;