From 2d415e5b6a583472bb836f842ae93e8ee4556a77 Mon Sep 17 00:00:00 2001 From: Phodal Huang Date: Tue, 17 Mar 2020 10:02:13 +0800 Subject: [PATCH] feat: add basic quadrant --- .../markdown-render/chart-options.ts | 51 ++++++++++++++++++- .../markdown-render.component.ts | 36 ++++++++++--- src/styles/_process-table.scss | 16 ++++-- 3 files changed, 90 insertions(+), 13 deletions(-) diff --git a/src/app/shared/components/markdown-render/chart-options.ts b/src/app/shared/components/markdown-render/chart-options.ts index d9ada288..7967ede9 100644 --- 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 index 5da5fe0f..b3576bba 100644 --- 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 `
`; } + 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 `
`; + } + 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 `
`; } diff --git a/src/styles/_process-table.scss b/src/styles/_process-table.scss index 971c59ea..ba4cc643 100644 --- 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;