mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-28 07:03:17 +08:00
Fixed prettier issues
This commit is contained in:
parent
89cfa17b07
commit
1c8497474a
@ -8,14 +8,14 @@ export type SimplePlotDataType = [string | number, number][];
|
||||
|
||||
export interface LinePlotData {
|
||||
type: 'line';
|
||||
strokeFill: string,
|
||||
strokeWidth: number,
|
||||
strokeFill: string;
|
||||
strokeWidth: number;
|
||||
data: SimplePlotDataType;
|
||||
}
|
||||
|
||||
export interface BarPlotData {
|
||||
type: 'bar'
|
||||
fill: string,
|
||||
type: 'bar';
|
||||
fill: string;
|
||||
data: SimplePlotDataType;
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@ export interface BandAxisDataType {
|
||||
categories: string[];
|
||||
}
|
||||
|
||||
export interface LinearAxisDataType{
|
||||
export interface LinearAxisDataType {
|
||||
title: string;
|
||||
min: number;
|
||||
max: number;
|
||||
@ -42,7 +42,6 @@ export function isBandAxisData(data: any): data is BandAxisDataType {
|
||||
return data.categories && Array.isArray(data.categories);
|
||||
}
|
||||
|
||||
|
||||
export interface XYChartData {
|
||||
xAxis: AxisDataType;
|
||||
yAxis: AxisDataType;
|
||||
|
@ -1,13 +1,16 @@
|
||||
import { XYChartConfig } from '../../../../config.type.js';
|
||||
import {
|
||||
BoundingRect,
|
||||
ChartComponent,
|
||||
Dimension,
|
||||
DrawableElem,
|
||||
Point,
|
||||
XYChartData,
|
||||
BoundingRect,
|
||||
ChartComponent,
|
||||
Dimension,
|
||||
DrawableElem,
|
||||
Point,
|
||||
XYChartData,
|
||||
} from '../Interfaces.js';
|
||||
import { ITextDimensionCalculator, TextDimensionCalculatorWithFont } from '../TextDimensionCalculator.js';
|
||||
import {
|
||||
ITextDimensionCalculator,
|
||||
TextDimensionCalculatorWithFont,
|
||||
} from '../TextDimensionCalculator.js';
|
||||
|
||||
export class ChartTitle implements ChartComponent {
|
||||
private boundingRect: BoundingRect;
|
||||
@ -30,7 +33,10 @@ export class ChartTitle implements ChartComponent {
|
||||
this.boundingRect.y = point.y;
|
||||
}
|
||||
calculateSpace(availableSpace: Dimension): Dimension {
|
||||
const titleDimension = this.textDimensionCalculator.getDimension([this.chartData.title], this.chartConfig.titleFontSize);
|
||||
const titleDimension = this.textDimensionCalculator.getDimension(
|
||||
[this.chartData.title],
|
||||
this.chartConfig.titleFontSize
|
||||
);
|
||||
const widthRequired = Math.max(titleDimension.width, availableSpace.width);
|
||||
const heightRequired = titleDimension.height + 2 * this.chartConfig.titlePadding;
|
||||
if (
|
||||
|
@ -58,8 +58,8 @@ export abstract class BaseAxis implements IAxis {
|
||||
}
|
||||
|
||||
recalculateOuterPaddingToDrawBar(): void {
|
||||
if((0.7 * this.getTickDistance()) > (this.outerPadding * 2) ) {
|
||||
this.outerPadding = Math.floor((0.7 * this.getTickDistance())/2);
|
||||
if (0.7 * this.getTickDistance() > this.outerPadding * 2) {
|
||||
this.outerPadding = Math.floor((0.7 * this.getTickDistance()) / 2);
|
||||
}
|
||||
this.recalculateScale();
|
||||
}
|
||||
@ -267,7 +267,11 @@ export abstract class BaseAxis implements IAxis {
|
||||
data: this.getTickValues().map((tick) => ({
|
||||
text: tick.toString(),
|
||||
x: this.getScaleValue(tick),
|
||||
y: this.boundingRect.y + this.boundingRect.height - this.axisConfig.lablePadding - this.axisConfig.tickLength,
|
||||
y:
|
||||
this.boundingRect.y +
|
||||
this.boundingRect.height -
|
||||
this.axisConfig.lablePadding -
|
||||
this.axisConfig.tickLength,
|
||||
fill: this.axisConfig.labelFill,
|
||||
fontSize: this.axisConfig.labelFontSize,
|
||||
rotation: 0,
|
||||
@ -282,7 +286,9 @@ export abstract class BaseAxis implements IAxis {
|
||||
type: 'path',
|
||||
groupTexts: ['bottom-axis', 'ticks'],
|
||||
data: this.getTickValues().map((tick) => ({
|
||||
path: `M ${this.getScaleValue(tick)},${y + this.boundingRect.height} L ${this.getScaleValue(tick)},${
|
||||
path: `M ${this.getScaleValue(tick)},${
|
||||
y + this.boundingRect.height
|
||||
} L ${this.getScaleValue(tick)},${
|
||||
y + this.boundingRect.height - this.axisConfig.tickLength
|
||||
}`,
|
||||
strokeFill: this.axisConfig.tickFill,
|
||||
@ -316,7 +322,7 @@ export abstract class BaseAxis implements IAxis {
|
||||
return this.getDrawaableElementsForLeftAxis();
|
||||
}
|
||||
if (this.axisPosition === 'right') {
|
||||
throw Error("Drawing of right axis is not implemented");
|
||||
throw Error('Drawing of right axis is not implemented');
|
||||
}
|
||||
if (this.axisPosition === 'bottom') {
|
||||
return this.getDrawaableElementsForBottomAxis();
|
||||
|
@ -1,9 +1,5 @@
|
||||
import { XYChartAxisConfig } from '../../../../../config.type.js';
|
||||
import {
|
||||
AxisDataType,
|
||||
ChartComponent,
|
||||
isBandAxisData,
|
||||
} from '../../Interfaces.js';
|
||||
import { AxisDataType, ChartComponent, isBandAxisData } from '../../Interfaces.js';
|
||||
import { TextDimensionCalculatorWithFont } from '../../TextDimensionCalculator.js';
|
||||
import { BandAxis } from './BandAxis.js';
|
||||
import { LinearAxis } from './LinearAxis.js';
|
||||
@ -19,7 +15,11 @@ export interface IAxis extends ChartComponent {
|
||||
setRange(range: [number, number]): void;
|
||||
}
|
||||
|
||||
export function getAxis(data: AxisDataType, axisConfig: XYChartAxisConfig, fontFamily?: string): IAxis {
|
||||
export function getAxis(
|
||||
data: AxisDataType,
|
||||
axisConfig: XYChartAxisConfig,
|
||||
fontFamily?: string
|
||||
): IAxis {
|
||||
const textDimansionCalculator = new TextDimensionCalculatorWithFont(fontFamily);
|
||||
if (isBandAxisData(data)) {
|
||||
return new BandAxis(axisConfig, data.categories, data.title, textDimansionCalculator);
|
||||
|
@ -1,9 +1,5 @@
|
||||
import { XYChartConfig } from '../../../../../config.type.js';
|
||||
import {
|
||||
BarPlotData,
|
||||
BoundingRect,
|
||||
DrawableElem,
|
||||
} from '../../Interfaces.js';
|
||||
import { BarPlotData, BoundingRect, DrawableElem } from '../../Interfaces.js';
|
||||
import { IAxis } from '../axis/index.js';
|
||||
|
||||
export class BarPlot {
|
||||
|
@ -1,7 +1,10 @@
|
||||
import { XYChartConfig } from '../../../../../config.type.js';
|
||||
import { BoundingRect, DrawableElem } from '../../Interfaces.js';
|
||||
export class PlotBorder {
|
||||
constructor(private boundingRect: BoundingRect, private orientation: XYChartConfig['chartOrientation']) {}
|
||||
constructor(
|
||||
private boundingRect: BoundingRect,
|
||||
private orientation: XYChartConfig['chartOrientation']
|
||||
) {}
|
||||
|
||||
getDrawableElement(): DrawableElem[] {
|
||||
const { x, y, width, height } = this.boundingRect;
|
||||
|
@ -1,10 +1,4 @@
|
||||
import {
|
||||
XYChartData,
|
||||
Dimension,
|
||||
BoundingRect,
|
||||
DrawableElem,
|
||||
Point,
|
||||
} from '../../Interfaces.js';
|
||||
import { XYChartData, Dimension, BoundingRect, DrawableElem, Point } from '../../Interfaces.js';
|
||||
import { IAxis } from '../axis/index.js';
|
||||
import { ChartComponent } from '../../Interfaces.js';
|
||||
import { LinePlot } from './LinePlot.js';
|
||||
@ -12,9 +6,8 @@ import { PlotBorder } from './PlotBorder.js';
|
||||
import { BarPlot } from './BarPlot.js';
|
||||
import { XYChartConfig } from '../../../../../config.type.js';
|
||||
|
||||
|
||||
export interface IPlot extends ChartComponent {
|
||||
setAxes(xAxis: IAxis, yAxis: IAxis): void
|
||||
setAxes(xAxis: IAxis, yAxis: IAxis): void;
|
||||
}
|
||||
|
||||
export class Plot implements IPlot {
|
||||
@ -22,10 +15,7 @@ export class Plot implements IPlot {
|
||||
private xAxis?: IAxis;
|
||||
private yAxis?: IAxis;
|
||||
|
||||
constructor(
|
||||
private chartConfig: XYChartConfig,
|
||||
private chartData: XYChartData,
|
||||
) {
|
||||
constructor(private chartConfig: XYChartConfig, private chartData: XYChartData) {
|
||||
this.boundingRect = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
@ -51,33 +41,43 @@ export class Plot implements IPlot {
|
||||
};
|
||||
}
|
||||
getDrawableElements(): DrawableElem[] {
|
||||
if(!(this.xAxis && this.yAxis)) {
|
||||
throw Error("Axes must be passed to render Plots");
|
||||
if (!(this.xAxis && this.yAxis)) {
|
||||
throw Error('Axes must be passed to render Plots');
|
||||
}
|
||||
const drawableElem: DrawableElem[] = [
|
||||
...new PlotBorder(this.boundingRect, this.chartConfig.chartOrientation).getDrawableElement()
|
||||
...new PlotBorder(this.boundingRect, this.chartConfig.chartOrientation).getDrawableElement(),
|
||||
];
|
||||
for(const plot of this.chartData.plots) {
|
||||
switch(plot.type) {
|
||||
case 'line': {
|
||||
const linePlot = new LinePlot(plot, this.xAxis, this.yAxis, this.chartConfig.chartOrientation);
|
||||
drawableElem.push(...linePlot.getDrawableElement())
|
||||
}
|
||||
break;
|
||||
case 'bar': {
|
||||
const barPlot = new BarPlot(plot, this.boundingRect, this.xAxis, this.yAxis, this.chartConfig.chartOrientation)
|
||||
drawableElem.push(...barPlot.getDrawableElement());
|
||||
}
|
||||
break;
|
||||
for (const plot of this.chartData.plots) {
|
||||
switch (plot.type) {
|
||||
case 'line':
|
||||
{
|
||||
const linePlot = new LinePlot(
|
||||
plot,
|
||||
this.xAxis,
|
||||
this.yAxis,
|
||||
this.chartConfig.chartOrientation
|
||||
);
|
||||
drawableElem.push(...linePlot.getDrawableElement());
|
||||
}
|
||||
break;
|
||||
case 'bar':
|
||||
{
|
||||
const barPlot = new BarPlot(
|
||||
plot,
|
||||
this.boundingRect,
|
||||
this.xAxis,
|
||||
this.yAxis,
|
||||
this.chartConfig.chartOrientation
|
||||
);
|
||||
drawableElem.push(...barPlot.getDrawableElement());
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
return drawableElem;
|
||||
}
|
||||
}
|
||||
|
||||
export function getPlotComponent(
|
||||
chartConfig: XYChartConfig,
|
||||
chartData: XYChartData,
|
||||
): IPlot {
|
||||
export function getPlotComponent(chartConfig: XYChartConfig, chartData: XYChartData): IPlot {
|
||||
return new Plot(chartConfig, chartData);
|
||||
}
|
||||
|
@ -1,14 +1,10 @@
|
||||
// @ts-ignore: TODO Fix ts errors
|
||||
import { XYChartConfig } from '../../../config.type.js';
|
||||
import { log } from '../../../logger.js';
|
||||
import {
|
||||
DrawableElem,
|
||||
XYChartData,
|
||||
} from './Interfaces.js';
|
||||
import { DrawableElem, XYChartData } from './Interfaces.js';
|
||||
import { Orchestrator } from './Orchestrator.js';
|
||||
|
||||
export class XYChartBuilder {
|
||||
|
||||
static build(config: XYChartConfig, chartData: XYChartData): DrawableElem[] {
|
||||
log.trace(`Build start with Config: ${JSON.stringify(config, null, 2)}`);
|
||||
log.trace(`Build start with ChartData: ${JSON.stringify(chartData, null, 2)}`);
|
||||
|
@ -111,20 +111,19 @@ describe('Testing xychart jison file', () => {
|
||||
str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2 ] \n ';
|
||||
expect(parserFnConstructor(str)).not.toThrow();
|
||||
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName');
|
||||
expect(mockDB.setXAxisBand).toHaveBeenCalledWith(["cat1", "cat2"]);
|
||||
expect(mockDB.setXAxisBand).toHaveBeenCalledWith(['cat1', 'cat2']);
|
||||
clearMocks();
|
||||
|
||||
|
||||
str = `xychart-beta \n x-axis "this is x axis" [category1, "category 2", category3]\n`
|
||||
str = `xychart-beta \n x-axis "this is x axis" [category1, "category 2", category3]\n`;
|
||||
expect(parserFnConstructor(str)).not.toThrow();
|
||||
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('this is x axis');
|
||||
expect(mockDB.setXAxisBand).toHaveBeenCalledWith(["category1", "category 2", "category3"]);
|
||||
expect(mockDB.setXAxisBand).toHaveBeenCalledWith(['category1', 'category 2', 'category3']);
|
||||
clearMocks();
|
||||
|
||||
str = 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 , cat3] \n ';
|
||||
expect(parserFnConstructor(str)).not.toThrow();
|
||||
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName');
|
||||
expect(mockDB.setXAxisBand).toHaveBeenCalledWith(["cat1 with space", "cat2", "cat3"]);
|
||||
expect(mockDB.setXAxisBand).toHaveBeenCalledWith(['cat1 with space', 'cat2', 'cat3']);
|
||||
clearMocks();
|
||||
|
||||
str = 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 asdf , cat3] \n ';
|
||||
@ -176,8 +175,7 @@ describe('Testing xychart jison file', () => {
|
||||
expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle with space', [23, -45, 56.6]);
|
||||
|
||||
// set line data without title
|
||||
str =
|
||||
'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line [ +23 , -45 , 56.6 ] ';
|
||||
str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line [ +23 , -45 , 56.6 ] ';
|
||||
expect(parserFnConstructor(str)).not.toThrow();
|
||||
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName');
|
||||
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName');
|
||||
@ -206,8 +204,7 @@ describe('Testing xychart jison file', () => {
|
||||
clearMocks();
|
||||
|
||||
// set bar data without title
|
||||
str =
|
||||
'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar [ +23 , -45 , 56.6 ] ';
|
||||
str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar [ +23 , -45 , 56.6 ] ';
|
||||
expect(parserFnConstructor(str)).not.toThrow();
|
||||
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName');
|
||||
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName');
|
||||
@ -243,7 +240,7 @@ describe('Testing xychart jison file', () => {
|
||||
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yaxisText');
|
||||
expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(10, 150);
|
||||
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('this is x axis');
|
||||
expect(mockDB.setXAxisBand).toHaveBeenCalledWith(["category1", "category 2", "category3"]);
|
||||
expect(mockDB.setXAxisBand).toHaveBeenCalledWith(['category1', 'category 2', 'category3']);
|
||||
expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle1', [23, 45, 56.6]);
|
||||
expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle2', [13, 42, 56.89]);
|
||||
expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle1', [11, 45.5, 67, 23]);
|
||||
|
@ -12,11 +12,7 @@ import {
|
||||
clear as commonClear,
|
||||
} from '../../commonDb.js';
|
||||
import { XYChartBuilder } from './chartBuilder/index.js';
|
||||
import {
|
||||
DrawableElem,
|
||||
XYChartData,
|
||||
isBandAxisData,
|
||||
} from './chartBuilder/Interfaces.js';
|
||||
import { DrawableElem, XYChartData, isBandAxisData } from './chartBuilder/Interfaces.js';
|
||||
import { XYChartConfig } from '../../config.type.js';
|
||||
|
||||
const config = configApi.getConfig();
|
||||
|
Loading…
x
Reference in New Issue
Block a user