This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/echarts-from-mermaid.git
The following commit(s) were added to refs/heads/main by this push:
new c1a9f80 refactor: adjust project structure
c1a9f80 is described below
commit c1a9f80e31514bca87d7b79846a4876f7378639b
Author: Ovilia <[email protected]>
AuthorDate: Thu Feb 27 16:34:47 2025 +0800
refactor: adjust project structure
---
src/__tests__/config.test.ts | 170 ++++++++++++++++++++
src/{charts => }/__tests__/pie.test.ts | 2 +-
src/__tests__/xychart.test.ts | 192 +++++++++++++++++++++++
src/{charts/base.ts => base/BaseChart.ts} | 10 +-
src/{parsers/base.ts => base/BaseParser.ts} | 9 --
src/charts/__tests__/config.test.ts | 170 --------------------
src/charts/__tests__/xychart.test.ts | 189 ----------------------
src/charts/mermaid/xychart.ts | 120 --------------
src/charts/types.ts | 1 -
src/{charts => }/extended/README.md | 0
src/index.ts | 16 +-
src/{charts => }/mermaid/README.md | 0
src/{charts/pie.ts => mermaid/pie/PieChart.ts} | 8 +-
src/{parsers/pie.ts => mermaid/pie/PieParser.ts} | 3 +-
src/mermaid/xy/XYChart.ts | 13 ++
src/mermaid/xy/XYChartParser.ts | 11 ++
src/types.ts | 10 ++
17 files changed, 421 insertions(+), 503 deletions(-)
diff --git a/src/__tests__/config.test.ts b/src/__tests__/config.test.ts
new file mode 100644
index 0000000..4342cfb
--- /dev/null
+++ b/src/__tests__/config.test.ts
@@ -0,0 +1,170 @@
+// import { XYChart } from '../mermaid/xychart';
+
+// describe('Config', () => {
+// it('should work with width and height', () => {
+// const definition = `
+// ---
+// config:
+// xyChart:
+// width: 900
+// height: 600
+// themeVariables:
+// xyChart:
+// titleColor: "#ff0000"
+// ---
+// xychart-beta
+// bar [1, 4, 2]
+// `;
+// const chart = new XYChart(definition);
+// expect(chart.getOption()).toEqual({
+// grid: {
+// width: 900,
+// height: 600,
+// },
+// title: {
+// text: 'This is a simple example',
+// textStyle: {
+// color: '#ff0000',
+// },
+// },
+// xAxis: {
+// type: 'value',
+// },
+// yAxis: {
+// type: 'value',
+// },
+// series: [
+// {
+// type: 'bar',
+// data: [
+// [1, 1],
+// [2, 4],
+// [3, 2],
+// ],
+// },
+// ],
+// });
+// });
+
+// it('should work with axis configurations', () => {
+// const definition = `
+// ---
+// config:
+// xyChart:
+// xAxis:
+// labelFontSize: 16
+// labelPadding: 8
+// showTitle: false
+// tickLength: 8
+// showAxisLine: false
+// yAxis:
+// showLabel: false
+// titleFontSize: 18
+// showTick: false
+// axisLineWidth: 3
+// ---
+// xychart-beta
+// bar [1, 4, 2]
+// `;
+// const chart = new XYChart(definition);
+// expect(chart.getOption()).toEqual({
+// xAxis: {
+// type: 'value',
+// show: true,
+// axisLabel: {
+// show: true,
+// fontSize: 16,
+// margin: 8,
+// },
+// axisTick: {
+// show: true,
+// length: 8,
+// },
+// axisLine: {
+// show: false,
+// },
+// name: '', // due to showTitle: false
+// nameShow: false,
+// },
+// yAxis: {
+// type: 'value',
+// show: true,
+// axisLabel: {
+// show: false,
+// },
+// name: '',
+// nameTextStyle: {
+// fontSize: 18,
+// },
+// axisTick: {
+// show: false,
+// },
+// axisLine: {
+// show: true,
+// lineStyle: {
+// width: 3,
+// },
+// },
+// },
+// series: [
+// {
+// type: 'bar',
+// data: [
+// [1, 1],
+// [2, 4],
+// [3, 2],
+// ],
+// },
+// ],
+// });
+// });
+
+// it('should work with theme variables', () => {
+// const definition = `
+// ---
+// config:
+// themeVariables:
+// xyChart:
+// backgroundColor: "#f0f0f0"
+// xAxisLabelColor: "#333"
+// yAxisLineColor: "#666"
+// plotColorPalette: "#f3456,#43445"
+// ---
+// xychart-beta
+// bar [1, 4, 2]
+// `;
+// const chart = new XYChart(definition);
+// expect(chart.getOption()).toEqual({
+// backgroundColor: '#f0f0f0',
+// xAxis: {
+// type: 'value',
+// axisLabel: {
+// show: true,
+// textStyle: {
+// color: '#333',
+// },
+// },
+// },
+// yAxis: {
+// type: 'value',
+// axisLine: {
+// show: true,
+// lineStyle: {
+// color: '#666',
+// },
+// },
+// },
+// color: ['#f3456', '#43445'],
+// series: [
+// {
+// type: 'bar',
+// data: [
+// [1, 1],
+// [2, 4],
+// [3, 2],
+// ],
+// },
+// ],
+// });
+// });
+// });
diff --git a/src/charts/__tests__/pie.test.ts b/src/__tests__/pie.test.ts
similarity index 96%
rename from src/charts/__tests__/pie.test.ts
rename to src/__tests__/pie.test.ts
index 01413e0..bde7c6a 100644
--- a/src/charts/__tests__/pie.test.ts
+++ b/src/__tests__/pie.test.ts
@@ -1,4 +1,4 @@
-import { EChartsFromMermaid } from '../../index';
+import { EChartsFromMermaid } from '../index';
describe('Pie Chart', () => {
it('should parse basic pie chart correctly', () => {
diff --git a/src/__tests__/xychart.test.ts b/src/__tests__/xychart.test.ts
new file mode 100644
index 0000000..2085313
--- /dev/null
+++ b/src/__tests__/xychart.test.ts
@@ -0,0 +1,192 @@
+import { EChartsFromMermaid } from '../index';
+
+const chartTypes = [
+ 'line',
+ // 'bar'
+];
+
+describe('XYChart', () => {
+ for (const chartType of chartTypes) {
+ describe(chartType, () => {
+ describe('orientation', () => {
+ it('should render vertical chart', () => {
+ const definition = `
+xychart-beta
+ ${chartType} [1, 4, 3]
+`;
+ const option = EChartsFromMermaid.getOption(definition);
+ expect(option).toEqual({
+ xAxis: {
+ type: 'value',
+ },
+ yAxis: {
+ type: 'value',
+ },
+ series: [
+ {
+ type: chartType,
+ data: [
+ [1, 1],
+ [2, 4],
+ [3, 3],
+ ],
+ },
+ ],
+ });
+ });
+
+ // it('should render horizontal chart', () => {
+ // const definition = `
+ // xychart-beta horizontal
+ // ${chartType} [1, 4, 3]
+ // `;
+ // const chart = new XYChart(definition);
+ // expect(chart.getOption()).toEqual({
+ // xAxis: {
+ // type: 'value',
+ // },
+ // yAxis: {
+ // type: 'value',
+ // },
+ // series: [
+ // {
+ // type: chartType,
+ // data: [
+ // [1, 1],
+ // [4, 2],
+ // [3, 3],
+ // ],
+ // },
+ // ],
+ // });
+ // });
+ });
+
+ // describe('title', () => {
+ // it('should render title', () => {
+ // const definition = `
+ // xychart-beta
+ // title "This is a simple example"
+ // ${chartType} [1, 4, 2]
+ // `;
+ // const chart = new XYChart(definition);
+ // expect(chart.getOption()).toEqual({
+ // xAxis: {
+ // type: 'value',
+ // },
+ // yAxis: {
+ // type: 'value',
+ // },
+ // series: [
+ // {
+ // type: chartType,
+ // data: [
+ // [1, 1],
+ // [2, 4],
+ // [3, 3],
+ // ],
+ // },
+ // ],
+ // });
+ // });
+ // });
+
+ // const axisTypes = ['x', 'y'];
+ // for (const axisType of axisTypes) {
+ // describe(axisType, () => {
+ // const otherAxis = axisType === 'x' ? 'y' : 'x';
+ // it(`should render category ${axisType}Axis`, () => {
+ // const definition = `
+ // xychart-beta
+ // ${axisType}-axis [cat1, "cat2 with space", cat3]
+ // ${chartType} [1, 4, 2]
+ // `;
+ // const chart = new XYChart(definition);
+ // expect(chart.getOption()).toEqual({
+ // [axisType + 'Axis']: {
+ // type: 'category',
+ // data: ['cat1', 'cat2 with space', 'cat3'],
+ // },
+ // [otherAxis + 'Axis']: { type: 'value' },
+ // series: [
+ // {
+ // type: chartType,
+ // data: [1, 4, 2],
+ // },
+ // ],
+ // });
+ // });
+
+ // it(`should render value ${axisType}Axis with two value
axes`, () => {
+ // const definition = `
+ // xychart-beta
+ // ${axisType}-axis [10, 20, 30]
+ // ${chartType} [1, 4, 2]
+ // `;
+ // const chart = new XYChart(definition);
+ // expect(chart.getOption()).toEqual({
+ // [axisType + 'Axis']: { type: 'value' },
+ // [otherAxis + 'Axis']: { type: 'value' },
+ // series: [
+ // {
+ // type: chartType,
+ // data: [
+ // [10, 1],
+ // [20, 4],
+ // [30, 2],
+ // ],
+ // },
+ // ],
+ // });
+ // });
+
+ // it(`should render value ${axisType}Axis with range`, () => {
+ // const definition = `
+ // xychart-beta
+ // ${axisType}-axis 100 --> 200
+ // ${chartType} [1, 4, 2]
+ // `;
+ // const chart = new XYChart(definition);
+ // expect(chart.getOption()).toEqual({
+ // [axisType + 'Axis']: { type: 'value', min: 100, max:
200 },
+ // [otherAxis + 'Axis']: { type: 'value' },
+ // series: [
+ // {
+ // type: chartType,
+ // data: [
+ // [100, 1],
+ // [150, 4],
+ // [200, 2],
+ // ],
+ // },
+ // ],
+ // });
+ // });
+
+ // it(`should work with ${axisType}Axis title`, () => {
+ // const definition = `
+ // xychart-beta
+ // ${axisType}-axis "Cats" [cat1, "cat2 with space", cat3]
+ // ${chartType} [1, 4, 2]
+ // `;
+ // const chart = new XYChart(definition);
+ // expect(chart.getOption()).toEqual({
+ // [axisType + 'Axis']: {
+ // type: 'category',
+ // name: 'Cats',
+ // value: ['cat1', 'cat2 with space', 'cat3'],
+ // },
+ // [otherAxis + 'Axis']: { type: 'value' },
+ // series: [
+ // {
+ // type: chartType,
+ // data: [1, 4, 2],
+ // },
+ // ],
+ // });
+ // });
+ // });
+ // }
+ });
+ }
+});
diff --git a/src/charts/base.ts b/src/base/BaseChart.ts
similarity index 73%
rename from src/charts/base.ts
rename to src/base/BaseChart.ts
index 4ce30b0..b1590f9 100644
--- a/src/charts/base.ts
+++ b/src/base/BaseChart.ts
@@ -1,5 +1,5 @@
import type { EChartsOption } from 'echarts';
-import type { ChartDefinition } from '../parsers/base';
+import type { ChartDefinition } from '../types';
export abstract class BaseChart {
protected definition: ChartDefinition;
@@ -22,4 +22,12 @@ export abstract class BaseChart {
args: match[2].split(/\s+/).filter(Boolean),
};
}
+
+ protected getBaseOption(): EChartsOption {
+ return {
+ title: this.definition.title
+ ? { text: this.definition.title }
+ : undefined,
+ };
+ }
}
diff --git a/src/parsers/base.ts b/src/base/BaseParser.ts
similarity index 75%
rename from src/parsers/base.ts
rename to src/base/BaseParser.ts
index 87523cc..9d5eaaa 100644
--- a/src/parsers/base.ts
+++ b/src/base/BaseParser.ts
@@ -1,12 +1,3 @@
-export interface ChartDefinition {
- type: string;
- title?: string;
- data: Array<{
- name: string;
- value: number;
- }>;
-}
-
export class BaseParser {
protected parseFirstLine(line: string): { type: string; title?: string } {
// Parse chart type and title from first line
diff --git a/src/charts/__tests__/config.test.ts
b/src/charts/__tests__/config.test.ts
deleted file mode 100644
index 96b2541..0000000
--- a/src/charts/__tests__/config.test.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-import { XYChart } from '../mermaid/xychart';
-
-describe('Config', () => {
- it('should work with width and height', () => {
- const definition = `
----
-config:
- xyChart:
- width: 900
- height: 600
- themeVariables:
- xyChart:
- titleColor: "#ff0000"
----
-xychart-beta
- bar [1, 4, 2]
-`;
- const chart = new XYChart(definition);
- expect(chart.getOption()).toEqual({
- grid: {
- width: 900,
- height: 600,
- },
- title: {
- text: 'This is a simple example',
- textStyle: {
- color: '#ff0000',
- },
- },
- xAxis: {
- type: 'value',
- },
- yAxis: {
- type: 'value',
- },
- series: [
- {
- type: 'bar',
- data: [
- [1, 1],
- [2, 4],
- [3, 2],
- ],
- },
- ],
- });
- });
-
- it('should work with axis configurations', () => {
- const definition = `
----
-config:
- xyChart:
- xAxis:
- labelFontSize: 16
- labelPadding: 8
- showTitle: false
- tickLength: 8
- showAxisLine: false
- yAxis:
- showLabel: false
- titleFontSize: 18
- showTick: false
- axisLineWidth: 3
----
-xychart-beta
- bar [1, 4, 2]
-`;
- const chart = new XYChart(definition);
- expect(chart.getOption()).toEqual({
- xAxis: {
- type: 'value',
- show: true,
- axisLabel: {
- show: true,
- fontSize: 16,
- margin: 8,
- },
- axisTick: {
- show: true,
- length: 8,
- },
- axisLine: {
- show: false,
- },
- name: '', // due to showTitle: false
- nameShow: false,
- },
- yAxis: {
- type: 'value',
- show: true,
- axisLabel: {
- show: false,
- },
- name: '',
- nameTextStyle: {
- fontSize: 18,
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- show: true,
- lineStyle: {
- width: 3,
- },
- },
- },
- series: [
- {
- type: 'bar',
- data: [
- [1, 1],
- [2, 4],
- [3, 2],
- ],
- },
- ],
- });
- });
-
- it('should work with theme variables', () => {
- const definition = `
----
-config:
- themeVariables:
- xyChart:
- backgroundColor: "#f0f0f0"
- xAxisLabelColor: "#333"
- yAxisLineColor: "#666"
- plotColorPalette: "#f3456,#43445"
----
-xychart-beta
- bar [1, 4, 2]
-`;
- const chart = new XYChart(definition);
- expect(chart.getOption()).toEqual({
- backgroundColor: '#f0f0f0',
- xAxis: {
- type: 'value',
- axisLabel: {
- show: true,
- textStyle: {
- color: '#333',
- },
- },
- },
- yAxis: {
- type: 'value',
- axisLine: {
- show: true,
- lineStyle: {
- color: '#666',
- },
- },
- },
- color: ['#f3456', '#43445'],
- series: [
- {
- type: 'bar',
- data: [
- [1, 1],
- [2, 4],
- [3, 2],
- ],
- },
- ],
- });
- });
-});
diff --git a/src/charts/__tests__/xychart.test.ts
b/src/charts/__tests__/xychart.test.ts
deleted file mode 100644
index 94318c3..0000000
--- a/src/charts/__tests__/xychart.test.ts
+++ /dev/null
@@ -1,189 +0,0 @@
-import { XYChart } from '../mermaid/xychart';
-
-const chartTypes = ['line', 'bar'];
-
-describe('XYChart', () => {
- for (const chartType of chartTypes) {
- describe(chartType, () => {
- describe('orientation', () => {
- it('should render vertical chart', () => {
- const definition = `
-xychart-beta
- ${chartType} [1, 4, 3]
-`;
- const chart = new XYChart(definition);
- expect(chart.getOption()).toEqual({
- xAxis: {
- type: 'value',
- },
- yAxis: {
- type: 'value',
- },
- series: [
- {
- type: chartType,
- data: [
- [1, 1],
- [2, 4],
- [3, 3],
- ],
- },
- ],
- });
- });
-
- it('should render horizontal chart', () => {
- const definition = `
-xychart-beta horizontal
- ${chartType} [1, 4, 3]
-`;
- const chart = new XYChart(definition);
- expect(chart.getOption()).toEqual({
- xAxis: {
- type: 'value',
- },
- yAxis: {
- type: 'value',
- },
- series: [
- {
- type: chartType,
- data: [
- [1, 1],
- [4, 2],
- [3, 3],
- ],
- },
- ],
- });
- });
- });
-
- describe('title', () => {
- it('should render title', () => {
- const definition = `
-xychart-beta
- title "This is a simple example"
- ${chartType} [1, 4, 2]
-`;
- const chart = new XYChart(definition);
- expect(chart.getOption()).toEqual({
- xAxis: {
- type: 'value',
- },
- yAxis: {
- type: 'value',
- },
- series: [
- {
- type: chartType,
- data: [
- [1, 1],
- [2, 4],
- [3, 3],
- ],
- },
- ],
- });
- });
- });
-
- const axisTypes = ['x', 'y'];
- for (const axisType of axisTypes) {
- describe(axisType, () => {
- const otherAxis = axisType === 'x' ? 'y' : 'x';
- it(`should render category ${axisType}Axis`, () => {
- const definition = `
-xychart-beta
- ${axisType}-axis [cat1, "cat2 with space", cat3]
- ${chartType} [1, 4, 2]
-`;
- const chart = new XYChart(definition);
- expect(chart.getOption()).toEqual({
- [axisType + 'Axis']: {
- type: 'category',
- data: ['cat1', 'cat2 with space', 'cat3'],
- },
- [otherAxis + 'Axis']: { type: 'value' },
- series: [
- {
- type: chartType,
- data: [1, 4, 2],
- },
- ],
- });
- });
-
- it(`should render value ${axisType}Axis with two value axes`, () => {
- const definition = `
-xychart-beta
- ${axisType}-axis [10, 20, 30]
- ${chartType} [1, 4, 2]
-`;
- const chart = new XYChart(definition);
- expect(chart.getOption()).toEqual({
- [axisType + 'Axis']: { type: 'value' },
- [otherAxis + 'Axis']: { type: 'value' },
- series: [
- {
- type: chartType,
- data: [
- [10, 1],
- [20, 4],
- [30, 2],
- ],
- },
- ],
- });
- });
-
- it(`should render value ${axisType}Axis with range`, () => {
- const definition = `
-xychart-beta
- ${axisType}-axis 100 --> 200
- ${chartType} [1, 4, 2]
-`;
- const chart = new XYChart(definition);
- expect(chart.getOption()).toEqual({
- [axisType + 'Axis']: { type: 'value', min: 100, max: 200 },
- [otherAxis + 'Axis']: { type: 'value' },
- series: [
- {
- type: chartType,
- data: [
- [100, 1],
- [150, 4],
- [200, 2],
- ],
- },
- ],
- });
- });
-
- it(`should work with ${axisType}Axis title`, () => {
- const definition = `
-xychart-beta
- ${axisType}-axis "Cats" [cat1, "cat2 with space", cat3]
- ${chartType} [1, 4, 2]
-`;
- const chart = new XYChart(definition);
- expect(chart.getOption()).toEqual({
- [axisType + 'Axis']: {
- type: 'category',
- name: 'Cats',
- value: ['cat1', 'cat2 with space', 'cat3'],
- },
- [otherAxis + 'Axis']: { type: 'value' },
- series: [
- {
- type: chartType,
- data: [1, 4, 2],
- },
- ],
- });
- });
- });
- }
- });
- }
-});
diff --git a/src/charts/mermaid/xychart.ts b/src/charts/mermaid/xychart.ts
deleted file mode 100644
index 0432527..0000000
--- a/src/charts/mermaid/xychart.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import { BaseChart } from '../base';
-import type {
- EChartsOption,
- XAXisComponentOption,
- YAXisComponentOption,
-} from 'echarts';
-
-interface XYChartData {
- type: string;
- title?: string;
- orientation?: string;
- xAxis?: {
- min?: number;
- max?: number;
- data?: string[];
- };
- yAxis?: {
- min?: number;
- max?: number;
- };
- series: Array<{
- type: string;
- data: number[];
- }>;
-}
-
-export class XYChart extends BaseChart {
- parse(): XYChartData {
- const lines = this.definition.split('\n');
- const result: XYChartData = {
- type: 'xychart-beta',
- series: [],
- };
-
- let currentSeries: { type: string; data: number[] } | null = null;
-
- for (const line of lines) {
- if (line.trim().startsWith('---')) continue;
-
- // 处理指令
- if (line.trim().startsWith('%%')) {
- const { type, args } = this.parseDirective(line);
- switch (type) {
- case 'title':
- result.title = args.join(' ');
- break;
- case 'orientation':
- result.orientation = args[0];
- break;
- }
- continue;
- }
-
- const dataMatch = line.match(/^\s*(\w+)\s*$/);
- if (dataMatch) {
- currentSeries = {
- type: dataMatch[1],
- data: [],
- };
- result.series.push(currentSeries);
- continue;
- }
-
- // 处理数据点
- if (currentSeries) {
- const pointMatch = line.match(
- /^\s*(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)\s*$/
- );
- if (pointMatch) {
- const x = Number(pointMatch[1]);
- const y = Number(pointMatch[2]);
- currentSeries.data.push(y);
- }
- }
- }
-
- return result;
- }
-
- getOption(): EChartsOption {
- const parsed = this.parse();
- const option: EChartsOption = {};
-
- if (parsed.title) {
- option.title = { text: parsed.title };
- }
-
- if (parsed.orientation === 'horizontal') {
- option.xAxis = { type: 'value' } as XAXisComponentOption;
- option.yAxis = {
- type: 'category',
- data:
- parsed.xAxis?.data ||
- this.generateDefaultCategories(parsed.series[0]?.data.length),
- } as YAXisComponentOption;
- } else {
- option.xAxis = {
- type: parsed.xAxis?.min !== undefined ? 'value' : 'category',
- ...parsed.xAxis,
- } as XAXisComponentOption;
- option.yAxis = {
- type: 'value',
- ...parsed.yAxis,
- } as YAXisComponentOption;
-
- if (!parsed.xAxis?.data && option.xAxis.type === 'category') {
- (option.xAxis as any).data = this.generateDefaultCategories(
- parsed.series[0]?.data.length
- );
- }
- }
-
- option.series = parsed.series as any;
- return option;
- }
-
- private generateDefaultCategories(count: number): string[] {
- return Array.from({ length: count }, (_, i) => (i + 1).toString());
- }
-}
diff --git a/src/charts/types.ts b/src/charts/types.ts
deleted file mode 100644
index a76f0c5..0000000
--- a/src/charts/types.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type ChartType = 'xychart-beta' | 'pie';
diff --git a/src/charts/extended/README.md b/src/extended/README.md
similarity index 100%
rename from src/charts/extended/README.md
rename to src/extended/README.md
diff --git a/src/index.ts b/src/index.ts
index 0e21443..0215cfa 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,8 +1,10 @@
-import { PieParser } from './parsers/pie';
-import { PieChart } from './charts/pie';
-import type { ChartDefinition } from './parsers/base';
+import { PieParser } from './mermaid/pie/PieParser';
+import { PieChart } from './mermaid/pie/PieChart';
+import type { ChartDefinition } from './types';
+import { XYChartParser } from './mermaid/xy/XYChartParser';
+import { XYChart } from './mermaid/xy/XYChart';
-type ChartType = 'pie';
+type ChartType = 'pie' | 'xychart-beta';
export class EChartsFromMermaid {
static getOption(definition: string) {
@@ -18,15 +20,17 @@ export class EChartsFromMermaid {
}
private static getParser(type: ChartType) {
- const parsers: Record<ChartType, PieParser> = {
+ const parsers: Record<ChartType, PieParser | XYChartParser> = {
pie: new PieParser(),
+ 'xychart-beta': new XYChartParser(),
};
return parsers[type];
}
private static getChart(type: ChartType, chartDef: ChartDefinition) {
- const charts: Record<ChartType, PieChart> = {
+ const charts: Record<ChartType, PieChart | XYChart> = {
pie: new PieChart(chartDef),
+ 'xychart-beta': new XYChart(chartDef),
};
return charts[type];
}
diff --git a/src/charts/mermaid/README.md b/src/mermaid/README.md
similarity index 100%
rename from src/charts/mermaid/README.md
rename to src/mermaid/README.md
diff --git a/src/charts/pie.ts b/src/mermaid/pie/PieChart.ts
similarity index 63%
rename from src/charts/pie.ts
rename to src/mermaid/pie/PieChart.ts
index 8d9f052..5e4c5fc 100644
--- a/src/charts/pie.ts
+++ b/src/mermaid/pie/PieChart.ts
@@ -1,6 +1,6 @@
-import { BaseChart } from './base';
import type { EChartsOption } from 'echarts';
-import type { ChartDefinition } from '../parsers/base';
+import type { ChartDefinition } from '../../types';
+import { BaseChart } from '../../base/BaseChart';
export class PieChart extends BaseChart {
constructor(definition: ChartDefinition) {
@@ -9,9 +9,7 @@ export class PieChart extends BaseChart {
getOption(): EChartsOption {
return {
- title: this.definition.title
- ? { text: this.definition.title }
- : undefined,
+ ...this.getBaseOption(),
series: [
{
type: 'pie',
diff --git a/src/parsers/pie.ts b/src/mermaid/pie/PieParser.ts
similarity index 81%
rename from src/parsers/pie.ts
rename to src/mermaid/pie/PieParser.ts
index 757a4de..ca5f385 100644
--- a/src/parsers/pie.ts
+++ b/src/mermaid/pie/PieParser.ts
@@ -1,4 +1,5 @@
-import { BaseParser, ChartDefinition } from './base';
+import { BaseParser } from '../../base/BaseParser';
+import type { ChartDefinition } from '../../types';
export class PieParser extends BaseParser {
parse(definition: string): ChartDefinition {
diff --git a/src/mermaid/xy/XYChart.ts b/src/mermaid/xy/XYChart.ts
new file mode 100644
index 0000000..cfa7f64
--- /dev/null
+++ b/src/mermaid/xy/XYChart.ts
@@ -0,0 +1,13 @@
+import { BaseChart } from '../../base/BaseChart';
+import type {
+ EChartsOption,
+ XAXisComponentOption,
+ YAXisComponentOption,
+} from 'echarts';
+
+export class XYChart extends BaseChart {
+ getOption(): EChartsOption {
+ console.log(this.definition);
+ return {};
+ }
+}
diff --git a/src/mermaid/xy/XYChartParser.ts b/src/mermaid/xy/XYChartParser.ts
new file mode 100644
index 0000000..942ecd3
--- /dev/null
+++ b/src/mermaid/xy/XYChartParser.ts
@@ -0,0 +1,11 @@
+import { BaseParser } from '../../base/BaseParser';
+import type { ChartDefinition } from '../../types';
+
+export class XYChartParser extends BaseParser {
+ parse(text: string): ChartDefinition {
+ return {
+ type: 'xychart-beta',
+ data: [],
+ };
+ }
+}
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..c3360cf
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,10 @@
+export type ChartType = 'xychart-beta' | 'pie';
+
+export interface ChartDefinition {
+ type: string;
+ title?: string;
+ data: Array<{
+ name: string;
+ value: number;
+ }>;
+}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
